feat: 全景首页重构

packages/qjkankan-view/.env.testdev

@@ -1,13 +1,13 @@
 VUE_APP_STATIC_DIR=showviewer
-# VUE_APP_CDN=https://ossxiaoan.4dage.com
-VUE_APP_CDN=https://4dkk.4dage.com
-VUE_APP_PROXY_URL_ROOT='https://www.4dkankan.com'
-VUE_APP_RESOURCE_URL='https://www.4dkankan.com/panorama/'
-VUE_APP_PROXY_URL='https://www.4dkankan.com/qjkankan/'
+VUE_APP_CDN=https://ossxiaoan.4dage.com
+# VUE_APP_CDN=https://4dkk.4dage.com
+VUE_APP_PROXY_URL_ROOT='https://test.4dkankan.com'
+VUE_APP_RESOURCE_URL='https://test.4dkankan.com/panorama/'
+VUE_APP_PROXY_URL='https://test.4dkankan.com/qjkankan/'
 VUE_APP_URL_FILL=
 
 # 接口请求地址
-VUE_APP_APIS_URL=https://www.4dkankan.com/
+VUE_APP_APIS_URL=https://test.4dkankan.com/
 VUE_APP_DEBBUG_FLAG=0516-03
 VUE_APP_DEBBUG_NOTIFY=0
 VUE_APP_DEBBUG_V4=1

packages/qjkankan-view/src/components/UIGather/control.vue

@@ -6,7 +6,7 @@
       v-tooltip="customLink.name"
       v-if="customLink && customLink.isShow"
     >
-      <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
+      <img :src="require(`@/assets/images/icon2/link@2x.png`)" alt="" />
     </li>
 
     <!-- 联系电话 -->
@@ -15,7 +15,7 @@
       v-tooltip="customTelephone.name"
       v-if="customTelephone && customTelephone.isShow"
     >
-      <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
+      <img :src="require(`@/assets/images/icon2/telephone@2x.png`)" alt="" />
     </li>
 
     <!-- 简介 -->
@@ -24,7 +24,7 @@
       v-tooltip="$t('menu.introduce')"
       v-if="metadata.description"
     >
-      <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
+      <img :src="require(`@/assets/images/icon2/text@2x.png`)" alt="" />
     </li>
 
     <!-- 背景音乐 -->
@@ -35,7 +35,7 @@
     >
       <img
         :src="
