LY bug fix

master/src/main/java/com/ruoyi/project/apply/controller/TApplySafetychangeController.java

@@ -439,8 +439,8 @@ public class TApplySafetychangeController extends BaseController {
                 params.put("approver", Texts.of(sysUser.getNickName()).fontSize(10).bold().create());
             }
         }
-        if (tApplySafetychange.getApplicationTime() != null) {//批准时间
-            params.put("approveTime", Texts.of(DateUtils.dateTimeMin(tApplySafetychange.getApplicationTime())).fontSize(9).bold().create());
+        if (tApplySafetychange.getApproveTime() != null) {//批准时间
+            params.put("approveTime", Texts.of(DateUtils.dateTimeMin(tApplySafetychange.getApproveTime())).fontSize(9).bold().create());
         }
         if (StringUtils.isNotEmpty(tApplySafetychange.getExecutor())) {//临时安全措施执行人
             SysUser sysUser = userService.selectUserById(Long.parseLong(tApplySafetychange.getExecutor()));

ui/src/views/front/materialBalance.vue

@@ -1,436 +1,424 @@
 <template>
-    <div id="materialBalance">
-        <!--<div class="bg-color-black">-->
-        <div class="d-flex pt-2 pl-2">
-            <span style="color:#5cd9e8">
-                                              <icon name="chart-bar"></icon>
-                                            </span>
-            <div class="d-flex">
-                <span class="fs-xl text mx-2">物料平衡表</span>
-            </div>
+  <div id="materialBalance">
+    <!--<div class="bg-color-black">-->
+      <div class="d-flex pt-2 pl-2">
+        <span style="color:#5cd9e8">
+          <icon name="chart-bar"></icon>
+        </span>
+        <div class="d-flex">
+          <span class="fs-xl text mx-2">物料平衡表</span>
         </div>
-        <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);
-                                            height: 100%;">
-            <div class="layout">
-                <div class="layout_left" style="">
-                    <div class="flex">
-                        <span class="box_one">Nap</span>
-                        <div class="arror_one">
-                            <p class="textOne">{{ dashboarddata.energyfeedNap }}</p>
-                            <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
-                        </div>
-                    </div>
-    
-                    <div class="flex">
-                        <span class="box_one">乙烷</span>
-                        <div class="arror_one">
-                            <p class="textOne">{{ dashboarddata.energyfeedYiwan }}</p>
-                            <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
-                        </div>
-                    </div>
-    
-                    <div class="flex">
-                        <span class="box_one">C5</span>
-                        <div class="arror_one">
-                            <p class="textOne">{{ dashboarddata.energyfeedTanwu }}</p>
-                            <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
-                        </div>
-                    </div>
-    
-                    <div class="flex">
-                        <span class="box_one">C6-C8</span>
-                        <div class="arror_one">
-                            <p class="textOne">{{ dashboarddata.energyfeedTanliu }}</p>
-                            <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
-                        </div>
-                    </div>
-    
-                    <div class="flex">
-                        <span class="box_one">LPG</span>
-                        <div class="arror_one">
-                            <p class="textOne">{{ dashboarddata.energyfeedLpg }}</p>
-                            <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
-                        </div>
-                    </div>
+      </div>
+      <div style="text-align: center; background-color: rgba($color: #ffffff, $alpha: 0.3);
+        height: 100%;">
+        <div class="layout">
+          <div class="layout_left" style="">
+            <div class="flex">
+                <span class="box_one">Nap</span>
+                <div class="arror_one">
+                    <p class="textOne">{{ dashboarddata.energyfeedNap }}</p>
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
                 </div>
-    
-                <div class="layout_left">
-                    <div class="box_two">
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status110) && (this.status110)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status110) && (this.status110)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status110) && (this.status110)<60">
-                            <p class="text2">310-H-110</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status111) && (this.status111)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status111) && (this.status111)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status111) && (this.status111)<60">
-                            <p class="text2">310-H-111</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status112) && (this.status112)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status112) && (this.status112)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status112) && (this.status112)<60">
-                            <p class="text2">310-H-112</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status113) && (this.status113)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status113) && (this.status113)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status113) && (this.status113)<60">
-                            <p class="text2">310-H-113</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status114) && (this.status114)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status114) && (this.status114)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status114) && (this.status114)<60">
-                            <p class="text2">310-H-114</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status115) && (this.status115)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status115) && (this.status115)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status115) && (this.status115)<60">
-                            <p class="text2">310-H-115</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status116) && (this.status116)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status116) && (this.status116)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status116) && (this.status116)<60">
-                            <p class="text2">310-H-116</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status117) && (this.status117)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status117) && (this.status117)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status117) && (this.status117)<60">
-                            <p class="text2">310-H-117</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status118) && (this.status118)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status118) && (this.status118)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status118) && (this.status118)<60">
-                            <p class="text2">310-H-118</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status130) && (this.status130)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status130) && (this.status130)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status130) && (this.status130)<60">
-                            <p class="text2">310-H-130</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status109A) && (this.status109A)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status109A) && (this.status109A)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status109A) && (this.status109A)<60">
-                            <p class="text2">310-H-109A</p>
-                        </div>
-                        <div class="luziBox" @click="newTabClick">
-                            <img src="@/assets/img/luzi-blue.png" v-if="0<=(this.status109B) && (this.status109B)<20">
-                            <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status109B) && (this.status109B)<40">
-                            <img src="@/assets/img/luzi-red.png" v-if="40<=(this.status109B) && (this.status109B)<60">
-                            <p class="text2">310-H-109B</p>
-                        </div>
-                    </div>
-    
-                    <div class="furnace">Furnace</div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">乙烷</span>
+                <div class="arror_one">
+                    <p class="textOne">{{ dashboarddata.energyfeedYiwan }}</p>
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated" >
+                </div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">C5</span>
+                <div class="arror_one">
+                    <p class="textOne">{{ dashboarddata.energyfeedTanwu }}</p>
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
+                </div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">C6-C8</span>
+                <div class="arror_one">
+                    <p class="textOne">{{ dashboarddata.energyfeedTanliu }}</p>
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
+                </div>
+            </div>
+
+            <div class="flex">
+                <span class="box_one">LPG</span>
+                <div class="arror_one">
+                    <p class="textOne">{{ dashboarddata.energyfeedLpg }}</p>
+                    <img src="@/assets/img/arror1.png" class="arror1 move ar-animated">
+                </div>
+            </div>
+          </div>
+
+          <div class="layout_left">
+            <div class="box_two">
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status110) && (this.status110)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status110) && (this.status110)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status110) && (this.status110)<60">
+                      <p class="text2">310-H-110</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status111) && (this.status111)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status111) && (this.status111)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status111) && (this.status111)<60">
+                      <p class="text2">310-H-111</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status112) && (this.status112)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status112) && (this.status112)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status112) && (this.status112)<60">
+                      <p class="text2">310-H-112</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status113) && (this.status113)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status113) && (this.status113)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status113) && (this.status113)<60">
+                      <p class="text2">310-H-113</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status114) && (this.status114)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status114) && (this.status114)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status114) && (this.status114)<60">
+                      <p class="text2">310-H-114</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status115) && (this.status115)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status115) && (this.status115)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status115) && (this.status115)<60">
+                      <p class="text2">310-H-115</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status116) && (this.status116)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status116) && (this.status116)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status116) && (this.status116)<60">
+                      <p class="text2">310-H-116</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status117) && (this.status117)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status117) && (this.status117)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status117) && (this.status117)<60">
+                      <p class="text2">310-H-117</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status118) && (this.status118)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status118) && (this.status118)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status118) && (this.status118)<60">
+                      <p class="text2">310-H-118</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status130) && (this.status130)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status130) && (this.status130)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status130) && (this.status130)<60">
+                      <p class="text2">310-H-130</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status109A) && (this.status109A)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status109A) && (this.status109A)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status109A) && (this.status109A)<60">
+                      <p class="text2">310-H-109A</p>
+                </div>
+                <div class="luziBox">
+                      <img src="@/assets/img/luzi-blue.png"   v-if="0<=(this.status109B) && (this.status109B)<20">
+                      <img src="@/assets/img/luzi-yellow.png" v-if="20<=(this.status109B) && (this.status109B)<40">
+                      <img src="@/assets/img/luzi-red.png"    v-if="40<=(this.status109B) && (this.status109B)<60">
+                      <p class="text2">310-H-109B</p>
+                </div>
+            </div>
+
+            <div class="furnace">Furnace</div>
+          </div>
+
+          <div class="layout_left">
+            <img src="@/assets/img/arror4.png" class="arror4 move ar-animated ar-delay-4s">
+          </div>
+          <div class="layout_left">
+            <div class="luzi2">
+                <div class="ebo2Box">EBO</div>
+                <div class="imgBox">
+
+                  <img src="@/assets/img/luzi2-img-arror2.png" class="luzi2-img2 move2 ar-animated">
+                  <img src="@/assets/img/arror4.png" class="arror4 luzi2-img3 move3 ar-animated">
+                  <img src="@/assets/img/arror4.png" class="arror4 luzi2-img4 move3 ar-animated">
+
+                  <img src="@/assets/img/arror5.png" class="arror5 luzi2-img8 move7 ar-animated">
+
+                  <img src="@/assets/img/arrorDown.png" class="arrorDown1 luzi2-img5 move4 ar-animated">
+                  <img src="@/assets/img/arrorDown.png" class="arrorDown1 luzi2-img6 move5 ar-animated">
+                  <img src="@/assets/img/arrorDown.png" class="arrorDown2 luzi2-img7 move6 ar-animated">
+
+                  <div class="xixian">
+                      <img src="@/assets/img/luzi2-img-arror1.png" class="luzi2-img1">
+                      <img src="@/assets/img/sanjiao.png" class="sanjiao1 move8 ar-animated">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror6.png" class="arror6">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao2 move9 ar-animated1">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror7.png" class="arror7">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao3 move10 ar-animated1">
+                  </div>
+
+                     <img src="@/assets/img/arror8.png" class="arror8">
+
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror9">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao4 move11 ar-animated">
+                  </div>
+
+                   <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror10">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao5 move12 ar-animated">
+                  </div>
+                   <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror11">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao6 move13 ar-animated">
+                  </div>
+                   <div class="xixian">
+                    <img src="@/assets/img/arror9.png" class="arror12">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao7 move14 ar-animated">
+                  </div>
+
+                   <div class="xixian">
+                    <img src="@/assets/img/arror10.png" class="arror13">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao8 move15 ar-animated">
+                  </div>
+                </div>
+
+                <div class="wordBox">
+                    <span class="location loc1">Compressor</span>
+                    <span class="location loc2">Cold Section</span>
+                    <span class="location loc3">Quech Section</span>
+                    <span class="location loc4">Depropanize</span>
+                    <span class="location loc5">Hot Section</span>
+                    <span class="location loc6">PGU</span>
+                    <span class="location loc7">C4 System</span>
+                    <span class="location loc8">AEU</span>
+
+
+                    <span class="location loc9">{{ dashboarddata.energyRpg }}</span>
                 </div>
