fix:分区页

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">
-          中和地信有限公司欢迎您！
-      </div>
-
+      <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>
-       
       </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">
-        <ul>
-          <li
-            v-for="(item, index) in dataList"
-            :key="index"
-            @click="navTo(item.label)"
-          >
-            <div class="itemDiv">
-              <img
-                :src="require(`@/assets/home4Index/icon${index + 1}.png`)"
-                alt=""
-              />
-              <p>
-                <span>{{ item.label }}</span>
-                <img src="@/assets/home4Index/underline2.png" />
-              </p>
-            </div>
-          </li>
-        </ul>
+        <div class="inner-div">
+          <ul>
+            <li
+              v-for="(item, index) in dataList"
+              :key="index"
+              @click="navTo(item.name)"
+              @mouseover="item.hover = true"
+              @mouseleave="item.hover = false"
+            >
+              <div class="itemDiv">
+                <img
+                  :src="require(`@/assets/home4Index/${item.hover ? item.actIcon : item.defIcon}`)"
+                  alt=""
+                />
+                <p>
+                  <span>{{ item.name }}</span>
+                </p>
+              </div>
+            </li>
+
+          </ul>
+        </div>
+       
       </div>
     </div>
     <div class="bottomTitle">@中和地信有限公司</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;
-    }
+    position: absolute;
+    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;
-  height: 100%;
-  background-size: cover;
+  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%;
+    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>

src/views/home4Index0920.vue

+<template>
+  <div class="login" :style="'background-image:url(' + Background + ');'">
+    <div class="topTitle" :style="'background-image:url(' + Title + ');'">
+      中和地信企业管理平台
+    
+    </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">
+          中和地信有限公司欢迎您！
+      </div>
+
+        </div>
+       
+      </h2>
+      <h2 @click="navTo('admin')" style="cursor: pointer;">
+        <img src="@/assets/home4Index/icon6.png" />管理后台
+      </h2>
+    </div>
+    <div class="wrapper">
+      <div class="content">
+        <ul>
+          <li
+            v-for="(item, index) in dataList"
+            :key="index"
+            @click="navTo(item.label)"
+          >
+            <div class="itemDiv">
+              <img
+                :src="require(`@/assets/home4Index/icon${index + 1}.png`)"
+                alt=""
+              />
+              <p>
+                <span>{{ item.label }}</span>
+                <img src="@/assets/home4Index/underline2.png" />
+              </p>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="bottomTitle">@中和地信有限公司</div>
+  </div>
+</template>
+
+<script>
+import qs from "qs";
+import Background from "@/assets/home4Index/bg.png";
+import Title from "@/assets/home4Index/title.png";
+import Welcome from "@/assets/home4Index/underline.png";
+
+import { mapGetters } from "vuex";
+import menuApi from "@/api/system/menu.js";
+export default {
+  name: "Login",
+  data() {
+    return {
+      show: false,
+      userStyle: null,
+      Background: Background,
+      Welcome,
+      Title,
+      codeUrl: "",
+      cookiePass: "",
+      loading: false,
+      redirect: undefined,
+      dataList: [],
+    };
+  },
+  computed: {
+    ...mapGetters(["user"]),
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        const data = route.query;
+        if (data && data.redirect) {
+          this.redirect = data.redirect;
+          delete data.redirect;
+          if (JSON.stringify(data) !== "{}") {
+            this.redirect =
+              this.redirect + "&" + qs.stringify(data, { indices: false });
+          }
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    // // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
+    // const host = window.location.host;
+    // if (host === "yingji.longxijiancai.com") {
+    //   this.userStyle = "应急局";
+    // }
+    // if (host === "qiye.longxijiancai.com") {
+    //   this.userStyle = "企业";
+    // }
+    menuApi.getMenusHome().then((res) => {
+      this.dataList = res.body;
+    });
+  },
+  methods: {
+    navTo(type) {
+      var host = location.protocol + "//" + window.location.host;
+      if (type === "admin") {
+        // 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" });
+        // location.href = 'http://192.168.3.226:8057/datav/index.html'
+        location.href = host + "/datav/index.html";
+      } else if (type === "自然资源") {
+        // location.href = process.env.NODE_ENV + ''
+        // location.href = 'http://192.168.3.226:8057/datav/natural.html'
+        location.href = host + "/datav/natural.html";
+      } else if (type === "水利资源") {
+        // location.href = 'http://192.168.3.226:8057/datav/watersource.html'
+        location.href = host + "/datav/watersource.html";
+      } else if (type === "电子档案馆") {
+        // this.$router.push({ path: "home4Center" });
+        this.$router.push({ path: "/user/center" });
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+@keyframes floatShadow {
+  0% {
+    transform: translateX(280px);
+    display: block;
+  }
+  100% {
+    transform: translateX(-300px);
+    display: none;
+  }
+}
+
+.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;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+  justify-content: space-between;
+  position: absolute;
+  top: 10px;
+  width: 100%;
+  /* z-index: 99999; */
+  height: 110px;
+  color: #fff;
+  font-size: 12px;
+  padding: 10px 43px;
+  align-items: center;
+  h2 {
+    display: inline-block;
+    vertical-align: middle;
+    letter-spacing: 2px;
+    font-weight: 600;
+    color: #fdfdfd;
+    &:first-child {
+      height: 50px;
+      background-repeat: no-repeat;
+      background-position-y: 30px;
+    }
+  }
+  img {
+    vertical-align: middle;
+    margin-right: 10px;
+  }
+}
+.topTitle {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  color: #fff;
+  text-align: center;
+  background-size: cover;
+  height: 100px;
+  font-size: 38px;
+  line-height: 100px;
+  font-weight: bold;
+  letter-spacing: 5px;
+}
+.bottomTitle {
+  position: absolute;
+  bottom: 0;
+  background: #021d39;
+  height: 32px;
+  width: 100%;
+  line-height: 32px;
+  color: #fff;
+  text-align: center;
+}
+.wrapper {
+  .header {
+    h2 {
+      color: #00346b;
+      text-align: right;
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      cursor: pointer;
+    }
+  }
+  h1 {
+    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;
+  & > img {
+    width: 120px;
+    margin-left: 20px;
+  }
+  p {
+    width: 180px;
+    margin-top: -10px;
+    position: relative;
+    span {
+      font-weight: 500;
+      letter-spacing: 3px;
+    }
+    img {
+      position: absolute;
+      bottom: 45px;
+      right: 15px;
+    }
+  }
+}
+
+.login {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+}
+</style>