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

clay commit : 首页重做准备

Browse Source
This commit is contained in:
clay
2022-10-03 16:29:06 +08:00
parent d059bf187a
commit 2d79617095
9 changed files with 885 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

@@ -3,7 +3,7 @@ ENV = 'development'
# EBTS/开发环境
#VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://localhost:8085/dev-api'
VUE_APP_BASE_API = 'http://192.168.101.4:8085/dev-api'
#VUE_APP_BASE_API = 'http://sist.swjtu.edu.cn/dev-api'
SITE_TYPE = 'NEd5n92EMIpyyBslaNqsRgE'
#VUE_APP_BASE_API = 'http://sistapi.hchyun.cn/dev-api'

340
src/views/header/index_back.vue Normal file
View File

@@ -0,0 +1,340 @@
<template>
<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 :span="11">
<div style="width: 10px;height: 10px;"></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" :span="1">-->
<!-- <div class="grid-content"></div>-->
<!-- </el-col>-->
<div class="bottom-div" style="margin-left: 1rem;">
<el-col v-show="width" :xs="1" :sm="1" :md="4" :lg="4" :xl="5">
<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 :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
<div class="banner">
<router-link to="/home">
<div class="link_text">
<div v-show="$i18n.locale === 'cn'" style="padding: 0 1.1rem;" class="link_text_title">学院首页</div>
<div v-show="$i18n.locale === 'en'" style="padding: 0 .9rem" class="link_text_title">Home</div>
</div>
</router-link>
<span v-for="(menu,index) in menuData" :key="index"
v-if="menu.displayType == 1 ||($i18n.locale === 'cn'&& menu.displayType == 3)||($i18n.locale === 'cn'&& menu.displayType == 2)">
<a>
<div class="link_text">
<div class="link_text_title">
<span style="padding: 0 1.1rem;" v-show="$i18n.locale === 'cn'">{{ menu.title }}</span>
<span style="padding: 0 .9rem" v-show="$i18n.locale === 'en'">{{ menu.englishTitle }}</span>
<div class="secondary">
<ul style="text-align:left;">
<span v-for="(item,i) in menu.children" :key="i" @click="menuCut(item)">
<li class="menu_list" v-if="item.displayType != 4">
<div class="menu_suffix">
<div>
<span v-show="$i18n.locale === 'cn'">{{ item.title }}</span>
<span v-show="$i18n.locale === 'en'">{{ item.englishTitle }}</span>
</div>
</div>
</li>
</span>
</ul>
</div>
</div>
<!--<div class="secondary" v-if="index == 5">-->
</div>
</a>
</span>
</div>
</el-col>
</div>
</el-row>
</div>
</div>
</template>
<script>
import {getNavigation} from "@/api";
export default {
name: "index",
data() {
return {
english: false,
width: document.documentElement.clientWidth >= 1200,
pc: document.documentElement.clientWidth > 992,
menuData: [],
}
},
mounted() {
const that = this
window.onresize = () => {
return (() => {
//这里写要操作的函数
window.screenWidth = document.body.clientWidth
that.width = window.screenWidth >= 1200
})()
}
},
created() {
if (this.pc) {
getNavigation({}).then(res => {
this.menuData = res.data
sessionStorage.setItem("menu", JSON.stringify(res.data))
})
}
},
methods: {
menuCut(menu) {
console.log(menu)
this.$router.push("/pc/" + menu.encodeId + "?type=" + menu.type + "&lang=" + sessionStorage.getItem("lang"));
},
switchLang() {
let lang = ''
if (this.$i18n.locale === 'en') {
lang = 'cn'
} else {
lang = 'en'
}
sessionStorage.setItem("lang", lang)
let fullPath = this.$route.fullPath
debugger
window.location.replace(fullPath.substr(0, fullPath.length - 2) + lang)
}
}
}
</script>
<style scoped lang="scss">
.header {
//width: 100rem;
width: 130rem;
margin: 0 auto;
.top {
font-size: 1.2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
text-align: center;
width: 100%;
height: 3rem;
background: #1956BC;
.switchLang {
cursor: pointer;
font-size: 1.6rem;
}
.link {
line-height: 2.2rem;
width: 80%;
margin: .4rem auto;
border-radius: 1.1rem;
}
.link:hover {
background: rgba(255, 255, 255, 0.7);
}
}
.bottom {
height: 7.6rem;
background: rgba(25, 86, 188, 0.6);
border-radius: 0rem 0rem 2rem 2rem;
.icon {
margin-left: 4rem;
div {
margin-top: 2.4rem;
}
.icont {
img {
width: 23.3rem;
}
}
.iconb {
img {
width: 8.9rem;
}
}
}
.banner {
a {
text-decoration: none;
color: #ffffff;
}
width: 100%;
height: 7.6rem;
clear: left;
margin-left: 3rem;
.link_text {
height: 100%;
text-align: center;
float: left;
font-size: 1.6rem;
font-family: "微软雅黑";
font-weight: 400;
color: #FFFFFF;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.link_text_title {
position: relative;
}
.secondary {
display: none;
width: 25rem;
position: absolute;
//top: 6rem;
background-color: transparent;
text-align: left !important;
margin-top: 1rem;
//display: block;
//width: 100%;
//height: 5rem;
//background-color: #1956BC;
ul {
background-color: #ffffff;
display: inline-block;
border-radius: 0 0 .5rem .5rem;
li {
margin-top: 1.2rem;
height: 2rem;
list-style: none;
//border-bottom: .1rem solid gray;
color: #666666;
//display: flex;
//align-items: center;
//justify-content: center;
//clear: left;
//.menu_prefix{
// width: 1.2rem;
//}
.menu_suffix {
margin-left: .6rem;
display: inline-block;
//width: 14.3rem;
border-left: .2rem solid #ffffff;
margin-right: .8rem;
padding-left: .8rem;
div {
padding: 0.2rem .4rem;
}
}
div {
float: left;
}
}
li:hover {
//background-color: rgba(25, 86, 188, 0.6);
}
li:last-child {
margin-bottom: 1.4rem;
//border-bottom: none;
}
}
}
.link_text:hover {
//.border{
// background-color: #fff;
//}
.secondary {
display: block;
}
.link_text_title {
//font-weight: bolder !important;
}
}
.menu_list:hover {
.menu_suffix {
border-left: .2rem solid #1956BC;
div {
color: #0054B0;
background-color: #C3D7EC;
border-radius: 0.2rem;
}
}
}
}
}
}
@media screen and (min-width: 1200px) {
.banner {
margin: 0 auto;
}
}
</style>