-          require(`@/assets/images/icon/${
+          require(`@/assets/images/icon2/${
             (isPlayNormalBGM || isPlayV4BGM) && isCurrentPlaying
               ? 'music@2x.png'
               : 'music_disabled@2x.png'
@@ -49,11 +49,11 @@
     <li
       @click="onIsCommentary"
       v-tooltip="$t('menu.commentary')"
-      v-if="isHasExplanationBGM"
+      v-if="!isHasExplanationBGM"
     >
       <img
         :src="
-          require(`@/assets/images/icon/${
+          require(`@/assets/images/icon2/${
             isPlayExplanationBGM && isCurrentPlaying
               ? 'commentary@2x.png'
               : 'commentary_disabled@2x.png'
@@ -70,7 +70,7 @@
     >
       <img
         :src="
-          require(`@/assets/images/icon/${
+          require(`@/assets/images/icon2/${
             isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'
           }`)
         "
@@ -79,16 +79,16 @@
     </li>
 
     <li @click="onVR" v-tooltip="'VR'" v-if="currentScene.type != '4dkk'">
-      <img :src="require(`@/assets/images/icon/vr@2x.png`)" alt="" />
+      <img :src="require(`@/assets/images/icon2/vr@2x.png`)" alt="" />
     </li>
 
     <li @click="onShare" v-tooltip="$t('menu.share')">
-      <img :src="require(`@/assets/images/icon/share@2x.png`)" alt="" />
+      <img :src="require(`@/assets/images/icon2/share@2x.png`)" alt="" />
     </li>
 
     <li @click="onFullScreen" v-tooltip="$t('menu.fullScreen')">
       <img
-        :src="require(`@/assets/images/icon/${'fullscreen@2x.png'}`)"
+        :src="require(`@/assets/images/icon2/${'fullscreen@2x.png'}`)"
         alt=""
       />
     </li>
@@ -340,14 +340,14 @@ onMounted(() => {
 <style lang="scss" scoped>
 .control {
   position: absolute;
-  right: 20px;
-  bottom: 8px;
+  right: 21px;
+  bottom: 14px;
   display: flex;
   z-index: 9;
 
   > li {
-    width: 26px;
-    height: 26px;
+    width: 24px;
+    height: 24px;
     margin: 0 10px;
     cursor: pointer;
 

packages/qjkankan-view/src/components/UIGather/index.vue

@@ -3,8 +3,8 @@
       <Tips v-show="showControls" />
       <div v-show="showUI">
             <Control v-if="showControls" />
-            <!-- <Menu v-if="fdkkCurrentVersion == 'V4'" /> -->
-            <div @click="onIsShowList" v-if="showControls"
+            <Menu v-if="showControls" />
+            <div @click="onIsShowList" v-if="fdkkCurrentVersion == 'V3'"
                   v-show="!((metadata.catalogRoot && metadata.catalogRoot.length == 1) && scenes.length == 1 && secondaryList.length == 1)"
                   class="v3daolan" :class="{ active: isShowScenesList }">
                   <img :src="require(`@/assets/images/icon/${isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'}`)"
@@ -37,7 +37,7 @@ const scenes = computed(() => store.getters["scene/list"]);
 const secondaryList = computed(() => store.getters["scene/secondaryList"]);
 const showUI = ref(false)
 const showControls = computed(() => {
-      if(currentScene.value.type == 'pano' || fdkkCurrentVersion.value == 'V3') {
+      if(currentScene.value.type == 'pano') {
             return true
       }
 });
@@ -64,7 +64,7 @@ useApp().then((app) => {
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid hsla(0, 0%, 100%, 0.2);
   position: fixed;
-  bottom: 20px;
+  bottom: 2px;
   left: 50%;
   transform: translateX(-50%);
   border-radius: 50%;

packages/qjkankan-view/src/components/UIGather/menu.vue

@@ -14,7 +14,7 @@
     >
       <img
         :src="
-          require(`@/assets/images/icon/${
+          require(`@/assets/images/icon2/${
             isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'
           }`)
         "
@@ -199,8 +199,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 .menu {
   position: absolute;
-  left: 20px;
-  bottom: 8px;
+  left: 21px;
+  bottom: 14px;
   display: flex;
   z-index: 9;
 
@@ -211,8 +211,8 @@ onMounted(() => {
     justify-content: center;
     align-items: center;
     > img {
-      width: 26px;
-      height: 26px;
+      width: 24px;
+      height: 24px;
     }
   }
 
@@ -233,8 +233,8 @@ onMounted(() => {
     align-items: center;
 
     > img {
-      width: 26px;
-      height: 26px;
+      width: 24px;
+      height: 24px;
     }
 
     .jiantou {

packages/qjkankan-view/src/components/UIGather/mobile/control.pano.vue

@@ -1,24 +1,44 @@
 <template>
-  <ul class="control-pano">
+  <ul class="btn-list">
+    <!--菜单-->
+    <li @click="onIsShowList"
+      v-if="
+        !(
+          metadata.catalogRoot &&
+          metadata.catalogRoot.length == 1 &&
+          scenes.length == 1 &&
+          secondaryList.length == 1
+        )
+      ">
+      <img :src="
+          require(`@/assets/images/icon2/${
+            isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'
+          }`)
+        " alt="" />
+      <span>{{ $t('menu.tour') }}</span>
+    </li>
     <!-- 自定义链接 -->
     <li @click="onLink" v-if="customLink && customLink.isShow">
-      <img :src="require(`@/assets/images/icon/link@2x.png`)" alt="" />
+      <img :src="require(`@/assets/images/icon2/link@2x.png`)" alt="" />
+      <span>{{ customLink.name }}</span>
     </li>
 
     <!-- 联系电话 -->
     <li v-if="customTelephone && customTelephone.isShow">
       <a :href="`tel:${customTelephone.value}`">
-        <img :src="require(`@/assets/images/icon/telephone@2x.png`)" alt="" />
+        <img :src="require(`@/assets/images/icon2/telephone@2x.png`)" alt="" />
       </a>
+      <span>{{ customTelephone.name }}</span>
     </li>
 
     <!-- 简介 -->
     <li @click="onIntroduce" v-if="metadata.description">
-      <img :src="require(`@/assets/images/icon/text@2x.png`)" alt="" />
+      <img :src="require(`@/assets/images/icon2/text@2x.png`)" alt="" />
+      <span>{{ $t('menu.introduce') }}</span>
     </li>
 
     <!-- 背景音乐 -->
-    <li @click="onIsBGM" v-if="isHasNormalBGM">
+    <li @click="onIsBGM" v-if="isHasNormalBGM" style="display: none;">
       <img
         :src="
           require(`@/assets/images/icon/${
@@ -32,7 +52,7 @@
     </li>
 
     <!-- 解说音频 -->
-    <li @click="onIsCommentary" v-if="isHasExplanationBGM">
+    <li @click="onIsCommentary" v-if="isHasExplanationBGM" style="display: none;">
       <img
         :src="
           require(`@/assets/images/icon/${
@@ -44,16 +64,9 @@
         alt=""
       />
     </li>
-
-    <li @click="onIsAutoRotate">
-      <img
-        :src="
-          require(`@/assets/images/icon/${
-            isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'
-          }`)
-        "
-        alt=""
-      />
+    <li @click="onShowMore">
+      <img :src="require(`@/assets/images/icon2/more@2x.png`)" alt="" />
+      <span>{{ $t('menu.more') }}</span>
     </li>
   </ul>
 
@@ -61,6 +74,51 @@
     <introduce v-if="showIntroduce" />
     <telephone v-if="showTelephone" />
     <clink v-if="showLink" />
+    <div class="tools-more" @click="showMore = false" v-if="showMore">
+      <div class="list">
+        <div @click="onIsAutoRotate">
+          <img
+            :src="
+              require(`@/assets/images/icon2/${
+                isAutoRotate ? 'rotation@2x.png' : 'rotation_disabled@2x.png'
+              }`)
+            "
+            alt=""
+          />
+          <span>{{ $t('menu.autoRotate') }}</span>
+        </div>
+        <div @click="onVR">
+          <img :src="require(`@/assets/images/icon2/vr@2x.png`)" alt="" />
+          <span>{{ $t('menu.vr') }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="tools-right">
+      <div @click="onIsBGM" v-if="isHasNormalBGM">
+        <img
+          :src="
+            require(`@/assets/images/icon2/${
+              isPlayNormalBGM && isCurrentPlaying
+                ? 'music@2x.png'
+                : 'music_disabled@2x.png'
+            }`)
+          "
+          alt=""
+        />
+      </div>
+      <div @click="onIsCommentary" v-if="isHasExplanationBGM">
+        <img
+          :src="
+            require(`@/assets/images/icon2/${
+              isPlayExplanationBGM && isCurrentPlaying
+                ? 'commentary@2x.png'
+                : 'commentary_disabled@2x.png'
+            }`)
+          "
+          alt=""
+        />
+      </div>
+    </div>
   </teleport>
 </template>
 
@@ -83,10 +141,22 @@ import clink from "./control/link";
 
 const store = useStore();
 
+const showTours = computed(() => store.getters["fdkk/isShowToursList"]);
+
 const metadata = computed(() => store.getters["scene/metadata"]);
 
+const scenes = computed(() => store.getters["scene/list"]);
+
+const secondaryList = computed(() => store.getters["scene/secondaryList"]);
+
+const isShowScenesList = computed(
+  () => store.getters["functions/isShowScenesList"]
+);
+
 const isAutoRotate = computed(() => store.getters["functions/isAutoRotate"]);
 
+const showMore = ref(false);
+
 const showMusicPlaying = ref(false);
 
 const showCommentaryPlaying = ref(false);
@@ -184,30 +254,16 @@ const onShare = () => {
   store.commit("functions/setShareUrl", true);
 };
 
-const staticList = ref([
-  {
-    id: "cruise",
-    name: "巡游开关",
-    icon: "rotation@2x.png",
-    icondisabled: "rotation_disabled@2x.png",
-  },
-  {
-    id: "vr",
-    name: "VR",
-    icon: "vr@2x.png",
-  },
-  {
-    id: "share",
-    name: "分享",
-    icon: "share@2x.png",
-  },
-  {
-    id: "full",
-    name: "全屏",
-    icon: "fullscreen@2x.png",
-    icondisabled: "rotation_disabled@2x.png",
-  },
-]);
+const onIsShowList = (data) => {
+  if (showTours.value) {
+    store.commit("fdkk/setShowToursList", false);
+  }
+  store.commit("functions/setShowScenesList", !isShowScenesList.value);
+};
+
+const onShowMore = () => {
+  showMore.value = true
+};
 
 onMounted(() => {
   let events = [
@@ -252,4 +308,81 @@ onMounted(() => {
     }
   }
 }
+.btn-list {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  li {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    img{
+      width: 24px;
+      height: 24px;
+      object-fit: contain;
+    }
+    span{
+      color:#fff;
+      font-size:12px;
+      text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
+      margin-top: 6px;
+    }
+  }
+}
+.tools-more{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.4);
+  z-index: 999;
+  .list{
+    height: 6rem;
+    background: rgba(27,27,28,0.8);
+    box-shadow: inset 0px 2px 0px 0px rgba(255,255,255,0.1), inset 0px 1px 0px 0px #000000;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    display: flex;
+    >div{
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      margin-top: 10px;
+      margin-left: 26px;
+      img{
+        width: 24px;
+        height: 24px;
+        object-fit: contain;
+      }
+      span{
+        color:#fff;
+        font-size:12px;
+        text-shadow: 0px 0px 4px rgba(0,0,0,0.4);
+        margin-top: 6px;
+      }
+    }
+  }
+}
+.tools-right {
+  position: absolute;
+  right:25PX;
+  top: 40%;
+  z-index: 999;
+  pointer-events: none;
+  div{
+    margin-top: 25px;
+  }
+  img{
+    width: 24px;
+    height: 24px;
+    object-fit: contain;
+    pointer-events: all;
+  }
+}
 </style>

packages/qjkankan-view/src/components/UIGather/mobile/control.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="controlcon">
+  <div :style="{width: currentScene.type == 'pano'?'100%':'auto'}">
     <Pano v-if="currentScene.type == 'pano'" />
-    <Fdkk v-else />
+    <div class="controlcon" v-else>
+      <Fdkk />
+    </div>
   </div>
 </template>
 

packages/qjkankan-view/src/components/UIGather/mobile/index.vue

@@ -4,8 +4,57 @@
   <!-- <Menu /> -->
   <div v-show="showUI && !vrStatus">
     <sceneList />
+    <!-- <div class="btn-list" v-if="currentScene.type == 'pano'">
+      <ul>
+        <li @click="onIsShowList"
+          v-if="
+            !(
+              metadata.catalogRoot &&
+              metadata.catalogRoot.length == 1 &&
+              scenes.length == 1 &&
+              secondaryList.length == 1
+            )
+          ">
+          <img :src="
+              require(`@/assets/images/icon2/${
+                isShowScenesList ? 'function_off@2x.png' : 'function_on@2x.png'
+              }`)
+            " alt="" />
+          <span>{{ $t('menu.tour') }}</span>
+        </li>
+        <li
+          @click="onLink"
+          v-tooltip="customLink.name"
+          v-if="customLink && customLink.isShow"
+        >
+          <img :src="require(`@/assets/images/icon2/link@2x.png`)" alt="" />
+          <span>{{ customLink.name || '自定义' }}</span>
+        </li>
+        <li
+          @click="onTelephone"
+          v-tooltip="customTelephone.name"
+          v-if="customTelephone && customTelephone.isShow"
+        >
+          <img :src="require(`@/assets/images/icon2/telephone@2x.png`)" alt="" />
+          <span>{{ customTelephone.name || '自定义' }}</span>
+        </li>
+        <li
+          @click="onIntroduce"
+          v-if="metadata.description"
+        >
+          <img :src="require(`@/assets/images/icon2/text@2x.png`)" alt="" />
+          <span>{{ $t('menu.introduce') }}</span>
+        </li>
+        <li
+          @click="onIntroduce"
+        >
+          <img :src="require(`@/assets/images/icon2/more@2x.png`)" alt="" />
+          <span>{{ $t('menu.more') }}</span>
+        </li>
+      </ul>
+    </div> -->
     <div class="btn-style" v-if="currentScene.type == 'pano' || fdkkCurrentVersion == 'V3'">
-      <div class="menu-icon">
+      <div class="menu-icon" v-if="fdkkCurrentVersion == 'V3'">
         <div
           @click="onIsShowList"
           v-if="
@@ -29,7 +78,7 @@
       </div>
 
       <Control />
-      <ControlRight />
+      <ControlRight v-if="fdkkCurrentVersion == 'V3'" />
     </div>
   </div>
 </template>

packages/qjkankan-view/src/locales/en.json

@@ -45,7 +45,9 @@
         "dollhouseModel": "3D Model",
         "guide": "Navigation",
         "panorama": "Walkthrough",
-        "tour": "Virtual Tour"
+        "tour": "Virtual Tour",
+        "more": "More",
+        "vr": "VR"
     },
     "share": {
         "wechat": "WeChat",

packages/qjkankan-view/src/locales/zh.json

@@ -45,7 +45,9 @@
         "dollhouseModel": "三维模型",
         "guide": "场景导览",
         "panorama": "漫游",
-        "tour": "导览"
+        "tour": "导览",
+        "more": "更多",
+        "vr": "VR"
     },
     "share": {
         "wechat": "微信",