416 lines
12 KiB
Vue
416 lines
12 KiB
Vue
<template>
|
||
<div id="edu_teach">
|
||
<el-row>
|
||
<el-col :span="24">
|
||
<!--首页图片-->
|
||
<div class="top">
|
||
<img src="@/assets/school_profile/bj123.png" alt="">
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row>
|
||
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
|
||
<div class="grid-content"></div>
|
||
</el-col>
|
||
<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">
|
||
<div class="lab_img">
|
||
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
||
</div>
|
||
<div class="lab_title">
|
||
教学督导
|
||
</div>
|
||
</div>
|
||
<div class="lab_list">
|
||
<div class="lab_img">
|
||
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
||
</div>
|
||
<div class="lab_title">
|
||
本科教育
|
||
</div>
|
||
</div>
|
||
<div class="lab_list">
|
||
<div class="lab_img">
|
||
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
||
</div>
|
||
<div class="lab_title">
|
||
研究生教育
|
||
</div>
|
||
</div>
|
||
<div class="lab_list">
|
||
<div class="lab_img">
|
||
<img src="@/assets/school_profile/eji_icon_xz.png" alt="">
|
||
</div>
|
||
<div class="lab_title">
|
||
教学平台
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="20" :sm="20" :md="15" :lg="14" :xl="12" >
|
||
<el-row>
|
||
<el-col>
|
||
<div class="tab">
|
||
<router-link to="/">首页</router-link>
|
||
<span> > </span>
|
||
<router-link to="">教育教学</router-link>
|
||
<span> > </span>
|
||
<span style="color: #1956BC;font-size: 1.4rem">教学督导</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<el-row>
|
||
<!--正文内容-->
|
||
<el-col class="context">
|
||
<div class="tw">
|
||
<el-row>
|
||
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
|
||
<div class="tw_time">
|
||
<div class="tw_top">
|
||
28
|
||
</div>
|
||
<div class="tw_bottoms">
|
||
2021-10
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
|
||
<div class="tw_context">
|
||
<div class="tw_context_title">
|
||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||
</div>
|
||
<div class="tw_context_text">
|
||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<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>
|
||
</el-col>
|
||
</el-row>
|
||
<hr style="border: 0.1rem solid #E6E6E6;" class="hr">
|
||
</div>
|
||
<div class="tw">
|
||
<el-row>
|
||
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
|
||
<div class="tw_time">
|
||
<div class="tw_top">
|
||
28
|
||
</div>
|
||
<div class="tw_bottoms">
|
||
2021-10
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
|
||
<div class="tw_context">
|
||
<div class="tw_context_title">
|
||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||
</div>
|
||
<div class="tw_context_text">
|
||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<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>
|
||
</el-col>
|
||
</el-row>
|
||
<hr style="border: 0.1rem solid #E6E6E6;" class="hr">
|
||
</div>
|
||
<div class="tw">
|
||
<el-row>
|
||
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
|
||
<div class="tw_time">
|
||
<div class="tw_top">
|
||
28
|
||
</div>
|
||
<div class="tw_bottoms">
|
||
2021-10
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
|
||
<div class="tw_context">
|
||
<div class="tw_context_title">
|
||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||
</div>
|
||
<div class="tw_context_text">
|
||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<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>
|
||
</el-col>
|
||
</el-row>
|
||
<hr style="border: 0.1rem solid #E6E6E6;" class="hr">
|
||
</div>
|
||
<div class="tw">
|
||
<el-row>
|
||
<el-col :xs="6" :sm="6" :md="5" :lg="4" :xl="4">
|
||
<div class="tw_time">
|
||
<div class="tw_top">
|
||
28
|
||
</div>
|
||
<div class="tw_bottoms">
|
||
2021-10
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :xs="18" :sm="18" :md="18" :lg="16" :xl="17">
|
||
<div class="tw_context">
|
||
<div class="tw_context_title">
|
||
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
|
||
</div>
|
||
<div class="tw_context_text">
|
||
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<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>
|
||
</el-col>
|
||
</el-row>
|
||
<hr style="border: 0.1rem solid #E6E6E6;" class="hr">
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</el-col>
|
||
<el-col :xs="2" :sm="2" :md="1.5" :lg="2" :xl="4">
|
||
<div class="grid-content"></div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "index",
|
||
data() {
|
||
return {
|
||
width: document.documentElement.clientWidth
|
||
}
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
|
||
#edu_teach {
|
||
.top {
|
||
img {
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
font-family: "微软雅黑";
|
||
background: #F8F8F8;
|
||
|
||
.left_lab {
|
||
margin-left: 4rem;
|
||
width: 22rem;
|
||
height: 40rem;
|
||
background: #1956BC;
|
||
border-radius: 0rem 0rem 2rem 0rem;
|
||
position: relative;
|
||
|
||
.lab {
|
||
font-size: 1.6rem;
|
||
position: absolute;
|
||
left: 4.8rem;
|
||
top: 5rem;
|
||
width: 19rem;
|
||
margin-bottom: 3rem;
|
||
background: #FFFFFF;
|
||
box-shadow: 0rem 0.2rem 0.4rem 0rem rgba(6, 42, 102, 0.67);
|
||
border-radius: 0rem 0rem 2.5rem 2rem;
|
||
|
||
.lab_list:last-child {
|
||
border: none;
|
||
}
|
||
|
||
.lab_list {
|
||
text-align: center;
|
||
margin-left: 1rem;
|
||
width: 18rem;
|
||
height: 8rem;
|
||
clear: left;
|
||
line-height: 8rem;
|
||
border-bottom: 0.1rem solid #94BCFF;
|
||
|
||
.lab_img {
|
||
margin-top: .2rem;
|
||
float: left;
|
||
width: 1.4rem;
|
||
height: 1.4rem;
|
||
display: none;
|
||
margin-left: 4rem;
|
||
}
|
||
|
||
.lab_title {
|
||
color: #1956BC;
|
||
float: left;
|
||
margin-left: 6rem;
|
||
}
|
||
}
|
||
|
||
.lab_select {
|
||
background: #94BCFF;
|
||
|
||
.lab_img {
|
||
display: block;
|
||
}
|
||
|
||
.lab_title {
|
||
color: #FFFFFF;
|
||
margin-left: .4rem;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
@media screen and (max-width: 980px) {
|
||
.left_lab {
|
||
margin-left: 3rem;
|
||
width: 16.5rem;
|
||
height: 30rem;
|
||
|
||
border-radius: 0rem 0rem 1rem 0rem;
|
||
|
||
.lab {
|
||
left: 3.6rem;
|
||
top: 3.75rem;
|
||
width: 14.25rem;
|
||
margin-bottom: 2.25rem;
|
||
border-radius: 0rem 0rem 1.2rem 1rem;
|
||
|
||
.lab_list {
|
||
margin-left: .75rem;
|
||
width: 13.5rem;
|
||
height: 6rem;
|
||
line-height: 6rem;
|
||
.lab_img {
|
||
margin-top: .1rem;
|
||
width: 1.05rem;
|
||
height: 1.05rem;
|
||
display: none;
|
||
margin-left: 3rem;
|
||
}
|
||
.lab_title {
|
||
margin-left: 1.5rem;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.tab {
|
||
margin-left: 1.9rem;
|
||
margin-top: 1.5rem;
|
||
font-weight: 400;
|
||
|
||
a {
|
||
text-decoration: none;
|
||
font-size: 1.4rem !important;
|
||
color: #3C3C3C;
|
||
}
|
||
}
|
||
|
||
.context {
|
||
margin: 3rem 2rem;
|
||
padding-bottom: 3rem;
|
||
//width: 84.3rem;
|
||
background: #FFFFFF;
|
||
|
||
.tw {
|
||
margin-top: 4rem;
|
||
}
|
||
|
||
.tw_img{
|
||
width: 100%;
|
||
text-align: left;
|
||
img{
|
||
width: 90%;
|
||
}
|
||
}
|
||
.tw_time {
|
||
border-right: .3rem solid #D5D5D5;
|
||
height: 10rem;
|
||
width: 10rem;
|
||
color: #1956BC;
|
||
text-align: center;
|
||
|
||
.tw_top {
|
||
height: 8rem;
|
||
width: 100%;
|
||
line-height: 8rem;
|
||
font-size: 5.2rem;
|
||
}
|
||
|
||
.tw_bottoms {
|
||
height: 2rem;
|
||
width: 100%;
|
||
font-size: 1.4rem;
|
||
}
|
||
}
|
||
|
||
.tw_context {
|
||
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
color: #161616;
|
||
|
||
|
||
.tw_context_title {
|
||
overflow:hidden; //超出的文本隐藏
|
||
text-overflow:ellipsis; //溢出用省略号显示
|
||
white-space:nowrap; //溢出不换行
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
padding-right: 2rem;
|
||
|
||
}
|
||
|
||
.tw_context_text {
|
||
margin-top: .8rem;
|
||
font-size: 1.6rem;
|
||
font-weight: 400;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display:-webkit-box; //作为弹性伸缩盒子模型显示。
|
||
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||
-webkit-line-clamp:3; //显示的行
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: 2.4rem;
|
||
font-weight: 500;
|
||
color: #1956BC;
|
||
text-align: center;
|
||
}
|
||
|
||
.text {
|
||
margin-top: 2rem;
|
||
font-size: 1.2rem;
|
||
font-weight: 400;
|
||
color: #3C3C3C;
|
||
}
|
||
}
|
||
}
|
||
</style>
|