|
|
@@ -1,18 +1,472 @@
|
|
|
<template>
|
|
|
- <div class="home">
|
|
|
- <img alt="Vue logo" src="../assets/logo.png">
|
|
|
- <HelloWorld msg="Welcome to Your Vue.js App"/>
|
|
|
+ <div class="home" @click="autoplay" @touchstart="autoplay">
|
|
|
+ <audio
|
|
|
+ v-if="audio"
|
|
|
+ class="audio"
|
|
|
+ id="audio1"
|
|
|
+ :src="audio"
|
|
|
+ preload
|
|
|
+ autoplay
|
|
|
+ loop
|
|
|
+ ref="musicBg"
|
|
|
+ ></audio>
|
|
|
+ <div
|
|
|
+ class="content"
|
|
|
+ v-if="fixIcon.length > 0"
|
|
|
+ :style="{ height: isMobile ? '100%' : '80%' }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-if="!isMobile"
|
|
|
+ @click="slideto('slidePrev')"
|
|
|
+ class="swiper-button-prev"
|
|
|
+ ></div>
|
|
|
+ <div class="mb-intro" v-if="active === 'title' && isMobile">
|
|
|
+ <p v-html="data.title"></p>
|
|
|
+ <p v-html="data.content"></p>
|
|
|
+ </div>
|
|
|
+ <swiper v-else class="warpper" ref="mySwiper" :options="swiperOptions">
|
|
|
+ <swiper-slide v-for="(item, i) in data[active]" :key="i">
|
|
|
+ <div class="slide">
|
|
|
+ <img
|
|
|
+ style="cursor: pointer"
|
|
|
+ v-viewer
|
|
|
+ v-if="active === 'images'"
|
|
|
+ :src="fixUrl(item)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <video
|
|
|
+ v-else-if="active === 'video'"
|
|
|
+ :src="fixUrl(item.url)"
|
|
|
+ controls
|
|
|
+ autoplay
|
|
|
+ ></video>
|
|
|
+ <iframe
|
|
|
+ @click="colseParent(item)"
|
|
|
+ v-else
|
|
|
+ :src="fixUrl(item)"
|
|
|
+ frameborder="0"
|
|
|
+ ></iframe>
|
|
|
+ </div>
|
|
|
+ </swiper-slide>
|
|
|
+ <div class="swiper-pagination" slot="pagination"></div>
|
|
|
+ </swiper>
|
|
|
+ <div
|
|
|
+ v-if="!isMobile"
|
|
|
+ @click="slideto('slideNext')"
|
|
|
+ class="swiper-button-next"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <ul class="iconarr" v-if="fixIcon.length > 1">
|
|
|
+ <li
|
|
|
+ :class="{ active: item.id === active }"
|
|
|
+ @click="active = item.id"
|
|
|
+ v-for="(item, i) in fixIcon"
|
|
|
+ :key="i"
|
|
|
+ >
|
|
|
+ <img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div
|
|
|
+ class="intro"
|
|
|
+ :class="{ ismtop: fixIcon.length <= 0 }"
|
|
|
+ v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
|
|
|
+ >
|
|
|
+ <h3 v-html="data.title"></h3>
|
|
|
+ <p v-html="data.content"></p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-// @ is an alias to /src
|
|
|
-import HelloWorld from '@/components/HelloWorld.vue'
|
|
|
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
+import "swiper/css/swiper.css";
|
|
|
+import browser from "@/utils/browser";
|
|
|
+
|
|
|
+let iconArr = [
|
|
|
+ { name: "图片", id: "images", img: "img-icon", display: false },
|
|
|
+ { name: "视频", id: "video", img: "video-icon", display: false },
|
|
|
+ { name: "网页", id: "iframe", img: "iframe-icon", display: false },
|
|
|
+ { name: "模型", id: "model", img: "model-icon", display: false },
|
|
|
+];
|
|
|
+
|
|
|
+browser.mobile &&
|
|
|
+ iconArr.push({ name: "介绍", id: "title", img: "txt-icon", display: false });
|
|
|
|
|
|
export default {
|
|
|
- name: 'Home',
|
|
|
+ name: "Home",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loadAuto: false,
|
|
|
+ audio: "",
|
|
|
+ m: this.$route.query.m,
|
|
|
+ id: this.$route.query.id,
|
|
|
+ isMobile: browser.mobile,
|
|
|
+ isAndriod: browser.android,
|
|
|
+ swiperOptions: browser.mobile
|
|
|
+ ? {
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ slidesPerView: 3,
|
|
|
+ spaceBetween: 0,
|
|
|
+ centeredSlides: true,
|
|
|
+ pagination: {
|
|
|
+ el: ".swiper-pagination",
|
|
|
+ clickable: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: {},
|
|
|
+ iconArr,
|
|
|
+ active: "",
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ active(newVal) {
|
|
|
+ if (!newVal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.$refs.musicBg) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ setTimeout(() => {
|
|
|
+ if (newVal == "video") {
|
|
|
+ if (!this.$refs.musicBg.paused) {
|
|
|
+ this.$refs.musicBg.pause();
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.$refs.musicBg.paused) {
|
|
|
+ this.$refs.musicBg.play(); // 暂停
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ swiper() {
|
|
|
+ return this.$refs.mySwiper.$swiper;
|
|
|
+ },
|
|
|
+ fixIcon() {
|
|
|
+ let arr = this.iconArr.filter((item) => !!item.display);
|
|
|
+ return arr;
|
|
|
+ },
|
|
|
+ },
|
|
|
components: {
|
|
|
- HelloWorld
|
|
|
+ Swiper,
|
|
|
+ SwiperSlide,
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ autoplay() {
|
|
|
+ if (this.loadAuto) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ try {
|
|
|
+ this.$refs.musicBg.play();
|
|
|
+ this.loadAuto = true;
|
|
|
+ } catch (error) {
|
|
|
+ error;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ this.data = result[this.m];
|
|
|
+ if (!this.data) {
|
|
|
+ return alert("热点解析错误");
|
|
|
+ }
|
|
|
+
|
|
|
+ this.audio = this.data["backgroundMusic"];
|
|
|
+
|
|
|
+ if (!this.data.content && this.isMobile) {
|
|
|
+ this.iconArr.pop();
|
|
|
+ }
|
|
|
+ this.iconArr.forEach((item) => {
|
|
|
+ if (this.data[item.id]) {
|
|
|
+ this.active = !this.active ? item.id : this.active;
|
|
|
+ item.display = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ colseParent(item) {
|
|
|
+ if (this.isMobile) {
|
|
|
+ if (
|
|
|
+ item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
|
|
|
+ this.active === "iframe"
|
|
|
+ ) {
|
|
|
+ window.parent.document.getElementById("closepop").click();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fixUrl(item) {
|
|
|
+ let condition =
|
|
|
+ item.indexOf("http://") > -1 || item.indexOf("https://") > -1;
|
|
|
+ if (this.isMobile) {
|
|
|
+ if (
|
|
|
+ item.indexOf("mp.weixin.qq.com/mp/") > -1 &&
|
|
|
+ this.active === "iframe"
|
|
|
+ ) {
|
|
|
+ return `https://www.4dmodel.com/SuperTwo/hot_online1/linktoWC.html?url=${encodeURIComponent(
|
|
|
+ item
|
|
|
+ )}`;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!condition) {
|
|
|
+ return "https://" + item;
|
|
|
+ }
|
|
|
+ return item;
|
|
|
+ },
|
|
|
+ slideto(action) {
|
|
|
+ this.swiper[action]();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getData();
|
|
|
+ document.addEventListener(
|
|
|
+ "WeixinJSBridgeReady",
|
|
|
+ () => {
|
|
|
+ this.autoplay();
|
|
|
+ },
|
|
|
+ false
|
|
|
+ );
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.audio {
|
|
|
+ position: fixed;
|
|
|
+ top: -100px;
|
|
|
+ left: -100px;
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.mb-intro {
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ > p {
|
|
|
+ line-height: 1.5;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ &:first-of-type {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-</script>
|
|
|
+.home {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ .ismtop {
|
|
|
+ padding-top: 40px !important;
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+ .warpper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .slide {
|
|
|
+ font-size: 0;
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-height: 570px;
|
|
|
+ border-radius: 14px;
|
|
|
+ box-shadow: 0 0 16px rgba(0, 0, 0, 0.6);
|
|
|
+ }
|
|
|
+
|
|
|
+ iframe {
|
|
|
+ height: 570px;
|
|
|
+ width: 1000px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconarr {
|
|
|
+ list-style: none;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin-right: 30px;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #fff;
|
|
|
+ list-style: none;
|
|
|
+ font-size: 14px;
|
|
|
+ width: 90px;
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 10px;
|
|
|
+ border: solid 1px #fff;
|
|
|
+ margin-right: 10px;
|
|
|
+ span {
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: #19bbed;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .intro {
|
|
|
+ max-height: 20vh;
|
|
|
+ overflow: auto;
|
|
|
+ width: 70%;
|
|
|
+ color: #fff;
|
|
|
+ margin: 0 auto;
|
|
|
+ > h3 {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ > p {
|
|
|
+ line-height: 1.5;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-indent: 32px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1400px) {
|
|
|
+ .home {
|
|
|
+ .content {
|
|
|
+ .warpper {
|
|
|
+ .slide {
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-height: 500px;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ max-height: 80vh;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ height: 500px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 1000px) {
|
|
|
+ .home {
|
|
|
+ background: rgba(0, 0, 0, 0.8);
|
|
|
+ .content {
|
|
|
+ .warpper {
|
|
|
+ .slide {
|
|
|
+ width: 100%;
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-height: none;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+ img{
|
|
|
+ max-height: 80vh;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .iconarr {
|
|
|
+ list-style: none;
|
|
|
+ margin-right: 0px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 10px;
|
|
|
+ right: 0px;
|
|
|
+ z-index: 10000;
|
|
|
+ li {
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@media only screen and (max-width: 906px) and (orientation: landscape) {
|
|
|
+ .home {
|
|
|
+ .content {
|
|
|
+ .warpper {
|
|
|
+ .slide {
|
|
|
+ width: 100%;
|
|
|
+ img,
|
|
|
+ video,
|
|
|
+ iframe {
|
|
|
+ max-width: 70%;
|
|
|
+ max-height: 80vh;
|
|
|
+ }
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ max-width: unset;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.swiper-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-pagination-bullet {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+.swiper-slide {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ transition: 300ms;
|
|
|
+ transform: scale(0.8);
|
|
|
+ position: relative;
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-slide-active,
|
|
|
+.swiper-slide-duplicate-active {
|
|
|
+ transform: scale(1);
|
|
|
+ opacity: 1;
|
|
|
+ z-index: 999;
|
|
|
+}
|
|
|
+
|
|
|
+.swiper-button-prev,
|
|
|
+.swiper-button-next {
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ padding: 10px 20px;
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+.swiper-button-prev {
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+.swiper-button-next {
|
|
|
+ right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+@media screen and (max-width: 500px) {
|
|
|
+ .swiper-slide {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
tremble
