clay commit : 首页重做准备
This commit is contained in:
clay
@@ -3,7 +3,7 @@ ENV = 'development'
|
|||||||
|
|
||||||
# EBTS/开发环境
|
# EBTS/开发环境
|
||||||
#VUE_APP_BASE_API = '/dev-api'
|
#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'
|
#VUE_APP_BASE_API = 'http://sist.swjtu.edu.cn/dev-api'
|
||||||
SITE_TYPE = 'NEd5n92EMIpyyBslaNqsRgE'
|
SITE_TYPE = 'NEd5n92EMIpyyBslaNqsRgE'
|
||||||
#VUE_APP_BASE_API = 'http://sistapi.hchyun.cn/dev-api'
|
#VUE_APP_BASE_API = 'http://sistapi.hchyun.cn/dev-api'
|
||||||
|
|||||||
340
src/views/header/index_back.vue
Normal file
340
src/views/header/index_back.vue
Normal 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
201
src/views/index/components-back/bottom.vue
Normal 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>
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import SlideshowCard from './slideshow_card'
|
import SlideshowCard from '../components/slideshow_card'
|
||||||
import {getArticleList} from "@/api";
|
import {getArticleList} from "@/api";
|
||||||
import {toArticle, lookMoreComment} from "@/utils/sist";
|
import {toArticle, lookMoreComment} from "@/utils/sist";
|
||||||
import {lookMoreFixedComment} from "../../../utils/sist";
|
import {lookMoreFixedComment} from "../../../utils/sist";
|
||||||
342
src/views/index/components-back/slideshow_card.vue
Normal file
342
src/views/index/components-back/slideshow_card.vue
Normal 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>
|
||||||
@@ -1,17 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<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-row>
|
||||||
<el-col class="interval">
|
<el-col class="interval">
|
||||||
<NewsCenter/>
|
<NewsCenter/>
|
||||||
|
|||||||
Reference in New Issue
Block a user