-    
-                <div class="layout_left">
-                    <img src="@/assets/img/arror4.png" class="arror4 move ar-animated ar-delay-4s">
+
+                <div class="elementBox elementBoxLoc1">
+                    <div class="box_one elementItem">RPG</div>
+                    <div class="box_one elementItem">H2</div>
+
                 </div>
-                <div class="layout_left">
-                    <div class="luzi2">
-                        <div class="ebo2Box">EBO</div>
-                        <div class="imgBox">
-    
-                            <img src="@/assets/img/luzi2-img-arror2.png" class="luzi2-img2 move2 ar-animated">
-                            <img src="@/assets/img/arror4.png" class="arror4 luzi2-img3 move3 ar-animated">
-                            <img src="@/assets/img/arror4.png" class="arror4 luzi2-img4 move3 ar-animated">
-    
-                            <img src="@/assets/img/arror5.png" class="arror5 luzi2-img8 move7 ar-animated">
-    
-                            <img src="@/assets/img/arrorDown.png" class="arrorDown1 luzi2-img5 move4 ar-animated">
-                            <img src="@/assets/img/arrorDown.png" class="arrorDown1 luzi2-img6 move5 ar-animated">
-                            <img src="@/assets/img/arrorDown.png" class="arrorDown2 luzi2-img7 move6 ar-animated">
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/luzi2-img-arror1.png" class="luzi2-img1">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao1 move8 ar-animated">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror6.png" class="arror6">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao2 move9 ar-animated1">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror7.png" class="arror7">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao3 move10 ar-animated1">
-                            </div>
-    
-                            <img src="@/assets/img/arror8.png" class="arror8">
-    
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror9.png" class="arror9">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao4 move11 ar-animated">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror9.png" class="arror10">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao5 move12 ar-animated">
-                            </div>
-                            <div class="xixian">
-                                <img src="@/assets/img/arror9.png" class="arror11">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao6 move13 ar-animated">
-                            </div>
-                            <div class="xixian">
-                                <img src="@/assets/img/arror9.png" class="arror12">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao7 move14 ar-animated">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror10.png" class="arror13">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao8 move15 ar-animated">
-                            </div>
-                        </div>
-    
-                        <div class="wordBox">
-                            <span class="location loc1">Compressor</span>
-                            <span class="location loc2">Cold Section</span>
-                            <span class="location loc3">Quech Section</span>
-                            <span class="location loc4">Depropanize</span>
-                            <span class="location loc5">Hot Section</span>
-                            <span class="location loc6">PGU</span>
-                            <span class="location loc7">C4 System</span>
-                            <span class="location loc8">AEU</span>
-                            <span class="section2" @click="newTabClick1"></span>
-                            <span class="section3" @click="newTabClick1"></span>
-                            <span class="section4" @click="newTabClick1"></span>
-                            <span class="section5" @click="newTabClick1"></span>
-                            <span class="section7" @click="newTabClick1"></span>
-
-                            <span class="location loc9">{{ dashboarddata.energyRpg }}</span>
-                        </div>
-    
-                        <div class="elementBox elementBoxLoc1">
-                            <div class="box_one elementItem">RPG</div>
-                            <div class="box_one elementItem">H2</div>
-    
-                        </div>
-    
-                        <div class="elementBox elementBoxLoc2">
-                            <div class="box_one elementItem">Washoil</div>
-                            <div class="box_one elementItem">C5</div>
-                            <div class="box_one elementItem">RMA</div>
-                            <div class="box_one elementItem">C9</div>
-    
-    
-                            <div class="sekuaiBox">
-                                <span class="item blue pos1">
-                                                             {{ dashboarddata.energyWashoil }}
-                                                          </span>
-                                <span class="item red pos2">
-                                                             {{ dashboarddata.energyTanwu }}
-                                                          </span>
-                                <span class="item yellow pos3">
-                                                             {{ dashboarddata.energyIma }}
-                                                          </span>
-                                <span class="item blue pos4">
-                                                             {{ dashboarddata.energyCjiu }}
-                                                          </span>
-                            </div>
-                        </div>
-    
-    
-                        <div class="elementBox elementBoxLoc3">
-                            <div class="box_one elementItem">H2</div>
-                            <div class="box_one elementItem">C2H4</div>
-                            <div class="box_one elementItem">CH4</div>
-                            <div class="box_one elementItem">Offgas</div>
-                            <div class="box_one elementItem">LPG</div>
-                            <div class="box_one elementItem">C3H6</div>
-                            <div class="box_one elementItem">C4</div>
-                            <div class="box_one elementItem">Benzene</div>
-                            <div class="box_one elementItem">Toluene</div>
-                            <div class="box_one elementItem">Xylene</div>
-                            <div class="box_one elementItem">C6-C8 NA</div>
-    
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror11.png" class="arror14">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao9 move16 ar-animated3">
-                            </div>
-                            <div class="xixian">
-                                <img src="@/assets/img/arror11.png" class="arror15">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao10 move16 ar-animated3">
-                            </div>
-                            <div class="xixian">
-                                <img src="@/assets/img/arror11.png" class="arror16">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao11 move16 ar-animated3">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror12.png" class="arror17">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao12 move17 ar-animated1">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror11.png" class="arror18">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao13 move16 ar-animated3">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror11.png" class="arror19">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao14 move16 ar-animated3">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror14.png" class="arror20">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao15 move16 ar-animated3">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror11.png" class="arror21">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao16 move16 ar-animated3">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror11.png" class="arror22">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao17 move16 ar-animated3">
-                            </div>
-    
-                            <div class="xixian">
-                                <img src="@/assets/img/arror13.png" class="arror23">
-                                <img src="@/assets/img/sanjiao.png" class="sanjiao18 move16 ar-animated3">
-                            </div>
-    
-    
-                            <div class="sekuaiBox">
-                                <span class="item blue pos5">
-                                                             {{ dashboarddata.energyQingqi }}
-                                                          </span>
-                                <span class="item yellow pos6">
-                                                             {{ dashboarddata.energyYixi }}
-                                                          </span>
-                                <span class="item blue pos7">
-                                                             {{ dashboarddata.energyJiawan }}
-                                                          </span>
-                                <span class="item red pos8">
-                                                             {{ dashboarddata.energyOffgas }}
-                                                          </span>
-                                <span class="item yellow pos9">
-                                                             {{ dashboarddata.energyLpg }}
-                                                          </span>
-                                <span class="item blue pos10">
-                                                            {{ dashboarddata.energyBingxi }}
-                                                          </span>
-                                <span class="item red pos11">
-                                                             {{ dashboarddata.energyCsi }}
-                                                          </span>
-                                <span class="item blue pos12">
-                                                             {{ dashboarddata.energyBenzene }}
-                                                          </span>
-                                <span class="item yellow pos13">
-                                                             {{ dashboarddata.energyToluene }}
-                                                          </span>
-                                <span class="item blue pos14">
-                                                             {{ dashboarddata.energyXylene }}
-                                                          </span>
-                                <span class="item red pos15">
-                                                             {{ dashboarddata.energyTanliu }}
-                                                          </span>
-                            </div>
-    
-                        </div>
-    
-                        <div class="elementBox elementBoxLoc4">
-                            <div class="dizuo dizuoelementItem">TM</div>
-                            <div class="dizuo dizuoelementItem">TS</div>
-                            <div class="dizuo dizuoelementItem">EO/EG</div>
-                            <div class="dizuo dizuoelementItem">OXO</div>
-                            <div class="dizuo dizuoelementItem">YBS</div>
-                            <div class="dizuo dizuoelementItem">TM</div>
-    
-    
-                            <div class="dizuo dizuoelementItem">AA/AE</div>
-                            <div class="dizuo dizuoelementItem">GAA</div>
-                            <div class="dizuo dizuoelementItem">OXO</div>
-                            <div class="dizuo dizuoelementItem">YPC</div>
-                            <div class="dizuo dizuoelementItem">Logistic</div>
-                            <div class="dizuo dizuoelementItem">BD</div>
-    
-                        </div>
-    
-                        <div class="elementBox elementBoxLoc5">
-    
-                            <img src="@/assets/img/arror15.png" class="arror24">
-    
-                            <img src="@/assets/img/arror16.png" class="arror25">
-    
-                            <img src="@/assets/img/arror17.png" class="arror26">
-    
-                        </div>
-    
+
+                <div class="elementBox elementBoxLoc2">
+                    <div class="box_one elementItem">Washoil</div>
+                    <div class="box_one elementItem">C5</div>
+                    <div class="box_one elementItem">RMA</div>
+                    <div class="box_one elementItem">C9</div>
+
+
+                    <div class="sekuaiBox">
+                      <span class="item blue pos1">
+                         {{ dashboarddata.energyWashoil }}
+                      </span>
+                      <span class="item red pos2">
+                         {{ dashboarddata.energyTanwu }}
+                      </span>
+                      <span class="item yellow pos3">
+                         {{ dashboarddata.energyIma }}
+                      </span>
+                      <span class="item blue pos4">
+                         {{ dashboarddata.energyCjiu }}
+                      </span>
                     </div>
                 </div>
