From 1403ba3997485690aae9d66d19af61525a931217 Mon Sep 17 00:00:00 2001
From: caill <815519168@qq.com>
Date: Wed, 29 Nov 2023 18:10:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E8=A6=81=E5=B7=A6=E4=BE=A7=E6=8A=A5?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/reset.css             |   6 +
 src/assets/js/getData2.js            |   5 +
 src/assets/js/mork2.js               | 147 ++++++
 src/pages/modules/new/left/index.vue |   7 +-
 src/pages/modules/new/left/left.vue  | 671 ++++++++++++++++++++++++++-
 5 files changed, 831 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/js/mork2.js

diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index 1428518..d882b22 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -143,6 +143,12 @@ div, p {
  justify-content: center;
 }
 
+.flexbetween {
+     display: flex;
+     align-items: center;
+     justify-content: space-between;
+}
+
 .pointer {
      cursor: pointer;
 }
diff --git a/src/assets/js/getData2.js b/src/assets/js/getData2.js
index ad705cc..d0a38b7 100644
--- a/src/assets/js/getData2.js
+++ b/src/assets/js/getData2.js
@@ -3873,3 +3873,8 @@ export const sortingAndPackaging = () => post('api/cockpit/sortingAndPackaging',
 //   }
 //   return res
 // }
+
+/**
+ * 新版大屏首页左侧报表
+ */
+export const homepageDataLeft = () => post('api/dashboard/homepageDataLeft', {})
diff --git a/src/assets/js/mork2.js b/src/assets/js/mork2.js
new file mode 100644
index 0000000..9cd3422
--- /dev/null
+++ b/src/assets/js/mork2.js
@@ -0,0 +1,147 @@
+/**
+ * 新版大屏首页左侧报表
+ */
+export const homepageDataLeft = () => {
+  let res = {
+    // 当日混料 最多7个元素
+    'todayMix': [
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        // 需生产
+        'plan': 14,
+        // 已生产
+        'real': 16
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        // 需生产
+        'plan': 14,
+        // 已生产
+        'real': 16
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        // 需生产
+        'plan': 14,
+        // 已生产
+        'real': 16
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        // 需生产
+        'plan': 14,
+        // 已生产
+        'real': 16
+      },
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        // 需生产
+        'plan': 14,
+        // 已生产
+        'real': 16
+      }
+    ],
+    // 当日成品 最多7个元素
+    'todaySort': [
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        // 需生产
+        'plan': 10,
+        // 已压制
+        'press': 20,
+        // 已完成
+        'real': 30
+      }
+    ],
+    // 今日生产
+    'todayProduction': {
+      // 压制
+      'todayPressProduction': {
+        // 已生产
+        'real': 2122,
+        // 计划生产
+        'plan': 8400
+      },
+      // 包装
+      'todaySortProduction': {
+        // 已生产
+        'real': 0,
+        // 计划生产
+        'plan': 0
+      },
+      // 订单完成
+      'orderFulfillmentRate': {
+        // 已生产
+        'real': 2122,
+        // 计划生产
+        'plan': 8400
+      },
+      // 混料
+      'todayMixProduction': {
+        // 已生产
+        'real': 0.0,
+        // 计划生产
+        'plan': 0.0
+      },
+      // 信息
+      'message': '今日共需生产8400块，物料种类2种，已完成包装11托，共900块，1个物料，完成率25%。'
+    },
+    // 历史分析 固定7个元素
+    'history': [
+      {
+        // 日期
+        'date': '2023-10-25',
+        // 成品
+        'sort': 0,
+        // 压制
+        'press': 1890
+      },
+      {
+        'date': '2023-10-26',
+        'sort': 0,
+        'press': 2640
+      },
+      {
+        'date': '2023-10-27',
+        'sort': 0,
+        'press': 5364
+      },
+      {
+        'date': '2023-10-28',
+        'sort': 720,
+        'press': 4962
+      },
+      {
+        'date': '2023-10-29',
+        'sort': 1584,
+        'press': 1260
+      },
+      {
+        'date': '2023-10-30',
+        'sort': 1872,
+        'press': 2400
+      },
+      {
+        'date': '2023-10-31',
+        'sort': 576,
+        'press': 630
+      }
+    ],
+    // 库存量监控 最多7个元素
+    'inventory': [
+      {
+        // 物料编码
+        'materialCode': 'GBMCZ3027L323217GM003ZX22-30',
+        // 数量
+        'qty': 0
+      }
+    ]
+  }
+  return res
+}
diff --git a/src/pages/modules/new/left/index.vue b/src/pages/modules/new/left/index.vue
index 489d70c..58bb4f5 100644
--- a/src/pages/modules/new/left/index.vue
+++ b/src/pages/modules/new/left/index.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="n_container">
-        <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
+        <!-- <div class="style_block" style="left: calc(100% / 3);top:0;"></div>
         <div class="style_block" style="background: green;left: calc(100% / 3);top:calc(100% / 3);"></div>
         <div class="style_block" style="left: calc(100% / 3);bottom: 0"></div>
         <div class="style_block" style="background: green;left: calc(200% / 3);top:0;"></div>
         <div class="style_block" style="left: calc(200% / 3);top:calc(100% / 3);"></div>
         <div class="style_block" style="background: blue;left: calc(200% / 3);bottom: 0"></div>
