代码更新

lixuliang

2024-11-22 879a3501a8ab9767a59458ad8c337f6c25e2e7c4

 src/components/index.vue

@@ -8,29 +8,24 @@
        <ul>
          <li>
            <div class="item" @click="toggleLayout">
              <img src="../assets/img/left/analyse4.png" alt />
              <img src="../assets/img/document.png" />
            </div>
          </li>
          <li>
            <div class="item">
              <img src="../assets/img/left/analyse4.png" alt />
              <img src="../assets/img/document.png" @click="toSysIndex" />
            </div>
          </li>
          <li>
            <div class="item">
              <img src="../assets/img/left/analyse4.png" alt />
            </div>
          </li>
          <li>
            <div class="item">
              <img src="../assets/img/left/analyse4.png" alt />
            <div class="item" title="系统监控">
              <img src="../assets/img/document.png" @click="tojk" />
            </div>
          </li>
        </ul>
      </div>
      <div v-if="layout === 'two-columns'" class="two-columns">
      <div v-show="layout === 'two-columns'" class="two-columns">
        <div class="contentTop">
          <div class="left-content wh1">
          <div class="left-content wh1" @click="jumpTo('XX概念开发与验证平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/1.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -42,7 +37,7 @@
              <img src="../assets/img/index/icon.png" alt />
            </div>
          </div>
          <div class="right-content wh1">
          <div class="right-content wh1" @click="jumpTo('XX体系设计与评估平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/2.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -56,7 +51,7 @@
          </div>
        </div>
        <div class="contentMid">
          <div class="left-content wh1">
          <div class="left-content wh1" @click="jumpTo('XX方案推演与分析平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/3.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -68,7 +63,7 @@
              <img src="../assets/img/index/icon.png" alt />
            </div>
          </div>
          <div class="right-content wh1">
          <div class="right-content wh1" @click="jumpTo('XX创新与XX运用研究平台')">
            <div class="leftTopBox">
              <img src="../assets/img/index/4.png" alt />
              <img src="../assets/img/index/右双箭头.png" alt />
@@ -82,7 +77,7 @@
          </div>
        </div>
        <div class="contentBot">
          <div class="left-content wh1">
          <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
            <div class="imgL">
              <img src="../assets/img/index/指挥体系.png" alt />
            </div>
@@ -98,20 +93,25 @@
            <h2>支撑分系统</h2>
          </div>
          <div class="right-content">
            <div class="industryMes wh2" v-for="(item, index) in mesList" :key="index">
            <div
              class="industryMes wh2"
              v-for="(item, index) in mesList"
              :key="index"
              @click="jumpTo(item.name)"
            >
              <img :src="item.src" class="topImg" alt />
              <h3 class="topMes">{{ item.name }}</h3>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="three-columns">
        <div class="infoBox"> 
           <!-- <mainIfo></mainIfo> -->
           </div>
      <div v-show="layout === 'three-columns'" class="three-columns">
        <div class="infoBox">
          <mainIfo></mainIfo>
        </div>
        <div class="mainBox">
          <div class="contentTop">
            <div class="left-content wh1">
            <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/1.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -123,7 +123,7 @@
                <img src="../assets/img/index/icon.png" alt />
              </div>
            </div>
            <div class="right-content wh1">
            <div class="right-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/2.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -137,7 +137,7 @@
            </div>
          </div>
          <div class="contentMid">
            <div class="left-content wh1">
            <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/3.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -149,7 +149,7 @@
                <img src="../assets/img/index/icon.png" alt />
              </div>
            </div>
            <div class="right-content wh1">
            <div class="right-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="leftTopBox">
                <img src="../assets/img/index/4.png" alt />
                <img src="../assets/img/index/右双箭头.png" alt />
@@ -163,7 +163,7 @@
            </div>
          </div>
          <div class="contentBot">
            <div class="left-content wh1">
            <div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
              <div class="textBox">
                <h1>XX综合集成研讨厅</h1>
              </div>
@@ -180,7 +180,12 @@
              <h2>支撑分系统</h2>
            </div>
            <div class="right-content">
              <div class="industryMes wh2" v-for="(item, index) in mesList2" :key="index">
              <div
                class="industryMes wh2"
                v-for="(item, index) in mesList2"
                :key="index"
                @click="jumpTo(item.name)"
              >
                <img :src="item.src" class="topImg" alt />
                <h3 class="topMes">{{ item.name }}</h3>
              </div>
@@ -193,11 +198,14 @@
</template>

<script>
// import mainIfo from './mainIfo.vue';
import mainIfo from "./mainIfo.vue";
import URLconfig from "../../static/URLconfig";
import { getToken } from "@/utils/auth";
import { Notification, MessageBox, Message, Loading } from "element-ui";

