nyzy_vue/src/views/gateway/common/main.vue

<template>
  <div>
    <!-- <div class="ban"></div> -->
    <div class="contant">
			<div class="PageBox">
				<div class="scrollbox cl">
					<!-- 头条 -->
					<div id="scrollDiv">
						<el-carousel height="100px" direction="vertical" :autoplay="true" indicator-position="outside">
							<el-carousel-item v-for="(tt,ttIndex) in ttList" :key="ttIndex" class="toutiaoItem">
								<h2 class="toutiaoH" @click="$to('detailedPage',{id:tt.id})">{{tt.title}}</h2>
								<p class="elli" @click="$to('detailedPage',{id:tt.id})">{{$tfnm(tt,'content',60)}}</p>
							</el-carousel-item>
						</el-carousel>
					</div>
				</div>
				<div class="PageOne clearfloat">
					<!-- 轮播图 -->
					<div class="PageOneL left">
						<div id="inlunbo" class="pos1">
							<el-carousel height="400px">
								<el-carousel-item v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex">
									<a href="javascript:void(0);" @click="$to('detailedPage',{id:lbt.id})"><img :src="$tImg(lbt,'cover')"></a>
									<div class="luntxt">
										<a href="javascript:void(0);" class="ltxta elli" @click="$to('detailedPage',{id:lbt.id})" style="color:white">{{lbt.title}}</a>
									</div>
								</el-carousel-item>
							</el-carousel>
						</div>
					</div>
					<!-- 工作动态、行业要闻切换 -->
					<div class="PageOneR right">
						<div id="tab">
							<div class="PageOneRUp">
								<a href="javascript:void(0);"  @click="$to('listPage',{pid:currentTab})" class="gengdduo right">更多></a>
								<ul class="tab_menu">
								 	<li :class="currentTab == 301 ? 'selected' : ''" @mouseenter="changeTab(301)">工作动态</li>
									<li :class="currentTab == 302 ? 'selected' : ''" @mouseenter="changeTab(302)">行业要闻</li>
								</ul>
							</div>
							<div class="tab_box">
								<div class="tab_boxdas"  v-show="currentTab == 301">
									<ul>
										<li>
											<span class="tagup" @click="$to('detailedPage3',{id:gzdtList[0].id})">
												<h3 class="elli">{{gzdtList[0].title}}</h3>
												<p class="over-line2">{{$tfnm(gzdtList[0],'content',84)}}</p>
											</span>
										</li>
										<template v-for="(gzdt,gzdtIndex) in gzdtList">
										<li :key="gzdtIndex" >
											<template  v-if="gzdtIndex>0">
											<a class="clearfloat" href="javascript:void(0);" @click="$to('detailedPage3',{id:gzdt.id})">
												<h3 class="elli">> {{gzdt.title}}</h3>
												<span>{{gzdt.createTime}}</span>
											</a>
											</template>
										</li>
										</template>
									</ul>
								</div>
								<div class="tab_boxdas"  v-show="currentTab == 302">
									<ul>
										<li>
											<span class="tagup" @click="$to('detailedPage3',{id:hyywList[0].id})">
												<h3 class="elli">{{hyywList[0].title}}</h3>
												<p class="over-line2">{{$tfnm(hyywList[0],'content',84)}}</p>
											</span>
										</li>
										<li v-for="(hyyw,hyywIndex) in hyywList" :key="hyywIndex" >
											<template  v-if="hyywIndex>0">
											<a class="clearfloat" href="javascript:void(0);" @click="$to('detailedPage3',{id:hyyw.id})">
												<h3 class="elli">> {{hyyw.title}}</h3>
												<span>{{hyyw.createTime}}</span>
											</a>
											</template>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="kjrukou">
					<ul>
						<li>
							<a href="javascript:void(0);" @click="$to('listPage2',{pid:101,id:10101})">
								<span class="spanmg"><img src="img/k_01.png" ></span>
								<span class="spanmg1" style="display: none;"><img src="img/k_01-1.png" ></span>
								<h3>西部杂粮杂豆</h3>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" @click="$to('listPage2',{pid:101,id:10102})">
								<span class="spanmg"><img src="img/k_02.png" ></span>
								<span class="spanmg1" style="display: none;"><img src="img/k_02-2.png" ></span>
								<h3>东部经济资源</h3>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" @click="$to('listPage2',{pid:101,id:10103})">
								<span class="spanmg"><img src="img/k_03.png" ></span>
								<span class="spanmg1" style="display: none;"><img src="img/k_03-3.png" ></span>
								<h3>中部粮食资源</h3>
							</a>
						</li>
						<li>
							<a href="javascript:void(0);" @click="$to('listPage2',{pid:101,id:10104})">
								<span class="spanmg"><img src="img/k_05.png" ></span>
								<span class="spanmg1" style="display: none;"><img src="img/k_05-5.png" ></span>
								<h3>适宜吉林省种质资源</h3>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>

		
		
		<div class="hzjlbox">
			<div class="hzjl clearfloat">
				<div class="h_l left">
					<!-- 数据中心 -->
					<div class="h_lup clearfloat">
						<span class="h_lupl left">数据<span class="h_luph">中心</span></span>
						<a href="javascript:void(0);" @click="$to('listPage',{id:sjzxTab,pid:401})" class="right">更多></a>
					</div>
					<div id="tab">
						<ul class="tab_menu">
						 	<li :class="sjzxTab == 40101 ? 'selected' : ''" @mouseenter="changeTabSjzx(40101)">微观经济调查</li>
							<li :class="sjzxTab == 40102 ? 'selected' : ''" @mouseenter="changeTabSjzx(40102)">农业资源数据</li>
							<li :class="sjzxTab == 40103 ? 'selected' : ''" @mouseenter="changeTabSjzx(40103)">遥感数据</li>
						</ul>
					</div>
					<div class="h_ldown">
						<ul>
							<li  v-for="(kycg,kycgIndex) in sjzxList" :key="kycgIndex">
								<a href="javascript:void(0);" @click="$to('detailedPage3',{id:kycg.id})" class="elli">
									<span class="spimg">></span>
									{{kycg.title}}
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="h_r left">
					<!-- 科研成果 -->
					<div class="h_lup clearfloat">
						<span class="h_lupl left">科研<span class="h_luph">成果</span></span>
						<a href="javascript:void(0);" @click="$to('listPage',{id:kycgTab,pid:304})" class="right">更多></a>
					</div>
					<div id="tab">
						<ul class="tab_menu">
						 	<li :class="kycgTab == 30401 ? 'selected' : ''" @mouseenter="changeTabKycg(30401)">成果登记</li>
							<li :class="kycgTab == 30402 ? 'selected' : ''" @mouseenter="changeTabKycg(30402)">获奖情况</li>
							<li :class="kycgTab == 30403 ? 'selected' : ''" @mouseenter="changeTabKycg(30403)">发表论文</li>
						</ul>
					</div>
					<div class="h_rdown">
						<div class="spbox clearfloat">
							<span class="spimg"><img :src="kycgList[0].cover?$tImg(kycgList[0],'cover'):'img/kycg_1.png'" ></span>
							<div class="spcont">
								<a class="spydsb elli">{{kycgList[0].title}}</a>
								<p class="over-line2">{{$tfnm(kycgList[0],'content',84)}}</p>
								<div class="yueduit clearfloat">
									<a href="javascript:void(0);" @click="$to('detailedPage3',{id:kycgList[0].id})">[阅读]</a>
									<span>{{getYearMonthDay(kycgList[0].updateTime || kycgList[0].createTime)}}</span>
								</div>
							</div>
						</div>
						<ul>
							<template v-for="(kycg,kycgIndex) in kycgList">
								<template  v-if="kycgIndex>0">
									<li :key="kycgIndex">
										<a href="javascript:void(0);" @click="$to('detailedPage3',{id:kycg.id})" class="clearfloat">
											<span class="sadfa">></span>
											<h4 class="elli">{{kycg.title}}</h4>
											<span class="sadfasp">{{getYearMonthDay(kycg.updateTime || kycg.createTime)}}</span>
										</a>
									</li>
								</template>
							</template>
						</ul>
					</div>
				</div>
				<div class="h_l right">
					<!-- 政策文件 -->
					<div class="h_lup clearfloat">
						<span class="h_lupl left">政策<span class="h_luph">文件</span></span>
						<a href="javascript:void(0);"  @click="$to('listPage',{id:zcwjTab,pid:305})" class="right">更多></a>
					</div>
					<div id="tab">
						<ul class="tab_menu">
						 	<li :class="zcwjTab == 30501 ? 'selected' : ''" @mouseenter="changeTabZcwj(30501)">省内政策</li>
							<li :class="zcwjTab == 30502 ? 'selected' : ''" @mouseenter="changeTabZcwj(30502)">国内政策</li>
						</ul>
					</div>
					<div class="h_ldown">
						<ul>
							<li  v-for="(kycg,kycgIndex) in zcwjList" :key="kycgIndex">
								<a href="javascript:void(0);" @click="$to('detailedPage3',{id:kycg.id})" class="elli">
									<span class="spimg">></span>
									{{kycg.title}}
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="hzjl clearfloat">
			<div class="h_l left">
				<!-- 特色农业资源最新动态 -->
				<div class="h_lup clearfloat">
					<span class="h_lupl left">特色农业资源<span class="h_luph">最新动态</span></span>
					<a href="javascript:void(0);"  @click="$to('listPage',{pid:'306'})" class="right">更多></a>
				</div>
				<div class="h_ldown" style="margin-top: 14px;">
					<div class="tsnyzyb">
						<a href="" class="elli">{{tsnyzyList[0].title}}</a>
						<div class="tsnyzyimg"><img :src="tsnyzyList[0].cover?$tImg(tsnyzyList[0],'cover'):'img/tu3.png'" alt=""></div>
					</div>
					<ul>
						<template v-for="(kycg,kycgIndex) in tsnyzyList">
							<template  v-if="kycgIndex>0">
								<li   :key="kycgIndex">
										<a href="javascript:void(0);" @click="$to('detailedPage3',{id:kycg.id})" class="elli">
											<span class="spimg">></span>
											{{kycg.title}}
										</a>
								</li>
							</template>
						</template>
					</ul>
				</div>
			</div>
			<div class="h_r left">
				<!-- 合作交流 -->
				<div class="h_lup clearfloat">
					<span class="h_lupl left">合作<span class="h_luph">交流</span></span>
					<a href="javascript:void(0);"  @click="$to('listPage',{pid:303})" class="right">更多></a>
				</div>
				<div class="h_rdown" style="margin-top: 14px;">
					<div class="spbox clearfloat" >
						<span class="spimg"><img :src="hzjlList[0].cover?$tImg(hzjlList[0],'cover'):'img/kycg_1.png'" ></span>
						<div class="spcont">
							<a class="spydsb elli">{{hzjlList[0].title}}</a>
							<p class="over-line2">{{$tfnm(hzjlList[0],'content',84)}}</p>
							<div class="yueduit clearfloat">
									<a href="javascript:void(0);" @click="$to('detailedPage3',{id:hzjlList[0].id})">[阅读]</a>
								<span>{{getYearMonthDay(hzjlList[0].updateTime || hzjlList[0].createTime)}}</span>
							</div>
						</div>
					</div>
					<ul>
						<template v-for="(kycg,kycgIndex) in hzjlList" >
							<template v-if="kycgIndex>0">
								<li style="margin-top: 9px;" :key="kycgIndex">
									<a href="javascript:void(0);" @click="$to('detailedPage3',{id:kycg.id})" class="clearfloat">
										<span class="sadfa">></span>
										<h4 class="elli">{{kycg.title}}</h4>
										<span class="sadfasp">{{getYearMonthDay(kycg.updateTime || kycg.createTime)}}</span>
									</a>
								</li>
							</template>
						</template>
					</ul>
				</div>
			</div>
			<div class="h_l right">
				<!-- 专题专栏 -->
				<div class="h_lup clearfloat">
					<span class="h_lupl left">专题<span class="h_luph">专栏</span></span>
					<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50101})" class="right">更多></a>
				</div>
				<div class="h_ldown" style="margin-top: 14px;">
					<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50101})" class="elli" style="margin-bottom: 10px;"><img src="img/zt_1.png" alt="" style="height: 80px;"></a>
					<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50102})" class="elli" style="margin-bottom: 10px;"><img src="img/zt_2.png" alt="" style="height: 80px;"></a>
					<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50103})" class="elli" style="margin-bottom: 10px;"><img src="img/zt_3.png" alt="" style="height: 80px;"></a>
					<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50104})" class="elli"><img src="img/zt_4.png" alt="" style="height: 80px;"></a>
				</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,
      ttList:[],	//头条
	  lbtList:[],	//轮播图
      gzdtList:[],	//工作动态
      hyywList:[],	//行业要闻
      hzjlList:[],	//合作交流
      kycgList:[],	//科研成果
      zcwjList:[],	//政策文件
      tsnyzyList:[],	//特色农业资源最新动态
	  sjzxList:[],	//数据中心
      tzggList:[],
      linksKsdhList:[],
      linksYqljList:[],
      classOption: {
        limitMoveNum: 2,
        direction: 2,
      },
      carouselHeight: '',
	  currentTab:301,//工作动态/行业新闻
	  zcwjTab:30501,//政策文件
	  kycgTab:30401,//科研成果
	  sjzxTab:40101,//数据中心
    }
  },
  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;
  },
  updated(){
  },
  methods:{
    loadData(){
      //头条
      getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',columnId:'201',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.ttList = list;
        }
      });
      //轮播图
      getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',type:'首页轮播',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.lbtList = list;
        }
      });
      //工作动态
      getAction('/gateway/gatewayArticle/list',{pageSize:7,isRelease:'Y',columnId:'301',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.gzdtList = list;
        }
      });
      //行业要闻
      getAction('/gateway/gatewayArticle/list',{pageSize:7,isRelease:'Y',columnId:'302',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.hyywList = list;
        }
      });
	  //数据中心
      getAction('/gateway/gatewayArticle/list',{pageSize:7,isRelease:'Y',columnId:'40101',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.sjzxList = list;
        }
      });

      //科研成果
      getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'304',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.kycgList = list;
        }
      });

      //政策文件
      getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'30501',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.zcwjList = list;
        }
      });
      //特色农业资源最新动态
      getAction('/gateway/gatewayArticle/list',{pageSize:6,isRelease:'Y',columnId:'306',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.tsnyzyList = list;
        }
      });
      //合作交流
      getAction('/gateway/gatewayArticle/list',{pageSize:6,isRelease:'Y',columnId:'303',column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.hzjlList = list;
        }
      });
    },

	//工作动态、行业要闻切换
	changeTab(index){
		this.currentTab = index;
	},
	//数据中心
	changeTabSjzx(index){
		console.log('changeTabSjzx-->',index);
		this.sjzxTab = index;
		getAction('/gateway/gatewayArticle/list',{pageSize:7,isRelease:'Y',columnId:index,column: 'createTime',order: 'desc'}).then((res)=>{
			if(res.success){
			let list = res.result.records||res.result;
			this.sjzxList = list;
			}
		});
	},
	//科研成果
	changeTabKycg(index){
		this.kycgTab = index;
      getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:index,column: 'createTime',order: 'desc'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.kycgList = list;
        }
      });
	},
	//政策文件
	changeTabZcwj(index){
		this.zcwjTab = index;
		getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:index,column: 'createTime',order: 'desc'}).then((res)=>{
			if(res.success){
			let list = res.result.records||res.result;
			this.zcwjList = 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 widthProportion = maxWidth/width;
      that.carouselHeight = (height*widthProportion) + 'px';
    },
    //由轮播图变换触发的
    changeCarouselHeight(index){
      let image = document.querySelectorAll('.d1')[index];
      this.refreshImageHeight(image);
    },

	getDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getDate()
    },
    getMonthAndDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return (d.getMonth()+1)  + '-' + d.getDate();
    },
    getYearAndMonth(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
      return d.getFullYear() + '-' + (d.getMonth()+1)
    },
    getYearMonthDay(dateTime){
      if(!dateTime) return '';
      let d = new Date(dateTime);
	  var month = (d.getMonth()+1)
	  if(month<10){
		  month = "0"+(d.getMonth()+1)
	  }
	  var day = d.getDate()
	  if(d.getDate()<10){
		day = "0"+d.getDate()
	  }
      return d.getFullYear() + '-' + month + '-' +day
    },

  }
}
</script>

<style lang="less" scoped>
	h4{
		margin: 0;
	}

  .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;
    }
  }
  .toutiaoItem{
	width: 100%;
	height: 100px;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
	transition: 0.5s all;
	-webkit-transition: 0.5s all; 
	-moz-transition: 0.5s all; 
	-o-transition: 0.5s all;
  }
  .toutiaoH{
	font-size: 22px;
	font-weight: bold;
	margin-top: 8px;
	margin-bottom: 10px;
	color: #333;
  }

  
</style>