1

README.md

@@ -1,4 +1,11 @@
 ## 部署测试环境
 文件存放位置：
 
-访问url：
+访问url：
+
+## 待办
+小图切图要按照蓝湖切。
+
+文字介绍和相应链接到哪里找？
+
+下边的按钮有啥用

src/router/index.js

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

src/views/HomeView.vue

@@ -35,12 +35,37 @@
       class="center"
     >
       <div
-        class="img-wrap"
+        class="img-list-wrap"
         :style="{
           width: imgWrapSize + 'px',
           height: imgWrapSize + 'px',
         }"
-      />
+      >
+        <div
+          v-for="item in hotRelicList"
+          :key="item.id"
+          class="img-item-wrap"
+          :style="{
+            left: `${item.x / 734 * 100}%`,
+            top: `${item.y / 734 * 100}%`,
+            width: `${item.width / 734 * 100}%`,
+            height: `${item.height / 734 * 100}%`,
+          }"
+        >
+          <img
+            class="no-color"
+            :src="require(`@/assets/images/relic-drawings/${item.imgName}.png`)"
+            alt=""
+            draggable="false"
+          >
+          <img
+            class="colorful"
+            :src="require(`@/assets/images/relic-drawings/${item.imgName}上色.png`)"
+            alt=""
+            draggable="false"
+          >
+        </div>
+      </div>
     </div>
     <div class="right">
       <div class="relic-detail">
@@ -81,7 +106,12 @@
           draggable="false"
         >
       </button>
-      <button class="search">
+      <button
+        class="search"
+        @click="$router.push({
+          name: 'RelicSearch'
+        })"
+      >
         搜索
         <img
           class=""
@@ -97,6 +127,8 @@
       alt=""
       draggable="false"
     >
+
+    <router-view />
   </div>
 </template>
 
@@ -153,15 +185,227 @@ const centerRef = ref(null)
 const { width: centerWidth, height: centerHeight } = useElementSize(centerRef)
 const imgWrapSize = ref(0)
 watchEffect(() => {
-  console.log('change!')
+  if (centerHeight.value - window.innerHeight * 0.1 < 0) {
+    return
+  }
   if (centerWidth.value > (centerHeight.value - window.innerHeight * 0.1)) {
     imgWrapSize.value = centerHeight.value - window.innerHeight * 0.1
   } else {
     imgWrapSize.value = centerWidth.value
   }
-  console.log('sadfsdf', imgWrapSize.value)
 })
 
+const hotRelicList = ref([
+  {
+    id: 6,
+    x: 634,
+    y: 305,
+    width: 100,
+    height: 66,
+    imgName: '6竺西书院',
+  },
+  {
+    id: 14,
+    x: 651,
+    y: 391,
+    width: 84,
+    height: 47,
+    imgName: '14宝界桥',
+  },
+  {
+    id: 9,
+    x: 619,
+    y: 428,
+    width: 51,
+    height: 72,
+    imgName: '9祝大椿故居',
+  },
+  {
+    id: 3,
+    x: 620,
+    y: 516,
+    width: 94,
+    height: 35,
+    imgName: '3尚仁初级商科职业学校',
+  },
+  {
+    id: 23,
+    x: 562,
+    y: 540,
+    width: 78,
+    height: 66,
+    imgName: '23怀海义庄',
+  },
+  {
+    id: 7,
+    x: 504,
+    y: 587,
+    width: 48,
+    height: 87,
+    imgName: '7坎宫救熄会',
+  },
+  {
+    id: 13,
+    x: 397,
+    y: 644,
+    width: 88,
+    height: 54,
+    imgName: '13大公图书馆',
+  },
+  {
+    id: 11,
+    x: 314,
+    y: 630,
+    width: 64,
+    height: 83,
+    imgName: '11惠山古镇',
+  },
+  {
+    id: 4,
+    x: 211,
+    y: 636,
+    width: 87,
+    height: 48,
+    imgName: '4善卷洞',
+  },
+  {
+    id: 19,
+    x: 140,
+    y: 597,
+    width: 52,
+    height: 67,
+    imgName: '19徐氏义庄（查桥）',
+  },
+  {
+    id: 16,
+    x: 27,
+    y: 547,
+    width: 109,
+    height: 53,
+    imgName: '16华氏老义庄',
+  },
+  {
+    id: 21,
+    x: 47,
+    y: 473,
+    width: 50,
+    height: 67,
+    imgName: '21李金镛故居',
+  },
+  {
+    id: 12,
+    x: -9,
+    y: 385,
+    width: 96,
+    height: 74,
+    imgName: '12公花园',
+  },
+  {
+    id: 20,
+    x: -32,
+    y: 334,
+    width: 129,
+    height: 37,
+    imgName: '20唐氏花厅',
+  },
+  {
+    id: 12,
+    x: 8,
+    y: 248,
+    width: 85,
+    height: 61,
+    imgName: '12市慈善总会',
+  },
+  {
+    id: 5,
+    x: 59,
+    y: 204,
+    width: 56,
+    height: 48,
+    imgName: '5洑溪徐氏宗祠（现名：徐大宗祠）',
+  },
+  {
+    id: 96,
+    x: 65,
+    y: 136,
+    width: 95,
+    height: 47,
+    imgName: '96匡村中学旧址',
+  },
+  {
+    id: 15,
+    x: 141,
+    y: 83,
+    width: 74,
+    height: 56,
+    imgName: '15钱伟长旧居',
+  },
+  {
+    id: 18,
+    x: 202,
+    y: 54,
+    width: 72,
+    height: 42,
+    imgName: '18徐义庄（荡口）',
+  },
+  {
+    id: 40,
+    x: 282,
+    y: 27,
+    width: 50,
+    height: 56,
+    imgName: '40景云楼',
+  },
+  {
+    id: 30,
+    x: 343,
+    y: 49,
+    width: 66,
+    height: 40,
+    imgName: '30炎黄陈列馆',
+  },
+  {
+    id: 22,
+    x: 427,
+    y: 36,
+    width: 59,
+    height: 61,
+    imgName: '22村前公立蒙学堂',
+  },
+  {
+    id: 24,
+    x: 492,
+    y: 80,
+    width: 86,
+    height: 40,
+    imgName: '24周新镇',
+  },
+  {
+    id: 17,
+    x: 553,
+    y: 137,
+    width: 109,
+    height: 40,
+    imgName: '17襄义庄',
+  },
+  {
+    id: 10,
+    x: 603,
+    y: 186,
+    width: 52,
+    height: 66,
+    imgName: '10施子祠',
+  },
+  {
+    id: 1,
+    x: 655,
+    y: 238,
+    width: 79,
+    height: 54,
+    imgName: '1缪氏义庄',
+  },
+])
+
 </script>
 
 <style lang="less" scoped>
