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>
</div>
<div class="headers">
<el-row></el-row>
<headers v-show="width" />
<MobileHerder v-show="!width"/>
</div>

1
src/main.js
View File

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

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

@@ -1,133 +1,134 @@
<template>
<el-row>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
<div class="header">
<!--头部部分-->
<div class="top">
<el-row>
<el-col :span="2">
<div class="link">
{{ $t('message.student') }}
<!-- <el-row>-->
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<!-- <el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">-->
<!-- </el-col>-->
<!-- <el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<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>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.staff') }}
</router-link>
<router-link to="/sp">
<div class="link_text">
<div class="border"></div>
<div>学院概况</div>
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.alumni') }}
</router-link>
<router-link to="/ts">
<div class="link_text">
<div class="border"></div>
<div>党群工作</div>
</div>
</el-col>
<el-col :span="2">
<div class="link">
{{ $t('message.examine') }}
</router-link>
<router-link to="/et">
<div class="link_text">
<div class="border"></div>
<div>师资队伍</div>
</div>
</el-col>
<el-col :span="3">
<div class="link">
{{ $t('message.Services portal') }}
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>教育教学</div>
</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>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>科学研究</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>
</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>
</router-link>
<router-link to="/">
<div class="link_text">
<div class="border"></div>
<div>学科建设</div>
</div>
</el-col>
</el-row>
</div>
</div>
</el-col>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :xl="4">
<div class="grid-content"></div>
</el-col>
</el-row>
</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>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
@@ -138,6 +139,9 @@ export default {
width: document.documentElement.clientWidth
}
},
created() {
console.log(this.width)
},
methods: {
switchLang() {
let lang = ''
@@ -154,6 +158,8 @@ export default {
<style scoped lang="scss">
.header {
width: 110rem;
margin: 0 auto;
.top {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;

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

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

10
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="4" :xl="4">
<el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div>
</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">
<el-carousel trigger="click" height="23.3vw">
<el-carousel-item v-for="item in 4" :key="item">
@@ -45,17 +45,17 @@
</el-carousel>
</div>
</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>
</el-col>
</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>
</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-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<div class="news_context">

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

@@ -26,10 +26,10 @@
<!--轮播图-->
<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>
</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/>
</el-col>
</el-row>
@@ -60,10 +60,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>
</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">
<el-row>
<el-col :xs="6" :sm="6" :md="6" :lg="4" :xl="4">
@@ -236,4 +236,6 @@ export default {
}
}
</style>

40
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="4" :xl="4">
<el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div>
</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-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="4" :xl="4">
<el-col :xs="1" :sm="2" :md="2" :lg="2.5" :xl="4">
<div class="grid-content"></div>
</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-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
<el-row class="academia_context_text">
@@ -343,7 +343,7 @@ export default {
padding-left: 4rem;
.img {
img{
img {
width: 2.6rem;
}
}
@@ -352,9 +352,9 @@ export default {
margin-left: 1rem;
font-size: 1.8rem;
font-weight: 500;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.time {
@@ -395,7 +395,7 @@ export default {
.img {
img{
img {
width: 2.6rem;
}
}
@@ -404,9 +404,9 @@ export default {
margin-left: 1rem;
font-size: 1.8rem;
font-weight: 500;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space: nowrap; //溢出不换行
}
.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>

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

@@ -194,25 +194,32 @@ export default {
background-color: #fff;
.card_img {
width: 40rem;
height: 30rem;
width: 100%;
height: 75%;
img {
border-radius:2rem 2rem 0 0;
border-radius: 2rem 2rem 0 0;
display: inline-block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card_title{
.card_title {
width: 90%;
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1C;
text-align: left;
width: 36rem;
//width: 36rem;
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);
}
.banner-card .left-btn ,.right-btn {
.banner-card .left-btn, .right-btn {
transition: 0.3s;
position: absolute;
top: 20rem;
@@ -276,4 +283,88 @@ export default {
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>

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

@@ -27,10 +27,10 @@
<!--教学工作内容-->
<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>
</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">
<el-row>
<el-col :xs="5" :sm="5" :md="5" :lg="4" :xl="4">