odjbin/sist_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

响应式处理

Browse Source
This commit is contained in:
clay
2022-01-12 22:15:42 +08:00
parent f5d34a00db
commit 05e116af0d
8 changed files with 80 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/views/index/components/news_center.vue
View File

@@ -24,10 +24,10 @@
</el-row>
<!--录播图-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<div class="slideshow">
<el-carousel trigger="click" height="23.3vw">
<el-carousel-item v-for="item in 4" :key="item">
@@ -45,19 +45,16 @@
</el-carousel>
</div>
</el-col>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">
<div class="grid-content"></div>
</el-col>
</el-row>
<!--轮播图下的新闻-->
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<el-row class="news">
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" >
<div class="news_context">
<div class="news_context_img">
<img src="@/assets/index/news_center/t2.png" alt="">
@@ -67,7 +64,7 @@
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" >
<div class="news_context">
<div class="news_context_img">
<img src="@/assets/index/news_center/t3.png" alt="">
@@ -77,7 +74,7 @@
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
<div class="news_context">
<div class="news_context_img">
<img src="@/assets/index/news_center/t4.png" alt="">
@@ -87,7 +84,7 @@
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
<div class="news_context">
<div class="news_context_img">
<img src="@/assets/index/news_center/t5.png" alt="">
@@ -186,7 +183,9 @@ export default {
color: #262626;
margin: 1rem auto;
width: 80%;
height: 4rem;
//height: 4rem;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:3; //显示的行
@@ -194,4 +193,15 @@ export default {
}
}
@media screen and (min-width: 1100px) and (max-width: 1400px) {
.news_context {
width: 20rem !important;
height: 20rem !important;
.news_context_img {
height: 12.5rem !important;
}
}
}
</style>