春风项目四线(合箱线、总装线)
懒羊羊
2024-01-17 5f7e70b8132d018614e8f4989d0614bd50cb7ecb
提交 | 用户 | 时间
fd2207 1 <template>
2   <el-row :gutter="40" class="panel-group">
3     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
4       <div class="card-panel" @click="handleSetLineChartData('newVisitis')">
5         <div class="card-panel-icon-wrapper icon-people">
6           <svg-icon icon-class="peoples" class-name="card-panel-icon" />
7         </div>
8         <div class="card-panel-description">
9           <div class="card-panel-text">
e211c9 10             合箱上线
fd2207 11           </div>
12           <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
13         </div>
14       </div>
15     </el-col>
16     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
17       <div class="card-panel" @click="handleSetLineChartData('messages')">
18         <div class="card-panel-icon-wrapper icon-message">
19           <svg-icon icon-class="message" class-name="card-panel-icon" />
20         </div>
21         <div class="card-panel-description">
22           <div class="card-panel-text">
e211c9 23             合箱下线
fd2207 24           </div>
25           <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
26         </div>
27       </div>
28     </el-col>
29     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
30       <div class="card-panel" @click="handleSetLineChartData('purchases')">
31         <div class="card-panel-icon-wrapper icon-money">
32           <svg-icon icon-class="money" class-name="card-panel-icon" />
33         </div>
34         <div class="card-panel-description">
35           <div class="card-panel-text">
e211c9 36             总装上线
fd2207 37           </div>
38           <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
39         </div>
40       </div>
41     </el-col>
42     <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
43       <div class="card-panel" @click="handleSetLineChartData('shoppings')">
44         <div class="card-panel-icon-wrapper icon-shopping">
45           <svg-icon icon-class="shopping" class-name="card-panel-icon" />
46         </div>
47         <div class="card-panel-description">
48           <div class="card-panel-text">
e211c9 49             总装下线
fd2207 50           </div>
51           <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
52         </div>
53       </div>
54     </el-col>
55   </el-row>
56 </template>
57
58 <script>
59 import CountTo from 'vue-count-to'
60
61 export default {
62   components: {
63     CountTo
64   },
65   methods: {
66     handleSetLineChartData(type) {
67       this.$emit('handleSetLineChartData', type)
68     }
69   }
70 }
71 </script>
72
73 <style lang="scss" scoped>
74 .panel-group {
75   margin-top: 18px;
76
77   .card-panel-col {
78     margin-bottom: 32px;
79   }
80
81   .card-panel {
82     height: 108px;
83     cursor: pointer;
84     font-size: 12px;
85     position: relative;
86     overflow: hidden;
87     color: #666;
88     background: #fff;
89     box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
90     border-color: rgba(0, 0, 0, .05);
91
92     &:hover {
93       .card-panel-icon-wrapper {
94         color: #fff;
95       }
96
97       .icon-people {
98         background: #40c9c6;
99       }
100
101       .icon-message {
102         background: #36a3f7;
103       }
104
105       .icon-money {
106         background: #f4516c;
107       }
108
109       .icon-shopping {
110         background: #34bfa3
111       }
112     }
113
114     .icon-people {
115       color: #40c9c6;
116     }
117
118     .icon-message {
119       color: #36a3f7;
120     }
121
122     .icon-money {
123       color: #f4516c;
124     }
125
126     .icon-shopping {
127       color: #34bfa3
128     }
129
130     .card-panel-icon-wrapper {
131       float: left;
132       margin: 14px 0 0 14px;
133       padding: 16px;
134       transition: all 0.38s ease-out;
135       border-radius: 6px;
136     }
137
138     .card-panel-icon {
139       float: left;
140       font-size: 48px;
141     }
142
143     .card-panel-description {
144       float: right;
145       font-weight: bold;
146       margin: 26px;
147       margin-left: 0px;
148
149       .card-panel-text {
150         line-height: 18px;
151         color: rgba(0, 0, 0, 0.45);
152         font-size: 16px;
153         margin-bottom: 12px;
154       }
155
156       .card-panel-num {
157         font-size: 20px;
158       }
159     }
160   }
161 }
162
163 @media (max-width:550px) {
164   .card-panel-description {
165     display: none;
166   }
167
168   .card-panel-icon-wrapper {
169     float: none !important;
170     width: 100%;
171     height: 100%;
172     margin: 0 !important;
173
174     .svg-icon {
175       display: block;
176       margin: 14px auto !important;
177       float: none !important;
178     }
179   }
180 }
181 </style>