@@ -254,11 +498,35 @@ watchEffect(() => {
     display: flex;
     justify-content: center;
     align-items: center;
-    >.img-wrap{
+    >.img-list-wrap{
       background-image: url(@/assets/images/home-center-img-wrap-bg.png);
       background-size: contain;
       background-repeat: no-repeat;
       background-position: center center;
+      position: relative;
+      cursor: pointer;
+      >.img-item-wrap{
+        position: absolute;
+        >img{
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+        }
+        >img.colorful{
+          display: none;
+        }
+      }
+      >.img-item-wrap:hover{
+        >img.no-color{
+          display: none;
+        }
+        >img.colorful{
+          display: initial;
+          transform: scale(1.3);
+        }
+      }
     }
   }
   >.right{

src/views/RelicSearch.vue

@@ -0,0 +1,362 @@
+<template>
+  <div class="relic-search">
+    <div class="search-bar">
+      <input
+        v-model="keyword"
+        type="text"
+        placeholder="请输入要搜索的内容..."
+      >
+      <img
+        class="search"
+        src="@/assets/images/icon_search_white.png"
+        alt=""
+        draggable="false"
+      >
+    </div>
+    <menu class="tab-bar">
+      <button>全部</button>
+      <button>行政区1</button>
+      <button>行政区2</button>
+      <button>行政区3</button>
+      <button>行政区4</button>
+    </menu>
+    <ul class="relic-list">
+      <div
+        v-for="item in relicList"
+        :key="item.id"
+      >
+        <img
+          :src="require(`@/assets/images/${item.photo}`)"
+          alt=""
+          class="photo"
+        >
+        <div class="center">
+          <div class="name">
+            {{ item.name }}
+          </div>
+          <div class="desc">
+            {{ item.desc }}
+          </div>
+        </div>
+        <button class="go">
+          <img
+            class=""
+            src="@/assets/images/icon_arrow.png"
+            alt=""
+            draggable="false"
+          >
+        </button>
+      </div>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const keyword = ref('')
+
+const relicList = ref([
+  {
+    id: 1,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 2,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 3,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 4,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 5,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 6,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 7,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 8,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 9,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 10,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 11,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 12,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 13,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 14,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 15,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 16,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 17,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 18,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 19,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 20,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 21,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 22,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 23,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 24,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 25,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 26,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 27,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 28,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 29,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 30,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 31,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 32,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 33,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 34,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 35,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 36,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 37,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 38,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 39,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 40,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+  {
+    id: 41,
+    photo: 'icon_user-active.png',
+    name: '点位名称',
+    desc: '上看到附近可舒服都市妇科技术都是了解对方 时刻的风景 士大夫精神地方可是对方 ',
+  },
+])
+</script>
+
+<style lang="less" scoped>
+.relic-search{
+  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;
+  align-items: center;
+  >.search-bar{
+    margin-top: 77px;
+    flex: 0 0 auto;
+    width: 874px;
+    height: 74px;
+    padding-left: 65px;
+    padding-right: 32px;
+    background: linear-gradient( 180deg, rgba(255,255,255,0.5) 100%, rgba(255,255,255,0.2) 0%);
+    box-shadow: 0px 1px 4px 0px rgba(255,255,255,0.25);
+    border-radius: 36px 36px 36px 36px;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    display: flex;
+    align-items: center;
+    margin-bottom: 58px;
+    >input{
+      flex: 1 0 1px;
+      font-family: Source Han Sans CN, Source Han Sans CN;
+      font-weight: 400;
+      font-size: 24px;
+      color: #FFFFFF;
+      line-height: 28px;
+      &::placeholder {
+        font-size: 24px;
+        color: rgba(200, 200, 200, 1);
+        line-height: 28px;
+      }
+    }
+    >img{
+      flex: 0 0 auto;
+      width: 32px;
+      height: 32px;
+    }
+  }
+}
+</style>