"其他遗存"的详情界面

README.md

@@ -7,9 +7,15 @@
 appId: wx0bc995dace29b2ba
 
 ## 待办
-文字介绍和相应链接到哪里找？
+其他遗存 详情页
 
-下边的按钮有啥用
+加载页先不弄了
+
+登录功能
+
+商城
+
+对接unity
 
 ### 微信扫码页面url
 https://open.weixin.qq.com/connect/qrconnect?appid=wx0bc995dace29b2ba&redirect_uri=https%3A%2F%2Fsit-wuxicishan.4dage.com%2FPC%2F%23%2Ftab-1&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

src/components/OtherRelicDetail.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="other-relic-detail">
+    <BtnClose @click="emit('close')" />
+    <h1>{{ props.data.name }}</h1>
+    <div class="address">
+      {{ props.data.region }}
+    </div>
+    <img
+      class="splitter"
+      src="@/assets/images/split-line.png"
+      alt=""
+      draggable="false"
+    >
+    <img
+      :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${props.data.thumb}`"
+      class="photo"
+      alt=""
+      draggable="false"
+    >
+    <div class="btn-group">
+      <button>全景浏览</button>
+      <button>场景漫游</button>
+    </div>
+    <div class="desc">
+      {{ props.data.description }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, inject } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import BtnClose from '@/components/BtnClose.vue'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const $env = inject('$env')
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true,
+  }
+})
+
+</script>
+
+<style lang="less" scoped>
+.other-relic-detail{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(10px);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  >h1{
+    font-family: Source Han Serif CN, Source Han Serif CN;
+    font-weight: 800;
+    font-size: 40px;
+    color: #FFFFFF;
+    line-height: 47px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 80%;
+    margin: 10px;
+  }
+  >.address{
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 16px;
+    color: #FFFFFF;
+    line-height: 19px;
+    opacity: 0.8;
+    margin-bottom: calc(28 / 972 * 100vh);
+  }
+  >.splitter{
+    margin-bottom: calc(35 / 972 * 100vh);
+  }
+  >img.photo{
+    height: calc(379 / 972 * 100%);
+    margin-bottom: calc(37 / 972 * 100vh);
+  }
+  >.btn-group{
+    margin-bottom: calc(39 / 972 * 100vh);
+    >button{
+      width: 146px;
+      height: 48px;
+      border-radius: 24px;
+      border: 1px solid #FFFFFF;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 20px;
+      color: #FFFFFF;
+      line-height: 23px;
+      &:first-of-type{
+        margin-right: 31px;
+      }
+    }
+  }
+  >.desc{
+    width: 80%;
+    max-width: 1300px;
+    font-family: Source Han Sans CN, Source Han Sans CN;
+    font-weight: 400;
+    font-size: 20px;
+    color: #FFFFFF;
+    line-height: 30px;
+    text-indent: 2em;
+    padding: 0.5em;
+    height: calc(168 / 972 * 100%);
+    overflow: auto;
+  }
+}
+</style>

src/views/RelicSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relic-search">
     <BtnClose
-      @click="router.go(-1)"
+      @click="emit('close')"
     />
     <div class="search-bar">
       <input
@@ -33,9 +33,10 @@
         v-for="item in relicList"
         :key="item.id"
         class="relic-item"
+        @click="emit('close', item)"
       >
         <img
-          :src="item.thumb"
+          :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${item.thumb}`"
           alt=""
           class="photo"
         >