-        <div class="style_block" style="background: yellow;top: calc(100% / 3);bottom: 0"></div>
+        <div class="style_block" style="background: yellow;top: calc(100% / 3);bottom: 0"></div> -->
         <div class="n_header">
             <div class="n_header_h1">
                 <h1>晟华生产数</h1>
@@ -70,11 +70,10 @@ export default {
 .n_left_wraper
     width 49.5%
     height 100%
-    background #fff
     opacity 0.5
 .n_right_wraper
     width 49.5%
     height 100%
-    background #fff
+    background #2f3040
     opacity 0.5
 </style>
diff --git a/src/pages/modules/new/left/left.vue b/src/pages/modules/new/left/left.vue
index 47f5aef..e912b2b 100644
--- a/src/pages/modules/new/left/left.vue
+++ b/src/pages/modules/new/left/left.vue
@@ -1,9 +1,678 @@
 <template>
-    <div class="left_wraper">左</div>
+    <div class="left_wraper">
+        <div class="item_wraper">
+            <div class="title_wraper">
+                <p>今日生产</p>
+            </div>
+            <div class="content_wraper flexbetween">
+                <div class="module_one_wraper">
+                    <div class="echart_wraper_1">
+                        <div id="new_home_echart_1" style="width: 100%; height: 100%;"></div>
+                    </div>
+                    <div class="echart_title_1">订单完成</div>
+                </div>
+                <div class="module_two_wraper">
+                  <div class="module_two_item_wraper">
+                    <div class="module_two_item_lable flexcenter">混料</div>
+                    <div class="module_two_item_content">
+                      <div class="module_two_item_pro"></div>
+                      <div class="module_two_item_p_l flexcenter">85.00吨</div>
+                      <div class="module_two_item_p_r flexcenter">100吨</div>
+                    </div>
+                  </div>
+                  <div class="module_two_item_wraper">
+                    <div class="module_two_item_lable flexcenter">成型</div>
+                    <div class="module_two_item_content">
+                      <div class="module_two_item_pro"></div>
+                      <div class="module_two_item_p_l flexcenter">85.00块</div>
+                      <div class="module_two_item_p_r flexcenter">100块</div>
+                    </div>
+                  </div>
+                  <div class="module_two_item_wraper">
+                    <div class="module_two_item_lable flexcenter">包装</div>
+                    <div class="module_two_item_content">
+                      <div class="module_two_item_pro"></div>
+                      <div class="module_two_item_p_l flexcenter">85.00块</div>
+                      <div class="module_two_item_p_r flexcenter">100快</div>
+                    </div>
+                  </div>
+                </div>
+                <div class="module_three_wraper">
+                  <div class="module_three_text">
+                    剩余<span>5</span>个，完成率<span>85%</span>，预计完成时间10月11日17点35分。今日订单共<span>158</span>个。
+                  </div>
+                </div>
+            </div>
+        </div>
+        <div class="item_wraper flexbetween">
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>当日混料</p>
+                </div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_2" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+            </div>
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>当日成品</p>
+                </div>
+                <div class="content_wraper">
+                  <div class="echart_wraper">
+                      <div id="new_home_echart_3" style="width: 100%; height: 100%;"></div>
+                  </div>
+                </div>
+            </div>
+        </div>
+        <div class="item_wraper flexbetween">
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>库存量监控</p>
+                </div>
+                <div class="content_wraper"></div>
+            </div>
+            <div class="l_item_wraper">
+                <div class="title_wraper">
+                    <p>历史分析</p>
+                </div>
+                <div class="content_wraper"></div>
+            </div>
+        </div>
+    </div>
 </template>
 
+<script>
+import { homepageDataLeft } from '@js/mork2.js'
+export default {
+  data () {
+    return {
+      interTime: this.$store.getters.setTime,
+      timer: null,
+      todayProduction: {}, // 今日生产
+      todayMix: [], // 当日混料
+      todaySort: [], // 当日成品
+      myCharts1: '',
+      myCharts2: '',
+      myCharts3: ''
+    }
+  },
+  created () {
+    this._homepageDataLeft()
+    this.refresh()
+  },
+  beforeDestroy () {
+    clearInterval(this.timer)
+  },
+  methods: {
+    refresh () {
+      this.timer = setInterval(() => {
+        this._homepageDataLeft()
+      }, this.interTime)
+    },
+    async _homepageDataLeft () {
+      let res = await homepageDataLeft()
+      this.todayProduction = res.todayProduction
+      this.todayMix = [...res.todayMix]
+      this.todaySort = [...res.todaySort]
+      this.setEchart1()
+      this.setEchart2()
+      this.setEchart3()
+    },
+    setEchart1 () {
+      let value = Number(this.todayProduction.orderFulfillmentRate.real) / Number(this.todayProduction.orderFulfillmentRate.plan)
+      value = value.toFixed(2)
+      value = value * 100
+      value = 78
+      let option = {
+        grid: {
+          top: 5,
+          left: 0,
+          right: 70,
+          bottom: 0,
+          containLabel: true
+        },
+        series: [{
+          name: '进度',
+          type: 'pie',
+          radius: ['76%', '90%'],
+          center: ['50%', '50%'],
+          clockwise: false,
+          label: {
+            position: 'center',
+            formatter: `{val| ${value}}{name|%}`,
+            rich: {
+              val: {
+                fontSize: 32,
+                fontWeight: 500,
+                color: '#fff',
+                fontFamily: 'Oswald-Regular, Oswald'
+              },
+              name: {
+                fontSize: 18,
+                fontWeight: 400,
+                padding: [10, 0, 0, 0],
+                color: '#fff',
+                fontFamily: 'PingFangSC-Regular, PingFang SC'
+              }
+            }
+          },
+          data: [{
+            name: '已完成',
+            value: value - 1,
+            itemStyle: {
+              decal: {
+                color: '#0075f3',
+                backgroundColor: '#2e93f5',
+                dashArrayX: [1, 0],
+                dashArrayY: [1, 4],
+                rotation: -Math.PI
+              }
+            }
+          }, {
+            name: '白色尾部',
+            value: 1,
+            itemStyle: {
+              color: {
+                type: 'radial',
+                x: 0,
+                y: 0,
+                r: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: '#2e93f5' // 0% 处的颜色
+                  },
+                  {
+                    offset: 0,
+                    color: '#fff' // 0% 处的颜色
+                  }
+                ],
+                global: false // 缺省为 false
+              }
+            },
+            emphasis: {
+              disabled: true
+            }
+          }, {
+            name: '未完成',
+            value: 100 - value,
+            itemStyle: {
+              decal: {
+                color: '#2a527e',
+                backgroundColor: '#355a84',
+                dashArrayX: [1, 0],
+                dashArrayY: [2, 4],
+                rotation: -Math.PI
+              }
+            },
+            emphasis: {
+              disabled: true
+            }
+          }]
+        }, {
+          type: 'pie',
+          data: [100],
+          silent: true,
+          radius: '100%',
+          center: ['50%', '50%'],
+          itemStyle: {
+            color: '#0c2646'
+          },
+          z: -1
+        }, {
+          type: 'pie',
+          radius: ['58%', '58.5%'],
+          startAngle: 225,
+          hoverAnimation: false,
+          legendHoverLink: false,
+          labelLine: {
+            normal: {
+              show: false
+            }
+          },
+          data: [{
+            value: 100,
+            itemStyle: {
+              color: '#0e58a8'
+            }
+          }]
+        }, {
+          type: 'gauge',
+          radius: '78%',
+          center: ['50%', '50%'],
+          startAngle: 0,
+          endAngle: 359.9,
+          splitNumber: 18,
+          hoverAnimation: false,
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            length: 10,
+            lineStyle: {
+              width: 2,
+              color: '#0e58a8'
+            }
+          },
+          axisLabel: {
+            show: false
+          },
+          pointer: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              opacity: 0
+            }
+          },
+          detail: {
+            show: false
+          },
+          data: [{
+            value: 0,
+            name: ''
+          }]
+        }]
+      }
+      let echart = document.getElementById('new_home_echart_1')
+      if (this.myCharts1 !== '') {
+        this.myCharts1.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts1 = this.$echarts.init(echart)
+        this.myCharts1.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts1.resize()
+        })
+      }
+    },
+    setEchart2 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      this.todayMix.map(el => {
+        barName.push(el.materialCode)
+        barData1.push(el.plan)
+        barData2.push(el.real)
+      })
+      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: '#0E90FD'}}, {name: '已生产', itemStyle: {color: '#33CCCC'}}]
+        },
+        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: barName
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：块',
+          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: 'pictorialBar',
+            barWidth: '55%',
+            // symbolOffset: [-10, 0],
+            itemStyle: {
+              normal: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#115A9C' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.8,
+                      color: '#115A9C' // 100% 处的颜色
+                    }
+                  ],
+                  globalCoord: false // 缺省为 false
+                }, // 渐变颜色
+                borderColor: '#09F6FF',
+                borderWidth: 3
+              }
+            },
+            symbol:
+              'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
+            data: barData1
+          },
+          {
+            name: '已生产',
+            type: 'pictorialBar',
+            barWidth: '55%',
+            barGap: '-50%',
+            itemStyle: {
+              normal: {
+                color: {
+                  type: 'linear',
+                  x: 0,
+                  y: 0,
+                  x2: 0,
+                  y2: 1,
+                  colorStops: [
+                    {
+                      offset: 0,
+                      color: '#115A9C' // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.8,
+                      color: '#115A9C' // 100% 处的颜色
+                    }
+                  ],
+                  globalCoord: false // 缺省为 false
+                }, // 渐变颜色
+                borderColor: '#09F6FF',
+                borderWidth: 3
+              }
+            },
+            symbol:
+              'path://M12.000,-0.000 C12.000,-0.000 16.074,60.121 22.731,60.121 C26.173,60.121 -3.234,60.121 0.511,60.121 C7.072,60.121 12.000,-0.000 12.000,-0.000 Z',
+            data: barData2
+          }
+        ]
+      }
+      let echart = document.getElementById('new_home_echart_2')
+      if (this.myCharts2 !== '') {
+        this.myCharts2.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts2 = this.$echarts.init(echart)
+        this.myCharts2.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts2.resize()
+        })
+      }
+    },
+    setEchart3 () {
+      let barName = []
+      let barData1 = []
+      let barData2 = []
+      let barData3 = []
+      this.todaySort.map(el => {
+        barName.push(el.materialCode)
+        barData1.push(el.plan)
+        barData2.push(el.press)
+        barData3.push(el.real)
+      })
+      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: '#0E90FD'}}, {name: '已压制', itemStyle: {color: '#33CCCC'}}, {name: '已完成', itemStyle: {color: '#33CCC2'}}]
+        },
+        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: barName
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：块',
+          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',
+            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: barData1
+          },
+          {
+            name: '已压制',
+            type: 'bar',
+            barWidth: '8',
+            barGap: '200%',
+            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: barData2
+          },
+          {
+            name: '已完成',
+            type: 'bar',
+            barWidth: '8',
+            barGap: '200%',
+            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: barData3
+          }
+        ]
+      }
+      let echart = document.getElementById('new_home_echart_3')
+      if (this.myCharts3 !== '') {
+        this.myCharts3.dispose()
+      }
+      if (echart !== null) {
+        this.myCharts3 = this.$echarts.init(echart)
+        this.myCharts3.setOption(option)
+        window.addEventListener('resize', () => {
+          this.myCharts3.resize()
+        })
+      }
+    }
+  }
+}
+</script>
+
 <style lang="stylus" scoped>
 @import '~@css/mixin'
 .left_wraper
     _wh(100%, 100%)
