|
|
@@ -0,0 +1,464 @@
|
|
|
+<template>
|
|
|
+ <div class="Hot" :class="{ active: show }" @click.stop="">
|
|
|
+ <div class="close" @click="$emit('hotClose')">
|
|
|
+ <img src="../assets/img/hotClose.png" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 查看图片 -->
|
|
|
+ <viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
+ <img :src="lookPics[0]" alt="" />
|
|
|
+ </viewer>
|
|
|
+
|
|
|
+ <!-- 轮播图 -->
|
|
|
+ <div class="swBox">
|
|
|
+ <div class="swiper-container" ref="mySwiper" :key="type">
|
|
|
+ <div class="swiper-wrapper">
|
|
|
+ <div class="swiper-slide" v-for="(item, index) in data" :key="index">
|
|
|
+ <div
|
|
|
+ class="infoTxt"
|
|
|
+ :class="{ videoAc: type === 'video' }"
|
|
|
+ v-if="item.title"
|
|
|
+ >
|
|
|
+ <h3>{{ item.title.split("&")[0] }}</h3>
|
|
|
+ <div v-html="item.content" v-show="type !== 'video'"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 图片 -->
|
|
|
+ <template v-if="type === 'image'">
|
|
|
+ <img
|
|
|
+ @click="
|
|
|
+ lookImg(
|
|
|
+ `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
|
|
|
+ )
|
|
|
+ "
|
|
|
+ v-if="item.media && item.media.image[0]"
|
|
|
+ v-lazy="
|
|
|
+ `https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.image[0].src}`
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ src="../assets/img/IMGerror.png"
|
|
|
+ style="pointer-events: none"
|
|
|
+ alt=""
|
|
|
+ v-else
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <!-- 视频 -->
|
|
|
+ <template v-else-if="type === 'video'">
|
|
|
+ <div class="videoBox">
|
|
|
+ <div>
|
|
|
+ <video
|
|
|
+ v-if="item.media && item.media.video[0]"
|
|
|
+ controls
|
|
|
+ :src="`https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.video[0].src}`"
|
|
|
+ ></video>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 模型 -->
|
|
|
+ <template v-else-if="type === 'link'">
|
|
|
+ <div class="ifrBox">
|
|
|
+ <iframe
|
|
|
+ v-if="item.media && item.media.link[0]"
|
|
|
+ :src="`${item.media.link[0].src}`"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <!-- 音乐 -->
|
|
|
+ <template v-else>
|
|
|
+ <Audio
|
|
|
+ :Aid="item.media.audio[0].src"
|
|
|
+ v-if="item.media && item.media.audio[0] && audioIndex === index"
|
|
|
+ :audioSrc="`https://4dkk.4dage.com/scene_edit_data/${KKNum}/user/${item.media.audio[0].src}`"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="swiper-pagination" v-show="data.length > 1"></div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ class="swiper-button-prev swiper-button-white"
|
|
|
+ v-show="data.length > 1"
|
|
|
+ :class="{ noneAc: true }"
|
|
|
+ ></div>
|
|
|
+ <div
|
|
|
+ class="swiper-button-next swiper-button-white"
|
|
|
+ v-show="data.length > 1"
|
|
|
+ :class="{ noneAc: true }"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右下角的按钮 -->
|
|
|
+ <div class="mainrr">
|
|
|
+ <div
|
|
|
+ class="row"
|
|
|
+ v-show="item.show"
|
|
|
+ v-for="item in rightList"
|
|
|
+ :key="item.id"
|
|
|
+ @click="type = item.type"
|
|
|
+ :class="{ active: item.type === type }"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/img/Hot/inco${item.id}${
|
|
|
+ item.type === type ? 'Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+
|
|
|
+ <p>{{ item.name }}{{ info[item.type] && info[item.type].length }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Audio from "./Audio.vue";
|
|
|
+import Swiper from "./swiper.js";
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ info: {
|
|
|
+ type: Object,
|
|
|
+ default: () => {},
|
|
|
+ },
|
|
|
+ },
|
|
|
+ name: "Hot",
|
|
|
+ components: { Audio },
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ lookPics: [],
|
|
|
+
|
|
|
+ show: false,
|
|
|
+ data: [],
|
|
|
+ type: "",
|
|
|
+ rightList: [
|
|
|
+ { name: "视频", id: 1, show: false, type: "video" },
|
|
|
+ { name: "模型", id: 2, show: false, type: "link" },
|
|
|
+ { name: "音频", id: 3, show: false, type: "audio" },
|
|
|
+ { name: "图片", id: 4, show: false, type: "image" },
|
|
|
+ ],
|
|
|
+ Swiper: null,
|
|
|
+ KKNum: window.KKNum,
|
|
|
+ audioIndex: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {
|
|
|
+ type(val) {
|
|
|
+ if (val === "video") {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ let videoDoms = document.querySelectorAll(".Hot video");
|
|
|
+ videoDoms[0].play();
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+ } else if (val === "audio") this.audioIndex = 0;
|
|
|
+
|
|
|
+ this.Swiper = null;
|
|
|
+ this.data = this.info[val];
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.Swiper = new Swiper(".Hot .swiper-container", {
|
|
|
+ slidesPerView: 1,
|
|
|
+ // 如果需要前进后退按钮
|
|
|
+ navigation: {
|
|
|
+ nextEl: ".swiper-button-next",
|
|
|
+ prevEl: ".swiper-button-prev",
|
|
|
+ },
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ type: "fraction",
|
|
|
+ },
|
|
|
+ on: {
|
|
|
+ slideChange: () => {
|
|
|
+ if (val === "video") {
|
|
|
+ let dom = document.querySelectorAll(
|
|
|
+ ".Hot .swiper-pagination-bullet"
|
|
|
+ );
|
|
|
+ let index;
|
|
|
+ dom.forEach((v, i) => {
|
|
|
+ if (v.className.includes("swiper-pagination-bullet-active"))
|
|
|
+ index = i;
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ let videoDoms = document.querySelectorAll(".Hot video");
|
|
|
+ videoDoms.forEach((v, i) => {
|
|
|
+ if (i === index) v.play();
|
|
|
+ else v.pause();
|
|
|
+ });
|
|
|
+ }, 200);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (val === "audio") this.audioIndex = this.Swiper.activeIndex;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ info: {
|
|
|
+ handler(val) {
|
|
|
+ this.info = val;
|
|
|
+ let obj = {
|
|
|
+ video: 0,
|
|
|
+ link: 1,
|
|
|
+ audio: 2,
|
|
|
+ image: 3,
|
|
|
+ };
|
|
|
+ for (const k in val) {
|
|
|
+ if (val[k].length) this.rightList[obj[k]].show = true;
|
|
|
+ }
|
|
|
+ if (val["image"] && val["image"].length) this.type = "image";
|
|
|
+ else if (val["video"] && val["video"].length) this.type = "video";
|
|
|
+ else if (val["link"] && val["link"].length) this.type = "link";
|
|
|
+ else if (val["audio"] && val["audio"].length) this.type = "audio";
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 点击查看大图
|
|
|
+ lookImg(url) {
|
|
|
+ let dom = this.$refs.viewer.$viewer;
|
|
|
+ this.lookPics = [url];
|
|
|
+ dom.show();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.show = true;
|
|
|
+ }, 300);
|
|
|
+
|
|
|
+ // 如果有对应的点位音频，删除
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let time = -1;
|
|
|
+ let num = 0;
|
|
|
+ time = window.setInterval(() => {
|
|
|
+ const dotAudioDomId = document.querySelector("#dotAudioDomId");
|
|
|
+ num++;
|
|
|
+ // console.log("xxxxxxxxxxxx", dotAudioDomId);
|
|
|
+
|
|
|
+ if (dotAudioDomId) {
|
|
|
+ clearInterval(time);
|
|
|
+ document.body.removeChild(dotAudioDomId);
|
|
|
+ }
|
|
|
+ if (num >= 5) clearInterval(time);
|
|
|
+ }, 800);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+@import "./swiper.css";
|
|
|
+.viewerCla img {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.Hot {
|
|
|
+ opacity: 0.3;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 99;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(255, 251, 245, 0.9);
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
+ .close {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 60px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ top: 45px;
|
|
|
+ right: 45px;
|
|
|
+ img {
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainrr {
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 15px;
|
|
|
+ right: 20px;
|
|
|
+ z-index: 10;
|
|
|
+ .row {
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 50px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 15px;
|
|
|
+ color: #666666;
|
|
|
+
|
|
|
+ & > img {
|
|
|
+ width: 50px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .likeMove {
|
|
|
+ color: #930909;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #930909;
|
|
|
+ font-weight: 700;
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .swiper-container {
|
|
|
+ cursor: grab;
|
|
|
+ height: 100%;
|
|
|
+ .swiper-slide {
|
|
|
+ position: relative;
|
|
|
+ .infoTxt {
|
|
|
+ z-index: 10;
|
|
|
+ position: absolute;
|
|
|
+ top: 40px;
|
|
|
+ left: 40px;
|
|
|
+ width: 310px;
|
|
|
+ & > h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #930909;
|
|
|
+ font-weight: 700;
|
|
|
+ line-height: 28px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videoAc {
|
|
|
+ pointer-events: none;
|
|
|
+ width: 1200px;
|
|
|
+ height: 680px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ padding: 74px 0 0 140px;
|
|
|
+ z-index: 30;
|
|
|
+ h3 {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videoBox {
|
|
|
+ width: 1200px;
|
|
|
+ height: 680px;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-image: url("../assets/img/Hot/videoBac.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 135px 90px 0 140px;
|
|
|
+ & > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ video {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ifrBox {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ max-width: 900px;
|
|
|
+ max-height: 700px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-pagination {
|
|
|
+ bottom: 50px;
|
|
|
+ }
|
|
|
+ .swiper-button-next {
|
|
|
+ // opacity: 1;
|
|
|
+ // pointer-events: auto;
|
|
|
+ width: 40px;
|
|
|
+ height: 60px;
|
|
|
+ right: 60px;
|
|
|
+ background-image: url("../assets/img/Hot/right.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ .swiper-button-prev {
|
|
|
+ // opacity: 1;
|
|
|
+ // pointer-events: auto;
|
|
|
+ width: 40px;
|
|
|
+ height: 60px;
|
|
|
+ left: 60px;
|
|
|
+ background-image: url("../assets/img/Hot/left.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+ /deep/.swiper-pagination-bullet {
|
|
|
+ width: 70px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 1px;
|
|
|
+ opacity: 1;
|
|
|
+ background-color: #999999;
|
|
|
+ }
|
|
|
+ /deep/.swiper-pagination-bullet-active {
|
|
|
+ background-color: #930909;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.active {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+}
|
|
|
+</style>
|
