|
|
@@ -0,0 +1,545 @@
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <div class="main">
|
|
|
+ <div class="myTitle">{{ myTitle }}</div>
|
|
|
+ <div class="mainCon" v-show="!oneTxt">
|
|
|
+ <audio id="myAudio" v-if="audio" v-show="isOneAduio" :src="urlToFitFu(audio)" controls></audio>
|
|
|
+ <!-- 如果只有一个模块 -->
|
|
|
+ <div class="oneTabNum" v-if="
|
|
|
+ flooTab.length === 1 &&
|
|
|
+ data[myType] &&
|
|
|
+ data[myType].length &&
|
|
|
+ data[myType].length > 1
|
|
|
+ ">
|
|
|
+ {{ myInd + 1 }} / {{ data[myType].length }}
|
|
|
+ </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="urlToFitFu(item)" frameborder="0" v-if="index === myInd"></iframe>
|
|
|
+ </div>
|
|
|
+ <!-- 视频页面 -->
|
|
|
+ <div class="videoBox" v-else-if="myType === 'video'">
|
|
|
+ <video controls controlslist="nodownload" :src="urlToFitFu(item.url)" v-if="index === myInd"></video>
|
|
|
+ </div>
|
|
|
+ <!-- 图片页面 -->
|
|
|
+ <div class="imgBox" v-else-if="myType === 'img'">
|
|
|
+ <div class="smImgBox" @click="lookImg(urlToFitFu(item))">
|
|
|
+ <img v-lazy="urlToFitFu(item)" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 左右箭头 -->
|
|
|
+ <div @click="cutMyInd(-1, myInd === 0)" class="leftJJ awccJJ" :class="{ noClick: myInd === 0 }"
|
|
|
+ v-if="data[myType] && data[myType].length > 1"></div>
|
|
|
+ <div @click="cutMyInd(1, myInd === data[myType].length - 1)" class="rightJJ awccJJ"
|
|
|
+ :class="{ noClick: myInd === data[myType].length - 1 }" v-if="data[myType] && data[myType].length > 1">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 下面的文字介绍 -->
|
|
|
+ <div class="flooTxt" :class="{ flooTxtOne: oneTxt }">
|
|
|
+ <div class="flooTxtBox">
|
|
|
+ <!-- <div class="myTitle">{{ myTitle }}</div> -->
|
|
|
+ <!-- 视频的介绍 -->
|
|
|
+ <div class="myTxt" v-if="myType === 'video' && videoTxt[myInd]" v-html="videoTxt[myInd]">
|
|
|
+ </div>
|
|
|
+ <div class="myTxt" v-if="myType === 'img' && imgTxt[myInd]" v-html="imgTxt[myInd]">
|
|
|
+ </div>
|
|
|
+ <div class="myTxt" v-html="myTxt"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看图片 -->
|
|
|
+ <viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
+ <img :src="lookPics[0]" alt="" />
|
|
|
+ </viewer>
|
|
|
+
|
|
|
+ <!-- 底部的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="" />
|
|
|
+ <div>
|
|
|
+ {{ 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="tabRow" v-if="audio && !isOneAduio" @click="audioSta = !audioSta" :title="audioSta ? '关闭音频' : '打开音频'">
|
|
|
+ <img :src="require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)" alt="" />
|
|
|
+ <div>音频</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </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: [],
|
|
|
+
|
|
|
+ // 只有标题和文字（没有视频，没有模型，没有图片）
|
|
|
+ oneTxt: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: {
|
|
|
+ // 本地化 url 适配
|
|
|
+ urlToFitFu(url) {
|
|
|
+ return url
|
|
|
+ // const resUrl = url;
|
|
|
+ // if (url.includes("https://super.4dage.com")) {
|
|
|
+ // return url.replace("https://super.4dage.com", "");
|
|
|
+ // } else if (url.includes("http://super.4dage.com")) {
|
|
|
+ // return url.replace("http://super.4dage.com", "");
|
|
|
+ // } else return resUrl;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击左右箭头
|
|
|
+ cutMyInd(num, flag) {
|
|
|
+ if (flag) return
|
|
|
+ this.myInd += num
|
|
|
+ },
|
|
|
+ // 点击查看大图
|
|
|
+ lookImg(url) {
|
|
|
+ console.log(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/${
|
|
|
+ // 线上数据
|
|
|
+
|
|
|
+ // let url = `/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 || []
|
|
|
+
|
|
|
+ // 只有 标题和 文字介绍（没有视频，没有模型，没有图片）
|
|
|
+ if (!obj.model && !obj.video && !obj.img && !resData.backgroundMusic) {
|
|
|
+ this.oneTxt = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.home {
|
|
|
+ font-family: 'fzFont';
|
|
|
+ background: url("../assets/images/pc/hot_bg.png") no-repeat center center;
|
|
|
+ background-color: rgba(transparent, 0.8);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ border-radius: 10px;
|
|
|
+ color: rgba(80, 61, 42, 0.9);
|
|
|
+ .viewerCla img {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ position: relative;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 60%;
|
|
|
+ height: 65%;
|
|
|
+ position: relative;
|
|
|
+ #myAudio {
|
|
|
+ z-index: 11;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 500px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 1100px;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 100%;
|
|
|
+ padding: 30px 0 20px 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .myTitle {
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .mainCon {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 200px);
|
|
|
+ .oneTabNum {
|
|
|
+ z-index: 10;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contenBoxMain {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .contenBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.5s;
|
|
|
+
|
|
|
+ .modelBox,
|
|
|
+ .videoBox,
|
|
|
+ .imgBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .modelBox {
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .videoBox {
|
|
|
+ padding: 0px 50px;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ padding: 0px 50px;
|
|
|
+ .smImgBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ // cursor: zoom-in;
|
|
|
+ & > img {
|
|
|
+ pointer-events: none;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .contenBoxAc {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
+ .awccJJ {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ left: 10px;
|
|
|
+ width: 37px;
|
|
|
+ height: 37px;
|
|
|
+ background-image: url("../assets/images/pc/left.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightJJ {
|
|
|
+ left: auto;
|
|
|
+ right: 10px;
|
|
|
+ background-image: url("../assets/images/pc/right.png");
|
|
|
+ }
|
|
|
+ .noClick {
|
|
|
+ cursor: default;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxt {
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 70%;
|
|
|
+ max-height: 120px;
|
|
|
+ .flooTxtBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ //隐藏滚动条
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .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: #fcda99;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxtOne {
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部
|
|
|
+ .flooTabBox {
|
|
|
+ z-index: 10;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ right: 20px;
|
|
|
+ display: flex;
|
|
|
+ .tabRow {
|
|
|
+ width: 60px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ // background-color: #dedede;
|
|
|
+ color: black;
|
|
|
+ border-radius: 18px;
|
|
|
+ & > img {
|
|
|
+ width: 40px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ }
|
|
|
+ & > div {
|
|
|
+ min-width: 40px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabRowAc {
|
|
|
+ // background-color: #c8aa7d;
|
|
|
+ pointer-events: none;
|
|
|
+ // color: #c7aa7c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 移动端
|
|
|
+@media screen and (max-width: 1000px) {
|
|
|
+ .home {
|
|
|
+ width: 90%;
|
|
|
+ height: 55%;
|
|
|
+ transform: translate(-50%, -65%);
|
|
|
+ #myAudio {
|
|
|
+ width: 90vw;
|
|
|
+ max-width: 500px;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ position: absolute;
|
|
|
+ .myTitle {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .mainCon {
|
|
|
+ border-radius: 0;
|
|
|
+ height: calc(100% - 195px);
|
|
|
+ .contenBox {
|
|
|
+ .videoBox {
|
|
|
+ padding: 0 30px;
|
|
|
+ position: relative;
|
|
|
+ video {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ max-height: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ // padding: 60px 50px 80px;
|
|
|
+ padding: 0 15px;
|
|
|
+ .smImgBox {
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .awccJJ {
|
|
|
+ left: 0;
|
|
|
+ width: 28px;
|
|
|
+ height: 57px;
|
|
|
+ cursor: default;
|
|
|
+ background-image: url("../assets/images/pc/icon-left.png");
|
|
|
+ }
|
|
|
+ .rightJJ {
|
|
|
+ left: auto;
|
|
|
+ right: 0;
|
|
|
+ background-image: url("../assets/images/pc/icon-right.png");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxt {
|
|
|
+ margin-top: -5px;
|
|
|
+ width: 100%;
|
|
|
+ padding: 10px 15px 0px 15px;
|
|
|
+ max-height: 98px;
|
|
|
+
|
|
|
+ .flooTxtBox {
|
|
|
+ .myTxt {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxtOne {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTabBox {
|
|
|
+ width: 100%;
|
|
|
+ bottom: 220px;
|
|
|
+ right: 0;
|
|
|
+ justify-content: center;
|
|
|
+ .tabRow {
|
|
|
+ cursor: default;
|
|
|
+ // margin: 0 6px;
|
|
|
+ // padding: 0 10px;
|
|
|
+ height: 32px;
|
|
|
+ & > img {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lanxin
3 tháng trước cách đây