+
+
+                <div class="elementBox elementBoxLoc3">
+                    <div class="box_one elementItem">H2</div>
+                    <div class="box_one elementItem">C2H4</div>
+                    <div class="box_one elementItem">CH4</div>
+                    <div class="box_one elementItem">Offgas</div>
+                    <div class="box_one elementItem">LPG</div>
+                    <div class="box_one elementItem">C3H6</div>
+                    <div class="box_one elementItem">C4</div>
+                    <div class="box_one elementItem">Benzene</div>
+                    <div class="box_one elementItem">Toluene</div>
+                    <div class="box_one elementItem">Xylene</div>
+                    <div class="box_one elementItem">C6-C8 NA</div>
+
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror14">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao9 move16 ar-animated3">
+                  </div>
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror15">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao10 move16 ar-animated3">
+                  </div>
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror16">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao11 move16 ar-animated3">
+                  </div>
+
+                   <div class="xixian">
+                    <img src="@/assets/img/arror12.png" class="arror17">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao12 move17 ar-animated1">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror18">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao13 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror19">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao14 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror14.png" class="arror20">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao15 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror21">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao16 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror11.png" class="arror22">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao17 move16 ar-animated3">
+                  </div>
+
+                  <div class="xixian">
+                    <img src="@/assets/img/arror13.png" class="arror23">
+                    <img src="@/assets/img/sanjiao.png" class="sanjiao18 move16 ar-animated3">
+                  </div>
+
+
+                  <div class="sekuaiBox">
+                      <span class="item blue pos5">
+                         {{ dashboarddata.energyQingqi }}
+                      </span>
+                      <span class="item yellow pos6">
+                         {{ dashboarddata.energyYixi }}
+                      </span>
+                      <span class="item blue pos7">
+                         {{ dashboarddata.energyJiawan }}
+                      </span>
+                      <span class="item red pos8">
+                         {{ dashboarddata.energyOffgas }}
+                      </span>
+                      <span class="item yellow pos9">
+                         {{ dashboarddata.energyLpg }}
+                      </span>
+                      <span class="item blue pos10">
+                        {{ dashboarddata.energyBingxi }}
+                      </span>
+                      <span class="item red pos11">
+                         {{ dashboarddata.energyCsi }}
+                      </span>
+                      <span class="item blue pos12">
+                         {{ dashboarddata.energyBenzene }}
+                      </span>
+                      <span class="item yellow pos13">
+                         {{ dashboarddata.energyToluene }}
+                      </span>
+                      <span class="item blue pos14">
+                         {{ dashboarddata.energyXylene }}
+                      </span>
+                      <span class="item red pos15">
+                         {{ dashboarddata.energyTanliu }}
+                      </span>
+                  </div>
+
+                </div>
+
+                <div class="elementBox elementBoxLoc4">
+                    <div class="dizuo dizuoelementItem">TM</div>
+                    <div class="dizuo dizuoelementItem">TS</div>
+                    <div class="dizuo dizuoelementItem">EO/EG</div>
+                    <div class="dizuo dizuoelementItem">OXO</div>
+                    <div class="dizuo dizuoelementItem">YBS</div>
+                    <div class="dizuo dizuoelementItem">TM</div>
+
+
+                    <div class="dizuo dizuoelementItem">AA/AE</div>
+                    <div class="dizuo dizuoelementItem">GAA</div>
+                    <div class="dizuo dizuoelementItem">OXO</div>
+                    <div class="dizuo dizuoelementItem">YPC</div>
+                    <div class="dizuo dizuoelementItem">Logistic</div>
+                    <div class="dizuo dizuoelementItem">BD</div>
+
+                </div>
+
+                <div class="elementBox elementBoxLoc5">
+
+                  <img src="@/assets/img/arror15.png" class="arror24">
+
+                  <img src="@/assets/img/arror16.png" class="arror25">
+
+                  <img src="@/assets/img/arror17.png" class="arror26">
+
+                </div>
+
             </div>
+          </div>
         </div>
