From c73cf65abef8217451e0cdb04cfb555b037aa163 Mon Sep 17 00:00:00 2001
From: xiangxy <shione_xxy@163.com>
Date: Fri, 26 May 2023 17:14:38 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8Fone=E5=B7=A6=E8=BE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/modules/homepage/one.vue | 1050 +++++++++++++++++++++++++++-
 1 file changed, 1049 insertions(+), 1 deletion(-)

diff --git a/src/pages/modules/homepage/one.vue b/src/pages/modules/homepage/one.vue
index 8182597..2fd4a58 100644
--- a/src/pages/modules/homepage/one.vue
+++ b/src/pages/modules/homepage/one.vue
@@ -5,12 +5,688 @@
         </div>
         <div class="n_body_container">
             <div class="n_body_container_wraper">
-
+                <div class="box1">
+                  <div class="item_wrap">
+                    <div class="item_tip">
+                      <div class="item_tip_left">混料</div>
+                    </div>
+                    <div class="item_content_3">
+                      <div class="right_1_up">
+                        <div class="item_title fl">混料</div>
+                        <div class="right_1_up_left">
+                          <div class="echart_d3_wrap">
+                            <div id="echart_d01" style="width: 100%; height: 100%"></div>
+                          </div>
+                        </div>
+                        <div class="right_1_up_right">
+                          <div class="right_1_up_right_item">
+                            <p class="right_1_up_p1">当日计划生产：</p>
+                            <p class="right_1_up_p2">100<span>吨</span></p>
+                          </div>
+                          <div class="right_1_up_right_item">
+                            <p class="right_1_up_p1">当日实际生产：</p>
+                            <p class="right_1_up_p2">80<span>吨</span></p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="item_wrap">
+                    <div class="item_tip">
+                      <div class="item_tip_left">成型</div>
+                    </div>
+                    <div class="item_content_3">
+                      <div class="right_1_up">
+                        <div class="item_title fl">成型</div>
+                        <div class="right_1_up_left">
+                          <div class="echart_d3_wrap">
+                            <div id="echart_d02" style="width: 100%; height: 100%"></div>
+                          </div>
+                        </div>
+                        <div class="right_1_up_right">
+                          <div class="right_1_up_right_item">
+                            <p class="right_1_up_p1">当日计划生产：</p>
+                            <p class="right_1_up_p2">100<span>万块</span></p>
+                          </div>
+                          <div class="right_1_up_right_item">
+                            <p class="right_1_up_p1">当日实际生产：</p>
+                            <p class="right_1_up_p2">80<span>万块</span></p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="box2">
+                  <div class="item_wrap">
+                    <div class="item_tip">
+                      <div class="item_tip_left">当日混料生产</div>
+                    </div>
+                    <div class="item_content item_content_3">
+                      <div id="echart_d03" style="width: 100%; height: 100%"></div>
+                    </div>
+                  </div>
+                  <div class="item_wrap">
+                    <div class="item_tip">
+                      <div class="item_tip_left">当日压制生产</div>
+                    </div>
+                    <div class="item_content item_content_3">
+                      <div id="echart_04" style="width: 100%; height: 100%"></div>
+                    </div>
+                  </div>
+                </div>
             </div>
         </div>
     </div>
 </template>
 
