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

01

Browse Source
This commit is contained in:
clay
2022-01-12 18:53:03 +08:00
parent 4b68da9e32
commit f5d34a00db
9 changed files with 271 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@@ -4,6 +4,7 @@
<i class="el-icon-top" style="color: #409eff"></i> <i class="el-icon-top" style="color: #409eff"></i>
</div> </div>
<div class="headers"> <div class="headers">
<el-row></el-row>
<headers v-show="width" /> <headers v-show="width" />
<MobileHerder v-show="!width"/> <MobileHerder v-show="!width"/>
</div> </div>

1
src/main.js
View File

@@ -4,6 +4,7 @@ import router from './router'
import i18n from './i18n/i18n' import i18n from './i18n/i18n'
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';
Vue.config.productionTip = false Vue.config.productionTip = false

250
src/views/header/index.vue
View File

@@ -1,133 +1,134 @@
<template> <template>
<el-row> <!-- <el-row>-->
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
<div class="grid-content"></div> <!-- <div class="grid-content"></div>-->
</el-col> <!-- </el-col>-->
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16"> <!-- <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">-->
<div class="header"> <!-- </el-col>-->
<!--头部部分--> <!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
<div class="top"> <!-- <div class="grid-content"></div>-->
<el-row> <!-- </el-col>-->
<el-col :span="2"> <!-- </el-row>-->
<div class="link">
{{ $t('message.student') }} <div class="header">
<!--头部部分-->
<div class="top">
<el-row>
<el-col :span="2">
<div class="link">
{{ $t('message.student') }}
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.staff') }}
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.alumni') }}
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.examine') }}
</div>
</el-col>
<el-col :span="3">
<div class="link">
{{ $t('message.Services portal') }}
</div>
</el-col>
<el-col :offset="11" :span="2">
<div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div>
</el-col>
</el-row>
</div>
<!--导航部分-->
<div class="bottom">
<el-row>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="4" :lg="4" :xl="4">
<div class="icon">
<div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
<div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>
</div>
</el-col>
<el-col v-show="width>=992" :span="1">
<div class="grid-content"></div>
</el-col>
<el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19" :span="19">
<div class="banner">
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学院首页</div>
</div> </div>
</el-col> </router-link>
<el-col :span="2"> <router-link to="/sp">
<div class="link"> <div class="link_text">
{{ $t('message.staff') }} <div class="border"></div>
<div>学院概况</div>
</div> </div>
</el-col> </router-link>
<el-col :span="2"> <router-link to="/ts">
<div class="link"> <div class="link_text">
{{ $t('message.alumni') }} <div class="border"></div>
<div>党群工作</div>
</div> </div>
</el-col> </router-link>
<el-col :span="2"> <router-link to="/et">
<div class="link"> <div class="link_text">
{{ $t('message.examine') }} <div class="border"></div>
<div>师资队伍</div>
</div> </div>
</el-col> </router-link>
<el-col :span="3"> <router-link to="/">
<div class="link"> <div class="link_text">
{{ $t('message.Services portal') }} <div class="border"></div>
<div>教育教学</div>
</div> </div>
</el-col> </router-link>
<el-col :offset="11" :span="2"> <router-link to="/">
<div class="switchLang" @click="switchLang">{{ $t('message.switch') }}</div> <div class="link_text">
</el-col> <div class="border"></div>
</el-row> <div>科学研究</div>
</div>
<!--导航部分-->
<div class="bottom">
<el-row>
<el-col v-show="width>=992" :xs="1" :sm="1" :md="4" :lg="4" :xl="4">
<div class="icon">
<div class="icont"><img src="@/assets/header/sy_logo1@2x.png" alt=""></div>
<div class="iconb"><img src="@/assets/header/sy_logo2@2x.png" alt=""></div>
</div> </div>
</el-col> </router-link>
<el-col v-show="width>=992" :span="1"> <router-link to="/">
<div class="grid-content"></div> <div class="link_text">
</el-col> <div class="border"></div>
<el-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19" :span="19"> <div>学科建设</div>
<div class="banner">
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学院首页</div>
</div>
</router-link>
<router-link to="/sp">
<div class="link_text">
<div class="border"></div>
<div>学院概况</div>
</div>
</router-link>
<router-link to="/ts">
<div class="link_text">
<div class="border"></div>
<div>党群工作</div>
</div>
</router-link>
<router-link to="/et">
<div class="link_text">
<div class="border"></div>
<div>师资队伍</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>教育教学</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>科学研究</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学科建设</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学生工作</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>校友工作</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>国际化</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>资料下载</div>
</div>
</router-link>
</div> </div>
</el-col> </router-link>
</el-row> <router-link to="/">
</div> <div class="link_text">
</div> <div class="border"></div>
</el-col> <div>学生工作</div>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> </div>
<div class="grid-content"></div> </router-link>
</el-col> <router-link to="/">
</el-row> <div class="link_text">
<div class="border"></div>
<div>校友工作</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>国际化</div>
</div>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>资料下载</div>
</div>
</router-link>
</div>
</el-col>
</el-row>
</div>
</div>
</template> </template>
<script> <script>
@@ -138,6 +139,9 @@ export default {
width: document.documentElement.clientWidth width: document.documentElement.clientWidth
} }
}, },
created() {
console.log(this.width)
},
methods: { methods: {
switchLang() { switchLang() {
let lang = '' let lang = ''
@@ -154,6 +158,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.header { .header {
width: 110rem;
margin: 0 auto;
.top { .top {
font-size: 1.2rem; font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;

3
src/views/header/mobile_herder.vue
View File

@@ -202,6 +202,9 @@ export default {
} }
</script> </script>
<style> <style>
.el-drawer__wrapper{
z-index: 9999!important;
}
/*#el-drawer__title{*/ /*#el-drawer__title{*/
/* display: none !important;*/ /* display: none !important;*/
/*}*/ /*}*/

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

@@ -24,10 +24,10 @@
</el-row> </el-row>
<!--录播图--> <!--录播图-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16"> <el-col :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<div class="slideshow"> <div class="slideshow">
<el-carousel trigger="click" height="23.3vw"> <el-carousel trigger="click" height="23.3vw">
<el-carousel-item v-for="item in 4" :key="item"> <el-carousel-item v-for="item in 4" :key="item">
@@ -45,17 +45,17 @@
</el-carousel> </el-carousel>
</div> </div>
</el-col> </el-col>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="4">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
</el-row> </el-row>
<!--轮播图下的新闻--> <!--轮播图下的新闻-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16"> <el-col :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<el-row class="news"> <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" :span="6">
<div class="news_context"> <div class="news_context">

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

@@ -26,10 +26,10 @@
<!--轮播图--> <!--轮播图-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="3" :xl="3"> <el-col :xs="1" :sm="1" hidden-md-only :lg="2" :xl="3">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="18" :xl="18"> <el-col :xs="24" :sm="22" :md="24" :lg="20" :xl="18">
<SlideshowCard/> <SlideshowCard/>
</el-col> </el-col>
</el-row> </el-row>
@@ -60,10 +60,10 @@
</el-row> </el-row>
<!--党史教育内容--> <!--党史教育内容-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16" class="phe"> <el-col :xs="22" :sm="20" :md="20" :lg="19" :xl="16" class="phe">
<div class="phe_row"> <div class="phe_row">
<el-row> <el-row>
<el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4"> <el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
@@ -236,4 +236,6 @@ export default {
} }
} }
</style> </style>

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

@@ -25,10 +25,10 @@
</el-row> </el-row>
<!--科学研究新闻内容--> <!--科学研究新闻内容-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="16" :xl="16"> <el-col class="scientific_context" :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<el-row> <el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"> <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-row class="scientific_context_text"> <el-row class="scientific_context_text">
@@ -193,10 +193,10 @@
</el-row> </el-row>
<!--学术交流--> <!--学术交流-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="16" :xl="16"> <el-col class="academia_context" :xs="22" :sm="20" :md="20" :lg="19" :xl="16">
<el-row> <el-row>
<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12"> <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-row class="academia_context_text"> <el-row class="academia_context_text">
@@ -343,7 +343,7 @@ export default {
padding-left: 4rem; padding-left: 4rem;
.img { .img {
img{ img {
width: 2.6rem; width: 2.6rem;
} }
} }
@@ -352,9 +352,9 @@ export default {
margin-left: 1rem; margin-left: 1rem;
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 500; font-weight: 500;
overflow:hidden; //超出的文本隐藏 overflow: hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示 text-overflow: ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行 white-space: nowrap; //溢出不换行
} }
.time { .time {
@@ -395,7 +395,7 @@ export default {
.img { .img {
img{ img {
width: 2.6rem; width: 2.6rem;
} }
} }
@@ -404,9 +404,9 @@ export default {
margin-left: 1rem; margin-left: 1rem;
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 500; font-weight: 500;
overflow:hidden; //超出的文本隐藏 overflow: hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示 text-overflow: ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行 white-space: nowrap; //溢出不换行
} }
.time { .time {
@@ -419,4 +419,20 @@ export default {
} }
} }
@media screen and (min-width: 1100px) and (max-width: 1400px) {
.scientific_context_text {
padding-left: 2rem !important;
.time {
margin-left: 2rem !important;
}
}
.academia_context_text {
padding-left: 2rem !important;
.time{
margin-left: 2rem !important;
}
}
}
</style> </style>

103
src/views/index/components/slideshow_card.vue
View File

@@ -194,25 +194,32 @@ export default {
background-color: #fff; background-color: #fff;
.card_img { .card_img {
width: 40rem; width: 100%;
height: 30rem; height: 75%;
img { img {
border-radius:2rem 2rem 0 0; border-radius: 2rem 2rem 0 0;
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.card_title{
.card_title {
width: 90%;
font-size: 2rem; font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #1C1C1C; color: #1C1C1C;
text-align: left; text-align: left;
width: 36rem; //width: 36rem;
margin: 2rem auto; margin: 2rem auto;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; //显示的行
} }
} }
@@ -255,7 +262,7 @@ export default {
transform: scale(0.7); transform: scale(0.7);
} }
.banner-card .left-btn ,.right-btn { .banner-card .left-btn, .right-btn {
transition: 0.3s; transition: 0.3s;
position: absolute; position: absolute;
top: 20rem; top: 20rem;
@@ -276,4 +283,88 @@ export default {
right: 10rem; right: 10rem;
} }
@media screen and (min-width: 1100px) and (max-width: 1400px) {
.banner-card {
height: 34rem;
li {
width: 28rem !important;
height: 28rem !important;
.card_title {
font-size: 1.6rem;
margin: 1rem 1rem;
}
}
.one {
left: -2.8rem;
}
.two {
left: 10rem;
}
.three {
left: 24rem;
}
.four {
left: 38rem;
}
.five {
left: 50.3rem;
}
.six {
left: 80rem;
}
}
}
@media screen and (max-width: 1100px) {
.banner-card {
height: 34rem;
li {
width: 22rem !important;
height: 22rem !important;
.card_title {
font-size: 1.6rem;
margin: 1rem 1rem;
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; //显示的行
}
}
.one {
left: -2.6rem;
}
.two {
left: 6rem;
}
.three {
left: 16rem;
}
.four {
left: 26rem;
}
.five {
left: 34rem;
}
.six {
left: 80rem;
}
}
}
</style> </style>

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

@@ -27,10 +27,10 @@
<!--教学工作内容--> <!--教学工作内容-->
<el-row> <el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4"> <el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div> <div class="grid-content"></div>
</el-col> </el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16" class="phe"> <el-col :xs="22" :sm="20" :md="20" :lg="19" :xl="16" class="phe">
<div class="tw"> <div class="tw">
<el-row> <el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4"> <el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">