pressprod

src/components/header2.vue

@@ -0,0 +1,109 @@
+<template>
+  <header>
+    <p>{{title}}</p>
+    <div class="data_box clearfix">
+      <div class="date_item date">{{date}}</div>
+      <div class="date_item week">{{week}}</div>
+      <div class="date_item time clearfix">
+        <div class="tiem_item hours">{{hours}}</div>
+        <div class="colon">:</div>
+        <div class="tiem_item minutes">{{minutes}}</div>
+        <div class="colon">:</div>
+        <div class="tiem_item seconds">{{seconds}}</div>
+      </div>
+    </div>
+    <slot></slot>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  data () {
+    return {
+      timer: null,
+      time: '',
+      hours: '',
+      minutes: '',
+      seconds: '',
+      date: '',
+      week: ''
+    }
+  },
+  props: {
+    title: String
+  },
+  created () {
+    this.updateTime()
+    this.timer = window.setInterval(this.updateTime, 1000)
+  },
+  beforeDestroy () {
+    this.$once('hook:beforeDestroy', () => {
+      clearInterval(this.timer)
+    })
+  },
+  methods: {
+    updateTime () {
+      let cd = new Date()
+      let year = cd.getFullYear()
+      let month = cd.getMonth() + 1 < 10 ? '0' + (cd.getMonth() + 1) : cd.getMonth() + 1
+      let date = cd.getDate() < 10 ? '0' + cd.getDate() : cd.getDate()
+      let hh = cd.getHours() < 10 ? '0' + cd.getHours() : cd.getHours()
+      let mm = cd.getMinutes() < 10 ? '0' + cd.getMinutes() : cd.getMinutes()
+      let ss = cd.getSeconds() < 10 ? '0' + cd.getSeconds() : cd.getSeconds()
+      var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
+      let myddy = new Date().getDay()
+      let week = weekday[myddy]
+      this.time = `${hh}:${mm}:${ss}`
+      this.hours = `${hh}`
+      this.minutes = `${mm}`
+      this.seconds = `${ss}`
+      this.date = `${year}年${month}月${date}日`
+      this.week = `${week}`
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '../css/mixin'
+header
+  position relative
+  width 100%
+  // height 1rem
+  height 60px
+  position relative
+  background center center / 100% 100% url(../images/screen1/header.png) no-repeat
+  p
+    font-family "PangMenZhengDao"
+    _font(.4rem, 1rem, #ffffff, lighter, center)
+    font-size 28px
+    line-height 60px
+    font-weight bold
+    letter-spacing .05rem
+    text-shadow 0 .08rem .08rem rgba(0,0,0,0.30)
+.data_box
+  position absolute
+  // right 0
+  right 20px
+  // top .14rem
+  top 1.3rem
+  height .37rem
+.date, .week
+  padding-right .2rem
+.time
+  // width 1.7rem
+  text-align center
+.date_item
+  float left
+  _font(.2rem, .37rem, #fff,,)
+  font-size 20px
+.tiem_item
+  float left
+  _font(.32rem, .37rem, #fff,,)
+  font-size 20px
+.colon
+  float left
+  _font(.32rem, .37rem, #fff,,)
+  font-size 20px
+</style>

src/config/getData1.js

@@ -0,0 +1,4 @@
+import {post} from '@js/http.js'
+
+/**  压制看板 */
+export const cockpitpress = (id) => post('api/cockpit/press', {})

src/css/mixin.styl

@@ -0,0 +1,49 @@
+$red = #ed4754
+$green = #67c23a
+$yellow = #f2d648
+$orange = #f17d3a
+$blue = #6798ef
+$gray = #c9c9c9
+$fc1 = #323232
+
+.green
+  background-color #11ff0d
+.yellow
+  background-color #fdfd0f
+.gray
+  background-color #bfbfbf
+.red
+  background-color #ff1016
+
+//宽高
+_wh(w, h)
+  width: w
+  height: h
+
+//字体大小、行高、颜色
+_font(size,height,color=$fc1,weight=normal,align=left)
+  font-size: size
+  line-height: height
+  color: color
+  font-weight: weight
+  text-align: align
+
+//flex 布局和 子元素 对其方式
+_fj(x=space-between,y=center)
+  display: flex
+  justify-content: x
+  align-items: y
+
+// 背景图片地址和大小
+_bis(url,w,h=auto,x=center,y=center)
+  background-position: x y
+  background-size: w h
+  background-image: url(url)
+  background-repeat: no-repeat
+
+// 定位上下居中
+_ct()
+  position: absolute
+  top: 50%
+  transform: translateY(-50%)
+  

src/pages/modules/PressProd.vue

@@ -0,0 +1,805 @@
+<template>
+    <section class="bg">
+      <t-header title="压 制 生 产 看 板">
+      </t-header>
+      <div class="container">
+        <div class="con1">
+          <div class="cbox">
+            <div>当前班次：</div>
+            <div class="num" style="color: #f7b502; font-size: 0.46rem; letter-spacing: 15px;">
+              {{showText}}
+            </div>
+          </div>
+          <div class="cbox">
+            <div>计划生产：</div>
+            <div class="num">
+              <div class="bg" v-for="(item, i) in showNum1" :key="i" :class="{dot: item === '.'}">{{item}}</div>
+            </div>
+            <div>块</div>
+          </div>
+          <div class="cbox">
+            <div>已生产：</div>
+            <div class="num">
+              <div class="bg" v-for="(item, i) in showNum2" :key="i" :class="{dot: item === '.'}">{{item}}</div>
+            </div>
+            <div>块</div>
+          </div>
+          <div class="cbox">
+            <div>不合格数：</div>
+            <div class="num">
+              <div class="bg" v-for="(item, i) in showNum3" :key="i" :class="{dot: item === '.'}">{{item}}</div>
+            </div>
+            <div>块</div>
+          </div>
+        </div>
+        <div class="center_wrapper" style="display:flex">
+          <div class="con2">
+            <div class="title"><span class="dotIncon"></span><span class="tltxt">当班生产</span></div>
+            <div class="item_content_0">
+              <div id="echart_d1" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
+          <div class="con3">
+            <div class="title"><span class="dotIncon"></span><span class="tltxt">当月订单</span></div>
+            <div class="item_content_1">
+              <div id="echart_d2" style="width: 100%; height: 100%"></div>
+            </div>
+          </div>
+        </div>
+        <div class="con4">
+          <div class="block_h2">
+            <div class="title"><span class="dotIncon"></span><span class="tltxt">生产任务</span></div>
+          </div>
+          <div class="list_scroll_title">
+            <span>设备</span><span>工单号</span><span>班次类型</span><span>生产物料</span><span>订单客户</span><span>计划开始</span><span>计划数(块)</span><span>已生产(块)</span><span>不合格(块)</span><span>合格率</span><span>状态</span><span>开工人</span><span>开工时间</span><span>完工时间</span>
+          </div>
+          <vue-seamless-scroll :data="ProductionTask" :class-option="classOption" class="content-block-scroll">
+            <ul class="content-block-scroll-ul">
+              <li v-for="(e, i) in ProductionTask" :key="i">
+                <span>{{e.device}}</span><span>{{e.workorder_code}}</span><span>{{e.team}}</span><span>{{e.material_name}}</span><span>{{e.material_spec}}</span><span>{{e.planproducestart_date}}</span><span>{{e.plan_qty}}</span><span>{{e.real_qty}}</span><span>{{e.unqualified_qty}}</span><span>{{e.qualified_rate}}</span><span>{{e.workorder_status}}</span><span>{{e.operator}}</span><span>{{e.realproducestart_date}}</span><span>{{e.realproduceend_date}}</span>
+              </li>
+            </ul>
+          </vue-seamless-scroll>
+        </div>
+      </div>
+      <section class="bottom"></section>
+    </section>
+</template>
+
+<script>
+import THeader from '@components/header2.vue'
+// import * as echarts from 'echarts'
+import { cockpitpress } from '@js/getData1'
+export default {
+  name: 'ProdCount',
+  components: {
+    THeader
+  },
+  data () {
+    return {
+      timeOut: null,
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      showText: '',
+      showNum1: '0',
+      showNum2: '0',
+      showNum3: '0',
+      myCharts02: '',
+      myCharts01: '',
+      materData: [],
+      deviceData: [],
+      PersonnelMonthlyProduction: [],
+      MonthlyWorkOrder: [],
+      // MonthlyWorkOrder: [
+      //   {guada_num: 1200, name: 'XC-0', order_num: 1655, residue_num: 455},
+      //   {guada_num: 1200, name: 'XC-1', order_num: 1655, residue_num: 455},
+      //   {guada_num: 1200, name: 'XC-2', order_num: 1655, residue_num: 455},
+      //   {guada_num: 1200, name: 'XC-3', order_num: 1655, residue_num: 455},
+      //   {guada_num: 1200, name: 'XC-4', order_num: 1655, residue_num: 455},
+      //   {guada_num: 1200, name: 'XC-5', order_num: 1655, residue_num: 455},
+      //   {guada_num: 1200, name: 'XC-6', order_num: 1655, residue_num: 455}
+      // ],
+      // MonthlyWorkOrder: [
+      //   {
+      //     name: 'A1',
+      //     order_num: '150',
+      //     guada_num: '100',
+      //     residue_num: '50'
+      //   },
+      //   {
+      //     name: 'A2',
+      //     order_num: '130',
+      //     guada_num: '120',
+      //     residue_num: '10'
+      //   },
+      //   {
+      //     name: 'A3',
+      //     order_num: '300',
+      //     guada_num: '30',
+      //     residue_num: '270',
+      //   },
+      //   {
+      //     name: 'A4',
+      //     order_num: '150',
+      //     guada_num: '100',
+      //     residue_num: '50'
+      //   },
+      //   {
+      //     name: 'A5',
+      //     order_num: '300',
+      //     guada_num: '100',
+      //     residue_num: '200'
+      //   }
+      // ],
+      ProductionTask: [],
+      ShiftProductionList: [],
+      resData: {}
+    }
+  },
+  computed: {
+    classOption () {
+      return {
+        step: 0.4, // 数值越大速度滚动越快
+        limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },
+  mounted () {
+    this.initData()
+    this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+    clearInterval(this.timeOut)
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this.initData()
+      }, this.interTime)
+    },
+    async initData () {
+      let res = await cockpitpress()
+      clearInterval(this.timeOut)
+      this.resData = res
+      // this.showNum1 = '3020'
+      // this.showNum2 = '3000'
+      // this.showNum3 = '220'
+      this.showText = res.DayShift
+      this.showNum1 = (res.DayShiftList[0].plan_qty + '').split('')
+      this.showNum2 = (res.DayShiftList[0].real_qty + '').split('')
+      this.showNum3 = (res.DayShiftList[0].unqualified_qty + '').split('')
+      // this.PersonnelMonthlyProduction = res.PersonnelMonthlyProduction
+      this.MonthlyWorkOrder = res.MonthlyWorkOrder
+      this.ProductionTask = res.ProductionTask
+      this.ShiftProductionList = res.ShiftProductionList
+      this.setEchart01()
+      this.setEchart02()
+    },
+    setEchart01 () {
+      let data1 = []
+      let data2 = []
+      let data3 = []
+      let device = []
+      this.ShiftProductionList.map(e => {
+        data1.push(e.qualified_qty)
+        data2.push(e.unqualified_qty)
+        data3.push(e.total_difference)
+        device.push(e.column_name)
+      })
+      let option = {
+        grid: {
+          top: 50,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          containLabel: true
+        },
+        legend: {
+          icon: 'rect',
+          // right: 0,
+          textStyle: {
+            color: '#fff',
+            fontSize: 14,
+            lineHeight: 14
+          },
+          itemGap: 40.86,
+          itemWidth: 20.16,
+          itemHeight: 7.38,
+          data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}, {name: '剩余数', 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
+            }
+          },
+          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: '12',
+            label: {
+              show: true,
+              position: 'top', // 位置
+              color: '#A7D6F4',
+              fontSize: 14,
+              distance: 15, // 距离
+              formatter: '{c}' // 这里是数据展示的时候显示的数据
+            },
+            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: '12',
+            label: {
+              show: true,
+              position: 'top', // 位置
+              color: '#A7D6F4',
+              fontSize: 14,
+              distance: 15, // 距离
+              formatter: '{c}' // 这里是数据展示的时候显示的数据
+            },
+            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: '12',
+            label: {
+              show: true,
+              position: 'top', // 位置
+              color: '#A7D6F4',
+              fontSize: 14,
+              distance: 15, // 距离
+              formatter: '{c}' // 这里是数据展示的时候显示的数据
+            },
+            barGap: '200%',
+            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
+          }
+        ]
+      }
+      let echart = document.getElementById('echart_d1')
+      // 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 max = 1
+      this.MonthlyWorkOrder.map(el => {
+        if (Number(el.order_num) >= Number(max)) {
+          max = Number(el.order_num)
+        }
+      })
+      let option = {
+        grid: {
+          top: 0,
+          left: 0,
+          right: 58,
+          bottom: 0,
+          containLabel: true
+        },
+        dataZoom: [
+          {
+            show: false, // 为true滚动条出现
+            type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
+            orient: 'vertical',
+            startValue: 0, // 从头开始。
+            endValue: 3 // end百分比显示范围，endValue具体显示几个数值
+          }
+        ],
+        xAxis: {
+          type: 'value',
+          min: 0,
+          max: max,
+          boundaryGap: false,
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            show: false
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: [8, 4],
+              dashOffset: 4,
+              color: '#8FABBF'
+            }
+          },
+          axisLabel: {
+            interval: 0,
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 16
+              // align: 'center'
+            }
+          },
+          formatter: '{value}'
+        },
+        yAxis: {
+          type: 'category',
+          inverse: true,
+          axisLine: {
+            show: true,
+            lineStyle: {
+              width: 2,
+              color: '#8FABBF'
+            }
+          },
+          splitNumber: 2,
+          axisTick: {
+            show: false
+          },
+          axisLabel: {
+            textStyle: {
+              color: '#8FABBF',
+              fontSize: 14
+            }
+          },
+          data: this.MonthlyWorkOrder.map((it) => it.name)
+        },
+        series: [
+          {
+            name: '订单1',
+            type: 'bar',
+            stack: '总量',
+            barWidth: 30,
+            itemStyle: {
+              normal: {
+                // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                //   {
+                //     offset: 0,
+                //     // color: '#f6b643'
+                //     color: '#ed7d39'
+                //     // color: '#EAAD24'
+                //   },
+                //   {
+                //     offset: 1,
+                //     color: '#ed7d39'
+                //     // color: '#EAAD24'
+                //   }
+                // ], false),
+                label: {
+                  color: '#fff',
+                  show: true,
+                  position: 'inside'
+                }
+              }
+            },
+            // data: [8, 10, 20, 20, 10, 10, 20],
+            data: this.MonthlyWorkOrder.map((it) => it.guada_num)
+          },
+          {
+            name: '订单2',
+            type: 'bar',
+            stack: '总量',
+            itemStyle: {
+              normal: {
+                // color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+                //   {
+                //     offset: 0,
+                //     color: '#94d153'
+                //     // color: '#33CCCC'
+                //   },
+                //   {
+                //     offset: 1,
+                //     color: '#94d153'
+                //     // color: '#33CCCC'
+                //   }
+                // ], false),
+                label: {
+                  color: '#333',
+                  show: true,
+                  position: 'inside'
+                  // position: 'insideRight',
+                }
+              }
+            },
+            // data: [10, 20, 10, 10, 20, 20, 20],
+            data: this.MonthlyWorkOrder.map((it) => it.residue_num)
+          }
+          // {
+          //   type: 'bar',
+          //   barWidth: '16',
+          //   zlevel: 1,
+          //   label: {
+          //     show: true,
+          //     position: 'right', // 位置
+          //     color: '#A7D6F4',
+          //     fontSize: 14,
+          //     distance: 15, // 距离
+          //     formatter: '{c}' // 这里是数据展示的时候显示的数据
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          //         {
+          //           offset: 0,
+          //           color: '#2DB796'
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: '#6BBBA8'
+          //         }
+          //       ], false)
+          //     }
+          //   },
+          //   data: this.MonthlyWorkOrder.map((it) => it.order_num)
+          // },
+          // {
+          //   type: 'bar',
+          //   barWidth: '16',
+          //   zlevel: 1,
+          //   label: {
+          //     show: true,
+          //     position: 'right', // 位置
+          //     color: '#A7D6F4',
+          //     fontSize: 14,
+          //     distance: 15, // 距离
+          //     formatter: '{c}' // 这里是数据展示的时候显示的数据
+          //   },
+          //   itemStyle: {
+          //     normal: {
+          //       color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
+          //         {
+          //           offset: 0,
+          //           color: '#f6b643'
+          //         },
+          //         {
+          //           offset: 1,
+          //           color: '#ed7d39'
+          //         }
+          //       ], false)
+          //     }
+          //   },
+          //   data: this.MonthlyWorkOrder.map((it) => it.guada_num)
+          // }
+        ]
+      }
+      let echart = document.getElementById('echart_d2')
+      this.myCharts02 = this.$echarts.init(echart)
+      this.myCharts02.setOption(option)
+      this.autoMove(option)
+      window.addEventListener('resize', () => {
+        this.myCharts02.resize()
+      })
+    },
+    autoMove (option) {
+      this.timeOut = setInterval(() => {
+        if (Number(option.dataZoom[0].endValue) === option.series[0].data.length - 1) {
+          option.dataZoom[0].endValue = 3
+          option.dataZoom[0].startValue = 0
+        } else {
+          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
+          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
+        }
+        this.myCharts02.setOption(option)
+      }, 2000)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+// @import '~@css/mixin'
+@import '../../css/mixin'
+// @import '~@style/mixin'
+.pages
+  position absolute
+  left .2509rem
+  top 11%
+  _wh(20%, .4rem)
+  _fj(flex-start)
+  a
+    cursor pointer
+    font-family "SourceHanSansCN"
+    _font(.18rem, .30rem, #fff, 700,)
+    letter-spacing .01rem
+    padding .05rem .2rem
+    border-radius .05rem
+    background: radial-gradient(circle at 7.2% 13.6%, rgb(37, 249, 245) 0%, #004c92 90%)
+    +a
+      margin-left .2rem
+.bg
+  _wh(100%, 100%)
+  overflow hidden
+.container
+  _wh(100%, calc(100% - 1.38rem))
+  padding .1rem .2509rem 0
+  overflow hidden
+  clear both
+.bottom
+  _wh(100%, .38rem)
+  background center bottom / 19.06rem 100% url(../../images/screen1/bottom.png) no-repeat
+.blue
+  color #32C5FF !important
+.green
+  color #30EBC9 !important
+.gray
+  color #516282 !important
+.yellow
+  color #E2BB0E !important
+.orange
+  color #F96700 !important
+.red
+  color #FF0000 !important
+.con1
+  width 100%
+  height 123px
+  overflow hidden
+  position relative
+  background center center / 100% 100% url(../../images/screen1/sctj_top.png) no-repeat
+  margin 5px 0
+  text-align center
+  display flex
+  justify-content space-between
+  align-items center
+  // .c-title
+  //   float left
+  //   // line-height 1.23rem
+  //   line-height 123px
+  // .c-left
+  //   margin 0 1.3rem 0 1.3rem
+  //   display flex
+  //   align-items center
+  // .c-right
+  //   // margin 0 2.9rem 0 2.5rem
+  //   display flex
+  //   align-items center
+  .cbox
+    width 30%
+    display flex
+    align-items center
+    justify-content center
+    div
+      // font-size .24rem
+      font-size 24px
+      color #32C5FF
+    .icon1
+      display inline-block
+      width .19rem
+      height .19rem
+      overflow hidden
+      position relative
+      background center center / 100% 100% url(../../images/screen1/sctj_icon.png) no-repeat
+      margin-right .2rem
+    .num
+      display flex
+      align-items center
+      .bg
+        // width .44rem
+        // height .6rem
+        width 44px
+        height 60px
+        background rgba(50,197,255,0.10)
+        display flex
+        align-items center
+        justify-content center
+        margin-right .1rem
+        // font-size .5rem
+        font-size 50px
+        color #F7B502
+      .dot
+        background none
+        width .14rem
+.center_wrapper
+  _wh(100%, calc(50% - 69px))
+  _fj(row)
+.con2
+  width 70%
+  // height 100%
+  height calc(100% - 34px)
+  .title
+    // _wh(calc(100% - 34px), 32px)
+    _wh(100%, 32px)
+    margin 17px 0
+    padding-left 0.18rem
+    _font(16px, 32px, #fff,,left)
+    background center center / 100% 100% url(../../images/screen1/bg_title_l.png) no-repeat
+  .item_content_0
+    // _wh(calc(100% - 44px), calc(100% - 112px))
+    _wh(calc(100% - 44px), 100%)
+    height 100%
+    // margin 17px auto
+    float right
+.tltxt
+  position relative
+  top -3px
+.dotIncon
+  display inline-block
+  width 26px
+  height 26px
+  position relative
+  top 3px
+  left -6px
+  background center center / 100% 100% url(../../images/screen1/bg_title_tip.png) no-repeat
+.con3
+  width 30%
+  // height 100%
+  height calc(100% - 34px)
+  // overflow hidden
+  position relative
+  .title
+    position absolute
+    _wh(calc(100% - 34px), 32px)
+    margin 17px 0
+    right 0
+    padding-left 0.18rem
+    _font(16px, 32px, #fff,,left)
+    background center center / 100% 100% url(../../images/screen1/bg_title_s.png) no-repeat
+  .item_content_1
+    _wh(calc(100% - 44px), 100%)
+    margin 60px auto
+    float right
+.con4
+  _wh(100%, calc(50% - 85px))
+  margin-top 66px
+  overflow hidden
+  position relative
+  .block_h2
+    _wh(calc(100% - 0px), 32px)
+    margin 17px 0 10px 0
+    padding-left 0.18rem
+    background center center / 100% 100% url(../../images/screen1/bg_title_j.png) no-repeat
+    color #fff
+    h2
+      _font(16px, 32px, #fff,,left)
+  .list_scroll_title
+    _wh(calc(100% - 0px), 32px)
+    margin 0 auto
+    background #262F52
+    line-height 32px
+    color #fff
+    span
+      display inline-block
+      width 5%
+      text-align center
+      line-height 32px
+      font-size 14px
+      &:nth-child(4)
+        width 16%
+      &:nth-child(5)
+        width 6.5%
+      &:nth-child(6)
+        width 6.5%
+      &:nth-child(7)
+        width 8%
+      &:nth-child(14)
+        width 9%
+      &:nth-child(15)
+        width 9%
+  .content-block-scroll
+    _wh(calc(100% - 0px), calc(100% - 113px))
+    margin 0 auto 25px auto
+    overflow hidden
+  .content-block-scroll-ul
+    width 100%
+    li
+      width 100%
+      height 38px
+      _fj(row, center)
+      &:nth-child(2n)
+        background rgba(38,47,82,0.50)
+      span
+        display inline-block
+        width 5%
+        font-size 12px
+        // padding 0 .1rem
+        text-align center
+        line-height 38px
+        box-sizing border-box
+        &:nth-child(4)
+          width 16%
+        &:nth-child(5)
+          width 6.5%
+        &:nth-child(6)
+          width 6.5%
+        &:nth-child(7)
+          width 8%
+        &:nth-child(14)
+          width 9%
+        &:nth-child(15)
+          width 9%
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ const Setup = r => require.ensure([], () => r(require('@page/Setup')), 'Setup')
 const lIndex = r => require.ensure([], () => r(require('@page/modules/home/left/index')), 'newscreen')
 const rIndex = r => require.ensure([], () => r(require('@page/modules/home/right/index')), 'newscreen')
 const pinye = r => require.ensure([], () => r(require('@page/modules/pinye')), 'pinye')
+const PressProd = r => require.ensure([], () => r(require('@page/modules/PressProd')), 'PressProd')
 
 Vue.use(Router)
 
@@ -30,6 +31,10 @@ export default new Router({
     {
       path: '/pinye',
       component: pinye
+    },
+    {
+      path: '/pressprod',
+      component: PressProd
     }
   ]
 })