+<script>
+export default {
+  components: {
+  },
+  data () {
+    return {
+      finishRate: 80,
+      arrL2: [{date: '碾机1', elbow_qty: '15'}, {date: '碾机2', elbow_qty: '25'}, {date: '碾机3', elbow_qty: '8'}],
+      echartData1: [{data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '盘管双斜切'}],
+      myCharts01: '',
+      myCharts02: '',
+      myCharts03: '',
+      myCharts04: ''
+    }
+  },
+  mounted () {
+    this.setEchart01()
+    this.setEchart02()
+    this.setEchart03()
+    this.setEchart04()
+  },
+  methods: {
+    setEchart03 () {
+      let date = []
+      let data1 = []
+      this.arrL2.map(e => {
+        date.push(e.date)
+        data1.push(e.elbow_qty)
+      })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '产量（kg）', itemStyle: {color: '#0E90FD'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            },
+            rotate: 50
+          },
+          data: date
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '产量（kg）',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            },
+            data: data1
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d03')
+      if (this.myCharts03 !== '') {
+        this.myCharts03.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts03 = this.$echarts.init(echart)
+        this.myCharts03.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts03.resize()
+        })
+      }
+    },
+    setEchart04 () {
+      let data1 = []
+      let data2 = []
+      let data3 = []
+      let data4 = []
+      let device = []
+      this.echartData1.map(e => {
+        data1.push(e.data1)
+        data2.push(e.data2)
+        data3.push(e.data3)
+        data4.push(e.data4)
+        device.push(e.device)
+      })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '正常运行', itemStyle: {color: '#33CCCC'}}, {name: '故障', itemStyle: {color: '#EAAD24'}}, {name: '待机', itemStyle: {color: '#0E90FD'}}, {name: '关机', itemStyle: {color: '#c9c9c9'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+            }
+          },
+          data: device
+        },
+        yAxis: {
+          type: 'value',
+          axisLine: {
+            show: false
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          }
+        },
+        series: [
+          {
+            name: '正常运行',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#33CCCC',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(31,89,89,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: data1
+          },
+          {
+            name: '故障',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#B68845',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(134,98,45,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: data2
+          },
+          {
+            name: '待机',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 1
+                  },
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 0.1
+                  }
+                ])
+              }
+            },
+            data: data3
+          },
+          {
+            name: '关机',
+            type: 'bar',
+            barWidth: '8',
+            itemStyle: {
+              normal: {
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#c9c9c9',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(148,145,145,0.25)',
+                    opacity: 0.25
+                  }
+                ])
+              }
+            },
+            data: data4
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_04')
+      // if (this.myCharts04 !== '') {
+      //   this.myCharts04.dispose()
+      // }
+      if (echart !== null) {
+        this.myCharts04 = this.$echarts.init(echart)
+        this.myCharts04.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts04.resize()
+        })
+      }
+    },
+    setEchart10 () {
+      let total = [100, 200, 120, 133, 80, 155, 250]
+      let names = [10, 20, 30, 40, 50, 60, 70]
+      let max = 0
+      // this.chartData2.map(el => {
+      //   total.push(el.err_times)
+      //   names.push(el.device_name)
+      //   max = Math.max(max, Number(el.err_times))
+      // })
+      let option = {
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            startValue: 0, // 从头开始。
+            endValue: 9 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        grid: {
+          top: 30,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          borderColor: '#ffffff',
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          textStyle: {
+            color: '#fff',
+            fontSize: 18,
+            lineHeight: 18
+          },
+          itemGap: 30.86,
+          itemWidth: 14.16,
+          itemHeight: 7.38,
+          data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
+        },
+        xAxis: {
+          type: 'category',
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#8FABBF ',
+              fontSize: 14,
+              lineHeight: 14
+            }
+          },
+          axisLabel: {
+            color: '#8FABBF ',
+            rotate: 50
+          },
+          data: names
+        },
+        yAxis: {
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#909399'
+            }
+          },
+          axisLabel: {
+            color: '#909399'
+          },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF',
+              opacity: 0.2
+            }
+          },
+          max: max
+        },
+        series: [
+          {
+            name: '产量',
+            type: 'bar',
+            barWidth: 38,
+            itemStyle: {
+              normal: {
+                show: true,
+                // color: '#67c23a',
+                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  {
+                    offset: 0,
+                    color: '#0E90FD',
+                    opacity: 1
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(96,112,128,0.10)',
+                    opacity: 0.1
+                  }
+                ]),
+                borderWidth: 0
+              }
+            },
+            // data: [100, 51, 90, 41, 91, 61, 51]
+            data: total
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d10')
+      this.myCharts10 = this.$echarts.init(echart)
+      this.myCharts10.setOption(option)
+      // this.autoMove(option, 3)
+      window.addEventListener('resize', () => {
+        this.myCharts10.resize()
+      })
+    },
+    setEchart01 () {
+      let value = Number(this.finishRate)
+      let title = '%'
+      let text = '完成率'
+      let option = {
+        title: [
+          {
+            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 26,
+                  color: '#00D9FF',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700'
+                },
+                b: {
+                  fontSize: 16,
+                  color: '#ffffff',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700',
+                  padding: [10, 0, 0, 3]
+                },
+                c: {
+                  color: '#FFFFFF',
+                  fontSize: 13,
+                  fontWeight: '700',
+                  fontFamily: 'SourceHanSansCN',
+                  padding: [10, 0, 0, 0]
+                }
+              }
+            }
+          }
+        ],
+        polar: {
+          radius: ['75%', '83%'],
+          center: ['50%', '50%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {name: '',
+            type: 'bar',
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#0a2543'
+            },
+            data: [value],
+            coordinateSystem: 'polar',
+            itemStyle: {
+              normal: {
+                color: '#00dfff'
+              }
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d01')
+      // if (this.myCharts01 !== '') {
+      //   this.myCharts01.dispose()
+      // }
+      if (echart !== null) {
+        this.myCharts01 = this.$echarts.init(echart)
+        this.myCharts01.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts01.resize()
+        })
+      }
+    },
+    setEchart02 () {
+      let value = Number(this.finishRate)
+      let title = '%'
+      let text = '完成率'
+      let option = {
+        title: [
+          {
+            text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+              rich: {
+                a: {
+                  fontSize: 26,
+                  color: '#00D9FF',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700'
+                },
+                b: {
+                  fontSize: 16,
+                  color: '#ffffff',
+                  fontFamily: 'SourceHanSansCN',
+                  foontWeight: '700',
+                  padding: [10, 0, 0, 3]
+                },
+                c: {
+                  color: '#FFFFFF',
+                  fontSize: 13,
+                  fontWeight: '700',
+                  fontFamily: 'SourceHanSansCN',
+                  padding: [10, 0, 0, 0]
+                }
+              }
+            }
+          }
+        ],
+        polar: {
+          radius: ['75%', '83%'],
+          center: ['50%', '50%']
+        },
+        angleAxis: {
+          max: 100,
+          show: false
+        },
+        radiusAxis: {
+          type: 'category',
+          show: true,
+          axisLabel: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        series: [
+          {name: '',
+            type: 'bar',
+            roundCap: true,
+            showBackground: true,
+            backgroundStyle: {
+              color: '#0a2543'
+            },
+            data: [value],
+            coordinateSystem: 'polar',
+            itemStyle: {
+              normal: {
+                color: '#00dfff'
+              }
+            }
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d02')
+      // if (this.myCharts02 !== '') {
+      //   this.myCharts02.dispose()
+      // }
+      if (echart !== null) {
+        this.myCharts02 = this.$echarts.init(echart)
+        this.myCharts02.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts02.resize()
+        })
+      }
+    }
+  }
+}
+</script>
+
 <style lang="stylus" scoped>
 @import '~@css/mixin'
 .n_container
