335 lines
12 KiB
Vue
335 lines
12 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<!-- banner -->
|
||
|
|
<!-- <div class="banner" id="banner" > -->
|
||
|
|
<!-- <a v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex" href="javascript:void(0);" class="d1" :style="`background:url(${$tImg(lbt,'cover')}) center no-repeat;`"></a> -->
|
||
|
|
<!-- <a href="" class="d1" style="background:url(img/banner1.png) center no-repeat;"></a> -->
|
||
|
|
<!-- <a href="" class="d1" style="background:url(img/banner.png) center no-repeat;"></a> -->
|
||
|
|
<!-- <div class="d2" id="banner_id"> -->
|
||
|
|
<!-- <ul> -->
|
||
|
|
<!-- <li v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex"></li> -->
|
||
|
|
<!-- </ul> -->
|
||
|
|
<!-- </div> -->
|
||
|
|
<!-- </div> -->
|
||
|
|
|
||
|
|
|
||
|
|
<el-carousel :height="carouselHeight" @change="changeCarouselHeight">
|
||
|
|
<el-carousel-item v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex">
|
||
|
|
<div class="banner" @click="$to('detailedPage',{id:lbt.id})">
|
||
|
|
<img class="d1" style="width: 100%;height:100%;" :src="$tImg(lbt,'cover')"/>
|
||
|
|
</div>
|
||
|
|
</el-carousel-item>
|
||
|
|
</el-carousel>
|
||
|
|
<!-- banner -->
|
||
|
|
<div class="contant">
|
||
|
|
<div class="PageOne">
|
||
|
|
<div class="OneUp clearfloat">
|
||
|
|
<div class="OneUpL left">
|
||
|
|
<!-- <span class="OneImg"><img src="img/gzdt_tu1.png" ></span> -->
|
||
|
|
<!-- <span class="OneTxt">WORK DYNAMICS</span> -->
|
||
|
|
<span class="OneTxt2" style="font-size:2rem;">
|
||
|
|
<div class="OneTxt2_txt">{{$t('common.workDynamics')}}</div>
|
||
|
|
<div class="OneTxt2_back"/>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<a href="javascript:void(0):" class="OneUpR right" @click="$to('listPage',{pid:'1',id:'2'})">{{$t('common.more')}}></a>
|
||
|
|
</div>
|
||
|
|
<div class="OneDown">
|
||
|
|
<ul class="clearfloat">
|
||
|
|
<li v-for="(gzdt,gzdtIndex) in gzdtList" :key="gzdtIndex">
|
||
|
|
<a href="javascript:void(0);" @click="$to('detailedPage',{id:gzdt.id})">
|
||
|
|
<span class="OneDownImg"><img :src="$tImg(gzdt,'cover')" ></span>
|
||
|
|
<div class="OneDownbox clearfloat">
|
||
|
|
<div class="OneDate left">
|
||
|
|
<span class="span1">{{getDay(gzdt.updateTime || gzdt.createTime)}}</span>
|
||
|
|
<span class="span2">{{getYearAndMonth(gzdt.updateTime || gzdt.createTime)}}</span>
|
||
|
|
</div>
|
||
|
|
<div class="OneCont right">
|
||
|
|
<h3 class="elli">{{$tf(gzdt,'title')}}</h3>
|
||
|
|
<div class="heng"></div>
|
||
|
|
<p>{{$tfnm(gzdt,'content',55)}}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="PageTwo">
|
||
|
|
<div class="PageTwoBox clearfloat">
|
||
|
|
<div class="TwoL left">
|
||
|
|
<div class="OneUp clearfloat">
|
||
|
|
<div class="OneUpL left">
|
||
|
|
<!-- <span class="OneImg"><img src="img/tzgg_2.png" ></span> -->
|
||
|
|
<!-- <span class="OneTxt">NOTICE</span> -->
|
||
|
|
<span class="OneTxt2" style="font-size:2rem;">
|
||
|
|
<div class="OneTxt2_txt">{{$t('common.notice')}}</div>
|
||
|
|
<div class="OneTxt2_back"/>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<a href="javascript:void(0);" class="OneUpR right" @click="$to('listPage',{pid:'1',id:'3'})">{{$t('common.more')}}></a>
|
||
|
|
</div>
|
||
|
|
<div class="TwoLDown">
|
||
|
|
<ul>
|
||
|
|
<li v-for="(tzgg,tzggIndex) in tzggList" :key="tzggIndex">
|
||
|
|
<a href="javascript:void(0);" class="TwoLDownbox clearfloat" @click="$to('detailedPage',{id:tzgg.id})">
|
||
|
|
<div class="TwoLDate left">
|
||
|
|
<span class="Date1">{{getDay(tzgg.updateTime || tzgg.createTime)}}</span>
|
||
|
|
<span class="Date2">{{getYearAndMonth(tzgg.updateTime || tzgg.createTime)}}</span>
|
||
|
|
</div>
|
||
|
|
<div class="TwoLCont right">
|
||
|
|
<h3 class="elli">{{$tf(tzgg,'title')}}</h3>
|
||
|
|
<p>{{$tfnm(tzgg,'content',84)}}</p>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="TwoR right">
|
||
|
|
<div class="OneUp clearfloat">
|
||
|
|
<div class="OneUpL">
|
||
|
|
<!-- <span class="OneImg"><img src="img/tzgg_3.png" ></span> -->
|
||
|
|
<!-- <span class="OneTxt">FAST GUID</span> -->
|
||
|
|
<span class="OneTxt2" style="font-size:2rem;">
|
||
|
|
<div class="OneTxt2_txt">{{$t('common.fastGuid')}}</div>
|
||
|
|
<div class="OneTxt2_back"/>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="TwoRDown">
|
||
|
|
<a v-for="(linksKsdh,linksKsdhIndex) in linksKsdhList" :key="linksKsdhIndex" href="javascript:void(0);" @click="window.open($tf(linksKsdh,'url'))" :style="linksKsdhIndex==0?'display: block;margin-bottom: 22px;':''"><img :src="$tImg(linksKsdh,'logo')"></a>
|
||
|
|
<!-- <a href="" class=""><img src="img/tzgg_5.png" ></a> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="PageThree">
|
||
|
|
<div class="OneUp clearfloat">
|
||
|
|
<div class="OneUpL">
|
||
|
|
<!-- <span class="OneImg"><img src="img/tzgg_4.png" ></span> -->
|
||
|
|
<!-- <span class="OneTxt">LINK</span> -->
|
||
|
|
<span class="OneTxt2" style="font-size:2rem;">
|
||
|
|
<div class="OneTxt2_txt">{{$t('common.link')}}</div>
|
||
|
|
<div class="OneTxt2_back"/>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="ThreeDown">
|
||
|
|
<div id="marquee1" class="marqueeleft">
|
||
|
|
<div style="width: 1264px;">
|
||
|
|
<!-- <vue-seamless-scroll class="seamless-warp" :direction="2">
|
||
|
|
<ul id="marquee1_1">
|
||
|
|
<li v-for="(linksYqlj,linksYqljIndex) in linksYqljList" :key="linksYqljIndex">
|
||
|
|
<span class="pic" href="javascript:void(0);" @click="window.open($tf(linksYqlj,'url'))"><img width="120" height="120" :src="$tImg(linksYqlj,'logo')"></span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</vue-seamless-scroll> -->
|
||
|
|
<vue-seamless-scroll
|
||
|
|
:data="linksYqljList"
|
||
|
|
:class-option="classOption"
|
||
|
|
class="warp"
|
||
|
|
ref="wss"
|
||
|
|
:maxWidth="1264"
|
||
|
|
>
|
||
|
|
<ul id="marquee1_1">
|
||
|
|
<li v-for="(linksYqlj,linksYqljIndex) in linksYqljList" :key="linksYqljIndex" :title="$tf(linksYqlj,'title')">
|
||
|
|
<span class="pic" href="javascript:void(0);" @click="window.open($tf(linksYqlj,'url'))">
|
||
|
|
<img width="120" height="120" :src="$tImg(linksYqlj,'logo')">
|
||
|
|
</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</vue-seamless-scroll>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getAction } from '@/api/manage'
|
||
|
|
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
|
||
|
|
import vueSeamlessScroll from './vue-seamless-scroll'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
mixins:[getwayMixin],
|
||
|
|
components:{ vueSeamlessScroll },
|
||
|
|
props:{
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return {
|
||
|
|
window,
|
||
|
|
lbtList:[],
|
||
|
|
gzdtList:[],
|
||
|
|
tzggList:[],
|
||
|
|
linksKsdhList:[],
|
||
|
|
linksYqljList:[],
|
||
|
|
classOption: {
|
||
|
|
limitMoveNum: 2,
|
||
|
|
direction: 2,
|
||
|
|
},
|
||
|
|
carouselHeight: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed:{
|
||
|
|
},
|
||
|
|
mounted(){
|
||
|
|
this.loadData();
|
||
|
|
const that = this
|
||
|
|
let load = () => {
|
||
|
|
return (() => {
|
||
|
|
let image = document.querySelector('.el-carousel__item.is-active.is-animating img')
|
||
|
|
that.refreshImageHeight(image);
|
||
|
|
})()
|
||
|
|
};
|
||
|
|
//当页面大小变动时，更新高度
|
||
|
|
window.onresize = load;
|
||
|
|
// window.onload = load;
|
||
|
|
},
|
||
|
|
updated(){
|
||
|
|
// this.$nextTick(() => {
|
||
|
|
// let image = document.querySelector('.el-carousel__item.is-active.is-animating img')
|
||
|
|
// this.refreshImageHeight(image);
|
||
|
|
// })
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
loadData(){
|
||
|
|
console.log('main.vue.this =>',this);
|
||
|
|
//轮播图
|
||
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',type:'首页轮播'}).then((res)=>{
|
||
|
|
if(res.success){
|
||
|
|
let list = res.result.records||res.result;
|
||
|
|
// this.articleList = list;
|
||
|
|
this.lbtList = list;
|
||
|
|
if(list && list.length){
|
||
|
|
// console.log(list,list[0],this.$tImg(list[0],'cover'),this);
|
||
|
|
//用第一张图刷新高度
|
||
|
|
this.refreshImageHeightByUrl(this.$tImg(list[0],'cover'));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//工作动态
|
||
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',columnId:'2'}).then((res)=>{
|
||
|
|
if(res.success){
|
||
|
|
let list = res.result.records||res.result;
|
||
|
|
// this.articleList = list;
|
||
|
|
this.gzdtList = list;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//通知公告
|
||
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'3'}).then((res)=>{
|
||
|
|
if(res.success){
|
||
|
|
let list = res.result.records||res.result;
|
||
|
|
// this.articleList = list;
|
||
|
|
this.tzggList = list;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//快速导航
|
||
|
|
getAction('/gateway/gatewayLinks/list',{pageSize:-1,isEnable:'Y',type:'快速导航'}).then((res)=>{
|
||
|
|
if(res.success){
|
||
|
|
let list = res.result.records||res.result;
|
||
|
|
this.linksKsdhList = list;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//友情链接
|
||
|
|
getAction('/gateway/gatewayLinks/list',{pageSize:-1,isEnable:'Y',type:'友情链接'}).then((res)=>{
|
||
|
|
if(res.success){
|
||
|
|
let list = res.result.records||res.result;
|
||
|
|
this.linksYqljList = list;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getDay(dateTime){
|
||
|
|
if(!dateTime) return '';
|
||
|
|
let d = new Date(dateTime);
|
||
|
|
return d.getDate()
|
||
|
|
},
|
||
|
|
getYearAndMonth(dateTime){
|
||
|
|
if(!dateTime) return '';
|
||
|
|
let d = new Date(dateTime);
|
||
|
|
return d.getFullYear() + '-' + (d.getMonth()+1)
|
||
|
|
},
|
||
|
|
//根据image对象刷新高度
|
||
|
|
refreshImageHeight(image){
|
||
|
|
const that = this
|
||
|
|
if(!image){
|
||
|
|
that.carouselHeight = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let url = image.src;
|
||
|
|
this.refreshImageHeightByUrl(url);
|
||
|
|
},
|
||
|
|
//刷新轮播图高度
|
||
|
|
refreshImageHeightByUrl(url){
|
||
|
|
const that = this
|
||
|
|
let nImg = new Image();
|
||
|
|
nImg.src = url;
|
||
|
|
if(!nImg.height){
|
||
|
|
that.carouselHeight = '';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let width = nImg.width;
|
||
|
|
let height = nImg.height;
|
||
|
|
|
||
|
|
let maxWidth = document.body.offsetWidth;
|
||
|
|
// let maxHeight = document.body.offsetHeight;
|
||
|
|
|
||
|
|
let widthProportion = maxWidth/width;
|
||
|
|
that.carouselHeight = (height*widthProportion) + 'px';
|
||
|
|
},
|
||
|
|
//由轮播图变换触发的
|
||
|
|
changeCarouselHeight(index){
|
||
|
|
let image = document.querySelectorAll('.d1')[index];
|
||
|
|
this.refreshImageHeight(image);
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
|
||
|
|
.warp {
|
||
|
|
width: 1264px;
|
||
|
|
height: 120px;
|
||
|
|
margin: 0 auto;
|
||
|
|
overflow: hidden;
|
||
|
|
ul {
|
||
|
|
list-style: none;
|
||
|
|
padding: 0;
|
||
|
|
margin: 0 auto;
|
||
|
|
&.ul-item {
|
||
|
|
display: flex;
|
||
|
|
.li-item {
|
||
|
|
width: 120px;
|
||
|
|
height: 120px;
|
||
|
|
margin-right: 10px;
|
||
|
|
line-height: 120px;
|
||
|
|
background-color: #999;
|
||
|
|
color: #fff;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.OneTxt2{
|
||
|
|
font-size:2rem;
|
||
|
|
.OneTxt2_txt{
|
||
|
|
position: relative;
|
||
|
|
z-index: 2;
|
||
|
|
color:#006876;
|
||
|
|
}
|
||
|
|
.OneTxt2_back{
|
||
|
|
width: 8rem;
|
||
|
|
height: 1rem;
|
||
|
|
border-radius: 1%;
|
||
|
|
background-color: #fdf9d9;
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
top: -1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|