引入文物数据

src/store/index.js

@@ -1,10 +1,12 @@
 import { createStore } from 'vuex'
+import projectData from '/public/relic-data/data.json'
 
 export default createStore({
   state: {
     panoData: null,
     haveShownStartUp: process.env.VUE_APP_CLI_MODE === 'dev' ? false : false,
     canStart: false,
+    relicDataRaw: projectData['文物信息'],
   },
   getters: {
     catalogTopology: (state) => {
@@ -41,6 +43,14 @@ export default createStore({
       }
       return root
     },
+    relicData: (state) => {
+      return state.relicDataRaw.map((item) => {
+        if (typeof item['图片名'] === 'string') {
+          item['图片名'] = item['图片名'].split('\n')
+        }
+        return item
+      })
+    }
   },
   mutations: {
     setPanoData(state, value) {
@@ -52,6 +62,9 @@ export default createStore({
     setHaveShownStartUp(state, value) {
       state.haveShownStartUp = value
     },
+    setRelicData(state, value) {
+      state.relicData = value
+    }
   },
   actions: {
   },

src/views/RelicList.vue

@@ -35,19 +35,22 @@
         class="content-wrap"
       >
         <div
-          v-for="idx in 10"
+          v-for="(item, idx) in relicData"
           :key="idx"
           class="relic-item"
-          @click="onClickItem()"
+          @click="onClickItem(idx)"
         >
           <img
             class=""
-            src="@/assets/images/camera-btn-1-1-3.png"
+            :src="getRelicThumbUrl(idx)"
             alt=""
             draggable="false"
           >
-          <div class="name">
-            开始发力开始
+          <div
+            class="name"
+            :title="item['名称']"
+          >
+            {{ item['名称'] }}
           </div>
         </div>
       </div>
@@ -80,6 +83,18 @@ const cameraIdx = computed(() => {
   return route.query.cameraIdx
 })
 
+const relicData = computed(() => {
+  return store.getters.relicData
+})
+
+function getRelicThumbUrl(idx) {
+  if (Array.isArray(relicData.value[idx]['图片名']) && relicData.value[idx]['图片名'][0]) {
+    return `${process.env.BASE_URL}relic-data/small-photo/${relicData.value[idx]['图片名'][0]}`
+  } else {
+    return ''
+  }
+}
+
 const listEl = ref(null)
 const { width: listWidth, height: listHeight } = useElementSize(listEl)
 const { hasOperatedThisTime } = useSmoothSwipe({
@@ -244,29 +259,39 @@ function onClickItem(idx) {
       background-repeat: repeat no-repeat;
       background-position: left 44%;
       background-attachment: local;
+      padding-top: calc(50 / @page-height-design-px * 100vh);
       >.relic-item{
-        width: calc(260 / @page-height-design-px * 100vh);
+        flex: 0 0 auto;
+        width: calc(290 / @page-height-design-px * 100vh);
+        height: 80%;
         padding: calc(10 / @page-height-design-px * 100vh);
-        margin-right: calc(130 / @page-height-design-px * 100vh);
+        margin-right: calc(100 / @page-height-design-px * 100vh);
         display: flex;
         flex-direction: column;
+        justify-content: center;
         align-items: center;
         cursor: pointer;
         >img{
+          flex: 0 0 auto;
           width: 100%;
           height: calc(150 / @page-height-design-px * 100vh);
           object-fit: contain;
           margin-bottom: calc(10 / @page-height-design-px * 100vh);
         }
         >.name{
+          text-align: center;
+          flex: 0 0 auto;
+          height: 4em;
+          width: 100%;
           font-size: calc(32 / @page-height-design-px * 100vh);
           font-family: Source Han Serif CN, Source Han Serif CN;
           font-weight: 500;
           color: #281D0C;
           line-height: calc(37 / @page-height-design-px * 100vh);
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 3;
           overflow: hidden;
-          white-space: pre;
-          text-overflow: ellipsis;
         }
       }
     }