+.item_wraper
+    _wh(100%, calc((100% / 3) - 30px))
+    background #2f3040
+    margin-bottom 45px
+    &:last-child
+        margin-bottom 0
+.title_wraper
+    _wh(100%, 50px)
+    p
+        _font(20px, 50px, #fff,,left)
+.content_wraper
+    _wh(100%, calc(100% - 50px))
+.l_item_wraper
+    _wh(calc(50% - 20px), 100%)
+.module_one_wraper
+    _wh(25%, 100%)
+.module_two_wraper
+    _wh(55%, 100%)
+.module_three_wraper
+    _wh(20%, 100%)
+.echart_wraper
+    _wh(100%, 100%)
+.echart_wraper_1
+    _wh(100%, calc(100% - 50px))
+.echart_title_1
+    _font(20px, 50px, #fff,,)
+.module_two_item_wraper
+  _fj(row)
+  _wh(100%, calc((100% / 3) - 10px))
+  margin 5px 0
+.module_two_item_lable
+  _wh(100px, 100%)
+  _font(20px, 1, #fff,,)
+.module_two_item_content
+  position relative
+  _wh(calc(100% - 120px), 100%)
+  background #000
+.module_two_item_pro
+  position absolute
+  left 0
+  top 0
+  _wh(50%, 100%)
+  border-right 1px solid #fff
+  background-color blue
+.module_two_item_p_l
+  position absolute
+  left 0
+  top 0
+  _wh(50%, 100%)
+  _font(20px, 1, #fff,,)
+.module_two_item_p_r
+  position absolute
+  right 0
+  top 0
+  _wh(50%, 100%)
+  _font(20px, 1, #fff,,)
+.module_three_text
+  _font(20px, 40px, #fff,,)
+  span
+    color blue
 </style>