<template>
|
<div class="indexbox">
|
<div class="top">
|
<h1>标题是涉密八个字</h1>
|
</div>
|
<!-- <button @click="toggleLayout">aaa</button> -->
|
<div v-if="layout === 'two-columns'" class="two-columns">
|
<el-row :gutter="50">
|
<el-col :span="12">
|
<div class="left-content">
|
<div class="textBox">
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/lt2.png" alt />
|
</div>
|
</div>
|
<div class="left-content">
|
<div class="textBox">
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/lm2.png" alt />
|
</div>
|
</div>
|
<div class="left-content">
|
<div class="textBox">
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/lb2.png" alt />
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div class="left-content">
|
<div class="textBox">
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/lt2.png" alt />
|
</div>
|
</div>
|
<div class="left-content">
|
<div class="textBox">
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/lm2.png" alt />
|
</div>
|
</div>
|
<div class="left-content">
|
<div class="textBox">
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
<h2>探索浩瀚宇宙 发展航天事业</h2>
|
</div>
|
<div class="imgBox">
|
<img src="../assets/img/index/lb2.png" alt />
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<div v-else class="three-columns">
|
<el-row >
|
<el-col :span="8">
|
<div class="grid-content bg-purple"></div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content bg-purple-light"></div>
|
</el-col>
|
<el-col :span="8">
|
<div class="grid-content bg-purple"></div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: "index",
|
|
components: {},
|
data() {
|
return {
|
layout: "two-columns",
|
size: "100%",
|
scale: "1",
|
offset: "0%",
|
tooltipInfo: "请稍后。。。",
|
tooltipShow: false
|
};
|
},
|
mounted() {
|
let size = this.detectZoom();
|
this.scale = (100 / size).toFixed(2);
|
this.offset = "-" + ((size - 100) / 2).toFixed(2) + "%";
|
this.size = size + "%";
|
},
|
|
watch: {},
|
methods: {
|
toggleLayout() {
|
this.layout =
|
this.layout === "three-columns" ? "two-columns" : "three-columns";
|
},
|
detectZoom() {
|
var ratio = 0,
|
screen = window.screen,
|
ua = navigator.userAgent.toLowerCase();
|
if (window.devicePixelRatio !== undefined) {
|
ratio = window.devicePixelRatio;
|
} else if (~ua.indexOf("msie")) {
|
if (screen.deviceXDPI && screen.logicalXDPI) {
|
ratio = screen.deviceXDPI / screen.logicalXDPI;
|
}
|
} else if (
|
window.outerWidth !== undefined &&
|
window.innerWidth !== undefined
|
) {
|
ratio = window.outerWidth / window.innerWidth;
|
}
|
|
if (ratio) {
|
ratio = Math.round(ratio * 100);
|
}
|
return ratio;
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
@font-face {
|
font-family: "AdobeHeitiStd-Regular";
|
src: url("../assets/fonts/QingNiaoHuaGuangJianMeiHei-2.ttf");
|
}
|
.indexbox {
|
margin: 0 auto;
|
max-width: 1920px;
|
|
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%);
|
}
|
}
|
|
|
.two-columns {
|
// background-color: #fff;
|
width: 100%;
|
height: 100%; background-color: #bfa;
|
|
overflow: auto;
|
margin: 0 auto;
|
.el-row {
|
background-color: red;
|
height: calc(100% - 100px);
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.el-col {
|
height: 100%;
|
// background-color: red;
|
// border-radius: 4px;
|
border: 1px solid #000;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-around;
|
}
|
}
|
}
|
|
.left-content {
|
width: 100%;
|
min-width: 700px;
|
min-height: 25px;
|
height: 25%;
|
background: url("../assets/img/index/contentBg.png") center center/contain
|
no-repeat;
|
display: flex;
|
align-items: center;
|
justify-content: space-around;
|
box-sizing: border-box;
|
padding: 50px;
|
.textBox {
|
font-family: AdobeHeitiStd-Regular;
|
// background-color: red;
|
|
color: #fff;
|
h2 {
|
font-size: 2em;
|
}
|
}
|
.imgBox {
|
width: 150px;
|
height: 150px;
|
// background-color: #bfa;
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
.left-content:hover {
|
// background-color: #4cc9f0;
|
-webkit-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
|
-moz-box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
|
box-shadow: 10px 10px 99px 6px rgba(76, 201, 240, 1);
|
}
|
.bg-purple-dark {
|
background: #99a9bf;
|
}
|
.bg-purple {
|
background: #d3dce6;
|
}
|
.bg-purple-light {
|
background: #e5e9f2;
|
}
|
.grid-content {
|
border-radius: 4px;
|
min-height: 36px;
|
}
|
.row-bg {
|
padding: 10px 0;
|
background-color: #f9fafc;
|
}
|
.two-columns .column:nth-child(odd) {
|
/* 样式调整，使得两列并排 */
|
}
|
|
.three-columns {
|
/* 三列布局的样式 */
|
}
|
</style>
|
