|
|
@@ -0,0 +1,712 @@
|
|
|
+<template>
|
|
|
+ <div class="home">
|
|
|
+ <div class="main">
|
|
|
+ <div class="mainCon" v-show="!oneTxt">
|
|
|
+ <audio
|
|
|
+ id="myAudio"
|
|
|
+ v-if="audio"
|
|
|
+ v-show="isOneAduio"
|
|
|
+ :src="urlToFitFu(audio)"
|
|
|
+ controls
|
|
|
+ ></audio>
|
|
|
+ <!-- 音频图标 -->
|
|
|
+ <!-- <div
|
|
|
+ class="audioIcon"
|
|
|
+ v-if="audio && !isOneAduio"
|
|
|
+ @click="audioSta = !audioSta"
|
|
|
+ :title="audioSta ? '关闭音频' : '打开音频'"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ width="30px"
|
|
|
+ :src="
|
|
|
+ require(`@/assets/images/pc/audio${audioSta ? 'Ac' : ''}.png`)
|
|
|
+ "
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- 如果只有一个模块 -->
|
|
|
+ <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
|
|
|
+ :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>
|
|
|
+ <!-- 左右箭头 -->
|
|
|
+ <div
|
|
|
+ @click="cutMyInd(-1, myInd === 0)"
|
|
|
+ class="leftJJ awccJJ"
|
|
|
+ :class="{ noClick: myInd === 0 }"
|
|
|
+ v-if="data[myType] && data[myType].length > 1"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-show="screenWidth > 900"
|
|
|
+ class="iconimg"
|
|
|
+ src="../assets/images/pc/left.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="screenWidth < 900"
|
|
|
+ class="iconimg"
|
|
|
+ src="../assets/images/pc/leftMo.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </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"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-show="screenWidth > 900"
|
|
|
+ class="iconimg"
|
|
|
+ src="../assets/images/pc/right.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="screenWidth < 900"
|
|
|
+ class="iconimg"
|
|
|
+ src="../assets/images/pc/rightMo.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </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="flooTxt" :class="{ flooTxtOne: oneTxt }">
|
|
|
+ <div class="flooTxtBox">
|
|
|
+ <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>
|
|
|
+ </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: [],
|
|
|
+
|
|
|
+ // 只有标题和文字（没有视频，没有模型，没有图片）
|
|
|
+ oneTxt: false,
|
|
|
+ screenWidth: 0,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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) {
|
|
|
+ console.log("返回", 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) {
|
|
|
+ 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;
|
|
|
+ console.log("data", this.data);
|
|
|
+
|
|
|
+ // 当前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();
|
|
|
+ this.screenWidth = document.documentElement.clientWidth;
|
|
|
+ window.onresize = () => {
|
|
|
+ this.screenWidth = document.documentElement.clientWidth;
|
|
|
+ };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.home {
|
|
|
+ .viewerCla img {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url("../assets/bg.jpg");
|
|
|
+ backdrop-filter: blur(30px) !important;
|
|
|
+ position: relative;
|
|
|
+ #myAudio {
|
|
|
+ z-index: 11;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 500px;
|
|
|
+ height: 60px;
|
|
|
+ backdrop-filter: blur(30px) !important;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ height: 100%;
|
|
|
+ // padding-top: 40px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .mainCon {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ height: 70%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .audioIcon {
|
|
|
+ z-index: 10;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ bottom: 30px;
|
|
|
+ }
|
|
|
+ .oneTabNum {
|
|
|
+ z-index: 10;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .contenBoxMain {
|
|
|
+ position: relative;
|
|
|
+ width: 80%;
|
|
|
+ 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: 100px 100px 120px;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ // padding: 100px 100px 120px;
|
|
|
+ .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: 40px;
|
|
|
+ height: 40px;
|
|
|
+ background-image: url("../assets/images/pc/left.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .iconimg {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ &:focus {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightJJ {
|
|
|
+ left: auto;
|
|
|
+ right: 10px;
|
|
|
+ background-image: url("../assets/images/pc/right.png");
|
|
|
+ }
|
|
|
+ .noClick {
|
|
|
+ cursor: default;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .flooTabBox {
|
|
|
+ z-index: 10;
|
|
|
+ // position: absolute;
|
|
|
+ // bottom: 23%;
|
|
|
+ // left: 50%;
|
|
|
+ // transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ .tabRow {
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0 12px;
|
|
|
+ font-size: 14px;
|
|
|
+ background: linear-gradient(#070c2b, #162162);
|
|
|
+ padding: 0px 14px;
|
|
|
+ height: 30px;
|
|
|
+ border-radius: 18px;
|
|
|
+ color: #17c7fc;
|
|
|
+ & > img {
|
|
|
+ margin-right: 6px;
|
|
|
+ width: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabRowAc {
|
|
|
+ background: linear-gradient(
|
|
|
+ #0175c2,
|
|
|
+ #0481cb,
|
|
|
+ #10a9e7,
|
|
|
+ #16c2f9,
|
|
|
+ #19cbff
|
|
|
+ );
|
|
|
+ pointer-events: none;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxt {
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ // height: 160px;
|
|
|
+ .flooTxtBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+ text-align: center;
|
|
|
+ .myTitle {
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 22px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // text-align: center;
|
|
|
+ // font-family: "SourceHanSerifCN-Bold";
|
|
|
+ }
|
|
|
+ .myTxt {
|
|
|
+ // font-size: 16px;
|
|
|
+ // color: #ffffff;
|
|
|
+ // line-height: 24px;
|
|
|
+ // text-indent: 2em;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 24px;
|
|
|
+ text-indent: 2em;
|
|
|
+ max-height: 10vh;
|
|
|
+ width: 90%;
|
|
|
+ margin: auto;
|
|
|
+ overflow: auto;
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ background: #19cbff;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 3px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ background: #19cbff;
|
|
|
+ }
|
|
|
+ &::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ -webkit-box-shadow: inset 0 0 5px transparent;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxtOne {
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 移动端
|
|
|
+@media screen and (max-width: 1000px) {
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ background: #19cbff;
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ }
|
|
|
+ .home {
|
|
|
+ background: url("../assets/bgMo.jpg");
|
|
|
+ backdrop-filter: blur(30px);
|
|
|
+ #myAudio {
|
|
|
+ width: 90vw;
|
|
|
+ max-width: 500px;
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .mainCon {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ border-radius: 0 0 0 0;
|
|
|
+ margin-top: 30%;
|
|
|
+ height: 35%;
|
|
|
+ .audioIcon {
|
|
|
+ cursor: default;
|
|
|
+ right: auto;
|
|
|
+ bottom: auto;
|
|
|
+ top: 6px;
|
|
|
+ left: 6px;
|
|
|
+ img {
|
|
|
+ width: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .contenBoxMain {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .contenBox {
|
|
|
+ .videoBox {
|
|
|
+ padding: 0px 0;
|
|
|
+ position: relative;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ background-color: black;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgBox {
|
|
|
+ // padding: 60px 50px 80px;
|
|
|
+ .smImgBox {
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .awccJJ {
|
|
|
+ left: 0px;
|
|
|
+ width: 5%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ // height: px;
|
|
|
+ cursor: default;
|
|
|
+ background-image: none;
|
|
|
+ // background-size: 50% 50%;
|
|
|
+ .iconimg {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rightJJ {
|
|
|
+ left: auto;
|
|
|
+ // right: 15px;
|
|
|
+ right: 0px;
|
|
|
+ background-image: none;
|
|
|
+ justify-content: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTabBox {
|
|
|
+ width: 100%;
|
|
|
+ bottom: 20px;
|
|
|
+ justify-content: center;
|
|
|
+ margin-top: 15px;
|
|
|
+ .tabRow {
|
|
|
+ cursor: default;
|
|
|
+ margin: 0 6px;
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 25px;
|
|
|
+ font-size: 14px;
|
|
|
+ & > img {
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxt {
|
|
|
+ flex: 1 0 1px;
|
|
|
+ max-height: 300px;
|
|
|
+ min-height: 180px;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ padding: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(180deg, #070c2b 0%, #162162 100%);
|
|
|
+ border-radius: 40px 40px 0 0;
|
|
|
+ margin-top: 30px;
|
|
|
+ overflow: initial;
|
|
|
+ .flooTxtBox {
|
|
|
+ overflow-y: hidden;
|
|
|
+ .myTitle {
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ .myTxt {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ height: calc(100% - 36px);
|
|
|
+ max-height: initial;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flooTxtOne {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
aamin
