From 5186227a467bd34dc253e64b23bc96d3a07bb399 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 17 十一月 2021 17:39:53 +0800
Subject: [PATCH] 添加用户权限控制
---
src/components/VabCharge/index.vue | 296 +++++++++++++++++++++++++++++-----------------------------
1 files changed, 148 insertions(+), 148 deletions(-)
diff --git a/src/components/VabCharge/index.vue b/src/components/VabCharge/index.vue
index 609da97..14950e9 100644
--- a/src/components/VabCharge/index.vue
+++ b/src/components/VabCharge/index.vue
@@ -23,169 +23,169 @@
</template>
<script>
- export default {
- name: 'VabCharge',
- props: {
- styleObj: {
- type: Object,
- default: () => {
- return {}
- },
- },
- startVal: {
- type: Number,
- default: 0,
- },
- endVal: {
- type: Number,
- default: 100,
+export default {
+ name: "VabCharge",
+ props: {
+ styleObj: {
+ type: Object,
+ default: () => {
+ return {};
},
},
- data() {
- return {
- decimals: 2,
- prefix: '',
- suffix: '%',
- separator: ',',
- duration: 3000,
- }
+ startVal: {
+ type: Number,
+ default: 0,
},
- created() {},
- mounted() {},
- methods: {},
- }
+ endVal: {
+ type: Number,
+ default: 100,
+ },
+ },
+ data() {
+ return {
+ decimals: 2,
+ prefix: "",
+ suffix: "%",
+ separator: ",",
+ duration: 3000,
+ };
+ },
+ created() {},
+ mounted() {},
+ methods: {},
+};
</script>
<style lang="scss" scoped>
- .content {
+.content {
+ position: relative;
+ display: flex;
+ align-items: center; /* 鍨傜洿灞呬腑 */
+ justify-content: center; /* 姘村钩灞呬腑 */
+ width: 100%;
+ background: #000;
+
+ .g-number {
+ position: absolute;
+ top: 27%;
+ z-index: 99;
+ width: 300px;
+ font-size: 32px;
+ color: #fff;
+ text-align: center;
+ }
+
+ .g-container {
position: relative;
- display: flex;
- align-items: center; /* 鍨傜洿灞呬腑 */
- justify-content: center; /* 姘村钩灞呬腑 */
- width: 100%;
- background: #000;
+ width: 300px;
+ height: 400px;
+ margin: auto;
+ }
- .g-number {
+ .g-contrast {
+ width: 300px;
+ height: 400px;
+ overflow: hidden;
+ background-color: #000;
+ filter: contrast(15) hue-rotate(0);
+ animation: hueRotate 10s infinite linear;
+ }
+
+ .g-circle {
+ position: relative;
+ box-sizing: border-box;
+ width: 300px;
+ height: 300px;
+ filter: blur(8px);
+
+ &::after {
position: absolute;
- top: 27%;
- z-index: 99;
- width: 300px;
- font-size: 32px;
- color: #fff;
- text-align: center;
- }
-
- .g-container {
- position: relative;
- width: 300px;
- height: 400px;
- margin: auto;
- }
-
- .g-contrast {
- width: 300px;
- height: 400px;
- overflow: hidden;
- background-color: #000;
- filter: contrast(15) hue-rotate(0);
- animation: hueRotate 10s infinite linear;
- }
-
- .g-circle {
- position: relative;
- box-sizing: border-box;
- width: 300px;
- height: 300px;
- filter: blur(8px);
-
- &::after {
- position: absolute;
- top: 40%;
- left: 50%;
- width: 200px;
- height: 200px;
- content: '';
- background-color: #00ff6f;
- border-radius: 42% 38% 62% 49% / 45%;
- transform: translate(-50%, -50%) rotate(0);
- animation: rotate 10s infinite linear;
- }
-
- &::before {
- position: absolute;
- top: 40%;
- left: 50%;
- z-index: 99;
- width: 176px;
- height: 176px;
- content: '';
- background-color: #000;
- border-radius: 50%;
- transform: translate(-50%, -50%);
- }
- }
-
- .g-bubbles {
- position: absolute;
- bottom: 0;
+ top: 40%;
left: 50%;
- width: 100px;
- height: 40px;
+ width: 200px;
+ height: 200px;
+ content: "";
background-color: #00ff6f;
- filter: blur(5px);
- border-radius: 100px 100px 0 0;
- transform: translate(-50%, 0);
+ border-radius: 42% 38% 62% 49% / 45%;
+ transform: translate(-50%, -50%) rotate(0);
+ animation: rotate 10s infinite linear;
}
- li {
+ &::before {
position: absolute;
- background: #00ff6f;
+ top: 40%;
+ left: 50%;
+ z-index: 99;
+ width: 176px;
+ height: 176px;
+ content: "";
+ background-color: #000;
border-radius: 50%;
- }
-
- @for $i from 0 through 15 {
- li:nth-child(#{$i}) {
- $width: 15 + random(15) + px;
-
- top: 50%;
- left: 15 + random(70) + px;
- width: $width;
- height: $width;
- transform: translate(-50%, -50%);
- animation: moveToTop
- #{random(6) +
- 3}s
- ease-in-out -#{random(5000) /
- 1000}s
- infinite;
- }
- }
-
- @keyframes rotate {
- 50% {
- border-radius: 45% / 42% 38% 58% 49%;
- }
-
- 100% {
- transform: translate(-50%, -50%) rotate(720deg);
- }
- }
-
- @keyframes moveToTop {
- 90% {
- opacity: 1;
- }
-
- 100% {
- opacity: 0.1;
- transform: translate(-50%, -180px);
- }
- }
-
- @keyframes hueRotate {
- 100% {
- filter: contrast(15) hue-rotate(360deg);
- }
+ transform: translate(-50%, -50%);
}
}
+
+ .g-bubbles {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ width: 100px;
+ height: 40px;
+ background-color: #00ff6f;
+ filter: blur(5px);
+ border-radius: 100px 100px 0 0;
+ transform: translate(-50%, 0);
+ }
+
+ li {
+ position: absolute;
+ background: #00ff6f;
+ border-radius: 50%;
+ }
+
+ @for $i from 0 through 15 {
+ li:nth-child(#{$i}) {
+ $width: 15 + random(15) + px;
+
+ top: 50%;
+ left: 15 + random(70) + px;
+ width: $width;
+ height: $width;
+ transform: translate(-50%, -50%);
+ animation: moveToTop
+ #{random(6) +
+ 3}s
+ ease-in-out -#{random(5000) /
+ 1000}s
+ infinite;
+ }
+ }
+
+ @keyframes rotate {
+ 50% {
+ border-radius: 45% / 42% 38% 58% 49%;
+ }
+
+ 100% {
+ transform: translate(-50%, -50%) rotate(720deg);
+ }
+ }
+
+ @keyframes moveToTop {
+ 90% {
+ opacity: 1;
+ }
+
+ 100% {
+ opacity: 0.1;
+ transform: translate(-50%, -180px);
+ }
+ }
+
+ @keyframes hueRotate {
+ 100% {
+ filter: contrast(15) hue-rotate(360deg);
+ }
+ }
+}
</style>
--
Gitblit v1.8.0