文物列表页改版

README.md

@@ -6,15 +6,8 @@
 ## todo
 import ... from '/public/dsflksdfj/...' 这样没意义吧？
 
-内容页人物替换成动图
-
-结尾二维码没有
-
-
-用新版全景
-
-跳转时效果
-
 限制视角
 
-点击全景热点跳转热点详情页功能
+级联菜单恢复
+
+滚动位置恢复

src/store/index.js

@@ -1,6 +1,11 @@
 import { createStore } from 'vuex'
 import projectData from '/public/relic-data/data.json'
 
+for (let index = 0; index < projectData['长轴展示文物清单'].length; index++) {
+  const element = projectData['长轴展示文物清单'][index]
+  element.idx = index
+}
+
 export default createStore({
   state: {
     panoData: null,
@@ -51,6 +56,8 @@ export default createStore({
         if (typeof item['图片名'] === 'string') {
           item['图片名'] = item['图片名'].split('\n')
         }
+        item.sceneIdx = Number(item['镜头ID'].split('-')[0]) - 1
+        item.cameraIdx = Number(item['镜头ID'].split('-')[1]) - 1
         return item
       })
     }

src/views/RelicList.vue

@@ -23,32 +23,56 @@
         class="search"
       />
     </div>
-    <div class="the-list">
+    <div
+      class="the-list"
+      :class="{
+        allScene: cascaderValue[0] === 'all',
+        scene1: cascaderValue[0] === '0',
+        scene2: cascaderValue[0] === '1',
+        scene3: cascaderValue[0] === '2',
+      }"
+    >
       <div
         ref="listEl"
         class="content-wrap"
       >
         <div
+          v-show="cascaderValue[0] !== 'all'"
+          class="first-item"
+          :class="{
+            scene1: cascaderValue[0] === '0',
+            scene2: cascaderValue[0] === '1',
+            scene3: cascaderValue[0] === '2',
+          }"
+        />
+        <div
           v-for="(item, idx) in relicData"
           :key="idx"
           class="relic-item"
           :class="{
-            hide: !(item.isPassedSearch && item.isPassedSelect)
+            isScene1: item.sceneIdx === 0,
+            isScene2: item.sceneIdx === 1,
+            isScene3: item.sceneIdx === 2,
+            isOdd: (idx + 1) % 2 === 0,
+            isEven: (idx + 1) % 2 === 1,
           }"
-          @click="onClickItem(idx)"
+          @click="onClickItem(item.idx)"
         >
-          <img
-            class=""
-            :src="getRelicThumbUrl(idx)"
-            alt=""
-            draggable="false"
-          >
           <div
             class="name"
+            :class="{
+              wide: item['名称'].length > 12
+            }"
             :title="item['名称']"
           >
             {{ item['名称'] }}
           </div>
+          <img
+            class=""
+            :src="getRelicThumbUrl(idx)"
+            alt=""
+            draggable="false"
+          >
         </div>
       </div>
     </div>
