fuzhou_army/web/src/views/scene/gui/menu.vue

<template>
  <div class="pinBottom-container">
    <div class="pinBottom center">
      <div id="view-controllers"></div>
    </div>
    <div class="pinBottom left">
      <div
        class="drawbtn"
        @click="(isShow = !isShow), (showShare = false)"
      >
        <img
          :src="require(`@/assets/images/btnlist/drawback${!isShow ? '_out' : ''}.png`)"
          alt=""
        />
      </div>
      <div class="shouqi" :class="{ active: isShow }">
        <div class="viewContainer">
          <div
            id="previous"
            class="previous desktop-only ui-icon"
            style="display: none"
          >
            <a>
              <img
                rel="tooltip"
                title=""
                :src="require('@/assets/images/btnlist/play.png')"
                width="24"
                height="24"
                data-original-title="播放"
              />
            </a>
          </div>
          <div
            id="play"
            class="ui-icon"
            rel="tooltip"
            data-original-title="播放"
          >
            <a>
              <img
                title=""
                :src="require('@/assets/images/btnlist/play.png')"
                width="24"
                height="24"
              />
            </a>
          </div>
          <div id="pause" class="ui-icon" style="display: none">
            <a>
              <img
                rel="tooltip"
                title=""
                :src="require('@/assets/images/btnlist/pause.png')"
                width="24"
                height="24"
                data-original-title="暂停"
              />
            </a>
          </div>
          <div
            id="next"
            class="next desktop-only ui-icon wide"
            style="display: none"
          >
            <a>
              <i
                rel="tooltip"
                title=""
                class="icon icon-dpad-right"
                data-original-title="下一个"
              ></i>
            </a>
          </div>
          <div id="gui-modes-map" class="ui-icon double active">
            <div
              data-original-title="导览"
              @click="isGuide = !isGuide"
              id="pullTab"
              rel="tooltip"
              title=""
            >
              <img
                class="icon icon-inside"
                :src="
                  require(`@/assets/images/btnlist/auto${
                    !isGuide ? `_active_${theme}` : ''
                  }.png`)
                "
                title="导览"
              />
            </div>
            <!-- <div
              data-original-title="热点列表"
              id="hotList"
              rel="tooltip"
              title=""
              style="display: none"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/btnlist/hotlist.png')"
                title="热点列表"
              />
            </div> -->
            <div
              data-original-title="全景漫游"
              id="gui-modes-inside"
              rel="tooltip"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/btnlist/inside.png')"
                title="全景漫游"
              />
              <img
                class="icon icon-inside active"
                :src="require(`@/assets/images/btnlist/inside_active_${theme}.png`)"
                title="全景漫游"
              />
            </div>
            <div
              data-original-title="迷你模型"
              id="gui-modes-dollhouse"
              rel="tooltip"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/btnlist/dollhouse.png')"
                title="迷你模型"
              />
              <img
                class="icon icon-inside active"
                :src="require(`@/assets/images/btnlist/dollhouse_active_${theme}.png`)"
                title="迷你模型 "
              />
            </div>
            <div
              data-original-title="俯视图"
              id="gui-modes-floorplan"
              rel="tooltip"
              title=""
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/btnlist/floor.png')"
                title="俯视图"
              />
              <img
                class="active icon icon-inside active"
                :src="require(`@/assets/images/btnlist/floor_active_${theme}.png`)"
                title="俯视图"
              />
            </div>
            <div
              data-original-title="VR"
              id="vr"
              rel="tooltip"
              title=""
              style="display: none"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/btnlist/VR.png')"
                title="VR"
              />
            </div>
            <div
              data-original-title="消除外壳"
              id="gui-remove-face"
              rel="tooltip"
              title=""
              style="display: none; float: left"
            >
              <img
                class="icon icon-inside"
                :src="require('@/assets/images/btnlist/face.jpg')"
                title="消除外壳"
              />
            </div>
          </div>
        </div>

        <ul class="btn-list">
          <li @click.stop="handleItem(item)" v-for="(item, i) in btnlist" :key="i">
            <img
              :title="item.title"
              :src="require(`@/assets/images/btnlist/${item.id}${btnlistActive==item.id?`_${theme}`:''}.png`)"
            />
          </li>
          <li>
            <img
              id="bg-music-btn"
              :src="require(`@/assets/images/btnlist/bgm_on.png`)"
            />
          </li>
        </ul>

         <ul class="btn-list">
          <li title="点赞" class="like" @click="handleLike">
            <img :src="require(`@/assets/images/btnlist/like.png`)"/>
            <span>{{likeNum}} 点赞</span>
            <transition name="likeAddAnimate">
              <div class="good" v-show="isShowGood">
                <div class="pic">
                  <img :src="require(`@/assets/images/btnlist/like_${theme}.png`)" alt="" />
                </div>
                <div class="num">+1</div>
              </div>
            </transition>
          </li>
        </ul>
      </div>
    </div>

    <div class="pinBottom right hideTarget">
      <div class="rightViewContainer clearfix">
        <div class="gui-floor">
          <div class="gui-floor-title"></div>
          <div class="gui-floor-icon">
            <span class="gui-floor-number"></span>
          </div>
          <div class="container"></div>
        </div>
        <div id="volume" class="ui-icon wide">
          <a>
            <img
              :src="require('@/assets/images/btnlist/解说-打开.png')"
              width="24"
              height="24"
            />
          </a>
        </div>
        <div id="vr" class="ui-icon wide hidden" style="display: none">
          <a>
            <i
              rel="tooltip"
              title="{[{ VIEW_IN_VR }]}"
              class="icon icon-webvr"
            ></i>
          </a>
        </div>
        <div id="sharing" class="ui-icon wide hidden" style="display: none">
          <a>
            <i
              rel="tooltip"
              title="{[{ SOCIAL_SHARING }]}"
              class="icon icon-share"
            ></i>
          </a>
        </div>
        <div
          id="gui-fullscreen"
          class="ui-icon wide"
          data-placement="top"
          rel="tooltip"
          title="{[{ VIEW_FULLSCREEN }]}"
        >
          <a title="全屏">
            <img class="icon icon-fullscreen" :src="require('@/assets/images/btnlist/大场景-展开.png')"/>
          </a>
        </div>
        <div
          id="gui-fullscreen-exit"
          class="ui-icon wide"
          data-placement="top"
          rel="tooltip"
          title="{[{ EXIT_FULLSCREEN }]}"
          style="display: none"
        >
          <a title="退出全屏">
            <img class="icon-fullscreen-exit" :src="require('@/assets/images/btnlist/大场景-缩小.png')"/>
          </a>
        </div>
        <div class="pull-right terms terms2">
          <a>{[{ TERMS }]}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "@/config/api";
