Merge branch 'master' of http://h.gemho.cn:7099/18963165066/ziboyingji

public/datav/index.html

@@ -900,9 +900,9 @@
     const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.3.37' : '192.168.13.200') + ':8013';
 
 	// 小黄
-	//const host = location.protocol + '//' + (location.hostname === '192.168.3.226' ? '192.168.2.200' : '192.168.13.200') + ':8013';
+	//const host = location.protocol + '//' + (location.hostname === '192.168.3.38' ? '192.168.2.200' : '192.168.13.200') + ':8013';
 
-	const selfHost = location.hostname === '192.168.3.226' ? 'http://192.168.3.226:8057' : location.protocol + '//' + window.location.host;
+	const selfHost = location.hostname === '192.168.3.38' ? 'http://192.168.3.38:8057' : location.protocol + '//' + window.location.host;
 
     const token = Cookies.get('ELADMIN-TOEKN');
     axios = axios.create({

src/views/home4Index.vue

 <template>
   <div class="login" :style="'background-image:url(' + Background + ');'">
     <div class="topTitle" :style="'background-image:url(' + Title + ');'">
-      中和地信企业管理平台
+      <div>中和地信企业管理平台</div>
     
     </div>
     <div class="subTopTitle">
-      <h2 :style="'background-image:url(' + Welcome + ');'">
-        <img src="@/assets/home4Index/icon5.png" />
-        <div class="wrapper" style="    position: absolute;
-    top: 38px;
-    left: 86px;
-    width: 300px;
-    padding-left: 20px;
-    overflow: hidden;
-"> <div class="floating-text">
+      <h2 class="left-title" style="display: flex;align-items: center;">
+        <img src="@/assets/home4Index/logo.png" width="25" height="25"/>
+        <div class="floating-text">
             中和地信有限公司欢迎您！
         </div>
-
-        </div>
-       
       </h2>
       <h2 @click="navTo('admin')" style="cursor: pointer;">
-        <img src="@/assets/home4Index/icon6.png" />管理后台
+        <img src="@/assets/home4Index/icon.png" />管理后台
       </h2>
     </div>
     <div class="wrapper">
       <div class="content">
+        <div class="inner-div">
           <ul>
             <li
               v-for="(item, index) in dataList"
               :key="index"
-            @click="navTo(item.label)"
+              @click="navTo(item.name)"
+              @mouseover="item.hover = true"
+              @mouseleave="item.hover = false"
             >
               <div class="itemDiv">
                 <img
-                :src="require(`@/assets/home4Index/icon${index + 1}.png`)"
+                  :src="require(`@/assets/home4Index/${item.hover ? item.actIcon : item.defIcon}`)"
                   alt=""
                 />
                 <p>
-                <span>{{ item.label }}</span>
-                <img src="@/assets/home4Index/underline2.png" />
+                  <span>{{ item.name }}</span>
                 </p>
               </div>
             </li>
+
           </ul>
         </div>
+       
+      </div>
     </div>
     <div class="bottomTitle">@中和地信有限公司</div>
   </div>
@@ -52,8 +48,9 @@
 
 <script>
 import qs from "qs";
-import Background from "@/assets/home4Index/bg.png";
+import Background from "@/assets/home4Index/newbg.gif";
 import Title from "@/assets/home4Index/title.png";
+import bgout from "@/assets/home4Index/bg.png";
 import Welcome from "@/assets/home4Index/underline.png";
 
 import { mapGetters } from "vuex";
@@ -94,6 +91,13 @@ export default {
     },
   },
   created() {
+    this.dataList = [
+      {id:1, name:'应急管理', defIcon:'icon1.png', actIcon:'icon2.png', hover: false},
+      {id:2, name:'电子档案馆', defIcon:'icon9.png', actIcon:'icon10.png', hover: false},
+      {id:3, name:'自然资源', defIcon:'icon3.png', actIcon:'icon4.png', hover: false},
+      {id:4, name:'水利系统', defIcon:'icon7.png', actIcon:'icon8.png', hover: false},
+      {id:5, name:'生态环境', defIcon:'icon5.png', actIcon:'icon6.png', hover: false},
+    ]
     // // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
     // const host = window.location.host;
     // if (host === "yingji.longxijiancai.com") {
@@ -102,9 +106,9 @@ export default {
     // if (host === "qiye.longxijiancai.com") {
     //   this.userStyle = "企业";
     // }
-    menuApi.getMenusHome().then((res) => {
-      this.dataList = res.body;
-    });
+    // menuApi.getMenusHome().then((res) => {
+    //   this.dataList = res.body;
+    // });
   },
   methods: {
     navTo(type) {
@@ -128,6 +132,9 @@ export default {
       } else if (type === "电子档案馆") {
         // this.$router.push({ path: "home4Center" });
         this.$router.push({ path: "/user/center" });
+      }else if (type === "生态环境") {
+        // this.$router.push({ path: "home4Center" });
+        // this.$router.push({ path: "/user/center" });
       }
     },
   },
@@ -146,19 +153,6 @@ export default {
   }
 }
 
-.floating-text {
-  font-size: 18px;
-  line-height: 1;
-  color: #fff;
-  text-shadow: 0 0 5px #fff;
-  animation: floatShadow;
-  animation-name: floatShadow;
-  animation-duration: 10s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  // position: absolute;
-  // top: 38px;
-}
 
 .subTopTitle {
   display: -webkit-box;
@@ -170,7 +164,7 @@ export default {
   top: 10px;
   width: 100%;
   /* z-index: 99999; */
-  height: 110px;
+  height: 50px;
   color: #fff;
   font-size: 12px;
   padding: 10px 43px;
@@ -196,7 +190,6 @@ export default {
   position: absolute;
   top: 0;
   width: 100%;
-  color: #fff;
   text-align: center;
   background-size: cover;
   height: 100px;
@@ -204,6 +197,26 @@ export default {
   line-height: 100px;
   font-weight: bold;
   letter-spacing: 5px;
+  font-size: 45px;
+  >div{
+    position: relative;
+    color: #FFFFFF;
+    text-shadow: 0px 6px 16px rgba(3,23,39,0.3);
+    background: linear-gradient(0deg, #91DEFF 0%, #FFFFFF 71.3134765625%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    &::after{
+      content: "";
+      position: absolute;
+      left: 30%;
+      top: 83px;
+      z-index: 2;
+      width: 771px;
+      height: 346px;
+      display: block;
+      background: url("../assets/home4Index/Photoeffect.png");
+    }
+  }
 }
 .bottomTitle {
   position: absolute;
@@ -216,6 +229,7 @@ export default {
   text-align: center;
 }
 .wrapper {
+  
   .header {
     h2 {
       color: #00346b;
@@ -230,70 +244,95 @@ export default {
     text-align: center;
     color: #00346b;
   }
-  ul {
-    list-style: none;
-    // width: 1200px;
-    overflow: hidden;
-  }
-  li {
-    display: flex;
-    justify-content: center;
-    float: left;
-    width: 304px;
-    // background: #173e67;
-    height: 620px;
-    line-height: 170px;
-    text-align: center;
-    color: #fff;
-    font-size: 28px;
-    font-weight: bold;
-    margin: 10px;
-    cursor: pointer;
-    &:nth-child(1) {
-      // background: #135965;
-    }
-    &:nth-child(4) {
-      // background: #135965;
-    }
-    &:hover {
-      background-image: url("../assets/home4Index/bg2.png");
-    }
-    background-image: url("../assets/home4Index/bg1.png");
-    background-repeat: no-repeat;
-    background-size: cover;
-  }
 }
 .itemDiv {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  position: relative;
+  cursor: pointer;
   & > img {
-    width: 120px;
-    margin-left: 20px;
+    width: 207px;
+    height: 237px;
   }
   p {
-    width: 180px;
-    margin-top: -10px;
-    position: relative;
-    span {
-      font-weight: 500;
-      letter-spacing: 3px;
-    }
-    img {
     position: absolute;
-      bottom: 45px;
-      right: 15px;
-    }
+    bottom:20px;
+    font-weight: bold;
+    font-size: 28px;
+    color: #FFFFFF;
   }
 }
 
 .login {
   position: relative;
+ 
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100%;
+  overflow: hidden;
+}
+.content{
+  width: 100vw;
+  height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  background: url("../assets/home4Index/bg.png") no-repeat;
+  background-size: 100%;
+  background-position: 0 0;
+}
+.inner-div {
+  width: 40%;
+  height: 70%;
+  // background-color: rgba(76, 175, 80, .5); 
+  ul{
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    width: 100%;
     height: 100%;
-  background-size: cover;
+    position: relative;
+    li{
+      position: absolute;
+      z-index: 4;
+    }
+    >li:nth-child(1){
+      left: -9%;
+      top: 36%;
+    }
+    >li:nth-child(2){
+      right: -9%;
+      top: 36%;
+    }
+    >li:nth-child(3){
+      left: -22%;
+      top: 74%;
+    }
+    >li:nth-child(4){
+      right: -22%;
+      top: 74%;
+    }
+    >li:nth-child(5){
+      left: 36%;
+      top: 80%;
+    }
+  }
+}
+.left-title{
+  position: relative;
+  &::after{
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 2;
+    width: 400px;
+    height: 1px;
+    background: linear-gradient(90deg, #22DCFD 0%, #22DCFD 0%, rgba(34, 220, 253,.5) 54%, rgba(34, 220, 253,0) 100%);
+    border-image: linear-gradient(0deg, #22DCFD, #22DCFD, rgba(34, 220, 253,0), #22DCFD) 10 10;
+  }
 }
 </style>