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 class="scroltit">
						<small id="but_up"><img src="img/icon6.png"></small>
						<small id="but_down"><img src="img/icon6_1.png"></small>
					</div>
					<!-- 头条 -->
					<div id="scrollDiv">
						<ul>
							<li v-for="(tt,ttIndex) in ttList" :key="ttIndex">
								<a href="xiangqer.html">
									<h2>{{tt.title}}</h2>
									<p class="elli">{{tt.content}}</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="PageOne clearfloat">
					<div class="PageOneL left">
						<div id="inlunbo" class="pos1">
							<ul id="inlunone">
								<li class="lunactive" v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex">
									<!-- <a href="javascript:;"><img :src='${lbt.cover}'></a> -->
									<a href="javascript:;"><img :src="$tImg(lbt,'cover')"></a>
									<div class="luntxt">
										<a href="" class="ltxta elli">{{lbt.title}}</a>
									</div>
								</li>
								<!-- <li class="lunactive">
									<a href="javascript:;"><img src="img/tu1.png"></a>
									<div class="luntxt">
										<a href="" class="ltxta elli">省委专题会议：努力把人参产业打造成为千亿级优势产业</a>
									</div>
								</li>
								<li>
									<a href="javascript:;"><img src="img/tu5.png"></a>
									<div class="luntxt">
										<a href="" class="ltxta elli">王喜东局长深入亚泰集团走访调研王喜东局长深入亚泰集团走访调研</a>
									</div>
								</li>
								<li>
									<a href="javascript:;"><img src="img/tu6.png"></a>
									<div class="luntxt">
										<a href="" class="ltxta elli">王喜东局长深入亚泰集团走访调研王喜东局长深入亚泰集团走访调研</a>
									</div>
								</li> -->
							</ul>
							<ul id="inluntwo">
								<li class="lunactive">1</li>
								<li>2</li>
								<li>3</li>
							</ul>
						</div>
					</div>
					<div class="PageOneR right">
						<div id="menu">
							<div class="PageOneRUp">
								<ul id="nav">
								    <li><a href="#" class="selected">工作动态</a></li>
								    <li><a href="#" class="">行业要闻</a></li>
								</ul>
								<a href="gzdt.html" class="gengdduo right">more+</a>
							</div>
						   <div id="menu_con">
								<div class="tag" style="display: block;">
									<ul>
										<li>
											<span class="tagup">
												<h3 class="elli">{{gzdtList[0].title}}</h3>
												<p class="over-line2">{{gzdtList[0].content}}</p>
											</span>
										</li>
										<li v-for="(gzdt,gzdtIndex) in gzdtList" :key="gzdtIndex" >
											<template  v-if="gzdtIndex>0">
											<a class="clearfloat" href="xiangqer.html">
												<h3 class="elli">{{gzdt.title}}</h3>
												<span>{{gzdt.createTime}}</span>
											</a>
											</template>
										</li>
									</ul>
								</div> 
								<div class="tag" style="display:none">
									<ul>
										<li>
											<span class="tagup">
												<h3 class="elli">{{hyywList[0].title}}</h3>
												<p class="over-line2">{{hyywList[0].content}}</p>
											</span>
										</li>
										<li v-for="(hyyw,hyywIndex) in hyywList" :key="hyywIndex" >
											<template  v-if="hyywIndex>0">
											<a class="clearfloat" href="xiangqer.html">
												<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="nycyh.html">
								<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="sjzx.html">
								<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="pmjj.html">
								<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="ncpaq.html">
								<span class="spanmg"><img src="img/k_04.png" ></span>
								<span class="spanmg1" style="display: none;"><img src="img/k_04-4.png" ></span>
								<h3>农产品安全</h3>
							</a>
						</li>
						<li>
							<a href="zbbjgh.html">
								<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>
						<li>
							<a href="xmycyh.html">
								<span class="spanmg"><img src="img/k_06.png" ></span>
								<span class="spanmg1" style="display: none;"><img src="img/k_06-6.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="hzjl.html" class="right">more+</a>
					</div>
					<div class="h_ldown">
						<ul>
							<li v-for="(hzjl,hzjlIndex) in hzjlList" :key="hzjlIndex">
								<a href="xiangqer.html" class="elli">
									<span></span>
									{{hzjl.title}}
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="h_r right">
					<div class="h_lup clearfloat">
						<span class="h_lupl left">科研<span class="h_luph">成果</span></span>
						<a href="kycg.html" class="right">more+</a>
					</div>
					<div class="h_rdown">
						<ul>
							<li  v-for="(kycg,kycgIndex) in kycgList" :key="kycgIndex">
								<a href="xiangqer.html">
									<span class="spimg"><img :src="$tImg(kycg,'cover')" ></span>
									<h3 class="over-line2">{{kycg.title}}</h3>
									<p>{{kycg.content}}<span>[详情]</span></p>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="zcwjbox clearfloat">
			<div class="h_l left">
				<div class="h_lup clearfloat">
					<span class="h_lupl left">政策<span class="h_luph">文件</span></span>
					<a href="zcwj.html" class="right">more+</a>
				</div>
				<div class="z_ldown">
					<a href="xiangqer.html" class="zxwjbox clearfloat">
						<span class="z_img left"><img src="img/zxwj.png" ></span>
						<h3 class="over-line2 left">{{zcwjList[0].title}}</h3>
						<span class="z_date right">{{zcwjList[0].createTime}}</span>
					</a>
					<ul>
						<li v-for="(zcwj,zcwjIndex) in zcwjList" :key="zcwjIndex">
							<a href="xiangqer.html" class="clearfloat">
								<span class="jiantou left">></span>
								<h4 class="over-line2 left">{{zcwj.title}}</h4>
								<span class="c_span right">{{zcwj.createTime}}</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="h_r right">
				<div class="h_lup clearfloat">
					<span class="h_lupl left">特色农业资源<span class="h_luph">最新动态</span></span>
					<a href="tsnyzy.html" class="right">more+</a>
				</div>
				<div class="c_rdown clearfloat">
					<div class="c_rdownl left">
						<a href="xiangqer.html" class="gredsgre">{{tsnyzyList[0].title}}</a>
						<div class="c_sdfimg"><img :src="$tImg(tsnyzyList[0],'cover')" ></div>
						<p class="over-line2">{{tsnyzyList[0].content}}</p>
						<div class="clearfloat">
							<a href="" class="left" style="font-size: 14px;color: #EE8515;">[阅读]</a>
							<span class="right" style="color: #999999;font-size: 14px;">{{tsnyzyList[0].createTime}}</span>
						</div>
					</div>
					<div class="z_ldown right" style="width: 384px;">
						<ul>
							<li v-for="(tsnyzy,tsnyzyIndex) in tsnyzyList" :key="tsnyzyIndex">
								<a href="xiangqer.html" class="clearfloat">
									<span class="jiantou left">></span>
									<h4 class="over-line2 left">{{tsnyzy.title}}</h4>
									<span class="c_span right">{{tsnyzy.createTime}}</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="ztzlbox">
			<div class="ztzl">
				<div class="h_lup clearfloat">
					<span class="h_lupl left">专题<span class="h_luph">专栏</span></span>
					<a href="ztzl.html" class="right">more+</a>
				</div>
				<div class="ztzldown" style="margin-top: 20px;">
					<ul class="clearfloat">
						<li>
							<a href="ztzl.html"><img src="img/zt_1.png" ></a>
						</li>
						<li>
							<a href="szy.html"><img src="img/zt_2.png" ></a>
						</li>
						<li>
							<a href="qhzy.html"><img src="img/zt_3.png" ></a>
						</li>
						<li>
							<a href="swzy.html"><img src="img/zt_4.png" ></a>
						</li>
					</ul>
				</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:[],	//特色农业资源最新动态
      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',columnId:'201'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          this.ttList = list;
        }
      });


      //轮播图
      getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',type:'首页轮播'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
		  console.log('====>>>',list);
          // 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:7,isRelease:'Y',columnId:'301'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.gzdtList = list;
        }
      });
      //行业要闻
      getAction('/gateway/gatewayArticle/list',{pageSize:7,isRelease:'Y',columnId:'302'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.hyywList = list;
        }
      });
      //合作交流
      getAction('/gateway/gatewayArticle/list',{pageSize:8,isRelease:'Y',columnId:'303'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.hzjlList = list;
        }
      });
      //科研成果
      getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',columnId:'304'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.kycgList = list;
        }
      });
      //政策文件
      getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'305'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.zcwjList = list;
        }
      });
      //特色农业资源最新动态
      getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'306'}).then((res)=>{
        if(res.success){
          let list = res.result.records||res.result;
          // this.articleList = list;
          this.tsnyzyList = 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>