中间页

src/views/home4Index.vue

+<template>
+  <div class="login" :style="'background-image:url(' + Background + ');'">
+    <div class="topTitle">中和地信有限公司欢迎您！</div>
+    <div class="bottomTitle">@中和地信有限公司</div>
+    <div class="wrapper">
+      <div class="header">
+        <h2 @click="navTo('admin')"><i class="el-icon-setting"></i>管理后台</h2>
+      </div>
+      <div class="title">
+        <h1>中和地信应急平台</h1>
+      </div>
+      <div class="content">
+        <ul>
+          <li>应急管理</li>
+          <li>自然资源</li>
+          <li>水利系统</li>
+          <li>电子档案馆</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import qs from "qs";
+import Background from "@/assets/images/background.webp";
+import { mapGetters } from "vuex";
+export default {
+  name: "Login",
+  data() {
+    return {
+      show: false,
+      userStyle: null,
+      Background: Background,
+      codeUrl: "",
+      cookiePass: "",
+      loading: false,
+      redirect: undefined,
+    };
+  },
+  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() {
+    /**
+       * 矿产信息固定值
+       
+       */
+    localStorage.setItem(
+      "kd.selected.mine",
+      JSON.stringify({
+        address: "测试地址",
+        code: "1452562",
+        enterpriseId: 1,
+        hasEnable: true,
+        id: 1,
+        latitude: "37.05",
+        liablePerson: "人员",
+        liablePersonPhone: "15455248718",
+        longitude: "117.74",
+        mineType: 1,
+        name: "测试地下矿山",
+        runState: null,
+      })
+    );
+
+    // 按照不同域名加载不同页面样式（企业、应急局），加载完毕后再显示页面
+    const host = window.location.host;
+    if (host === "yingji.longxijiancai.com") {
+      this.userStyle = "应急局";
+    }
+    if (host === "qiye.longxijiancai.com") {
+      this.userStyle = "企业";
+    }
+  },
+  methods: {
+    navTo(type) {
+      if (type === "admin") {
+        this.$router.push({ path: "home4Center" });
+      }
+    },
+  },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss">
+.topTitle {
+  position: absolute;
+  top: 0;
+  background: #15181a73;
+  height: 32px;
+  width: 100%;
+  line-height: 32px;
+  color: #fff;
+  text-align: center;
+}
+.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: 900px;
+    overflow: hidden;
+  }
+  li {
+    float: left;
+    width: 400px;
+    background: #173e67;
+    height: 170px;
+    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;
+    }
+  }
+}
+.login {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-size: cover;
+}
+</style>