commit
978b917b26
Binary file not shown.
@ -1,124 +1,864 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
http-equiv="Cache-Control"
|
||||
content="no-cache, no-store, must-revalidate"
|
||||
/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<style>
|
||||
/* From Uiverse.io by Cobp */
|
||||
.container-ai-input {
|
||||
--perspective: 1000px;
|
||||
--translateY: 45px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -2.5rem;
|
||||
bottom: -2.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<!-- style -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-pc-ui@4/lib/style.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table@4/lib/style.css">
|
||||
<!-- vue -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
|
||||
<!-- table -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vxe-pc-ui@4"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/vxe-table@4"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div>
|
||||
<p>
|
||||
<vxe-button @click="getTreeExpansionEvent">获取已展开</vxe-button>
|
||||
<vxe-button @click="expandAllEvent">展开所有</vxe-button>
|
||||
<vxe-button @click="clearExpandEvent">关闭所有</vxe-button>
|
||||
</p>
|
||||
|
||||
<vxe-table border="inner" :max-height="400" :menu-config="menuConfig" ref="tableRef" :column-config="{resizable: true}"
|
||||
:tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}" :data="tableData"
|
||||
@toggle-tree-expand="toggleExpandChangeEvent">
|
||||
<vxe-column field="name" title="Name" tree-node></vxe-column>
|
||||
<vxe-column field="size" title="Size"></vxe-column>
|
||||
<vxe-column field="type" title="Type"></vxe-column>
|
||||
<vxe-column field="date" title="Date"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
var App = {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{ id: 10000, parentId: null, name: 'Test1', type: 'mp3', size: 1024, date: '2020-08-01' },
|
||||
{ id: 10050, parentId: null, name: 'Test2', type: 'mp4', size: 0, date: '2021-04-01' },
|
||||
{ id: 24300, parentId: 10050, name: 'Test3', type: 'avi', size: 1024, date: '2020-03-01' },
|
||||
{ id: 20045, parentId: 24300, name: 'Test4', type: 'html', size: 600, date: '2021-04-01' },
|
||||
{ id: 10053, parentId: 24300, name: 'Test5', type: 'avi', size: 0, date: '2021-04-01' },
|
||||
{ id: 24330, parentId: 10053, name: 'Test6', type: 'txt', size: 25, date: '2021-10-01' },
|
||||
{ id: 21011, parentId: 10053, name: 'Test7', type: 'pdf', size: 512, date: '2020-01-01' },
|
||||
{ id: 22200, parentId: 10053, name: 'Test8', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 23666, parentId: null, name: 'Test9', type: 'xlsx', size: 2048, date: '2020-11-01' },
|
||||
{ id: 23677, parentId: 23666, name: 'Test10', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 23671, parentId: 23677, name: 'Test11', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 23672, parentId: 23677, name: 'Test12', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 23688, parentId: 23666, name: 'Test13', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 23681, parentId: 23688, name: 'Test14', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 23682, parentId: 23688, name: 'Test15', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 24555, parentId: null, name: 'Test16', type: 'avi', size: 224, date: '2020-10-01' },
|
||||
{ id: 24566, parentId: 24555, name: 'Test17', type: 'js', size: 1024, date: '2021-06-01' },
|
||||
{ id: 24577, parentId: 24555, name: 'Test18', type: 'js', size: 1024, date: '2021-06-01' }
|
||||
],
|
||||
menuConfig: {
|
||||
header: {
|
||||
options: [
|
||||
[
|
||||
{ code: 'myExportMenu', name: '导出数据' }
|
||||
]
|
||||
]
|
||||
},
|
||||
body: {
|
||||
options: [
|
||||
[
|
||||
{ code: 'myExportMenu', name: '导出数据' },
|
||||
{ code: 'myPrintMenu', name: '打印' },
|
||||
{ code: 'myLinkMenu', name: '打开官网' }
|
||||
]
|
||||
]
|
||||
},
|
||||
footer: {
|
||||
options: [
|
||||
[
|
||||
{ code: 'myLinkMenu', name: '打开官网' }
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
.container-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
z-index: 9;
|
||||
transform-style: preserve-3d;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.container-wrap:hover {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.container-wrap:active {
|
||||
transform: translateX(-50%) translateY(-50%) scale(0.95);
|
||||
}
|
||||
|
||||
.container-wrap:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-55%);
|
||||
width: 12rem;
|
||||
height: 11rem;
|
||||
background-color: #dedfe0;
|
||||
border-radius: 3.2rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.container-wrap:hover:after {
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
height: 12rem;
|
||||
}
|
||||
|
||||
.container-wrap input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container-wrap input:checked + .card .eyes {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.container-wrap input:checked + .card .content-card {
|
||||
width: 260px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.container-wrap input:checked + .card .background-blur-balls {
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.container-wrap input:checked + .card .container-ai-chat {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
z-index: 99999;
|
||||
pointer-events: visible;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* background-color: #fff; */
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
transition: all 0.6s ease;
|
||||
border-radius: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transform: translateZ(50px);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 60, 0.25),
|
||||
inset 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.background-blur-balls {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -10;
|
||||
border-radius: 3rem;
|
||||
transition: all 0.3s ease;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
overflow: hidden;
|
||||
}
|
||||
.balls {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
animation: rotate-background-balls 10s linear infinite;
|
||||
}
|
||||
|
||||
.container-wrap:hover .balls {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.background-blur-balls .ball {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(30px);
|
||||
}
|
||||
|
||||
.background-blur-balls .ball.violet {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #9147ff;
|
||||
}
|
||||
|
||||
.background-blur-balls .ball.green {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: #34d399;
|
||||
}
|
||||
|
||||
.background-blur-balls .ball.rosa {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
background-color: #ec4899;
|
||||
}
|
||||
|
||||
.background-blur-balls .ball.cyan {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background-color: #05e0f5;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
width: 12rem;
|
||||
height: 12rem;
|
||||
display: flex;
|
||||
border-radius: 3rem;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.background-blur-card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(50px);
|
||||
}
|
||||
|
||||
.eyes {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 52px;
|
||||
gap: 2rem;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
& .eye {
|
||||
width: 26px;
|
||||
height: 52px;
|
||||
background-color: #fff;
|
||||
border-radius: 16px;
|
||||
animation: animate-eyes 10s infinite linear;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.eyes.happy {
|
||||
display: none;
|
||||
color: #fff;
|
||||
gap: 0;
|
||||
|
||||
& svg {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.container-wrap:hover .eyes .eye {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-wrap:hover .eyes.happy {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container-ai-chat {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 6px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.container-wrap .card .chat {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
border-radius: 15px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.container-wrap .card .chat .chat-bot {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card .chat .chat-bot textarea {
|
||||
background-color: transparent;
|
||||
border-radius: 16px;
|
||||
border: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #8b8b8b;
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
padding: 10px;
|
||||
resize: none;
|
||||
outline: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #dedfe0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: #8b8b8b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&::placeholder {
|
||||
color: #dedfe0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&:focus::placeholder {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
}
|
||||
|
||||
.card .chat .options {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
padding: 10px;
|
||||
|
||||
& button {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
}
|
||||
|
||||
.card .chat .options .btns-add {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
|
||||
& button {
|
||||
display: flex;
|
||||
color: rgba(0, 0, 0, 0.1);
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
color: #8b8b8b;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleExpandChangeEvent(params) {
|
||||
const $table = this.$refs.tableRef
|
||||
if ($table) {
|
||||
const { row, expanded } = params
|
||||
console.log('节点展开事件', expanded, '获取父节点：', $table.getParentRow(row))
|
||||
}
|
||||
},
|
||||
getTreeExpansionEvent() {
|
||||
const $table = this.$refs.tableRef
|
||||
if ($table) {
|
||||
const treeExpandRecords = $table.getTreeExpandRecords()
|
||||
VxeUI.modal.alert(treeExpandRecords.length)
|
||||
}
|
||||
},
|
||||
expandAllEvent() {
|
||||
const $table = this.$refs.tableRef
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
},
|
||||
clearExpandEvent() {
|
||||
const $table = this.$refs.tableRef
|
||||
if ($table) {
|
||||
$table.clearTreeExpand()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card .chat .options .btn-submit {
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
background-image: linear-gradient(to top, #ff4141, #9147ff, #3b82f6);
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 6px 2px -4px rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
opacity: 0.7;
|
||||
transition: all 0.15s ease;
|
||||
|
||||
& i {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 6px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
backdrop-filter: blur(3px);
|
||||
color: #cfcfcf;
|
||||
}
|
||||
& svg {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
& svg {
|
||||
color: #f3f6fd;
|
||||
filter: drop-shadow(0 0 5px #ffffff);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus svg {
|
||||
color: #f3f6fd;
|
||||
filter: drop-shadow(0 0 5px #ffffff);
|
||||
transform: scale(1.2) rotate(45deg) translateX(-2px) translateY(1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
}
|
||||
|
||||
.area:nth-child(15):hover ~ .container-wrap .card,
|
||||
.area:nth-child(15):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(-15deg)
|
||||
rotateY(15deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(14):hover ~ .container-wrap .card,
|
||||
.area:nth-child(14):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(7deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(13):hover ~ .container-wrap .card,
|
||||
.area:nth-child(13):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(-15deg) rotateY(0)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(12):hover ~ .container-wrap .card,
|
||||
.area:nth-child(12):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(-15deg)
|
||||
rotateY(-7deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(11):hover ~ .container-wrap .card,
|
||||
.area:nth-child(11):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(-15deg)
|
||||
rotateY(-15deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(10):hover ~ .container-wrap .card,
|
||||
.area:nth-child(10):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(0) rotateY(15deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(9):hover ~ .container-wrap .card,
|
||||
.area:nth-child(9):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(0) rotateY(7deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(8):hover ~ .container-wrap .card,
|
||||
.area:nth-child(8):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(0) rotateY(0)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(7):hover ~ .container-wrap .card,
|
||||
.area:nth-child(7):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(0) rotateY(-7deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(6):hover ~ .container-wrap .card,
|
||||
.area:nth-child(6):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(0) rotateY(-15deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(5):hover ~ .container-wrap .card,
|
||||
.area:nth-child(5):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(15deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(4):hover ~ .container-wrap .card,
|
||||
.area:nth-child(4):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(7deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(3):hover ~ .container-wrap .card,
|
||||
.area:nth-child(3):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(0)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(2):hover ~ .container-wrap .card,
|
||||
.area:nth-child(2):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(15deg) rotateY(-7deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
.area:nth-child(1):hover ~ .container-wrap .card,
|
||||
.area:nth-child(1):hover ~ .container-wrap .eyes .eye {
|
||||
transform: perspective(var(--perspective)) rotateX(15deg)
|
||||
rotateY(-15deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(15):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(15):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(-10deg) rotateY(8deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(14):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(14):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(-10deg) rotateY(4deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(13):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(13):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(-10deg) rotateY(0deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(12):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(12):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(-10deg)
|
||||
rotateY(-4deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(11):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(11):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(-10deg)
|
||||
rotateY(-8deg) translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(10):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(10):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(8deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(9):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(9):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(4deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(8):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(8):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(0deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(7):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(7):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(-4deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(6):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(6):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(0deg) rotateY(-8deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(5):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(5):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(8deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(4):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(4):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(4deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(3):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(3):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(0deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(2):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(2):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(-4deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.area:nth-child(1):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.options
|
||||
button,
|
||||
.area:nth-child(1):hover
|
||||
~ .container-wrap
|
||||
.card
|
||||
.container-ai-chat
|
||||
.chat
|
||||
.chat-bot {
|
||||
transform: perspective(var(--perspective)) rotateX(10deg) rotateY(-8deg)
|
||||
translateZ(var(--translateY)) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
@keyframes rotate-background-balls {
|
||||
from {
|
||||
transform: translateX(-50%) translateY(-50%) rotate(360deg);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%) translateY(-50%) rotate(0);
|
||||
}
|
||||
}
|
||||
Vue.createApp(App).use(VxeUI).use(VXETable).mount('#app')
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@keyframes animate-eyes {
|
||||
46% {
|
||||
height: 52px;
|
||||
}
|
||||
48% {
|
||||
height: 20px;
|
||||
}
|
||||
50% {
|
||||
height: 52px;
|
||||
}
|
||||
96% {
|
||||
height: 52px;
|
||||
}
|
||||
98% {
|
||||
height: 20px;
|
||||
}
|
||||
100% {
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- From Uiverse.io by Cobp -->
|
||||
<div class="container-ai-input">
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<div class="area"></div>
|
||||
<label class="container-wrap">
|
||||
<input type="checkbox" />
|
||||
<div class="card">
|
||||
<div class="background-blur-balls">
|
||||
<div class="balls">
|
||||
<span class="ball rosa"></span>
|
||||
<span class="ball violet"></span>
|
||||
<span class="ball green"></span>
|
||||
<span class="ball cyan"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-card">
|
||||
<div class="background-blur-card">
|
||||
<div class="eyes">
|
||||
<span class="eye"></span>
|
||||
<span class="eye"></span>
|
||||
</div>
|
||||
<div class="eyes happy">
|
||||
<svg fill="none" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M8.28386 16.2843C8.9917 15.7665 9.8765 14.731 12 14.731C14.1235 14.731 15.0083 15.7665 15.7161 16.2843C17.8397 17.8376 18.7542 16.4845 18.9014 15.7665C19.4323 13.1777 17.6627 11.1066 17.3088 10.5888C16.3844 9.23666 14.1235 8 12 8C9.87648 8 7.61556 9.23666 6.69122 10.5888C6.33728 11.1066 4.56771 13.1777 5.09858 15.7665C5.24582 16.4845 6.16034 17.8376 8.28386 16.2843Z"
|
||||
></path>
|
||||
</svg>
|
||||
<svg fill="none" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M8.28386 16.2843C8.9917 15.7665 9.8765 14.731 12 14.731C14.1235 14.731 15.0083 15.7665 15.7161 16.2843C17.8397 17.8376 18.7542 16.4845 18.9014 15.7665C19.4323 13.1777 17.6627 11.1066 17.3088 10.5888C16.3844 9.23666 14.1235 8 12 8C9.87648 8 7.61556 9.23666 6.69122 10.5888C6.33728 11.1066 4.56771 13.1777 5.09858 15.7665C5.24582 16.4845 6.16034 17.8376 8.28386 16.2843Z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-ai-chat">
|
||||
<div class="chat">
|
||||
<div class="chat-bot">
|
||||
<textarea
|
||||
placeholder="Imagine Something...✦˚"
|
||||
name="chat_bot"
|
||||
id="chat_bot"
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="btns-add">
|
||||
<button>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
height="20"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7 8v8a5 5 0 1 0 10 0V6.5a3.5 3.5 0 1 0-7 0V15a2 2 0 0 0 4 0V8"
|
||||
stroke-width="2"
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm0 10a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1zm10 0a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm0-8h6m-3-3v6"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.01 8.01 0 0 0 5.648 6.667M10.03 13c.151 2.439.848 4.73 1.97 6.752A15.9 15.9 0 0 0 13.97 13zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.01 8.01 0 0 0 19.938 13M4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333A8.01 8.01 0 0 0 4.062 11m5.969 0h3.938A15.9 15.9 0 0 0 12 4.248A15.9 15.9 0 0 0 10.03 11m4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.01 8.01 0 0 0-5.648-6.667"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<button class="btn-submit">
|
||||
<i>
|
||||
<svg viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M473 39.05a24 24 0 0 0-25.5-5.46L47.47 185h-.08a24 24 0 0 0 1 45.16l.41.13l137.3 58.63a16 16 0 0 0 15.54-3.59L422 80a7.07 7.07 0 0 1 10 10L226.66 310.26a16 16 0 0 0-3.59 15.54l58.65 137.38c.06.2.12.38.19.57c3.2 9.27 11.3 15.81 21.09 16.25h1a24.63 24.63 0 0 0 23-15.46L478.39 64.62A24 24 0 0 0 473 39.05"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div>123123</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -0,0 +1,234 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
|
||||
<style>
|
||||
|
||||
|
||||
/* From Uiverse.io by Yaya12085 */
|
||||
.radio-inputs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-width: 350px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.radio-inputs > * {
|
||||
margin: 6px;
|
||||
}
|
||||
|
||||
.radio-input:checked + .radio-tile {
|
||||
border-color: #2260ff;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
color: #2260ff;
|
||||
}
|
||||
|
||||
.radio-input:checked + .radio-tile:before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
background-color: #2260ff;
|
||||
border-color: #2260ff;
|
||||
}
|
||||
|
||||
.radio-input:checked + .radio-tile .radio-icon svg {
|
||||
fill: #2260ff;
|
||||
}
|
||||
|
||||
.radio-input:checked + .radio-tile .radio-label {
|
||||
color: #2260ff;
|
||||
}
|
||||
|
||||
.radio-input:focus + .radio-tile {
|
||||
border-color: #2260ff;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1), 0 0 0 4px #b5c9fc;
|
||||
}
|
||||
|
||||
.radio-input:focus + .radio-tile:before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.radio-tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
min-height: 80px;
|
||||
border-radius: 0.5rem;
|
||||
border: 2px solid #b5bfd9;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: 0.15s ease;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.radio-tile:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
border: 2px solid #b5bfd9;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
top: 0.25rem;
|
||||
left: 0.25rem;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: 0.25s ease;
|
||||
}
|
||||
|
||||
.radio-tile:hover {
|
||||
border-color: #2260ff;
|
||||
}
|
||||
|
||||
.radio-tile:hover:before {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.radio-icon svg {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
fill: #494949;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
color: #707070;
|
||||
transition: 0.375s ease;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.radio-input {
|
||||
clip: rect(0 0 0 0);
|
||||
-webkit-clip-path: inset(100%);
|
||||
clip-path: inset(100%);
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
width: 1px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- From Uiverse.io by Yaya12085 -->
|
||||
<div class="radio-inputs">
|
||||
<label>
|
||||
<input class="radio-input" type="radio" name="engine" />
|
||||
<span class="radio-tile">
|
||||
<span class="radio-icon">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
xml:space="preserve"
|
||||
viewBox="0 0 493.407 493.407"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="Capa_1"
|
||||
version="1.1"
|
||||
width="200px"
|
||||
height="200px"
|
||||
fill="none"
|
||||
>
|
||||
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
|
||||
<g
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
id="SVGRepo_tracerCarrier"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<path
|
||||
d="M488.474,270.899c-12.647-37.192-47.527-62.182-86.791-62.182c-5.892,0-11.728,0.749-17.499,1.879l-34.324-100.94 c-1.71-5.014-6.417-8.392-11.721-8.392H315.02c-6.836,0-12.382,5.547-12.382,12.382c0,6.836,5.545,12.381,12.382,12.381h14.252 l12.462,36.645H206.069v-21.998l21.732-2.821c3.353-0.434,6.135-3.079,6.585-6.585c0.54-4.183-2.402-8.013-6.585-8.553l-68.929-8.94 c-1.362-0.168-2.853-0.185-4.281,0c-9.116,1.186-15.55,9.537-14.373,18.653c1.185,9.118,9.537,15.55,18.653,14.364l22.434-2.909 v26.004l-41.255,52.798c-14.059-8.771-30.592-13.93-48.349-13.93C41.135,208.757,0,249.885,0,300.443 c0,50.565,41.135,91.7,91.701,91.7c44.882,0,82.261-32.437,90.113-75.095h33.605v12.647h-5.909c-4.563,0-8.254,3.693-8.254,8.254 c0,4.563,3.691,8.254,8.254,8.254h36.58c4.563,0,8.254-3.691,8.254-8.254c0-4.561-3.691-8.254-8.254-8.254h-5.908v-12.647h5.545 c3.814,0,7.409-1.756,9.755-4.756l95.546-122.267l9.776,28.729c-17.854,8.892-32.444,22.965-41.409,41.168 c-10.825,21.973-12.438,46.842-4.553,70.034c12.662,37.201,47.55,62.189,86.815,62.189c10.021,0,19.951-1.645,29.519-4.9 c23.191-7.885,41.926-24.329,52.744-46.302C494.746,318.966,496.367,294.09,488.474,270.899z M143.46,258.542 c7.698,9.488,12.776,21.014,14.349,33.742h-40.717L143.46,258.542z M91.701,367.379c-36.912,0-66.938-30.026-66.938-66.936 c0-36.904,30.026-66.923,66.938-66.923c12.002,0,23.11,3.427,32.864,8.981l-42.619,54.54c-2.917,3.732-3.448,8.794-1.378,13.05 c2.08,4.256,6.4,6.957,11.134,6.957h64.592C148.861,345.906,122.84,367.379,91.701,367.379z M239.69,292.284h-56.707 c-1.839-20.667-10.586-39.329-23.868-53.782l22.191-28.398v32.47c0,6.836,5.545,12.381,12.381,12.381 c6.836,0,12.382-5.545,12.382-12.381v-55.138h115.553L239.69,292.284z M383.546,285.618l6.384,18.79 c1.75,5.151,6.562,8.392,11.721,8.392c1.321,0,2.667-0.21,3.99-0.661c6.471-2.201,9.93-9.23,7.729-15.711l-6.336-18.637 c7.731,1.838,14.221,7.312,16.855,15.083c2.024,5.94,1.613,12.309-1.161,17.935c-2.773,5.626-7.569,9.835-13.509,11.858 c-12.068,4.078-25.716-2.717-29.785-14.671C376.735,300.055,378.597,291.689,383.546,285.618z M461.712,329.994 c-7.908,16.042-21.579,28.044-38.507,33.808c-6.997,2.378-14.244,3.578-21.547,3.578c-28.664,0-54.129-18.249-63.374-45.399 c-5.757-16.926-4.571-35.081,3.328-51.112c6.047-12.27,15.494-22.112,27.165-28.666l8.981,26.416 c-13.414,10.108-19.644,27.931-13.954,44.691c5.522,16.227,20.732,27.124,37.853,27.124c4.378,0,8.707-0.725,12.882-2.145 c10.108-3.434,18.282-10.607,22.999-20.184c4.723-9.585,5.425-20.435,1.982-30.551c-5.545-16.299-21.57-26.787-38.289-26.818 l-8.997-26.472c3.128-0.453,6.28-0.783,9.448-0.783c28.658,0,54.112,18.242,63.351,45.399 C470.788,295.799,469.613,313.96,461.712,329.994z"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="radio-label">Bicycle</span>
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input checked="" class="radio-input" type="radio" name="engine" />
|
||||
<span class="radio-tile">
|
||||
<span class="radio-icon">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
xml:space="preserve"
|
||||
viewBox="0 0 467.168 467.168"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="Capa_1"
|
||||
version="1.1"
|
||||
fill="none"
|
||||
>
|
||||
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
|
||||
<g
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
id="SVGRepo_tracerCarrier"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M76.849,210.531C34.406,210.531,0,244.937,0,287.388c0,42.438,34.406,76.847,76.849,76.847 c30.989,0,57.635-18.387,69.789-44.819l18.258,14.078c0,0,134.168,0.958,141.538-3.206c0,0-16.65-45.469,4.484-64.688 c2.225-2.024,5.021-4.332,8.096-6.777c-3.543,8.829-5.534,18.45-5.534,28.558c0,42.446,34.403,76.846,76.846,76.846 c42.443,0,76.843-34.415,76.843-76.846c0-42.451-34.408-76.849-76.843-76.849c-0.697,0-1.362,0.088-2.056,0.102 c5.551-3.603,9.093-5.865,9.093-5.865l-5.763-5.127c0,0,16.651-3.837,12.816-12.167c-3.848-8.33-44.19-58.28-44.19-58.28 s7.146-15.373-7.634-26.261l-7.098,15.371c0,0-18.093-12.489-25.295-10.084c-7.205,2.398-18.005,3.603-21.379,8.884l-3.358,3.124 c0,0-0.95,5.528,4.561,13.693c0,0,55.482,17.05,58.119,29.537c0,0,3.848,7.933-12.728,9.844l-3.354,4.328l-8.896,0.479 l-16.082-36.748c0,0-15.381,4.082-23.299,10.323l1.201,6.24c0,0-64.599-43.943-125.362,21.137c0,0-44.909,12.966-76.37-26.897 c0,0-0.479-12.968-76.367-10.565l5.286,5.524c0,0-5.286,0.479-7.444,3.841c-2.158,3.358,1.2,6.961,18.494,6.961 c0,0,39.153,44.668,69.17,42.032l42.743,20.656l18.975,32.42c0,0,0.034,2.785,0.23,7.045c-4.404,0.938-9.341,1.979-14.579,3.09 C139.605,232.602,110.832,210.531,76.849,210.531z M390.325,234.081c29.395,0,53.299,23.912,53.299,53.299 c0,29.39-23.912,53.294-53.299,53.294c-29.394,0-53.294-23.912-53.294-53.294C337.031,257.993,360.932,234.081,390.325,234.081z M76.849,340.683c-29.387,0-53.299-23.913-53.299-53.295c0-29.395,23.912-53.299,53.299-53.299 c22.592,0,41.896,14.154,49.636,34.039c-28.26,6.011-56.31,11.99-56.31,11.99l3.619,19.933l55.339-2.444 C124.365,322.116,102.745,340.683,76.849,340.683z M169.152,295.835c1.571,5.334,3.619,9.574,6.312,11.394l-24.696,0.966 c1.058-3.783,1.857-7.666,2.338-11.662L169.152,295.835z"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="radio-label">Motorbike</span>
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<input class="radio-input" type="radio" name="engine" />
|
||||
<span class="radio-tile">
|
||||
<span class="radio-icon">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
xml:space="preserve"
|
||||
viewBox="0 0 324.018 324.017"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
id="Capa_1"
|
||||
version="1.1"
|
||||
fill="none"
|
||||
>
|
||||
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
|
||||
<g
|
||||
stroke-linejoin="round"
|
||||
stroke-linecap="round"
|
||||
id="SVGRepo_tracerCarrier"
|
||||
></g>
|
||||
<g id="SVGRepo_iconCarrier">
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M317.833,197.111c3.346-11.148,2.455-20.541-2.65-27.945c-9.715-14.064-31.308-15.864-35.43-16.076l-8.077-4.352 l-0.528-0.217c-8.969-2.561-42.745-3.591-47.805-3.733c-7.979-3.936-14.607-7.62-20.475-10.879 c-20.536-11.413-34.107-18.958-72.959-18.958c-47.049,0-85.447,20.395-90.597,23.25c-2.812,0.212-5.297,0.404-7.646,0.59 l-6.455-8.733l7.34,0.774c2.91,0.306,4.267-1.243,3.031-3.459c-1.24-2.216-4.603-4.262-7.519-4.57l-23.951-2.524 c-2.91-0.305-4.267,1.243-3.026,3.459c1.24,2.216,4.603,4.262,7.519,4.57l3.679,0.386l8.166,11.05 c-13.823,1.315-13.823,2.139-13.823,4.371c0,18.331-2.343,22.556-2.832,23.369L0,164.443v19.019l2.248,2.89 c-0.088,2.775,0.823,5.323,2.674,7.431c5.981,6.804,19.713,7.001,21.256,7.001c4.634,0,14.211-2.366,20.78-4.153 c-0.456-0.781-0.927-1.553-1.3-2.392c-0.36-0.809-0.603-1.668-0.885-2.517c-0.811-2.485-1.362-5.096-1.362-7.845 c0-14.074,11.449-25.516,25.515-25.516s25.52,11.446,25.52,25.521c0,6.068-2.221,11.578-5.773,15.964 c-0.753,0.927-1.527,1.828-2.397,2.641c-1.022,0.958-2.089,1.859-3.254,2.641c29.332,0.109,112.164,0.514,168.708,1.771 c-0.828-0.823-1.533-1.771-2.237-2.703c-0.652-0.854-1.222-1.75-1.761-2.688c-2.164-3.744-3.5-8.025-3.5-12.655 c0-14.069,11.454-25.513,25.518-25.513c14.064,0,25.518,11.449,25.518,25.513c0,5.126-1.553,9.875-4.152,13.878 c-0.605,0.922-1.326,1.755-2.04,2.594c-0.782,0.922-1.616,1.781-2.527,2.584c5.209,0.155,9.699,0.232,13.546,0.232 c19.563,0,23.385-1.688,23.861-5.018C324.114,202.108,324.472,199.602,317.833,197.111z"
|
||||
></path>
|
||||
<path
|
||||
d="M52.17,195.175c3.638,5.379,9.794,8.922,16.756,8.922c0.228,0,0.44-0.062,0.663-0.073c2.576-0.083,5.043-0.61,7.291-1.574 c1.574-0.678,2.996-1.6,4.332-2.636c4.782-3.702,7.927-9.429,7.927-15.933c0-11.144-9.066-20.216-20.212-20.216 s-20.213,9.072-20.213,20.216c0,2.263,0.461,4.411,1.149,6.446c0.288,0.85,0.616,1.673,1.015,2.471 C51.279,193.606,51.667,194.434,52.17,195.175z"
|
||||
></path>
|
||||
<path
|
||||
d="M269.755,209.068c2.656,0,5.173-0.549,7.503-1.481c1.589-0.642,3.06-1.491,4.422-2.495 c1.035-0.767,1.988-1.616,2.863-2.559c3.34-3.604,5.432-8.389,5.432-13.681c0-11.144-9.071-20.21-20.215-20.21 s-20.216,9.066-20.216,20.21c0,4.878,1.812,9.3,4.702,12.801c0.818,0.989,1.719,1.89,2.708,2.713 c1.311,1.088,2.729,2.024,4.293,2.755C263.836,208.333,266.704,209.068,269.755,209.068z"
|
||||
></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="radio-label">Car</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 1.1 MiB |
@ -0,0 +1 @@
|
||||
https://ccnphfhqs21z.feishu.cn/wiki/F5krwD16viZoF0kKkvDcrZNYnhb
|
||||
|
After Width: | Height: | Size: 243 KiB |
|
After Width: | Height: | Size: 2.6 MiB |
|
After Width: | Height: | Size: 2.9 MiB |
|
After Width: | Height: | Size: 152 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
|
After Width: | Height: | Size: 2.3 MiB |
@ -0,0 +1 @@
|
||||
https://docs.qq.com/sheet/DWmRhbnVHSnRWc2xz?tab=vajqu5
|
||||
Loading…
Reference in new issue