zc

src/views/home.vue

@@ -1,169 +1,113 @@
 <template>
   <div class="home" :class="userType != 22&&initPage == 'true' ? 'home-class' : ''" >
-    <!--<div class="button-max-box" v-if="userType != '22'">-->
-    <!--<dv-full-screen-container v-if="userType != '22'&&initPage == 'true'" style="display: flex;flex-direction: column;flex:1;">-->
-      <home-navbar />
-      <div class="max-big-home-box" v-if="userType != 22&&initPage == 'true'">
-        <div class="max-home-button-box">
-          <div class="max-home-box">
-            <div class="max-bottom-box">
-              <div class="top-button-box">
-                <div class="left-box">
-                  <div class="position-button top-margin" @click="goPage('EmergencyManagement','应急预警')">
-                    <div>
-                      <img src="@/assets/ZDimages/home/icon_sy_yjyj.png">
-                      <p>应急预警</p>
-                    </div>
-                  </div>
-                  <div class="position-button" @click="goPage('GasManage','气瓶监测')">
-                    <div>
-                      <img src="@/assets/ZDimages/home/icon_sy_qpjc.png">
-                      <p>气瓶监测</p>
-                    </div>
-                  </div>
-                  <div class="position-button" @click="goPage('ChemicalLibrary','化学品管理')">
-                    <div>
-                      <img src="@/assets/ZDimages/home/icon_sy_hxpgl.png">
-                      <p>化学品管控</p>
-                    </div>
-                  </div>
-                  <!--<div class="position-button top-margin" @click="goPage('SafetyEducationExam','安全教育与考试')">-->
-                    <!--<div>-->
-                      <!--<img src="@/assets/ZDimages/home/icon_sy_aqjyyks.png">-->
-                      <!--<p>安全教育与考试</p>-->
-                    <!--</div>-->
-                  <!--</div>-->
-                  <!--<div class="position-button" @click="goPage('null','责任体系')">-->
-                    <!--<div>-->
-                      <!--<img src="@/assets/ZDimages/home/icon_sy_zrtx.png">-->
-                      <!--<p>责任体系</p>-->
-                    <!--</div>-->
-                  <!--</div>-->
-                  <!--<div class="position-button" @click="goPage('SecureAccess','安全准入')">-->
-                    <!--<div>-->
-                      <!--<img src="@/assets/ZDimages/home/icon_sy_aqjyyks.png">-->
-                      <!--<p>安全准入</p>-->
-                    <!--</div>-->
-                  <!--</div>-->
-                </div>
-                <div class="center-box">
-                  <div class="position-button" @click="goPage('Https://www.sxitdlc.com','数据大屏')">
-                    <div>
-                      <img src="@/assets/ZDimages/home/icon_sydlpt_sjksh.png">
-                      <p>数据可视化</p>
-                    </div>
+    <home-navbar />
+    <div class="max-big-home-box" v-if="userType != 22&&initPage == 'true'">
+      <div class="max-home-button-box">
+        <div class="max-home-box">
+          <div class="max-bottom-box">
+            <div class="top-button-box">
+              <!--左侧-->
+              <div class="left-box">
+                <!--<div class="position-button top-margin" @click="goPage('EmergencyManagement','应急管理')">-->
+                <div class="position-button top-margin" @click="goPage('SafetyEducationExam','安全教育与考试')">
+                  <div>
+                    <img src="@/assets/ZDimages/home/1.png">
+                    <p>安全教育与考试</p>
                   </div>
                 </div>
-                <div class="right-box">
-                  <div class="position-button top-margin" @click="goPage('SecureAccess','安全准入')">
-                    <div>
-                      <img src="@/assets/ZDimages/home/icon_sy_aqzr.png">
-                      <p>安全准入</p>
-                    </div>
-                  </div>
-                  <div class="position-button" @click="goPage('HazardManagement','危险源管理')">
-                    <div>
-                      <img src="@/assets/ZDimages/home/icon_tydlptsy_wxygl.png">
-                      <p>危险源管理</p>
-                    </div>
-                  </div>
-                  <div class="position-button" @click="goPage('SecurityCheck','安全检查')">
-                    <div>
-                      <img src="@/assets/ZDimages/home/icon_sy_aqjc.png">
-                      <p>安全检查</p>
-                    </div>
+                <div class="position-button" @click="goPage('null','责任体系')">
+                  <div>
+                    <img src="@/assets/ZDimages/home/2.png">
+                    <p>责任体系</p>
                   </div>