@@ -29,4 +705,376 @@
     padding 40px 0 20px 54px
 .n_body_container_wraper
     _wh(100%, 100%)
+.box1
+  // _wh(100%, 20%)
+  width 100%
+  _fj()
+  flex-direction row
+.box2
+  clear both
+  _wh(100%, 38%)
+  _fj()
+  flex-direction row
+.item_title
+  _font(46px, 100%, #fff,,,)
+  display inline-block
+  height 100%
+  line-height 30%
+  padding-right .8rem
+  padding-top .6rem
+  padding-left .3rem
+.bg
+  _wh(100%, 100%)
+  overflow hidden
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .3rem .2509rem 0
+  overflow hidden
+  clear both
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../../..//images/screen1/bottom.png) no-repeat
+.left_wrap
+  float left
+  _wh(4.0756rem, 100%)
+.center_wrap
+  float left
+  _wh(9.96rem, 100%)
+  margin-left .2936rem
+  padding .4rem .16rem
+  background center bottom / 100% 100% url(../../..//images/screen1/item_2.png) no-repeat
+.right_wrap
+  float right
+  _wh(4.0273rem, 100%)
+.item_wrap
+  _wh(100%, 100%)
+.item_tip
+  clear both
+  _wh(100%, .4rem)
+  line-height .4rem
+  background center center / 100% 100% url(../../..//images/screen1/title_bg_1.png) no-repeat
+.item_tip_2
+  background center center / 100% 100% url(../../..//images/screen1/title_bg_2.png) no-repeat
+.item_tip_left
+  float left
+  _wh(60%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.22rem, inherit, #fff, 700, left)
+  letter-spacing .02rem
+  text-shadow 0 0 .09rem #159AFF
+  padding-left .8rem
+.item_tip_right
+  float right
+  _wh(39%, 100%)
+  line-height inherit
+  text-align right
+  padding-right .09rem
+  span
+    _font(.14rem, inherit, #FFCB00, lighter,)
+  .span1
+    font-size .12rem
+    color #84B0DA
+.item_content
+  // _wh(100%, calc(100% - .32rem))
+  padding .17rem .17rem .24rem .17rem
+  background-color #011834
+.item_content_1
+  _wh(100%, 100%)
+  _fj(space-around)
+  padding .17rem 0 .24rem
+.item_content_1_inner
+  _wh(1.2rem, 100%)
+  background-color #011834
+.item_content_1_inner_1
+  _wh(100%, .37rem)
+  font-family "SourceHanSansCN"
+  _font(.14rem, .37rem, #78B1DE, 700, center)
+  letter-spacing .02rem
+  background center center / 100% 100% url(../../..//images/screen1/item_1.png) no-repeat
+.item_content_1_inner_2
+  _wh(100%, calc((100% - .37rem) / 3))
+  overflow hidden
+  _fj(space-evenly)
+  flex-direction column
+  padding-top .06rem
+.item_content_1_inner_2_bg
+  background center bottom / 1.02rem .03rem url(../../..//images/screen1/line_1.png) no-repeat
+.item_content_1_inner_2_p1
+  font-family "SourceHanSansCN"
+  _font(.18rem, .18rem, #fff, 700, center)
+  letter-spacing .0188rem
+.item_content_1_inner_2_p2
+  font-family "SourceHanSansCN"
+  _font(.14rem, .14rem, #84B0DA, 700, center)
+  letter-spacing .02rem
+.item_wrap_2
+  _wh(100%, calc((100% - .4rem) / 2))
+.item_wrap_3
+  margin-top .4rem
+.item_content_2
+  _wh(100%, calc(100% - .32rem))
+  margin-top .06rem
+  border .01rem solid rgba(8,205,248,0.3)
+.scroll_wrap
+  _wh(100%, 100%)
+.scroll_tab_1
+  _wh(100%, .4rem)
+  border-bottom .01rem solid rgba(8,205,248,0.3)
+  li
+    float left
+    width 12%
+    _font(.14rem,.4rem,#78B1DE,,center)
+    word-wrap break-word
+    word-break break-all
+    white-space nowrap
+    padding 0 .02rem
+    overflow hidden
+    box-sizing border-box
+    &:nth-child(8)
+      width 16%
+.scroll_tab_2 li
+  width 17%
+  &:first-child
+    width 15%
+.scroll_container_1
+  width 100%
+  height calc(100% - .4rem)
+  overflow hidden
+.scroll-ul_1
+  li
+    _wh(100%, .44rem)
+    border-bottom .01rem solid rgba(8,205,248,0.3)
+    &:nth-child(even)
+      background rgba(1,24,52,0.60)
+      box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
+    .scroll-ul_1_div
+      float left
+      _wh(12%, .44rem)
+      _fj(center)
+      _font(.14rem, .44rem, #fff,,center)
+      word-wrap break-word
+      word-break break-all
+      white-space nowrap
+      padding 0 .02rem
+      overflow hidden
+      &:nth-child(8)
+        width 16%
+.scroll-ul_2 li .scroll-ul_1_div
+  width 17%
+  &:first-child
+    width 15%
+.progress_line_wrap
+  position relative
+  _wh(1.35rem, .03rem)
+  background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
+.progress_dot_wrap
+  position absolute
+  _wh(100%, .15rem)
+  top -.06rem
+  left -.05rem
+.progress_dot
+  position absolute
+  top 0
+  left 0
+  _wh(.15rem, .15rem)
+  background center center / 100% 100% url(../../..//images/screen1/dot_1.png) no-repeat
+.item_content_3
+  _wh(100%, 100%)
+  padding-top .1rem
+  _fj(flex-start)
+  flex-direction column
+.right_1_up
+  clear both
+  _wh(100%, 100%)
+  padding 0 .3rem .2rem
+  background center bottom / 100% .03rem url(../../..//images/screen1/line_2.png) no-repeat
+.right_1_up_left
+  float left
+  _wh(1.5rem, 1.5rem)
+  background center bottom / 100% 100% url(../../..//images/screen1/item_3.png) no-repeat
+  _fj(center)
+.echart_d3_wrap
+  _wh(82%, 82%)
+  margin 0 auto
+.right_1_up_right
+  float right
+  _wh(48%, 100%)
+.right_1_up_right_item
+  _wh(100%, .6rem)
+  background center bottom / 100% 100% url(../../..//images/screen1/item_4.png) no-repeat
+  _fj(space-evenly)
+  // flex-direction column
+  &:nth-child(2)
+    margin-top .2rem
+.right_1_up_p1
+  font-family "SourceHanSansCN"
+  _font(.22rem, .22rem, #78B1DE, 700, center)
+  margin-left .24rem
+.right_1_up_p2
+  font-family "SourceHanSansCN"
+  _font(.24rem, .24rem, $yellow, 700, center)
+  margin-right .2rem
+  span
+    _font(.18rem, .2rem, #fff, 700, center)
+    padding-left .6rem
+.right_1_down
+  _wh(100%, calc(100% - 1.6rem))
+  padding .05rem .3rem 0
+.right_1_down_inner_1
+  _wh(100%, .28rem)
+  overflow hidden
+  _fj()
+  div
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.12rem, .28rem, #84B0DA, 700,)
+      letter-spacing .0171rem
+    &:nth-child(2)
+      font-family "SourceHanSansCN"
+      _font(.16rem, .28rem, #fff, 700, right)
+      letter-spacing .02rem
+.right_1_down_inner_2
+  _wh(100%, .1811rem)
+  background-color rgba(0,213,255,0.20)
+  _fj()
+  div
+    height .0805rem
+    &:nth-child(1)
+      background-color #07E083
+    &:nth-child(2)
+      background-color #B68845
+.right_1_down_inner_3
+  _wh(100%, .3rem)
+  margin-top .1rem
+  _fj()
+.right_1_down_inner_3_i
+  _wh(1.83rem, .3rem)
+  _fj()
+  background center bottom / 100% 100% url(../../..//images/screen1/item_5.png) no-repeat
+.right_1_down_inner_3_l
+  _wh(50%, 100%)
+  overflow hidden
+  clear both
+  span
+    display block
+    float left
+    &:nth-child(1)
+      _wh(.0725rem, .3rem)
+      margin-left .15rem
+      _fj()
+      overflow hidden
+      i
+        display block
+        _wh(.0725rem, .0725rem)
+        border-radius 100%
+    &:nth-child(2)
+      _wh(calc(100% - 0.2825rem), .3rem)
+      font-family "SourceHanSansCN"
+      _font(.12rem, .3rem, #fff,400,)
+      margin-left .06rem
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+.right_1_down_inner_3_r
+  _wh(50%, 100%)
+  line-height .3rem
+  overflow hidden
+  text-align right
+  span
+    font-family "SourceHanSansCN"
+    _font(.12rem, .3rem, #fff,700,)
+    &:nth-child(1)
+      font-family "SourceHanSansCN"
+      _font(.18rem, .3rem, #00D5FF,700,)
+      overflow hidden
+      text-overflow ellipsis
+      white-space nowrap
+.item_content_4
+  _wh(100%, calc(100% - .32rem))
+  padding .1rem 0 .2rem
+  overflow hidden
+.scroll-ul_2
+  li
+    _wh(100%, .4rem)
+    clear both
+    margin-bottom .1rem
+    &:nth-child(-n+3)
+      background center center / 100% 100% url(../../..//images/screen1/item_6.png) no-repeat
+    &:nth-child(n+4)
+      background center center / 100% 100% url(../../..//images/screen1/item_7.png) no-repeat
+    &:nth-child(1) .scroll-ul_2_div_1
+      background center center / .24rem .27rem url(../../..//images/screen1/top_1.png) no-repeat
+    &:nth-child(2) .scroll-ul_2_div_1
+      background center center / .24rem .27rem url(../../..//images/screen1/top_2.png) no-repeat
+    &:nth-child(3) .scroll-ul_2_div_1
+      background center center / .24rem .27rem url(../../..//images/screen1/top_3.png) no-repeat
+.scroll-ul_2_div_1
+  float left
+  _wh(.6rem, 100%)
+  _font(.16rem, .4rem, #fff, 700, center)
+.scroll-ul_2_div_2
+  float left
+  _wh(calc(60% - .6rem), 100%)
+  font-family "SourceHanSansCN"
+  _font(.14rem, .4rem, #fff, 700,)
+  padding-left .1rem
+  letter-spacing .02rem
+.scroll-ul_2_div_3
+  float right
+  _wh(30%, 100%)
+  font-family "SourceHanSansCN"
+  _font(.12rem, .4rem, #fff, 700, right)
+  padding-right .2rem
+  span
+   &:nth-child(1)
+    font-size .18rem
+    letter-spacing: .0125rem
+.item_content_5
+  _wh(100%, calc(100% - .32rem))
+  padding-top .3rem
+  clear both
+.item_5_l
+  float left
+  _wh(50%, 100%)
+.item_5_r
+  float right
+  _wh(50%, 100%)
+  _fj()
+  flex-direction column
+.item_5_l_1
+  _wh(100%, 60%)
+  background right center / .02rem 100% url(../../..//images/screen1/line_3.png) no-repeat
+.item_5_l_2
+  _wh(100%, 40%)
+  _fj()
+  flex-direction column
+  // .right_1_down_inner_3_i
+  //   &:nth-child(1), &:nth-child(2)
+  //     margin-bottom 5%
+.color1
+  background-color #07E083
+.color2
+  background-color #B68845
+.swiper_wrap
+  clear both
+  _wh(100%, calc(100% - .32rem))
+  padding .17rem 0 .24rem
+  overflow hidden
+.swiper_wrap_con
+  _wh(100%, 100%)
+.swiper_item
+  position relative
+  left 0
+  float left
+  _wh(100%, 100%)
+  _fj(space-around)
+.p1
+  position absolute
+  display block
+  cursor pointer
+  left .2509rem
+  top .22rem
+  font-family "SourceHanSansCN"
+  _font(.18rem, .30rem, #fff, 700,)
+  letter-spacing .01rem
 </style>