<template>
|
<div class="indexbox">
|
<div class="top">
|
<h1>{{topTitle}}</h1>
|
</div>
|
<div class="main">
|
<div class="leftMeneBox">
|
<ul>
|
<li>
|
<div class="item" @click="toggleLayout">
|
<img src="../assets/img/document.png" />
|
</div>
|
</li>
|
<li>
|
<div class="item">
|
<img src="../assets/img/document.png" @click="toSysIndex" />
|
</div>
|
</li>
|
<li>
|
<div class="item" title="系统监控">
|
<img src="../assets/img/document.png" @click="tojk" />
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div v-show="layout === 'two-columns'" class="two-columns">
|
<div class="contentTop">
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX概念开发与验证平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX体系设计与评估平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
</div>
|
<div class="contentMid">
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX方案推演与分析平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX创新与XX运用研究平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
</div>
|
<div class="contentBot">
|
<div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
|
<div class="imgL">
|
<img src="../assets/img/index/指挥体系.png" alt />
|
</div>
|
<div class="textBox">
|
<h1>XX综合集成研讨厅</h1>
|
</div>
|
|
<div class="imgR">
|
<img src="../assets/img/index/指挥体系.png" alt />
|
</div>
|
</div>
|
<div class="fxtTitle">
|
<h2>支撑分系统</h2>
|
</div>
|
<div class="right-content">
|
<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-show="layout === 'three-columns'" class="three-columns">
|
<div class="infoBox">
|
<mainIfo></mainIfo>
|
</div>
|
<div class="mainBox">
|
<div class="contentTop">
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX概念开发与验证平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX体系设计与评估平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
</div>
|
<div class="contentMid">
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX方案推演与分析平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
<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 />
|
</div>
|
<div class="textBox">
|
<h1>XX创新与XX运用研究平台</h1>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/icon.png" alt />
|
</div>
|
</div>
|
</div>
|
<div class="contentBot">
|
<div class="left-content wh1" @click="jumpTo('XX综合集成研讨厅')">
|
<div class="textBox">
|
<h1>XX综合集成研讨厅</h1>
|
</div>
|
<div class="imgBox">
|
<div class="imgL">
|
<img src="../assets/img/index/指挥体系.png" alt />
|
</div>
|
<div class="imgR">
|
<img src="../assets/img/index/指挥体系.png" alt />
|
</div>
|
</div>
|
</div>
|
<div class="fxtTitle">
|
<h2>支撑分系统</h2>
|
</div>
|
<div class="right-content">
|
<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>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
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 },
|
data() {
|
return {
|
topTitle: "XX实验条件建设",
|
layout: "two-columns",
|
size: "100%",
|
scale: "1",
|
offset: "0%",
|
tooltipInfo: "请稍后。。。",
|
tooltipShow: false,
|
mesList: [
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "态势显示分系统"
|
},
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "数据管理分系统"
|
},
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "装备库"
|
},
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "仿真资源管理分系统"
|
},
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "工具箱"
|
}
|
],
|
mesList2: [
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "态势显示分系统"
|
},
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "数据管理分系统"
|
},
|
{
|
src: require("@/assets/img/index/lm2.png"),
|
name: "仿真资源管理分系统"
|
}
|
]
|
};
|
},
|
|
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>
|
<style lang="less" scoped>
|
@font-face {
|
font-family: "AdobeHeitiStd-Regular";
|
src: url("../assets/fonts/QingNiaoHuaGuangJianMeiHei-2.ttf");
|
}
|
* {
|
box-sizing: border-box;
|
}
|
.indexbox {
|
margin: 0 auto;
|
width: 100%;
|
height: 100%;
|
background-color: #fff;
|
background: url("../assets/img//index/bg.jpg") center center/cover no-repeat;
|
}
|
.top {
|
width: 100%;
|
height: 100px;
|
color: #fff;
|
background: url("../assets/img//index/logo.gif") center center/contain
|
no-repeat;
|
// background-color: #bfa;
|
|
h1 {
|
font-size: 50px;
|
position: absolute;
|
width: 52rem;
|
text-align: center;
|
left: 50%;
|
top: 15px;
|
transform: translateX(-50%);
|
}
|
}
|
.main {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
height: calc(100% - 120px);
|
.leftMeneBox {
|
width: 60px;
|
height: 100%;
|
margin-left: 10px;
|
margin-top: 10px;
|
.item {
|
margin-top: 10px;
|
position: relative;
|
display: block;
|
color: white !important;
|
width: 64px;
|
height: 64px;
|
font-size: 36px;
|
text-align: center;
|
line-height: 66px;
|
border-radius: 10%;
|
// background: #2c3a47;
|
// transition: 0.6s;
|
img {
|
width: 90%;
|
}
|
}
|
.item:hover {
|
-webkit-box-shadow: 0 0 20px 6px rgba(76, 201, 240, 1);
|
-moz-box-shadow: 0 0 20px 6px rgba(76, 201, 240, 1);
|
box-shadow: 0 0 20px 6px rgba(76, 201, 240, 1);
|
transition: 0.6s;
|
}
|
}
|
}
|
.two-columns {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-evenly;
|
flex-direction: column;
|
align-items: center;
|
overflow: auto;
|
.contentTop,
|
.contentMid,
|
.contentBot {
|
width: 1800px;
|
height: 300px;
|
// background-color: #bfa;
|
margin: 0 auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
}
|
.contentTop {
|
.left-content,
|
.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%;
|
}
|
}
|
}
|
}
|
.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%;
|
}
|
}
|
}
|
.contentBot {
|
position: relative;
|
.left-content {
|
width: 40%;
|
height: 80%;
|
background: url("../assets/img/index//boxBg.png") center center/100% 100%
|
no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
box-sizing: border-box;
|
.textBox {
|
width: 50%;
|
// padding-top: 18px;
|
height: 25%;
|
font-size: 18px;
|
color: #fff;
|
text-align: center;
|
}
|
.imgL {
|
width: 150px;
|
height: 150px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.imgR {
|
width: 150px;
|
height: 150px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.fxtTitle {
|
position: absolute;
|
top: 50px;
|
left: 51.5%;
|
color: #fff;
|
h2 {
|
font-size: 28px;
|
width: 1em;
|
}
|
}
|
.right-content {
|
width: 40%;
|
height: 80%;
|
background: url("../assets/img/index//boxBg.png") center center/100% 100%
|
no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
box-sizing: border-box;
|
padding-left: 10px;
|
.industryMes {
|
width: 18%;
|
height: 70%;
|
// background-color: #bfa;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
// justify-content: ;
|
.topImg {
|
// background-color: red;
|
display: block;
|
width: 70%;
|
// height: 66px;
|
}
|
.topMes {
|
font-size: 20px;
|
color: #fff;
|
width: 6em;
|
// background-color: yellow;
|
text-align: center;
|
}
|
}
|
}
|
}
|
.wh1,
|
.wh2 {
|
transition: all 100ms linear;
|
}
|
.wh1:hover {
|
transform: scale(1.05);
|
transition: all 100ms linear;
|
background: url("../assets/img/index//hover.png") center center/100% 100%
|
no-repeat;
|
}
|
.wh2:hover {
|
transform: scale(1.05);
|
transition: all 10ms linear;
|
.topMes {
|
color: #00aeff !important;
|
}
|
}
|
}
|
.three-columns {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
justify-content: space-around;
|
overflow: auto;
|
.infoBox {
|
width: 26%;
|
height: 100%;
|
// background-color: #bfa;
|
}
|
.mainBox {
|
display: flex;
|
justify-content: space-evenly;
|
flex-direction: column;
|
align-items: center;
|
// background-color: #bfa;
|
width: 74%;
|
height: 100%;
|
.contentTop,
|
.contentMid,
|
.contentBot {
|
width: 100%;
|
height: 300px;
|
// background-color: #bfa;
|
margin: 0 auto;
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
}
|
.contentTop,
|
.contentMid {
|
.left-content,
|
.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%;
|
}
|
}
|
}
|
}
|
.contentBot {
|
position: relative;
|
.left-content {
|
width: 40%;
|
height: 80%;
|
background: url("../assets/img/index//boxBg.png") center center/100%
|
100% no-repeat;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: space-around;
|
box-sizing: border-box;
|
.textBox {
|
width: 100%;
|
padding-top: 18px;
|
height: 25%;
|
font-size: 20px;
|
// background-color: red;
|
color: #fff;
|
text-align: center;
|
}
|
.imgBox {
|
width: 70%;
|
height: 75%;
|
// background-color: #bfa;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.imgL {
|
width: 180px;
|
height: 180px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.imgR {
|
width: 180px;
|
height: 180px;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
.fxtTitle {
|
position: absolute;
|
top: 50px;
|
left: 51%;
|
color: #fff;
|
h2 {
|
font-size: 28px;
|
width: 1em;
|
}
|
}
|
.right-content {
|
width: 40%;
|
height: 80%;
|
background: url("../assets/img/index//boxBg.png") center center/100%
|
100% no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: space-evenly;
|
box-sizing: border-box;
|
padding-left: 10px;
|
.industryMes {
|
width: 18%;
|
height: 70%;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
.topImg {
|
display: block;
|
width: 70%;
|
}
|
.topMes {
|
font-size: 20px;
|
color: #fff;
|
width: 6em;
|
text-align: center;
|
}
|
}
|
}
|
}
|
.wh1,
|
.wh2 {
|
transition: all 100ms linear;
|
}
|
.wh1:hover {
|
transform: scale(1.05);
|
transition: all 100ms linear;
|
background: url("../assets/img/index//hover.png") center center/100% 100%
|
no-repeat;
|
}
|
.wh2:hover {
|
transform: scale(1.05);
|
transition: all 10ms linear;
|
.topMes {
|
color: #00aeff !important;
|
}
|
}
|
}
|
}
|
</style>
|
