修改界面显示

src/layout/boardIndex.vue

@@ -3,6 +3,7 @@
     <router-view></router-view>
     <div class="time" id="time">{{ time }}</div>
     <div class="date" id="date">{{ date }}</div>
+    <div class="logo"></div>
   </div>
 </template>
 
@@ -55,4 +56,14 @@ export default {
   top: 3.2%;
   left: 94.1%;
 }
+.logo{
+  background-image: url("../assets/board/logo.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 8vw;
+  height:4vw;
+  position: absolute;
+  top: -1%;
+  left: 1%;
+}
 </style>

src/views/board/foaming/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <div class="headTitle">箱壳发泡生产数据监控平台</div>
+    <div class="headTitle">箱体发泡生产数据监控平台</div>
     <div class="topNum planNum">{{ planNum }}</div>
     <div class="topNum practicalNum">{{ practicalNum }}</div>
     <div class="topNum differenceValue">{{ differenceValue }}</div>
@@ -8,6 +8,12 @@
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
       {{ i }}
     </div>
+    <div style="position: absolute; top: 23%;left: 30%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
+      <div>发泡机 - 运行状态：</div>
+    </div>
+    <div style="position: absolute; top: 23%;left: 55%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
+      <div>发泡机 - 运行状态：</div>
+    </div>
 
     <div class="supplementInfo">注射压力标准范围：10.0-12.0Mpa A、B组份枪头压力差＜1Mpa</div>
     <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
@@ -472,7 +478,7 @@ export default {
         '生产统计',
         '生产统计数据',
         '发泡注射压力监控',
-        '发泡料注料温度健康',
+        '发泡料注料温度监控',
         '泡前库库存',
       ],
       titlePosition: [

src/views/board/foaming/index2.vue

@@ -8,8 +8,11 @@
          :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
       {{ i }}
     </div>
-    <div style="position: absolute; top: 23%;left: 60%;width:10vw;text-align:center;color: #fff;font-size: 1vw;line-height: 1.5vw">
+    <div style="position: absolute; top: 23%;left: 30%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
-      <div>生产节拍</div>
+      <div>发泡机 - 运行状态：</div>
+    </div>
+    <div style="position: absolute; top: 23%;left: 60%;width:10vw;color: #fff;font-size: 0.8vw;line-height: 1.5vw">
+      <div>生产节拍：</div>
       <div>线体1圈 1s</div>
       <div>台车1位 1s</div>
     </div>
@@ -17,10 +20,10 @@
     <div class="supplementInfo">注射压力标准范围：10.0-12.0Mpa A、B组份枪头压力差＜1Mpa</div>
     <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
     <div style="position: absolute;top: 62%; left: 40%;color:#FFF">
-      <div style="width: 12px;height: 12px;background-color:  #5dfd36;display: inline-block;margin: 0 8px;"></div> 启用
+      <div style="width: 12px;height: 12px;background-color:  #1be409;display: inline-block;margin: 0 8px;"></div> 启用
-      <div style="width: 12px;height: 12px;background-color:  #ffffff88;display: inline-block;margin: 0 8px;"></div>停用
+      <div style="width: 12px;height: 12px;background-color:  #8a8e96;display: inline-block;margin: 0 8px;"></div>停用
       <div style="width: 12px;height: 12px;background-color:  #ff0000;display: inline-block;margin: 0 8px;"></div> 注料位
-      <div style="width: 12px;height: 12px;background-color:  #FF8000;display: inline-block;margin: 0 8px;"></div>出模位
+      <div style="width: 12px;height: 12px;background-color:  #ff8000;display: inline-block;margin: 0 8px;"></div>出模位
     </div>
 
     <div class="scrollTable">
@@ -743,52 +746,52 @@
       <!--      </div>-->
     </div>
     <div class="tableOne">
-      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2de ">
+      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2decc ">
         <div style="width: 33%;display: inline-block">台车号</div>
         <div style="width: 33%;display: inline-block">型号</div>
         <div style="width: 33%;display: inline-block">产量</div>
       </div>
       <div v-for="i in 10"
-        :style="'height: 9%;line-height:2.6vh;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
+        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#8a8e9688' : '#1be40944')">
         <div style="width: 33%;display: inline-block">{{ i }}</div>
         <div style="width: 33%;display: inline-block">487JFY</div>
         <div style="width: 33%;display: inline-block">15-15</div>
       </div>
     </div>
     <div class="tableTwo">
-      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2de">
+      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2decc">
         <div style="width: 33%;display: inline-block">台车号</div>
         <div style="width: 33%;display: inline-block">型号</div>
         <div style="width: 33%;display: inline-block">产量</div>
       </div>
       <div v-for="i in 10"
-        :style="'height: 9%;line-height:2.6vh;color: #000;text-align: center;background-color:' + (i === 2 ? '#ff0000' : '#5dfd36')">
+        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ff5959' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#ff000088' : '#1be40944')">
         <div style="width: 33%;display: inline-block">{{ i }}</div>
         <div style="width: 33%;display: inline-block">487JFY</div>
         <div style="width: 33%;display: inline-block">15-15</div>
       </div>
     </div>
     <div class="tableThree">
-      <div style="height: 9%;color: #fff;text-align: center;background-color: #38a2de">
+      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2de">
         <div style="width: 33%;display: inline-block">台车号</div>
         <div style="width: 33%;display: inline-block">型号</div>
         <div style="width: 33%;display: inline-block">产量</div>
       </div>
       <div v-for="i in 10"
-        :style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#FF8000' : '#5dfd36')">
+        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ffb769' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#ff800088' : '#1be40944')">
         <div style="width: 33%;display: inline-block">{{ i }}</div>
         <div style="width: 33%;display: inline-block">487JFY</div>
         <div style="width: 33%;display: inline-block">15-15</div>
       </div>
     </div>
     <div class="tableFour">