@@ -61,7 +62,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, watchEffect } from "vue"
+import { ref, computed, watch, onMounted, watchEffect, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import BtnClose from '@/components/BtnClose.vue'
@@ -70,6 +71,10 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const $env = inject('$env')
+
+const emit = defineEmits(['close'])
+
 const keyword = ref('')
 
 const areaList = ref([
@@ -99,7 +104,6 @@ watchEffect(() => {
   })
 })
 
-
 </script>
 
 <style lang="less" scoped>

src/router/index.js

@@ -1,7 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import LoginView from "../views/LoginView.vue"
 import HomeView from '../views/HomeView.vue'
-import RelicSearch from '../views/RelicSearch.vue'
 import ShopView from '@/views/ShopView.vue'
 // import store from '@/store/index.js'
 
@@ -22,13 +21,6 @@ const routes = [
     meta: {
       tabIdx: 1
     },
-    children: [
-      {
-        path: '/relic-search',
-        name: 'RelicSearch',
-        component: RelicSearch,
-      },
-    ],
   },
   // {
   //   path: '/tab-2',

src/views/HomeView.vue

@@ -12,10 +12,11 @@
         <li
           v-for="item in otherRelicList"
           :key="item.id"
+          @click="activeOtherRelicData = item, isShowOtherRelicDetail = true"
         >
           <img
             class=""
-            :src="item.thumb"
+            :src="`${$env.VUE_APP_DEPLOY_ORIGIN}${item.thumb}`"
             alt=""
             draggable="false"
           >
@@ -104,7 +105,12 @@
         </div>
         <div class="splitter" />
         <div class="text">
-          {{ hotRelicList[activeHotRelicIdx].desc }}
+          <p
+            v-for="(item, idx) in hotRelicList[activeHotRelicIdx].desc"
+            :key="idx"
+          >
+            {{ item }}
+          </p>
         </div>
         <img
           class=""
@@ -148,9 +154,7 @@
       </button>
       <button
         class="search"
-        @click="$router.push({
-          name: 'RelicSearch'
-        })"
+        @click="isShowRelicSearch = true"
       >
         搜索
         <img
@@ -169,24 +173,40 @@
     >
     <button class="arrow-down" />
 
-    <router-view />
+    <OtherRelicDetail
+      v-if="isShowOtherRelicDetail"
+      :data="activeOtherRelicData"
+      @close="isShowOtherRelicDetail = false, activeOtherRelicData = {}"
+    />
+
+    <RelicSearch
+      v-if="isShowRelicSearch"
+      @close="onSearchViewClose"
+    />
   </div>
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, watchEffect } from "vue"
+import { ref, computed, watch, onMounted, watchEffect, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import { useElementSize } from '@vueuse/core'
+import OtherRelicDetail from '@/components/OtherRelicDetail.vue'
+import RelicSearch from '@/components/RelicSearch.vue'
 
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
 
+const $env = inject('$env')
+
 const otherRelicList = ref([])
 api.getRelicList().then((res) => {
   otherRelicList.value = res
 })
+const isShowOtherRelicDetail = ref(false)
+const activeOtherRelicData = ref({})
+
 
 const centerRef = ref(null)
 const { width: centerWidth, height: centerHeight } = useElementSize(centerRef)
@@ -617,6 +637,15 @@ function onClickArea(idx) {
     activeAreaIdx.value = idx
   }
 }
+
+const isShowRelicSearch = ref(false)
+function onSearchViewClose(relicData) {
+  isShowRelicSearch.value = false
+  if (relicData) {
+    activeOtherRelicData.value = relicData
+    isShowOtherRelicDetail.value = true
+  }
+}
 </script>
 
 <style lang="less" scoped>
@@ -634,7 +663,7 @@ function onClickArea(idx) {
     display: flex;
     flex-direction: column;
     padding-top: 5vh;
-    padding-bottom: 18vh;
+    padding-bottom: 11vh;
     position: relative;
     z-index: 1;
     >.title{
@@ -722,13 +751,13 @@ function onClickArea(idx) {
       background-repeat: no-repeat;
       background-position: center center;
       position: relative;
-      cursor: pointer;
       >img.pos-in-map{
         position: absolute;
         transform: translate(-50%, -50%);
         width: calc(15 / 734 * 100%);
         height: calc(22 / 734 * 100%);
         transform-origin: center bottom;
+        cursor: pointer;
         &.active{
           transform: translate(-50%, -50%) scale(1.5);
           z-index: 1;
@@ -740,6 +769,7 @@ function onClickArea(idx) {
         height: 100%;
         opacity: 0.3;
         transform: translate(-50%, -50%);
+        cursor: pointer;
       }
       >img.colorful{
         position: absolute;