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-03 11:41:40 +08:00
parent b62da4bee6
commit 97850048ed
12 changed files with 819 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/App.vue
View File

@@ -18,14 +18,15 @@
</template>
<script>
import headers from './views/header/index'
import footers from './views/footer/index'
import footers from './views/footer/index'
export default {
name:'App',
components:{
name: 'App',
components: {
headers,
footers
},
data(){
data() {
return {
iftop: false
}
@@ -47,16 +48,20 @@ export default {
}
</script>
<style>
*{
margin: 0;
padding: 0;
}
.grid-content{
height: 1px;
}
* {
margin: 0;
padding: 0;
font-family: PingFangSC-Medium, PingFang SC !important;
}
.grid-content {
height: 1px;
width: 100%;
}
</style>
<style scoped>
.headers{
.headers {
width: 100%;
z-index: 9999;
position: fixed;

BIN
src/assets/index/news_center/t2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/index/news_center/t2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

2
src/router/index.js
View File

@@ -7,7 +7,7 @@ const routes = [
{
path: '/',
name: 'index',
component: () => import(/* webpackChunkName: "about" */ '../views/index/index')
component: () => import(/* webpackChunkName: "about" */ '../views/shouye/index')
},
{
path: '/sp',

510
src/views/index/index.vue
View File

@@ -18,12 +18,29 @@
<div class="title">{{ $t('message.news_center') }}</div>
<div class="divider">
<div class="divider_left">
<img src="@/assets/index/sy_icon_gd.png" alt="">
</div>
<div class="name">News Center</div>
<div class="divider_right">
<img src="@/assets/index/sy_icon_gd1.png" alt="">
</div>
<el-divider class="name">News Center</el-divider>
</div>
<!--录播图-->
<div class="slideshow">
@@ -113,13 +130,9 @@
<!--标题-->
<div class="title" style="background: #FFFFFF; color: #1956BC;margin-bottom: 2rem;">科学研究</div>
<div class="divider" style="width: 80rem;">
<div class="divider_left">
<img src="@/assets/index/sy_icon_gd.png" alt="">
</div>
<div class="name" style="color: #FFFFFF;">Scientific research trends</div>
<div class="divider_right">
<img src="@/assets/index/sy_icon_gd1.png" alt="">
</div>
<el-divider class="name">
<div >Scientific research trends</div>
</el-divider>
</div>
<el-row>
@@ -260,13 +273,9 @@
{{ $t('message.more') }}
</div>
<div class="divider" style="width: 66rem;">
<div class="divider_left">
<img src="@/assets/index/sy_icon_gd.png" alt="">
</div>
<div class="name" style="color: #FFFFFF;font-size: 2.6rem;">学术交流</div>
<div class="divider_right">
<img src="@/assets/index/sy_icon_gd1.png" alt="">
</div>
<el-divider>
<div class="name">学术交流</div>
</el-divider>
</div>
<el-row>
<el-col :offset="3" :span="18">
@@ -414,13 +423,9 @@
<!--标题-->
<div class="title" style="background: #DA2D2D; color: #FFFFFF;margin-bottom: 2rem;">党群工作</div>
<div class="divider" style="width: 80rem;">
<div class="divider_left">
<img src="@/assets/index/tttl.png" alt="">
</div>
<div class="name" style="color: #DA2D2D;">Party Building Activities</div>
<div class="divider_right">
<img src="@/assets/index/tttr.png" alt="">
</div>
<el-divider>
<div class="name">Party Building Activities</div>
</el-divider>
</div>
<div>
@@ -436,13 +441,9 @@
<div class="divider" style="width: 64rem; margin-top: 2rem;">
<div class="divider_left">
<img src="@/assets/index/tttl.png" alt="">
</div>
<div class="name" style="color: #DA2D2D;">党史教育</div>
<div class="divider_right">
<img src="@/assets/index/tttr.png" alt="">
</div>
<el-divider>
<div class="name">党史教育</div>
</el-divider>
</div>
<div class="phe">
@@ -545,177 +546,164 @@
<!--教学工作-->
<div class="teaching_and_student">
<el-row>
<el-col :offset="3" :span="18">
<el-col :xs="1" :sm="1" :md="2" :lg="3" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="22" :md="20" :lg="18" :xl="14">
<!--教学工作-->
<div class="title">教学工作</div>
<div class="divider" style="width: 76rem;">
<div class="divider_left">
<img src="@/assets/index/sy_icon_gd.png" alt="">
</div>
<div class="name">Teaching and student</div>
<div class="divider_right">
<img src="@/assets/index/sy_icon_gd1.png" alt="">
</div>
<el-divider>
<div class="name">Teaching and student</div>
</el-divider>
</div>
<div class="tw">
<el-row>
<el-col :offset="3" :span="18">
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
<div class="tw_bottoms">
2021-10
</div>
</div>
</el-col>
<el-col :span="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 :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
</el-row>
<el-divider></el-divider>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
<div class="tw_bottoms">
2021-10
</div>
</div>
</el-col>
<el-col :xs="15" :sm="16" :md="16" :lg="17" :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 :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
</el-row>
<el-divider></el-divider>
<el-row>
<el-col :offset="3" :span="18">
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
<div class="tw_bottoms">
2021-10
</div>
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
</el-col>
<el-col :span="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
<div class="tw_bottoms">
2021-10
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
<el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
</el-col>
</el-row>
<el-divider></el-divider>
</el-col>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
</el-row>
<el-divider></el-divider>
</el-row>
<el-row>
<el-col :offset="3" :span="18">
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
<div class="tw_bottoms">
2021-10
</div>
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
</el-col>
<el-col :span="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
<div class="tw_bottoms">
2021-10
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
<el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
</el-col>
</el-row>
<el-divider></el-divider>
</el-col>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
</el-row>
<el-divider></el-divider>
</el-row>
<el-row>
<el-col :offset="3" :span="18">
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
<div class="tw_bottoms">
2021-10
</div>
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
</el-col>
<el-col :span="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
<div class="tw_bottoms">
2021-10
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
<el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
</el-col>
</el-row>
<el-divider></el-divider>
</el-col>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
</el-row>
<el-divider></el-divider>
</el-row>
<el-row>
<el-col :offset="3" :span="18">
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
<div class="tw_bottoms">
2021-10
</div>
<el-row>
<el-col :span="3">
<div class="tw_time">
<div class="tw_top">
28
</div>
</el-col>
<el-col :span="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
<div class="tw_bottoms">
2021-10
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
<el-col :xs="15" :sm="16" :md="16" :lg="17" :xl="17">
<div class="tw_context">
<div class="tw_context_title">
不忘初心，展望未来——信息科学与技术学院开展转专业同学交流会
</div>
</el-col>
</el-row>
</el-col>
<div class="tw_context_text">
为促进学生学业发展、给予2021年转专业同学有针对性的帮助，信息科学与技术学院于10月26日开展转专业同学分享交流会。信息科学与技术学院党委副书记马琼、本科生教学主管蒋燕老师…
</div>
</div>
</el-col>
<el-col :span="3" :offset="1">
<div class="tw_img">
<img src="@/assets/index/tw1.png" alt="">
</div>
</el-col>
</el-row>
</el-row>
</div>
@@ -726,79 +714,80 @@
<img src="@/assets/index/sy_icon_zhdl.png" alt="">
</div>
</el-col>
<el-col :xs="1" :sm="1" :md="2" :lg="3" :xl="3">
<div class="grid-content"></div>
</el-col>
</el-row>
</div>
<!--下方开始-->
<div class="bottom">
<el-row>
<el-col :xs="0" :sm="2" :md="3" :lg="5" :xl="5">
<div class="grid-content"></div>
</el-col>
<el-col :xs="24" :sm="20" :md="16" :lg="12" :xl="12">
<div class="table">
<table>
<tr>
<td rowspan="6">
<div class="left">
<div class="table_img">
<img src="@/assets/index/sy_icon_sjzx.png" alt="">
</div>
</div>
</td>
<td>
<div class="right one">
<div class="table_tr_left">职工人数</div>
<div class="table_tr_right">667人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right tow">
<div class="table_tr_left">在校学生人数</div>
<div class="table_tr_right">667人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right three">
<div class="table_tr_left">研究生导师</div>
<div class="table_tr_right">667人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right fourth">
<div class="table_tr_left">科研团队</div>
<div class="table_tr_right">28000人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right five">
<div class="table_tr_left">高层次人才</div>
<div class="table_tr_right">18个</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right sex">
<div class="table_tr_left">重大项目</div>
<div class="table_tr_right">280000个</div>
</div>
</td>
</tr>
</table>
</div>
</el-col>
</el-row>
</div>
<!-- <div class="bottom">-->
<!-- <el-row>-->
<!-- <el-col :xs="0" :sm="1" :md="3" :lg="5" :xl="6">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<!-- <el-col :xs="24" :sm="22" :md="18" :lg="14" :xl="12">-->
<!-- <div class="table">-->
<!-- <table>-->
<!-- <tr>-->
<!-- <td rowspan="6">-->
<!-- <div class="left">-->
<!-- <div class="table_img">-->
<!-- <img src="@/assets/index/sy_icon_sjzx.png" alt="">-->
<!-- </div>-->
<!-- </div>-->
<!-- </td>-->
<!-- <td>-->
<!-- <div class="right one">-->
<!-- <div class="table_tr_left">职工人数</div>-->
<!-- <div class="table_tr_right">667人</div>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>-->
<!-- <div class="right tow">-->
<!-- <div class="table_tr_left">在校学生人数</div>-->
<!-- <div class="table_tr_right">667人</div>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>-->
<!-- <div class="right three">-->
<!-- <div class="table_tr_left">研究生导师</div>-->
<!-- <div class="table_tr_right">667人</div>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>-->
<!-- <div class="right fourth">-->
<!-- <div class="table_tr_left">科研团队</div>-->
<!-- <div class="table_tr_right">28000人</div>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>-->
<!-- <div class="right five">-->
<!-- <div class="table_tr_left">高层次人才</div>-->
<!-- <div class="table_tr_right">18个</div>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<!-- <tr>-->
<!-- <td>-->
<!-- <div class="right sex">-->
<!-- <div class="table_tr_left">重大项目</div>-->
<!-- <div class="table_tr_right">280000个</div>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<!-- </table>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- </div>-->
</div>
@@ -843,10 +832,10 @@ export default {
console.log(window.pageYOffset)
*/
}, //返回顶部
backtop(top,type) {
backtop(top, type) {
// 实现滚动效果
const timeTop = setInterval(() => {
if (type){
if (type) {
document.body.scrollTop = document.documentElement.scrollTop = top -= 50
if (top <= 0) {
clearInterval(timeTop)
@@ -859,6 +848,10 @@ export default {
</script>
<style scoped lang="scss">
.el-divider__text{
background-color: transparent;
}
#index {
.title {
margin: 4rem auto 1rem;
@@ -900,12 +893,9 @@ export default {
height: 3rem;
line-height: 3rem;
div {
float: left;
}
.name {
font-size: 2rem;
background-color: transparent;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1956BC;
@@ -915,7 +905,6 @@ export default {
}
.top {
img {
width: 100%;
}
@@ -923,6 +912,7 @@ export default {
.news_center {
.slideshow {
width: 100%;
.el-carousel__arrow {
top: 93%;
@@ -994,6 +984,7 @@ export default {
border-radius: 2.4rem;
.divider {
margin: 0 auto;
margin: 0;
padding: 0;
width: 44rem;
@@ -1152,6 +1143,14 @@ export default {
}
}
.tw_img {
width: 7vw;
img {
width: 100%;
}
}
}
@@ -1165,9 +1164,10 @@ export default {
width: 100%;
tr{
tr {
width: 100%;
}
td {
width: 50%;
margin: 0;

147
src/views/shouye/components/news_center.vue Normal file
View File

@@ -0,0 +1,147 @@
<template>
<div class="news_center">
<el-row>
<el-col class="headline" :offset="6" :span="12">
<div class="title">
{{ $t('message.news_center') }}
</div>
<el-row>
<el-col :span="9">
<el-divider></el-divider>
</el-col>
<el-col :span="6">
<div class="divider_text">News Center</div>
</el-col>
<el-col :span="9">
<el-divider></el-divider>
</el-col>
</el-row>
</el-col>
</el-row>
<!--录播图-->
<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="slideshow">
<el-carousel trigger="click" height="20.3vw">
<el-carousel-item v-for="item in 4" :key="item">
<div>
<img src="@/assets/index/t1@2x.png" alt="">
<div class="bottom_title">
<el-row>
<el-col :offset="2" :span="18">
{{ item }}喜报！信息学院师生在中国大学生计算机设计大赛中取得历史性突破！
</el-col>
</el-row>
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
</el-col>
<el-col :xs="1" :sm="2" :md="2" :lg="4" :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">
<div class="grid-content"></div>
</el-col>
<el-col :xs="22" :sm="20" :md="20" :lg="16" :xl="16">
<el-row class="news">
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<div class="news_context">
<div class="news_context_img">
<img src="@/assets/index/news_center/t2.png" alt="">
</div>
<div class="news_context_text">
信息引领，勇于拼搏——信息科学与技术学院在全校教职工篮球赛获佳绩
</div>
</div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<div class="news_context"></div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<div class="news_context"></div>
</el-col>
<el-col :xs="12" :sm="12" :md="12" :lg="6" :xl="6" :span="6">
<div class="news_context"></div>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
name: "news_center"
}
</script>
<style scoped lang="scss">
@import '../css/comment.css';
.slideshow {
width: 100%;
.el-carousel__arrow {
top: 93%;
display: block;
}
.bottom_title {
z-index: 99;
width: 100%;
height: 3.6vw;
background: #1956BC;
opacity: 0.89;
position: absolute;
bottom: 0;
line-height: 3.6vw;
font-size: 2rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FFFFFF;
}
img {
width: 100%;
}
}
.news {
.news_context:hover{
box-shadow: 0rem 0rem 0.7rem 0rem rgba(18, 69, 155, 0.59);
}
.news_context {
width: 23rem;
height: 23rem;
margin: 3rem auto;
border-radius: 1.4rem;
border: 0.1rem solid #CAD9F3;
.news_context_img{
height: 14rem;
img{
width: 100%;
}
}
.news_context_text{
font-size: 1.6rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #262626;
margin: 1rem auto;
width: 80%;
height: 4rem;
}
}
}
</style>

13
src/views/shouye/components/party_building_activities.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "party_building_activities"
}
</script>
<style scoped>
</style>

13
src/views/shouye/components/scientific_research_trends.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "scientific_research_trends"
}
</script>
<style scoped>
</style>

282
src/views/shouye/components/slideshow_card.vue Normal file
View File

@@ -0,0 +1,282 @@
<template>
<div class="banner-card">
<ul class="ul">
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
<li>
<div class="card_img">
<img
src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2699863970,3643884691&fm=26&gp=0.jpg"
alt=""
/>
</div>
<div class="card_title">
建党百年 信息报国——信息科学与技术学院备份
</div>
</li>
</ul>
<div class="left-btn">
<span>
<button class="el-carousel__arrow el-carousel__arrow--left"><i class="el-icon-arrow-left"></i></button>
</span>
</div>
<div class="right-btn">
<span>
<button class="el-carousel__arrow el-carousel__arrow--right"><i class="el-icon-arrow-right"></i></button>
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
default: {
//默认值
classArray: ["one", "two", "three", "four", "five", "six"],
leftSlider: true,
},
bannerWrap: null,
time: null,
lisArray: null, //卡片的集合
classlist: null,
leftBtn: null,
rightBtn: null,
};
},
methods: {
constructor() {
this.bannerWrap = document.getElementsByClassName("banner-card")[0];
let lis = this.bannerWrap.getElementsByTagName("li");
// 将类数组转化为数组
this.lisArray = Array.from(lis);
this.classlist = this.default.classArray;
//获取左右按钮
this.leftBtn = document.getElementsByClassName("left-btn")[0];
this.rightBtn = document.getElementsByClassName("right-btn")[0];
this.move(this.classlist);
this.timer();
this.listenMouseEvent();
this.listenMouseClickBtnEvent();
},
//移动
move(list) {
this.lisArray.forEach((value, index) => {
value.setAttribute("class", list[index]); //给每一个li添加对应的类名
});
},
// 向左运动
leftMove() {
let popValue = this.classlist.pop(); //删除并返回数组的最后一个
this.classlist.unshift(popValue); //把刚才删除的最后一个添加到数组开头
this.move(this.classlist); //调用移动方法，每一个li会根据新数组的位置进行移动，从而实现轮播的效果
},
// 向右运动
rightMove() {
let shiftValue = this.classlist.shift(); //删除并返回数组的第一个
this.classlist.push(shiftValue); //把刚才删除的第一个push到数组末尾
this.move(this.classlist);
},
// 定时器自动切换
timer() {
this.time = setInterval(this.leftMove.bind(this), 1000);
},
// 鼠标移入移出事件
listenMouseEvent() {
this.bannerWrap.addEventListener("mouseover", () => {
clearInterval(this.time);
this.leftBtn.style.cssText = `left: 6rem; opacity: 1`;
this.rightBtn.style.cssText = `right: 6rem; opacity: 1`;
});
this.bannerWrap.addEventListener("mouseout", () => {
this.timer();
this.leftBtn.style.cssText = `left: 2rem; opacity: 0`;
this.rightBtn.style.cssText = `right: 2rem; opacity: 0`;
});
},
// 点击左右按钮事件
listenMouseClickBtnEvent() {
this.leftBtn.addEventListener("click", () => {
this.leftMove();
});
this.rightBtn.addEventListener("click", () => {
this.rightMove();
});
},
},
mounted() {
this.constructor();
},
};
</script>
<style scoped lang="scss">
.banner-card {
width: 100%;
height: 50rem;
//background: #f5f5f5;
position: relative;
ul {
width: 90%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
overflow: hidden;
}
li {
border-radius: 2rem;
width: 40rem;
height: 40rem;
position: absolute;
top: 2.5rem;
list-style-type: none;
transition: 0.3s;
cursor: pointer;
border: 1px solid #DA2D2D;
background-color: #fff;
.card_img {
width: 40rem;
height: 30rem;
img {
border-radius:2rem 2rem 0 0;
display: inline-block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card_title{
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1C;
text-align: left;
width: 36rem;
margin: 2rem auto;
}
}
}
.one {
z-index: 98;
left: -6rem;
transform: scale(0.8);
}
.two {
z-index: 99;
left: 14rem;
transform: scale(0.9);
}
.three {
left: 30rem;
z-index: 100;
transform: scale(1);
}
.four {
z-index: 99;
left: 48rem;
transform: scale(0.9);
}
.five {
left: 66rem;
z-index: 98;
transform: scale(0.8);
}
.six {
left: 74rem;
z-index: 96;
transform: scale(0.7);
}
.banner-card .left-btn ,.right-btn {
transition: 0.3s;
position: absolute;
top: 20rem;
cursor: pointer;
opacity: 0;
}
.banner-card div span {
display: inline-block;
font-size: 2.5rem;
}
.left-btn {
left: 2rem;
}
.right-btn {
right: 10rem;
}
</style>

13
src/views/shouye/components/teaching_student.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: "teaching_student"
}
</script>
<style scoped>
</style>

29
src/views/shouye/css/comment.css Normal file
View File

@@ -0,0 +1,29 @@
/**
* @author: Clay
* @date: 2022/1/2 17:16
* @description：comment
* @email: clay@hchyun.com
*/
.headline > .title {
margin: 0 auto;
width: 23rem;
height: 6rem;
background: #1956BC;
border-radius: 2.95rem;
text-align: center;
line-height: 6rem;
font-size: 2.6rem;
font-weight: 500;
color: #FFFFFF;
text-align: center;
}
.divider div{
float: left;
}
.divider_text{
font-size: 2rem;
color: #1956BC;
text-align: center;
line-height: 5rem;
}

49
src/views/shouye/index.vue Normal file
View File

@@ -0,0 +1,49 @@
<template>
<div>
<el-row>
<el-col>
<!--首页图片-->
<div class="top">
<img src="@/assets/index/sy_bj1@2x.png" alt="">
</div>
</el-col>
</el-row>
<el-row>
<el-col class="interval">
<NewsCenter/>
</el-col>
</el-row>
<el-row>
<el-col>
</el-col>
</el-row>
</div>
</template>
<script>
import NewsCenter from './components/news_center'
import PartyBuildingActivities from './components/party_building_activities.vue'
import ResearchTrends from './components/scientific_research_trends.vue'
import SlideshowCard from './components/slideshow_card.vue'
export default {
name: "index",
components:{
NewsCenter,
PartyBuildingActivities,
ResearchTrends,
SlideshowCard
}
}
</script>
<style scoped lang="scss">
.top {
img {
width: 100%;
}
}
.interval{
margin-top: 5rem;
}
</style>