Просмотр исходного кода

style: 开启轮播 / 画面多加一辆小车特效

@dayan_hjm лет назад: 2
Родитель
Сommit
d2f25aa8f2

+ 3 - 0
src/assets/css/styleTemplate.less

@@ -892,6 +892,9 @@
892
             #echarts2 {
892
             #echarts2 {
893
               width: 95%;
893
               width: 95%;
894
               height: 90%;
894
               height: 90%;
895
+              >div{
896
+                text-align: left;
897
+              }
895
             }
898
             }
896
           }
899
           }
897
         }
900
         }

+ 3 - 3
src/pages/gvc/component/rightBottomView.jsx

@@ -62,12 +62,12 @@ class RightBottomView extends Component {
62
       arrows:false,
62
       arrows:false,
63
       infinite: true,
63
       infinite: true,
64
       autoplay: true,
64
       autoplay: true,
65
-      speed: 2000,
66
-      autoplaySpeed: 2000,
65
+      speed: 4000,
66
+      autoplaySpeed: 0,
67
       cssEase: "linear",
67
       cssEase: "linear",
68
       // autoplaySpeed: 1000,//自动播放的时间
68
       // autoplaySpeed: 1000,//自动播放的时间
69
       // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
69
       // fade: true,//是否采用淡入淡出的效果  竖着的滚动方式不能添加此动效
70
-      slidesToShow: data_item.length >= 8 ? 8 : data_item.length,
70
+      slidesToShow: data_item.length >= 7 ? 7 : data_item.length,
71
       slidesToScroll: 1,
71
       slidesToScroll: 1,
72
       vertical: true,
72
       vertical: true,
73
       verticalSwiping: true,
73
       verticalSwiping: true,

+ 44 - 11
src/pages/gvc/style.less

@@ -2,12 +2,13 @@
2
 
2
 
3
 @assetUrl: "../../assets/imgs/home";
3
 @assetUrl: "../../assets/imgs/home";
4
 
4
 
5
+
5
 .gvc_home {
6
 .gvc_home {
6
-  background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40!important;
7
+  background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
7
   // background: #000;
8
   // background: #000;
8
 
9
 
9
   :global {
10
   :global {
10
-    .rightContent .bottomContent3{
11
+    .rightContent .bottomContent3 {
11
       width: 100%;
12
       width: 100%;
12
       height: 100%;
13
       height: 100%;
13
     }
14
     }
@@ -17,7 +18,7 @@
17
       height: 100%;
18
       height: 100%;
18
 
19
 
19
       .gvc_video {
20
       .gvc_video {
20
-        background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40!important;
21
+        background: url(../../assets/imgs/dataVimg/gvcBgDataV.png) no-repeat 0 -10em / 100% 120% #041b40 !important;
21
         align-items: flex-start;
22
         align-items: flex-start;
22
         // background: #000;
23
         // background: #000;
23
 
24
 
@@ -157,14 +158,32 @@
157
           }
158
           }
158
         }
159
         }
159
 
160
 
161
+
160
         .centerCon {
162
         .centerCon {
161
           width: 62%;
163
           width: 62%;
162
           height: 80%;
164
           height: 80%;
163
           padding: 0;
165
           padding: 0;
164
           position: relative;
166
           position: relative;
165
           margin: 0% 0 0 -1%;
167
           margin: 0% 0 0 -1%;
168
+
169
+          .rightCar {
170
+            width: 4.5em;
171
+            transform: skew(54deg, 306deg);
172
+            position: absolute;
173
+            left: 53%;
174
+            top: 36%;
175
+            -webkit-animation: antSpinMove 8s linear infinite;;
176
+            animation: antSpinMove 8s linear infinite;;
177
+
178
+            >img {
179
+              width: 100%;
180
+            }
181
+          }
182
+
166
         }
183
         }
167
 
184
 
185
+        
186
+
168
         @media (min-height: 800px) {
187
         @media (min-height: 800px) {
169
           .centerCon {
188
           .centerCon {
170
             width: 65%;
189
             width: 65%;
@@ -172,6 +191,11 @@
172
             padding: 0;
191
             padding: 0;
173
             position: relative;
192
             position: relative;
174
             margin: 0% 0 0 -3%;
193
             margin: 0% 0 0 -3%;
194
+            .rightCar {
195
+              -webkit-animation: antSpinMove900 8s linear infinite;;
196
+              animation: antSpinMove900 8s linear infinite;;
197
+                
198
+            }
175
           }
199
           }
176
         }
200
         }
177
 
201
 
@@ -182,6 +206,10 @@
182
             padding: 0;
206
             padding: 0;
183
             position: relative;
207
             position: relative;
184
             margin: 0% 0 0 -1%;
208
             margin: 0% 0 0 -1%;
209
+            .rightCar {
210
+              -webkit-animation: antSpinMove 8s linear infinite;;
211
+              animation: antSpinMove 8s linear infinite;;
212
+            }
185
           }
213
           }
186
         }
