LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
landaiqing
2023-12-22 22:57:37 +08:00
parent e8e402cf4d
commit d20dea0944
21 changed files with 2413 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
src/components/setting/onsite/Import.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<div class="container">
<div class="main-box">
<div class="box-content">
<div class="svg">
<svg width="33" height="28.5" viewBox="0 0 66 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.70977 0H19.4194C20.2733 0 21.0742 0.402215 21.5857 1.08315L25.3821 6.14266C25.8937 6.82361 26.6946 7.22581 27.5484 7.22581H62.3226C63.8185 7.22581 65.0323 8.43956 65.0323 9.93548V53.2903C65.0323 54.7862 63.8185 56 62.3226 56H2.70968C1.21376 56 0 54.7862 0 53.2903V2.70968C0 1.21375 1.21385 0 2.70977 0Z" transform="translate(0.0177612 0.740387)" fill="#4F8AFE"></path>
</svg>
</div>
<div class="text">
<p class="title">上传文件</p>
</div>
<div class="dots">
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Import",
data() {
return {}
},
mounted() {
},
created() {
},
computed: {},
methods: {}
}
</script>
<style scoped>
.container {
-webkit-transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
}
.main-box {
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 250px;
height: 70px;
background: #FFFFFF;
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
border-radius: 24px;
padding: 40px;
-webkit-transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.box-content {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
/* flex-direction: row; */
/* flex-wrap: nowrap; */
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.box-content .text {
position: relative;
left: -10px;
//margin-left: 82px;
}
.text .title {
font-family: sans-serif;
font-style: normal;
font-weight: bold;
line-height: normal;
font-size: 18px;
color: #4F4F4F;
}
.text span {
font-family: sans-serif;
font-style: normal;
font-weight: 500;
line-height: normal;
font-size: 20px;
color: #4F4F4F;
}
.dots div {
width: 6px;
height: 6px;
background: #4F8AFE;
margin: 3px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-ms-border-radius: 100%;
-o-border-radius: 100%;
}
.blue-bg {
display: none;
position: absolute;
right: 400px;
z-index: 1;
width: 82.35px;
height: 70px;
background: #4F8AFE;
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
border-radius: 0 24px 24px 0;
-webkit-border-radius: 0 24px 24px 0;
-moz-border-radius: 0 24px 24px 0;
-ms-border-radius: 0 24px 24px 0;
-o-border-radius: 0 24px 24px 0;
}
.box-content::after {
content: '';
/*display: none;
*/
opacity: 0;
position: absolute;
right: -10px;
z-index: -1;
width: 100px;
height: 70px;
background: #4F8AFE;
border-radius: 0 24px 24px 0;
-webkit-border-radius: 0 24px 24px 0;
-moz-border-radius: 0 24px 24px 0;
-ms-border-radius: 0 24px 24px 0;
-o-border-radius: 0 24px 24px 0;
-webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.main-box:hover .box-content::after {
opacity: 1;
position: absolute;
z-index: -1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
.box-content::before {
content: '';
opacity: 0;
position: absolute;
right: -30px;
/* z-index:1; */
width: 162px;
height: 70px;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTIiIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA5MiA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljc2ODkgNTZINzMuNzcyM0M4My41ODYyIDU2IDkxLjU0NDggNDguMDQxMyA5MS41NDQ4IDM4LjIyNzZDOTEuNTQ0OCAyOS40NzM4IDg1LjIxNjQgMjIuMjE4MSA3Ni44ODQgMjAuNzQ0Qzc0LjYzMTMgMTQuMTQyNSA2OC4zOTEzIDkuMzg4MDcgNjEuMDI2NiA5LjM4ODA3QzU4LjQwMDUgOS4zODgwNyA1NS45MjcgMTAuMDEwNSA1My43MTQ0IDExLjA4NjZDNTAuMzEzMyA0LjUwNTI1IDQzLjQ1ODggMCAzNS41NDQyIDBDMjQuMjQ4OSAwIDE1LjA4OTggOS4xNTkzNSAxNS4wODk4IDIwLjQ1NDRDMTUuMDg5OCAyMC41MzA3IDE1LjEwMTggMjAuNjAzIDE1LjEwMTggMjAuNjc5M0M2LjU1Njg3IDIxLjk3MjIgNi4wNzE3OGUtMDYgMjkuMzI0NiA2LjA3MTc4ZS0wNiAzOC4yMzA3Qy0wLjAwODAyNDM3IDQ4LjA0NDUgNy45NTA2OCA1NS45OTkgMTcuNzY4MyA1NS45OTlMMTcuNzY4OSA1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjk0MjUgMC4yNDAzODcpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
background-repeat: no-repeat;
background-position: 45px center;
-webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
}
.main-box:hover .box-content::before {
opacity: 1;
position: absolute;
/* z-index: 1; */
-webkit-transform: translateX(120px) scale(.7);
transform: translateX(120px) scale(.7);
}
.dots div {
-webkit-transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
}
.main-box:hover .dots div:nth-child(1) {
-webkit-transform: translateY(9px);
transform: translateY(9px);
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.main-box:hover .dots div:nth-child(2) {
-webkit-transform: scale(3);
transform: scale(3);
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.main-box:hover .dots div:nth-child(3) {
-webkit-transform: translateY(-9px);
transform: translateY(-9px);
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
}
.container:hover {
/* z-index: 2; */
-webkit-transform: translateX(-75px);
transform: translateX(-75px);
}
.dr {
position: absolute;
bottom: 16px;
right: 16px;
width:70px;
}
</style>