import { getStar,dianzan  } from "@/config/api";

let menuli = [
  {
    id: "comment",
    path: "",
    title:'留言'
  },
  {
    id: "question",
    path: "",
    title:'答题'
  }
];

export default {
  props:['itemctive'],
  components:{
  },
  data() {
    let conLi = [
      {
        id: "previous",
        class: "previous desktop-only ui-icon",
        style: "display: none",
        img: "play",
        title: "播放",
      },
      {
        id: "play",
        class: "ui-icon",
        img: "play",
        title: "播放",
      },
      {
        id: "pause",
        class: "ui-icon",
        style: "display: none",
        img: "pause",
        title: "暂停",
      },
      {
        id: "next",
        class: "next desktop-only ui-icon wide",
        style: "display: none",
        img: "pause",
        title: "下一个",
      },
      {
        id: "gui-modes-map",
        class: "ui-icon double active",
        subId: "pullTab",
        img: "auto",
        title: "导览",
        activeImg: true,
      },
      {
        id: "hotList",
        class: "ui-icon double active",
        style: "display: none",
        img: "hotlist",
        title: "热点列表",
      },
      {
        id: "gui-modes-inside",
        class: "ui-icon double active",
        img: "inside",
        title: "全景漫游",
        activeImg: true,
      },
      {
        id: "gui-modes-dollhouse",
        subId: "pullTab",
        img: "dollhouse",
        title: "迷你模型",
        activeImg: true,
      },
      {
        id: "gui-modes-floorplan",
        img: "floor",
        title: "俯视图",
        activeImg: true,
      },
      {
        id: "vr",
        img: "VR",
        style: "display: none",
        title: "VR",
      },
      {
        id: "gui-remove-face",
        style: "display: none; float: left",
        title: "消除外壳",
      },
    ];

    return {
      isShow: true,
      isGuide: true,
      conLi,
      showAutoList: false,
      btnlistActive:this.itemctive,
      isShowGood:false,
      likeNum:0
    };
  },
  computed: {
    btnlist() {
      return menuli;
    }
  },
  methods: {
    handleItem(item) {
      this.btnlistActive = item.id
      console.log('调用了');
      this.$emit('btnactive',item.id)
    },
    handleLike(){
      if (this.isShowGood) return
      checkLogin(res => {
        if (res.data) {
          dianzan(()=>{
            this.isShowGood = true
            setTimeout(() => {
              this.isShowGood = false
              this.likeNum++
            }, 2500);
          })
        } else {
          alert('请登录后操作')
        }
      })
    },
    getStar(){
      getStar(res=>{
        this.likeNum = res.data
      })
    },
  },
  mounted(){
    this.$bus.$on('resetbtnactive',()=>{
      this.btnlistActive = ''
    })
    this.getStar()
  }
};
</script>

