|
@@ -0,0 +1,413 @@
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <audio
|
|
|
+ id="myAudio"
|
|
|
+ v-if="audio"
|
|
|
+ v-show="isOneAduio"
|
|
|
+ :src="audio"
|
|
|
+ controls
|
|
|
+ ></audio>
|
|
|
+ <div class="main">
|
|
|
+ <div class="mainCon">
|
|
|
+ <!-- 音频图标 -->
|
|
|
+ <div
|
|
|
+ class="audioIcon"
|
|
|
+ v-if="audio && !isOneAduio"
|
|
|
+ @click="audioSta = !audioSta"
|
|
|
+ :title="audioSta ? '关闭音频' : '打开音频'"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部的tab -->
|
|
|
+ <div class="flooTabBox" v-if="flooTab.length > 1">
|
|
|
+ <div
|
|
|
+ @click="myType = item.type"
|
|
|
+ class="tabRow"
|
|
|
+ :class="{ tabRowAc: myType === item.type }"
|
|
|
+ v-for="item in flooTab"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/pc/icon${item.id}${
|
|
|
+ myType === item.type ? 'Ac' : ''
|
|
|
+ }.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ {{ item.name }}
|
|
|
+ <span
|
|
|
+ v-if="
|
|
|
+ data[item.type] &&
|
|
|
+ data[item.type].length &&
|
|
|
+ data[item.type].length > 1
|
|
|
+ "
|
|
|
+ >{{ item.type === myType ? myInd + 1 + "/" : null
|
|
|
+ }}{{ data[item.type].length }}</span
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 主要内容 -->
|
|
|
+
|
|
|
+ <div class="contenBoxMain">
|
|
|
+ <div
|
|
|
+ class="contenBox"
|
|
|
+ :class="{ contenBoxAc: index === myInd }"
|
|
|
+ v-for="(item, index) in data[myType]"
|
|
|
+ :key="myType === 'video' ? item.url : item"
|
|
|
+ >
|
|
|
+ <!-- 模型页面 -->
|
|
|
+ <div class="modelBox" v-if="myType === 'model'">
|
|
|
+ <iframe
|
|
|
+ :src="item"
|
|
|
+ frameborder="0"
|
|
|
+ v-if="index === myInd"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ <!-- 视频页面 -->
|
|
|
+ <div class="videoBox" v-else-if="myType === 'video'">
|
|
|
+ <video controls :src="item.url" v-if="index === myInd"></video>
|
|
|
+ </div>
|
|
|
+ <!-- 图片页面 -->
|
|
|
+ <div
|
|
|
+ class="imgBox"
|
|
|
+ v-else-if="myType === 'img'"
|
|
|
+ @click="lookImg(item)"
|
|
|
+ >
|
|
|
+ <img v-lazy="item" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左右箭头 -->
|
|
|
+ <div
|
|
|
+ @click="myInd--"
|
|
|
+ class="leftJJ awccJJ"
|
|
|
+ :class="{ noClick: myInd === 0 }"
|
|
|
+ v-if="data[myType] && data[myType].length > 1"
|
|
|
+ >
|
|
|
+ <img src="../assets/images/pc/left.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ @click="myInd++"
|
|
|
+ class="rightJJ awccJJ"
|
|
|
+ :class="{ noClick: myInd === data[myType].length - 1 }"
|
|
|
+ v-if="data[myType] && data[myType].length > 1"
|
|
|
+ >
|
|
|
+ <img src="../assets/images/pc/right.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 下面的文字介绍 -->
|
|
|
+ <div class="flooTxt">
|
|
|
+ <div class="myTitle">{{ myTitle }}</div>
|
|
|
+ <!-- 视频的介绍 -->
|
|
|
+ <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]">
|
|
|
+ {{ videoTxt[myInd] }}
|
|
|
+ </div>
|
|
|
+ <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]">
|
|
|
+ {{ imgTxt[myInd] }}
|
|
|
+ </div>
|
|
|
+ <div class="myTxt" v-html="myTxt"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看图片 -->
|
|
|
+ <viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
+ <img :src="lookPics[0]" alt="" />
|
|
|
+ </viewer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "Home",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ m: this.$route.query.m,
|
|
|
+ id: this.$route.query.id,
|
|
|
+ // 音频地址
|
|
|
+ audio: "",
|
|
|
+ // 如果只有单独的音频
|
|
|
+ isOneAduio: false,
|
|
|
+ // 音频状态
|
|
|
+ audioSta: false,
|
|
|
+
|
|
|
+ data: {
|
|
|
+ // 模型数组
|
|
|
+ model: [],
|
|
|
+ // 视频数组
|
|
|
+ video: [],
|
|
|
+ // 图片数组
|
|
|
+ img: [],
|
|
|
+ },
|
|
|
+ // 当前 type
|
|
|
+ myType: "",
|
|
|
+
|
|
|
+ // 底部的tab
|
|
|
+ flooTab: [],
|
|
|
+
|
|
|
+ // 当前索引
|
|
|
+ myInd: 0,
|
|
|
+
|
|
|
+ // 查看图片
|
|
|
+ lookPics: [],
|
|
|
+
|
|
|
+ // 标题
|
|
|
+ myTitle: "",
|
|
|
+ // 内容
|
|
|
+ myTxt: "",
|
|
|
+ // 视频内容
|
|
|
+ videoTxt: [],
|
|
|
+ imgTxt: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ myType() {
|
|
|
+ this.myInd = 0;
|
|
|
+ },
|
|
|
+ // 音频的开启和关闭
|
|
|
+ audioSta(val) {
|
|
|
+ const dom = document.querySelector("#myAudio");
|
|
|
+ if (val) {
|
|
|
+ dom.play();
|
|
|
+ dom.onended = () => {
|
|
|
+ // console.log("----音频播放完毕");
|
|
|
+ this.audioSta = false;
|
|
|
+ };
|
|
|
+ } else dom.pause();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ components: {},
|
|
|
+ methods: {
|
|
|
+ // 点击查看大图
|
|
|
+ lookImg(url) {
|
|
|
+ let dom = this.$refs.viewer.$viewer;
|
|
|
+ this.lookPics = [url];
|
|
|
+ dom.show();
|
|
|
+ },
|
|
|
+ async getData() {
|
|
|
+ // https://www.4dmodel.com/
|
|
|
+ let url = `https://super.4dage.com/data/${
|
|
|
+ this.id
|
|
|
+ }/hot/js/data.js?time=${Math.random()}`;
|
|
|
+ let result = (await this.$http.get(url)).data;
|
|
|
+ const resData = result[this.m];
|
|
|
+ console.log("----", resData);
|
|
|
+ if (resData) {
|
|
|
+ this.audio = resData.backgroundMusic;
|
|
|
+ // 只有单独的音频上传
|
|
|
+ if (
|
|
|
+ resData.backgroundMusic &&
|
|
|
+ !resData.model &&
|
|
|
+ !resData.video &&
|
|
|
+ !resData.images
|
|
|
+ ) {
|
|
|
+ this.isOneAduio = true;
|
|
|
+ }
|
|
|
+ // 底部的tab
|
|
|
+ const arr = [];
|
|
|
+ const obj = {};
|
|
|
+ if (resData.model) {
|
|
|
+ obj.model = resData.model;
|
|
|
+ arr.push({ id: 1, type: "model", name: "模型" });
|
|
|
+ }
|
|
|
+ if (resData.video) {
|
|
|
+ obj.video = resData.video;
|
|
|
+ arr.push({ id: 2, type: "video", name: "视频" });
|
|
|
+ }
|
|
|
+ if (resData.images) {
|
|
|
+ obj.img = resData.images;
|
|
|
+ arr.push({ id: 3, type: "img", name: "图片" });
|
|
|
+ }
|
|
|
+ this.flooTab = arr;
|
|
|
+ this.data = obj;
|
|
|
+
|
|
|
+ // 当前type的值 应该为
|
|
|
+ if (resData.model) this.myType = "model";
|
|
|
+ else if (resData.video) this.myType = "video";
|
|
|
+ else if (resData.images) this.myType = "img";
|
|
|
+
|
|
|
+ this.myTitle = resData.title;
|
|
|
+ this.myTxt = resData.content;
|
|
|
+ this.videoTxt = resData.videosDesc;
|
|
|
+ this.imgTxt = resData.imagesDesc;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.home {
|
|
|
+ .viewerCla img {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(255, 252, 247, 0.8);
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
+ position: relative;
|
|
|
+ #myAudio {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 500px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 100%;
|
|
|
+ padding-top: 40px;
|
|
|
+ .mainCon {
|
|
|
+ padding: 40px 60px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 200px);
|
|
|
+ background: linear-gradient(#929292, #c5c5c5);
|
|
|
+ .audioIcon {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 30px;
|
|
|
+ }
|
|
|
+ .flooTabBox {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ .tabRow {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ background-color: #dedede;
|
|
|
+ padding: 0px 14px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 18px;
|
|
|
+ & > img {
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabRowAc {
|
|
|
+ background-color: #b90c0c;
|
|
|
+ pointer-events: none;
|
|
|
+ color: #d6b970;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contenBoxMain {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 60px);
|
|
|
+ }
|
|
|
+ .contenBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ .modelBox,
|
|
|
+ .videoBox,
|
|
|
+ .imgBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .modelBox {
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videoBox {
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ cursor: pointer;
|
|
|
+ & > img {
|
|
|
+ pointer-events: none;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contenBoxAc {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+ .awccJJ {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ left: -50px;
|
|
|
+ }
|
|
|
+ .rightJJ {
|
|
|
+ left: auto;
|
|
|
+ right: -50px;
|
|
|
+ }
|
|
|
+ .noClick {
|
|
|
+ opacity: 0.4;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxt {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ overflow-y: auto;
|
|
|
+ .myTitle {
|
|
|
+ color: #b90c0c;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .myTxt {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ background: #b90c0c;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|