-                  <!--<div class="position-button top-margin" @click="goPage('HierarchicalControl','分级管控')">-->
-                    <!--<div>-->
-                      <!--<img src="@/assets/ZDimages/home/icon_sy_fjgk.png">-->
-                      <!--<p>分级管控</p>-->
-                    <!--</div>-->
-                  <!--</div>-->
-                  <!--<div class="position-button" @click="goPage('SecurityCheck','安全检查')">-->
-                    <!--<div>-->
-                      <!--<img src="@/assets/ZDimages/home/icon_sy_aqjc.png">-->
-                      <!--<p>安全检查</p>-->
-                    <!--</div>-->
-                  <!--</div>-->
-                  <!--<div class="position-button" @click="goPage('HazardManagement','危险源管理')">-->
-                    <!--<div>-->
-                      <!--<img src="@/assets/ZDimages/home/icon_tydlptsy_wxygl.png">-->
-                      <!--<p>危险源管理</p>-->
-                    <!--</div>-->
-                  <!--</div>-->
                 </div>
-              </div>
-              <div class="center-button-box display-none-one"></div>
-              <div class="bottom-button-box">
-                <div class="null-button"></div>
-                <div class="position-button" @click="goPage('SafetyEducationExam','安全教育与考试')">
+                <!--<div class="position-button" @click="goPage('ChemicalLibrary','化学品管理')">-->
+                <div class="position-button" @click="goPage('SecureAccess','安全准入')">
                   <div>
-                    <img src="@/assets/ZDimages/home/icon_sy_aqyuyks.png">
-                    <p>安全教育与考试</p>
+                    <img src="@/assets/ZDimages/home/3.png">
+                    <p>安全准入</p>
                   </div>
                 </div>
-                <div class="position-button" @click="goPage('CreditViolation','信用管理')">
+              </div>
+              <!--中间-->
+              <div class="center-box">
+                <div class="position-button" @click="goPage('Https://www.sxitdlc.com','数据大屏')">
                   <div>
-                    <img src="@/assets/ZDimages/home/icon_sy_xygl.png">
-                    <p>信用管理</p>
+                    <img src="@/assets/ZDimages/home/icon_sydlpt_sjksh.png">
+                    <p>数据可视化</p>
                   </div>
                 </div>
+              </div>
+              <!--右侧-->
+              <div class="right-box">
                 <div class="position-button" @click="goPage('HierarchicalControl','分级管控')">
+                  <!--<div class="position-button top-margin" @click="goPage('SecureAccess','安全准入')">-->
                   <div>
-                    <img src="@/assets/ZDimages/home/icon_sy_fjgk.png">
+                    <img src="@/assets/ZDimages/home/4.png">
                     <p>分级管控</p>
                   </div>
                 </div>
-                <div class="position-button" @click="goPage('null','安全档案')">
+                <div class="position-button" @click="goPage('SecurityCheck','安全检查')">
                   <div>
-                    <img src="@/assets/ZDimages/home/icon_sy_aqda.png">
-                    <p>安全档案</p>
+                    <img src="@/assets/ZDimages/home/5.png">
+                    <p>安全检查</p>
                   </div>
                 </div>
-                <div class="position-button" @click="goPage('Comprehensive','综合管理')">
+                <div class="position-button" @click="goPage('HazardManagement','危险源管理')">
                   <div>
-                    <img src="@/assets/ZDimages/home/icon_sy_zhgl.png">
-                    <p>综合管理</p>
+                    <img src="@/assets/ZDimages/home/6.png">
+                    <p>危险源管理</p>
                   </div>
                 </div>
-                <!--<div class="position-button" @click="goPage('EmergencyManagement','应急管理')">-->
-                  <!--<div>-->
-                    <!--<img src="@/assets/ZDimages/home/icon_sy_yjgl.png">-->
-                    <!--<p>应急管理</p>-->
-                  <!--</div>-->
-                <!--</div>-->
-                <!--<div class="position-button" @click="goPage('CreditViolation','信用管理')">-->
-                  <!--<div>-->
-                    <!--<img src="@/assets/ZDimages/home/icon_sy_xywg.png">-->
-                    <!--<p>信用管理</p>-->
-                  <!--</div>-->
-                <!--</div>-->
-                <!--<div class="position-button" @click="goPage('null','安全档案')">-->
-                  <!--<div>-->
-                    <!--<img src="@/assets/ZDimages/home/icon_sy_aqda.png">-->
-                    <!--<p>安全档案</p>-->
-                  <!--</div>-->
-                <!--</div>-->
-                <!--<div class="position-button" @click="goPage('Comprehensive','综合管理')">-->
-                  <!--<div>-->
-                    <!--<img src="@/assets/ZDimages/home/icon_sy_zhgl.png">-->
-                    <!--<p>综合管理</p>-->
-                  <!--</div>-->
-                <!--</div>-->
-                <div class="null-button"></div>
               </div>
             </div>