214
         }
187
 
215
 
@@ -192,6 +220,11 @@
192
             padding: 0;
220
             padding: 0;
193
             position: relative;
221
             position: relative;
194
             margin: 0% 0 0 -3%;
222
             margin: 0% 0 0 -3%;
223
+            .rightCar {
224
+              -webkit-animation: antSpinMove1100 8s linear infinite;;
225
+              animation: antSpinMove1100 8s linear infinite;;
226
+                
227
+            }
195
           }
228
           }
196
         }
229
         }
197
 
230
 
@@ -273,7 +306,7 @@
273
               align-items: center;
306
               align-items: center;
274
               justify-content: space-between;
307
               justify-content: space-between;
275
               padding: 0 1em;
308
               padding: 0 1em;
276
-              background:linear-gradient(0deg, #292929f2 0%, #25252540 100%); 
309
+              background: linear-gradient(0deg, #292929f2 0%, #25252540 100%);
277
               // linear-gradient(0deg, #ffffff00 20%, #7a7a7a29 100%);
310
               // linear-gradient(0deg, #ffffff00 20%, #7a7a7a29 100%);
278
               width: 100%;
311
               width: 100%;
279
               border-radius: 0.5em;
312
               border-radius: 0.5em;
@@ -300,9 +333,9 @@
300
           width: 15%;
333
           width: 15%;
301
           position: absolute;
334
           position: absolute;
302
           right: 0;
335
           right: 0;
303
-          bottom: 10%;
336
+          bottom: 15%;
304
           z-index: 9;
337
           z-index: 9;
305
-          height: 60%;
338
+          height: 45%;
306
 
339
 
307
           .title_ {
340
           .title_ {
308
             text-align: left;
341
             text-align: left;
@@ -376,21 +409,21 @@
376
 
409
 
377
         @media (min-height: 800px) {
410
         @media (min-height: 800px) {
378
           .rightContent {
411
           .rightContent {
379
-            bottom: 3%;
380
-            // height: 38%;
412
+            bottom: 15%;
413
+            height: 38%;
381
           }
414
           }
382
         }
415
         }
383
 
416
 
384
         @media (min-height: 900px) {
417
         @media (min-height: 900px) {
385
           .rightContent {
418
           .rightContent {
386
-            bottom: 3%;
419
+            bottom: 15%;
387
           }
420
           }
388
         }
421
         }
389
 
422
 
390
         @media (min-height: 1000px) {
423
         @media (min-height: 1000px) {
391
           .rightContent {
424
           .rightContent {
392
-            bottom: -5%;
393
-            // height: 32%;
425
+            bottom: 15%;
426
+            height: 32%;
394
           }
427
           }
395
         }
428
         }
396
       }
429
       }

+ 3 - 0
src/pages/gvc/view.jsx

@@ -400,6 +400,9 @@ class Gvc extends Component {
400
             </div>
400
             </div>
401
 
401
 
402
             <div className="centerCon">
402
             <div className="centerCon">
403
+              <p className="rightCar">
404
+                <img src={require("@assets/imgs/gvc/car.png").default} alt="" />
405
+              </p>
403
               <ul className="imgMsg">
406
               <ul className="imgMsg">
404
                 {
407
                 {
405
                   toJS(imgMsgData).map((item, index) => {
408
                   toJS(imgMsgData).map((item, index) => {

+ 5 - 2
src/pages/tqcDataVHome/component/bottomLineForSend.jsx

@@ -60,12 +60,15 @@ class BottomLineForSend extends Component {
60
           borderColor:"rgba(105, 255, 222, 0.5)",
60
           borderColor:"rgba(105, 255, 222, 0.5)",
61
           borderWidth:2,
61
           borderWidth:2,
62
           padding:5,
62
           padding:5,
63
+          className:'dyLeft',
63
           textStyle:{
64
           textStyle:{
64
             fontSize:12,
65
             fontSize:12,
66
+            textAlign:"left",
65
             color:"#ededed"
67
             color:"#ededed"
66
           },
68
           },
67
           backgroundColor:"#0000008a",
69
           backgroundColor:"#0000008a",
68
         },
70
         },
71
+        formatter: `日期: {b0}<br />{a0}: {c0}吨<br />{a1}: {c1}吨`,
69
         grid: {
72
         grid: {
70
           left: '8%',
73
           left: '8%',
71
           top: '15%',
74
           top: '15%',
@@ -146,7 +149,7 @@ class BottomLineForSend extends Component {
146
         }],
149
         }],
147
         series: [
150
         series: [
148
           {
151
           {
149
-            name: '吨数',
152
+            name: '产量',
150
             type: 'line',
153
             type: 'line',
151
             smooth: true,
154
             smooth: true,
152
             symbol: 'circle',
155
             symbol: 'circle',
@@ -181,7 +184,7 @@ class BottomLineForSend extends Component {
181
             "smooth": true
184
             "smooth": true
182
           },
185
           },
183
           {
186
           {
184
-            name: '外加工产量',
187
+            name: '外加工',
185
             type: 'line',
188
             type: 'line',
186
             smooth: true,
189
             smooth: true,
187
             symbol: 'circle',
190
             symbol: 'circle',

+ 162 - 9
src/themes/themes.less

@@ -44,14 +44,14 @@
44
 //   src: url(@assets/font/PingFangSC.ttf);
44
 //   src: url(@assets/font/PingFangSC.ttf);
45
 //   font-weight: 100;
45
 //   font-weight: 100;
46
 // }
46
 // }
47
-@dy-bg:#fff;
48
-@dy-font:rgba(0, 0, 0, 0.6);
49
-@dy-active:#1B45B4;
50
-@dy-other-font:#333;
51
-@dy-all-active:#FFFFFF33;
52
-@dy-all-themes:#1C45B4;//按钮
53
-@dy-all-active-hover:#072d97;//按钮hover
54
-@dy-all-little:#93aff8;//浅色的主题色
47
+@dy-bg: #fff;
48
+@dy-font: rgba(0, 0, 0, 0.6);
49
+@dy-active: #1B45B4;
50
+@dy-other-font: #333;
51
+@dy-all-active: #FFFFFF33;
52
+@dy-all-themes: #1C45B4; //按钮
53
+@dy-all-active-hover: #072d97; //按钮hover
54
+@dy-all-little: #93aff8; //浅色的主题色
55
 //数据查询-style
55
 //数据查询-style
56
 @yx_yxHd: 2px;
56
 @yx_yxHd: 2px;
57
 
57
 
@@ -107,6 +107,158 @@
107
 //品牌色,主要组件正常背景(Normal)
107
 //品牌色,主要组件正常背景(Normal)
108
 @yx_yxColor_brand_1: #4662e6;
108
 @yx_yxColor_brand_1: #4662e6;
109
 
109
 
110
+@-webkit-keyframes antSpinMove {
111
+  0% {
112
+    opacity: 0;
113
+    left: 53%;
114
+    top: 36%;
115
+  }
116
+
117
+  10% {
118
+    opacity: 0.2;
119
+  }
120
+
121
+  50% {
122
+    opacity: 1;
123
+  }
124
+
125
+  // 90%{
126
+  //   opacity: 0.2;
127
+  // }
128
+  100% {
129
+    opacity: 0.5;
130
+    left: 77%;
131
+    top: 16%;
132
+  }
133
+}
134
+
135
+@keyframes antSpinMove {
136
+  0% {
137
+    opacity: 0;
138
+    left: 53%;
139
+    top: 36%;
140
+  }
141
+
142
+  10% {
143
+    opacity: 0.2;
144
+  }
145
+
146
+  50% {
147
+    opacity: 1;
148
+  }
149
+
150
+  // 90%{
151
+  //   opacity: 0.2;
152
+  // }
153
+  100% {
154
+    opacity: 0.5;
155
+    left: 77%;
156
+    top: 16%;
157
+  }
158
+}
159
+
160
+
161
+@-webkit-keyframes antSpinMove1100 {
162
+  0% {
163
+    opacity: 0;
164
+    left: 55%;
165
+    top: 36%;
166
+  }
167
+
168
+  10% {
169
+    opacity: 0.2;
170
+  }
171
+
172
+  50% {
173
+    opacity: 1;
174
+  }
175
+
176
+  // 90%{
177
+  //   opacity: 0.2;
178
+  // }
179
+  100% {
180
+    opacity: 0.5;
181
+    left: 81%;
182
+    top: 17%;
183
+  }
184
+}
185
+
186
+@keyframes antSpinMove1100 {
187
+  0% {
188
+    opacity: 0;
189
+    left: 55%;
190
+    top: 36%;
191
+  }
192
+
193
+  10% {
194
+    opacity: 0.2;
195
+  }
196
+
197
+  50% {
198
+    opacity: 1;
199
+  }
200
+
201
+  // 90%{
202
+  //   opacity: 0.2;
203
+  // }
204
+  100% {
205
+    opacity: 0.5;
206
+    left: 81%;
207
+    top: 17%;
208
+  }
209
+}
210
+
211
+@-webkit-keyframes antSpinMove900 {
212
+  0% {
213
+    opacity: 0;
214
+    left: 53%;
215
+    top: 35%;
216
+  }
217
+
218
+  10% {
219
+    opacity: 0.2;
220
+  }
221
+
222
+  50% {
223
+    opacity: 1;
224
+  }
225
+
226
+  // 90%{
227
+  //   opacity: 0.2;
228
+  // }
229
+  100% {
230
+    opacity: 0.5;
231
+    left: 79%;
232
+    top: 16%;
233
+  }
234
+}
235
+
236
+@keyframes antSpinMove900 {
237
+  0% {
238
+    opacity: 0;
239
+    left: 53%;
240
+    top: 35%;
241
+  }
242
+
243
+  10% {
244
+    opacity: 0.2;
245
+  }
246
+
247
+  50% {
248
+    opacity: 1;
249
+  }
250
+
251
+  // 90%{
252
+  //   opacity: 0.2;
253
+  // }
254
+  100% {
255
+    opacity: 0.5;
256
+    left: 79%;
257
+    top: 16%;
258
+  }
259
+}
260
+
261
+
110
 //辅助色,脚手架正常背景(Normal)
262
 //辅助色,脚手架正常背景(Normal)
111
 @yx_yxColor_brand_2: #23283c;
263
 @yx_yxColor_brand_2: #23283c;
112
 
264
 
@@ -137,6 +289,7 @@
137
 
289
 
138
 //辅助色,主要组件鼠标按下背景(Pessed)
290
 //辅助色,主要组件鼠标按下背景(Pessed)
139
 @yx_yxColor_brand_11: #2d4ce1;
291
 @yx_yxColor_brand_11: #2d4ce1;
292
+
140
 //圆点/Circle
293
 //圆点/Circle
141
 .yx_yxCircle_sm {
294
 .yx_yxCircle_sm {
142
   width: 4 * @yx_yxHd;
295
   width: 4 * @yx_yxHd;
@@ -157,6 +310,7 @@
157
 .yx_yxShadow_down {
310
 .yx_yxShadow_down {
158
   box-shadow: 0px 2px 3px rgba(51, 65, 80, 3%);
311
   box-shadow: 0px 2px 3px rgba(51, 65, 80, 3%);
159
 }
312
 }
313
+
160
 .yx_yxShadow_down_new {
314
 .yx_yxShadow_down_new {
161
   box-shadow: 0px 1px 8px 0px rgba(51, 65, 80, 16%);
315
   box-shadow: 0px 1px 8px 0px rgba(51, 65, 80, 16%);
162
 }
316
 }
@@ -175,4 +329,3 @@
175
 
329
 
176
 //成功(Success)
330
 //成功(Success)
177
 @yx_yxColor_function_4: #3dba6d;
331
 @yx_yxColor_function_4: #3dba6d;
178
-