优化代码,支持pad

This commit is contained in:
lVAL 2020-09-30 15:24:34 +08:00
parent d27966d4f5
commit 7144c719e8
5 changed files with 13 additions and 37 deletions

View File

@ -11,14 +11,10 @@
铁路职业技术学院等多所高校合作完成相关培训中心和实验室建设等
</p>
<div class="images">
<el-image class="world" :src="world" />
<div class="group">
<el-image class="world" style="width:50%;height:auto" :src="world" />
<div class="group" style="width:50%;height:auto">
<template v-for="(el, i) in imageList">
<el-image
style="width:120px;height:120px"
:src="el.src"
:key="i"
/>
<el-image style="width:30%;height:30%" :src="el.src" :key="i" />
</template>
</div>
</div>
@ -137,13 +133,13 @@ export default {
justify-content: space-around;
height: 420px;
.world {
width: 40%;
width: 49%;
height: auto;
flex: 1;
}
.group {
width: 400px;
width: 49%;
text-align: center;
}
}

View File

@ -13,7 +13,10 @@
>
<el-carousel-item v-for="(el, i) in imageList" :key="i">
<router-link to="/honor">
<el-image :src="buildUrl(el.src)"></el-image>
<el-image
style="width:auto;height:100%"
:src="buildUrl(el.src)"
></el-image>
</router-link>
</el-carousel-item>
</el-carousel>

View File

@ -92,36 +92,16 @@ export default {
padding: 12px 0;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 30px 30px;
margin-bottom: 70px;
.image {
display: block;
&-knowledge {
width: 415px !important;
height: 560px !important;
}
&-honor {
width: 415px !important;
height: 300px !important;
}
}
}
.flex {
display: flex;
justify-content: space-between;
justify-content: center;
align-items: center;
flex-wrap: wrap;
box-sizing: border-box;
.image {
display: block;
margin-bottom: 20px;
margin: 5px;
&-knowledge {
display: block;

View File

@ -61,7 +61,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
width: auto;
.menu {
position: relative;
@ -73,7 +73,7 @@ export default {
cursor: pointer;
a {
padding: 0 20px;
padding: 0 30px;
text-decoration: none;
color: #333333;
display: block;

View File

@ -128,9 +128,6 @@ export default {
.left {
border: none;
position: absolute;
top: 0;
left: 0px;
float: left;
font-size: 0.9375em;
display: flex;