Files
sist_web/src/views/teaching_staff/index.vue
clay 2c4b597942 11
2022-01-21 17:44:37 +08:00

503 lines
13 KiB
Vue

<template>
<div id="edu_teach">
<el-row>
<el-col>
<!--首页图片-->
<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">
<el-row class="context_el-row">
<el-col :span="2" :offset="1">
<img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
</el-col>
<el-col :span="3" class="context_name">通信工程系</el-col>
<el-col :span="16">
<hr class="context_hr">
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
系主任
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>梁暄</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
党支部书记
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>彭焕优</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
实验室主任
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>谢绘谰</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
教授(15)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
<div>何翔翔</div>
<div>孔阳阳</div>
<div>邵岗贤</div>
<div>田心心</div>
<div>赖兴</div>
<div>阎婧</div>
<div>秦大毛</div>
<div>程爱爱</div>
<div>方浍溪</div>
<div>胡乐乐</div>
<div>戴竞</div>
<div>锺心心</div>
<div>戴竞</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
副教授(17)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
<div>何翔翔</div>
<div>孔阳阳</div>
<div>邵岗贤</div>
<div>田心心</div>
<div>赖兴</div>
<div>阎婧</div>
<div>秦大毛</div>
<div>程爱爱</div>
<div>方浍溪</div>
<div>胡乐乐</div>
<div>戴竞</div>
<div>锺心心</div>
<div>戴竞</div>
<div>锺心心</div>
<div>戴竞</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
实验人员(2)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
讲师/助理研究员(14)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
<div>何翔翔</div>
<div>孔阳阳</div>
<div>邵岗贤</div>
<div>田心心</div>
<div>赖兴</div>
<div>阎婧</div>
<div>秦大毛</div>
<div>程爱爱</div>
<div>方浍溪</div>
<div>胡乐乐</div>
<div>戴竞</div>
<div>锺心心</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
实验人员(2)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
</el-col>
</el-row>
<el-row class="context_el-row">
<el-col :span="2" :offset="1">
<img class="context_img" src="@/assets/teaching_staff/eji_icon_ys.png" alt="">
</el-col>
<el-col :span="5" class="context_name">自动化与智能工程系</el-col>
<el-col :span="14">
<hr class="context_hr">
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
系主任
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>梁暄</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
党支部书记
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>彭焕优</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
教授(15)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
<div>何翔翔</div>
<div>孔阳阳</div>
<div>邵岗贤</div>
<div>田心心</div>
<div>赖兴</div>
<div>阎婧</div>
<div>秦大毛</div>
<div>程爱爱</div>
<div>方浍溪</div>
<div>胡乐乐</div>
<div>戴竞</div>
<div>锺心心</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
副教授(17)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
<div>何翔翔</div>
<div>孔阳阳</div>
<div>邵岗贤</div>
<div>田心心</div>
<div>赖兴</div>
<div>阎婧</div>
<div>秦大毛</div>
<div>程爱爱</div>
<div>方浍溪</div>
<div>胡乐乐</div>
<div>戴竞</div>
<div>锺心心</div>
<div>戴竞</div>
<div>锺心心</div>
<div>戴竞</div>
</el-col>
</el-row>
<el-row>
<el-col class="name" :offset="1" :span="23">
实验人员(2)
</el-col>
</el-row>
<el-row>
<el-col class="text" :offset="1" :span="23">
<div>锺心心</div>
<div>文荭潇</div>
</el-col>
</el-row>
</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;
.context_el-row {
margin-top: 2rem;
.context_img {
width: 2.2rem;
}
.context_name {
font-size: 1.6rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1956BC;
line-height: 2.2rem;
}
.context_hr {
line-height: 2.2rem;
margin-top: 1.1rem;
border: #1956BC solid 0.1rem;
}
}
.name {
margin-top: 2rem;
font-size: 1.4rem;
font-weight: 600;
color: #1956BC;
}
.text {
font-size: 1.2rem;
color: #3C3C3C;
clear: left;
//@media (max-width: 980px) and (min-width: 980px) {
// float: left;
//}
//
//@media screen and (max-width: 980px) {
//
//}
div {
float: left;
margin-top: .4rem;
width: 7.4%;
}
}
}
}
</style>