|
|
@@ -1,616 +1,445 @@
|
|
|
<template>
|
|
|
- <!-- @click="autoplay" @touchstart="autoplay" -->
|
|
|
- <div class="home">
|
|
|
- <audio
|
|
|
- v-if="audio"
|
|
|
- class="audio"
|
|
|
- id="audio1"
|
|
|
- :src="audio"
|
|
|
- preload
|
|
|
- ref="musicBg"
|
|
|
- @ended="overAudio"
|
|
|
- ></audio>
|
|
|
- <div
|
|
|
- class="content"
|
|
|
- v-if="(!audio && fixIcon.length > 0) || (audio && fixIcon.length > 1)"
|
|
|
- :class="{ isMobileCon: isMobile }"
|
|
|
- >
|
|
|
- <div
|
|
|
- v-if="!isMobile && lengthShow"
|
|
|
- @click="slideto('slidePrev')"
|
|
|
- class="swiper-button-prev"
|
|
|
- ></div>
|
|
|
- <div class="mb-intro" v-show="active === 'title' && isMobile">
|
|
|
- <p v-html="data.title"></p>
|
|
|
- <p v-html="data.content"></p>
|
|
|
- <p
|
|
|
- v-html="data.imagesDesc[myInd]"
|
|
|
- v-if="
|
|
|
- data.imagesDesc && data.imagesDesc[myInd] && active === 'images'
|
|
|
- "
|
|
|
- ></p>
|
|
|
- <p
|
|
|
- v-html="data.videosDesc[myInd]"
|
|
|
- v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
- ></p>
|
|
|
+ <div class="Home">
|
|
|
+ <div class="main">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <h3 class="top">{{ title }}</h3>
|
|
|
+ <!-- 下载 -->
|
|
|
+ <div class="xiazai" v-if="isEn" @click="devieShowFu">
|
|
|
+ <img src="../assets/images/xiazai.png" alt="" />Download brochure
|
|
|
</div>
|
|
|
+ <!-- 内容简介 -->
|
|
|
+ <div class="content" v-html="content"></div>
|
|
|
+
|
|
|
<!-- 查看图片 -->
|
|
|
<viewer class="viewerCla" ref="viewer" :images="lookPics">
|
|
|
<img :src="lookPics[0]" alt="" />
|
|
|
</viewer>
|
|
|
|
|
|
- <swiper
|
|
|
- v-show="active !== 'title'"
|
|
|
- class="warpper"
|
|
|
- ref="mySwiper"
|
|
|
- :options="swiperOptions"
|
|
|
+ <!-- 多图轮播 -->
|
|
|
+ <div class="swBox1" v-if="images.length > 1">
|
|
|
+ <Swiper class="warpper" :options="optionsImg">
|
|
|
+ <SwiperSlide v-for="(item, i) in images" :key="i">
|
|
|
+ <div class="slide" :title="imagesDesc[i] ? imagesDesc[i] : '图片'">
|
|
|
+ <div class="txt">
|
|
|
+ {{ imagesDesc[i] ? imagesDesc[i] : "图片" }}
|
|
|
+ </div>
|
|
|
+ <img
|
|
|
+ style="cursor: pointer"
|
|
|
+ v-lazy="item"
|
|
|
+ @click="lookImg(item)"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </SwiperSlide>
|
|
|
+ </Swiper>
|
|
|
+ </div>
|
|
|
+ <!-- 单图展示 -->
|
|
|
+ <div
|
|
|
+ class="oneImgBox"
|
|
|
+ v-else-if='images[0]'
|
|
|
+ :title="imagesDesc[0] ? imagesDesc[0] : '图片'"
|
|
|
>
|
|
|
- <swiper-slide v-for="(item, i) in data[active]" :key="i">
|
|
|
- <div class="slide">
|
|
|
- <img
|
|
|
- style="cursor: pointer"
|
|
|
- v-if="active === 'images'"
|
|
|
- v-lazy="fixUrl(item)"
|
|
|
- @click="lookImg(fixUrl(item))"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <video
|
|
|
- class="videoDom"
|
|
|
- v-else-if="active === 'video'"
|
|
|
- :src="fixUrl(item.url)"
|
|
|
- controls
|
|
|
- ></video>
|
|
|
- <iframe
|
|
|
- @click="colseParent(item)"
|
|
|
- v-else-if="active === 'model' || active === 'iframe'"
|
|
|
- :src="fixUrl(item)"
|
|
|
- frameborder="0"
|
|
|
- ></iframe>
|
|
|
- </div>
|
|
|
- </swiper-slide>
|
|
|
- <div
|
|
|
- class="swiper-pagination"
|
|
|
- slot="pagination"
|
|
|
- v-show="lengthShow"
|
|
|
- ></div>
|
|
|
- </swiper>
|
|
|
+ <div class="oneTxt">{{ imagesDesc[0] ? imagesDesc[0] : "图片" }}</div>
|
|
|
+ <img v-lazy="images[0]" alt="" @click="lookImg(images[0])" />
|
|
|
+ </div>
|
|
|
+ <!-- 多视频轮播 -->
|
|
|
+ <div class="swBox2" v-if="videos.length > 1">
|
|
|
+ <Swiper class="warpper" ref="mySwiper" :options="optionsVideo">
|
|
|
+ <SwiperSlide v-for="(item, i) in videos" :key="i">
|
|
|
+ <div
|
|
|
+ class="slide"
|
|
|
+ @click="videoSrc = item.url"
|
|
|
+ :title="videosDesc[i] ? videosDesc[i] : '视频'"
|
|
|
+ >
|
|
|
+ <!-- 遮罩 -->
|
|
|
+ <div class="smBox">
|
|
|
+ <img src="../assets/images/play.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="txt">
|
|
|
+ {{ videosDesc[i] ? videosDesc[i] : "视频" }}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <video :src="item.url"></video>
|
|
|
+ </div>
|
|
|
+ </SwiperSlide>
|
|
|
+ </Swiper>
|
|
|
+ </div>
|
|
|
+ <!-- 单视频展示 -->
|
|
|
<div
|
|
|
- v-if="!isMobile && lengthShow"
|
|
|
- @click="slideto('slideNext')"
|
|
|
- class="swiper-button-next"
|
|
|
- ></div>
|
|
|
- </div>
|
|
|
- <ul
|
|
|
- class="iconarr"
|
|
|
- v-if="fixIcon.length > 0"
|
|
|
- :class="{ oneChuMusic: fixIcon.length === 1 && !audio }"
|
|
|
- >
|
|
|
- <li
|
|
|
- :class="{
|
|
|
- active: item.id === active || item.audioAc,
|
|
|
- onlyTxt: audio && fixIcon.length === 2 && i !== 0,
|
|
|
- }"
|
|
|
- @click="changeActive(item.id, item.audioAc)"
|
|
|
- v-for="(item, i) in fixIcon"
|
|
|
- :key="i"
|
|
|
+ class="oneVideoBox"
|
|
|
+ v-else-if='videos[0]'
|
|
|
+ @click="videoSrc = videos[0].url"
|
|
|
+ :title="videosDesc[0] ? videosDesc[0] : '视频'"
|
|
|
>
|
|
|
- <img :src="require(`@/assets/images/${item.img}.png`)" alt="" />
|
|
|
- <span>{{ item.name }}</span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div
|
|
|
- class="intro"
|
|
|
- :class="{
|
|
|
- ismtop:
|
|
|
- (!audio && fixIcon.length === 0) || (audio && fixIcon.length === 1),
|
|
|
- }"
|
|
|
- v-if="!isMobile || (isMobile && fixIcon.length <= 0)"
|
|
|
- >
|
|
|
- <h3 v-html="data.title"></h3>
|
|
|
- <p v-html="data.content"></p>
|
|
|
- <p
|
|
|
- v-html="data.imagesDesc[myInd]"
|
|
|
- v-if="data.imagesDesc && data.imagesDesc[myInd] && active === 'images'"
|
|
|
- ></p>
|
|
|
- <p
|
|
|
- v-html="data.videosDesc[myInd]"
|
|
|
- v-if="data.videosDesc && data.videosDesc[myInd] && active === 'video'"
|
|
|
- ></p>
|
|
|
+ <div class="oneTxt">{{ videosDesc[0] ? videosDesc[0] : "视频" }}</div>
|
|
|
+ <video :src="videos[0].url"></video>
|
|
|
+ <!-- 遮罩 -->
|
|
|
+ <div class="smBox">
|
|
|
+ <img src="../assets/images/play.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频播放的盒子 -->
|
|
|
+ <div class="videoPlayBox" v-if="videoSrc">
|
|
|
+ <div class="videoMain">
|
|
|
+ <div class="close" @click="videoSrc = ''">
|
|
|
+ <img src="../assets/images/close.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <video :src="videoSrc" controls autoplay></video>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <!-- 点击下载设备出来的盒子 -->
|
|
|
+ <div class="DevieBox" :class="{ DevieBoxShow: devieShow }"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
import "swiper/css/swiper.css";
|
|
|
-import browser from "@/utils/browser";
|
|
|
-
|
|
|
-let iconArr = [
|
|
|
- {
|
|
|
- name: "音频",
|
|
|
- id: "audio",
|
|
|
- img: "audio-icon",
|
|
|
- display: false,
|
|
|
- audioAc: false,
|
|
|
- },
|
|
|
- { 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 });
|
|
|
+const baseUrl =
|
|
|
+ process.env.NODE_ENV === "development" ? "https://haidebao.4dage.com" : "";
|
|
|
|
|
|
export default {
|
|
|
- name: "Home",
|
|
|
+ components: { Swiper, SwiperSlide },
|
|
|
data() {
|
|
|
return {
|
|
|
- lookPics: [],
|
|
|
-
|
|
|
- // 图片描述的索引
|
|
|
- myInd: 0,
|
|
|
- lengthShow: false,
|
|
|
- // 看看是不是只有一张图，一个视频或irm，只有一张图的时候隐藏左右按钮和小圆点
|
|
|
- audio: "",
|
|
|
+ // 下载手册的页面
|
|
|
+ devieShow: false,
|
|
|
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,
|
|
|
- },
|
|
|
- on: {
|
|
|
- slideChangeTransitionEnd: () => {
|
|
|
- let swiper = this.$refs.mySwiper.$swiper;
|
|
|
- let activeIndex = swiper.activeIndex;
|
|
|
- this.myInd = activeIndex;
|
|
|
- },
|
|
|
- },
|
|
|
- }
|
|
|
- : {
|
|
|
- slidesPerView: 3,
|
|
|
- spaceBetween: 0,
|
|
|
- centeredSlides: true,
|
|
|
- pagination: {
|
|
|
- el: ".swiper-pagination",
|
|
|
- clickable: true,
|
|
|
- },
|
|
|
- on: {
|
|
|
- slideChangeTransitionEnd: () => {
|
|
|
- let swiper = this.$refs.mySwiper.$swiper;
|
|
|
- let activeIndex = swiper.activeIndex;
|
|
|
- this.myInd = activeIndex;
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- data: {},
|
|
|
- iconArr,
|
|
|
- active: "",
|
|
|
+ isEn: this.$route.query.c,
|
|
|
+ title: "",
|
|
|
+ content: "",
|
|
|
+ images: [],
|
|
|
+ imagesDesc: [],
|
|
|
+ videos: [],
|
|
|
+ videoSrc: "",
|
|
|
+ videosDesc: [],
|
|
|
+ baseUrl,
|
|
|
+ lookPics: [],
|
|
|
+ optionsImg: {
|
|
|
+ slidesPerView: 2.5,
|
|
|
+ spaceBetween: 8,
|
|
|
+ },
|
|
|
+ optionsVideo: {
|
|
|
+ slidesPerView: 2.5,
|
|
|
+ spaceBetween: 8,
|
|
|
+ },
|
|
|
};
|
|
|
},
|
|
|
- watch: {
|
|
|
- myInd: {
|
|
|
- handler(newv) {
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- if (this.active == "video") {
|
|
|
- // 控制当前选中的视频播放
|
|
|
- let videoDoms = document.querySelectorAll(".videoDom");
|
|
|
- videoDoms.forEach((v, i) => {
|
|
|
- if (i === newv) v.play();
|
|
|
- else v.pause();
|
|
|
- });
|
|
|
- }
|
|
|
- }, 500);
|
|
|
- });
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
-
|
|
|
- active(newVal) {
|
|
|
- let AcDataLength = this.data[newVal].length - 1;
|
|
|
- if (this.myInd > AcDataLength) this.myInd = AcDataLength;
|
|
|
-
|
|
|
- // 判断是否只有一张图片或者视频，ifrm lengthShow
|
|
|
- let tempType = this.data[newVal];
|
|
|
- if (tempType && tempType.length && tempType.length > 1)
|
|
|
- this.lengthShow = true;
|
|
|
- else this.lengthShow = false;
|
|
|
- if (!newVal) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (!this.$refs.musicBg) {
|
|
|
- return;
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ methods: {
|
|
|
+ // 点击下载手册
|
|
|
+ devieShowFu() {
|
|
|
+ const flag = localStorage.getItem("HDB_WJ");
|
|
|
+ if (flag) {
|
|
|
+ console.log("已经提交过问卷了");
|
|
|
+ } else {
|
|
|
+ // 新窗口打开
|
|
|
+ window.open(`${baseUrl}/backstage/#/Zgather`);
|
|
|
}
|
|
|
- // 如果点击的是音频
|
|
|
- setTimeout(() => {
|
|
|
- if (newVal == "video") {
|
|
|
- this.audioAc(false);
|
|
|
- if (!this.$refs.musicBg.paused) {
|
|
|
- this.$refs.musicBg.pause();
|
|
|
- }
|
|
|
- }
|
|
|
- // 控制当前选中的视频播放
|
|
|
- let videoDoms = document.querySelectorAll(".videoDom");
|
|
|
- videoDoms.forEach((v, i) => {
|
|
|
- if (i === this.myInd) v.play();
|
|
|
- else v.pause();
|
|
|
- });
|
|
|
- }, 500);
|
|
|
},
|
|
|
- },
|
|
|
- computed: {
|
|
|
- swiper() {
|
|
|
- return this.$refs.mySwiper.$swiper;
|
|
|
- },
|
|
|
- fixIcon() {
|
|
|
- let arr = this.iconArr.filter((item) => !!item.display);
|
|
|
- return arr;
|
|
|
- },
|
|
|
- },
|
|
|
- components: {
|
|
|
- Swiper,
|
|
|
- SwiperSlide,
|
|
|
- },
|
|
|
- methods: {
|
|
|
// 点击查看大图
|
|
|
lookImg(url) {
|
|
|
let dom = this.$refs.viewer.$viewer;
|
|
|
this.lookPics = [url];
|
|
|
dom.show();
|
|
|
},
|
|
|
- // 音频播放完毕
|
|
|
- overAudio() {
|
|
|
- console.log("播放声音完毕");
|
|
|
- this.audioAc(false);
|
|
|
- },
|
|
|
- // 音频的状态
|
|
|
- audioAc(flag) {
|
|
|
- this.iconArr.forEach((v) => {
|
|
|
- if (v.id === "audio") v.audioAc = flag;
|
|
|
- });
|
|
|
- },
|
|
|
- // 点击切换图片--视频
|
|
|
- changeActive(id, flag) {
|
|
|
- if (id === "audio" && flag === false) {
|
|
|
- this.audioAc(true);
|
|
|
- this.$refs.musicBg.play();
|
|
|
- return;
|
|
|
- } else if (id === "audio" && flag === true) {
|
|
|
- this.audioAc(false);
|
|
|
- this.$refs.musicBg.pause();
|
|
|
- return;
|
|
|
- }
|
|
|
- this.active = id;
|
|
|
- },
|
|
|
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) {
|
|
|
+ const data = result[this.m];
|
|
|
+ if (!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;
|
|
|
- }
|
|
|
- // 如果有音频
|
|
|
- if (item.id === "audio" && this.audio) 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]();
|
|
|
+ // console.log(123,data);
|
|
|
+ this.title = data.title;
|
|
|
+ this.content = data.content;
|
|
|
+ this.images = data.images;
|
|
|
+ this.imagesDesc = data.imagesDesc;
|
|
|
+ this.videos = data.video;
|
|
|
+ this.videosDesc = data.videosDesc;
|
|
|
},
|
|
|
},
|
|
|
+ created() {},
|
|
|
mounted() {
|
|
|
this.getData();
|
|
|
- document.addEventListener(
|
|
|
- "WeixinJSBridgeReady",
|
|
|
- () => {
|
|
|
- this.autoplay();
|
|
|
- },
|
|
|
- false
|
|
|
- );
|
|
|
},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.viewerCla img {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.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;
|
|
|
- padding-right: 40px;
|
|
|
- }
|
|
|
+<style lang='less' scoped>
|
|
|
+.Home {
|
|
|
+ .viewerCla {
|
|
|
+ display: none;
|
|
|
}
|
|
|
-}
|
|
|
-.home {
|
|
|
- background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ backdrop-filter: blur(4px);
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- position: relative;
|
|
|
- .content {
|
|
|
- width: 100%;
|
|
|
- height: 80%;
|
|
|
- .warpper {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- .slide {
|
|
|
- font-size: 0;
|
|
|
- img,
|
|
|
- video,
|
|
|
- iframe {
|
|
|
- max-height: 570px;
|
|
|
- border-radius: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- iframe {
|
|
|
- height: 570px;
|
|
|
- width: 1000px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .main {
|
|
|
+ overflow-y: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ width: 600px;
|
|
|
+ height: 700px;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ border-top: 10px solid #00a0e6;
|
|
|
+ padding: 40px 30px 20px;
|
|
|
+ background-color: rgba(21, 52, 115, 0.8);
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ background: #fec600;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
}
|
|
|
- }
|
|
|
- .isMobileCon {
|
|
|
- height: calc(100vh - 90px);
|
|
|
- }
|
|
|
|
|
|
- .iconarr {
|
|
|
- z-index: 1999;
|
|
|
- position: absolute;
|
|
|
- right: 30px;
|
|
|
- bottom: calc(20vh - 20px);
|
|
|
- list-style: none;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-end;
|
|
|
- li {
|
|
|
+ .top {
|
|
|
+ color: #fec600;
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ .xiazai {
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 10px 0 20px;
|
|
|
+ width: 160px;
|
|
|
+ height: 30px;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 1px solid #fff;
|
|
|
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;
|
|
|
+ font-size: 12px;
|
|
|
+ & > img {
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
- .active {
|
|
|
- background: #19bbed;
|
|
|
- border: none;
|
|
|
- }
|
|
|
- }
|
|
|
- .oneChuMusic {
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
- }
|
|
|
- .onlyTxt {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
- .intro {
|
|
|
- max-height: 19vh;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- .ismtop {
|
|
|
- max-height: 65%;
|
|
|
- height: 65%;
|
|
|
- padding: 50px 0;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@media screen and (max-width: 1400px) {
|
|
|
- .home {
|
|
|
- overflow-y: auto;
|
|
|
- overflow-x: hidden;
|
|
|
.content {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 18px;
|
|
|
+ }
|
|
|
+ // 多张图
|
|
|
+ .swBox1 {
|
|
|
+ margin: 20px 0;
|
|
|
+ width: 100%;
|
|
|
.warpper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
.slide {
|
|
|
- img,
|
|
|
- video,
|
|
|
- iframe {
|
|
|
- max-height: 500px;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ .txt {
|
|
|
+ height: 40px;
|
|
|
+ color: #fec600;
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
- img {
|
|
|
- max-height: 80vh;
|
|
|
- width: 90%;
|
|
|
+ & > img {
|
|
|
+ border: 2px solid transparent;
|
|
|
+ width: calc(100% - 4px);
|
|
|
+ height: 146px;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
- iframe {
|
|
|
- height: 500px;
|
|
|
+ &:hover {
|
|
|
+ & > img {
|
|
|
+ border: 2px solid #fec600;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
-}
|
|
|
|
|
|
-@media screen and (max-width: 1000px) {
|
|
|
- .home {
|
|
|
- background: rgba(0, 0, 0, 0.8);
|
|
|
- .content {
|
|
|
+ .oneImgBox {
|
|
|
+ margin: 20px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
+ .oneTxt {
|
|
|
+ height: 40px;
|
|
|
+ color: #fec600;
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ & > img {
|
|
|
+ border: 2px solid transparent;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ & > img {
|
|
|
+ border: 2px solid #fec600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .swBox2 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ width: 100%;
|
|
|
.warpper {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
.slide {
|
|
|
width: 100%;
|
|
|
- img,
|
|
|
- video,
|
|
|
- iframe {
|
|
|
- max-height: none;
|
|
|
- width: 100%;
|
|
|
- border-radius: 0;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .txt {
|
|
|
+ height: 40px;
|
|
|
+ color: #fec600;
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
}
|
|
|
- img {
|
|
|
- max-height: 80vh;
|
|
|
- width: 90%;
|
|
|
+ .smBox {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.2s;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1000;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ & > img {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
}
|
|
|
- iframe {
|
|
|
+
|
|
|
+ & > video {
|
|
|
width: 100%;
|
|
|
- height: calc(100vh - 90px);
|
|
|
+ height: 150px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .smBox {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .iconarr {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- list-style: none;
|
|
|
- margin-right: 0px;
|
|
|
- position: fixed;
|
|
|
- bottom: 0px;
|
|
|
- right: 0px;
|
|
|
- z-index: 1999;
|
|
|
- li {
|
|
|
- width: 70px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .oneVideoBox {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ .oneTxt {
|
|
|
+ height: 40px;
|
|
|
+ color: #fec600;
|
|
|
+ line-height: 40px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ & > video {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .smBox {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.2s;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1000;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ cursor: pointer;
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ & > img {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ .smBox {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-
|
|
|
-@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: calc(100vh - 90px);
|
|
|
- }
|
|
|
- }
|
|
|
+ // 视频播放的盒子
|
|
|
+ .videoPlayBox {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 9999;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .videoMain {
|
|
|
+ width: 800px;
|
|
|
+ height: 600px;
|
|
|
+ position: relative;
|
|
|
+ .close {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 100;
|
|
|
+ top: -20px;
|
|
|
+ right: -20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ & > video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-</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 {
|
|
|
+ .DevieBox {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ transition: all 0.3s;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 9999;
|
|
|
+ background-color: rgba(21, 52, 115, 0.8);
|
|
|
+ }
|
|
|
+ .DevieBoxShow {
|
|
|
+ opacity: 1;
|
|
|
+ pointer-events: auto;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