export default {
  name: "index",

//  components: { mainIfo },
  components: { mainIfo },
  data() {
    return {
      topTitle: "XX实验条件建设",
@@ -245,13 +253,74 @@
      ]
    };
  },
 

  methods: {
    checkToken(url) {
      if (!getToken()) {
        Message({
          message: "无效的会话，或者会话已过期，请重新登录。",
          type: "error"
        });
        setTimeout(() => {
          // 跳转到登录页
          window.location.href = URLconfig.origin + URLconfig.loginUrl;
        }, 3000);
      } else {
        window.open(url);
      }
    },
    toggleLayout() {
      this.layout =
        this.layout === "three-columns" ? "two-columns" : "three-columns";
    },
   
    toSysIndex() {
      // 检查token，跳到后台系统
      this.checkToken("http://localhost:8081" + URLconfig.adminUrl); // http://192.168.11.203:8090/sys/system/user
      // this.checkToken(URLconfig.origin + URLconfig.adminUrl); // http://192.168.11.203:8090/sys/system/user
      // console.log(URLconfig.origin + URLconfig.adminUrl);
      // console.log(URLconfig.origin);
    },
    tojk() {},
    jumpTo(name) {
      switch (name) {
        case "XX概念开发与验证平台":
          console.log(name);
          // window.open("");
          break;
        case "XX体系设计与评估平台":
          console.log(name);
          // window.open("");
          break;
        case "XX方案推演与分析平台":
          console.log(name);
          // window.open("");
          break;
        case "XX创新与XX运用研究平台":
          // window.open("");
          console.log(name);
          break;
        case "XX综合集成研讨厅":
          // window.open("");
          console.log(name);
          break;
        case "态势显示分系统":
          // window.open("");
          console.log(name);
          break;
        case "数据管理分系统":
          // window.open("");
          console.log(name);
          break;
        case "装备库":
          // window.open("");
          console.log(name);
          break;
        case "仿真资源管理分系统":
          // window.open("");
          console.log(name);
          break;
      }
    }
  }
};
</script>
@@ -342,8 +411,7 @@
    align-items: center;
    justify-content: space-evenly;
  }
  .contentTop,
  .contentMid {
  .contentTop {
    .left-content,
    .right-content {
      background: url("../assets/img/index//boxBg.png") center center/100% 100%
@@ -389,6 +457,99 @@
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .contentMid .left-content {
    background: url("../assets/img/index//boxBg.png") center center/100% 100%
      no-repeat;
    padding: 30px;
    height: 90%;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    position: relative;
    .leftTopBox {
      position: absolute;
      top: 20px;
      left: 40px;
      width: 100px;
      height: 30px;
      background: url("../assets/img/index//arrow.png") center center/100% 100%
        no-repeat;
      display: flex;
      justify-content: space-around;
      img {
        display: block;
        height: 100%;
      }
    }
    .textBox {
      // background-color: #fff;

      h1 {
        font-size: 42px;
        width: 6em;
        font-family: AdobeHeitiStd-Regular;
        color: #fff;
      }
    }
    .imgBox {
      width: 180px;
      height: 180px;
      // background-color: #bfa;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .contentMid .right-content {
    background: url("../assets/img/index//boxBg.png") center center/100% 100%
      no-repeat;
    padding: 30px;
    height: 90%;
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    position: relative;
    .leftTopBox {
      position: absolute;
      top: 20px;
      left: 40px;
      width: 100px;
      height: 30px;
      background: url("../assets/img/index//arrow.png") center center/100% 100%
        no-repeat;
      display: flex;
      justify-content: space-around;
      img {
        display: block;
        height: 100%;
      }
    }
    .textBox {
      // background-color: #fff;

      h1 {
        font-size: 42px;
        width: 6em;
        font-family: AdobeHeitiStd-Regular;
        color: #fff;
      }
    }
    .imgBox {
      width: 180px;
      height: 180px;
      // background-color: #bfa;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
@@ -497,10 +658,17 @@
  justify-content: space-around;
  overflow: auto;
  .infoBox {
    width: 25%;
    width: 26%;
    height: 100%;
    // background-color: #bfa;
  }
  .mainBox {
    width: 70%;
    display: flex;
    justify-content: space-evenly;
    flex-direction: column;
    align-items: center;
    // background-color: #bfa;
    width: 74%;
    height: 100%;
    .contentTop,
    .contentMid,
@@ -612,7 +780,7 @@
      .fxtTitle {
        position: absolute;
        top: 50px;
        left: 51.5%;
        left: 51%;
        color: #fff;
        h2 {
          font-size: 28px;