-    </div>
+      </div>
+  </div>
 </template>
 
 <script>
-import { selectLast } from "@/api/aspen/dashboarddata";
+  import { selectLast } from "@/api/aspen/dashboarddata";
 
-export default {
+  export default {
     name: "materialBalance",
     props: ['dashboarddata'],
-    data() {
-        return {
-            status110: 15,
-            status111: 15,
-            status112: 15,
-            status113: 20,
-            status114: 15,
-            status115: 15,
-            status116: 45,
-            status117: 15,
-            status118: 20,
-            status130: 15,
-            status109A: 15,
-            status109B: 45,
-
-            // 查询参数
-            queryParams: {},
-            url: "http://api.fyzhsq.cn:58099/#/home",
-            url1: "http://api.fyzhsq.cn:58099/#/home1"
-
-        }
+    data () {
+      return {
+        status110: 15,
+        status111: 15,
+        status112: 15,
+        status113: 20,
+        status114: 15,
+        status115: 15,
+        status116: 45,
+        status117: 15,
+        status118: 20,
+        status130: 15,
+        status109A: 15,
+        status109B: 45,
+
+        // 查询参数
+        queryParams: {
+        },
+      }
+    },
+    created() {
     },
-    created() {},
     methods: {
-        /** 查询dashboard抓取数据列表 */
-        // getList()
-        // {
-        //   selectLast(this.queryParams).then(response => {
-        //     this.dashboarddata = response.data;
-        //   });
-        // }
-        newTabClick() {
-            window.open(this.url, '_blank')
-        },
-        newTabClick1() {
-            window.open(this.url1, '_blank')
-        }
+      /** 查询dashboard抓取数据列表 */
+      // getList()
+      // {
+      //   selectLast(this.queryParams).then(response => {
+      //     this.dashboarddata = response.data;
+      //   });
+      // }
     }
-}
+  }
 </script>
 
 <style lang="scss">
-#materialBalance {
-    width: 1400px;
-    height: 750px;
+#materialBalance{
+  width: 1400px;
+  height: 750px;
 }
-
-.box_one {
+  .box_one{
     width: 101px;
     height: 55px;
     background: url(../../assets/img/ebo.png);
@@ -443,26 +431,25 @@ export default {
     justify-content: center;
     align-items: center;
     padding-top: 5px;
-}
+  }
 
-.textOne {
+  .textOne{
     font-size: 16px;
     color: rgb(32, 99, 255);
     text-align: center;
-}
 
-#materialBalance .layout .layout_left img.arror1 {
+  }
+  #materialBalance .layout .layout_left img.arror1{
     width: 39px;
     height: 18px;
     padding-bottom: 0;
     margin-bottom: 0;
-}
+  }
 
-.flex {
+  .flex{
     display: flex;
-}
-
-.box_two {
+  }
+  .box_two{
     width: 240px;
     height: 360px;
     border: 1px dotted rgb(78, 128, 248);
@@ -470,1268 +457,996 @@ export default {
     margin-left: 10px;
     display: flex;
     flex-flow: wrap;
-    z-index: 100;
-}
+  }
 
-.arror_one {
+  .arror_one{
     margin-left: 10px;
-}
-
-#materialBalance .layout .layout_left .luziBox img {
-    width: 55px;
-    height: 62px;
-    margin-bottom: 0;
-    padding-bottom: 0;
-    margin-top: 10px;
-}
-
-.text2 {
+  }
+
+  #materialBalance .layout .layout_left .luziBox img{
+      width: 55px;
+      height: 62px;
+      margin-bottom: 0;
+      padding-bottom: 0;
+      margin-top: 10px;
+  }
+  .text2{
     font-size: 12px;
     color: rgb(178, 201, 255);
     text-align: center;
-}
 
-.luziBox {
+  }
+  .luziBox{
     width: 33%;
-    cursor: pointer;
-}
-
-.furnace {
+  }
+  .furnace {
     font-size: 20px;
     color: rgb(178, 201, 255);
     text-align: center;
     display: block;
     width: 100%;
     margin-top: 10px;
-}
-
-#materialBalance .layout .layout_left img.arror4 {
-    width: 54px;
-    height: 18px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    margin-top: 250px;
-}
-
-.luzi2 {
-    background: url(../../assets/img/luzi2.png);
-    width: 720px;
-    height: 680px;
-    background-size: 100% 100%;
-    margin-left: -220px;
-    margin-top: -20px;
-    position: relative;
-}
-
-.luzi2 .ebo2Box {
-    background: url(../../assets/img/ebo2.png);
-    width: 77px;
-    height: 49px;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 8px;
-    left: 220px;
-    font-size: 18px;
-    color: rgb(178, 201, 255);
-    padding-top: 17px;
-}
-
-#materialBalance .layout .layout_left img.luzi2-img1 {
-    width: 36px;
-    height: 168px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 55px;
-    left: 238px;
-}
-
-#materialBalance .layout .layout_left img.sanjiao1 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 55px;
-    left: 240px;
-}
-
-#materialBalance .layout .layout_left img.sanjiao2 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 444px;
-    left: 390px;
-    transform: rotate(-90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao3 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 444px;
-    left: 520px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao4 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 498px;
-    left: 130px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao5 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 550px;
-    left: 130px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao6 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 600px;
-    left: 130px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao7 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 650px;
-    left: 130px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao8 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 596px;
-    left: 346px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao9 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 12px;
-    left: -90px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao10 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 76px;
-    left: -90px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao11 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 140px;
-    left: -90px;
-    transform: rotate(90deg);
-}
-
-#materialBalance .layout .layout_left img.sanjiao12 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 150px;
-    left: -150px;
-    transform: rotate(-180deg);
-}
+  }
+#materialBalance .layout .layout_left img.arror4{
+  width: 54px;
+  height: 18px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  margin-top: 250px;
+}
+.luzi2{
+  background: url(../../assets/img/luzi2.png);
+  width: 720px;
+  height: 680px;
+  background-size: 100% 100%;
+  margin-left: -220px;
+  margin-top: -20px;
+  position: relative;
+}
+
+.luzi2 .ebo2Box{
+  background: url(../../assets/img/ebo2.png);
+  width: 77px;
+  height: 49px;
+  background-size: 100% 100%;
+  position: absolute;
+  top: 8px;
+  left: 220px;
+  font-size: 18px;
+  color: rgb(178, 201, 255);
+  padding-top: 17px;
+}
+
+#materialBalance .layout .layout_left img.luzi2-img1{
+  width: 36px;
+  height: 168px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 55px;
+  left: 238px;
+}
+
+#materialBalance .layout .layout_left img.sanjiao1{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 55px;
+  left: 240px;
+}
+#materialBalance .layout .layout_left img.sanjiao2{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 444px;
+  left: 390px;
+  transform: rotate(-90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao3{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 444px;
+  left: 520px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao4{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 498px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao5{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 550px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao6{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 600px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao7{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 650px;
+  left: 130px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao8{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 596px;
+  left: 346px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao9{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 12px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao10{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 76px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao11{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 140px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao12{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 150px;
+  left: -150px;
+  transform: rotate(-180deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao13{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 260px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao14{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 320px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+#materialBalance .layout .layout_left img.sanjiao15{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 440px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao16{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 500px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao17{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 560px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.sanjiao18{
+  width: 33px;
+  height: 35px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 630px;
+  left: -90px;
+  transform: rotate(90deg);
+}
+
+#materialBalance .layout .layout_left img.luzi2-img2{
+  width: 104px;
+  height: 122px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 100px;
+  left: 270px;
+}
+
+#materialBalance .layout .layout_left img.luzi2-img3{
+  position: absolute;
+  top: 100px;
+  left: 570px;
+  margin-top: 0;
+}
+
+#materialBalance .layout .layout_left img.luzi2-img4{
+  position: absolute;
+  top: 280px;
+  left: 570px;
+  margin-top: 0;
+}
 
-#materialBalance .layout .layout_left img.sanjiao13 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 260px;
-    left: -90px;
-    transform: rotate(90deg);
+#materialBalance .layout .layout_left img.arrorDown1{
+
+  margin-top: 0;
+  width: 18px;
+  height: 64px;
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
 
-#materialBalance .layout .layout_left img.sanjiao14 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 320px;
-    left: -90px;
-    transform: rotate(90deg);
-}
+#materialBalance .layout .layout_left img.arrorDown2{
 
-#materialBalance .layout .layout_left img.sanjiao15 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 440px;
-    left: -90px;
-    transform: rotate(90deg);
+  margin-top: 0;
+  width: 18px;
+  height: 48px;
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
+#materialBalance .layout .layout_left img.luzi2-img5{
+  position: absolute;
+  top: 380px;
+  left: 250px;
 
-#materialBalance .layout .layout_left img.sanjiao16 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 500px;
-    left: -90px;
-    transform: rotate(90deg);
 }
 
-#materialBalance .layout .layout_left img.sanjiao17 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 560px;
-    left: -90px;
-    transform: rotate(90deg);
-}
+#materialBalance .layout .layout_left img.luzi2-img6{
+  position: absolute;
+  top: 150px;
+  left: 470px;
 
-#materialBalance .layout .layout_left img.sanjiao18 {
-    width: 33px;
-    height: 35px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 630px;
-    left: -90px;
-    transform: rotate(90deg);
 }
 
-#materialBalance .layout .layout_left img.luzi2-img2 {
-    width: 104px;
-    height: 122px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 100px;
-    left: 270px;
-}
+#materialBalance .layout .layout_left img.luzi2-img7{
+  position: absolute;
+  top: 380px;
+  left: 470px;
 
-#materialBalance .layout .layout_left img.luzi2-img3 {
-    position: absolute;
-    top: 100px;
-    left: 570px;
-    margin-top: 0;
 }
 
-#materialBalance .layout .layout_left img.luzi2-img4 {
-    position: absolute;
-    top: 280px;
-    left: 570px;
-    margin-top: 0;
+#materialBalance .layout .layout_left img.arror5{
+  width: 87px;
+  height: 18px;
+  padding-bottom: 0;
+  margin-bottom: 0;
 }
 
-#materialBalance .layout .layout_left img.arrorDown1 {
-    margin-top: 0;
-    width: 18px;
-    height: 64px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-}
+#materialBalance .layout .layout_left img.luzi2-img8{
+  position: absolute;
+  top: 620px;
+  left: -90px;
 
-#materialBalance .layout .layout_left img.arrorDown2 {
-    margin-top: 0;
-    width: 18px;
-    height: 48px;
-    padding-bottom: 0;
-    margin-bottom: 0;
 }
 
-#materialBalance .layout .layout_left img.luzi2-img5 {
-    position: absolute;
-    top: 380px;
-    left: 250px;
-}
-
-#materialBalance .layout .layout_left img.luzi2-img6 {
-    position: absolute;
-    top: 150px;
-    left: 470px;
-}
-
-#materialBalance .layout .layout_left img.luzi2-img7 {
-    position: absolute;
-    top: 380px;
-    left: 470px;
-}
-
-#materialBalance .layout .layout_left img.arror5 {
-    width: 87px;
-    height: 18px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-}
-
-#materialBalance .layout .layout_left img.luzi2-img8 {
-    position: absolute;
-    top: 620px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror6 {
-    width: 581px;
-    height: 60px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
+#materialBalance .layout .layout_left img.arror6{
+  width: 581px;
+  height: 60px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
     top: 460px;
     left: -170px;
 }
 