-            <img class="img-1" src="@/assets/ZDimages/home/img_sy_lf.png">
-            <img class="img-2" src="@/assets/ZDimages/home/img_yh_db.png">
-            <img class="img-3" src="@/assets/ZDimages/home/img_yh_zj.png">
-            <img class="img-4" src="@/assets/ZDimages/home/img_yh_dd.png">
-            <img class="img-5" src="@/assets/ZDimages/home/img_yh_zj.png">
-            <img class="img-6" src="@/assets/ZDimages/home/img_yh_db.png">
+            <div class="center-button-box display-none-one"></div>
+            <!--底部-->
+            <div class="bottom-button-box">
+              <div class="null-button"></div>
+              <div class="position-button" @click="goPage('EmergencyManagement','应急管理')">
+                <!--<div class="position-button" @click="goPage('SafetyEducationExam','安全教育与考试')">-->
+                <div>
+                  <img src="@/assets/ZDimages/home/7.png">
+                  <p>应急管理</p>
+                </div>
+              </div>
+              <div class="position-button" @click="goPage('CreditViolation','信用违规管理')">
+                <div>
+                  <img src="@/assets/ZDimages/home/8.png">
+                  <p>信用违规管理</p>
+                </div>
+              </div>
+              <!--<div class="position-button" @click="goPage('HierarchicalControl','分级管控')">-->
+              <!--<div>-->
+              <!--<img src="@/assets/ZDimages/home/icon_sy_fjgk.png">-->
+              <!--<p>分级管控</p>-->
+              <!--</div>-->
+              <!--</div>-->
+              <div class="position-button" @click="goPage('null','安全档案')">
+                <div>
+                  <img src="@/assets/ZDimages/home/9.png">
+                  <p>安全档案</p>
+                </div>
+              </div>
+              <div class="position-button" @click="goPage('Comprehensive','综合管理')">
+                <div>
+                  <img src="@/assets/ZDimages/home/10.png">
+                  <p>综合管理</p>
+                </div>
+              </div>
+              <div class="null-button"></div>
+            </div>
           </div>
+          <img class="img-1" src="@/assets/ZDimages/home/img_sy_lf.png">
+          <img class="img-2" src="@/assets/ZDimages/home/img_yh_db.png">
+          <img class="img-3" src="@/assets/ZDimages/home/img_yh_zj.png">
+          <img class="img-4" src="@/assets/ZDimages/home/img_yh_dd.png">
+          <img class="img-5" src="@/assets/ZDimages/home/img_yh_zj.png">
+          <img class="img-6" src="@/assets/ZDimages/home/img_yh_db.png">
         </div>
       </div>
-      <!--<div class="bottom-null-box"></div>-->
-    <!--</dv-full-screen-container>-->
+    </div>
     <backAnimation v-if="userType != '22'&&initPage == 'true'"></backAnimation>
   </div>
 </template>
@@ -318,39 +262,39 @@
 
 <style scoped lang="scss">
   /*@media screen and (min-height:10px){*/
-    /*.display-none-one{*/
-      /*display: none;*/
-    /*}*/
-    /*.max-bottom-box{*/
-      /*.top-button-box{*/
-        /*.top-margin{*/
-          /*margin-top:20px!important;*/
-        /*}*/
-      /*}*/
-    /*}*/
+  /*.display-none-one{*/
+  /*display: none;*/
+  /*}*/
+  /*.max-bottom-box{*/
+  /*.top-button-box{*/
+  /*.top-margin{*/
+  /*margin-top:20px!important;*/
+  /*}*/
+  /*}*/
+  /*}*/
   /*}*/
   /*@media screen and (min-height:850px){*/
-    /*.max-bottom-box{*/
-      /*.top-button-box{*/
-        /*.top-margin{*/
-          /*margin-top:50px!important;*/
-        /*}*/
-      /*}*/
-    /*}*/
+  /*.max-bottom-box{*/
+  /*.top-button-box{*/
+  /*.top-margin{*/
+  /*margin-top:50px!important;*/
+  /*}*/
+  /*}*/
+  /*}*/
   /*}*/
   /*@media screen and (min-height:900px){*/
-    /*.max-bottom-box{*/
-      /*.top-button-box{*/
-        /*.top-margin{*/
-          /*margin-top:100px!important;*/
-        /*}*/
-      /*}*/
-    /*}*/
+  /*.max-bottom-box{*/
+  /*.top-button-box{*/
+  /*.top-margin{*/
+  /*margin-top:100px!important;*/
+  /*}*/
+  /*}*/
+  /*}*/
   /*}*/
   /*@media screen and (min-height:1000px){*/
-    /*.display-none-one{*/
-      /*display: block!important;*/
-    /*}*/
+  /*.display-none-one{*/
+  /*display: block!important;*/
+  /*}*/
   /*}*/
   @-webkit-keyframes centerButtonMover  {
     0% {
@@ -686,10 +630,10 @@
                   color: transparent;
                 }
               }
+              .position-button:nth-child(1),
               .position-button:nth-child(2),
               .position-button:nth-child(3),
-              .position-button:nth-child(4),
-              .position-button:nth-child(5){
+              .position-button:nth-child(4){
                 margin-right:95px;
               }
             }
@@ -708,4 +652,3 @@
     }
   }
 </style>
-