asean_nuxt/pages/index.vue

<template>
  <div class="m-box" :style="{height:boxHeight}">
    <div class="m-con auto" v-if="mainData">
      <div class="m1-box">
        <div class="m1-box-fl fl">
          <div class="m1-news-img" >
            <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop" v-if="swiperStatic">
              <swiper-slide v-for="(item,index) in swiperList" :key="index">
                <nuxt-link :to="{path: '/content', query:{id:item.infoId}}"  tag="a" target="_blank">
                  <img :src="item.path"><p class="line-one">{{item.title}}</p>
                </nuxt-link>
              </swiper-slide>
              <div class="swiper-button-next swiper-button-white" slot="button-next"></div>
              <div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
            </swiper>
            <img src="@/static/loading.png" style="height:498px;width:692px;margin-left:38px;" v-if="!swiperStatic"/>
          </div>
        </div>
        <div class="m1-box-fr fr">
          <div class="m1-fr-news-list clear">
            <div class='mt'>
              <h4>观察</h4>
              <hr></hr>
            </div>
            <ul>
              <li v-for="(item,index) in mainData[23]">
                <nuxt-link @mouseover.native="showRemark(index)" class="line-one" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                <div class="remark" v-if="showIndex==index">
                  <p class="line-n" style="-webkit-box-orient: vertical;">{{item.summary}}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="m-list clearfix">
        <div class="fl list-both-width-l">
          <Row class="english">
            <Col :span="11" v-for="(item,index) in mainData[43]" :key="index">
            <div class="en-title">
              <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank"><img v-lazy="picPath+item.infoimg" :alt="item.title" :key="item.infoId"></nuxt-link>
              <nuxt-link class="en-title-a" :to="{path: '/content', query:{id:item.infoId}}" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.title}}</nuxt-link>
            </div>
            </Col>
          </Row>
          <span class="blue-line"></span>
          <div class='mt'>
            <h4>焦点新闻</h4>
            <hr></hr>
          </div>
          <div class="content-item" v-for="item in focusNews">
            <nuxt-link class="img-a" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank"><img v-lazy="picPath+item.infoimg" :alt="item.title" :key="item.infoId"></nuxt-link>
            <div class="content-text">
              <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.title}}</nuxt-link>
              <p style="-webkit-box-orient: vertical;">{{item.summary}}</p>
              <div class="source" v-if="item.columnname.includes('—')">
                <nuxt-link :to="{path: '/lists', query:{id:item.parentcolumnId}}" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname.split('—')[0]}}</nuxt-link>
                <span>—</span>
                <nuxt-link :to="{path: '/lists', query:{id:item.columnId}}" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname.split('—')[1]}}</nuxt-link>
                <span>/{{item.uptimeStr}}</span>
              </div>
              <div class="source" v-else>
                <nuxt-link v-if="item.columnname" :to="{path: '/lists', query:{id:item.columnId}}"  style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.columnname}}/</nuxt-link>
                <span>{{item.uptimeStr}}</span>
              </div>
            </div>
          </div>
          <div class="more-art">
            <Button shape="circle" @click="moreArt">更多文章</Button>
          </div>
        </div>
        <div class="fl list-both-width">
          <ul class="add-img">
            <li v-for="item in adObj">
              <a :href="item.adurl" target="view_frame" >
                <img v-lazy="picPath+item.adimg" :key="item.infoId"/>
              </a>
            </li>
          </ul>
          <div class="column-item">
            <div class="column-title mt">
              <span></span>
              <h4>视频</h4>
              <div>
                <nuxt-link :to="{path: '/lists', query:{id:3}}" tag="a" target="_blank">更多</nuxt-link>
              </div>
            </div>
            <div class="column-content">
              <div class="column-video">
                <nuxt-link class="iconfont icon-bofang" :to="{path: '/content', query:{id:mainData[3][0].infoId}}" tag="a" target="_blank">
                  <img v-lazy="picPath+mainData[3][0].infoimg" :alt="mainData[3][0].title.title">
                  <p class="line-one">{{mainData[3][0].title}}</p>
                </nuxt-link>
              </div>
              <!--<div class="video">-->
              <!--<Row >-->
              <!--<Col :span="11" v-for="(item,index) in mainData[3]" :key="index" v-if="index!=0">-->
              <!--<div class="content-li" >-->
              <!--<nuxt-link class="iconfont icon-bofang" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">-->
              <!--<img v-lazy="picPath+item.infoimg" alt="">-->
              <!--</nuxt-link>-->
              <!--<nuxt-link class="vid-til" style="-webkit-box-orient: vertical;" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>-->
              <!--</div>-->

              <!--</Col>-->
              <!--</Row>-->
              <!--</div>-->
              <div class="video">
                <Row v-for="(item,index) in mainData[3]" :key="index" v-if="index!=0" class="video-list">
                  <Col :span="11" >
                  <div class="content-li" >
                    <nuxt-link class="iconfont icon-bofang" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">
                      <img v-lazy="picPath+item.infoimg" :alt="item.title" :key="item.infoId">
                    </nuxt-link>
                  </div>
                  </Col>
                  <Col :span="11">
                  <div class="content-li" >
                    <nuxt-link class="vid-til" style="-webkit-box-orient: vertical;" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                  </div>

                  </Col>
                </Row>
              </div>
              <!-- <div>
                  <ul>
                      <li v-for="(item,index) in mainData[3]">
                          <div class="content-li" v-if="index!=0">
                              <nuxt-link class="iconfont icon-bofang" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">
                                  <img v-lazy="picPath+item.infoimg" alt="">
                              </nuxt-link>
                              <nuxt-link :to="'/lists/'+item.infoId" class="line-one" style="-webkit-box-orient: vertical;" tag="a" target="_blank">{{item.title}}</nuxt-link>
                          </div>
                      </li>
                  </ul>
              </div> -->
            </div>
          </div>
          <div class="column-item">
            <div class="column-title mt">
              <span></span>
              <h4 @mouseenter="changeLiftColData(2)" >生活</h4>
              <div>
                <nuxt-link @mouseenter.native="changeLiftColData(9)" :to="{path: '/lists', query:{id:9}}" tag="a" target="_blank">旅游</nuxt-link>
                <nuxt-link @mouseenter.native="changeLiftColData(11)" :to="{path: '/lists', query:{id:11}}" tag="a" target="_blank">美食</nuxt-link>
                <nuxt-link @mouseenter.native="changeLiftColData(12)" :to="{path: '/lists', query:{id:12}}" tag="a" target="_blank">健康</nuxt-link>
                <nuxt-link @mouseenter.native="changeLiftColData(13)" :to="{path: '/lists', query:{id:13}}" tag="a" target="_blank">流行风</nuxt-link>
              </div>
            </div>
            <div class="column-content">
              <Row class="life">
                <Col :span="11" v-for="(item,index) in lifeColumnData" :key="index">
                <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank"><img v-lazy="picPath+item.infoimg" :alt="item.title" :key="item.infoId"></nuxt-link>
                <nuxt-link class="img-a" style="-webkit-box-orient: vertical;" :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                </Col>
              </Row>
            </div>
          </div>
          <div class="column-item">
            <div class="column-title mt">
              <span></span>
              <h4>文化</h4>
              <div>
                <nuxt-link :to="{path: '/lists', query:{id:24}}" tag="a" target="_blank">玄学</nuxt-link>
                <nuxt-link :to="{path: '/lists', query:{id:8}}" tag="a" target="_blank">娱乐</nuxt-link>
                <nuxt-link :to="{path: '/lists', query:{id:10}}" tag="a" target="_blank">文艺</nuxt-link>
              </div>
            </div>
            <div class="column-content">
              <div class="cul-top">
                <nuxt-link :to="{path: '/content', query:{id:mainData[41][0].infoId}}" tag="a" target="_blank"><img v-lazy="picPath+mainData[41][0].infoimg" :alt="mainData[41][0].title"></nuxt-link>
                <nuxt-link :to="{path: '/content', query:{id:mainData[41][0].infoId}}" tag="a" target="_blank">{{mainData[41][0].title}}</nuxt-link>
              </div>
              <div class="culture">
                <ul>
                  <li v-for="(item,index) in mainData[41]" v-if="index!=0" class="line-one">
                    <nuxt-link  :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="column-item">
            <div class="column-title mt">
              <span></span>
              <h4>服务</h4>
            </div>
            <div class="column-content">
              <div class="service">
                <div class="service-list">
                  <img src="~/assets/img/20.png" alt="">
                  <ul>
                    <li class="line-one" v-for="item in mainData[20]">
                      <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                    </li>
                  </ul>
                </div>
                <div class="service-list">
                  <img src="~/assets/img/21.png" alt="">
                  <ul>
                    <li class="line-one" v-for="item in mainData[21]">
                      <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                    </li>
                  </ul>
                </div>
                <div class="service-list">
                  <img src="~/assets/img/19.png" alt="">
                  <ul>
                    <li class="line-one" v-for="item in mainData[19]">
                      <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                    </li>
                  </ul>
                </div>
                <div class="service-list">
                  <img src="~/assets/img/17.png" alt="">
                  <ul>
                    <li class="line-one" v-for="item in mainData[17]">
                      <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                    </li>
                  </ul>la
                </div>
                <div class="service-list">
                  <img src="~/assets/img/14.png" alt="">
                  <ul>
                    <li class="line-one" v-for="item in mainData[14]">
                      <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" tag="a" target="_blank">{{item.title}}</nuxt-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="column-item" style="margin-bottom:10px;">
            <div class="column-title mt">
              <span></span>
              <h4>词条</h4>
            </div>
            <div class="column-content">
              <div class="wiki-top">
                <p>中国-东盟自由贸易区&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国-东盟信息港</p>
                <p>东南亚国家联盟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;中国-东盟博览会&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;一带一路</p>
              </div>
              <div>
                <Row class="wiki">
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/kh.png" tag="a" target="_blank" alt="柬埔寨">柬埔寨</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/bn.png" tag="a" target="_blank" alt="文莱">文莱</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/id.png" tag="a" target="_blank" alt="印尼">印尼</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/sg.png" tag="a" target="_blank" alt="新加坡">新加坡</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/vn.png" tag="a" target="_blank" alt="越南">越南</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/mm.png" tag="a" target="_blank" alt="缅甸">缅甸</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">

                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/ph.png" tag="a" target="_blank" alt="菲律宾">菲律宾</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/la.png" tag="a" target="_blank" alt="老挝">老挝</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/th.png" tag="a" target="_blank" alt="泰国">泰国</nuxt-link>
                  </li>
                  </Col>
                  <Col :span="8">
                  <li>
                    <nuxt-link :to="{path: '/lists', query:{id:5}}"><img src="~/assets/img/ten_icon/my.png" tag="a" target="_blank" alt="马来西亚">马来西亚</nuxt-link>
                  </li>
                  </Col>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div @click="returnTop" class="return-top"></div>
      <div class="f-friend">
        <Row>
          <Col :span="14">
          <div class="declaration">
            <p>版权声明</p>
            <p>本网站部分信息来源于互联网络，如有侵犯版权，请联系我们及时处理。凡注明“来源:东盟头条”的所有作品，均为东盟头条新闻社、东盟头条新闻网以及东盟头条APP合法拥有版权或有权使用的作品，欢迎媒体转载。</p>
          </div>

          </Col>
          <Col :span="10">
          <div class="declaration">
            <p>联系我们</p>
            <ul>
              <li>地址：柬埔寨王国金边市堆谷区606路38号</li>
              <li>电话：00855-023235388   传真：00855-023235389</li>
              <li>电子邮箱：aseantop@163.com</li>
            </ul>
          </div>

          </Col>
        </Row>
      </div>
    </div>
    <!--<Spin fix size="large" v-if="!mainData"></Spin>-->
  </div>
