|
|
@@ -1,68 +1,76 @@
|
|
|
<template>
|
|
|
<div class="Rbottom" :style="`${leftList[1].done ? 'bottom:0px' : ''}`">
|
|
|
+
|
|
|
+ <!--热点列表div -->
|
|
|
+ <div class="hotBox" :class="{ activeHotBox: hotListShow }">
|
|
|
+ <div class="hot_main">
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
+ <div class="hot_close" @click="hotListShow = false"></div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="hot_title">热点列表</div>
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <div class="hot_search" @keyup.enter="mySearch">
|
|
|
+ <!-- <input type="text" v-model="hotTxt"> -->
|
|
|
+ <el-input type="text" placeholder="请输关键字" v-model="hotTxt" maxlength="30" show-word-limit>
|
|
|
+ </el-input>
|
|
|
+ <div class="hot_btn" @click="mySearch">搜索</div>
|
|
|
+ </div>
|
|
|
+ <!-- 历史记录 -->
|
|
|
+ <div class="hot_his" v-show="hotHisList.length > 0">
|
|
|
+ <div class="hot_hisRow" @click="selectHis(item)" v-for="(item, index) in hotHisList" :key="index">{{ item }}
|
|
|
+ </div>
|
|
|
+ <!-- 清除 -->
|
|
|
+ <div class="hot_clearHis" @click="clearHotHis">清除历史记录</div>
|
|
|
+ </div>
|
|
|
+ <!-- 热点列表 -->
|
|
|
+ <div class="hot_list" :style="`height:${hotHisList.length === 0 ? '540px' : '450px'}`">
|
|
|
+ <div class="hot_listRow" @click="openHot(item)" v-for="item in hotListShowData" :key="item.sid">{{
|
|
|
+ item.title?.split('&')[0]
|
|
|
+ }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
<audio src="@/assets/media/bacMusic.mp3" loop id="bacMusic"></audio>
|
|
|
|
|
|
<div class="box1">
|
|
|
<div class="mainll mainrr">
|
|
|
- <div
|
|
|
- v-show="list.length !== 0 || item.type > 2"
|
|
|
- @click="leftCutClick(item.type)"
|
|
|
- class="row"
|
|
|
- :class="{ active2: item.done }"
|
|
|
- v-for="item in leftList"
|
|
|
- :key="item.type"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="
|
|
|
- require(`@/assets/img/LeftTop/inco${item.type}${
|
|
|
- item.done ? 'Ac' : ''
|
|
|
+ <div v-show="list.length !== 0 || item.type > 2" @click="leftCutClick(item.type)" class="row"
|
|
|
+ :class="{ active2: item.done }" v-for="item in leftList" :key="item.type">
|
|
|
+ <img :src="
|
|
|
+ require(`@/assets/img/LeftTop/inco${item.type}${item.done ? 'Ac' : ''
|
|
|
}.png`)
|
|
|
- "
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ " alt="" />
|
|
|
<p>{{ item.name }}</p>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 热点列表 -->
|
|
|
+ <div class="row" :class="{ active2: hotListShow }" @click="hotListShow = true">
|
|
|
+ <img :src="
|
|
|
+ require(`@/assets/img/LeftTop/incoHot${hotListShow ? 'Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ " alt="" />
|
|
|
+ <p>热点列表</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
<div class="mainrr">
|
|
|
- <div
|
|
|
- class="row"
|
|
|
- @click="rightClisk(item.type)"
|
|
|
- v-for="item in rightList"
|
|
|
- :key="item.type"
|
|
|
- :class="{
|
|
|
- active2:
|
|
|
- (music && item.type === 2) ||
|
|
|
- (like && item.type === 3) ||
|
|
|
- (share && item.type === 4) ||
|
|
|
- (isFullscreen && item.type === 5),
|
|
|
- }"
|
|
|
- >
|
|
|
- <img
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
|
|
|
- alt=""
|
|
|
- v-if="music && item.type === 2"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
|
|
|
- alt=""
|
|
|
- v-else-if="like && item.type === 3"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
|
|
|
- alt=""
|
|
|
- v-else-if="share && item.type === 4"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
|
|
|
- alt=""
|
|
|
- v-else-if="isFullscreen && item.type === 5"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
|
|
|
- alt=""
|
|
|
- v-else
|
|
|
- />
|
|
|
+ <div class="row" @click="rightClisk(item.type)" v-for="item in rightList" :key="item.type" :class="{
|
|
|
+ active2:
|
|
|
+ (music && item.type === 2) ||
|
|
|
+ (like && item.type === 3) ||
|
|
|
+ (share && item.type === 4) ||
|
|
|
+ (isFullscreen && item.type === 5),
|
|
|
+ }">
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-if="music && item.type === 2" />
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-else-if="like && item.type === 3" />
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt=""
|
|
|
+ v-else-if="share && item.type === 4" />
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt=""
|
|
|
+ v-else-if="isFullscreen && item.type === 5" />
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}.png`)" alt="" v-else />
|
|
|
<transition name="likeAddAnimate">
|
|
|
<div class="likeMove" v-show="like && item.type === 3">+ 1</div>
|
|
|
</transition>
|
|
|
@@ -73,30 +81,17 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <div
|
|
|
- class="box2"
|
|
|
- :style="`${leftList[1].done ? '' : 'height:0px;padding:0;opacity:0'}`"
|
|
|
- >
|
|
|
+ <div class="box2" :style="`${leftList[1].done ? '' : 'height:0px;padding:0;opacity:0'}`">
|
|
|
<div class="swiper-container">
|
|
|
<div class="swiper-wrapper" v-if="list.length">
|
|
|
- <div
|
|
|
- @click="cutGoods(index)"
|
|
|
- class="swiper-slide"
|
|
|
- v-for="(item, index) in list"
|
|
|
- :class="{ active: (acList === index && playing) || (clickBottomAc&&acList === index) }"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
+ <div @click="cutGoods(index)" class="swiper-slide" v-for="(item, index) in list"
|
|
|
+ :class="{ active: (acList === index && playing) || (clickBottomAc && acList === index) }" :key="index">
|
|
|
<img :src="item.list[0].enter.cover" alt="" />
|
|
|
- <div
|
|
|
- class="plan"
|
|
|
- v-show="(acList === index && playing) || (clickBottomAc&&acList === index)"
|
|
|
- :style="{ width: progressPart + '%' }"
|
|
|
- ></div>
|
|
|
- <p
|
|
|
- :class="{
|
|
|
- txtActive: (acList === index && playing) || (clickBottomAc&&acList === index),
|
|
|
- }"
|
|
|
- >
|
|
|
+ <div class="plan" v-show="(acList === index && playing) || (clickBottomAc && acList === index)"
|
|
|
+ :style="{ width: progressPart + '%' }"></div>
|
|
|
+ <p :class="{
|
|
|
+ txtActive: (acList === index && playing) || (clickBottomAc && acList === index),
|
|
|
+ }">
|
|
|
{{ item.name }}
|
|
|
</p>
|
|
|
</div>
|
|
|
@@ -124,6 +119,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { getHotHis, setHotHis, clearHotHis } from '../utils/storage'
|
|
|
import { addNumAPI } from "@/utils/api";
|
|
|
import Swiper from "./swiper.js";
|
|
|
export default {
|
|
|
@@ -146,6 +142,11 @@ export default {
|
|
|
share: false,
|
|
|
isFullscreen: false,
|
|
|
// --------------
|
|
|
+ hotList: [],
|
|
|
+ hotListShowData: [],
|
|
|
+ hotHisList: [],
|
|
|
+ hotTxt: '',
|
|
|
+ hotListShow: true,
|
|
|
leftList: [
|
|
|
{ name: "自动漫游", type: 1, done: false },
|
|
|
{ name: "场景导览", type: 2, done: false },
|
|
|
@@ -161,6 +162,19 @@ export default {
|
|
|
computed: {},
|
|
|
//监控data中的数据变化
|
|
|
watch: {
|
|
|
+ hotListShow(val) {
|
|
|
+ if (val) {
|
|
|
+ if (this.leftList[0].done) {
|
|
|
+ this.$emit("stopPlay", true);
|
|
|
+ this.leftList[0].done = false
|
|
|
+ if (window.bacMusic) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.music = true;
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
acList(val) {
|
|
|
let temp = val - 2;
|
|
|
if (temp < 0) temp = 0;
|
|
|
@@ -175,9 +189,49 @@ export default {
|
|
|
},
|
|
|
//方法集合
|
|
|
methods: {
|
|
|
+ // 给父组件调用，拿到热点数据
|
|
|
+ getHotListToFather(data) {
|
|
|
+ this.hotList = data.filter(v => v.title.split("&")[2] || !v.title.includes("&"))
|
|
|
+ this.hotListShowData = [...this.hotList]
|
|
|
+ },
|
|
|
+
|
|
|
+ openHot(item) {
|
|
|
+ this.$emit('openHot', item)
|
|
|
+ },
|
|
|
+
|
|
|
+ selectHis(val) {
|
|
|
+ this.hotHisList = this.hotHisList.filter(v => v !== val)
|
|
|
+ this.hotTxt = val
|
|
|
+ this.hotHisList.unshift(val)
|
|
|
+ setHotHis(this.hotHisList)
|
|
|
+ this.hotListShowData = this.hotList.filter(v => v.title.includes(this.hotTxt))
|
|
|
+ },
|
|
|
+
|
|
|
+ clearHotHis() {
|
|
|
+ clearHotHis()
|
|
|
+ this.hotHisList = []
|
|
|
+ },
|
|
|
+
|
|
|
+ mySearch() {
|
|
|
+
|
|
|
+ if (this.hotTxt.trim() === '') {
|
|
|
+ this.hotListShowData = [...this.hotList]
|
|
|
+ } else {
|
|
|
+ this.hotListShowData = this.hotList.filter(v => v.title.includes(this.hotTxt))
|
|
|
+ this.hotHisList = this.hotHisList.filter(v => v !== this.hotTxt)
|
|
|
+ this.hotHisList.unshift(this.hotTxt)
|
|
|
+ if (this.hotHisList.length > 14) this.hotHisList.length = 14
|
|
|
+ setHotHis(this.hotHisList)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
cutGoods(index) {
|
|
|
this.$emit("update:clickBottomAc", false);
|
|
|
-
|
|
|
+
|
|
|
|
|
|
this.$emit("daoLanCut", index);
|
|
|
this.leftList[0].done = false;
|
|
|
@@ -332,7 +386,9 @@ export default {
|
|
|
},
|
|
|
},
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
+ created() {
|
|
|
+ this.hotHisList = getHotHis()
|
|
|
+ },
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
// 监听esc事件
|
|
|
@@ -351,13 +407,13 @@ export default {
|
|
|
if (!document.mozFullScreenElement) this.isFullscreen = false;
|
|
|
});
|
|
|
},
|
|
|
- beforeCreate() {}, //生命周期 - 创建之前
|
|
|
- beforeMount() {}, //生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
- updated() {}, //生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
- destroyed() {}, //生命周期 - 销毁完成
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
+ destroyed() { }, //生命周期 - 销毁完成
|
|
|
+ activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
@@ -366,38 +422,221 @@ export default {
|
|
|
background-color: #fff;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
/deep/.swiper-scrollbar-drag {
|
|
|
background-color: #930909;
|
|
|
}
|
|
|
+
|
|
|
@import "./swiper.css";
|
|
|
+
|
|
|
.likeAddAnimate-enter-active,
|
|
|
.likeAddAnimate-leave-active {
|
|
|
transition: all 2s ease;
|
|
|
}
|
|
|
+
|
|
|
.likeAddAnimate-enter,
|
|
|
.likeAddAnimate-leave {
|
|
|
transform: translateY(0) scale(0);
|
|
|
opacity: 0;
|
|
|
}
|
|
|
+
|
|
|
.likeAddAnimate-enter-to,
|
|
|
.likeAddAnimate-leave-to {
|
|
|
transform: translateY(-50px) scale(1.2);
|
|
|
opacity: 1;
|
|
|
}
|
|
|
+
|
|
|
.Rbottom {
|
|
|
transition: all 0.5s;
|
|
|
- z-index: 10;
|
|
|
+ z-index: 11;
|
|
|
position: absolute;
|
|
|
bottom: 24px;
|
|
|
right: 0px;
|
|
|
width: 100%;
|
|
|
+
|
|
|
+ // 热点列表页面
|
|
|
+ .hotBox {
|
|
|
+ transition: opacity .3s;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ position: fixed;
|
|
|
+ z-index: 99;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+
|
|
|
+ .hot_main {
|
|
|
+ padding: 25px 50px 15px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 1100px;
|
|
|
+ height: 700px;
|
|
|
+ background-image: url('../assets/img/LeftTop/hotBox.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+
|
|
|
+ .hot_close {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ background-image: url('../assets/img/Goods/shareClose.png');
|
|
|
+ background-size: 100% 100%;
|
|
|
+ right: -20px;
|
|
|
+ top: -20px;
|
|
|
+ z-index: 11;
|
|
|
+ width: 48px;
|
|
|
+ height: 48px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_title {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #D8B275;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_search {
|
|
|
+ display: flex;
|
|
|
+ height: 40px;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .el-input {
|
|
|
+ width: 860px;
|
|
|
+
|
|
|
+ /deep/input {
|
|
|
+ background-color: transparent;
|
|
|
+ border-radius: 20px;
|
|
|
+ border: 1px solid #D8B275;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.el-input__count-inner {
|
|
|
+ background-color: transparent;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_btn {
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ background-color: #D8B275;
|
|
|
+ border-radius: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ color: #930909;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_his {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ position: relative;
|
|
|
+ padding-right: 120px;
|
|
|
+
|
|
|
+ .hot_clearHis {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ padding-left: 20px;
|
|
|
+ background: url('../assets/img/LeftTop/delete.png') left center no-repeat;
|
|
|
+ background-size: 17px 17px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_hisRow {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding: 0 8px;
|
|
|
+ background-color: #EEEEEE;
|
|
|
+ margin-right: 15px;
|
|
|
+ margin-top: 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 15px;
|
|
|
+ max-width: 110px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_list::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 5px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_list::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 1px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ background: #d8b275;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_list::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .hot_list {
|
|
|
+ padding-right: 15px;
|
|
|
+ margin-top: 28px;
|
|
|
+ height: 450px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .hot_listRow {
|
|
|
+ cursor: pointer;
|
|
|
+ border-bottom: 1px solid #fff;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 48px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ border-top: 1px solid #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #d8b275;
|
|
|
+ border-bottom: 1px solid #d8b275;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ top: -1px;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background-color: #D8B275;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .activeHotBox {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+
|
|
|
.box1 {
|
|
|
padding: 0 25px;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.mainrr {
|
|
|
display: flex;
|
|
|
+
|
|
|
.row {
|
|
|
position: relative;
|
|
|
cursor: pointer;
|
|
|
@@ -406,12 +645,14 @@ export default {
|
|
|
margin-left: 18px;
|
|
|
color: #fff;
|
|
|
|
|
|
- & > img {
|
|
|
+ &>img {
|
|
|
width: 50px;
|
|
|
}
|
|
|
+
|
|
|
p {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
+
|
|
|
.likeMove {
|
|
|
color: #930909;
|
|
|
position: absolute;
|
|
|
@@ -420,14 +661,17 @@ export default {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.active2 {
|
|
|
color: #930909;
|
|
|
font-weight: 700;
|
|
|
+
|
|
|
p {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.mainll {
|
|
|
.row {
|
|
|
width: 80px;
|
|
|
@@ -435,6 +679,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.box2 {
|
|
|
overflow: hidden;
|
|
|
transition: height 0.5s;
|
|
|
@@ -443,17 +688,21 @@ export default {
|
|
|
height: 170px;
|
|
|
background-color: #d8b275;
|
|
|
padding: 15px 25px 0;
|
|
|
+
|
|
|
.swiper-container {
|
|
|
cursor: grab;
|
|
|
height: 100%;
|
|
|
+
|
|
|
.swiper-slide {
|
|
|
cursor: pointer;
|
|
|
height: 120px;
|
|
|
+
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 110px;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
+
|
|
|
p {
|
|
|
text-align: center;
|
|
|
height: 30px;
|
|
|
@@ -461,14 +710,17 @@ export default {
|
|
|
color: #ffffff;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
+
|
|
|
.plan {
|
|
|
height: 4px;
|
|
|
background-color: #930909;
|
|
|
}
|
|
|
+
|
|
|
.txtActive {
|
|
|
color: #930909;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.active {
|
|
|
img {
|
|
|
border: 3px solid #930909;
|
|
|
@@ -477,6 +729,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.shareBox {
|
|
|
z-index: 11;
|
|
|
position: fixed;
|
|
|
@@ -488,6 +741,7 @@ export default {
|
|
|
pointer-events: none;
|
|
|
backdrop-filter: blur(4px);
|
|
|
transition: opacity 0.5s;
|
|
|
+
|
|
|
.shareMain {
|
|
|
padding: 40px 30px 0;
|
|
|
position: absolute;
|
|
|
@@ -499,6 +753,7 @@ export default {
|
|
|
background-image: url("../assets/img/Goods/shareBac.png");
|
|
|
background-size: 100% 100%;
|
|
|
text-align: center;
|
|
|
+
|
|
|
.close {
|
|
|
width: 48px;
|
|
|
height: 48px;
|
|
|
@@ -509,21 +764,25 @@ export default {
|
|
|
background-image: url("../assets/img/Goods/shareClose.png");
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
+
|
|
|
h3 {
|
|
|
text-align: left;
|
|
|
color: #d8b275;
|
|
|
font-size: 24px;
|
|
|
margin-bottom: 50px;
|
|
|
}
|
|
|
+
|
|
|
p {
|
|
|
font-size: 20px;
|
|
|
color: #ffffff;
|
|
|
margin-bottom: 40px;
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
width: 240px;
|
|
|
margin-bottom: 50px;
|
|
|
}
|
|
|
+
|
|
|
.btnn {
|
|
|
cursor: pointer;
|
|
|
width: 280px;
|
|
|
@@ -537,6 +796,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.shareBoxShow {
|
|
|
opacity: 1;
|
|
|
pointer-events: auto;
|