<style lang="less" scoped>
#gui-modes-map {
  > div {
    > img {
      display: block!important;
    }
    .active {
      display: none!important;
    }
  }
  .active {
    > img {
      display: none!important;
    }
    .active {
      display: block!important;
    }
  }
}
#pinMobile {
  > li {
    > div {
      > img {
        display: block;
      }
      .active {
        display: none;
      }
    }
  }
  .active {
    > div {
      > img {
        display: none;
      }
      .active {
        display: block;
      }
    }
  }
}

.shouqi {
  max-width: 0;
  border-radius: 25px;
  transition: all 0.3s ease;
  display: flex;
  overflow: hidden;
}

.shouqi.active {
  max-width: 800px;
}

.drawbtn {
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  width: 48px;
  height: 48px;
  float: left;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
  }
}

.btn-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 25px;
  margin-left: 20px;
  > li {
    width: 60px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    > img {
      width: 28px;
      height: 28px;
    }
  }
  .like{
    min-width: 150px;
    width: auto;
    >span{
      font-size: 14px;
      color: #fff;
      display: inline-block;
      margin-left: 10px;
    }
  }
}

.hoverCls {
  position: absolute;
  right: -45px;
  bottom: 60px;
  > img {
    width: 150px;
  }
  .hoverBody {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    > img {
      width: 70%;
      display: block;
      margin: 0 auto;
    }
    span {
      margin-top: 20px;
      display: inline-block;
    }
  }
}

#pinMobile {
  margin: 0;
  max-width: none !important;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  margin-bottom: 50px;
  > li {
    width: 40px !important;
    height: 40px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0;
    > div {
      > img {
        width: 24px;
        height: 24px;
      }
    }
  }
}

.menu_btn {
  width: 40px;
  height: 40px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 3px;
  > img {
    width: 18px;
    height: 18px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
}

@media only screen and (max-width: 487px), (max-height: 487px) {
  .btn-list_m {
    margin: 0;
    max-width: none !important;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    margin-bottom: 50px;
    > li {
      width: 40px !important;
      height: 40px !important;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 4px 0;
      cursor: pointer;
      > img {
        width: 24px;
        height: 24px;
      }
    }
  }
}


.likeAddAnimate-enter-active,
.likeAddAnimate-leave-active {
  transition: all 2.8s ease;
}
.likeAddAnimate-enter,
.likeAddAnimate-leave {
  transform: translateY(0) scale(0);
  opacity: 0;
}
.likeAddAnimate-enter-to,
.likeAddAnimate-leave-to {
  transform: translateY(-50px) scale(1.2);
  opacity: 1;
}
.good {
  position: absolute;
  bottom: 10px;
  right: 70px;
  display: flex;
  .pic {
    width: 35px;
    > img {
      width: 100%;
      height: 100%;
    }
  }
  .num {
    margin-top: 10px;
    margin-left: 10px;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
  }
}
</style>