</template>
<script>
  import { mainAd, getMainData, listColumnInfo, listFocusInfo, listWordbar } from '~/api/homePage';
  export default {
    data() {
      return {
        picPath: 'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/',
        suffix:'?x-oss-process=image/watermark,image_d2F0ZXJtYXJrL3dtMS5wbmc_eC1vc3MtcHJvY2Vzcz1pbWFnZS9yZXNpemUsUF8zMA==,g_se,x_10,y_10,t_70',
        swiperList: [],
        adObj: {},
        mainData: null,
        focusNews:null,
        showIndex:5,
        lifeColumnKey: 2,
        lifeColumnData: [],
        swiperOptionTop: {
          spaceBetween: 10,
          loop: true,
          loopedSlides: 5, //looped slides should be the same
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          },
          autoplay: {
            delay: 2500,
            disableOnInteraction: false
          },
        },
        swiperOptionThumbs: {
          spaceBetween: 10,
          slidesPerView: 4,
          touchRatio: 0.2,
          loop: true,
          loopedSlides: 5, //looped slides should be the same
          slideToClickedSlide: true,
        },
//        boxHeight:document.documentElement.clientHeight-295+"px"//页面的默认高度
        boxHeight:500+'px',
        swiperStatic:false,

      };
    },
    async asyncData(){
      let swiperListArray = [];
      let [adObj, mainData,focusNews,swiperList] = await Promise.all([
        mainAd(),
        listColumnInfo({reqdata:{columnIds:'2,3,43,23,41,14,17,19,20,21,9,11,12,13'}}),
        listFocusInfo({"page": "1","rows": "16", "reqdata": {"type": "focus"}}),
        listFocusInfo({"page": "1","rows": "16", "reqdata": {"type": "recommend"}})
      ])

      swiperList.list.map(item => {
        swiperListArray.push({
            path: 'http://pic-asean2.oss-cn-hongkong.aliyuncs.com/' + item.infoimg,
            infoId: item.infoId,
            title:item.title
          });
        });

      return {
        adObj:adObj.object,
        mainData:mainData.object,
        lifeColumnData:mainData.object[2],
        focusNews:focusNews.list,
        swiperList:swiperListArray
      }
    },
    mounted() {
      this.swiperStatic=true;
    },
    updated(){
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper
        // const swiperThumbs = this.$refs.swiperThumbs.swiper
        // swiperTop.controller.control = swiperThumbs
        // swiperThumbs.controller.control = swiperTop
      })
    },
    head() {
        return {
            title: '东盟头条—聚焦东盟 关注中国 放眼世界',
            meta: [{
                name: 'keywords',
                content: '东盟头条,aseantop,柬埔寨,文莱,印尼,新加坡,越南,缅甸,菲律宾,老挝,泰国,马来西亚'
            },{
                name: 'description',
                content: '东盟头条新闻社（ASEAN TOP NEWS）旗下另一个重要媒体平台东盟头条新闻网（www.aseantop.com；www.aseantop.net）。东盟头条新闻网设有要闻聚焦、东盟动态、中国政情、环球瞭望、头条观察、高端访谈、看中国、华侨华人、文化生活等多个特色板块，网站秉持“独立、客观、公正、专业”的新闻理念，平实报道和评论东盟各国以及中国的重要动态，为各界人士提供可靠可信可读的有价值信息。'
            }],
        }
    },
    methods: {
      returnTop() {
        window.scrollTo(0, 0);
      },
      showRemark(index){
        this.showIndex=index;
      },
      moreArt(){
        // this.$router.push({path:'/lists',query:{id:'focus'}});
        let routeData = this.$router.resolve({
          path: '/lists',
          query: { id: 'focus' }
        })
        window.open(routeData.href, '_blank')
      },

      changeLiftColData(columnId){
        this.lifeColumnData=this.mainData[columnId]
      }
    }
  };
</script>
<style lang="scss" scoped>
  .swiper-container {
    background-color: #000;
    // opacity: 0.8;
  }
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  .gallery-top {
    height: 80%!important;
    width: 100%;
  }
  .gallery-thumbs {
    height: 20%!important;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .gallery-thumbs .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
</style>