| | |
| | | </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 /> |
| | |
| | | <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 /> |
| | |
| | | </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 /> |
| | |
| | | <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 /> |
| | |
| | | </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> |
| | |
| | | <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 v-show="layout === 'three-columns'" class="three-columns"> |
| | | <div class="infoBox"> |
| | | <!-- <mainIfo></mainIfo> --> |
| | | <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 /> |
| | |
| | | <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 /> |
| | |
| | | </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 /> |
| | |
| | | <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 /> |
| | |
| | | </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> |
| | |
| | | <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> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | // import mainIfo from './mainIfo.vue'; |
| | | import mainIfo from "./mainIfo.vue"; |
| | | export default { |
| | | name: "index", |
| | | |
| | | // components: { mainIfo }, |
| | | components: { mainIfo }, |
| | | data() { |
| | | return { |
| | | topTitle: "XX实验条件建设", |
| | |
| | | this.layout = |
| | | this.layout === "three-columns" ? "two-columns" : "three-columns"; |
| | | }, |
| | | |
| | | 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> |
| | |
| | | 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% |
| | |
| | | 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%; |
| | | } |
| | | } |
| | | } |
| | |
| | | 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, |
| | |
| | | .fxtTitle { |
| | | position: absolute; |
| | | top: 50px; |
| | | left: 51.5%; |
| | | left: 51%; |
| | | color: #fff; |
| | | h2 { |
| | | font-size: 28px; |