201
src/views/index/components-back/bottom.vue Normal file
View File

@@ -0,0 +1,201 @@
<template>
<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/bottom/sy_icon_sjzx.png" alt="">
</div>
<div class="text">
{{ $t('message.data_information') }}
</div>
</div>
</td>
<td>
<div class="right one">
<div class="table_tr_left">{{ $t('message.employees') }}</div>
<div class="table_tr_right">{{data.worker}}人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right tow">
<div class="table_tr_left">{{ $t('message.number_students') }}</div>
<div class="table_tr_right">{{data.students}}人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right three">
<div class="table_tr_left">{{ $t('message.graduate_tutor') }}</div>
<div class="table_tr_right">{{data.postgraduateTutor}}人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right fourth">
<div class="table_tr_left">{{ $t('message.research_team') }}</div>
<div class="table_tr_right">{{data.scientificTeam}}人</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right five">
<div class="table_tr_left">{{ $t('message.high_level_talents') }}</div>
<div class="table_tr_right">{{data.highLevelTalents}}个</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="right sex">
<div class="table_tr_left">{{ $t('message.major_projects') }}</div>
<div class="table_tr_right">{{data.majorProjects}}个</div>
</div>
</td>
</tr>
</table>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import {getConfig} from "@/api";
export default {
name: "bottom",
data(){
return{
data:{}
}
},
created() {
getConfig("statistic").then(res=>{
this.data = JSON.parse(res.data)
})
}
}
</script>
<style scoped lang="scss">
.bottom {
margin-top: 2rem;
background-image: url('../../../assets/index/bottom/sy_bj4.png');
padding-bottom: 4rem;
.table {
margin: 4rem 0 0 0;
width: 100%;
tr {
width: 100%;
}
td {
width: 50%;
margin: 0;
padding: 0;
}
.left {
width: 100%;
height: 55rem;
position: relative;
.table_img {
//width: 17.6vw;
text-align: right;
padding-top: 6rem;
}
.text{
height: 7rem;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
padding: 0;
margin: 0;
color: #1956BC;
width: 55%;
text-align: center;
font-size: 2.6rem;
position: absolute;
top: 42%;
left: 11%;
}
}
.right {
width: 123%;
height: 6.8rem;
clear: left;
position: relative;
color: #FFFFFF;
.table_tr_left {
position: absolute;
font-size: 1.6rem;
height: 100%;
line-height: 6.8rem;
float: left;
left: 12.5rem;
}
.table_tr_right {
position: absolute;
font-size: 2.4rem;
float: left;
right: 3.3rem;
height: 100%;
line-height: 6.8rem;
}
}
.one {
background-image: url("../../../assets/index/bottom/sy_icon_zxxs.png");
}
.tow {
margin-left: 6rem;
background-image: url("../../../assets/index/bottom/sy_icon_yjs.png");
}
.three {
margin-left: 12rem;
background-image: url("../../../assets/index/bottom/sy_icon_kytd.png");
}
.fourth {
margin-left: 18rem;
background-image: url("../../../assets/index/bottom/sy_icon_gccrc.png");
}
.five {
margin-left: 12rem;
background-image: url("../../../assets/index/bottom/sy_icon_gzrs.png");
}
.sex {
margin-left: 6rem;
background-image: url("../../../assets/index/bottom/sy_icon_zxxs.png");
}
}
}
</style>