-#materialBalance .layout .layout_left img.arror7 {
-    width: 273px;
-    height: 84px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 398px;
-    left: 537px;
-}
-
-#materialBalance .layout .layout_left img.arror8 {
-    width: 118px;
-    height: 8px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 560px;
-    left: -110px;
-}
-
-#materialBalance .layout .layout_left img.arror9 {
-    width: 121px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 500px;
-    left: 130px;
-}
-
-#materialBalance .layout .layout_left img.arror10 {
-    width: 121px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 550px;
-    left: 130px;
-}
-
-#materialBalance .layout .layout_left img.arror11 {
-    width: 121px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 600px;
-    left: 130px;
-}
-
-#materialBalance .layout .layout_left img.arror12 {
-    width: 121px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 650px;
-    left: 130px;
-}
-
-#materialBalance .layout .layout_left img.arror13 {
-    width: 260px;
-    height: 34px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 596px;
-    left: 346px;
-}
-
-#materialBalance .layout .layout_left img.arror14 {
-    width: 80px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 12px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror15 {
-    width: 80px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 76px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror16 {
-    width: 80px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 140px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror17 {
-    width: 129px;
-    height: 57px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 176px;
-    left: -136px;
-}
-
-#materialBalance .layout .layout_left img.arror18 {
-    width: 80px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 260px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror19 {
-    width: 80px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 320px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror20 {
-    width: 152px;
-    height: 69px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 440px;
-    left: -160px;
-}
-
-#materialBalance .layout .layout_left img.arror21 {
-    width: 80px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 500px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror22 {
-    width: 80px;
-    height: 33px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 560px;
-    left: -90px;
-}
-
-#materialBalance .layout .layout_left img.arror23 {
-    width: 166px;
-    height: 34px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 630px;
-    left: -172px;
-}
-
-#materialBalance .layout .layout_left img.arror24 {
-    width: 98px;
-    height: 264px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 32px;
-    left: -93px;
-}
-
-#materialBalance .layout .layout_left img.arror25 {
-    width: 98px;
-    height: 244px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 327px;
-    left: -93px;
-}
-
-#materialBalance .layout .layout_left img.arror26 {
-    width: 70px;
-    height: 251px;
-    padding-bottom: 0;
-    margin-bottom: 0;
-    position: absolute;
-    top: 387px;
-    left: -66px;
-}
-
-.wordBox {
-    width: 100%;
-    height: 100%;
-}
-
-.wordBox span {
-    font-size: 20px;
-    color: rgb(178, 201, 255);
-    text-align: center;
-    font-weight: bold;
-}
-
-.wordBox .location {
-    position: absolute;
-}
-
-.section2 {
-    cursor: pointer;
-    position: absolute;
-    top: 215px;
-    left: 208px;
-    width: 100px;
-    height: 180px;
-}
-.section3 {
-    cursor: pointer;
-    position: absolute;
-    top: 20px;
-    left: 610px;
-    width: 100px;
-    height: 180px;
-}
-.section4 {
-    cursor: pointer;
-    position: absolute;
-    top: 215px;
-    left: 425px;
-    width: 100px;
-    height: 180px;
-}
-.section5 {
-    cursor: pointer;
-    position: absolute;
-    top: 215px;
-    left: 609px;
-    width: 100px;
-    height: 180px;
-}
-.section7 {
-    cursor: pointer;
-    position: absolute;
-    top: 430px;
-    left: 426px;
-    width: 100px;
-    height: 180px;
-}
-.wordBox .location.loc1 {
+#materialBalance .layout .layout_left img.arror7{
+  width: 273px;
+  height: 84px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 398px;
+  left: 537px;
+}
+
+#materialBalance .layout .layout_left img.arror8{
+  width: 118px;
+  height: 8px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 560px;
+  left: -110px;
+}
+#materialBalance .layout .layout_left img.arror9{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 500px;
+  left: 130px;
+}
+#materialBalance .layout .layout_left img.arror10{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 550px;
+  left: 130px;
+}
+#materialBalance .layout .layout_left img.arror11{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 600px;
+  left: 130px;
+}
+#materialBalance .layout .layout_left img.arror12{
+  width: 121px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 650px;
+  left: 130px;
+}
+
+#materialBalance .layout .layout_left img.arror13{
+  width: 260px;
+  height: 34px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 596px;
+  left: 346px;
+}
+
+#materialBalance .layout .layout_left img.arror14{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 12px;
+  left: -90px;
+}
+
+
+#materialBalance .layout .layout_left img.arror15{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 76px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror16{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 140px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror17{
+  width: 129px;
+  height: 57px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 176px;
+  left: -136px;
+}
+
+#materialBalance .layout .layout_left img.arror18{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 260px;
+  left: -90px;
+}
+
+#materialBalance .layout .layout_left img.arror19{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 320px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror20{
+  width: 152px;
+  height: 69px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 440px;
+  left: -160px;
+}
+#materialBalance .layout .layout_left img.arror21{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 500px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror22{
+  width: 80px;
+  height: 33px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 560px;
+  left: -90px;
+}
+#materialBalance .layout .layout_left img.arror23{
+  width: 166px;
+  height: 34px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 630px;
+  left: -172px;
+}
+
+
+
+#materialBalance .layout .layout_left img.arror24{
+  width: 98px;
+  height: 264px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 32px;
+  left: -93px;
+}
+
+#materialBalance .layout .layout_left img.arror25{
+  width: 98px;
+  height: 244px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 327px;
+  left: -93px;
+}
+
+#materialBalance .layout .layout_left img.arror26{
+  width: 70px;
+  height: 251px;
+  padding-bottom: 0;
+  margin-bottom: 0;
+  position: absolute;
+  top: 387px;
+  left: -66px;
+}
+
+.wordBox{
+  width: 100%;
+  height: 100%;
+}
+.wordBox span{
+  font-size: 20px;
+  color: rgb(178, 201, 255);
+  text-align: center;
+  font-weight: bold;
+}
+.wordBox .location{
+  position: absolute;
+}
+
+.wordBox .location.loc1{
     top: 135px;
     left: 440px;
 }
