123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <template>
- <div class="smenu">
- <audio
- ref="vbgm"
- class="noshow"
- loop
- :src="require(`@/assets/audio/bgm.mp3`)"
- ></audio>
-
- <template v-if="!tourStatus">
- <div class="sdaolan brightness">
- <div @click="toggle" class="daolan ">
- <img :src="require(`@/assets/images/project/menu/daolan.png`)" alt="" />
- </div>
- </div>
- <div class="btm-menu">
- <img :src="require('@/assets/images/mobile/tab.png')" alt="" />
- <div class="brightness"></div>
- <ul>
- <li v-for="(item, i) in menu" :key="i">
- <div @click="onClick(item)">
- <img
- v-if="item.id != 'bgm'"
- :src="require(`@/assets/images/project/menu/${item.id}.png`)"
- alt=""
- />
- <img
- v-else
- :src="
- require(`@/assets/images/project/menu/${
- isBgm ? item.muted : item.id
- }.png`)
- "
- alt=""
- />
- <span>{{ item.name }}</span>
- </div>
- </li>
- </ul>
- </div>
- </template>
- <div class="stoptour brightness" v-else>
- <div @click="toggle" class="daolan">
- <img
- :src="require(`@/assets/images/project/menu/zanting.png`)"
- alt=""
- />
- </div>
- </div>
- <transition name="likeAddAnimate">
- <div class="good" v-show="isShowGood">
- <div class="pic">
- <img
- :src="require(`@/assets/images/project/icon/zan_${theme}.png`)"
- alt=""
- />
- </div>
- <div class="num">+{{ goodNum + 1 }}</div>
- </div>
- </transition>
- </div>
- </template>
- <script>
- import { supCount, getsupCount } from "@/config/api";
- let menu = [
- {
- id: "daka",
- name: "打卡",
- cp: "daka",
- },
- {
- id: "content",
- name: "留言",
- cp: "vcontent",
- },
- {
- id: "zan",
- name: "点赞",
- },
- {
- id: "qrcode",
- name: "分享",
- cp: "qrcode",
- },
- {
- id: "bgm",
- name: "播放",
- muted: "jingyin",
- },
- ];
- export default {
- props: ["tourStatus"],
- data() {
- return {
- menu,
- goodNum: 1099,
- isShowGood: false,
- isBgm: false,
- };
- },
- watch: {
- isBgm(newVal) {
- !newVal ? this.$refs.vbgm.pause() : this.$refs.vbgm.play();
- },
- },
- methods: {
- onClick(item) {
- item.path && this.$router.push(item.path);
- item.cp && this.$emit("opencp", item.cp);
- item.id == "bgm" && (this.isBgm = !this.isBgm);
- item.id == "zan" && this.dianzan();
- },
- dianzan() {
- if (this.isShowGood) return;
- getsupCount((res) => {
- this.goodNum = res.data;
- this.isShowGood = true;
- setTimeout(() => {
- this.isShowGood = false;
- }, 2500);
- supCount(() => {});
- });
- },
- toggle(){
- let fn = this.tourStatus?'stopTour':'startAndPlay'
- this.$bus.$emit('ifrMessage',{
- events:'toggleTour',
- data:fn
- })
- }
- },
- mounted() {},
- };
- </script>
- <style lang="less" scoped>
- .smenu {
- width: 100%;
-
- .sdaolan,
- .stoptour {
- position: fixed;
- cursor: pointer;
- bottom: 113px;
- width: 45px;
- height: 45px;
- left: 14px;
- border-radius: 50%;
- overflow: hidden;
- background: rgba(0, 0, 0, 0.4);
- &::before{
- backdrop-filter: blur(10px) brightness(60%);
- }
- .daolan {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- width: 100%;
- text-align: center;
- > img {
- width: 20px;
- }
- }
- }
- .stoptour {
- .daolan {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- text-align: center;
- > img {
- width: 30px;
- }
- }
- }
- .btm-menu {
- position: fixed;
- bottom: 0%;
- left: 0%;
- z-index: 999;
- width: 100%;
- width: 100%;
- height: 103px;
- border-radius: 30px 30px 0 0;
- overflow: hidden;
- > img {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- z-index: 0;
- }
- .brightness{
- &::before{
- backdrop-filter: blur(10px) brightness(60%);
- }
- }
- > ul {
- width: 100%;
- height: 100%;
- display: flex;
- justify-content: space-around;
- align-items: center;
- text-align: center;
- margin-top: -10px;
- position: relative;
- z-index: 9999;
- > li {
- display: inline-block;
- padding: 0 0;
- width: 8%;
- > div {
- > img {
- width: 100%;
- }
- >span{
- font-size: 12px;
- }
- }
- }
- }
- }
- }
- .likeAddAnimate-enter-active,
- .likeAddAnimate-leave-active {
- transition: all 2.5s ease;
- }
- .likeAddAnimate-enter,
- .likeAddAnimate-leave {
- transform: translate(-50%, 0) scale(0);
- opacity: 0;
- }
- .likeAddAnimate-enter-to,
- .likeAddAnimate-leave-to {
- transform: translate(-50%, -80px) scale(1.2);
- opacity: 1;
- }
- .good {
- position: fixed;
- bottom: 60px;
- left: 50%;
- display: flex;
- .pic {
- width: 35px;
- > img {
- width: 100%;
- height: 100%;
- }
- }
- .num {
- margin-top: 10px;
- margin-left: 10px;
- }
- }
- .noshow {
- position: fixed;
- top: -100px;
- left: -100px;
- opacity: 0;
- visibility: hidden;
- }
- </style>
|