|
|
@@ -1,118 +1,73 @@
|
|
|
-<!-- -->
|
|
|
<template>
|
|
|
<div class="tab3">
|
|
|
- <div class="left">
|
|
|
- <ul>
|
|
|
- <li
|
|
|
- :class="{ active: formData.type === item.type }"
|
|
|
- v-for="item in listData"
|
|
|
- :key="item.id"
|
|
|
- @click="cutTab(item)"
|
|
|
- >
|
|
|
- <p v-if="formData.type === item.type">
|
|
|
- ★ {{ item.name }} ★
|
|
|
- </p>
|
|
|
- <p v-else>{{ item.name }}</p>
|
|
|
- <span> {{ item.biaoshi }} </span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="search" @keyup.enter="mySearch">
|
|
|
- <el-input
|
|
|
- placeholder="请输入关键词..."
|
|
|
- suffix-icon="el-icon-search"
|
|
|
- v-model="formData.searchKey"
|
|
|
- >
|
|
|
- </el-input>
|
|
|
- <span class="btn" @click="mySearch"></span>
|
|
|
+ <div class="top">
|
|
|
+ <div
|
|
|
+ @click="cutChange(item)"
|
|
|
+ :class="{ active: topArrInd === item.id }"
|
|
|
+ v-for="(item, index) in topArr"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ {{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- 右侧内容 -->
|
|
|
- <!-- 没有数据时 -->
|
|
|
- <div class="hint" v-if="myArr.length === 0">
|
|
|
- <img src="@/assets/img/nullData.png" alt="">
|
|
|
- <p>暂无查询数据</p>
|
|
|
+ <!-- 实物模型的盒子 -->
|
|
|
+ <div class="modelBox" v-show="topArrInd === 1">
|
|
|
+ <div
|
|
|
+ class="modelSon"
|
|
|
+ v-for="item in dataArr"
|
|
|
+ :key="item.id"
|
|
|
+ @click="modelClick(item)"
|
|
|
+ >
|
|
|
+ <img v-lazy="baseURL + item.thumb" alt="" />
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="right" v-else>
|
|
|
- <div class="row" v-for="item in myArr" :key="item.id">
|
|
|
- <!-- 模型/视频 -->
|
|
|
- <img
|
|
|
- @click="goodClick(item)"
|
|
|
- :src="baseURL + item.thumb"
|
|
|
- alt=""
|
|
|
- v-if="formData.type === 'model' || formData.type === 'video'"
|
|
|
- :class="{ vidAc: formData.type === 'video' }"
|
|
|
- />
|
|
|
- <!-- 图库 -->
|
|
|
+
|
|
|
+ <!-- 专题图库的盒子 -->
|
|
|
+ <div class="imgBox" v-show="topArrInd === 2">
|
|
|
+ <div
|
|
|
+ class="imgSon"
|
|
|
+ v-for="item in dataArr"
|
|
|
+ :key="item.id"
|
|
|
+ @click="imgClick(item)"
|
|
|
+ >
|
|
|
<el-image
|
|
|
- @click="goodClick(item)"
|
|
|
- v-else-if="formData.type === 'img'"
|
|
|
- style="width: 351px; height: 200px"
|
|
|
+ lazy
|
|
|
:src="baseURL + item.thumb"
|
|
|
:preview-src-list="srcList"
|
|
|
- >
|
|
|
- </el-image>
|
|
|
-
|
|
|
- <!-- 视频的鼠标移上去的遮照 -->
|
|
|
- <div
|
|
|
- class="videoSM"
|
|
|
- v-if="formData.type === 'video'"
|
|
|
- @click="goodClick(item)"
|
|
|
- >
|
|
|
- <img src="../../assets/img/playMove.png" alt="" />
|
|
|
- <p>{{ item.name }}</p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div
|
|
|
- class="listTxt"
|
|
|
- :title="item.name"
|
|
|
- :class="{
|
|
|
- imgAc: formData.type === 'img',
|
|
|
- vidAcTxt: formData.type === 'video',
|
|
|
- }"
|
|
|
- >
|
|
|
- <img
|
|
|
- src="../../assets/img/play.png"
|
|
|
- alt=""
|
|
|
- v-if="formData.type === 'video'"
|
|
|
- />
|
|
|
- {{ item.name }}
|
|
|
- <div class="right_bac" v-if="formData.type === 'model'"></div>
|
|
|
- </div>
|
|
|
+ style="width: 165px; height: 164px"
|
|
|
+ />
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
</div>
|
|
|
- <!-- 分页 -->
|
|
|
- <div class="paging">
|
|
|
- <el-pagination
|
|
|
- layout="prev,pager,next,jumper"
|
|
|
- :total="total"
|
|
|
- :page-size="8"
|
|
|
- :current-page="formData.pageNum"
|
|
|
- @current-change="currentChange"
|
|
|
- @size-change="sizeChange"
|
|
|
- >
|
|
|
- </el-pagination>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 视频档案的盒子 -->
|
|
|
+ <div class="videoBox" v-show="topArrInd === 3">
|
|
|
+ <div
|
|
|
+ class="videoSon"
|
|
|
+ v-for="item in dataArr"
|
|
|
+ :key="item.id"
|
|
|
+ @click="videoClick(item)"
|
|
|
+ >
|
|
|
+ <img v-lazy="baseURL + item.thumb" alt="" />
|
|
|
+ <p>{{ item.name }}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 点击文物出现的弹窗 -->
|
|
|
- <div class="model" v-if="modelShow">
|
|
|
- <div class="ifrCon" ref="ifrCon">
|
|
|
- <iframe :src="mySrc" frameborder="0"></iframe>
|
|
|
- <!-- 关闭按钮 -->
|
|
|
- <div class="btnX el-icon-close" @click="modelShow = false"></div>
|
|
|
- <!-- 全屏按钮 -->
|
|
|
- <div class="full" @click="screen">
|
|
|
- <img src="../../assets/img/tab3FullX.png" alt="" v-if="fullscreen">
|
|
|
- <img src="../../assets/img/tab3Full.png" alt="" v-else>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="modelDialog" v-if="modelShow">
|
|
|
+ <iframe :src="modelSrc" frameborder="0"></iframe>
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
+ <div class="btnX el-icon-close" @click="modelShow = false"></div>
|
|
|
</div>
|
|
|
<!-- 大图预览里面的文字显示 -->
|
|
|
- <div class="imgBigShow" v-if="imgBigShow">
|
|
|
+ <div class="imgDialog" v-if="imgBigShow">
|
|
|
{{ imgBigNum }} / {{ srcList.length }}
|
|
|
</div>
|
|
|
<!-- 视频档案里面的弹窗 -->
|
|
|
<div class="model" v-if="myVideoShow">
|
|
|
<!-- 关闭按钮 -->
|
|
|
- <div class="videoPlay">
|
|
|
+ <div class="videoDialog">
|
|
|
<div class="btnX el-icon-close" @click="myVideoShow = false"></div>
|
|
|
<video :src="myVideoSrc" v-if="myVideoSrc" controls autoplay></video>
|
|
|
</div>
|
|
|
@@ -127,544 +82,256 @@ export default {
|
|
|
name: "tab3",
|
|
|
components: {},
|
|
|
data() {
|
|
|
- // 这里存放数据
|
|
|
return {
|
|
|
- total: 0,
|
|
|
baseURL: "",
|
|
|
- fullscreen: false,
|
|
|
- modelShow: false,
|
|
|
- listData: [
|
|
|
- { biaoshi: "/", id: 1, name: "实物模型", type: "model" },
|
|
|
- { biaoshi: "/", id: 2, name: "专题图库", type: "img" },
|
|
|
- { biaoshi: "", id: 3, name: "视频档案", type: "video" },
|
|
|
+ topArrInd: 1,
|
|
|
+ topArr: [
|
|
|
+ { id: 1, name: "实物模型", type: "model" },
|
|
|
+ { id: 2, name: "专题图库", type: "img" },
|
|
|
+ { id: 3, name: "视频档案", type: "video" },
|
|
|
],
|
|
|
formData: {
|
|
|
pageNum: 1,
|
|
|
- pageSize: 8,
|
|
|
+ pageSize: 99999,
|
|
|
searchKey: "",
|
|
|
type: "model",
|
|
|
},
|
|
|
- myArr: [],
|
|
|
- mySrc: "",
|
|
|
- srcList: [""],
|
|
|
- // 大图预览里面的文字显示
|
|
|
+ dataArr: [],
|
|
|
+ // 有关模型的数据
|
|
|
+ modelShow: false,
|
|
|
+ modelSrc: "",
|
|
|
+ // 有关专题图库的数据
|
|
|
imgBigShow: false,
|
|
|
imgBigNum: 1,
|
|
|
- // 视频档案数据
|
|
|
+ srcList: [""],
|
|
|
+ // 有关视频档案的数据
|
|
|
myVideoShow: false,
|
|
|
myVideoSrc: "",
|
|
|
};
|
|
|
},
|
|
|
- // 监听属性 类似于data概念
|
|
|
computed: {},
|
|
|
- // 监控data中的数据变化
|
|
|
- watch: {},
|
|
|
- // 方法集合
|
|
|
methods: {
|
|
|
- // 分页器方法
|
|
|
- currentChange(val) {
|
|
|
- // console.log('当前页改变了', val)
|
|
|
- this.formData.pageNum = val;
|
|
|
- this.goodList(this.formData);
|
|
|
- },
|
|
|
- sizeChange(val) {
|
|
|
- // console.log('条数改变了', val)
|
|
|
- this.formData.pageNum = 1;
|
|
|
- this.formData.pageSize = val;
|
|
|
- this.goodList(this.formData);
|
|
|
- },
|
|
|
- // 点击模型全屏
|
|
|
- screen() {
|
|
|
- const element = this.$refs.ifrCon; // 获取容器
|
|
|
- if (this.fullscreen) {
|
|
|
- // 如果已经全屏了就退出全屏
|
|
|
-
|
|
|
- if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen();
|
|
|
- } else if (document.webkitCancelFullScreen) {
|
|
|
- document.webkitCancelFullScreen();
|
|
|
- } else if (document.mozCancelFullScreen) {
|
|
|
- document.mozCancelFullScreen();
|
|
|
- } else if (document.msExitFullscreen) {
|
|
|
- document.msExitFullscreen();
|
|
|
- }
|
|
|
- } else {
|
|
|
- // 如果不是全屏就变成全屏
|
|
|
- if (element.requestFullscreen) {
|
|
|
- element.requestFullscreen();
|
|
|
- } else if (element.webkitRequestFullScreen) {
|
|
|
- element.webkitRequestFullScreen();
|
|
|
- } else if (element.mozRequestFullScreen) {
|
|
|
- element.mozRequestFullScreen();
|
|
|
- } else if (element.msRequestFullscreen) {
|
|
|
- // IE11
|
|
|
- element.msRequestFullscreen();
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- this.fullscreen = !this.fullscreen;
|
|
|
+ // 切换顶部tab栏
|
|
|
+ cutChange(item) {
|
|
|
+ this.dataArr = [];
|
|
|
+ this.topArrInd = item.id;
|
|
|
+ this.goodList({ ...this.formData, type: item.type });
|
|
|
},
|
|
|
// 点击模型
|
|
|
- async goodClick(item) {
|
|
|
- if (item.type === "model") {
|
|
|
- this.mySrc = "4dage/Model.html?m=" + item.filePath;
|
|
|
- // this.mySrc = '/4dage/Model.html'
|
|
|
- this.modelShow = true;
|
|
|
- } else if (item.type === "img") {
|
|
|
- this.imgBigNum = 1;
|
|
|
- const res = await goodDetail(item.id);
|
|
|
- // console.log(998, res)
|
|
|
- const temp = [];
|
|
|
- res.data.file.forEach((v) => {
|
|
|
- // console.log(998, v)
|
|
|
- if (v.isIndex === 1) temp.push(this.baseURL + v.filePath);
|
|
|
- else {
|
|
|
- setTimeout(() => {
|
|
|
- temp.push(this.baseURL + v.filePath);
|
|
|
- }, 0);
|
|
|
- }
|
|
|
- });
|
|
|
- this.srcList = temp;
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- this.imgBigShow = true;
|
|
|
- //因为污染自己写滚轮缩放
|
|
|
- document
|
|
|
- .querySelector(".el-image-viewer__wrapper")
|
|
|
- .addEventListener("mousewheel", (event) => {
|
|
|
- let delta = 0;
|
|
|
- if (!event) event = window.event;
|
|
|
- if (event.wheelDelta) {
|
|
|
- delta = event.wheelDelta / 120;
|
|
|
- if (window.opera) delta = -delta;
|
|
|
- } else if (event.detail) {
|
|
|
- delta = -event.detail / 3;
|
|
|
- }
|
|
|
- let img = document.querySelector(".el-image-viewer__img");
|
|
|
- if (delta > 0) {
|
|
|
- let width = img.width;
|
|
|
- img.width = width * 1.1;
|
|
|
- } else if (delta < 0) {
|
|
|
- let width = img.width;
|
|
|
- if (width > 100) {
|
|
|
- img.width = width * 0.9;
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- const myTemp = document.querySelector(".el-image-viewer__mask");
|
|
|
- myTemp.addEventListener("click", () => {
|
|
|
- this.imgBigShow = false;
|
|
|
- });
|
|
|
- const temp = document.querySelector(".el-image-viewer__close");
|
|
|
- temp.addEventListener("click", () => {
|
|
|
- this.imgBigShow = false;
|
|
|
- this.srcList = [""];
|
|
|
- // console.log('我点了里面的关闭')
|
|
|
- });
|
|
|
- // 左按钮
|
|
|
- const tempLeft = document.querySelector(".el-image-viewer__prev");
|
|
|
- tempLeft.addEventListener("click", () => {
|
|
|
- this.imgBigNum--;
|
|
|
- if (this.imgBigNum === 0) this.imgBigNum = this.srcList.length;
|
|
|
- });
|
|
|
- // 右按钮
|
|
|
- const tempRight = document.querySelector(".el-image-viewer__next");
|
|
|
- tempRight.addEventListener("click", () => {
|
|
|
- this.imgBigNum++;
|
|
|
- if (this.imgBigNum === this.srcList.length + 1)
|
|
|
- this.imgBigNum = 1;
|
|
|
- });
|
|
|
- }, 100);
|
|
|
- });
|
|
|
- } else if (item.type === "video") {
|
|
|
- this.myVideoShow = true;
|
|
|
- this.myVideoSrc = this.baseURL + item.filePath;
|
|
|
- }
|
|
|
+ async modelClick(item) {
|
|
|
+ this.modelSrc = "4dage/Model.html?m=" + item.filePath;
|
|
|
+ this.modelShow = true;
|
|
|
// 记录访问量
|
|
|
await webVisit("goods", item.id);
|
|
|
},
|
|
|
- cutTab(val) {
|
|
|
- if (this.formData.type === val.type) return;
|
|
|
- this.formData.pageNum = 1;
|
|
|
- this.formData.type = val.type;
|
|
|
- this.goodList(this.formData);
|
|
|
+ // 点击图库
|
|
|
+ async imgClick(item) {
|
|
|
+ this.imgBigNum = 1;
|
|
|
+ const res = await goodDetail(item.id);
|
|
|
+ // console.log(998, res)
|
|
|
+ const temp = [];
|
|
|
+ res.data.file.forEach((v) => {
|
|
|
+ // console.log(998, v)
|
|
|
+ if (v.isIndex === 1) temp.push(this.baseURL + v.filePath);
|
|
|
+ else {
|
|
|
+ setTimeout(() => {
|
|
|
+ temp.push(this.baseURL + v.filePath);
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.srcList = temp;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.imgBigShow = true;
|
|
|
+ const myTemp = document.querySelector(".el-image-viewer__mask");
|
|
|
+ myTemp.addEventListener("click", () => {
|
|
|
+ this.imgBigShow = false;
|
|
|
+ });
|
|
|
+ const temp = document.querySelector(".el-image-viewer__close");
|
|
|
+ temp.addEventListener("click", () => {
|
|
|
+ this.imgBigShow = false;
|
|
|
+ this.srcList = [""];
|
|
|
+ // console.log('我点了里面的关闭')
|
|
|
+ });
|
|
|
+ // 左按钮
|
|
|
+ const tempLeft = document.querySelector(".el-image-viewer__prev");
|
|
|
+ tempLeft.addEventListener("click", () => {
|
|
|
+ this.imgBigNum--;
|
|
|
+ if (this.imgBigNum === 0) this.imgBigNum = this.srcList.length;
|
|
|
+ });
|
|
|
+ // 右按钮
|
|
|
+ const tempRight = document.querySelector(".el-image-viewer__next");
|
|
|
+ tempRight.addEventListener("click", () => {
|
|
|
+ this.imgBigNum++;
|
|
|
+ if (this.imgBigNum === this.srcList.length + 1) this.imgBigNum = 1;
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
+ });
|
|
|
+ // 记录访问量
|
|
|
+ await webVisit("goods", item.id);
|
|
|
},
|
|
|
- mySearch() {
|
|
|
- this.formData.pageNum = 1;
|
|
|
- this.goodList(this.formData);
|
|
|
+ // 点击视频档案
|
|
|
+ async videoClick(item) {
|
|
|
+ this.myVideoShow = true;
|
|
|
+ this.myVideoSrc = this.baseURL + item.filePath;
|
|
|
+ // 记录访问量
|
|
|
+ await webVisit("goods", item.id);
|
|
|
},
|
|
|
// 封装获取列表函数
|
|
|
async goodList(data) {
|
|
|
const res = await goodList(data);
|
|
|
- this.total = res.data.total;
|
|
|
- this.myArr = res.data.records;
|
|
|
- // if (this.formData.type === 'img') {
|
|
|
- // this.myArr.forEach(v => {
|
|
|
- // this.srcList = [this.baseURL + v.thumb]
|
|
|
- // })
|
|
|
- // }
|
|
|
- // console.log(998, res)
|
|
|
+ this.dataArr = res.data.records;
|
|
|
},
|
|
|
},
|
|
|
- // 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
// 获取服务器前缀地址
|
|
|
this.baseURL = axios.defaults.baseURL;
|
|
|
this.goodList(this.formData);
|
|
|
},
|
|
|
- // 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- // 监听esc事件
|
|
|
- document.addEventListener("webkitfullscreenchange", (e) => {
|
|
|
- if (!e.currentTarget.webkitIsFullScreen) {
|
|
|
- // console.log('退出啊webkitIsFullScreen11111111111')
|
|
|
- setTimeout(() => {
|
|
|
- this.fullscreen = false;
|
|
|
- }, 100);
|
|
|
- } else {
|
|
|
- // console.log('进入webkitIsFullScreen')
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- document.addEventListener("fullscreenchange", () => {
|
|
|
- if (!document.fullscreenElement) {
|
|
|
- // console.log('退出啊fullscreenchange1111111111')
|
|
|
- setTimeout(() => {
|
|
|
- this.fullscreen = false;
|
|
|
- }, 100);
|
|
|
- } else {
|
|
|
- // console.log('进入fullscreenchange')
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- document.addEventListener("MSFullscreenChange", () => {
|
|
|
- if (!document.msFullscreenElement) {
|
|
|
- // console.log('IE退出111111')
|
|
|
- setTimeout(() => {
|
|
|
- this.fullscreen = false;
|
|
|
- }, 100);
|
|
|
- } else {
|
|
|
- // console.log('IE进')
|
|
|
- }
|
|
|
- });
|
|
|
- document.addEventListener("mozfullscreenchange", () => {
|
|
|
- if (!document.mozFullScreenElement) {
|
|
|
- // console.log('火狐退出1111111111111')
|
|
|
- this.$nextTick(() => {
|
|
|
- setTimeout(() => {
|
|
|
- this.fullscreen = false;
|
|
|
- }, 100);
|
|
|
- });
|
|
|
- } else {
|
|
|
- // console.log('火狐进')
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
- beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
- updated() {}, // 生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
- destroyed() {}, // 生命周期 - 销毁完成
|
|
|
- activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
.tab3 {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- color: #3e3e3e;
|
|
|
- .left {
|
|
|
- position: relative;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: url("../../assets/imgM/bigBac.png");
|
|
|
+ .top {
|
|
|
width: 100%;
|
|
|
- height: 180px;
|
|
|
- background: url("../../assets/img/tab3Tab.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- ul {
|
|
|
- padding-left: 40px;
|
|
|
- display: flex;
|
|
|
- height: 100%;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- li {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- font-size: 20px;
|
|
|
- color: #fff;
|
|
|
- width: 240px;
|
|
|
- cursor: pointer;
|
|
|
- &:hover {
|
|
|
- color: #f2cd83;
|
|
|
- }
|
|
|
- & > span {
|
|
|
- margin-left: 50px;
|
|
|
- color: #fff !important;
|
|
|
- }
|
|
|
- & > p {
|
|
|
- text-align: center;
|
|
|
- width: 145px;
|
|
|
- }
|
|
|
- }
|
|
|
- .active {
|
|
|
- color: #f2cd83;
|
|
|
- }
|
|
|
+ height: 45px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.7);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ & > div {
|
|
|
+ width: 78px;
|
|
|
+ height: 45px;
|
|
|
+ line-height: 45px;
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
- .search {
|
|
|
- z-index: 10;
|
|
|
- /*修改提示文字的颜色*/
|
|
|
- /deep/input::-webkit-input-placeholder {
|
|
|
- /* WebKit browsers */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
- /deep/input:-moz-placeholder {
|
|
|
- /* Mozilla Firefox 4 to 18 */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
- /deep/input::-moz-placeholder {
|
|
|
- /* Mozilla Firefox 19+ */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
- /deep/input:-ms-input-placeholder {
|
|
|
- /* Internet Explorer 10+ */
|
|
|
- color: #be1220;
|
|
|
- }
|
|
|
-
|
|
|
- width: 700px;
|
|
|
- height: 50px;
|
|
|
- position: absolute;
|
|
|
- bottom: -25px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- /deep/.el-input__suffix {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- font-size: 20px;
|
|
|
- right: 0;
|
|
|
- }
|
|
|
- /deep/.el-input__inner {
|
|
|
- border-radius: 50px;
|
|
|
- height: 50px;
|
|
|
- border: 1px solid #be1220;
|
|
|
+ .active {
|
|
|
+ padding-left: 20px;
|
|
|
+ background: url("../../assets/imgM/tb3TopAc.png") no-repeat center left;
|
|
|
+ color: #b92e2e;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 实物模型
|
|
|
+ .modelBox {
|
|
|
+ padding: 10px;
|
|
|
+ .modelSon {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- .btn {
|
|
|
- cursor: pointer;
|
|
|
+ & > P {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 0 10px;
|
|
|
position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- height: 50px;
|
|
|
- width: 50px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: transparent;
|
|
|
+ text-align: center;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 24px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .hint {
|
|
|
- display: block !important;
|
|
|
- height: 500px !important;
|
|
|
- &>img{
|
|
|
- margin: 200px auto 30px;
|
|
|
- display: block;
|
|
|
- width: 150px;
|
|
|
- height: 150px;
|
|
|
- }
|
|
|
- &>p{
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- color: #AC1D29;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- padding: 0 200px;
|
|
|
- padding-top: 50px;
|
|
|
- position: relative;
|
|
|
- justify-content: start;
|
|
|
- align-content: flex-start;
|
|
|
+ // 专题图库
|
|
|
+ .imgBox {
|
|
|
+ padding: 10px;
|
|
|
+ padding-right: 0;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
flex-wrap: wrap;
|
|
|
- min-width: 1200px;
|
|
|
- flex: 1;
|
|
|
- height: 825px;
|
|
|
- .row {
|
|
|
- position: relative;
|
|
|
+ .imgSon {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 165px;
|
|
|
+ height: 194px;
|
|
|
background-color: #fff;
|
|
|
box-shadow: 1px 1px 2px 2px #ccc;
|
|
|
- margin-right: 30px;
|
|
|
- margin-bottom: 30px;
|
|
|
- cursor: pointer;
|
|
|
- width: 351px;
|
|
|
- height: 240px;
|
|
|
- text-align: center;
|
|
|
- &:nth-of-type(4n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
+ margin-bottom: 10px;
|
|
|
& > img {
|
|
|
width: 100%;
|
|
|
- height: 200px;
|
|
|
+ height: 164px;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
- .vidAc {
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .listTxt {
|
|
|
- position: relative;
|
|
|
+ & > p {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
- text-align: left;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- padding: 0 50px 0 20px;
|
|
|
- font-size: 20px;
|
|
|
- color: #626260;
|
|
|
- .right_bac {
|
|
|
- position: absolute;
|
|
|
- right: 5px;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- background: url("../../assets/img/enter.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .imgAc {
|
|
|
- transform: translateY(-4px);
|
|
|
- text-align: center;
|
|
|
- padding: 0 15px;
|
|
|
- }
|
|
|
- .vidAcTxt {
|
|
|
- font-size: 18px;
|
|
|
- width: 351px;
|
|
|
- background-color: rgba(0, 0, 0, 0.7);
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- bottom: 0;
|
|
|
- padding: 0 15px 0 20px;
|
|
|
- color: #fff;
|
|
|
- & > img {
|
|
|
- width: 23px;
|
|
|
- height: 23px;
|
|
|
- }
|
|
|
+ padding: 0 10px;
|
|
|
}
|
|
|
- .videoSM {
|
|
|
- z-index: 10;
|
|
|
- text-align: center;
|
|
|
- display: none;
|
|
|
- position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 视频档案
|
|
|
+ .videoBox {
|
|
|
+ padding: 10px;
|
|
|
+ padding-right: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .videoSon {
|
|
|
+ margin-right: 10px;
|
|
|
+ width: 165px;
|
|
|
+ height: 194px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 1px 1px 2px 2px #ccc;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ & > img {
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background-color: rgba(80, 25, 25, 0.7);
|
|
|
- & > img {
|
|
|
- margin-top: 70px;
|
|
|
- width: 83px;
|
|
|
- height: 83px;
|
|
|
- }
|
|
|
- & > p {
|
|
|
- padding: 0 10px;
|
|
|
- text-align: center;
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- margin-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- .listTxt {
|
|
|
- background-color: #be1220;
|
|
|
- color: #fff;
|
|
|
- .right_bac {
|
|
|
- background: url("../../assets/img/enterAc.png");
|
|
|
- background-size: 100% 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .vidAcTxt {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .videoSM {
|
|
|
- display: block;
|
|
|
- }
|
|
|
+ height: 164px;
|
|
|
+ object-fit: cover;
|
|
|
}
|
|
|
- }
|
|
|
- .paging {
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- bottom: 20px;
|
|
|
- transform: translateX(-50%);
|
|
|
- /deep/.el-input__inner {
|
|
|
- width: 30px;
|
|
|
- height: 30px !important;
|
|
|
- background-color: transparent;
|
|
|
- border-radius: 50%;
|
|
|
+ & > p {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ padding: 0 10px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .model {
|
|
|
- z-index: 1000;
|
|
|
+ // 模型弹窗
|
|
|
+ .modelDialog {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
- min-width: 1000px;
|
|
|
- min-height: 600px;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
- background-color: rgba(0, 0, 0, 0.5);
|
|
|
- .ifrCon {
|
|
|
- border-top: 10px solid #be1220;
|
|
|
- border-bottom: 10px solid #be1220;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- top: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 1000px;
|
|
|
- height: 600px;
|
|
|
- iframe {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- .full {
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- bottom: 10px;
|
|
|
- color: #fff;
|
|
|
- &>img{
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ iframe {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.btnX {
|
|
|
- z-index: 999;
|
|
|
- cursor: pointer;
|
|
|
position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 10px;
|
|
|
- color: #be1220;
|
|
|
- font-size: 40px;
|
|
|
- }
|
|
|
-
|
|
|
- .videoPlay {
|
|
|
- border-top: 10px solid #be1220;
|
|
|
- border-bottom: 10px solid #be1220;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- width: 800px;
|
|
|
- height: auto;
|
|
|
- video {
|
|
|
- max-height: 90vh;
|
|
|
- vertical-align: top;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ right: 15px;
|
|
|
+ top: 15px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30px;
|
|
|
}
|
|
|
}
|
|
|
- .imgBigShow {
|
|
|
+ // 图库弹窗图片数量
|
|
|
+ .imgDialog {
|
|
|
padding: 3px 5px;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
font-size: 18px;
|
|
|
@@ -675,5 +342,31 @@ export default {
|
|
|
bottom: 100px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+ // 视频弹窗
|
|
|
+ .videoDialog {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0, 0, 0, 0.7);
|
|
|
+ video {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ max-height: 85vh;
|
|
|
+ vertical-align: top;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .btnX {
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ right: 15px;
|
|
|
+ top: 15px;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
