|
@@ -0,0 +1,452 @@
|
|
|
+<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">
|
|
|
+ <img v-lazy="picPath+item.infoimg" alt="" :key="item.infoId">
|
|
|
+ <nuxt-link :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">
|
|
|
+ <img v-lazy="picPath+item.infoimg" alt="" :key="item.infoId">
|
|
|
+ <div class="content-text">
|
|
|
+ <nuxt-link :to="{path: '/content', query:{id:item.infoId}}" class="line-one" 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}}" class="line-one" 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}}" class="line-one" 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}}" class="line-one" 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="">
|
|
|
+ <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="" :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">
|
|
|
+ <img v-lazy="picPath+item.infoimg" alt="" :key="item.infoId">
|
|
|
+ <nuxt-link 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">
|
|
|
+ <img v-lazy="picPath+mainData[41][0].infoimg" alt="">
|
|
|
+ <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>中国-东盟自由贸易区 中国-东盟信息港</p>
|
|
|
+ <p>东南亚国家联盟 中国-东盟博览会 一带一路</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">柬埔寨</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">文莱</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">印尼</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">新加坡</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">越南</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">缅甸</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">菲律宾</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">老挝</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">泰国</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">马来西亚</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
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ returnTop() {
|
|
|
+ window.scrollTo(0, 0);
|
|
|
+ },
|
|
|
+ showRemark(index){
|
|
|
+ this.showIndex=index;
|
|
|
+ },
|
|
|
+ moreArt(){
|
|
|
+ this.$router.push({name:'lists',params:{id:'focus'}});
|
|
|
+ },
|
|
|
+
|
|
|
+ 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>
|
|
|
+
|