inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <div class="chart-mini-progress">
3     <div class="target" :style="{ left: target + '%'}">
4       <span :style="{ backgroundColor: color }" />
5       <span :style="{ backgroundColor: color }"/>
6     </div>
7     <div class="progress-wrapper">
8       <div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
9     </div>
10   </div>
11 </template>
12
13 <script>
14 export default {
15   name: 'MiniProgress',
16   props: {
17     target: {
18       type: Number,
19       default: 0
20     },
21     height: {
22       type: String,
23       default: '10px'
24     },
25     color: {
26       type: String,
27       default: '#13C2C2'
28     },
29     percentage: {
30       type: Number,
31       default: 0
32     }
33   }
34 }
35 </script>
36
37 <style lang="less" scoped>
38   .chart-mini-progress {
39     padding: 5px 0;
40     position: relative;
41     width: 100%;
42
43     .target {
44       position: absolute;
45       top: 0;
46       bottom: 0;
47
48       span {
49         border-radius: 100px;
50         position: absolute;
51         top: 0;
52         left: 0;
53         height: 4px;
54         width: 2px;
55
56         &:last-child {
57           top: auto;
58           bottom: 0;
59         }
60       }
61     }
62     .progress-wrapper {
63       background-color: #f5f5f5;
64       position: relative;
65
66       .progress {
67         transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
68         border-radius: 1px 0 0 1px;
69         background-color: #1890ff;
70         width: 0;
71         height: 100%;
72       }
73     }
74   }
75 </style>