up

src/components/exhibition/index.vue

@@ -1,125 +1,216 @@
 <template>
-  <div class="parimaryExhibtion" :class="{ daolanactive: isShow }">
+  <div class="parimaryExhibtion" :class="{daolanactive:isShow}">
     <div class="p-title">
-      <span :title="current.sceneTitle">当前位置：{{ current.sceneTitle }}</span>
+      <span>当前位置：{{current.name}}</span>
+    </div>
+    <div class="exh-con">
+      <img :src="require('@/assets/images/map.png')">
     </div>
-    <div class="cad-con"></div>
-
     <ul class="exhi-list">
-      <li
-        @click="handleItem(item, i)"
-        :class="{ active: item.id == current.id, showactive: item.shensuo, haveChild: item.children.length > 0 }"
-        v-for="(item, i) in fixList"
-        :key="i"
-      >
-        <span>{{ item.name }}</span>
-        <ul v-if="item.children.length > 0">
-          <li
-            @click.stop="handleItem1(sub, ii)"
-            :class="{ active: sub.id == current.id, showactive: sub.shensuo, haveChild1: sub.scenes.length > 0 }"
-            v-for="(sub, ii) in item.children"
-            :key="ii"
-          >
-            <span>{{ sub.name }}</span>
-            <ul class="sonUl" v-if="sub.scenes.length > 0">
-              <li :class="{ active: son.id == current.id }" @click.stop="handleItem2(son)" v-for="(son, iii) in sub.scenes" :key="iii">
-                <span>{{ son.sceneTitle }}</span>
-              </li>
-            </ul>
-          </li>
-        </ul>
+      <li @click="handleItem(item)" v-for="(item,i) in list" :key="i">
+        {{item.name}}
       </li>
     </ul>
