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

2
src/App.vue
View File

@@ -31,7 +31,7 @@ export default {
data() {
return {
iftop: false,
width: document.documentElement.clientWidth >=992
width: document.documentElement.clientWidth >=1200
}
},
mounted() { //监听scroll方法

31
src/views/edu_teach/index.vue
View File

@@ -9,10 +9,10 @@
</el-col>
</el-row>
<el-row>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
<div class="grid-content"></div>
</el-col>
<el-col :xs="7" :sm="7" :md="6" :lg="4" :xl="4">
<el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
<div class="left_lab">
<div class="lab">
<div class="lab_list lab_select">
@@ -50,7 +50,7 @@
</div>
</div>
</el-col>
<el-col :xs="16" :sm="16" :md="14" :lg="12" :xl="12" >
<el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12" >
<el-row>
<el-col>
<div class="tab">
@@ -78,7 +78,7 @@
</div>
</div>
</el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17">
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
@@ -88,7 +88,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
<div class="tw_img">
<img src="@/assets/index/teaching_student/tw1.png" alt="">
</div>
@@ -108,7 +108,7 @@
</div>
</div>
</el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17">
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
@@ -118,7 +118,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
<div class="tw_img">
<img src="@/assets/index/teaching_student/tw1.png" alt="">
</div>
@@ -138,7 +138,7 @@
</div>
</div>
</el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17">
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
@@ -148,7 +148,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
<div class="tw_img">
<img src="@/assets/index/teaching_student/tw1.png" alt="">
</div>
@@ -168,7 +168,7 @@
</div>
</div>
</el-col>
<el-col :xs="18" :sm="18" :md="18" :lg="17" :xl="17">
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
@@ -178,7 +178,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="4" :xl="3">
<div class="tw_img">
<img src="@/assets/index/teaching_student/tw1.png" alt="">
</div>
@@ -189,7 +189,7 @@
</el-col>
</el-row>
</el-col>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
<div class="grid-content"></div>
</el-col>
</el-row>
@@ -341,6 +341,13 @@ export default {
margin-top: 4rem;
}
.tw_img{
width: 100%;
text-align: left;
img{
width: 90%;
}
}
.tw_time {
border-right: .1rem solid #D5D5D5;
height: 10rem;

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>

6
src/views/index/components/party_building_activities.vue
View File

@@ -60,10 +60,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" class="phe">
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
<div class="phe_row">
<el-row>
<el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
@@ -159,7 +159,7 @@ export default {
name: "party_building_activities",
components: {
SlideshowCard
}
},
}
</script>

10
src/views/index/components/scientific_research_trends.vue
View File

@@ -25,10 +25,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 class="scientific_context" :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-row class="scientific_context_text">
@@ -193,10 +193,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 class="academia_context" :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="18" :xl="14">
<el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-row class="academia_context_text">
@@ -419,7 +419,7 @@ export default {
}
}
@media screen and (min-width: 1100px) and (max-width: 1400px) {
@media screen and (min-width: 1100px) and (max-width: 1400px) {
.scientific_context_text {
padding-left: 2rem !important;

37
src/views/index/components/teaching_student.vue
View File

@@ -27,13 +27,13 @@
<!--教学工作内容-->
<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" class="phe">
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="14" class="phe">
<div class="tw">
<el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
<el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
<div class="tw_time">
<div class="tw_top">
28
@@ -43,7 +43,7 @@
</div>
</div>
</el-col>
<el-col :xs="19" :sm="19" :md="15" :lg="17" :xl="17">
<el-col :xs="19" :sm="19" :md="15" :lg="18" :xl="18">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
@@ -53,7 +53,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width" :md="3" :lg="3" :xl="3">
<div class="tw_img">
<img src="@/assets/index/teaching_student/tw1.png" alt="">
</div>
@@ -63,7 +63,7 @@
</div>
<div class="tw">
<el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
<el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
<div class="tw_time">
<div class="tw_top">
28
@@ -73,7 +73,7 @@
</div>
</div>
</el-col>
<el-col :xs="19" :sm="19" :md="15" :lg="17" :xl="17">
<el-col :xs="19" :sm="19" :md="15" :lg="18" :xl="18">
<div class="tw_context">
<div class="tw_context_title">
信息科学与技术学院开展英语四级备考指导会
@@ -83,7 +83,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width" :md="3" :lg="3" :xl="3">
<div class="tw_img">
<img src="@/assets/index/party_building_activities/1.png" alt="">
</div>
@@ -93,7 +93,7 @@
</div>
<div class="tw">
<el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
<el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
<div class="tw_time">
<div class="tw_top">
28
@@ -103,7 +103,7 @@
</div>
</div>
</el-col>
<el-col :xs="19" :sm="19" :md="15" :lg="17" :xl="17">
<el-col :xs="19" :sm="19" :md="15" :lg="18" :xl="18">
<div class="tw_context">
<div class="tw_context_title">
信息科学与技术学院新生入学教育—国际化讲座
@@ -113,7 +113,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width" :md="3" :lg="3" :xl="3">
<div class="tw_img">
<img src="@/assets/index/party_building_activities/2.png" alt="">
</div>
@@ -123,7 +123,7 @@
</div>
<div class="tw">
<el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
<el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
<div class="tw_time">
<div class="tw_top">
28
@@ -133,7 +133,7 @@
</div>
</div>
</el-col>
<el-col :xs="19" :sm="19" :md="15" :lg="17" :xl="17">
<el-col :xs="19" :sm="19" :md="15" :lg="18" :xl="18">
<div class="tw_context">
<div class="tw_context_title">
信息科学与技术学院2021级研究生职业生涯规划入学专题教育顺利开展
@@ -143,7 +143,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width" :md="3" :lg="3" :xl="3">
<div class="tw_img">
<img src="@/assets/index/party_building_activities/3.png" alt="">
</div>
@@ -153,7 +153,7 @@
</div>
<div class="tw">
<el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">
<el-col :xs="5" :sm="5" :md="5" :lg="3" :xl="3">
<div class="tw_time">
<div class="tw_top">
28
@@ -163,7 +163,7 @@
</div>
</div>
</el-col>
<el-col :xs="19" :sm="19" :md="15" :lg="17" :xl="17">
<el-col :xs="19" :sm="19" :md="15" :lg="18" :xl="18">
<div class="tw_context">
<div class="tw_context_title">
秋风瑟瑟，信息送暖 ——信息学院家庭经济困难学生资助政策座谈会
@@ -173,7 +173,7 @@
</div>
</div>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="3" :lg="3" :xl="3">
<el-col v-show="width" :md="3" :lg="3" :xl="3">
<div class="tw_img">
<img src="@/assets/index/party_building_activities/4.png" alt="">
</div>
@@ -204,7 +204,7 @@ export default {
name: "teaching_student",
data(){
return{
width:document.documentElement.clientWidth
width:document.documentElement.clientWidth>=992
}
},
}
@@ -240,6 +240,7 @@ export default {
}
.tw_context {
width: 95%;
font-family: PingFangSC-Medium, PingFang SC;
color: #161616;

11
src/views/school_profile/index.vue
View File

@@ -10,10 +10,10 @@
</el-row>
<el-row>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
<div class="grid-content"></div>
</el-col>
<el-col :xs="7" :sm="7" :md="6" :lg="4" :xl="4">
<el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
<div class="left_lab">
<div class="lab">
<div class="lab_list lab_select">
@@ -59,7 +59,7 @@
</div>
</div>
</el-col>
<el-col :xs="16" :sm="16" :md="14" :lg="12" :xl="12" >
<el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12" >
<el-row>
<el-col>
<div class="tab">
@@ -114,7 +114,7 @@
</el-col>
</el-row>
</el-col>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
<div class="grid-content"></div>
</el-col>
</el-row>
@@ -130,6 +130,9 @@ export default {
width: document.documentElement.clientWidth
}
},
// created() {
// alert(this.width>=992)
// }
}
</script>

8
src/views/teaching_staff/index.vue
View File

@@ -10,10 +10,10 @@
</el-row>
<el-row>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
<div class="grid-content"></div>
</el-col>
<el-col :xs="7" :sm="7" :md="6" :lg="4" :xl="4">
<el-col v-show="width>=992" :md="6" :lg="6" :xl="4">
<div class="left_lab">
<div class="lab">
<div class="lab_list lab_select">
@@ -51,7 +51,7 @@
</div>
</div>
</el-col>
<el-col :xs="16" :sm="16" :md="14" :lg="12" :xl="12">
<el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12">
<el-row>
<el-col>
<div class="tab">
@@ -304,7 +304,7 @@
</el-col>
</el-row>
</el-col>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="2" :lg="4" :xl="4">
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
<div class="grid-content"></div>
</el-col>
</el-row>