|
@@ -5,53 +5,32 @@
|
|
<!-- 左侧搜索 -->
|
|
<!-- 左侧搜索 -->
|
|
<div class="leftTop">
|
|
<div class="leftTop">
|
|
<div class="model">
|
|
<div class="model">
|
|
- <div
|
|
|
|
- class="row1"
|
|
|
|
- @click="model = '3D'"
|
|
|
|
- :class="{ active: model === '3D' }"
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="row1" @click="model = '3D'" :class="{ active: model === '3D' }">
|
|
<div class="rowll"></div>
|
|
<div class="rowll"></div>
|
|
- <div class="rowrr">三维文物</div>
|
|
|
|
|
|
+ <div class="rowrr">三维展示</div>
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- class="row1"
|
|
|
|
- @click="model = '2D'"
|
|
|
|
- :class="{ active: model === '2D' }"
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="row1" @click="model = '2D'" :class="{ active: model === '2D' }">
|
|
<div class="rowll"></div>
|
|
<div class="rowll"></div>
|
|
- <div class="rowrr">二维文物</div>
|
|
|
|
|
|
+ <div class="rowrr">二维展示</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="type">
|
|
<div class="type">
|
|
<div class="typell">类型:</div>
|
|
<div class="typell">类型:</div>
|
|
<div class="typerr">
|
|
<div class="typerr">
|
|
- <div
|
|
|
|
- class="row"
|
|
|
|
- @click="genre = item.type"
|
|
|
|
- :class="{ active: item.type === genre }"
|
|
|
|
- v-for="(item, index) in genreList"
|
|
|
|
- :key="index"
|
|
|
|
- >
|
|
|
|
|
|
+ <div class="row" v-show="model === '2D' || item.type !== 'straw'" @click="genre = item.type"
|
|
|
|
+ :class="{ active: item.type === genre }" v-for="(item) in genreList" :key="item.bs">
|
|
{{ item.name }}
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
- <div
|
|
|
|
- class="row"
|
|
|
|
- @click="genre = 'Italy'"
|
|
|
|
- :class="{ active: 'Italy' === genre }"
|
|
|
|
- v-if="model === '2D'"
|
|
|
|
- >
|
|
|
|
- 油画
|
|
|
|
|
|
+ <div class="row" @click="genre = 'picture'" :class="{ active: 'picture' === genre }" v-if="model === '2D'">
|
|
|
|
+ 照片
|
|
|
|
+ </div>
|
|
|
|
+ <div class="row" @click="genre = 'Italy'" :class="{ active: 'Italy' === genre }" v-if="model === '2D'">
|
|
|
|
+ 字画
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inputSearch" @keyup.enter="mySearch">
|
|
<div class="inputSearch" @keyup.enter="mySearch">
|
|
- <input
|
|
|
|
- class="searll"
|
|
|
|
- autofocus
|
|
|
|
- type="text"
|
|
|
|
- v-model="txt"
|
|
|
|
- placeholder="请输入文物名称"
|
|
|
|
- />
|
|
|
|
|
|
+ <input class="searll" autofocus type="text" v-model="txt" placeholder="请输入文物名称" />
|
|
<div class="searrr" @click="mySearch">
|
|
<div class="searrr" @click="mySearch">
|
|
<img src="../../assets/img/Goods/search.svg" alt="" />
|
|
<img src="../../assets/img/Goods/search.svg" alt="" />
|
|
</div>
|
|
</div>
|
|
@@ -60,38 +39,16 @@
|
|
|
|
|
|
<!-- 右侧图标 -->
|
|
<!-- 右侧图标 -->
|
|
<div class="rightTop">
|
|
<div class="rightTop">
|
|
- <div
|
|
|
|
- class="row"
|
|
|
|
- @click="rightClisk(item.type)"
|
|
|
|
- v-for="item in rightList"
|
|
|
|
- :key="item.type"
|
|
|
|
- :class="{
|
|
|
|
- active2:
|
|
|
|
- (music && item.type === 2) ||
|
|
|
|
- (like && item.type === 3) ||
|
|
|
|
- (share && item.type === 4),
|
|
|
|
- }"
|
|
|
|
- >
|
|
|
|
- <img
|
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
|
|
|
|
- alt=""
|
|
|
|
- v-if="music && item.type === 2"
|
|
|
|
- />
|
|
|
|
- <img
|
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
|
|
|
|
- alt=""
|
|
|
|
- v-else-if="like && item.type === 3"
|
|
|
|
- />
|
|
|
|
- <img
|
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)"
|
|
|
|
- alt=""
|
|
|
|
- v-else-if="share && item.type === 4"
|
|
|
|
- />
|
|
|
|
- <img
|
|
|
|
- :src="require(`@/assets/img/Goods/inco${item.type}.png`)"
|
|
|
|
- alt=""
|
|
|
|
- v-else
|
|
|
|
- />
|
|
|
|
|
|
+ <div class="row" @click="rightClisk(item.type)" v-for="item in rightList" :key="item.type" :class="{
|
|
|
|
+ active2:
|
|
|
|
+ (music && item.type === 2) ||
|
|
|
|
+ (like && item.type === 3) ||
|
|
|
|
+ (share && item.type === 4),
|
|
|
|
+ }">
|
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-if="music && item.type === 2" />
|
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-else-if="like && item.type === 3" />
|
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}Ac.png`)" alt="" v-else-if="share && item.type === 4" />
|
|
|
|
+ <img :src="require(`@/assets/img/Goods/inco${item.type}.png`)" alt="" v-else />
|
|
<transition name="likeAddAnimate">
|
|
<transition name="likeAddAnimate">
|
|
<div class="likeMove" v-show="like && item.type === 3">+ 1</div>
|
|
<div class="likeMove" v-show="like && item.type === 3">+ 1</div>
|
|
</transition>
|
|
</transition>
|
|
@@ -205,7 +162,7 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
rightClisk(type) {
|
|
rightClisk(type) {
|
|
- if (type === 1) this.$router.replace("/");
|
|
|
|
|
|
+ if (type === 1) this.$router.replace("/Home");
|
|
if (type === 2) this.music = !this.music;
|
|
if (type === 2) this.music = !this.music;
|
|
if (type === 3) {
|
|
if (type === 3) {
|
|
if (this.like) return;
|
|
if (this.like) return;
|
|
@@ -240,18 +197,18 @@ export default {
|
|
},
|
|
},
|
|
},
|
|
},
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
//生命周期 - 创建完成(可以访问当前this实例)
|
|
- created() {},
|
|
|
|
|
|
+ created() { },
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
//生命周期 - 挂载完成(可以访问DOM元素)
|
|
mounted() {
|
|
mounted() {
|
|
this.data = goodsData[this.model];
|
|
this.data = goodsData[this.model];
|
|
},
|
|
},
|
|
- beforeCreate() {}, //生命周期 - 创建之前
|
|
|
|
- beforeMount() {}, //生命周期 - 挂载之前
|
|
|
|
- beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
|
- updated() {}, //生命周期 - 更新之后
|
|
|
|
- beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
|
- destroyed() {}, //生命周期 - 销毁完成
|
|
|
|
- activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
|
|
|
|
+ beforeCreate() { }, //生命周期 - 创建之前
|
|
|
|
+ beforeMount() { }, //生命周期 - 挂载之前
|
|
|
|
+ beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
|
+ updated() { }, //生命周期 - 更新之后
|
|
|
|
+ beforeDestroy() { }, //生命周期 - 销毁之前
|
|
|
|
+ destroyed() { }, //生命周期 - 销毁完成
|
|
|
|
+ activated() { }, //如果页面有keep-alive缓存功能,这个函数会触发
|
|
};
|
|
};
|
|
</script>
|
|
</script>
|
|
<style lang='less' scoped>
|
|
<style lang='less' scoped>
|
|
@@ -259,16 +216,19 @@ export default {
|
|
.likeAddAnimate-leave-active {
|
|
.likeAddAnimate-leave-active {
|
|
transition: all 2s ease;
|
|
transition: all 2s ease;
|
|
}
|
|
}
|
|
|
|
+
|
|
.likeAddAnimate-enter,
|
|
.likeAddAnimate-enter,
|
|
.likeAddAnimate-leave {
|
|
.likeAddAnimate-leave {
|
|
transform: translateY(0) scale(0);
|
|
transform: translateY(0) scale(0);
|
|
opacity: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
+
|
|
.likeAddAnimate-enter-to,
|
|
.likeAddAnimate-enter-to,
|
|
.likeAddAnimate-leave-to {
|
|
.likeAddAnimate-leave-to {
|
|
transform: translateY(-30px) scale(1.2);
|
|
transform: translateY(-30px) scale(1.2);
|
|
opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
+
|
|
.Goods {
|
|
.Goods {
|
|
padding-top: 140px;
|
|
padding-top: 140px;
|
|
width: 100%;
|
|
width: 100%;
|
|
@@ -276,12 +236,14 @@ export default {
|
|
background-image: url("../../assets/img/Goods/GoodsBac.png");
|
|
background-image: url("../../assets/img/Goods/GoodsBac.png");
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+
|
|
.leftTop {
|
|
.leftTop {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 42px;
|
|
top: 42px;
|
|
left: 160px;
|
|
left: 160px;
|
|
height: 40px;
|
|
height: 40px;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+
|
|
.model {
|
|
.model {
|
|
color: #fff;
|
|
color: #fff;
|
|
width: 260px;
|
|
width: 260px;
|
|
@@ -292,12 +254,14 @@ export default {
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
padding: 0 22px;
|
|
padding: 0 22px;
|
|
margin-right: 50px;
|
|
margin-right: 50px;
|
|
|
|
+
|
|
.row1 {
|
|
.row1 {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
|
|
+
|
|
.rowll {
|
|
.rowll {
|
|
margin-right: 6px;
|
|
margin-right: 6px;
|
|
width: 24px;
|
|
width: 24px;
|
|
@@ -306,12 +270,15 @@ export default {
|
|
border: 1px solid #d8b275;
|
|
border: 1px solid #d8b275;
|
|
position: relative;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
+
|
|
.rowrr {
|
|
.rowrr {
|
|
padding-bottom: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.active {
|
|
.active {
|
|
color: #d8b275;
|
|
color: #d8b275;
|
|
|
|
+
|
|
.rowll {
|
|
.rowll {
|
|
&::after {
|
|
&::after {
|
|
content: "";
|
|
content: "";
|
|
@@ -327,6 +294,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.type {
|
|
.type {
|
|
display: flex;
|
|
display: flex;
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
@@ -336,21 +304,26 @@ export default {
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
padding: 0 20px;
|
|
padding: 0 20px;
|
|
margin-right: 50px;
|
|
margin-right: 50px;
|
|
|
|
+
|
|
.typell {
|
|
.typell {
|
|
width: 50px;
|
|
width: 50px;
|
|
line-height: 38px;
|
|
line-height: 38px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.typerr {
|
|
.typerr {
|
|
display: flex;
|
|
display: flex;
|
|
align-items: center;
|
|
align-items: center;
|
|
padding-bottom: 4px;
|
|
padding-bottom: 4px;
|
|
|
|
+
|
|
.row {
|
|
.row {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
margin: 0 10px;
|
|
margin: 0 10px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.active {
|
|
.active {
|
|
color: #d8b275;
|
|
color: #d8b275;
|
|
position: relative;
|
|
position: relative;
|
|
|
|
+
|
|
&::after {
|
|
&::after {
|
|
content: "";
|
|
content: "";
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -363,6 +336,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.inputSearch {
|
|
.inputSearch {
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
display: flex;
|
|
display: flex;
|
|
@@ -372,16 +346,19 @@ export default {
|
|
height: 40px;
|
|
height: 40px;
|
|
border-radius: 20px;
|
|
border-radius: 20px;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+
|
|
.searll {
|
|
.searll {
|
|
width: 214px;
|
|
width: 214px;
|
|
height: 40px;
|
|
height: 40px;
|
|
border: none;
|
|
border: none;
|
|
background-color: #fff;
|
|
background-color: #fff;
|
|
padding: 0 10px 0 20px;
|
|
padding: 0 10px 0 20px;
|
|
|
|
+
|
|
&:focus {
|
|
&:focus {
|
|
outline: none;
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.searrr {
|
|
.searrr {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
background-color: #930909;
|
|
background-color: #930909;
|
|
@@ -390,6 +367,7 @@ export default {
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
padding-right: 4px;
|
|
padding-right: 4px;
|
|
|
|
+
|
|
img {
|
|
img {
|
|
width: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
height: 24px;
|
|
@@ -397,21 +375,25 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.rightTop {
|
|
.rightTop {
|
|
position: absolute;
|
|
position: absolute;
|
|
top: 32px;
|
|
top: 32px;
|
|
right: 140px;
|
|
right: 140px;
|
|
height: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
display: flex;
|
|
|
|
+
|
|
.row {
|
|
.row {
|
|
position: relative;
|
|
position: relative;
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
width: 50px;
|
|
width: 50px;
|
|
text-align: center;
|
|
text-align: center;
|
|
margin-left: 24px;
|
|
margin-left: 24px;
|
|
- & > img {
|
|
|
|
|
|
+
|
|
|
|
+ &>img {
|
|
width: 50px;
|
|
width: 50px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.likeMove {
|
|
.likeMove {
|
|
color: #930909;
|
|
color: #930909;
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -420,22 +402,27 @@ export default {
|
|
text-align: center;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.active2 {
|
|
.active2 {
|
|
color: #930909;
|
|
color: #930909;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.nullSerach {
|
|
.nullSerach {
|
|
width: 100%;
|
|
width: 100%;
|
|
height: 90%;
|
|
height: 90%;
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
- & > div {
|
|
|
|
|
|
+
|
|
|
|
+ &>div {
|
|
width: 240px;
|
|
width: 240px;
|
|
- & > img {
|
|
|
|
|
|
+
|
|
|
|
+ &>img {
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
- & > p {
|
|
|
|
|
|
+
|
|
|
|
+ &>p {
|
|
text-align: center;
|
|
text-align: center;
|
|
color: #666666;
|
|
color: #666666;
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
@@ -443,6 +430,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.shareBox {
|
|
.shareBox {
|
|
z-index: 11;
|
|
z-index: 11;
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -454,6 +442,7 @@ export default {
|
|
pointer-events: none;
|
|
pointer-events: none;
|
|
backdrop-filter: blur(4px);
|
|
backdrop-filter: blur(4px);
|
|
transition: opacity 0.5s;
|
|
transition: opacity 0.5s;
|
|
|
|
+
|
|
.shareMain {
|
|
.shareMain {
|
|
padding: 40px 30px 0;
|
|
padding: 40px 30px 0;
|
|
position: absolute;
|
|
position: absolute;
|
|
@@ -465,6 +454,7 @@ export default {
|
|
background-image: url("../../assets/img/Goods/shareBac.png");
|
|
background-image: url("../../assets/img/Goods/shareBac.png");
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
+
|
|
.close {
|
|
.close {
|
|
width: 48px;
|
|
width: 48px;
|
|
height: 48px;
|
|
height: 48px;
|
|
@@ -475,21 +465,25 @@ export default {
|
|
background-image: url("../../assets/img/Goods/shareClose.png");
|
|
background-image: url("../../assets/img/Goods/shareClose.png");
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
|
|
+
|
|
h3 {
|
|
h3 {
|
|
text-align: left;
|
|
text-align: left;
|
|
color: #d8b275;
|
|
color: #d8b275;
|
|
font-size: 24px;
|
|
font-size: 24px;
|
|
margin-bottom: 50px;
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
+
|
|
p {
|
|
p {
|
|
font-size: 20px;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
margin-bottom: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
}
|
|
|
|
+
|
|
img {
|
|
img {
|
|
width: 240px;
|
|
width: 240px;
|
|
margin-bottom: 50px;
|
|
margin-bottom: 50px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.btnn {
|
|
.btnn {
|
|
cursor: pointer;
|
|
cursor: pointer;
|
|
width: 280px;
|
|
width: 280px;
|
|
@@ -503,6 +497,7 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
.shareBoxShow {
|
|
.shareBoxShow {
|
|
opacity: 1;
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
pointer-events: auto;
|