|
|
@@ -1,23 +1,33 @@
|
|
|
<template>
|
|
|
- <div class="home" :class="{ homeOther: state !== 'home' }" :style="{ backgroundImage: `url(${getSceneImg()})` }">
|
|
|
+ <div
|
|
|
+ class="home"
|
|
|
+ :class="{ homeOther: state !== 'home' }"
|
|
|
+ :style="{ backgroundImage: `url(${getSceneImg()})` }"
|
|
|
+ >
|
|
|
<div class="baiyun">
|
|
|
<img class="baiyun2" src="@/assets/images/home/baiyun2.png" alt="" />
|
|
|
<img class="baiyun4" src="@/assets/images/home/baiyun4.png" alt="" />
|
|
|
</div>
|
|
|
<!-- :style="{ 'width': state == 'product' ? '100%' : '' }" -->
|
|
|
- <div class="left-box" :style="{ width: state == 'video' || state == 'route' ? '100%' : '' }">
|
|
|
+ <div
|
|
|
+ class="left-box"
|
|
|
+ :style="{ width: state == 'video' || state == 'route' ? '100%' : '' }"
|
|
|
+ >
|
|
|
<img class="gridding" src="@/assets/images/home/gridding.png" alt="" />
|
|
|
<div v-show="state == 'home'" class="home-page">
|
|
|
<div class="title">
|
|
|
<div>湖南省湘西土家族苗族自治州</div>
|
|
|
<img src="@/assets/images/home/title-white.png" alt="" />
|
|
|
</div>
|
|
|
- <div class="explore" @click="() => {
|
|
|
- state = 'product';
|
|
|
- changeType(dataAll.product.list[0]);
|
|
|
- changeBgMusic(true)
|
|
|
- }
|
|
|
- ">
|
|
|
+ <div
|
|
|
+ class="explore"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ state = 'product';
|
|
|
+ changeBgMusic(true);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
开始探索
|
|
|
<img src="@/assets/images/home/nextIcon.png" alt="" />
|
|
|
</div>
|
|
|
@@ -48,14 +58,25 @@
|
|
|
<div class="right" v-show="state === 'info'"></div>
|
|
|
</div> -->
|
|
|
<!-- 简介 -->
|
|
|
- <div class="list-item" style="animation-duration: 4.5s" @click="() => {
|
|
|
- state = 'product';
|
|
|
- }
|
|
|
- ">
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ style="animation-duration: 4.5s"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ state = 'product';
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="content" :class="{ contentAc: state === 'product' }">
|
|
|
- <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.product.id + 1}${state === 'product' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- " alt="" />
|
|
|
+ <img
|
|
|
+ class="number-img"
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/home/0${dataAll.product.id + 1}${
|
|
|
+ state === 'product' ? '_Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div class="item-right">
|
|
|
<div class="top">{{ dataAll.product.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.product.disc }}</div>
|
|
|
@@ -64,14 +85,25 @@
|
|
|
<div class="right" v-show="state === 'product'"></div>
|
|
|
</div>
|
|
|
<!-- 全景 -->
|
|
|
- <div class="list-item" style="animation-duration: 3.5s" @click="() => {
|
|
|
- (state = 'full'), (currentV = dataAll.full.content[0]);
|
|
|
- }
|
|
|
- ">
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ style="animation-duration: 3.5s"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ (state = 'full'), (currentV = dataAll.full.content[0]);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="content" :class="{ contentAc: state === 'full' }">
|
|
|
- <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.full.id + 1}${state === 'full' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- " alt="" />
|
|
|
+ <img
|
|
|
+ class="number-img"
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/home/0${dataAll.full.id + 1}${
|
|
|
+ state === 'full' ? '_Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div class="item-right">
|
|
|
<div class="top">{{ dataAll.full.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.full.disc }}</div>
|
|
|
@@ -80,14 +112,24 @@
|
|
|
<div class="right" v-show="state === 'full'"></div>
|
|
|
</div>
|
|
|
<!-- 线路 -->
|
|
|
- <div class="list-item" @click="() => {
|
|
|
- (state = 'route'), (currentV = dataAll.route.content[0]);
|
|
|
- }
|
|
|
- ">
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ (state = 'route'), (currentV = dataAll.route.content[0]);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="content" :class="{ contentAc: state === 'route' }">
|
|
|
- <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.route.id + 1}${state === 'route' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- " alt="" />
|
|
|
+ <img
|
|
|
+ class="number-img"
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/home/0${dataAll.route.id + 1}${
|
|
|
+ state === 'route' ? '_Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<div class="item-right">
|
|
|
<div class="top">{{ dataAll.route.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.route.disc }}</div>
|
|
|
@@ -96,18 +138,33 @@
|
|
|
<div class="right" v-show="state === 'route'"></div>
|
|
|
</div>
|
|
|
<!-- 展馆 -->
|
|
|
- <div class="list-item" style="animation-duration: 4s" @click="() => {
|
|
|
- state = 'scene';
|
|
|
- }
|
|
|
- ">
|
|
|
- <div class="content" :class="{ contentAc: state === 'scene' }">
|
|
|
- <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.scenes.id + 1}${state === 'scene' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- " alt="" />
|
|
|
- <div class="item-right" @click="() => {
|
|
|
- state = 'info';
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ style="animation-duration: 4s"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ state = 'scene';
|
|
|
}
|
|
|
- ">
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="content" :class="{ contentAc: state === 'scene' }">
|
|
|
+ <img
|
|
|
+ class="number-img"
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/home/0${dataAll.scenes.id + 1}${
|
|
|
+ state === 'scene' ? '_Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="item-right"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ state = 'info';
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="top">{{ dataAll.scenes.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.scenes.disc }}</div>
|
|
|
</div>
|
|
|
@@ -115,61 +172,106 @@
|
|
|
<div class="right" v-show="state === 'scene'"></div>
|
|
|
</div>
|
|
|
<!-- 视频 -->
|
|
|
- <div class="list-item" @click="() => {
|
|
|
- state = 'video'; (currentV = showVideoList[0]);
|
|
|
- }
|
|
|
- ">
|
|
|
- <div class="content" :class="{ contentAc: state === 'video' }">
|
|
|
- <img class="number-img" :src="require(`@/assets/images/home/0${dataAll.video.id + 1}${state === 'video' ? '_Ac' : ''
|
|
|
- }.png`)
|
|
|
- " alt="" />
|
|
|
- <div class="item-right" @click="() => {
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
state = 'video';
|
|
|
+ currentV = showVideoList[0];
|
|
|
}
|
|
|
- ">
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="content" :class="{ contentAc: state === 'video' }">
|
|
|
+ <img
|
|
|
+ class="number-img"
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/home/0${dataAll.video.id + 1}${
|
|
|
+ state === 'video' ? '_Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ class="item-right"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ state = 'video';
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
<div class="top">{{ dataAll.video.name }}</div>
|
|
|
<div class="bottom">{{ dataAll.video.disc }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right" v-show="state === 'video'"></div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 列表右侧 -->
|
|
|
<div class="babar-content" v-show="state != 'home'">
|
|
|
<!-- 简介 -->
|
|
|
<!-- introData.rtf || -->
|
|
|
- <div class="info-box" id="scroll-box" v-show="state == 'info'"
|
|
|
- v-html="introData.rtf || dataAll.info.content.info"></div>
|
|
|
+ <div
|
|
|
+ class="info-box"
|
|
|
+ id="scroll-box"
|
|
|
+ v-show="state == 'info'"
|
|
|
+ v-html="introData.rtf || dataAll.info.content.info"
|
|
|
+ ></div>
|
|
|
<!-- 全景 -->
|
|
|
<div class="full-box" v-show="state == 'full'">
|
|
|
<div class="v-list">
|
|
|
- <div class="list-item" :class="{ active: currentV.name == item.name }" v-for="item in dataAll.full.content"
|
|
|
- :key="item.id" @click="() => {
|
|
|
- currentV = item;
|
|
|
- activequanjing = item.id;
|
|
|
- }
|
|
|
- ">
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ :class="{ active: currentV.name == item.name }"
|
|
|
+ v-for="item in dataAll.full.content"
|
|
|
+ :key="item.id"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ currentV = item;
|
|
|
+ activequanjing = item.id;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
{{ item.name }}
|
|
|
<div class="bottomAc" v-show="currentV.name == item.name"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="v-full-box">
|
|
|
- <div class="full-item" v-for="item in currentV.scenes" :key="item.name"
|
|
|
- :class="{ hover: isShade && currentHoverName === item.name }" @click="openHtml(item.link, currentV.id)"
|
|
|
- @mousemove="() => {
|
|
|
- (isShade = true), (currentHoverName = item.name);
|
|
|
- }
|
|
|
- " @mouseleave="() => {
|
|
|
+ <div
|
|
|
+ class="full-item"
|
|
|
+ v-for="item in currentV.scenes"
|
|
|
+ :key="item.name"
|
|
|
+ :class="{ hover: isShade && currentHoverName === item.name }"
|
|
|
+ @click="openHtml(item.link, currentV.id)"
|
|
|
+ @mousemove="
|
|
|
+ () => {
|
|
|
+ (isShade = true), (currentHoverName = item.name);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ @mouseleave="
|
|
|
+ () => {
|
|
|
(isShade = false), (currentHoverName = '');
|
|
|
}
|
|
|
- ">
|
|
|
- <img style="min-height: 15.5vh"
|
|
|
- :src="` ${item.coverImg.includes('https') ? item.coverImg : baseUrl + '/images/panorama/' + currentV.id + '/' + item.coverImg}`"
|
|
|
- alt="" />
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ style="min-height: 15.5vh"
|
|
|
+ :src="` ${
|
|
|
+ item.coverImg.includes('https')
|
|
|
+ ? item.coverImg
|
|
|
+ : baseUrl +
|
|
|
+ '/images/panorama/' +
|
|
|
+ currentV.id +
|
|
|
+ '/' +
|
|
|
+ item.coverImg
|
|
|
+ }`"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<img class="border" src="@/assets/images/new/qjbg.png" alt="" />
|
|
|
- <div class="shade-box" v-show="isShade && currentHoverName === item.name">
|
|
|
+ <div
|
|
|
+ class="shade-box"
|
|
|
+ v-show="isShade && currentHoverName === item.name"
|
|
|
+ >
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
<!-- <img v-if="currentHoverName != item.name" src="@/assets/images/new/qjbg.png" alt=""> -->
|
|
|
@@ -178,18 +280,28 @@
|
|
|
</div>
|
|
|
<!-- 展馆 -->
|
|
|
<div class="scene-box" v-show="state == 'scene'" id="scroll-scenes">
|
|
|
- <div class="box-item" v-for="item in dataAll.scenes.content" :key="item.id" :id="`scene${item.id}`"
|
|
|
- @click="openHtml(item.link, item.id)">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="item in dataAll.scenes.content"
|
|
|
+ :key="item.id"
|
|
|
+ :id="`scene${item.id}`"
|
|
|
+ @click="openHtml(item.link, item.id)"
|
|
|
+ >
|
|
|
<div class="box-item-info">
|
|
|
<div class="text title">{{ item.title1 }}</div>
|
|
|
<div class="text" :class="{ textlange: item.title2.length > 10 }">
|
|
|
{{ item.title2 }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <img :src="item.coverImg" @error="(e) => {
|
|
|
- e.target.src = item.coverImg;
|
|
|
- }
|
|
|
- " alt="" />
|
|
|
+ <img
|
|
|
+ :src="item.coverImg"
|
|
|
+ @error="
|
|
|
+ (e) => {
|
|
|
+ e.target.src = item.coverImg;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 新版简介 -->
|
|
|
@@ -197,9 +309,12 @@
|
|
|
<div class="select-box">
|
|
|
<!-- 类别选择 -->
|
|
|
<div class="category-box">
|
|
|
- <div class="box-item" v-for="item in introduction.length
|
|
|
- ? introduction
|
|
|
- : dataAll.product.list" :key="item.id" @click="changeType(item)">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="item in introduction"
|
|
|
+ :key="item.id"
|
|
|
+ @click="changeType(item)"
|
|
|
+ >
|
|
|
{{ item.name }}
|
|
|
<div class="bottomAc" v-show="productActive == item.name"></div>
|
|
|
</div>
|
|
|
@@ -208,13 +323,26 @@
|
|
|
<div class="result-box" id="result-box-div">
|
|
|
<!-- 日期排布 -->
|
|
|
<div v-show="productActive === '大事纪'" class="category-box">
|
|
|
- <div class="box-item" v-for="item in daShiJiList" :key="item.id" @click="changeYear(item)">
|
|
|
+ <div
|
|
|
+ class="box-item"
|
|
|
+ v-for="item in daShiJiList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="changeYear(item)"
|
|
|
+ >
|
|
|
{{ item.year }}
|
|
|
<div class="bottomAc" v-show="productYearActive == item"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="result-html" v-if="productActive === '大事纪'" :style="{marginTop: productActive === '大事纪' ?'80px':'' }">
|
|
|
- <div v-html="item.text" v-for="item in productYearActive.list" :key="item.text"></div>
|
|
|
+ <div
|
|
|
+ class="result-html"
|
|
|
+ v-if="productActive === '大事纪'"
|
|
|
+ :style="{ marginTop: productActive === '大事纪' ? '80px' : '' }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-html="item.text"
|
|
|
+ v-for="item in productYearActive.list"
|
|
|
+ :key="item.text"
|
|
|
+ ></div>
|
|
|
</div>
|
|
|
<div v-else class="result-html" v-html="productHtml"></div>
|
|
|
</div>
|
|
|
@@ -222,29 +350,46 @@
|
|
|
<!-- 视频 -->
|
|
|
<div class="video-box" v-show="state == 'video'">
|
|
|
<div class="v-list">
|
|
|
- <div class="list-item" :class="{ active: currentV.name == item.name }" v-for="item in showVideoList"
|
|
|
- :key="item.id" @click="() => {
|
|
|
- currentV = item;
|
|
|
- activeshiping = item.id;
|
|
|
- }
|
|
|
- ">
|
|
|
+ <div
|
|
|
+ class="list-item"
|
|
|
+ :class="{ active: currentV.name == item.name }"
|
|
|
+ v-for="item in showVideoList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ currentV = item;
|
|
|
+ activeshiping = item.id;
|
|
|
+ }
|
|
|
+ "
|
|
|
+ >
|
|
|
{{ item.name }}
|
|
|
<div class="bottomAc" v-show="currentV.name == item.name"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="video-content">
|
|
|
- <swiper class="swiper" :style="{ '--swiper-navigation-size': 0 }" :options="swiperOptions">
|
|
|
- <swiper-slide class="slide-item" v-for="(item, index) in currentV.list" :key="index">
|
|
|
- <div class="content-item" @click="isOpenVideo = true, curOpenVideoItem = item">
|
|
|
- <img src="@/assets/images/home/play.png" alt="">
|
|
|
+ <swiper
|
|
|
+ class="swiper"
|
|
|
+ :style="{ '--swiper-navigation-size': 0 }"
|
|
|
+ :options="swiperOptions"
|
|
|
+ >
|
|
|
+ <swiper-slide
|
|
|
+ class="slide-item"
|
|
|
+ v-for="(item, index) in currentV.list"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="content-item"
|
|
|
+ @click="(isOpenVideo = true), (curOpenVideoItem = item)"
|
|
|
+ >
|
|
|
+ <img src="@/assets/images/home/play.png" alt="" />
|
|
|
<img class="line" src="@/assets/images/new/qjbg.png" alt="" />
|
|
|
<video :src="`${baseUrl}/video/${item.link}`"></video>
|
|
|
<div>{{ item.name }}</div>
|
|
|
</div>
|
|
|
</swiper-slide>
|
|
|
</swiper>
|
|
|
- <img class="prev" src="@/assets/images/home/left.png" alt="">
|
|
|
- <img class="next" src="@/assets/images/home/right.png" alt="">
|
|
|
+ <img class="prev" src="@/assets/images/home/left.png" alt="" />
|
|
|
+ <img class="next" src="@/assets/images/home/right.png" alt="" />
|
|
|
<div class="swiper-button-prev"></div>
|
|
|
<div class="swiper-button-next"></div>
|
|
|
</div>
|
|
|
@@ -258,48 +403,115 @@
|
|
|
<!-- 视频播放页面 -->
|
|
|
<div class="openVideo-box" v-if="isOpenVideo">
|
|
|
<!-- <video :src="curOpenVideoItem.link" controls></video> -->
|
|
|
- <videoBox @play="changeBgMusic(false)" @pause="changeBgMusic(true)" class="videoBox" :src="curOpenVideoItem.link" :name="curOpenVideoItem.name" :baseUrl="baseUrl" />
|
|
|
+ <videoBox
|
|
|
+ @play="changeBgMusic(false)"
|
|
|
+ @pause="changeBgMusic(true)"
|
|
|
+ class="videoBox"
|
|
|
+ :src="curOpenVideoItem.link"
|
|
|
+ :name="curOpenVideoItem.name"
|
|
|
+ :baseUrl="baseUrl"
|
|
|
+ />
|
|
|
<!-- <div>{{ curOpenVideoItem.name }}</div> -->
|
|
|
- <img @click="() => {
|
|
|
- isOpenVideo = false
|
|
|
- changeBgMusic(true)
|
|
|
- }" src="@/assets/images/home/close.png" alt="">
|
|
|
+ <img
|
|
|
+ @click="
|
|
|
+ () => {
|
|
|
+ isOpenVideo = false;
|
|
|
+ changeBgMusic(true);
|
|
|
+ }
|
|
|
+ "
|
|
|
+ src="@/assets/images/home/close.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
</div>
|
|
|
<!-- 村庄标签 -->
|
|
|
- <div class="v-labels info" :class="{ active: item.id == activeStep }" v-show="state == 'info'"
|
|
|
- v-for="item in dataAll.vLabels" @click="goAnchor(item.id)" :key="item.id + 'info'"
|
|
|
- :style="{ top: item.top, right: item.right }">
|
|
|
+ <div
|
|
|
+ class="v-labels info"
|
|
|
+ :class="{ active: item.id == activeStep }"
|
|
|
+ v-show="state == 'info'"
|
|
|
+ v-for="item in dataAll.vLabels"
|
|
|
+ @click="goAnchor(item.id)"
|
|
|
+ :key="item.id + 'info'"
|
|
|
+ :style="{ top: item.top, right: item.right }"
|
|
|
+ >
|
|
|
<img :src="item.id == activeStep ? lable3a : lable3" alt="" />
|
|
|
<div style="width: 100%">{{ item.name }}</div>
|
|
|
</div>
|
|
|
<!-- quanjing -->
|
|
|
- <div class="v-labels full" :class="{ active: item.id == activequanjing, mxd: item.class == 'mxd' }"
|
|
|
- v-show="state == 'full'" v-for="item in dataAll.full.vLabels" @click="handlequanjing(item)"
|
|
|
- :key="item.id + 'full'" :style="{ top: item.top, right: item.right }">
|
|
|
- <img v-if="item.class == 'mxd'" :src="item.id == activequanjing ? mxda : mxd" alt="" />
|
|
|
- <img v-else-if="item.class == 'youke'" style="transform: scale(1.1);margin-top: 10px;" :src="item.id == activequanjing ? youkea : youke" alt="" />
|
|
|
+ <div
|
|
|
+ class="v-labels full"
|
|
|
+ :class="{ active: item.id == activequanjing, mxd: item.class == 'mxd' }"
|
|
|
+ v-show="state == 'full'"
|
|
|
+ v-for="item in dataAll.full.vLabels"
|
|
|
+ @click="handlequanjing(item)"
|
|
|
+ :key="item.id + 'full'"
|
|
|
+ :style="{ top: item.top, right: item.right }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="item.class == 'mxd'"
|
|
|
+ :src="item.id == activequanjing ? mxda : mxd"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.class == 'youke'"
|
|
|
+ style="transform: scale(1.1); margin-top: 10px"
|
|
|
+ :src="item.id == activequanjing ? youkea : youke"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<img v-else :src="item.id == activequanjing ? lable3a : lable3" alt="" />
|
|
|
- <div style="width: 100%">{{ item.displayName? item.displayName : item.name }}</div>
|
|
|
+ <div style="width: 100%">
|
|
|
+ {{ item.displayName ? item.displayName : item.name }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 展馆标签 -->
|
|
|
- <div class="v-labels" :class="{
|
|
|
- active: item.id == activeScene,
|
|
|
- mxd: item.class == 'mxd',
|
|
|
- fyx: item.class == 'fyx',
|
|
|
- znzhmz: item.class == 'znzhmz',
|
|
|
- cunbu: item.class == 'cunbu',
|
|
|
- chenlie: item.class == 'chenlie'
|
|
|
- }" v-show="state == 'scene' && (sceneState ? item.id > 50 : item.id < 50)" v-for="item in dataAll.scenes.content"
|
|
|
- :key="item.id + 'scene'" :style="{ top: item.top, right: item.right }" @click="goSceneAnchor(item.id)">
|
|
|
- <img v-if="item.class == 'mxd'" :src="item.id == activeScene ? mxda : mxd" alt="" />
|
|
|
- <img v-else-if="item.class == 'znzhmz'" :src="item.id == activeScene ? changurla : changurl" style="width: 320px"
|
|
|
- alt="" />
|
|
|
- <img v-else-if="item.class == 'fyx'" style="transform: rotate(180deg)" :src="item.id == activeScene ? mxda : mxd"
|
|
|
- alt="" />
|
|
|
- <img v-else-if="item.class == 'chenlie'" :src="item.id == activeScene ? chenliea : chenlie" alt="" />
|
|
|
- <img v-else-if="item.class == 'cunbu'" :src="item.id == activeScene ? cunbua : cunbu" alt="" />
|
|
|
+ <div
|
|
|
+ class="v-labels"
|
|
|
+ :class="{
|
|
|
+ active: item.id == activeScene,
|
|
|
+ mxd: item.class == 'mxd',
|
|
|
+ fyx: item.class == 'fyx',
|
|
|
+ znzhmz: item.class == 'znzhmz',
|
|
|
+ cunbu: item.class == 'cunbu',
|
|
|
+ chenlie: item.class == 'chenlie',
|
|
|
+ }"
|
|
|
+ v-show="state == 'scene' && (sceneState ? item.id > 50 : item.id < 50)"
|
|
|
+ v-for="item in dataAll.scenes.content"
|
|
|
+ :key="item.id + 'scene'"
|
|
|
+ :style="{ top: item.top, right: item.right }"
|
|
|
+ @click="goSceneAnchor(item.id)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-if="item.class == 'mxd'"
|
|
|
+ :src="item.id == activeScene ? mxda : mxd"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.class == 'znzhmz'"
|
|
|
+ :src="item.id == activeScene ? changurla : changurl"
|
|
|
+ style="width: 320px"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.class == 'fyx'"
|
|
|
+ style="transform: rotate(180deg)"
|
|
|
+ :src="item.id == activeScene ? mxda : mxd"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.class == 'chenlie'"
|
|
|
+ :src="item.id == activeScene ? chenliea : chenlie"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-else-if="item.class == 'cunbu'"
|
|
|
+ :src="item.id == activeScene ? cunbua : cunbu"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<img v-else :src="item.id == activeScene ? lable3a : lable3" alt="" />
|
|
|
- <div :class="{ chenlie: item.class == 'chenlie' || item.class == 'cunbu', }">{{ item.title3 }}</div>
|
|
|
+ <div
|
|
|
+ :class="{ chenlie: item.class == 'chenlie' || item.class == 'cunbu' }"
|
|
|
+ >
|
|
|
+ {{ item.title3 }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 馆藏详情 -->
|
|
|
<div class="productBanner" v-if="state == 'product'">
|
|
|
@@ -310,13 +522,13 @@
|
|
|
|
|
|
<script>
|
|
|
import bannerPage from "./bannerPage.vue";
|
|
|
-import routePage from './routePage.vue'
|
|
|
+import routePage from "./routePage.vue";
|
|
|
import videoBox from "./videoBox.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
bannerPage,
|
|
|
routePage,
|
|
|
- videoBox
|
|
|
+ videoBox,
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
@@ -359,33 +571,33 @@ export default {
|
|
|
youke: require("@/assets/images/new/youke.png"),
|
|
|
youkea: require("@/assets/images/new/youkea.png"),
|
|
|
chenlie: require("@/assets/images/new/chenlie.png"),
|
|
|
- chenliea: require('@/assets/images/new/chenliea.png'),
|
|
|
- cunbu: require('@/assets/images/new/cunbu.png'),
|
|
|
- cunbua: require('@/assets/images/new/cunbua.png'),
|
|
|
+ chenliea: require("@/assets/images/new/chenliea.png"),
|
|
|
+ cunbu: require("@/assets/images/new/cunbu.png"),
|
|
|
+ cunbua: require("@/assets/images/new/cunbua.png"),
|
|
|
isEndReached: false,
|
|
|
showVideoList: [
|
|
|
{
|
|
|
id: 0,
|
|
|
- name: '全部',
|
|
|
- list: []
|
|
|
- }
|
|
|
+ name: "全部",
|
|
|
+ list: [],
|
|
|
+ },
|
|
|
],
|
|
|
swiperOptions: {
|
|
|
loop: false,
|
|
|
- slidesPerView: 'auto',
|
|
|
+ slidesPerView: "auto",
|
|
|
navigation: {
|
|
|
- nextEl: '.swiper-button-next',
|
|
|
- prevEl: '.swiper-button-prev',
|
|
|
+ nextEl: ".swiper-button-next",
|
|
|
+ prevEl: ".swiper-button-prev",
|
|
|
},
|
|
|
on: {
|
|
|
reachEnd: () => {
|
|
|
- console.log('已经滑动到末端2')
|
|
|
+ console.log("已经滑动到末端2");
|
|
|
this.isEndReached = true;
|
|
|
- }
|
|
|
- }
|
|
|
+ },
|
|
|
+ },
|
|
|
},
|
|
|
isOpenVideo: false,
|
|
|
- curOpenVideoItem: {}
|
|
|
+ curOpenVideoItem: {},
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -405,30 +617,32 @@ export default {
|
|
|
}, 500);
|
|
|
}
|
|
|
|
|
|
- if(val == 'route'){
|
|
|
- this.changeBgMusic(false)
|
|
|
- }else{
|
|
|
- const bgMusicDom = document.getElementById('bg-music')
|
|
|
- if(bgMusicDom.paused){
|
|
|
- this.changeBgMusic(true)
|
|
|
+ if (val == "route") {
|
|
|
+ this.changeBgMusic(false);
|
|
|
+ } else {
|
|
|
+ const bgMusicDom = document.getElementById("bg-music");
|
|
|
+ if (bgMusicDom.paused) {
|
|
|
+ this.changeBgMusic(true);
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
|
|
|
isEndReached(newValue) {
|
|
|
if (newValue) {
|
|
|
- console.log('已经滑动到末端1')
|
|
|
+ console.log("已经滑动到末端1");
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
initVideos() {
|
|
|
- this.showVideoList[0].list = this.dataAll.video.content.flatMap((item) => {
|
|
|
- return item.list
|
|
|
- })
|
|
|
+ this.showVideoList[0].list = this.dataAll.video.content.flatMap(
|
|
|
+ (item) => {
|
|
|
+ return item.list;
|
|
|
+ }
|
|
|
+ );
|
|
|
this.dataAll.video.content.forEach((item) => {
|
|
|
- this.showVideoList.push(item)
|
|
|
- })
|
|
|
+ this.showVideoList.push(item);
|
|
|
+ });
|
|
|
},
|
|
|
handlequanjing(item) {
|
|
|
this.activequanjing = item.id;
|
|
|
@@ -472,7 +686,7 @@ export default {
|
|
|
offsetTopArr.push({
|
|
|
value: anchor.offsetTop - 200,
|
|
|
id: item.id,
|
|
|
- name: item.title2
|
|
|
+ name: item.title2,
|
|
|
});
|
|
|
});
|
|
|
this.sceneoffsetTopArr = offsetTopArr;
|
|
|
@@ -541,37 +755,22 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
getInitData() {
|
|
|
- console.log('初始化数据', item, this.introduction)
|
|
|
- // 原来简介细节
|
|
|
- this.$request.get("/show/intro/detail").then((res) => {
|
|
|
- this.introData = {
|
|
|
- ...res.data,
|
|
|
- rtf: decodeURIComponent(res.data.rtf.replace(/%/g, "%25")),
|
|
|
- };
|
|
|
+
|
|
|
+ // 新简介细节（从后台获取）
|
|
|
+ this.$request.get("/show/about/getList").then((res) => {
|
|
|
+ let introduction = [];
|
|
|
+ res.data.map((ele) => {
|
|
|
+ introduction.push({
|
|
|
+ ...ele,
|
|
|
+ rtf: unescape(ele.rtf),
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ this.changeType(introduction[0]);
|
|
|
+
|
|
|
+ this.introduction = [...introduction,...this.dataAll.product.list];
|
|
|
});
|
|
|
- // // 新简介细节（从后台获取）
|
|
|
- // this.$request.get("/show/about/getList").then((res) => {
|
|
|
- // let introduction = [];
|
|
|
- // res.data.map((ele) => {
|
|
|
- // introduction.push({
|
|
|
- // ...ele,
|
|
|
- // rtf: unescape(ele.rtf),
|
|
|
- // });
|
|
|
- // });
|
|
|
- // this.introduction = introduction;
|
|
|
- // let item = (this.introduction && this.introduction[0]) || false;
|
|
|
- // if (item) {
|
|
|
- // this.changeType(item);
|
|
|
- // }
|
|
|
- // });
|
|
|
-
|
|
|
- this.introduction = this.dataAll.product.list
|
|
|
- let item = (this.introduction && this.introduction[0]) || false;
|
|
|
-
|
|
|
- if (item) {
|
|
|
- this.changeType(item)
|
|
|
- }
|
|
|
- // 从本地data.js中获取数据
|
|
|
+
|
|
|
},
|
|
|
openHtml(href, id) {
|
|
|
if (!href) return;
|
|
|
@@ -591,7 +790,9 @@ export default {
|
|
|
changeType(item) {
|
|
|
console.log("changeType", item);
|
|
|
this.productActive = item.name;
|
|
|
- item.name === '大事纪' ? (this.daShiJiList = item.list, this.changeYear(item.list[0])) : ''
|
|
|
+ item.name === "大事纪"
|
|
|
+ ? ((this.daShiJiList = item.list), this.changeYear(item.list[0]))
|
|
|
+ : "";
|
|
|
// this.productHtml = item.rtf?decodeURIComponent(item.rtf): item.text;
|
|
|
this.productHtml = unescape(item.rtf || item.text);
|
|
|
let parent = document.getElementById("result-box-div");
|
|
|
@@ -599,7 +800,7 @@ export default {
|
|
|
},
|
|
|
|
|
|
changeYear(item) {
|
|
|
- this.productYearActive = item
|
|
|
+ this.productYearActive = item;
|
|
|
},
|
|
|
getResultProduces() {
|
|
|
this.resultProduces = this.dataAll.product.content.filter((item) => {
|
|
|
@@ -652,17 +853,17 @@ export default {
|
|
|
|
|
|
// this.changeDimension('3d')
|
|
|
},
|
|
|
- changeBgMusic(isPlay){
|
|
|
+ changeBgMusic(isPlay) {
|
|
|
const bgMusicDom = document.getElementById("bg-music");
|
|
|
- if(isPlay && bgMusicDom) {
|
|
|
- bgMusicDom.play()
|
|
|
- }else if(!isPlay && bgMusicDom){
|
|
|
- bgMusicDom.pause()
|
|
|
+ if (isPlay && bgMusicDom) {
|
|
|
+ bgMusicDom.play();
|
|
|
+ } else if (!isPlay && bgMusicDom) {
|
|
|
+ bgMusicDom.pause();
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
},
|
|
|
created() {
|
|
|
- // this.getInitData();
|
|
|
+ this.getInitData();
|
|
|
},
|
|
|
mounted() {
|
|
|
// this.getCategoryType();
|
|
|
@@ -671,14 +872,14 @@ export default {
|
|
|
this.debounce(this.scrollFn, 200, true),
|
|
|
true
|
|
|
);
|
|
|
- window.changeBgMusic = this.changeBgMusic
|
|
|
+ window.changeBgMusic = this.changeBgMusic;
|
|
|
|
|
|
- this.initVideos()
|
|
|
+ this.initVideos();
|
|
|
},
|
|
|
- beforeCreate() { }, //生命周期 - 创建之前
|
|
|
- beforeMount() { }, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
- updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
beforeDestroy() {
|
|
|
window.removeEventListener(
|
|
|
"scroll",
|
|
|
@@ -687,11 +888,11 @@ export default {
|
|
|
false
|
|
|
);
|
|
|
}, //生命周期 - 销毁之前
|
|
|
- destroyed() { }, //生命周期 - 销毁完成
|
|
|
- activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
-<style lang='less' scoped>
|
|
|
+<style lang="less" scoped>
|
|
|
::-webkit-scrollbar {
|
|
|
width: 2px;
|
|
|
/* 设置滚动条宽度 */
|
|
|
@@ -724,7 +925,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
.swiper-button-prev {
|
|
|
- left: -50px
|
|
|
+ left: -50px;
|
|
|
}
|
|
|
|
|
|
.home {
|
|
|
@@ -954,9 +1155,11 @@ export default {
|
|
|
}
|
|
|
|
|
|
.contentAc {
|
|
|
- background: linear-gradient(270deg,
|
|
|
- #2cd19760 0%,
|
|
|
- rgba(44, 209, 150, 0) 100%);
|
|
|
+ background: linear-gradient(
|
|
|
+ 270deg,
|
|
|
+ #2cd19760 0%,
|
|
|
+ rgba(44, 209, 150, 0) 100%
|
|
|
+ );
|
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.6);
|
|
|
|
|
|
.item-right {
|
|
|
@@ -1121,7 +1324,7 @@ export default {
|
|
|
border-bottom: 1px solid #2c655d;
|
|
|
|
|
|
::-webkit-scrollbar {
|
|
|
- display: none
|
|
|
+ display: none;
|
|
|
}
|
|
|
|
|
|
.list-item {
|
|
|
@@ -1188,7 +1391,7 @@ export default {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%, -55%)
|
|
|
+ transform: translate(-50%, -55%);
|
|
|
}
|
|
|
|
|
|
img {
|
|
|
@@ -1198,7 +1401,7 @@ export default {
|
|
|
cursor: pointer;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
- transform: translate(-50%, -50%)
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
video {
|
|
|
@@ -1209,7 +1412,6 @@ export default {
|
|
|
cursor: pointer;
|
|
|
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.6);
|
|
|
border-radius: 10px;
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -1338,9 +1540,11 @@ export default {
|
|
|
height: 100%;
|
|
|
margin-left: 20px;
|
|
|
margin-right: 10px;
|
|
|
- background: linear-gradient(to bottom,
|
|
|
- #ffffff98 0%,
|
|
|
- #ffffff00 100%);
|
|
|
+ background: linear-gradient(
|
|
|
+ to bottom,
|
|
|
+ #ffffff98 0%,
|
|
|
+ #ffffff00 100%
|
|
|
+ );
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1475,7 +1679,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-
|
|
|
.result-html {
|
|
|
margin-top: 15px;
|
|
|
img {
|
|
|
@@ -1657,4 +1860,4 @@ export default {
|
|
|
transform: scale(1);
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