-
-    <div class="daolan" @click="isShow = !isShow">
-      <img :src="require('@/assets/images/icon/daolan.png')" />
-      <span>{{ isShow ? "收起" : "展开" }}导览</span>
+    <div class="daolan" @click="isShow = !isShow ">
+      <img :src="require('@/assets/images/icon/daolan.png')">
+      <span>{{isShow?'收起':'展开'}}导航</span>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["someData", "ccs"],
-  data() {
-    let list = [];
-    return {
-      isShow: true,
-      fixList: [...list],
-      current: {},
-    };
+  data(){
+    return{
+      isShow:false,
+      list:[
+        {
+          id:1,
+          name:'英雄广场',
+          pano:"56fa4a8ee09542e69e0e5e763cf3a4eb",
+          quaternion:{
+            w: 0.732101964384876,
+            x: -0.01689940520219317,
+            y: 0.6808040582684568,
+            z: 0.015715275089404925
+          }
+        },
+        {
+          id:2,
+          name:'第一展区 序厅',
+          pano:"bd279aa2ee3445658d5949ccdc3d0dec",
+          quaternion:{
+            w: -0.6115252203661626,
+            x: -0.00202956708438099,
+            y: 0.7912137782061446,
+            z: -0.003695157689334756
+          }
+        },
+        {
+          id:3,
+          name:'第二展区 发展历程厅',
+          pano:'b2431912b20d4df7b81f47821fca6d1a',
+          quaternion:{
+            w: 0.11635247170122785,
+            x: 0.00932045997324726,
+            y: 0.9899930039071927,
+            z: -0.07930377265884167
+          }
+        },
+        {
+          id:4,
+          name:'第三展区 建设成就厅',
+          pano:"353a5de969da46779551bd811a9f9249",
+          quaternion:{
+            w: 0.7058518315845261,
+            x: 0.017866627768183364,
+            y: 0.7079073967480722,
+            z: -0.017918657894228647
+          }
+        },
+        {
+          id:5,
+          name:'第四展区 经典战例厅',
+          pano:"2eb9d9d718c8416391993b7a9099ca25",
+          quaternion:{
+            w: 0.9947693640853533,
+            x: 0.09500869955101461,
+            y: 0.03734343676475115,
+            z: -0.003566606968767554
+          }
+        },
+        {
+          id:6,
+          name:'第五展区 英模荣誉厅',
+          pano:"2eb9d9d718c8416391993b7a9099ca25",
+          quaternion:{
+            w: 0.9947693640853533,
+            x: 0.09500869955101461,
+            y: 0.03734343676475115,
+            z: -0.003566606968767554
+          }
+        },
+        {
+          id:7,
+          name:'第六展区 辅展厅',
+          pano:"2eb9d9d718c8416391993b7a9099ca25",
+          quaternion:{
+            w: 0.9947693640853533,
+            x: 0.09500869955101461,
+            y: 0.03734343676475115,
+            z: -0.003566606968767554
+          }
+        }
+        
+      ],
+      current:  {
+          id:1,
+          name:'序厅',
+          pano:"56fa4a8ee09542e69e0e5e763cf3a4eb",
+          quaternion:{
+            w: 0.732101964384876,
+            x: -0.01689940520219317,
+            y: 0.6808040582684568,
+            z: 0.015715275089404925
+          }
+        },
+    }
   },
-  methods: {
-    handleItem(item, i) {
-      item.shensuo = !item.shensuo;
-      this.$set(this.fixList, i, item);
-    },
-    handleItem1(sub, i) {
-      sub.shensuo = !sub.shensuo;
-    },
-    handleItem2(item) {
-      if (this.current.sceneCode == item.sceneCode) {
-        return;
-      }
-      this.$emit("handleClick", item.sceneCode);
-      this.current = item;
-    },
+  methods:{
+    handleItem(item){
+      this.current = item
+      let { x, y, z, w } = item.quaternion
+      console.log(x, y, z, w);
+      // item.pano && player.blackToPano({
+      //     pano:player.model.panos.index[item.pano],
+      //     quaternion: new THREE.Quaternion(x, y, z, w)
+      //   }
+      // )
+    }
   },
+  watch:{
+    isShow(newVal){
+      let css =newVal? '10px':'-310px'
+      $('.cad').css({right:css})
+    }
+  }
+}
+</script>
 
-  watch: {
-    someData: {
-      deep: true,
-      immediate: true,
-      handler: function(newVal) {
-        if (newVal.catalogRoot) {
-          let list = newVal.catalogRoot.map((item) => {
-            let ttt = { ...item };
-            ttt.children = item.children.map((ii) => {
-              let tmp = newVal.scenes.filter((iii) => iii.category == ii);
-              let name =
-                newVal.catalogs.find((iii) => {
-                  return iii.id == ii;
-                }).name || "";
-              return {
-                id: ii,
-                scenes: tmp || [],
-                name,
-                shensuo: false,
-              };
-            });
+<style lang="less" scoped>
 
-            ttt.shensuo = true;
-            return ttt;
-          });
-          this.fixList = this.CloneObject(list);
-        
+  .parimaryExhibtion {
+    border: 2px solid #f18c06;
+    width: 300px;
+    background: rgba(0, 0, 0, 0.4);
+    transform: translateX(300px);
+    transition: all 0.3s ease;
+    color: #fff;
+    .daolan {
+      cursor: pointer;
+      position: absolute;
+      right: 298px;
+      background: rgba(0, 0, 0, 0.4);
+      border-radius: 5px 0px 0px 5px;
+      top: 24%;
+      padding: 10px;
+      > img {
+        width: 16px;
+        transform: rotate(180deg);
+        margin-bottom: 4px;
+      }
+    }
+    .p-title {
+      text-align: center;
+      background: #b9412e;
+      position: relative;
+      border-bottom: 2px solid #f18c06;
+      height: 60px;
+      > span {
+        padding-left: 0;
+        line-height: 60px;
+        height: 60px;
+        font-weight: bold;
+        font-size: 16px;
+        letter-spacing: 1px;
+      }
+    }
+    .exh-con {
+      width: 100%;
+      height: 200px;
+    }
+    .exhi-list {
+      border-top: 2px solid #f18c06;
+      width: 100%;
+      > li {
+        // text-align: center;
+        height: 40px;
+        line-height: 40px;
+        padding: 0 30px;
+        cursor: pointer;
+        &:hover {
+          background: #b9412e;
         }
-      },
-    },
-    ccs: {
-      deep: true,
-      immediate:true,
-      handler: function(newVal) {
-        this.current = { ...newVal };
-      },
-    },
-    isShow(newVal) {
-      let css = newVal ? "10px" : "-310px";
-      $(".cad").css({ right: css });
-    },
-  },
-};
-</script>
+      }
+    }
+  }
+.exh-con{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  >img{
+    width: 80%;
+  }
+}
 
-<style lang="less" scoped>
-.daolanactive {
+.daolanactive{
   transform: translateX(0);
-  .daolan {
-    > img {
+  .daolan{
+    >img{
       width: 16px;
       transform: rotate(0);
       margin-bottom: 4px;
     }
   }
 }
-</style>
+</style>

src/components/exhibition/list.vue

@@ -1,24 +0,0 @@
-<template>
-   <ul class="exhi-list">
-      <li
-        @click="handleItem(item, i)"
-        :class="{ active: item.id == current.id, showactive: item.shensuo, haveChild: item.children.length > 0 }"
-        v-for="(item, i) in list"
-        :key="i"
-      >
-        <span>{{ item.name }}</span>
-        <slot name="cul"></slot>
-      </li>
-    </ul>
-</template>
-
-<script>
-export default {
-  props:['list']
-  
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>

src/views/layout/footer.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="sfooter">
-    <ul>
-      <li>
-        <p><span>总访问量：</span><mNumber :num="count"/></p>
-      </li>
-      <li>
-        <p><a href="/backstage/index.html" target="_blank">后台管理系统</a></p>
-        <p>电话：0991-3356155</p>
-        <p>友情链接：<a href="http://25.21.144.120/" target="_blank">新疆生产建设兵总队网</a></p>
-      </li>
-      <li>
-        <p>版权所有：武警北京市总队执勤第十四支队数字史馆</p>
-        <p>CopyRights 2016， All Rights Reserved.</p>
-      </li>
-      <li>
-        <img :src="require('@/assets/images/footer-logo.png')" alt="">
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import mNumber from '@/components/Number'
-import { getVisit } from "@/config/api";
-
-export default {
-  components:{
-    mNumber
-  },
-  data(){
-    return{
-      count: '0'
-    }
-  },
-  methods:{
-    async getCount(){
-      getVisit(result=>{
-        this.count = String(result.data)
-      })
-    },
-  },
-  mounted(){
-    this.getCount()
-  }
-}
-</script>
-
-<style lang="less" scoped>
-a:link,a:visited,a:active,a:hover{
-  text-decoration: none;
-  color: #fff;
-}
-.sfooter{
-  width: 100%;
-  background-color: #828282;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 999;
-  height: 140px;
-  >ul{
-    width: 1320px;
-    margin: 0 auto;
-    display: flex;
-    color: #fff;
-    justify-content: space-around;
-    align-items: center;
-    >li{
-      text-align: left;
-      border-right: 1px solid #fff;
-      padding:0 40px;
-      overflow: hidden;
-      height: 100px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      margin: 20px 0;
-      &:last-of-type{
-        border-right: none;
-        padding:0 40px;
-      }
-      p{
-        margin-bottom: 10px;
-        >span{
-          display: inline-block;
-          min-width: 100px;
-          margin-right: 10px;
-        }
-        >a{
-          min-width: 100px;
-          text-align: left;
-          padding-bottom: 2px;
-          border-bottom: 1px solid #fff;
-        }
-      }
-      >img{
-
-      }
-    }
-  }
-}
-</style>

src/views/layout/header.vue

@@ -1,269 +0,0 @@
-<template>
-  <div class="header primary">
-    <div class="logo">
-      <div>
-        <img class="logo_bg" :src="require(`@/assets/images/icon/logo_dec.png`)" alt="" />
-        <img class="i_logo" @click="gotoHome" :src="require('@/assets/images/icon/logo.png')" alt="" />
-      </div>
-      <span @click="gotoHome">武警北京市总队执勤第十四支队数字史馆</span>
-    </div>
-
-    <div class="nav-right">
-      <ul class="navs">
-        <li @click="navigateTo(item)" :class="{ navActive: item.id === activeIdx }" v-for="(item, i) in navs" :key="i">
-          <img v-if="item.id === activeIdx" :src="require(`@/assets/images/xinjiang/qiji.png`)" />
-          <span>{{ item.name }}</span>
-          <div class="line"></div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-import { formatDate } from "@/config/utils.js";
-
-import { getUserInfo, logout } from "@/config/api";
-
-const navs = [
-  {
-    name: "数字史馆",
-    link: "/",
-    id: 1,
-  },
-   {
-    name: "数字荣誉室",
-    link: "/honor",
-    id: 2,
-  },
-  {
-    name: "精品典藏",
-    link: "/collection",
-    id: 3,
-  },
-  {
-    name: "我要留言",
-    link: "/message",
-    id: 4,
-  },
-];
-
-const colors = [
-  {
-    name: "海军蓝",
-    id: "huyangjin",
-    color: "#0194DD",
-    active: "#1E4786",
-  },
-  {
-    name: "基因红",
-    id: "jiyinhong",
-    color: "#CB0000",
-    active: "#E4AD64",
-  },
-  {
-    name: "橄榄绿",
-    id: "ganlanlv",
-    color: "#757034",
-    active: "#CCC460",
-  },
-];
-
-export default {
-  data() {
-    return {
-      navs,
-      colors,
-      keyword: "",
-      date: "",
-      activeIdx: this.$route.meta.id,
-    };
-  },
-  computed: {
-    ...mapState({
-      theme: (state) => state.common.theme,
-    }),
-  },
-  watch: {
-    "$route.meta.id": function(newVal) {
-      this.activeIdx = newVal;
-    },
-  },
-  methods: {
-    gotoHome() {
-      if (this.$route.path == "/") {
-        this.$bus.$emit("backtotop");
-      } else {
-        this.$router.push({ path: "/" });
-      }
-    },
-    getUserInfo() {
-      let userId = window.localStorage.getItem("webuserId");
-      let token = window.localStorage.getItem("webtoken");
-
-      if (!userId || !token) return;
-      getUserInfo({ id: userId }, (res) => {
-        this.$store.dispatch("setUserInfo", res.data);
-        this.$refs.ifr &&
-          this.$refs.ifr.contentWindow.postMessage(
-            {
-              source: "userInfo",
-              data: res.data,
-            },
-            "*"
-          );
-      });
-    },
-    submitLogout() {
-      logout(() => {
-        window.localStorage.setItem("webtoken", "");
-        window.localStorage.setItem("webuserInfo", "");
-        window.localStorage.setItem("webuserId", "");
-        this.$store.dispatch("setUserInfo", {});
-        window.location.reload();
-      });
-    },
-    logout() {
-      let res = window.confirm("是否退出登录?");
-      res && this.submitLogout();
-    },
-    changeColor(id) {
-      this.$store.dispatch("changeTheme", id);
-      document.getElementById("app").className = "theme" + id;
-    },
-    navigateTo(item) {
-      this.activeIdx = item.id;
-      this.$router.push({
-        path: item.link,
-      });
-    },
-  },
-  mounted() {
-    this.date = formatDate(new Date());
-    this.getUserInfo();
-    this.$bus.$on("logout", (data) => {
-      this.showLogin = data;
-      this.submitLogout();
-    });
-    // window.onunload = ()=>{
-    //   this.submitLogout()
-    // }
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: #fff;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
-  font-size: 0;
-  padding-left: 30px;
-  z-index: 99999;
-  position: fixed;
-  width: 100%;
-  height: 80px;
-  top: 0;
-  left: 0;
-  .logo {
-    flex: 2;
-    display: flex;
-    text-align: center;
-    justify-content: flex-start;
-    align-items: center;
-    font-weight: bold;
-    font-size: 0;
-    height: 100%;
-    > div {
-      position: relative;
-      text-align: center;
-      width: 100px;
-      .logo_bg {
-        z-index: -1;
-        position: absolute;
-        top: -6px;
-        left: 0;
-        width: 100%;
-      }
-      .i_logo {
-        text-align: center;
-        cursor: pointer;
-        width: 74%;
-      }
-    }
-    > span {
-      font-size: 24px;
-      text-align: left;
-      letter-spacing: 2px;
-      cursor: pointer;
-    }
-  }
-
-  .nav-right {
-    display: flex;
-    flex: 4;
-    padding: 0 50px;
-    height: 100%;
-    align-items: center;
-    justify-content: space-between;
-
-    .navs {
-      width: 100%;
-      display: flex;
-      justify-content: flex-start;
-      align-items: center;
-      font-size: 18px;
-      height: 80px;
-      line-height: 80px;
-      box-sizing: border-box;
-      > li {
-        position: relative;
-        cursor: pointer;
-        height: 100%;
-        line-height: 100%;
-        width: 180px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 0 20px;
-        margin-right: 20px;
-        img {
-          width: 40px;
-          margin-right: 10px;
-          position: absolute;
-          left: 14px;
-          top: 50%;
-          transform: translateY(-50%);
-        }
-        span {
-          display: inline-block;
-          font-size: 18px;
-          min-width: 140px;
-          padding-left: 50px;
-        }
-        
-      }
-    }
-  }
-}
-
-@media screen and (max-width: 1700px) {
-  .header {
-    .navs {
-      min-width: 600px;
-      > li {
-        padding: 0 10px;
-      }
-    }
-    .right {
-      .colors {
-        margin-right: 0;
-      }
-    }
-  }
-}
-</style>

src/views/layout/index.vue

@@ -31,6 +31,8 @@
         </div>
       </div>
     </div>
+    <!-- 隐藏导航栏，显示logo，点击显示导航栏 -->
+    <div class="lay_top_hide" @click="layTopShow"></div>
     <!-- 下侧内容 -->
     <div class="right_con">
       <Router-view />
@@ -63,6 +65,11 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 点击显示tab栏
+    layTopShow() {
+      let temp = document.querySelector(".lay_top");
+      temp.style.height = "120px";
+    },
     // 点击tab栏
     jump(url) {
       this.$router.push(url).catch(() => {});
@@ -90,6 +97,10 @@ export default {
     ];
     let week = weeks[wk];
     this.time = `${year}年${month}月${day}日 ${week}`;
+
+    // this.$bus.$on("closemenu", () => {
+    //   console.log("移动了点位");
+    // });
   },
   beforeCreate() {}, // 生命周期 - 创建之前
   beforeMount() {}, // 生命周期 - 挂载之前
@@ -107,13 +118,30 @@ export default {
   width: 100%;
   height: 100%;
   color: #fff;
+  .lay_top_hide {
+    display: block;
+    cursor: pointer;
+    position: fixed;
+    top: 0px;
+    left: 100px;
+    z-index: 98;
+    width: 220px;
+    height: 86px;
+    background: url("../../assets/img/logoHide.png");
+    background-size: 100% 100%;
+  }
   .lay_top {
+    overflow: hidden;
+    transition: all 0.3s;
     display: flex;
-    z-index: 999;
-    position: relative;
+    z-index: 100;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
-    height: 90px;
-    background-color: #b0111e;
+    height: 120px;
+    background: url("../../assets/img/topTabBac.jpg") no-repeat;
+    background-size: 100% 90px;
     .login {
       transform: translateY(-1px);
       padding-top: 8px;
@@ -142,7 +170,7 @@ export default {
       flex: 1;
       .bot_time {
         text-align: right;
-        padding-right: 65px;
+        padding-right: 67px;
         height: 30px;
         line-height: 30px;
         border-bottom: 1px solid #f2cd83;

src/views/scene/components/menubar.vue

@@ -1,9 +1,53 @@
 <template>
   <div class="menu">
     <ul>
-      <li @click="handleItem(item)" v-for="(item,i) in list" :key="i">
-        <img :src="require(`@/assets/images/pano/menu/${item.id}${item.isSelect?'_active':''}.png`)" alt="">
-        <span v-if="item.id=='like'">1213点赞</span>
+      <!-- 点赞 -->
+      <li title="点赞" class="like" @click="handleLike">
+        <img
+          :src="
+            require(`@/assets/img/${isShowGood ? 'like_active' : 'like'}.png`)
+          "
+        />
+        <span class="like_txt">{{ likeNum }}</span>
+        <transition name="likeAddAnimate">
+          <div class="good" v-show="isShowGood">
+            <div class="pic">
+              <img src="@/assets/img/like_active.png" alt="" />
+            </div>
+            <div class="num">+1</div>
+          </div>
+        </transition>
+      </li>
+      <!-- 玫瑰 -->
+      <li title="送花" class="like" @click="handleLike2">
+        <img
+          :src="
+            require(`@/assets/img/${
+              isShowGood2 ? 'flower_active' : 'flower'
+            }.png`)
+          "
+        />
+        <span class="like_txt">{{ likeNum2 }}</span>
+        <transition name="likeAddAnimate">
+          <div class="good" v-show="isShowGood2">
+            <div class="pic">
+              <img src="@/assets/img/flower_active.png" alt="" />
+            </div>
+            <div class="num">+1</div>
+          </div>
+        </transition>
+      </li>
+      <!-- 点赞和玫瑰结束 -->
+
+      <li @click="handleItem(item)" v-for="(item, i) in list" :key="i" :class="{manyou:item.id==='manyou'}">
+        <img
+          :src="
+            require(`@/assets/images/pano/menu/${item.id}${
+              item.isSelect ? '_active' : ''
+            }.png`)
+          "
+          alt=""
+        />
       </li>
     </ul>
   </div>
@@ -11,75 +55,157 @@
 
 <script>
 export default {
-  data(){
-    
+  data() {
     return {
-      list:[
+      likeNum: 0,
+      likeNum2: 0,
+      isShowGood: false,
+      isShowGood2: false,
+      // 点赞和玫瑰 👆
+      list: [
         {
-          id:'manyou',
-          name:'漫游',
-          isSelect:false
+          id: "manyou",
+          name: "漫游",
+          isSelect: false,
         },
+        // {
+        //   id: "comment",
+        //   name: "留言",
+        //   isSelect: false,
+        // },
         {
-          id:'comment',
-          name:'留言',
-          isSelect:false
+          id: "music",
+          name: "音乐",
+          isSelect: false,
         },
         {
-          id:'music',
-          name:'音乐',
-          isSelect:false
+          id: "full",
+          name: "全屏",
+          isSelect: false,
         },
-        {
-          id:'like',
-          name:'点赞',
-          isSelect:false
-        }
-      ]
-    }
+      ],
+    };
   },
   methods: {
-    handleItem(item){
-      item.isSelect = !item.isSelect
-      this.$emit('clickMenu',item)
+    // 点击点赞
+    handleLike() {
+      if (this.isShowGood) return;
+      this.isShowGood = true;
+      setTimeout(() => {
+        this.isShowGood = false;
+        this.likeNum++;
+      }, 2800);
+    },
+    // 点击玫瑰
+    handleLike2() {
+      if (this.isShowGood2) return;
+      this.isShowGood2 = true;
+      setTimeout(() => {
+        this.isShowGood2 = false;
+        this.likeNum2++;
+      }, 2800);
+    },
+    // 点赞和玫瑰 👆
+    handleItem(item) {
+      item.isSelect = !item.isSelect;
+      this.$emit("clickMenu", item);
+    },
+    closeItem(type, status = false) {
+      let idx = this.list.findIndex((item) => item.id == type);
+      let ttt = { ...this.list[idx] };
+      ttt.isSelect = status;
+      this.$set(this.list, idx, ttt);
     },
-    closeItem(type, status=false){
-      let idx = this.list.findIndex(item=>item.id==type)
-      let ttt = {...this.list[idx]}
-      ttt.isSelect = status
-      this.$set(this.list, idx,ttt)
-    }
   },
-}
+};
 </script>
 
 <style lang="less" scoped>
-.menu{
+// ----------点赞
+.likeAddAnimate-enter-active,
+.likeAddAnimate-leave-active {
+  transition: all 2.8s ease;
+}
+.likeAddAnimate-enter {
+  transform: translateY(-40px) scale(1) rotate(20deg);
+  opacity: 1;
+}
+.likeAddAnimate-leave {
+  transform: translateY(-60px) scale(1) rotate(20deg);
+  opacity: 1;
+}
+.likeAddAnimate-enter-to,
+.likeAddAnimate-leave-to {
+  transform: translateY(-80px) scale(0.8) rotate(-20deg);
+  opacity: 0;
+}
+.good {
+  position: absolute;
+  bottom: 5px;
+  right: 0px;
+  display: flex;
+  .pic {
+    width: 32px;
+    > img {
+      width: 32px;
+      height: 32px;
+    }
+  }
+  .num {
+    width: 18px;
+    font-size: 12px;
+    margin-top: 10px;
+    color: #fff;
+    text-shadow: 0 0 10px rgba(0, 0, 0, 1);
+  }
+}
+
+.menu {
   width: 300px;
   height: 50px;
-  background: rgba(51, 51, 51, 0.6);
   border-radius: 25px;
-  >ul{
+  > ul {
     display: flex;
     height: 100%;
     justify-content: space-around;
     align-items: center;
     padding: 0 20px;
-    >li{
-      font-size: 0;
+    > li {
       display: flex;
+      justify-content: center;
       align-items: center;
-      >img{
+      width: 42px;
+      height: 42px;
+      background-color: rgba(0, 0, 0, 0.7);
+      border-radius: 50%;
+      position: relative;
+      font-size: 0;
+      > img {
         width: 32px;
         height: 32px;
         cursor: pointer;
       }
-      >span{
-        display: inline-block;
-        margin-left: 10px;
-        font-size: 14px;
+      .like_txt {
+        color: #fff;
+        font-size: 12px;
+        position: absolute;
+        bottom: -18px;
+        left: 50%;
+        transform: translateX(-50%);
       }
     }
+    .manyou{
+      opacity: 0;
+      cursor: pointer;
+      border-radius:0;
+      left: 50%;
+      transform: translateX(-50%);
+      position: fixed;
+      bottom: 63px;
+      width: 160px;
+      height: 40px;
+      background-color: aqua;
+    }
   }
 }
 </style>

src/views/scene/components/tourbtn.vue

@@ -49,7 +49,6 @@ export default {
         width: 20px;
         height: 20px;
         cursor: pointer;
-        margin-right: 6px;
       }
       .stop{
         width: 18px;

src/views/scene/components/wheel.vue

@@ -1,65 +1,72 @@
 <template>
   <div class="wheel">
-    <img :src="require('@/assets/images/pano/fangxiangpan.png')" alt="">
-    <span @mousedown="$emit('mousedown','l')" class="l">左转</span>
-    <span @click="$emit('mouseclick','f')" class="f">前进</span>
-    <span @click="$emit('mouseclick','b')" class="b">后退</span>
-    <span @mousedown="$emit('mousedown','r')" class="r">右转</span>
+    <img :src="require('@/assets/images/pano/fangxiangpan.png')" alt="" />
+    <!-- <span @mousedown="$emit('mousedown','l')" class="l">左转</span> -->
+    <span @click="$emit('mouseclick', 'f')" class="f"></span>
+    <span @click="$emit('mouseclick', 'b')" class="b"></span>
+    <!-- <span @mousedown="$emit('mousedown','r')" class="r">右转</span> -->
   </div>
 </template>
 
 <script>
 export default {
-  
-}
+  data() {
+    return {
+    };
+  },
+};
 </script>
 
 <style lang="less" scoped>
-.wheel{
+.wheel {
   user-select: none;
   position: fixed;
-  bottom: 0;
+  bottom: 10px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 0;
-  >img{
-    width: 200px;
+  > img {
+    width: 160px;
   }
-  .l,.r,.f,.b{
+  .l,
+  .r,
+  .f,
+  .b {
     color: #fff;
     position: absolute;
     font-size: 14px;
     cursor: pointer;
   }
 
-  @lrbtm:18px;
-  @lrv:12px;
-  @lrrota:65deg;
-
-  @fbbtm:58px;
-  @fbv:50px;
-  @fbrota:34deg;
+  @lrbtm: 18px;
+  @lrv: 12px;
+  @lrrota: 65deg;
 
+  @fbbtm: 58px;
+  @fbv: 50px;
+  @fbrota: 34deg;
 
-  .l{
-    left: @lrv;
-    bottom: @lrbtm;
-    transform: rotate(-@lrrota);
-  }
-  .f{
-    left: @fbv;
-    bottom: @fbbtm;
-    transform: rotate(-@fbrota);
-  }
-  .b{
-    right: @fbv;
-    bottom: @fbbtm;
-    transform: rotate(@fbrota);
+  // .l{
+  //   left: @lrv;
+  //   bottom: @lrbtm;
+  //   transform: rotate(-@lrrota);
+  // }
+  .f {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 42px;
   }
-  .r{
-    right: @lrv;
-    bottom: @lrbtm;
-    transform: rotate(@lrrota);
+  .b {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 42px;
   }
+  // .r{
+  //   right: @lrv;
+  //   bottom: @lrbtm;
+  //   transform: rotate(@lrrota);
+  // }
 }
 </style>

src/views/scene/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="scene-body">
-    <iframe ref="ifr" :src="`scene.html`" allowfullscreen="true" frameborder="0"></iframe>
+    <iframe
+      ref="ifr"
+      :src="`scene.html`"
+      allowfullscreen="true"
+      frameborder="0"
+    ></iframe>
   </div>
 </template>
 
@@ -43,10 +48,29 @@ export default {
     this.$nextTick(() => {
       document.addEventListener("fullscreenchange", () => {
         this.isFullscreen = !this.isFullscreen;
-        this.$refs.ifr.contentWindow.postMessage({
+
+        this.$nextTick(() => {
+          setTimeout(() => {
+            let temp = document.querySelector(".lay_top");
+            let temp2 = document.querySelector(".lay_top_hide");
+            if (this.isFullscreen) {
+              console.log("进入全屏");
+              temp.style.display = "none";
+              temp2.style.display = "none";
+            } else {
+              console.log("退出全屏");
+              temp.style.display = "flex";
+              temp2.style.display = "block";
+            }
+          }, 1);
+        });
+        this.$refs.ifr.contentWindow.postMessage(
+          {
             source: "changeFullScreenIcon",
-            data:this.isFullscreen,
-        },'*');
+            data: this.isFullscreen,
+          },
+          "*"
+        );
       });
       window.addEventListener("message", (res) => {
         if (Object.prototype.toString.call(res.data) == "[object Object]") {
@@ -54,6 +78,13 @@ export default {
           if (res.data.source === "fullscreen") {
             this.onFullScreen();
           }
+
+          // 移动了点位，也可以抛出给Layout
+          if (res.data.source === "closemenu") {
+            let temp = document.querySelector(".lay_top");
+            temp.style.height = "0px";
+            // this.$bus.$emit("closemenu");
+          }
         }
       });
     });

src/views/scene/scene.vue

@@ -4,30 +4,39 @@
 
     <transition appear name="fade">
       <div class="pscon" v-if="!isTour">
-        <Danmaku
+        <!-- <Danmaku
           class="danmaku"
           :quotes="quotes"
           :danmuArr="danmu"
           :showIcon="require(`@/assets/images/icon/danmu_open_jiyinhong.png`)"
           :closeIcon="require('@/assets/images/icon/danmu_close.png')"
           :arrowIcon="require('@/assets/images/icon/danmu_top.png')"
-        />
+        /> -->
 
         <menubar @clickMenu="handleMenu" ref="menubar" class="menubar" />
 
-        <rightmenu @clickRightMenu="handleRMenu" class="rightmenu" />
+        <!-- <rightmenu @clickRightMenu="handleRMenu" class="rightmenu" /> -->
 
-        <exhibition @handleClick="loadScene" :ccs="ccs" :someData="someData" class="exhibition" />
+        <exhibition
+          @handleClick="loadScene"
+          :ccs="ccs"
+          :someData="someData"
+          class="exhibition"
+        />
 
         <wheel @mousedown="wheeldown" @mouseclick="wheelclick" />
 
         <vpopup @close="handlepopClose" :cp="cp" v-if="cp" />
 
-        <xuliezhen v-show="isJieShuo" :isSpeak="isSpeak" />
-        
+        <!-- <xuliezhen v-show="isJieShuo" :isSpeak="isSpeak" /> -->
       </div>
 
-      <tourbtn @toggleTour="toggleTour" @exitTour="handleExitTour" class="tourbtn" v-else />
+      <tourbtn
+        @toggleTour="toggleTour"
+        @exitTour="handleExitTour"
+        class="tourbtn"
+        v-else
+      />
     </transition>
   </div>
 </template>
@@ -35,11 +44,11 @@
 import { getList, getSomeData } from "@/config/api";
 import wheel from "./components/wheel.vue";
 import menubar from "./components/menubar.vue";
-import rightmenu from "./components/rightmenu.vue";
+// import rightmenu from "./components/rightmenu.vue";
 
 import exhibition from "@/components/exhibition";
 import vpopup from "./components/popup.vue";
-import xuliezhen from "./components/xuliezhen.vue";
+// import xuliezhen from "./components/xuliezhen.vue";
 import tourbtn from "./components/tourbtn.vue";
 
 import * as krfn from "@/core/index.js";
@@ -47,7 +56,8 @@ import * as krfn from "@/core/index.js";
 window.__krfn = krfn.default;
 
 export default {
-  components: { wheel, menubar, exhibition, tourbtn, rightmenu, xuliezhen, vpopup },
+  // components: { wheel, menubar, exhibition, tourbtn, rightmenu, xuliezhen, vpopup },
+  components: { wheel, menubar, exhibition, tourbtn, vpopup },
   data() {
     return {
       quotes: [
@@ -71,7 +81,7 @@ export default {
       isSpeak: false,
       isJieShuo: true,
       isTour: false,
-      isbgmplaying: false
+      isbgmplaying: false,
     };
   },
 
@@ -96,14 +106,21 @@ export default {
       this.TO && clearTimeout(this.TO);
     },
     loadScene(sceneCode) {
-      this.ccs = this.someData.scenes && this.someData.scenes.find((item) => sceneCode.toLowerCase().indexOf(item.sceneCode.toLowerCase()) > -1);
+      this.ccs =
+        this.someData.scenes &&
+        this.someData.scenes.find(
+          (item) =>
+            sceneCode.toLowerCase().indexOf(item.sceneCode.toLowerCase()) > -1
+        );
       if (!this.ccs.initVisual) {
         this.ccs.initVisual = {
           vlookat: 0,
           hlookat: 0,
         };
       }
-      this.krpano.call(`skin_loadscene('scene_${sceneCode}',${this.ccs.initVisual.vlookat},${this.ccs.initVisual.hlookat})`);
+      this.krpano.call(
+        `skin_loadscene('scene_${sceneCode}',${this.ccs.initVisual.vlookat},${this.ccs.initVisual.hlookat})`
+      );
     },
 
     executeTour() {
@@ -140,12 +157,22 @@ export default {
     },
 
     wheelclick(data, istour) {
+      window.parent.postMessage(
+        {
+          source: "closemenu",
+          data: true,
+        },
+        "*"
+      );
       let targetIdx = "";
-      let currentIdx = this.someData.scenesOrder.findIndex((item) => this.currentScene.toLowerCase().indexOf(item.toLowerCase()) > -1);
+      let currentIdx = this.someData.scenesOrder.findIndex(
+        (item) =>
+          this.currentScene.toLowerCase().indexOf(item.toLowerCase()) > -1
+      );
 
       if (data == "f") {
         targetIdx = currentIdx + 1;
-        if (targetIdx >= this.someData.scenesOrder.length-1) {
+        if (targetIdx >= this.someData.scenesOrder.length - 1) {
           if (this.isTour) {
             this.handleExitTour();
           }
@@ -171,7 +198,8 @@ export default {
         this.krpano = document.getElementById("krpanoSWFObject");
       }
 
-      this.krpano && this.krpano.set("hlookat_moveforce", data == "l" ? -speed : speed);
+      this.krpano &&
+        this.krpano.set("hlookat_moveforce", data == "l" ? -speed : speed);
     },
     wheelup() {
       if (!this.krpano) {
@@ -180,21 +208,38 @@ export default {
       this.krpano.set("hlookat_moveforce", 0);
     },
     handleMenu(data) {
-      if (data.id == "comment") {
-        this.cp = data.id;
+      // if (data.id == "comment") {
+      //   this.cp = data.id;
+      // }
+      if (data.id == "full") {
+        window.parent.postMessage(
+          {
+            source: "fullscreen",
+            data: true,
+          },
+          "*"
+        );
+        return;
       }
       if (data.id == "music") {
         if (this.someData.bgm.url) {
           this.bgmAudio.src = this.$serverName + this.someData.bgm.url;
           if (data.isSelect) {
-            this.bgmAudio.play()
+            this.bgmAudio.play();
           } else {
             this.bgmAudio.pause();
-            this.isbgmplaying = false
+            this.isbgmplaying = false;
           }
         }
       }
       if (data.id == "manyou") {
+        window.parent.postMessage(
+          {
+            source: "closemenu",
+            data: true,
+          },
+          "*"
+        );
         data.isSelect ? this.playTour() : this.stopTour();
       }
     },
@@ -203,7 +248,7 @@ export default {
       this.$refs.menubar && this.$refs.menubar.closeItem(this.cp);
       this.cp = "";
     },
-    
+
     async getData() {
       let params = {
         pageNum: 1,
@@ -216,7 +261,6 @@ export default {
   },
   mounted() {
     this.$nextTick(() => {
-
       document.addEventListener("mouseup", () => {
         this.wheelup.bind(this)();
       });
@@ -226,34 +270,32 @@ export default {
         this.wheelclick("f", true);
       });
 
-
       this.bgmAudio.addEventListener("playing", () => {
-        this.isbgmplaying = true
-        this.$refs.menubar && this.$refs.menubar.closeItem('music', true);
+        this.isbgmplaying = true;
+        this.$refs.menubar && this.$refs.menubar.closeItem("music", true);
       });
 
       this.bgmAudio.addEventListener("pause", () => {
-        this.$refs.menubar && this.$refs.menubar.closeItem('music', false);
+        this.$refs.menubar && this.$refs.menubar.closeItem("music", false);
       });
 
-      this.$bus.$on('closeHP',()=>{
+      this.$bus.$on("closeHP", () => {
         if (this.isbgmplaying) {
           this.bgmAudio.play();
         }
-      })
-
-
+      });
 
       this.$bus.$on("clickHotspot", (data) => {
         if (data.sceneCode == "notjump") {
-          let hp = this.ccs.someData.hotspots.find((item) => item.name == data.id);
-          if (hp.hotspotType=='link') {
-            window.open(hp.hyperlink,"_blank")
-            return
+          let hp = this.ccs.someData.hotspots.find(
+            (item) => item.name == data.id
+          );
+          if (hp.hotspotType == "link") {
+            window.open(hp.hyperlink, "_blank");
+            return;
           }
           if (hp) {
-
-            if (hp.hotspotType=='audio'||hp.hotspotType=='video') {
+            if (hp.hotspotType == "audio" || hp.hotspotType == "video") {
               this.bgmAudio.pause();
             }
 
@@ -276,7 +318,11 @@ export default {
       this.ccs =
         scenes &&
         scenes.find((item) => {
-          return this.currentScene.toLowerCase().indexOf(item.sceneCode.toLowerCase()) > -1;
+          return (
+            this.currentScene
+              .toLowerCase()
+              .indexOf(item.sceneCode.toLowerCase()) > -1
+          );
         });
 
       window.__krfn.utils.initHotspot(this.krpano, this.ccs.someData, false);
@@ -296,12 +342,13 @@ export default {
         if (this.someData.bgm.url) {
           this.bgmAudio.src = this.$serverName + this.someData.bgm.url;
           this.bgmAudio.loop = true;
-          this.bgmAudio.play() 
+          this.bgmAudio.play();
         }
       }
 
       window.embedpano({
-        xml: this.$serverName + "/work/5/tour.xml",
+        // 修改地址
+        xml: this.$serverName + "/work/5/tour_test.xml",
         // _test
         // xml: "http://192.168.0.109:8004/panoversion/pano/tour.xml",
         swf: "%HTMLPATH%/static/lib/krpano/tour.swf",
@@ -309,9 +356,11 @@ export default {
         html5: "auto",
         mobilescale: 1,
         vars: {
-          "startscene": this.someData.firstScene.sceneCode ? ('scene_' + this.someData.firstScene.sceneCode) : '',
-          "view.vlookat":this.someData.firstScene.initVisual.vlookat || 0,
-          "view.hlookat":this.someData.firstScene.initVisual.hlookat || 0,
+          startscene: this.someData.firstScene.sceneCode
+            ? "scene_" + this.someData.firstScene.sceneCode
+            : "",
+          "view.vlookat": this.someData.firstScene.initVisual.vlookat || 0,
+          "view.hlookat": this.someData.firstScene.initVisual.hlookat || 0,
           "autorotate.enabled": !!this.someData.isAuto,
           ...settings,
         },
@@ -344,8 +393,8 @@ export default {
   }
   .menubar {
     position: absolute;
-    bottom: 10px;
-    left: 404px;
+    bottom: 15px;
+    right: 15px;
     z-index: 99;
   }
 

src/views/tab2/index.vue

@@ -45,7 +45,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab2 {
-  padding: 100px 75px 100px 150px;
+  padding: 190px 75px 100px 150px;
   width: 100%;
   height: 100%;
   background: url("../../assets/img/tabBg.png");

src/views/tab3/index.vue

@@ -323,6 +323,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab3 {
+  padding-top: 90px;
   width: 100%;
   height: 100%;
   display: flex;
@@ -430,7 +431,7 @@ export default {
     width: 700px;
     height: 50px;
     position: absolute;
-    top: 175px;
+    top: 265px;
     left: 50%;
     transform: translateX(-50%);
     /deep/.el-input__suffix {

src/views/tab4/index.vue

@@ -180,6 +180,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab4 {
+  padding-top: 90px;
   position: relative;
   width: 100%;
   height: 100%;
@@ -277,7 +278,7 @@ export default {
     width: 700px;
     height: 50px;
     position: absolute;
-    top: 175px;
+    top: 265px;
     left: 50%;
     transform: translateX(-50%);
     /deep/.el-input__suffix {

src/views/tab5/index.vue

@@ -120,7 +120,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab5 {
-  padding: 80px 125px 20px 200px;
+  padding: 170px 125px 20px 200px;
   width: 100%;
   height: 100%;
   background: url("../../assets/img/tab5Bg.png");

src/views/tab6/index.vue

@@ -53,6 +53,7 @@ export default {
 </script>
 <style lang='less' scoped>
 .tab6 {
+  padding-top: 90px;
   width: 100%;
   height: 100%;
 }

src/views/tab7/index.vue

@@ -37,14 +37,29 @@
       <div class="all">全部留言</div>
       <div class="row" v-for="(item, index) in myArr" :key="item.id">
         <div class="title">
-          <span class="one">{{ item.creatorName }}</span>
+          <span class="one">{{ item.nickName }}</span>
           <span class="tow">{{ item.createTime }}</span>
         </div>
         <div class="main">
           <div class="main_left">
             {{ item.content }}
           </div>
-          <div class="main_right" @click="replyClick(index, item.id)">评论</div>
+          <div
+            class="main_right"
+            :class="{ active: index === replyInd }"
+            @click="replyClick(index, item.id)"
+          >
+            评论
+          </div>
+        </div>
+        <!-- 二级评论展示内容 -->
+        <div class="commTow" v-for="val in item.children" :key="val.id">
+          <div class="commTow_row">
+            <p>{{ val.content }}</p>
+            <div class="right_bottom">
+              来自：{{ val.nickName }}&emsp;的评论&emsp;{{ val.createTime }}
+            </div>
+          </div>
         </div>
         <!-- 点击评论出来的文本框 -->
         <div class="commentAdd" v-if="replyInd === index">
@@ -138,7 +153,7 @@ export default {
       let obj = {
         content: this.textareaTow,
         creatorName: this.nameTow,
-        parentId:this.replyId
+        parentId: this.replyId,
       };
       let res = await commentSave(obj);
       if (res.code === 0) {
@@ -189,7 +204,7 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 30px 200px 70px 200px;
+  padding: 120px 200px 70px 200px;
   background: url("../../assets/img/tabBg.png");
   background-size: 100%;
   .top {
@@ -252,7 +267,7 @@ export default {
         .main_right {
           color: #999999;
           cursor: pointer;
-          background: url("../../assets/img/mes.png") no-repeat 16px center;
+          background: url("../../assets/img/mes.png") no-repeat 12px center;
           padding-left: 24px;
           padding-right: 5px;
           text-align: right;
@@ -260,9 +275,13 @@ export default {
           height: 22px;
           &:hover {
             color: #d4a84f;
-            background: url("../../assets/img/mesAc.png") no-repeat 16px center;
+            background: url("../../assets/img/mesAc.png") no-repeat 12px center;
           }
         }
+        .active {
+          color: #d4a84f;
+          background: url("../../assets/img/mesAc.png") no-repeat 12px center;
+        }
       }
       .commTow {
         padding: 10px;