@@ -150,39 +174,36 @@ const cameraIdx = computed(() => {
 })
 
 const relicData = computed(() => {
-  return store.getters.relicData.map((item) => {
+  return store.getters.relicData.filter((item) => {
     if (cascaderValue.value[0] === 'all') {
-      item.isPassedSelect = true
+      return true
     } else {
       const selectedSceneIdx = Number(cascaderValue.value[0])
-      const itemSceneIdx = Number(item['镜头ID'].split('-')[0]) - 1
-      if (selectedSceneIdx !== itemSceneIdx) {
-        item.isPassedSelect = false
+      if (selectedSceneIdx !== item.sceneIdx) {
+        return false
       } else {
         if (cascaderValue.value[1] === 'all') {
-          item.isPassedSelect = true
+          return true
         } else {
           const selectedCameraIdx = Number(cascaderValue.value[1])
-          const itemCameraIdx = Number(item['镜头ID'].split('-')[1]) - 1
-          if (selectedCameraIdx === itemCameraIdx) {
-            item.isPassedSelect = true
+          if (selectedCameraIdx === item.cameraIdx) {
+            return true
           } else {
-            item.isPassedSelect = false
+            return false
           }
         }
       }
     }
-
+  }).filter((item) => {
     if (!keyword.value) {
-      item.isPassedSearch = true
+      return true
     } else {
       if (item['名称'].includes(keyword.value)) {
-        item.isPassedSearch = true
+        return true
       } else {
-        item.isPassedSearch = false
+        return false
       }
     }
-    return item
   })
 })
 
@@ -343,73 +364,124 @@ function onClickItem(idx) {
     translate: 0 -50%;
     width: 100%;
     height: calc(650 / @page-height-design-px * 100vh);
-    background-image: url(@/assets/images/relic-list-bg-1.png);
     background-size: auto 100%;
     background-repeat: no-repeat;
     background-position: left center;
-    padding-left: calc(56 / @page-height-design-px * 100vh);
+    padding-left: calc(54 / @page-height-design-px * 100vh);
     box-sizing: border-box;
 
     >.content-wrap {
       &::-webkit-scrollbar {
         height: 0;
       }
-
       box-sizing: border-box;
-      height: 100%;
+      margin-top: calc(27 / @page-height-design-px * 100vh);
+      height: calc(589 / @page-height-design-px * 100vh);
       width: 100%;
       overflow: auto;
       user-select: none;
       display: flex;
       align-items: center;
-      background-image: url(@/assets/images/relic-list-bg-2.png);
-      background-size: auto 92%;
-      background-repeat: repeat no-repeat;
-      background-position: left 44%;
-      background-attachment: local;
-      padding-top: calc(50 / @page-height-design-px * 100vh);
-
+      background: rgba(230,232,224,0.375);
+      >.first-item{
+        flex: 0 0 auto;
+        width: calc(277 / @page-height-design-px * 100vh * 0.83);
+        height: calc(608 / @page-height-design-px * 100vh * 0.83);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+      }
+      >.first-item.scene1{
+        background-image: url(@/assets/images/relic-first-item-bg-1.jpg);
+      }
+      >.first-item.scene2{
+        background-image: url(@/assets/images/relic-first-item-bg-2.jpg);
+      }
+      >.first-item.scene3{
+        background-image: url(@/assets/images/relic-first-item-bg-3.jpg);
+      }
       >.relic-item {
         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(100 / @page-height-design-px * 100vh);
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
+        width: calc(277 / @page-height-design-px * 100vh * 0.83);
+        height: calc(608 / @page-height-design-px * 100vh * 0.83);
         cursor: pointer;
-
-        >img {
-          flex: 0 0 auto;
-          width: 100%;
-          height: calc(290 / @page-height-design-px * 100vh);
-          object-fit: contain;
-          margin-bottom: calc(10 / @page-height-design-px * 100vh);
-        }
-
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        position: relative;
         >.name {
-          text-align: center;
           flex: 0 0 auto;
-          height: 4em;
-          width: 100%;
-          font-size: calc(26 / @page-height-design-px * 100vh);
+          position: absolute;
+          top: calc(15 / @page-height-design-px * 100vh * 0.83);
+          right: calc(30 / @page-height-design-px * 100vh * 0.83);
+          width: calc(56 / @page-height-design-px * 100vh * 0.83);
+          height: calc(313 / @page-height-design-px * 100vh * 0.83);
+          font-size: calc(23 / @page-height-design-px * 100vh * 0.83);
           font-family: Source Han Serif CN, Source Han Serif CN;
-          font-weight: 500;
-          color: #281D0C;
-          line-height: calc(32 / @page-height-design-px * 100vh);
+          font-weight: 800;
+          color: #43310E;
+          line-height: calc(56 / @page-height-design-px * 100vh * 0.83);
           display: -webkit-box;
           -webkit-box-orient: vertical;
-          -webkit-line-clamp: 3;
+          -webkit-line-clamp: 2;
           overflow: hidden;
+          writing-mode: vertical-rl;
+          background-image: url(@/assets/images/relic-item-title-bg.png);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center center;
+          text-align: center;
+          padding-top: calc(10 / @page-height-design-px * 100vh * 0.83);
+          padding-bottom: calc(10 / @page-height-design-px * 100vh * 0.83);
+          z-index: 1;
+        }
+        >.name.wide{
+          width: calc(102 / @page-height-design-px * 100vh * 0.83);
+          height: calc(316 / @page-height-design-px * 100vh * 0.83);
+          line-height: 1.5em;
+          background-image: url(@/assets/images/relic-item-title-bg-wide.png);
+          padding-right: 0.7em;
+        }
+        >img {
+          position: absolute;
+          left: 0;
+          bottom: calc(40 / @page-height-design-px * 100vh * 0.83);
+          width: 100%;
+          height: 40%;
+          object-fit: contain;
         }
       }
-
-      >.relic-item.hide {
-        display: none;
+      >.relic-item.isScene1.isOdd{
+        background-image: url(@/assets/images/relic-item-bg-1-odd.jpg);
+      }
+      >.relic-item.isScene1.isEven{
+        background-image: url(@/assets/images/relic-item-bg-1-even.jpg);
+      }
+      >.relic-item.isScene2.isOdd{
+        background-image: url(@/assets/images/relic-item-bg-2-odd.jpg);
+      }
+      >.relic-item.isScene2.isEven{
+        background-image: url(@/assets/images/relic-item-bg-2-even.jpg);
+      }
+      >.relic-item.isScene3.isOdd{
+        background-image: url(@/assets/images/relic-item-bg-3-odd.jpg);
+      }
+      >.relic-item.isScene3.isEven{
+        background-image: url(@/assets/images/relic-item-bg-3-even.jpg);
       }
     }
   }
+  >.the-list.allScene{
+    background-image: url(@/assets/images/relic-list-bg-1-1.png);
+  }
+  >.the-list.scene1{
+    background-image: url(@/assets/images/relic-list-bg-1-1.png);
+  }
+  >.the-list.scene2{
+    background-image: url(@/assets/images/relic-list-bg-1-2.png);
+  }
+  >.the-list.scene3{
+    background-image: url(@/assets/images/relic-list-bg-1-3.png);
+  }
 }
 </style>