0
src/views/index/components/news_center_back.vue → src/views/index/components-back/news_center_back.vue
View File

2
src/views/index/components/party_building_activities_back.vue → src/views/index/components-back/party_building_activities_back.vue
View File

@@ -128,7 +128,7 @@
</template>
<script>
import SlideshowCard from './slideshow_card'
import SlideshowCard from '../components/slideshow_card'
import {getArticleList} from "@/api";
import {toArticle, lookMoreComment} from "@/utils/sist";
import {lookMoreFixedComment} from "../../../utils/sist";

0
src/views/index/components/scientific_research_trends_back.vue → src/views/index/components-back/scientific_research_trends_back.vue
View File

342
src/views/index/components-back/slideshow_card.vue Normal file
View File

@@ -0,0 +1,342 @@
<template>
<div class="banner-card">
<ul class="ul">
<li v-for="(item,index) in bannerDate" :key="index">
<div v-if="$i18n.locale === 'cn'" @click="clickTo(item.link)">
<div class="card_img" >
<img
:src="item.imgurl"
alt=""/>
</div>
<div class="card_title">
{{item.title}}
</div>
</div>
<div v-if="$i18n.locale === 'en'" @click="clickTo(item.enLink)">
<div class="card_img" >
<img
:src="item.imgurl"
alt=""/>
</div>
<div class="card_title">
{{item.enTitle}}
</div>
</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>
import {banner} from "@/api";
export default {
data() {
return {
defaultConfig: {
//默认值
classArray: ["one", "two", "three", "four", "five", "six"],
// classArray: ["one", "two", "three", "four", "five"],
leftSlider: true,
},
bannerWrap: null,
time: null,
lisArray: null, //卡片的集合
classlist: null,
leftBtn: null,
rightBtn: null,
bannerDate:[]
};
},
beforeCreate() {
banner("STCplDRCWAA3zcFE0EBTcQI").then(res=>{
this.bannerDate = res.data
})
},
created() {
},
methods: {
clickTo(link){
//console.log(link)
window.location.href=link;//当前标签页
},
constructor() {
this.bannerWrap = document.getElementsByClassName("banner-card")[0];
let lis = this.bannerWrap.getElementsByTagName("li");
// 将类数组转化为数组
this.lisArray = Array.from(lis);
this.classlist = this.defaultConfig.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() {
setTimeout(() =>{
this.constructor();
},1000);
},
};
</script>
<style scoped lang="scss">
.banner-card {
width: 100%;
height: 50rem;
//background: #f5f5f5;
position: relative;
ul {
width: 71.5%;
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;
background-color: #fff;
.card_img {
width: 100%;
height: 75%;
img {
border-radius: 2rem 2rem 0 0;
display: inline-block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
.card_title {
width: 90%;
font-size: 2rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #1C1C1C;
text-align: left;
//width: 36rem;
margin: 2rem auto;
overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
display: -webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp: 2; //显示的行
}
}
}
.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);
border: 1px solid #DA2D2D;
}
.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;
}
@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>

0
src/views/index/components/teaching_student_back.vue → src/views/index/components-back/teaching_student_back.vue
View File

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

@@ -1,17 +1,5 @@
<template>
<div>
<el-row>
<el-col class="bgc">
<!--首页图片-->
<div class="top">
<img v-if="imageUrl != null" :src="imageUrl" alt="">
<img v-if="imageUrl == null" src="@/assets/index/sy_bj1@2x.png" alt="">
</div>
<div class="next">
<img src="@/assets/index/sy_icon_xh.png" alt="">
</div>
</el-col>
</el-row>
<el-row>
<el-col class="interval">
<NewsCenter/>