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