搞搞搞

package.json

@@ -18,6 +18,7 @@
     "install": "^0.13.0",
     "swiper": "^8.4.4",
     "v-viewer": "^1.6.4",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.5.1",
     "vue": "^2.6.14",
     "vuex": "^3.6.2"

src/App.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import '@/assets/style/reset.less'
 
 export default {
   mounted() {

src/api.js

@@ -1,4 +1,10 @@
 import axios from "axios"
+import { goodsData as rawData } from "@/assets/data/data.js"
 
 export default {
+  fetchRelicList(pageNum = 0, pageSize = 20, keyword = '') {
+    return rawData.filter((item) => {
+      return item.name.includes(keyword) || keyword === ''
+    }).slice(pageNum * pageSize, pageNum * pageSize + pageSize)
+  }
 }

src/assets/data/data.js

@@ -0,0 +1,184 @@
+// https://wcbwg.4dage.com/gzswc/pc/goodsData/${id}-wenwu.png
+
+export const goodsData = [
+  {
+    id: 1,
+    name: "蒜头口铜壶",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高38×长23.3×宽23.3（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc1",
+  },
+  {
+    id: 2,
+    name: "铜钲",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高6×长31.5×宽21（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc2",
+  },
+  {
+    id: 3,
+    name: "提梁带盖铜鼎",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高20.5×长18×宽9.8（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc3",
+  },
+  {
+    id: 4,
+    name: "铜甑",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高17×长16.5×宽16.5（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc4",
+  },
+  {
+    id: 5,
+    name: "穿索钱串",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "暂无尺寸信息",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc5",
+  },
+  {
+    id: 6,
+    name: "绿釉红胎陶壶",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高45×长19×宽27（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc6",
+  },
+  {
+    id: 7,
+    name: "铜钫",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高43.5×长21.5×宽11.4（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc7",
+  },
+  {
+    id: 8,
+    name: "双鱼纹铜洗",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高14.3×长30.3×宽30.3（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc8",
+  },
+  {
+    id: 9,
+    name: "铜釜",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高13×长28×宽28（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc9",
+  },
+  {
+    id: 10,
+    name: "单鱼纹铜洗",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高16.5×长34.5×宽34.5（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc10",
+  },
+  {
+    id: 11,
+    name: "双耳铜壶",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高18.5×长10.1×宽10.1（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc11",
+  },
+  {
+    id: 12,
+    name: "蒜头口铜扁壶",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高29×长36.5×宽6.3（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc12",
+  },
+  {
+    id: 13,
+    name: "盘口折腹陶罐",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高16×长21×宽21（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc13",
+  },
+  {
+    id: 14,
+    name: "陶博山炉盖",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高11×长14.3×宽14.3（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc14",
+  },
+  {
+    id: 15,
+    name: "陶辟邪摇钱树座",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高39.5×长42×宽28.5（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc15",
+  },
+  {
+    id: 16,
+    name: "陶厕模型",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高16.3×长30×宽21（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc16",
+  },
+  {
+    id: 17,
+    name: "陶屋模型",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高34×长33×宽16.7（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc17",
+  },
+  {
+    id: 18,
+    name: "蒜头口铜壶 · 短颈",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高15.9×长21×宽21（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc18",
+  },
+  {
+    id: 19,
+    name: "提梁铜壶",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高27.5×长20.8×宽20.8（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc19",
+  },
+  {
+    id: 20,
+    name: "陶摇钱树座",
+    age: "暂无年代信息",
+    sort: "暂无类别信息",
+    size: "高14.5×长15×宽6.6（厘米）",
+    intro: "暂无简介",
+    link: "https://4dscene.4dage.com/culturalrelics/WCBWG/Model.html?m=wc20",
+  },
+]

src/assets/style/my-reset.css

@@ -57,4 +57,13 @@ input {
 
 td {
   vertical-align: inherit;
+}
+
+body {
+  ::-webkit-scrollbar {
+    width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #A33328;
+  }
 }

src/assets/style/reset.css

@@ -1,295 +0,0 @@
-/* reset */
-html,
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-div,
-dl,
-dt,
-dd,
-ul,
-ol,
-li,
-p,
-blockquote,
-pre,
-hr,
-figure,
-table,
-caption,
-th,
-td,
-form,
-fieldset,
-legend,
-input,
-button,
-textarea,
-menu {
-  margin: 0;
-  padding: 0;
-}
-header,
-footer,
-section,
-article,
-aside,
-nav,
-hgroup,
-address,
-figure,
-figcaption,
-menu,
-details {
-  display: block;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-caption,
-th {
-  text-align: left;
-  font-weight: normal;
-}
-html,
-body,
-fieldset,
-img,
-iframe,
-abbr {
-  border: 0;
-}
-i,
-cite,
-em,
-var,
-address,
-dfn {
-  font-style: normal;
-}
-[hidefocus],
-summary {
-  outline: 0;
-}
-li {
-  list-style: none;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-small {
-  font-size: 100%;
-}
-sup,
-sub {
-  font-size: 83%;
-}
-pre,
-code,
-kbd,
-samp {
-  font-family: inherit;
-}
-q:before,
-q:after {
-  content: none;
-}
-textarea {
-  overflow: auto;
-  resize: none;
-}
-label,
-summary {
-  cursor: default;
-}
-a,
-button {
-  cursor: pointer;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-em,
-strong,
-b {
-  font-weight: bold;
-}
-del,
-ins,
-u,
-s,
-a,
-a:hover {
-  text-decoration: none;
-}
-body,
-textarea,
-input,
-button,
-select,
-keygen,
-legend {
-  font: 14px/1.14;
-  outline: 0;
-}
-body {
-  background: #fff;
-}
-* {
-  box-sizing: border-box;
-}
-a {
-  text-decoration: none;
-}
-::-webkit-scrollbar {
-  width: 2px;
-  height: 8px;
-}
-::-webkit-scrollbar-thumb {
-  height: 50px;
-  background-color: #ddd;
-  -webkit-border-radius: 4px;
-  outline: 2px solid #fff;
-  outline-offset: -2px;
-}
-::-webkit-scrollbar-thumb:hover {
-  height: 50px;
-  background-color: #9f9f9f;
-  -webkit-border-radius: 4px;
-}
-.el-pagination button:disabled {
-  background-color: transparent;
-}
-.el-pagination .btn-next,
-.el-pagination .btn-prev {
-  background-color: transparent;
-}
-.el-dialog,
-.el-pager li {
-  background-color: transparent;
-}
-.el-pagination {
-  color: #f0af7c;
-}
-.el-pager li.active {
-  color: black;
-}
-.el-pager li:hover {
-  color: black;
-}
-.el-pagination .btn-next,
-.el-pagination .btn-prev {
-  color: #f0af7c;
-}
-.el-pagination button:hover {
-  color: black;
-}
-.el-textarea__inner {
-  background-color: rgba(237, 211, 176, 0.3);
-  color: #f0af7c;
-  border: none;
-}
-.el-textarea__inner::-webkit-input-placeholder {
-  color: #EDD3B0;
-}
-.el-radio {
-  color: #f0af7c;
-}
-.el-radio__input.is-checked + .el-radio__label {
-  color: #f0af7c;
-}
-.el-radio__inner {
-  width: 24px;
-  height: 24px;
-}
-.el-radio__input.is-checked .el-radio__inner {
-  border-color: red;
-  background: #f0af7c;
-}
-.el-radio__inner:hover {
-  border-color: red;
-}
-.el-radio__input.is-checked .el-radio__inner::after {
-  transform: translate(-50%, -50%) scale(0);
-}
-.search .el-input__inner {
-  width: 340px;
-  height: 36px;
-  background-color: transparent;
-  color: #774926;
-  border: 1px solid #774926;
-  border-radius: 18px;
-}
-.el-input__inner {
-  background-color: transparent;
-  color: #774926;
-  border: 1px solid #774926;
-  border-radius: 13px;
-}
-.el-input.is-active .el-input__inner,
-.el-input__inner:focus {
-  border: 1px solid #cc946d;
-}
-.el-pagination__editor.el-input {
-  width: 28px;
-  height: 28px;
-  margin-right: 4px;
-}
-.el-pagination__editor.el-input .el-input__inner {
-  width: 26px;
-  height: 26px;
-}
-input::-webkit-input-placeholder {
-  color: #cc946d !important;
-}
-.el-select-dropdown__item.hover,
-.el-select-dropdown__item:hover {
-  background-color: rgba(237, 211, 176, 0.3);
-}
-.el-select-dropdown__item.selected {
-  color: #f0af7c;
-}
-/* 分页 */
-.el-pagination {
-  display: flex;
-  align-items: center;
-}
-.el-pager li {
-  font-weight: 400;
-  min-width: 24px;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  margin: 0 8px;
-  border: none;
-  background-color: transparent;
-  border-radius: 50%;
-}
-.el-pager li:hover {
-  color: #CC946D;
-}
-.el-pager li.active {
-  width: 26px;
-  height: 26px;
-  background-color: #CC946D;
-  border-radius: 50%;
-  color: #fff;
-}
-.el-pager li.active + li {
-  border: none;
-  background-color: transparent;
-}
-.el-pagination button:hover {
-  color: #CC946D;
-}

src/assets/style/reset.less

@@ -1,163 +0,0 @@
-/* reset */
-html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
-header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
-table{border-collapse:collapse;border-spacing:0;}
-caption,th{text-align:left;font-weight:normal;}
-html,body,fieldset,img,iframe,abbr{border:0;}
-i,cite,em,var,address,dfn{font-style:normal;}
-[hidefocus],summary{outline:0;}
-li{list-style:none;}
-h1,h2,h3,h4,h5,h6,small{font-size:100%;}
-sup,sub{font-size:83%;}
-pre,code,kbd,samp{font-family:inherit;}
-q:before,q:after{content:none;}
-textarea{overflow:auto;resize:none;}
-label,summary{cursor:default;}
-a,button{cursor:pointer;}
-h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
-del,ins,u,s,a,a:hover{text-decoration:none;}
-body,textarea,input,button,select,keygen,legend{font:14px/1.14;outline:0;}
-body{background:#fff;}
-*{box-sizing: border-box}
-a{text-decoration: none;}
-
-
-::-webkit-scrollbar {
-  width: 2px;
-  height: 8px;
-}
-
-::-webkit-scrollbar-thumb {
-  height: 50px;
-  background-color: #ddd;
-  -webkit-border-radius: 4px;
-  outline: 2px solid #fff;
-  outline-offset: -2px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  height: 50px;
-  background-color: #9f9f9f;
-  -webkit-border-radius: 4px;
-}
-.el-pagination button:disabled{
-  background-color: transparent;
-}
-.el-pagination .btn-next, .el-pagination .btn-prev{
-  background-color: transparent;
-}
-.el-dialog, .el-pager li{
-  background-color: transparent;
-}
-.el-pagination{
-  color: #f0af7c;
-}
-.el-pager li.active {
-  color:black;
-}
-.el-pager li:hover{
-  color:black;
-}
-.el-pagination .btn-next, .el-pagination .btn-prev{
-  color: #f0af7c;
-}
-.el-pagination button:hover{
-  color: black;
-}
-.el-textarea__inner{
-  background-color: rgba(237, 211, 176, .3);
-  color: #f0af7c;
-  border:none;
-}
-.el-textarea__inner::-webkit-input-placeholder{
-  color: #EDD3B0;
-}
-.el-radio {
-  color: #f0af7c;
-}
-.el-radio__input.is-checked+.el-radio__label{
-  color: #f0af7c;
-}
-.el-radio__inner{
-  width: 24px;
-  height: 24px;
-}
-.el-radio__input.is-checked .el-radio__inner{
-  border-color: red;
-  background: #f0af7c;
-}
-.el-radio__inner:hover{
-  border-color: red;
-}
-.el-radio__input.is-checked .el-radio__inner::after{
-  transform: translate(-50%,-50%) scale(0);
-}
-.search .el-input__inner{
-  width: 340px;
-  height: 36px;
-  background-color: transparent;
-  color: #774926;
-  border:1px solid #774926;
-  border-radius: 18px;
-}
-.el-input__inner{
-  background-color: transparent;
-  color: #774926;
-  border:1px solid #774926;
-  border-radius: 13px;
-}
-.el-input.is-active .el-input__inner, .el-input__inner:focus{
-  border:1px solid #cc946d;
-}
-.el-pagination__editor.el-input{
-  width: 28px;
-  height: 28px;
-  margin-right: 4px;
-}
-.el-pagination__editor.el-input .el-input__inner{
-  width: 26px;
-  height: 26px;
-}
-input::-webkit-input-placeholder {
-  color: #cc946d !important;
-}
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-  background-color: rgba(237, 211, 176, .3);;
-}
-.el-select-dropdown__item.selected{
-  color: #f0af7c;
-}
-
-/* 分页 */
-.el-pagination{
-  display: flex;
-  align-items: center;
-}
-.el-pager li{
-  font-weight: 400;
-  min-width: 24px;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  margin: 0 8px;
-  border: none;
-  background-color: transparent;
-  border-radius: 50%;
-}
-.el-pager li:hover{
-  color: #CC946D;
-}
-.el-pager li.active{
-  width: 26px;
-  height: 26px;
-  background-color: #CC946D;
-  border-radius: 50%;
-  color: #fff;
-}
-.el-pager li.active+li{
-  border: none;
-  background-color: transparent;
-}
-.el-pagination button:hover{
-  color: #CC946D;
-}

src/main.js

@@ -1,12 +1,13 @@
-import Vue from 'vue'
-import ElementUI from 'element-ui'
+import '@/mixins'
 import 'element-ui/lib/theme-chalk/index.css'
+import 'viewerjs/dist/viewer.css'
 import App from './App.vue'
-import '@/mixins'
+import clickOutside from "@/directives/v-click-outside.js"
+import ElementUI from 'element-ui'
 import router from './router'
-import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
-import clickOutside from "@/directives/v-click-outside.js"
+import Vue from 'vue'
+import VueLazyload from 'vue-lazyload'
 
 import "@/assets/style/my-reset.css"
 
@@ -24,8 +25,9 @@ Vue.use(Viewer, {
 
 
 Vue.config.productionTip = false
-Vue.use(ElementUI)
 Vue.use(clickOutside)
+Vue.use(ElementUI)
+Vue.use(VueLazyload)
 
 new Vue({
   router,

src/pages/Home.vue

@@ -13,13 +13,11 @@
     <div id="player" />
 
     <!-- <MiniMapDecorator
-      v-show="!isShowCover"
       class="mini-map-decorator"
     /> -->
 
     <!-- 底部菜单 -->
     <div
-      v-show="!isShowCover"
       id="gui-parent"
     >
       <!-- 进度条加载 -->
@@ -88,37 +86,7 @@
       <v-other />
     </div>
 
-    <transition name="fade-out">
-      <div
-        v-if="isShowCover"
-        class="cover-layer"
-      >
-        <img
-          class="cover"
-          src="@/assets/images/cover.jpg"
-          alt=""
-          draggable="false"
-        >
-        <img
-          class="title"
-          src="@/assets/images/cover-title.png"
-          alt=""
-          draggable="false"
-        >
-        <button
-          class="begin"
-          @click="onClickBegin"
-        >
-          <img
-            class=""
-            src="@/assets/images/begin-explore-btn-bg.png"
-            alt=""
-            draggable="false"
-          >
-          <span>开始探索</span>
-        </button>
-      </div>
-    </transition>
+    <router-view />
   </div>
 </template>
 
@@ -157,7 +125,6 @@ export default {
     return {
       // 控制背景音乐
       isMusicInitiallyPlayed: false,
-      isShowCover: false,
     }
   },
 
@@ -178,11 +145,6 @@ export default {
         }, 1000)
       }
     }
-
-    const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-    if (locationQuerySection.get('show-cover')) {
-      this.isShowCover = true
-    }
   },
 
   methods: {
@@ -191,13 +153,6 @@ export default {
       if (!this.isMusicInitiallyPlayed) window.manage.switchBgmState(true)
       this.isMusicInitiallyPlayed = true
     },
-    onClickBegin() {
-      this.isShowCover = false
-      const locationQuerySection = new URLSearchParams(location.href.split('?')[1])
-      locationQuerySection.delete('show-cover')
-      const newLocation = location.href.split('?')[0] + '?' + locationQuerySection.toString()
-      location.assign(newLocation)
-    }
   },
 }
 </script>
@@ -226,52 +181,6 @@ export default {
 //   }
 // }
 
-.cover-layer {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 9999;
-  > .cover {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  > .title {
-    position: absolute;
-    width: 82.7vw;
-    top: 6.2vh;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  > button.begin {
-    position: absolute;
-    bottom: 10.3vh;
-    left:50%;
-    transform: translateX(-50%);
-    width: 44.5vw;
-    height: 13.3vw;
-    > img {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-    }
-    > span {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 4.3vw;
-      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
-      font-weight: 400;
-      color: #A33328;
-    }
-  }
-}
-
 .hotspot-detail-open {
   .v-menu {
     display: none;

src/router/index.js

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../pages/Home.vue'
+import Cover from '@/views/gui/Cover.vue'
+import RelicsList from '@/views/gui/RelicsList.vue'
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push (location) {
@@ -13,7 +15,19 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    component: Home
+    component: Home,
+    children: [
+      {
+        path: 'cover',
+        name: 'Cover',
+        component: Cover,
+      },
+      {
+        path: 'relics-list',
+        name: 'RelicsList',
+        component: RelicsList,
+      }
+    ]
   }
 ]
 

src/views/gui/Cover.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    class="cover-layer"
+  >
+    <img
+      class="cover"
+      src="@/assets/images/cover.jpg"
+      alt=""
+      draggable="false"
+    >
+    <img
+      class="title"
+      src="@/assets/images/cover-title.png"
+      alt=""
+      draggable="false"
+    >
+    <button
+      class="begin"
+      @click="onClickBegin"
+    >
+      <img
+        class=""
+        src="@/assets/images/begin-explore-btn-bg.png"
+        alt=""
+        draggable="false"
+      >
+      <span>开始探索</span>
+    </button>
+
+    <EntryList
+      v-show="isShowEntryList"
+      @close="closeEntryList"
+    />
+  </div>
+</template>
+
+<script>
+import EntryList from "@/views/gui/EntryList.vue"
+
+export default {
+  components: {
+    EntryList,
+  },
+  data() {
+    return {
+      isShowEntryList: false,
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    onClickBegin() {
+      // this.$router.push({ name: 'Home', query: this.$route.query } )
+      this.isShowEntryList = true
+    },
+    closeEntryList() {
+      this.isShowEntryList = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.cover-layer {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  > .cover {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  > .title {
+    position: absolute;
+    width: 82.7vw;
+    top: 6.9vh;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  > button.begin {
+    position: absolute;
+    bottom: 11.5vh;
+    left:50%;
+    transform: translateX(-50%);
+    width: 44.5vw;
+    height: 13.3vw;
+    > img {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+    }
+    > span {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 4.3vw;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #A33328;
+    }
+  }
+}
+</style>

src/views/gui/EntryList.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="entry-list">
+    <ul>
+      <li
+        v-for="(item, index) in entryList"
+        :key="index"
+        @click="onClickEntry(item)"
+      >
+        <img
+          class=""
+          :src="item.bgImgUrl"
+          alt=""
+          draggable="false"
+        >
+        <span>{{ item.title }}</span>
+      </li>
+    </ul>
+    <button
+      class="close"
+      @click="onClickClose"
+    >
+      <img
+        class=""
+        src="@/assets/images/close.png"
+        alt=""
+        draggable="false"
+      >
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      entryList: [
+        {
+          bgImgUrl: require('@/assets/images/entries/wen-wu-ting.png'),
+          title: '文物厅',
+          sceneCode: '1307',
+        },
+        {
+          bgImgUrl: require('@/assets/images/entries/shu-fa-ting.png'),
+          title: '书法厅',
+          sceneCode: '1307',
+        },
+        {
+          bgImgUrl: require('@/assets/images/entries/ge-lao-zu.png'),
+          title: '仡佬族文化厅',
+          sceneCode: '1307',
+        },
+        {
+          bgImgUrl: require('@/assets/images/entries/30-zhou-nian.png'),
+          title: '30周年成就展',
+          sceneCode: '1307',
+        },
+        {
+          bgImgUrl: require('@/assets/images/entries/di-biao-he-ying.png'),
+          title: '地标合影',
+          routeName: 'groupPhoto',
+        },
+        {
+          bgImgUrl: require('@/assets/images/entries/wen-wu-shang-xi.png'),
+          title: '文物赏析',
+          routeName: 'RelicsList',
+        },
+      ]
+    }
+  },
+  methods: {
+    onClickClose() {
+      this.$emit('close')
+    },
+    onClickEntry(entry) {
+      if (entry.sceneCode) {
+        this.$router.push({
+          name: 'Home',
+          query: {
+            ...this.$route.query,
+            ...{
+              m: entry.sceneCode,
+            }
+          }
+        })
+        location.reload()
+      } else {
+        this.$router.push({
+          name: entry.routeName
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.entry-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(248, 241, 235, 0.90);
+  backdrop-filter: blur(1.8vw);
+  > ul {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding-top: 10.6vw;
+    padding-left: 4.9vw;
+    overflow: auto;
+    > li {
+      margin-right: 3.2vw;
+      margin-bottom: 5.3vw;
+      display: inline-flex;
+      flex-direction: column;
+      align-items: center;
+      > img {
+        width: 43.6vw;
+        height: 32vw;
+        margin-bottom: 2.7vw;
+      }
+      > span {
+        font-size: 3.6vw;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #666666;
+      }
+    }
+  }
+  > button.close {
+    position: fixed;
+    width: 13.3vw;
+    height: 13.3vw;
+    left: 50%;
+    bottom: 5vh;
+    transform: translateX(-50%);
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/gui/ModeSelectorMobile.vue

@@ -1,113 +0,0 @@
-<template>
-  <div class="mode-selector-mobile">
-    <button
-      @click="onClickQuanjingmanyou"
-    >
-      <img
-        class="manyou"
-        src="@/assets/images/quanjingmanyou-sub.png"
-        alt=""
-        draggable="false"
-      >
-      <span>漫游</span>
-    </button>
-    <button
-      @click="onClickDingbufushi"
-    >
-      <img
-        class="pingmian"
-        src="@/assets/images/dingbufushi-mobile.png"
-        alt=""
-        draggable="false"
-      >
-      <span>平面</span>
-    </button>
-    <button
-      @click="onClickMinimoxing"
-    >
-      <img
-        class="sanwei"
-        src="@/assets/images/minimoxing-mobile.png"
-        alt=""
-        draggable="false"
-      >
-      <span>三维</span>
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  methods: {
-    onClickQuanjingmanyou(e) {
-      document.onMousedownInside(e)
-    },
-    onClickMinimoxing(e) {
-      document.onClickDollHouse(e)
-    },
-    onClickDingbufushi(e) {
-      document.onClickFloorPlain(e)
-    },
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.mode-selector-mobile {
-  padding: 3px;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 5px 5px 5px 5px;
-  display: flex;
-  align-items: center;
-  > button {
-    width: 75px;
-    height: 37px;
-    // background: rgba(161,14,12,0.7);
-    border-radius: 2px 2px 2px 2px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    > img.manyou {
-      width: 8px;
-      height: 20px;
-      margin-right: 6px;
-    }
-    > img.pingmian {
-      width: 19px;
-      height: 19px;
-      margin-right: 4px;
-    }
-    > img.sanwei {
-      width: 23px;
-      height: 22px;
-      margin-right: 4px;
-    }
-    > span {
-      font-size: 14px;
-      color: #FFF1BD;
-    }
-  }
-}
-
-.mobile[view-mode='panorama'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(1) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-.mobile[view-mode='floor-plain'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(2) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-.mobile[view-mode='doll-house'] {
-  .mode-selector-mobile {
-    > button:nth-of-type(3) {
-      background: rgba(161,14,12,0.7);
-    }
-  }
-}
-</style>

src/views/gui/RelicsList.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="relics-list">
+    <ul
+      v-infinite-scroll="fetchMore3d"
+      infinite-scroll-disabled="disableInfinite3d"
+      infinite-scroll-distance="1"
+      class="relics-list-3d"
+    >
+      <li
+        v-for="(item, index) in list3d"
+        :key="index"
+      >
+        <div class="img-wrap">
+          <img
+            v-lazy="`https://wcbwg.4dage.com/gzswc/pc/goodsData/${item.id}-wenwu.png`"
+            alt=""
+            draggable="false"
+          >
+        </div>
+        <div class="img-title">
+          <img
+            class=""
+            src="@/assets/images/item-icon.png"
+            alt=""
+            draggable="false"
+          >
+          {{ item.name }}
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      disableInfinite3d: false,
+      list3d: [],
+    }
+  },
+  mounted() {
+    this.disableInfinite3d = true
+    this.list3d = []
+    setTimeout(() => {
+      this.fetchMore3d()
+      setTimeout(() => {
+        this.disableInfinite3d = false
+      }, 0)
+    }, 0)
+  },
+  methods: {
+    fetchMore3d: globalUtils.debounce(function() {
+      if (this.list3d.length % 20 !== 0 ) {
+        return
+      }
+      const res = globalApi.fetchRelicList(this.list3d.length / 20)
+      this.list3d = this.list3d.concat(res)
+    }, 333),
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.relics-list {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 9999;
+  background-image: url(@/assets/images/bg-paper.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  ul.relics-list-3d {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    margin-top: 7vw;
+    padding-bottom: 7vw;
+    padding-left: 4.4vw;
+    > li {
+      display: inline-block;
+      margin-right: 2.9vw;
+      margin-bottom: 5.3vw;
+      width: 44.1vw;
+      height: 62.2vw;
+      background: #FFFFFF;
+      box-shadow: 0 0 0.9vw 0 rgba(0, 0, 0, 0.25);
+      border-radius: 1.8vw;
+      overflow: hidden;
+      .img-wrap {
+        padding: 8vw;
+        background: linear-gradient(180deg, #4E4141 0%, #B4ACAC 100%);
+        width: 100%;
+        height: 53.3vw;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+      .img-title {
+        margin-left: 2.1vw;
+        margin-top: 2.5vw;
+        overflow: hidden;
+        white-space: pre;
+        text-overflow: ellipsis;
+        font-size: 3.2vw;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #333333;
+        > img {
+          width: 2.5vw;
+          height: 2.5vw;
+          margin-right: 1.1vw;
+          vertical-align: baseline;
+        }
+      }
+    }
+  }
+}
+</style>

yarn.lock

@@ -5965,6 +5965,11 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.npmmirror.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-lazyload@^1.3.3:
+  version "1.3.5"
+  resolved "https://registry.npmmirror.com/vue-lazyload/-/vue-lazyload-1.3.5.tgz#eb36d299a519167d987fdf0ebfdc9c6dd1bf1ef0"
+  integrity sha512-SCO/LWgCCbjaregHO4wg2buzITBdPBZRlIS104vERGpT88uxXsK26veuzZpgGAXMR8WpkaR+JDqz80OedpaLiA==
+
 vue-loader@^17.0.0:
   version "17.0.1"
   resolved "https://registry.npmmirror.com/vue-loader/-/vue-loader-17.0.1.tgz"