-      <div style="height: 9%;color: #fff;text-align: center;background-color: #38a2de">
+      <div style="height: 9%;line-height:2.6vh;color: #fff;text-align: center;background-color: #38a2de">
         <div style="width: 33%;display: inline-block">台车号</div>
         <div style="width: 33%;display: inline-block">型号</div>
         <div style="width: 33%;display: inline-block">产量</div>
       </div>
       <div v-for="i in 10"
-        :style="'height: 9%;color: #000;text-align: center;background-color:' + (i === 2 ? '#ffffff88' : '#5dfd36')">
+        :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#8a8e9688' : '#1be40944')">
         <div style="width: 33%;display: inline-block">{{ i }}</div>
         <div style="width: 33%;display: inline-block">487JFY</div>
         <div style="width: 33%;display: inline-block">15-15</div>
@@ -816,7 +819,7 @@ export default {
         '箱体队列统计',
         '生产统计数据',
         '发泡注射压力监控',
-        '发泡料注料温度健康',
+        '发泡料注料温度监控',
         '门体发泡生产统计',
       ],
       titlePosition: [

src/views/board/week/index.vue

@@ -10,14 +10,14 @@
       <Chart ref="manpowerAttendance"></Chart>
     </div>
     <div class="classSelect">
-      <el-select v-model="selectValue" placeholder="请选择">
+
-        <el-option
+
-          v-for="item in selectOptions"
+      <el-button>产线1</el-button>
-          :key="item.value"
+      <el-button>产线2</el-button>
-          :label="item.label"
+      <el-button>合计</el-button>
-          :value="item.value">
+<!--      <el-radio v-model="selectValue" label="1">产线1</el-radio>-->
-        </el-option>
+<!--      <el-radio v-model="selectValue" label="2">产线2</el-radio>-->
-      </el-select>
+<!--      <el-radio v-model="selectValue" label="3">合计</el-radio>-->
     </div>
 
     <!--IQC-->
@@ -30,17 +30,14 @@
           型号
         </div>
         <div class="scrollTableItem" style="font-weight: bold;">
-          订单数
+          计划数量
         </div>
         <div class="scrollTableItem" style="font-weight: bold;">
-          完成数
+          完成数量
         </div>
         <div class="scrollTableItem" style="font-weight: bold;">
           差异值
         </div>
-        <div class="scrollTableItem" style="font-weight: bold;">
-          清单率
-        </div>
       </div>
       <vue-seamless-scroll
         :class-option="scrollTableOption"
@@ -74,10 +71,6 @@
               class="scrollTableItem">
               {{ item.value5 }}
             </div>
-            <div
-              class="scrollTableItem">
-              {{ item.value6 }}
-            </div>
           </div>
         </div>
       </vue-seamless-scroll>
@@ -116,6 +109,7 @@
 
     <div v-html="safeDayHtml"></div>
     <div class="totalNum">总数：{{ totalNum }}</div>
+    <div class="info1">订单数:1000 完成数:1000 差异值:0 清单率:100%</div>
   </div>
 </template>
 
@@ -133,21 +127,7 @@ export default {
   name: "Liner",
   data() {
     return {
-      selectOptions: [
+      selectValue: '1',
-        {
-          value: '1',
-          label: '老线'
-        },
-        {
-          value: '2',
-          label: '新线'
-        },
-        {
-          value: '3',
-          label: '合计'
-        },
-      ],
-      selectValue: '2',
       title: [
         '产量统计',
         '三日订单执行情况',
@@ -601,7 +581,7 @@ export default {
                     b: {
                       color: "#fff",
                       align: "center",
-                      fontSize: 0.5 * vw,
+                      fontSize: 0.9 * vw,
                     },
                   },
                   formatter: function (params) {
@@ -680,7 +660,7 @@ export default {
                     b: {
                       color: "#fff",
                       align: "center",
-                      fontSize: 0.5 * vw,
+                      fontSize: 0.9 * vw,
                     },
                   },
                   formatter: function (params) {
@@ -759,7 +739,7 @@ export default {
                     b: {
                       color: "#fff",
                       align: "center",
-                      fontSize: 0.5 * vw,
+                      fontSize: 0.9 * vw,
                     },
                   },
                   formatter: function (params) {
@@ -838,7 +818,7 @@ export default {
                     b: {
                       color: "#fff",
                       align: "center",
-                      fontSize: 0.5 * vw,
+                      fontSize: 0.9 * vw,
                     },
                   },
                   formatter: function (params) {
@@ -917,7 +897,7 @@ export default {
                     b: {
                       color: "#fff",
                       align: "center",
-                      fontSize: 0.5 * vw,
+                      fontSize: 0.9 * vw,
                     },
                   },
                   formatter: function (params) {
@@ -996,7 +976,7 @@ export default {
                     b: {
                       color: "#fff",
                       align: "center",
-                      fontSize: 0.5 * vw,
+                      fontSize: 0.9 * vw,
                     },
                   },
                   formatter: function (params) {
@@ -1179,7 +1159,7 @@ export default {
   text-overflow: ellipsis;
   text-align: center;
   display: inline-block;
-  width: calc(100% / 7);
+  width: calc(100% / 6);
 }
 
 .totalNum {
@@ -1191,10 +1171,25 @@ export default {
   font-size: 0.8vw;
 }
 
+.info1 {
+  position: absolute;
+  top: 11.5%;
+  left: 44.5%;
+  transform: translateY(-50%);
+  color: #fff;
+  font-size: 0.8vw;
+}
+
 .classSelect {
   position: absolute;
-  top: 6%;
+  top: 1%;
-  left: 4%;
+  left: 15%;
-  width: 5vw;
+}
+.el-radio{
+  color: #fff !important;
+}
+.el-button{
+  background:#00000000 !important;
+  color: #fff !important;
 }
 </style>

src/views/model/model.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="app-container">
+    <div class="test">
       <div id="container" class="container"></div>
       <div class="tool">
         <el-row>
@@ -28,7 +29,7 @@
             </div>
           </el-col>
           <el-col :span="3">
-          <div class="toolItem" @click="click1('工艺流程')">
+            <div class="toolItem" @click="click2()">
               <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
               <div class="grid-content bg-purple-light">工艺流程</div>
             </div>
@@ -66,6 +67,22 @@
       <transition name="children">
         <production :exit="exit" v-if="show === 'production'"/>
       </transition>
+      <div class="flowChart" v-show="show1">
+        <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)"
+             :class="nowFlowIndex === k ? 'wireAnimation' : ''"
+             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background: linear-gradient(to bottom, ${nowFlowIndex === k ? '#00911F': i.bgColor+'66'}, ${nowFlowIndex === k ? '#00370C': i.bgColor});z-index:2;`">
+          <span>{{ i.text }}</span>
+        </div>
+        <div class="wire" v-for="i in wireOptions"
+             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background-color:${i.bgColor};z-index:0;`"></div>
+        <div class="wire1" v-for="i in wireOptions1"
+             :style="`width:${i.width}vw;height:${i.height}vw;top:${i.top}%;left:${i.left}%;background-color:${i.bgColor};z-index:0;`"></div>
+        <div class="arrows" v-for="i in arrowsOptions"
+             :style="`top:${i.top}%;left:${i.left}%;z-index:1;`"></div>
+        <div class="arrows1"
+             style="top: 44.3%;left: 53.7%;z-index: 1;"></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -100,6 +117,394 @@ export default {
     return {
       viewer: null,
       show: '',
+      show1: false,
+      nowFlowIndex: null,
+      flowItemOptions: [
+        // 一层
+        {
+          top: 2,
+          left: 1,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '内胆自助成型'
+        },
+        {
+          top: 2,
+          left: 9.3,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '内胆预装'
+        },
+        {
+          top: 2,
+          left: 17.6,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '内胆集存库'
+        },
+
+        // 二层
+        {
+          top: 35,
+          left: 1,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '箱壳自动成型'
+        },
+        {
+          top: 35,
+          left: 9.3,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '箱壳预装'
+        },
+        {
+          top: 35,
+          left: 17.6,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '箱壳集存库'
+        },
+
+        // 一二合
+        {
+          top: 17,
+          left: 25.9,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '壳胆组装'
+        },
+        {
+          top: 17,
+          left: 34.2,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '箱体预装'
+        },
+        {
+          top: 17,
+          left: 42.5,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '箱体发泡'
+        },
+        {
+          top: 17,
+          left: 50.8,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '门体安装'
+        },
+        {
+          top: 17,
+          left: 59.1,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '发泡箱体库'
+        },
+        {
+          top: 17,
+          left: 67.4,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '焊接'
+        },
+        {
+          top: 17,
+          left: 75.7,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '抽空灌注'
+        },
+        {
+          top: 17,
+          left: 84,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '性能检测'
+        },
+        {
+          top: 17,
+          left: 92.3,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '包装入库'
+        },
+
+        // 三层
+        {
+          top: 68,
+          left: 1,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '门壳自动成型'
+        },
+        {
+          top: 68,
+          left: 17.6,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '门壳预装'
+        },
+        {
+          top: 68,
+          left: 34.2,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '门体发泡'
+        },
+        {
+          top: 68,
+          left: 50.8,
+          width: 6,
+          height: 4,
+          bgColor: '#00aa00',
+          text: '箱、门匹配输送'
+        }
+      ],
+      wireOptions: [
+        // 一层
+        {
+          top: 15,
+          left: 7,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 15,
+          left: 15.3,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 15,
+          left: 23.6,
+          width: 1,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+
+        // 二层
+        {
+          top: 48,
+          left: 7,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 48,
+          left: 15.3,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 48,
+          left: 23.6,
+          width: 1,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+
+        // 一二合
+        {
+          top: 31,
+          left: 24.6,
+          width: 1,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 31.9,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 40.2,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 48.5,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 56.8,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 65.1,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 73.4,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 81.7,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 31,
+          left: 90,
+          width: 2,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+
+        // 三层
+        {
+          top: 80,
+          left: 7,
+          width: 10,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 80,
+          left: 23.6,
+          width: 10,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 80,
+          left: 40.2,
+          width: 10,
+          height: 0.25,
+          bgColor: '#4472c4',
+        },
+      ],
+      wireOptions1: [
+        {
+          top: 15,
+          left: 24.6,
+          width: 0.25,
+          height: 5,
+          bgColor: '#4472c4',
+        },
+        {
+          top: 46.1,
+          left: 54.2,
+          width: 0.25,
+          height: 3.3,
+          bgColor: '#4472c4',
+        },
+      ],
+      arrowsOptions: [
+
+        // 一层
+        {
+          top: 13,
+          left: 8.5,
+        },
+        {
+          top: 13,
+          left: 16.8,
+        },
+
+        // 二层
+        {
+          top: 46.3,
+          left: 8.5,
+        },
+        {
+          top: 46.3,
+          left: 16.8,
+        },
+
+        // 一二合
+        {
+          top: 29.3,
+          left: 25.1,
+        },
+        {
+          top: 29.3,
+          left: 33.4,
+        },
+        {
+          top: 29.3,
+          left: 41.7,
+        },
+        {
+          top: 29.3,
+          left: 50,
+        },
+        {
+          top: 29.3,
+          left: 58.3,
+        },
+        {
+          top: 29.3,
+          left: 66.6,
+        },
+        {
+          top: 29.3,
+          left: 74.9,
+        },
+        {
+          top: 29.3,
+          left: 83.2,
+        },
+        {
+          top: 29.3,
+          left: 91.5,
+        },
+
+        // 三层
+        {
+          top: 78.2,
+          left: 16.8,
+        },
+        {
+          top: 78.2,
+          left: 33.4,
+        },
+        {
+          top: 78.2,
+          left: 50,
+        },
+      ]
     }
   },
   async mounted() {
@@ -109,11 +514,6 @@ export default {
       appsecret: 'rXmhoLAiOPNKzbl7g2qxCV8tFwRdYuZM'
     }
     const viewer = new AMRT.Viewer('container', param)
-    console.log(viewer)
-    console.log(viewer.core)
-    console.log(viewer.core?.Object3D)
-    // const gui = new dat.GUI()
-    // console.log(gui)
     let num = 0
     let modelArr = [
       // '1720315475507941376',
@@ -147,8 +547,8 @@ export default {
       // '1730412089115283456',
       // '1730412127476387840',
       // '1730412170082127872',
-      '1730434866786471936',
+      // '1730434866786471936',
-      '1730434916656746496',
+      // '1730434916656746496',
       // '1730412271693336576',
       // '1730412211886755840',
 
@@ -204,9 +604,20 @@ export default {
   methods: {
     click1(e) {
       this.show = e
+      this.show1 = false
+    },
+    click2() {
+      if (this.show1 === false) {
+        this.show1 = true
+      } else {
+        this.show1 = false
+      }
     },
     exit() {
       this.show = ''
+    },
+    setNowFlowIndex(k) {
+      this.nowFlowIndex = k
     }
   }
 };
@@ -219,16 +630,16 @@ export default {
 
 .container {
   width: 100vw;
-  height: 100vh
+  height: 33.33vw;
+  //height: 100vh;
 }
 
 .tool {
   position: absolute;
   width: 60%;
-  height: 20vh;
+  top: 98%;
-  top: 80%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translate(-50%, -100%);
   text-align: center;
   font-size: 1vw;
 
@@ -243,6 +654,14 @@ export default {
   overflow: hidden;
 }
 
+.test {
+  top: 20%;
+  width: 100vw;
+  height: 33.33vw;
+  //height: 100vh;
+  position: absolute;
+}
+
 .children-enter-active {
   animation: children-in 1s;
 }
@@ -261,4 +680,76 @@ export default {
     left: 0;
   }
 }
+
+.flowChart {
+  width: 96vw;
+  height: 15vw;
+  position: absolute;
+  transform: translateX(-50%);
+  left: 50%;
+  top: 1%;
+
+  .flowItem {
+    position: absolute;
+    border-radius: 0.5vw;
+    text-align: center;
+    color: #fff;
+    font-size: 1.05vw;
+    border: 0.25vw solid #fff;
+
+    span {
+      display: inline-block;
+      transform: translate(-50%, -50%);
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 90%;
+    }
+  }
+
+  .wire {
+    position: absolute;
+    border-radius: 0.15vw;
+  }
+
+  .wire1 {
+    position: absolute;
+    transform: translateX(-100%);
+    border-radius: 0.15vw;
+  }
+
+  .arrows {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-top: 0.4vw solid transparent;
+    border-bottom: 0.4vw solid transparent;
+    border-left: 0.8vw solid #4472c4;
+  }
+
+  .arrows1 {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 0.4vw solid transparent;
+    border-right: 0.4vw solid transparent;
+    border-bottom: 0.8vw solid #4472c4;
+  }
+
+  .wireAnimation {
+    animation: 2s linear 0s infinite normal none running current_winkle;
+  }
+
+  @keyframes current_winkle {
+    0% {
+      border: 0.25vw solid #fff;
+    }
+    50% {
+      border: 0.25vw solid #F70E0E;
+    }
+    100% {
+      border: 0.25vw solid #fff;
+    }
+  }
+}
 </style>