清理门户,删除垃圾依赖库
This commit is contained in:
		| @@ -1,88 +0,0 @@ | ||||
| <template> | ||||
|   <section class="AiDataPanel"> | ||||
|     <b class="item-title" v-text="label"/> | ||||
|     <div class="num-bg"> | ||||
|       <span ref="num" class="num" v-text="num"/> | ||||
|     </div> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import {gsap} from 'gsap' | ||||
|  | ||||
| export default { | ||||
|   name: "AiDataPanel", | ||||
|   props: { | ||||
|     label: {default: "标题"}, | ||||
|     value: {default: 0} | ||||
|   }, | ||||
|   data() { | ||||
|     return { | ||||
|       num: 0 | ||||
|     } | ||||
|   }, | ||||
|   methods: { | ||||
|     animation() { | ||||
|       let demo = {num: Math.max(this.value - 30, 0)} | ||||
|       gsap.to(demo, 1, { | ||||
|         num: this.value, onUpdate: () => { | ||||
|           this.num = demo.num?.toFixed(0) | ||||
|         } | ||||
|       }) | ||||
|     } | ||||
|   }, | ||||
|   mounted() { | ||||
|     this.animation() | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AiDataPanel { | ||||
|   flex: 1; | ||||
|   width: 172px; | ||||
|   height: 160px; | ||||
|   display: flex; | ||||
|   flex-direction: column; | ||||
|   align-items: center; | ||||
|   background: #000; | ||||
|  | ||||
|   & + .AiDataPanel { | ||||
|     margin-left: 16px; | ||||
|   } | ||||
|  | ||||
|   .item-title { | ||||
|     font-size: 24px; | ||||
|     line-height: 32px; | ||||
|     background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF); | ||||
|     -webkit-background-clip: text; | ||||
|     -webkit-text-fill-color: transparent; | ||||
|     margin-top: 30px; | ||||
|   } | ||||
|  | ||||
|   .num-bg { | ||||
|     width: 100%; | ||||
|     height: 160px; | ||||
|     background-image: url(https://cdn.cunwuyun.cn/dvcp/dv/dianjiang/number-bg.png); | ||||
|     background-size: 100% 100%; | ||||
|     position: relative; | ||||
|     margin-top: -76px; | ||||
|  | ||||
|     .num { | ||||
|       position: absolute; | ||||
|       left: 0; | ||||
|       bottom: 30px; | ||||
|       width: 100%; | ||||
|       text-align: center; | ||||
|       height: 50px; | ||||
|       font-size: 40px; | ||||
|       font-family: D-DIN-Bold, D-DIN; | ||||
|       font-weight: bold; | ||||
|       line-height: 54px; | ||||
|       background-image: -webkit-linear-gradient(bottom, #35BEFF, #EBF9FF, #FFFFFF); | ||||
|       -webkit-background-clip: text; | ||||
|       -webkit-text-fill-color: transparent; | ||||
|     } | ||||
|   } | ||||
| } | ||||
| </style> | ||||
| @@ -1,30 +0,0 @@ | ||||
| <template> | ||||
|   <section class="AiStaData"> | ||||
|     <ai-data-panel v-for="op in data" :key="op[key]" | ||||
|                    :label="op[label]" :value="op[key]"/> | ||||
|   </section> | ||||
| </template> | ||||
|  | ||||
| <script> | ||||
| import AiDataPanel from "./AiDataPanel"; | ||||
|  | ||||
| export default { | ||||
|   name: "AiStaData", | ||||
|   components: {AiDataPanel}, | ||||
|   props: { | ||||
|     data: {default: () => []}, | ||||
|     key: {default: "id"}, | ||||
|     label: {default: "label"}, | ||||
|   } | ||||
| } | ||||
| </script> | ||||
|  | ||||
| <style lang="scss" scoped> | ||||
| .AiStaData { | ||||
|   width: 100%; | ||||
|   display: flex; | ||||
|   align-items: center; | ||||
|   flex-wrap: wrap; | ||||
|   justify-content: center; | ||||
| } | ||||
| </style> | ||||
		Reference in New Issue
	
	Block a user