mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-23 06:32:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix Bug or esLink formatting

Browse Source
This commit is contained in:
Ah jung
2021-07-22 13:47:44 +08:00
parent f6be8f521e
commit 7f81152793
172 changed files with 10553 additions and 9031 deletions
Download Patch File Download Diff File Expand all files Collapse all files

237
src/components/Lockscreen/Recharge.vue
View File

@@ -20,120 +20,120 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HuaweiCharge',
// props: ['batteryStatus', 'battery', 'calcDischargingTime'],
props: {
battery: {
// 电池对象
type: Object,
default: () => ({})
export default defineComponent({
name: 'HuaweiCharge',
// props: ['batteryStatus', 'battery', 'calcDischargingTime'],
props: {
battery: {
// 电池对象
type: Object,
default: () => ({}),
},
calcDischargingTime: {
// 电池剩余时间可用时间
type: String,
default: '',
},
batteryStatus: {
// 电池状态
type: String,
validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val),
},
},
calcDischargingTime: {
// 电池剩余时间可用时间
type: String,
default: ''
},
batteryStatus: {
// 电池状态
type: String,
validator: (val: string) => ['充电中', '已充满', '已断开电源'].includes(val)
}
}
})
});
</script>
<style lang="less" scoped>
.container {
position: absolute;
bottom: 20vh;
left: 50vw;
width: 300px;
height: 400px;
transform: translateX(-50%);
.number {
.container {
position: absolute;
top: 27%;
z-index: 10;
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
.contrast {
bottom: 20vh;
left: 50vw;
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
transform: translateX(-50%);
.circle {
position: relative;
width: 300px;
height: 300px;
filter: blur(8px);
box-sizing: border-box;
&::after {
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 200px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
content: '';
transform: translate(-50%, -50%) rotate(0);
animation: rotate 10s infinite linear;
}
&::before {
position: absolute;
top: 40%;
left: 50%;
z-index: 10;
width: 176px;
height: 176px;
background-color: #000;
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
}
}
.bubbles {
.number {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px;
background-color: #00ff6f;
border-radius: 100px 100px 0 0;
filter: blur(5px);
transform: translate(-50%, 0);
top: 27%;
z-index: 10;
width: 300px;
font-size: 32px;
color: #fff;
text-align: center;
}
li {
position: absolute;
background: #00ff6f;
border-radius: 50%;
.contrast {
width: 300px;
height: 400px;
overflow: hidden;
background-color: #000;
filter: contrast(15) hue-rotate(0);
animation: hueRotate 10s infinite linear;
.circle {
position: relative;
width: 300px;
height: 300px;
filter: blur(8px);
box-sizing: border-box;
&::after {
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 200px;
background-color: #00ff6f;
border-radius: 42% 38% 62% 49% / 45%;
content: '';
transform: translate(-50%, -50%) rotate(0);
animation: rotate 10s infinite linear;
}
&::before {
position: absolute;
top: 40%;
left: 50%;
z-index: 10;
width: 176px;
height: 176px;
background-color: #000;
border-radius: 50%;
content: '';
transform: translate(-50%, -50%);
}
}
.bubbles {
position: absolute;
bottom: 0;
left: 50%;
width: 100px;
height: 40px;
background-color: #00ff6f;
border-radius: 100px 100px 0 0;
filter: blur(5px);
transform: translate(-50%, 0);
li {
position: absolute;
background: #00ff6f;
border-radius: 50%;
}
}
}
.charging {
font-size: 20px;
text-align: center;
}
}
.charging {
font-size: 20px;
text-align: center;
}
}
@width: ~`Math.round(Math.random() * 100)` px;
@left: calc(15px + `Math.round(Math.random(70))`);
each(range(15), {
@width: ~`Math.round(Math.random() * 100) ` px;
@left: calc(15px + `Math.round(Math.random(70)) `);
each(range(15), {
.xiaoma-@{value} {
height: (@value * 50px);
}
@@ -147,31 +147,30 @@ each(range(15), {
}
});
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
}
@keyframes rotate {
50% {
border-radius: 45% / 42% 38% 58% 49%;
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
100% {
transform: translate(-50%, -50%) rotate(720deg);
}
}
@keyframes moveToTop {
90% {
opacity: 1;
}
@keyframes moveToTop {
90% {
opacity: 1;
100% {
opacity: 0.1;
transform: translate(-50%, -180px);
}
}
100% {
opacity: 0.1;
transform: translate(-50%, -180px);
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
}
@keyframes hueRotate {
100% {
filter: contrast(15) hue-rotate(360deg);
}
}
</style>