-
-.wordBox .location.loc2 {
+.wordBox .location.loc2{
     top: 170px;
     left: 590px;
 }
 
-.wordBox .location.loc3 {
+.wordBox .location.loc3{
     top: 365px;
     left: 200px;
 }
-
-.wordBox .location.loc4 {
+.wordBox .location.loc4{
     top: 365px;
     left: 420px;
 }
-
-.wordBox .location.loc5 {
+.wordBox .location.loc5{
     top: 365px;
     left: 608px;
 }
-
-.wordBox .location.loc6 {
+.wordBox .location.loc6{
     top: 650px;
     left: 40px;
 }
-
-.wordBox .location.loc7 {
+.wordBox .location.loc7{
     top: 580px;
     left: 420px;
 }
 
-.wordBox .location.loc8 {
+.wordBox .location.loc8{
     top: 665px;
     left: 630px;
 }
 
-.wordBox .location.loc9 {
+.wordBox .location.loc9{
     top: 540px;
     left: -110px;
     font-size: 16px;
     color: rgb(32, 99, 255);
 }
 
-.wordBox .location.loc10 {
+
+.wordBox .location.loc10{
     top: 550px;
     left: -50px;
     font-size: 12px;
     color: rgb(32, 99, 255);
+
 }
 
-.elementBox {
+.elementBox{
     position: absolute;
 }
-
-.elementBox.elementBoxLoc1 {
-    top: 530px;
-    left: -210px;
+.elementBox.elementBoxLoc1{
+  top: 530px;
+  left: -210px;
 }
-
-.elementBox.elementBoxLoc2 {
-    top: 470px;
-    left: 250px;
+.elementBox.elementBoxLoc2{
+  top: 470px;
+  left: 250px;
 }
-
-.elementBox.elementBoxLoc3 {
-    top: 14px;
-    left: 820px;
+.elementBox.elementBoxLoc3{
+  top: 14px;
+  left: 820px;
 }
-
-.elementBox.elementBoxLoc4 {
-    top: 14px;
-    left: 1030px;
+.elementBox.elementBoxLoc4{
+  top: 14px;
+  left: 1030px;
 }
 
-.elementBox.elementBoxLoc5 {
-    top: 14px;
-    left: 1020px;
+.elementBox.elementBoxLoc5{
+  top: 14px;
+  left: 1020px;
 }
 
-.elementBox .elementItem span {
-    transform: scale(.8, .8);
+.elementBox .elementItem span{
+  transform: scale(.8,.8);
 }
-
-.elementBox.elementBoxLoc2 .box_one {
-    margin-bottom: auto;
+.elementBox.elementBoxLoc2 .box_one{
+  margin-bottom: auto;
 }
-
-.elementBox.elementBoxLoc3 .box_one {
-    margin-bottom: 6px;
+.elementBox.elementBoxLoc3 .box_one{
+  margin-bottom: 6px;
 }
 
-#materialBalance .layout .layout_left {
-    padding-top: 0;
+#materialBalance .layout .layout_left{
+  padding-top: 0;
 }
 
-.sekuaiBox .item {
-    font-size: 16px;
-    font-weight: bold;
-    position: absolute;
-    &::after {
-        content: '';
-        display: block;
-        width: 40px;
-        height: 7px;
-    }
-}
+.sekuaiBox .item{
+  font-size: 16px;
+  font-weight: bold;
+  position: absolute;
+  &::after{
+    content: '';
+    display: block;
+    width: 40px;
+    height: 7px;
 
-.sekuaiBox .item.pos1 {
-    left: 100px;
-    top: 5px;
+  }
 }
 
-.sekuaiBox .item.pos2 {
-    left: 100px;
-    top: 60px;
+.sekuaiBox .item.pos1{
+  left: 100px;
+  top: 5px;
 }
-
-.sekuaiBox .item.pos3 {
-    left: 100px;
-    top: 120px;
+.sekuaiBox .item.pos2{
+  left: 100px;
+  top: 60px;
 }
-
-.sekuaiBox .item.pos4 {
-    left: 100px;
-    top: 170px;
+.sekuaiBox .item.pos3{
+  left: 100px;
+  top: 120px;
 }
-
-.sekuaiBox .item.pos5 {
-    left: 95px;
-    top: 8px;
+.sekuaiBox .item.pos4{
+  left: 100px;
+  top: 170px;
 }
 
-.sekuaiBox .item.pos6 {
-    left: 95px;
-    top: 68px;
-}
 
-.sekuaiBox .item.pos7 {
-    left: 95px;
-    top: 128px;
+.sekuaiBox .item.pos5{
+  left: 95px;
+  top: 8px;
 }
 
-.sekuaiBox .item.pos8 {
-    left: 95px;
-    top: 188px;
+.sekuaiBox .item.pos6{
+  left: 95px;
+  top: 68px;
 }
-
-.sekuaiBox .item.pos9 {
-    left: 95px;
-    top: 248px;
+.sekuaiBox .item.pos7{
+  left: 95px;
+  top: 128px;
 }
-
-.sekuaiBox .item.pos10 {
-    left: 95px;
-    top: 308px;
+.sekuaiBox .item.pos8{
+  left: 95px;
+  top: 188px;
 }
-
-.sekuaiBox .item.pos11 {
-    left: 95px;
-    top: 368px;
+.sekuaiBox .item.pos9{
+  left: 95px;
+  top: 248px;
 }
-
-.sekuaiBox .item.pos12 {
-    left: 95px;
-    top: 428px;
+.sekuaiBox .item.pos10{
+  left: 95px;
+  top: 308px;
 }
-
-.sekuaiBox .item.pos13 {
-    left: 95px;
-    top: 488px;
+.sekuaiBox .item.pos11{
+  left: 95px;
+  top: 368px;
 }
-
-.sekuaiBox .item.pos14 {
-    left: 95px;
-    top: 548px;
+.sekuaiBox .item.pos12{
+  left: 95px;
+  top: 428px;
 }
-
-.sekuaiBox .item.pos15 {
-    left: 95px;
-    top: 608px;
+.sekuaiBox .item.pos13{
+  left: 95px;
+  top: 488px;
 }
-
-.sekuaiBox .item.blue {
-    color: rgb(32, 99, 255);
-    &::after {
-        background-color: rgb(32, 99, 255);
-    }
+.sekuaiBox .item.pos14{
+  left: 95px;
+  top: 548px;
 }
 
-.sekuaiBox .item.red {
-    color: #f74f4e;
-    &::after {
-        background-color: #f74f4e;
-    }
+.sekuaiBox .item.pos15{
+  left: 95px;
+  top: 608px;
 }
 
-.sekuaiBox .item.yellow {
-    color: #ffdb34;
-    &::after {
-        background-color: #ffdb34;
-    }
+.sekuaiBox .item.blue{
+  color: rgb(32, 99, 255);
+  &::after{
+    background-color: rgb(32, 99, 255);
+  }
 }
 
-.dizuo {
-    width: 58px;
-    height: 36px;
-    background: url(../../assets/img/dizuo.png);
-    background-size: 100% 100%;
-    padding-top: 10px;
-    margin-bottom: 20px;
+.sekuaiBox .item.red{
+  color: #f74f4e;
+  &::after{
+    background-color: #f74f4e;
+  }
 }
 
-@keyframes move {
-    0% {
-        left: -50%;
-        opacity: 0;
-    }
-    60% {
-        left: 10%;
-        opacity: 1
-    }
-    100% {
-        left: 50%;
-        opacity: 0;
-    }
+.sekuaiBox .item.yellow{
+  color: #ffdb34;
+  &::after{
+    background-color: #ffdb34;
+  }
 }
 
-.move {
-    -webkit-animation-name: move;
-    animation-name: move;
-    position: relative;
+.dizuo{
+  width: 58px;
+  height: 36px;
+  background: url(../../assets/img/dizuo.png);
+  background-size: 100% 100%;
+  padding-top: 10px;
+  margin-bottom: 20px;
 }
 
+@keyframes move {
+	  0% {left: -50%;	 opacity: 0; }
+	  60% { left: 10%; opacity: 1 }
+	  100% {left: 50%;opacity: 0;}
+	}
+	.move{
+    -webkit-animation-name:move;
+    animation-name:move;
+    position:relative;
+  }
+
 @keyframes move2 {
-    0% {
-        opacity: 0;
-    }
-    25% {
-        opacity: 0.5;
-    }
-    50% {
-        opacity: 1
-    }
-    75% {
-        opacity: 0.5
-    }
-    100% {
-        opacity: 0;
-    }
-}
+	  0% { opacity: 0; }
+    25% { opacity: 0.5;}
+	  50% { opacity: 1 }
+    75% { opacity: 0.5 }
+	  100% {opacity: 0;}
+	}
+	.move2{
+    -webkit-animation-name:move2;
+    animation-name:move2;
+  }
 
-.move2 {
-    -webkit-animation-name: move2;
-    animation-name: move2;
-}
 
 @keyframes move3 {
-    0% {
-        left: 530px;
-        opacity: 0;
-    }
-    50% {
-        left: 550px;
-        opacity: 1
-    }
-    100% {
-        left: 570px;
-        opacity: 0;
-    }
-}
-
-.move3 {
-    -webkit-animation-name: move3;
-    animation-name: move3;
-}
-
-@keyframes move4 {
-    0% {
-        top: 360px;
-        opacity: 0;
-    }
-    50% {
-        top: 370px;
-        opacity: 1
-    }
-    100% {
-        top: 380px;
-        opacity: 0;
-    }
-}
-
-.move4 {
-    -webkit-animation-name: move4;
-    animation-name: move4;
-}
-
-@keyframes move5 {
-    0% {
-        top: 130px;
-        opacity: 0;
-    }
-    50% {
-        top: 140px;
-        opacity: 1
-    }
-    100% {
-        top: 150px;
-        opacity: 0;
-    }
-}
-
-.move5 {
-    -webkit-animation-name: move5;
-    animation-name: move5;
-}
-
-@keyframes move6 {
-    0% {
-        top: 360px;
-        opacity: 0;
-    }
-    50% {
-        top: 370px;
-        opacity: 1
-    }
-    100% {
-        top: 380px;
-        opacity: 0;
-    }
-}
-
-.move6 {
-    -webkit-animation-name: move6;
-    animation-name: move6;
-}
-
-@keyframes move7 {
-    0% {
-        left: -110px;
-        opacity: 0;
-    }
-    50% {
-        left: -100px;
-        opacity: 1
-    }
-    100% {
-        left: -90px;
-        opacity: 0;
-    }
-}
-
-.move7 {
-    -webkit-animation-name: move7;
-    animation-name: move7;
-}
+	  0% {left: 530px;	 opacity: 0; }
+	  50% { left: 550px; opacity: 1 }
+	  100% {left: 570px;opacity: 0;}
+	}
+	.move3{
+    -webkit-animation-name:move3;
+    animation-name:move3;
+  }
+
+
+  @keyframes move4 {
+	  0% {top: 360px;	 opacity: 0; }
+	  50% { top: 370px; opacity: 1 }
+	  100% {top: 380px;opacity: 0;}
+	}
+	.move4{
+    -webkit-animation-name:move4;
+    animation-name:move4;
+  }
+
+
+  @keyframes move5 {
+	  0% {top: 130px;	 opacity: 0; }
+	  50% { top: 140px; opacity: 1 }
+	  100% {top: 150px;opacity: 0;}
+	}
+	.move5{
+    -webkit-animation-name:move5;
+    animation-name:move5;
+  }
+
+
+  @keyframes move6 {
+	  0% {top: 360px;	 opacity: 0; }
+	  50% { top: 370px; opacity: 1 }
+	  100% {top: 380px;opacity: 0;}
+	}
+
+	.move6{
+    -webkit-animation-name:move6;
+    animation-name:move6;
+  }
+
+  @keyframes move7 {
+	  0% {left: -110px;	 opacity: 0; }
+	  50% { left: -100px; opacity: 1 }
+	  100% {left: -90px;opacity: 0;}
+	}
+
+	.move7{
+    -webkit-animation-name:move7;
+    animation-name:move7;
+  }
 
 @keyframes move8 {
-    0% {
-        top: 200px;
-        opacity: 0;
-    }
-    25% {
-        top: 170px;
-        opacity: .3;
-    }
-    50% {
-        top: 140px;
-        opacity: .5;
-    }
-    75% {
-        top: 110px;
-        opacity: .7;
-    }
-    100% {
-        top: 55px;
-        opacity: 1;
-    }
-}
-
-.move8 {
-    -webkit-animation-name: move8;
-    animation-name: move8;
-}
-
-@keyframes move9 {
-    0% {
-        left: 390px;
-        opacity: 0;
-    }
-    75% {
-        left: -170px;
-        top: 444px;
-        opacity: .7;
-        transform: rotate(-180deg);
-    }
-    100% {
-        left: -170px;
-        top: 490px;
-        opacity: 1;
-        transform: rotate(-180deg);
-    }
-}
-
-.move9 {
-    -webkit-animation-name: move9;
-    animation-name: move9;
-}
-
-@keyframes move10 {
-    0% {
-        left: 520px;
-        top: 465px;
-        opacity: 0;
-    }
-    25% {
-        left: 556px;
-        top: 465px;
-        opacity: .3;
-        transform: rotate(0deg);
-    }
-    50% {
-        left: 556px;
-        top: 398px;
-        opacity: .7;
-        transform: rotate(90deg);
-    }
-    100% {
-        left: 768px;
-        top: 398px;
-        opacity: 1;
-        transform: rotate(90deg);
-    }
-}
-
-.move10 {
-    -webkit-animation-name: move10;
-    animation-name: move10;
-}
+	  0% {top: 200px;	 opacity: 0; }
+    25% { top: 170px; opacity: .3; }
+	  50% { top: 140px; opacity: .5; }
+    75% { top: 110px; opacity: .7; }
+	  100% {top: 55px;opacity: 1;}
+	}
+
+	.move8{
+    -webkit-animation-name:move8;
+    animation-name:move8;
+  }
+
+  @keyframes move9 {
+	  0% {left: 390px;	 opacity: 0; }
+    75% { left: -170px;top: 444px; opacity: .7; transform: rotate(-180deg);}
+	  100% {left: -170px;top:490px; opacity: 1;transform: rotate(-180deg);}
+	}
+
+	.move9{
+    -webkit-animation-name:move9;
+    animation-name:move9;
+  }
+
+  @keyframes move10 {
+	  0% {left: 520px;	top:465px; opacity: 0; }
+    25% {left: 556px; top: 465px;	 opacity: .3; transform: rotate(0deg);}
+    50% { left: 556px;top: 398px; opacity: .7; transform: rotate(90deg);}
+	  100% {left: 768px;top:398px; opacity: 1;transform: rotate(90deg);}
+	}
+
+	.move10{
+    -webkit-animation-name:move10;
+    animation-name:move10;
+  }
 
 @keyframes move11 {
-    0% {
-        top: 498px;
-        left: 130px;
-        opacity: 0;
-    }
-    100% {
-        left: 215px;
-        opacity: 1;
-    }
-}
-
-.move11 {
-    -webkit-animation-name: move11;
-    animation-name: move11;
-}
-
-@keyframes move12 {
-    0% {
-        top: 550px;
-        left: 130px;
-        opacity: 0;
-    }
-    100% {
-        left: 215px;
-        opacity: 1;
-    }
-}
-
-.move12 {
-    -webkit-animation-name: move12;
-    animation-name: move12;
-}
-
-@keyframes move13 {
-    0% {
-        top: 600px;
-        left: 130px;
-        opacity: 0;
-    }
-    100% {
-        left: 215px;
-        opacity: 1;
-    }
-}
-
-.move13 {
-    -webkit-animation-name: move13;
-    animation-name: move13;
-}
-
-@keyframes move14 {
-    0% {
-        top: 650px;
-        left: 130px;
-        opacity: 0;
-    }
-    100% {
-        left: 215px;
-        opacity: 1;
-    }
-}
-
-.move14 {
-    -webkit-animation-name: move14;
-    animation-name: move14;
-}
+	  0% {top: 498px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}
 
-@keyframes move15 {
-    0% {
-        top: 596px;
-        left: 346px;
-        opacity: 0;
-    }
-    100% {
-        left: 570px;
-        opacity: 1;
-    }
-}
+	.move11{
+    -webkit-animation-name:move11;
+    animation-name:move11;
+  }
 
-.move15 {
-    -webkit-animation-name: move15;
-    animation-name: move15;
-}
 
-@keyframes move16 {
-    0% {
-        left: -90px;
-        opacity: 0;
-    }
-    100% {
-        left: -50px;
-        opacity: 1;
-    }
-}
-
-.move16 {
-    -webkit-animation-name: move16;
-    animation-name: move16;
-}
-
-@keyframes move17 {
-    0% {
-        top: 150px;
-        left: -150px;
-        transform: rotate(-180deg);
-        opacity: 0;
-    }
-    25% {
-        top: 175px;
-        left: -150px;
-        transform: rotate(-270deg);
-    }
-    50% {
-        top: 175px;
-        left: -105px;
-        transform: rotate(-180deg);
-    }
-    75% {
-        top: 200px;
-        left: -105px;
-        transform: rotate(-270deg);
-    }
-    100% {
-        top: 200px;
-        left: -40px;
-        transform: rotate(-270deg);
-        opacity: 1;
-    }
-}
-
-.move17 {
-    -webkit-animation-name: move17;
-    animation-name: move17;
-}
+@keyframes move12 {
+	  0% {top: 550px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}
 
-.ar-animated {
-    -webkit-animation-duration: 1.5s;
-    animation-duration: 1.5s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    animation-iteration-count: infinite;
-    -webkit-animation-iteration-count: infinite;
-    font-style: inherit;
-    -webkit-animation-timing-function: linear;
-    animation-timing-function: linear;
-}
+	.move12{
+    -webkit-animation-name:move12;
+    animation-name:move12;
+  }
 
-.ar-animated1 {
-    -webkit-animation-duration: 3s;
-    animation-duration: 3s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    animation-iteration-count: infinite;
-    -webkit-animation-iteration-count: infinite;
-    font-style: inherit;
-    -webkit-animation-timing-function: linear;
-    animation-timing-function: linear;
-}
 
-.ar-animated3 {
-    -webkit-animation-duration: 1s;
-    animation-duration: 1s;
-    -webkit-animation-fill-mode: both;
-    animation-fill-mode: both;
-    animation-iteration-count: infinite;
-    -webkit-animation-iteration-count: infinite;
-    font-style: inherit;
-    -webkit-animation-timing-function: linear;
-    animation-timing-function: linear;
-}
+@keyframes move13 {
+	  0% {top: 600px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}
 
-.ar-delay-1s {
-    animation-delay: 0.1s;
-}
+	.move13{
+    -webkit-animation-name:move13;
+    animation-name:move13;
+  }
 
-.ar-delay-2s {
-    animation-delay: 0.2s;
-}
 
-.ar-delay-3s {
-    animation-delay: 0.3s;
-}
+@keyframes move14 {
+	  0% {top: 650px;left: 130px;	 opacity: 0; }
+	  100% {left: 215px; opacity: 1;}
+	}
 
-.ar-delay-4s {
-    animation-delay: 0.4s;
-}
+	.move14{
+    -webkit-animation-name:move14;
+    animation-name:move14;
+  }
 
-.ar-delay-5s {
-    animation-delay: 0.5s;
-}
 
-.ar-delay-6s {
-    animation-delay: 0.6s;
-}
 
-.ar-delay-7s {
-    animation-delay: 0.7s;
-}
-
-.ar-delay-8s {
-    animation-delay: 0.8s;
-}
 
-.ar-delay-9s {
-    animation-delay: 0.9s;
-}
+@keyframes move15 {
+	  0% {top: 596px;left: 346px;	 opacity: 0; }
+	  100% {left: 570px; opacity: 1;}
+	}
+
+	.move15{
+    -webkit-animation-name:move15;
+    animation-name:move15;
+  }
+@keyframes move16 {
+	  0% {left: -90px;	 opacity: 0; }
+	  100% {left: -50px; opacity: 1;}
+	}
+
+	.move16{
+    -webkit-animation-name:move16;
+    animation-name:move16;
+  }
+
+  @keyframes move17 {
+	  0% {top:150px;left:-150px;transform: rotate(-180deg); opacity: 0;}
+    25%{top:175px;left:-150px;transform: rotate(-270deg);}
+    50%{top:175px;left:-105px;transform: rotate(-180deg);}
+    75%{top:200px;left:-105px;transform: rotate(-270deg);}
+	  100% {top:200px;left:-40px;transform: rotate(-270deg);opacity: 1;}
+	}
+
+	.move17{
+    -webkit-animation-name:move17;
+    animation-name:move17;
+  }
+
+
+	.ar-animated{
+    -webkit-animation-duration:1.5s;
+    animation-duration:1.5s;
+    -webkit-animation-fill-mode:both;
+    animation-fill-mode:both;
+    animation-iteration-count:infinite;
+    -webkit-animation-iteration-count:infinite;
+    font-style:inherit;
+    -webkit-animation-timing-function:linear;
+    animation-timing-function:linear;}
+
+  .ar-animated1{
+    -webkit-animation-duration:3s;
+    animation-duration:3s;
+    -webkit-animation-fill-mode:both;
+    animation-fill-mode:both;
+    animation-iteration-count:infinite;
+    -webkit-animation-iteration-count:infinite;
+    font-style:inherit;
+    -webkit-animation-timing-function:linear;
+    animation-timing-function:linear;}
+
+
+
+
+  .ar-animated3{
+    -webkit-animation-duration:1s;
+    animation-duration:1s;
+    -webkit-animation-fill-mode:both;
+    animation-fill-mode:both;
+    animation-iteration-count:infinite;
+    -webkit-animation-iteration-count:infinite;
+    font-style:inherit;
+    -webkit-animation-timing-function:linear;
+    animation-timing-function:linear;}
+	.ar-delay-1s{animation-delay:0.1s;}
+	.ar-delay-2s{animation-delay:0.2s;}
+	.ar-delay-3s{animation-delay:0.3s;}
+	.ar-delay-4s{animation-delay:0.4s;}
+	.ar-delay-5s{animation-delay:0.5s;}
+	.ar-delay-6s{animation-delay:0.6s;}
+	.ar-delay-7s{animation-delay:0.7s;}
+	.ar-delay-8s{animation-delay:0.8s;}
+	.ar-delay-9s{animation-delay:0.9s;}
+	.ar-delay-10s{animation-delay:0.10s;}
 
-.ar-delay-10s {
-    animation-delay: 0.10s;
-}
 </style>