新增一种访问模式：只能访问文物鉴赏模块

.env.dev

@@ -6,4 +6,5 @@ VUE_APP_CDN_PATH=${VUE_APP_ORIGIN}/YHT/goodsData/
 VUE_APP_CDN_PATH_QJKK_SOME_DATA=${VUE_APP_ORIGIN}/YHT/Qjkk/local/WK1578926366500417536/someData.json
 VUE_APP_CDN_PATH_QJKK_DESC=${VUE_APP_ORIGIN}/YHT/Qjkk/data/
 VUE_APP_MOBILE_URL=${VUE_APP_ORIGIN}/YHTM/index.html
-VUE_APP_PC_URL=${VUE_APP_ORIGIN}/YHT/index.html
+VUE_APP_PC_URL=${VUE_APP_ORIGIN}/YHT/index.html
+VUE_APP_PC_URL_ONLY_RELICS=${VUE_APP_ORIGIN}/YHT/index.html#/lookGoods

.env.test

@@ -6,4 +6,5 @@ VUE_APP_CDN_PATH=${VUE_APP_ORIGIN}/YHT/goodsData/
 VUE_APP_CDN_PATH_QJKK_SOME_DATA=${VUE_APP_ORIGIN}/YHT/Qjkk/local/WK1578926366500417536/someData.json
 VUE_APP_CDN_PATH_QJKK_DESC=${VUE_APP_ORIGIN}/YHT/Qjkk/data/
 VUE_APP_MOBILE_URL=${VUE_APP_ORIGIN}/YHTM/index.html
-VUE_APP_PC_URL=${VUE_APP_ORIGIN}/YHT/index.html
+VUE_APP_PC_URL=${VUE_APP_ORIGIN}/YHT/index.html
+VUE_APP_PC_URL_ONLY_RELICS=${VUE_APP_ORIGIN}/YHT/index.html#/lookGoods

src/main.js

@@ -32,7 +32,11 @@ if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
   Vue.prototype.$isSafari = true
 }
 if (uaInfo.device.type !== 'mobile' && window.innerWidth > window.innerHeight) {
-  location.replace(process.env.VUE_APP_PC_URL)
+  if (['#/lookGoods', '#/relics-appr-no-exit', '#/relic-detail'].includes(location.hash)) {
+    location.replace(process.env.VUE_APP_PC_URL_ONLY_RELICS)
+  } else {
+    location.replace(process.env.VUE_APP_PC_URL)
+  }
 }
 
 Vue.prototype.$origin = process.env.VUE_APP_ORIGIN

src/router/index.js

@@ -9,6 +9,7 @@ import ObliqueView from "@/views/ObliqueView.vue"
 import PanoView from "@/views/PanoView.vue"
 import PanoList from "@/components/PanoList.vue"
 import TestView from "@/components/TestView.vue"
+import RelicsApprCover from "@/views/RelicsApprCover.vue"
 
 Vue.use(VueRouter)
 
