优化代码,支持pad
This commit is contained in:
parent
d27966d4f5
commit
7144c719e8
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -128,9 +128,6 @@ export default {
|
||||
|
||||
.left {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
float: left;
|
||||
font-size: 0.9375em;
|
||||
display: flex;
|
||||
|
Reference in New Issue
Block a user