|
|
@@ -3,12 +3,8 @@
|
|
|
<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)"
|
|
|
- >
|
|
|
+ <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>
|
|
|
@@ -17,11 +13,7 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class="search" @keyup.enter="mySearch">
|
|
|
- <el-input
|
|
|
- placeholder="请输入关键词..."
|
|
|
- suffix-icon="el-icon-search"
|
|
|
- v-model="formData.searchKey"
|
|
|
- >
|
|
|
+ <el-input placeholder="请输入关键词..." suffix-icon="el-icon-search" v-model="formData.searchKey">
|
|
|
</el-input>
|
|
|
<span class="btn" @click="mySearch"></span>
|
|
|
</div>
|
|
|
@@ -35,60 +27,32 @@
|
|
|
<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' }"
|
|
|
- />
|
|
|
+ <img @click="goodClick(item)" :src="baseURL + item.thumb" alt=""
|
|
|
+ v-if="formData.type === 'model' || formData.type === 'video'" :class="{ vidAc: formData.type === 'video' }" />
|
|
|
<!-- 图库 -->
|
|
|
- <el-image
|
|
|
- @click="goodClick(item)"
|
|
|
- v-else-if="formData.type === 'img'"
|
|
|
- style="width: 351px; height: 200px"
|
|
|
- :src="baseURL + item.thumb"
|
|
|
- :preview-src-list="srcList"
|
|
|
- >
|
|
|
+ <el-image @click="goodClick(item)" v-else-if="formData.type === 'img'" style="width: 351px; height: 200px"
|
|
|
+ :src="baseURL + item.thumb" :preview-src-list="srcList">
|
|
|
</el-image>
|
|
|
|
|
|
<!-- 视频的鼠标移上去的遮照 -->
|
|
|
- <div
|
|
|
- class="videoSM"
|
|
|
- v-if="formData.type === 'video'"
|
|
|
- @click="goodClick(item)"
|
|
|
- >
|
|
|
+ <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'"
|
|
|
- />
|
|
|
+ <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>
|
|
|
</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 layout="prev,pager,next,jumper" :total="total" :page-size="8" :current-page="formData.pageNum"
|
|
|
+ @current-change="currentChange" @size-change="sizeChange">
|
|
|
</el-pagination>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -360,13 +324,13 @@ export default {
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
- beforeCreate() {}, // 生命周期 - 创建之前
|
|
|
- beforeMount() {}, // 生命周期 - 挂载之前
|
|
|
- beforeUpdate() {}, // 生命周期 - 更新之前
|
|
|
- updated() {}, // 生命周期 - 更新之后
|
|
|
- beforeDestroy() {}, // 生命周期 - 销毁之前
|
|
|
- destroyed() {}, // 生命周期 - 销毁完成
|
|
|
- activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+ beforeCreate() { }, // 生命周期 - 创建之前
|
|
|
+ beforeMount() { }, // 生命周期 - 挂载之前
|
|
|
+ beforeUpdate() { }, // 生命周期 - 更新之前
|
|
|
+ updated() { }, // 生命周期 - 更新之后
|
|
|
+ beforeDestroy() { }, // 生命周期 - 销毁之前
|
|
|
+ destroyed() { }, // 生命周期 - 销毁完成
|
|
|
+ activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
};
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
@@ -376,18 +340,21 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
color: #3e3e3e;
|
|
|
+
|
|
|
.left {
|
|
|
position: relative;
|
|
|
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;
|
|
|
@@ -395,37 +362,46 @@ export default {
|
|
|
color: #fff;
|
|
|
width: 240px;
|
|
|
cursor: pointer;
|
|
|
+
|
|
|
&:hover {
|
|
|
color: #f2cd83;
|
|
|
}
|
|
|
- & > span {
|
|
|
+
|
|
|
+ &>span {
|
|
|
margin-left: 50px;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
- & > p {
|
|
|
+
|
|
|
+ &>p {
|
|
|
text-align: center;
|
|
|
width: 145px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.active {
|
|
|
color: #f2cd83;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.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;
|
|
|
@@ -437,17 +413,20 @@ export default {
|
|
|
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;
|
|
|
}
|
|
|
+
|
|
|
.btn {
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
@@ -460,21 +439,25 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.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;
|
|
|
- }
|
|
|
+ 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;
|
|
|
@@ -486,6 +469,7 @@ export default {
|
|
|
min-width: 1200px;
|
|
|
flex: 1;
|
|
|
height: 825px;
|
|
|
+
|
|
|
.row {
|
|
|
position: relative;
|
|
|
background-color: #fff;
|
|
|
@@ -496,17 +480,21 @@ export default {
|
|
|
width: 351px;
|
|
|
height: 240px;
|
|
|
text-align: center;
|
|
|
+
|
|
|
&:nth-of-type(4n) {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
- & > img {
|
|
|
+
|
|
|
+ &>img {
|
|
|
width: 100%;
|
|
|
height: 200px;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
+
|
|
|
.vidAc {
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.listTxt {
|
|
|
position: relative;
|
|
|
overflow: hidden;
|
|
|
@@ -518,6 +506,7 @@ export default {
|
|
|
padding: 0 50px 0 20px;
|
|
|
font-size: 20px;
|
|
|
color: #626260;
|
|
|
+
|
|
|
.right_bac {
|
|
|
position: absolute;
|
|
|
right: 5px;
|
|
|
@@ -529,11 +518,13 @@ export default {
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.imgAc {
|
|
|
transform: translateY(-4px);
|
|
|
text-align: center;
|
|
|
padding: 0 15px;
|
|
|
}
|
|
|
+
|
|
|
.vidAcTxt {
|
|
|
font-size: 18px;
|
|
|
width: 351px;
|
|
|
@@ -543,11 +534,13 @@ export default {
|
|
|
bottom: 0;
|
|
|
padding: 0 15px 0 20px;
|
|
|
color: #fff;
|
|
|
- & > img {
|
|
|
+
|
|
|
+ &>img {
|
|
|
width: 23px;
|
|
|
height: 23px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.videoSM {
|
|
|
z-index: 10;
|
|
|
text-align: center;
|
|
|
@@ -558,12 +551,14 @@ export default {
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background-color: rgba(80, 25, 25, 0.7);
|
|
|
- & > img {
|
|
|
+
|
|
|
+ &>img {
|
|
|
margin-top: 70px;
|
|
|
width: 83px;
|
|
|
height: 83px;
|
|
|
}
|
|
|
- & > p {
|
|
|
+
|
|
|
+ &>p {
|
|
|
padding: 0 10px;
|
|
|
text-align: center;
|
|
|
font-size: 18px;
|
|
|
@@ -571,28 +566,34 @@ export default {
|
|
|
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;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.paging {
|
|
|
position: absolute;
|
|
|
left: 50%;
|
|
|
bottom: 20px;
|
|
|
transform: translateX(-50%);
|
|
|
+
|
|
|
/deep/.el-input__inner {
|
|
|
width: 30px;
|
|
|
height: 30px !important;
|
|
|
@@ -601,6 +602,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.model {
|
|
|
z-index: 1000;
|
|
|
position: fixed;
|
|
|
@@ -611,6 +613,7 @@ export default {
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
+
|
|
|
.ifrCon {
|
|
|
border-top: 10px solid #be1220;
|
|
|
border-bottom: 10px solid #be1220;
|
|
|
@@ -620,10 +623,12 @@ export default {
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 1000px;
|
|
|
height: 600px;
|
|
|
+
|
|
|
iframe {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
+
|
|
|
.full {
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
@@ -632,12 +637,14 @@ export default {
|
|
|
right: 10px;
|
|
|
bottom: 10px;
|
|
|
color: #fff;
|
|
|
- &>img{
|
|
|
+
|
|
|
+ &>img {
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.btnX {
|
|
|
z-index: 999;
|
|
|
cursor: pointer;
|
|
|
@@ -657,6 +664,7 @@ export default {
|
|
|
transform: translate(-50%, -50%);
|
|
|
width: 800px;
|
|
|
height: auto;
|
|
|
+
|
|
|
video {
|
|
|
max-height: 90vh;
|
|
|
vertical-align: top;
|
|
|
@@ -665,6 +673,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.imgBigShow {
|
|
|
padding: 3px 5px;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