@@ -125,6 +126,7 @@ const routes = [
     meta: {
       isShowBottomBar: true,
       canFullScreen: false,
+      detailCompNameAffix: '',
     },
     children: [
       {
@@ -147,6 +149,38 @@ const routes = [
     },
   },
   {
+    path: '/lookGoods',
+    name: 'lookGoods',
+    component: RelicsApprCover,
+    meta: {
+      isShowBottomBar: false,
+      canFullScreen: false,
+    },
+    children: [
+    ],
+  },
+  {
+    path: '/relics-appr-no-exit',
+    name: 'RelicsApprNoExit',
+    component: RelicsAppr,
+    meta: {
+      isShowBottomBar: false,
+      canFullScreen: false,
+      detailCompNameAffix: 'NoExit',
+    },
+    children: [
+      {
+        path: 'relic-detail',
+        name: 'RelicDetailNoExit',
+        component: RelicDetail,
+        meta: {
+          isShowBottomBar: false,
+          canFullScreen: false,
+        }
+      },
+    ],
+  },
+  {
     path: '/about',
     name: 'about',
     // route level code-splitting
@@ -162,14 +196,14 @@ const router = new VueRouter({
   routes
 })
 
-router.beforeEach((to, from, next) => {
-  console.log('beforeEach: ', to, from, next)
-  // 强制每次都从首页进入
-  if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView' && to.name !== 'SwkkView') {
-    next('/')
-  } else {
-    next()
-  }
-})
+// router.beforeEach((to, from, next) => {
+//   console.log('beforeEach: ', to, from, next)
+//   // 强制每次都从首页进入
+//   if (process.env.NODE_ENV === 'production' && !from.name && to.name !== 'HomeView' && to.name !== 'SwkkView') {
+//     next('/')
+//   } else {
+//     next()
+//   }
+// })
 
 export default router

src/views/RelicsAppr.vue

@@ -1,5 +1,10 @@
 <template>
-  <div class="relics-appr">
+  <div
+    class="relics-appr"
+    :style="{
+      paddingBottom: $route.meta.isShowBottomBar ? '5rem' : '1.67rem',
+    }"
+  >
     <div
       class="top-bar"
       :style="{
@@ -112,7 +117,7 @@
         :relic-image="`${$cdnPath}3D/${item.bs}.png?x-oss-process=image/resize,p_10`"
         :relic-title="item.name"
         class="relic-item"
-        @click="$router.push({ name: 'RelicDetail' , query: {...item, ...{dimNumber: 3}} })"
+        @click="$router.push({ name: 'RelicDetail' + $route.meta.detailCompNameAffix, query: {...item, ...{dimNumber: 3}} })"
       />
     </div>
 
@@ -285,7 +290,7 @@ export default {
       this.isShowSelections = false
     },
     onClick2dItem(item) {
-      this.$router.push({ name: 'RelicDetail', query: { ...item, ...{ dimNumber: 2 } } })
+      this.$router.push({ name: 'RelicDetail' + this.$route.meta.detailCompNameAffix, query: { ...item, ...{ dimNumber: 2 } } })
     },
     fetchMore3d: globalUtils.debounce(function() {
       console.log('fetchMore3d')
@@ -346,7 +351,6 @@ export default {
   padding-top: 9rem;
   padding-left: 1.67rem;
   padding-right: 1.67rem;
-  padding-bottom: 5rem;
   overflow: auto;
   .top-bar {
     position: fixed;

src/views/RelicsApprCover.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="relics-appr-cover">
+    <h1>雨花台烈士纪念馆</h1>
+    <h2>文物赏析</h2>
+    <router-link
+      class="router-link"
+      :to="{name: 'RelicsApprNoExit'}"
+    >
+      <img
+        src="@/assets/images/button-to-relics.png"
+        alt="文物赏析"
+        draggable="false"
+      >
+      <span>文物赏析</span>
+    </router-link>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.relics-appr-cover {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-image: url(@/assets/images/relics-appr-cover-bg.png);
+  background-size: cover;
+  background-position: center;
+  > h1 {
+    position: absolute;
+    left: 0;
+    top: 5.2%;
+    width: 100%;
+    font-size: 2.67rem;
+    font-weight: bold;
+    color: #930909;
+    line-height: 3.13rem;
+    letter-spacing: 1.2rem;
+    text-indent: 1.2rem;
+    text-align: center;
+  }
+  > h2 {
+    position: absolute;
+    top: 11%;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 23.87rem;
+    height: 6.67rem;
+    background-image: url(@/assets/images/relics-appr-cover-title-bg.png);
+    background-size: cover;
+    background-position: center;
+    text-align: center;
+    font-size: 3.08rem;
+    font-weight: bold;
+    color: #EFE6D8;
+    line-height: 6.67rem;
+    letter-spacing: 2.6rem;
+    text-indent: 1.9rem;
+    white-space: pre;
+  }
+  > .router-link {
+    position: absolute;
+    left: 50%;
+    bottom: 8.9%;
+    transform: translateX(-50%);
+    width: 21.67rem;
+    height: 6.25rem;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+    > span {
+      position: absolute;
+      top: 50%;
+      left: 8.46rem;
+      transform: translateY(-50%);
+      color: #fff;
+      font-weight: bold;
+      font-size: 1.83rem;
+    }
+  }
+}
+</style>