|
@@ -209,11 +209,25 @@
|
|
<a>{[{ TERMS }]}</a>
|
|
<a>{[{ TERMS }]}</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
- <!--(首页) -->
|
|
|
|
- <div class="toHomeBox" @click="toHomeFu">
|
|
|
|
|
|
+ <!--专家风采 -->
|
|
|
|
+ <div class="toHomeBox" @click="toPage('/expert')">
|
|
<!-- 鼠标移入的显示 -->
|
|
<!-- 鼠标移入的显示 -->
|
|
- <div class="hoverTit">回到首页</div>
|
|
|
|
- <img src="../../assets/img/toHome.png" alt="" />
|
|
|
|
|
|
+ <div class="hoverTit">专家风采</div>
|
|
|
|
+ <img src="../../assets/img/expert.png" alt="" />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!--精品典藏 -->
|
|
|
|
+ <div class="toHomeBox" @click="toPage('/goods')">
|
|
|
|
+ <!-- 鼠标移入的显示 -->
|
|
|
|
+ <div class="hoverTit">精品典藏</div>
|
|
|
|
+ <img src="../../assets/img/goods.png" alt="" />
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <!-- 分享 -->
|
|
|
|
+ <div class="toHomeBox" @click="openInd = 2">
|
|
|
|
+ <!-- 鼠标移入的显示 -->
|
|
|
|
+ <div class="hoverTit">分享</div>
|
|
|
|
+ <img src="../../assets/img/share.png" alt="" />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 音乐 -->
|
|
<!-- 音乐 -->
|
|
@@ -237,11 +251,17 @@
|
|
/>
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- 分享 -->
|
|
|
|
- <div class="toHomeBox" @click="openInd = 2">
|
|
|
|
|
|
+
|
|
|
|
+ <!-- 点赞 -->
|
|
|
|
+ <div class="toHomeBox" @click="likeFu">
|
|
<!-- 鼠标移入的显示 -->
|
|
<!-- 鼠标移入的显示 -->
|
|
- <div class="hoverTit">分享</div>
|
|
|
|
- <img src="../../assets/img/share.png" alt="" />
|
|
|
|
|
|
+ <div class="hoverTit">点赞</div>
|
|
|
|
+ <img
|
|
|
|
+ :src="require(`@/assets/img/like${isLike ? 'Ac' : ''}.png`)"
|
|
|
|
+ alt=""
|
|
|
|
+ />
|
|
|
|
+ <div class="likeNum">{{ isLikeNum }}</div>
|
|
|
|
+ <div :class="`likeMove ${isLike ? 'likeMoveShow' : ''}`">+1</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@@ -257,10 +277,11 @@
|
|
<script>
|
|
<script>
|
|
import HotList from "./components/hotList.vue";
|
|
import HotList from "./components/hotList.vue";
|
|
import Share from "./components/share.vue";
|
|
import Share from "./components/share.vue";
|
|
|
|
+import { addVisitAPI } from "@/utils/api";
|
|
|
|
|
|
export default {
|
|
export default {
|
|
components: { HotList, Share },
|
|
components: { HotList, Share },
|
|
- props: {},
|
|
|
|
|
|
+ props: [],
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
isGuide: true,
|
|
isGuide: true,
|
|
@@ -270,6 +291,9 @@ export default {
|
|
|
|
|
|
// 播放音乐的定时器id
|
|
// 播放音乐的定时器id
|
|
musicTime: -1,
|
|
musicTime: -1,
|
|
|
|
+ // 点赞
|
|
|
|
+ isLike: false,
|
|
|
|
+ isLikeNum: 0,
|
|
};
|
|
};
|
|
},
|
|
},
|
|
watch: {},
|
|
watch: {},
|
|
@@ -287,19 +311,28 @@ export default {
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- // 回到首页
|
|
|
|
- toHomeFu() {
|
|
|
|
-
|
|
|
|
- if(window.location.href.includes("?h=1")){
|
|
|
|
- window.parent.toHomeFu()
|
|
|
|
- }else {
|
|
|
|
- window.location.href = window.location.href.replace("scene", "web");
|
|
|
|
- setTimeout(() => {
|
|
|
|
- location.reload();
|
|
|
|
- }, 200);
|
|
|
|
|
|
+ // 初始点赞赋值
|
|
|
|
+ baseLike(num) {
|
|
|
|
+ this.isLikeNum = num;
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ // 点击点赞
|
|
|
|
+ async likeFu() {
|
|
|
|
+ if (this.isLike) return;
|
|
|
|
+
|
|
|
|
+ const res = await addVisitAPI("star");
|
|
|
|
+ if (res.code === 0) {
|
|
|
|
+ this.isLike = true;
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.isLike = false;
|
|
|
|
+ this.isLikeNum = res.data.pcsStar;
|
|
|
|
+ }, 2000);
|
|
}
|
|
}
|
|
|
|
+ },
|
|
|
|
|
|
-
|
|
|
|
|
|
+ // 精品典藏和专家风采
|
|
|
|
+ toPage(url) {
|
|
|
|
+ window.parent.toPage(url);
|
|
},
|
|
},
|
|
|
|
|
|
switchBGM(flag) {
|
|
switchBGM(flag) {
|
|
@@ -358,6 +391,7 @@ export default {
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
color: #fff;
|
|
|
|
+ text-shadow: 1px 1px 1px black;
|
|
}
|
|
}
|
|
#play:hover {
|
|
#play:hover {
|
|
.hoverTit {
|
|
.hoverTit {
|
|
@@ -467,6 +501,44 @@ export default {
|
|
opacity: 1;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .likeNum {
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: -18px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ text-shadow: 1px 1px 1px #fcda99;
|
|
|
|
+ }
|
|
|
|
+ .likeMove {
|
|
|
|
+ position: absolute;
|
|
|
|
+ z-index: 100;
|
|
|
|
+ left: -18px;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ text-shadow: 1px 1px 1px #fcda99;
|
|
|
|
+ opacity: 0;
|
|
|
|
+ pointer-events: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .likeMoveShow {
|
|
|
|
+ animation: likeMoveShow 2s linear forwards;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @keyframes likeMoveShow {
|
|
|
|
+ 0% {
|
|
|
|
+ opacity: 1;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ transform: scale(1);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ 100% {
|
|
|
|
+ opacity: 0;
|
|
|
|
+ bottom: 50px;
|
|
|
|
+ transform: scale(1.5);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .likeMoveShow {
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
.pinBottom-container {
|
|
.pinBottom-container {
|
|
@@ -500,6 +572,13 @@ export default {
|
|
|
|
|
|
// 移动端
|
|
// 移动端
|
|
@media screen and (max-width: 1000px) {
|
|
@media screen and (max-width: 1000px) {
|
|
|
|
+
|
|
|
|
+ .toHomeBox .likeNum{
|
|
|
|
+ left: 50%;
|
|
|
|
+ transform: translateX(-50%);
|
|
|
|
+ width: 33px;
|
|
|
|
+ }
|
|
|
|
+
|
|
.hoverTit {
|
|
.hoverTit {
|
|
opacity: 0 !important;
|
|
opacity: 0 !important;
|
|
}
|
|
}
|
|
@@ -519,7 +598,8 @@ export default {
|
|
.pinBottom-container {
|
|
.pinBottom-container {
|
|
.pinBottom.right.hideTarget {
|
|
.pinBottom.right.hideTarget {
|
|
position: fixed;
|
|
position: fixed;
|
|
- top: 200px;
|
|
|
|
|
|
+ top: 50%;
|
|
|
|
+ transform: translateY(-50%);
|
|
right: 10px;
|
|
right: 10px;
|
|
.rightViewContainer {
|
|
.rightViewContainer {
|
|
flex-direction: column;
|
|
flex-direction: column;
|