更新文物鉴赏模块

linjiagou/src/App.vue

@@ -26,6 +26,11 @@ onMounted(() => {
   src: url("../src/assets/font/AlimamaShuHeiTi-Bold.ttf"); /* 字体文件相对路径 */
 }
 
+@font-face {
+  font-family: "SourceHanSerifCN-Medium"; /* 字体名称 */
+  src: url("../src/assets/font/SourceHanSerifCN-Medium.otf"); /* 字体文件相对路径 */
+}
+
 .all {
   width: 100vw;
   height: 100vh;

linjiagou/src/routes/index.ts

@@ -13,6 +13,12 @@ let routes = [
     name: "product",
     component: () => import("@/view/product/index.vue"),
   },
+  // 文物鉴赏——详情
+  {
+    path: "/detail",
+    name: "detail",
+    component: () => import("@/view/product/detail/index.vue"),
+  },
 ];
 // 路由
 const router = createRouter({

linjiagou/src/view/home/components/introduce/index.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import dataList from "@/data/data";
 import BButton from "@/components/Button/index.vue";
 import Map from "@/assets/img/home/introduce/map.png";
 import Title1 from "@/assets/img/home/introduce/title1.png";
@@ -17,6 +18,7 @@ const close = () => {
       <img class="map" :src="Map" alt="" />
       <img class="title1" :src="Title1" alt="" />
       <img class="title2" :src="Title2" alt="" />
+      <div class="disc">{{ dataList.introduce }}</div>
     </div>
   </div>
 </template>
@@ -55,9 +57,28 @@ const close = () => {
     .title1 {
       width: 45%;
       position: absolute;
-      right: 20%;
+      right: 15%;
       top: -7%;
     }
+
+    .title2 {
+      position: absolute;
+      top: 17%;
+      right: 6%;
+    }
+    .disc {
+      width: 48%;
+      height: 50%;
+      // background: red;
+      white-space: pre-wrap;
+      position: absolute;
+      right: 7%;
+      top: 25%;
+      font-size: 15px;
+      line-height: 25px;
+      letter-spacing: 2px;
+      font-family: "SourceHanSerifCN-Medium";
+    }
   }
 }
 </style>

linjiagou/src/view/product/detail/index.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import dataList from "@/data/data";
+
+import BButton from "@/components/Button/index.vue";
+
+const router = useRouter();
+const route = useRoute();
+const goBack = () => {
+  router.back();
+};
+
+const productItem = ref({});
+
+onMounted(() => {
+  productItem.value = dataList.produces.find((item: any) => {
+    return item.name == route.query.name;
+  });
+});
+</script>
+
+<template>
+  <div class="all">
+    <BButton class="back-btn" @click="goBack()" />
+    <div class="module-box">
+      <iframe :src="productItem.moduleUrl" frameborder="0"></iframe>
+    </div>
+    <div class="info-box">
+      <div class="info-title">{{ productItem.name }}</div>
+      <div class="top">
+        <div>年代：{{ productItem.age }}</div>
+        <div>质地：{{ productItem.age }}</div>
+        <div>尺寸（MM）：{{ productItem.age }}</div>
+      </div>
+      <div>来源：{{ productItem.source }}</div>
+      <div>级别：{{ productItem.level }}</div>
+      <div>描述：{{ productItem.disc }}</div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.all {
+  width: 100%;
+  height: 100%;
+  background: url("../../../assets/img/product/detailBg.png");
+  background-size: cover;
+  display: flex;
+  flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+  padding: 10% auto;
+  .back-btn {
+    position: absolute;
+    left: 5%;
+    top: 5%;
+  }
+  .module-box {
+    width: 50%;
+    height: 50%;
+    background: url("../../../assets/img/product/moduleBg.png");
+    background-size: 100% 100%;
+    margin-top: 5%;
+    position: relative;
+    iframe {
+      width: 97.2%;
+      height: 95%;
+      position: absolute;
+      top: 16px;
+      left: 1px;
+    }
+  }
+  .info-box {
+    width: 50%;
+    font-size: 16px;
+    font-family: "SourceHanSerifCN-Medium";
+    .info-title {
+      width: 100%;
+      font-weight: bold;
+      font-family: "AlimamaShuHeiTi-Bold";
+      font-size: 25px;
+      margin: 30px 0;
+    }
+    div {
+      line-height: 30px;
+      width: 100%;
+    }
+    .top {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+</style>

linjiagou/src/view/product/index.vue

@@ -1,17 +1,51 @@
 <script setup lang="ts">
+import dataList from "@/data/data";
 import BButton from "@/components/Button/index.vue";
+import TitleImg from "@/assets/img/product/title.png";
+
+const router = useRouter();
+const goBack = () => {
+  router.back();
+};
+const goDetail = (name: string) => {
+  router.push({
+    name: "detail",
+    query: {
+      name: name,
+    },
+  });
+};
+
+const hoverIndex = ref(-1);
+const onHover = (index: number) => {
+  hoverIndex.value = index;
+};
+
+const getAssetURL = (image: string) => {
+  return new URL(`../../assets/img/product/${image}`, import.meta.url).href;
+};
 </script>
 
 <template>
   <div class="all">
-    <BButton
-     class="back-btn"
-      @click="
-        () => {
-          window.history.go(-1);
-        }
-      "
-    />
+    <BButton class="back-btn" @click="goBack()" />
+    <div class="title-box">
+      <img class="title" :src="TitleImg" alt="" />
+    </div>
+    <div class="list-box">
+      <div
+        class="list-item"
+        v-for="(item, index) in dataList.produces"
+        @mouseover="onHover(index)"
+        @click="goDetail(item.name)"
+      >
+        <img :src="getAssetURL(item.thumbnail)" />
+        <!-- 遮罩 -->
+        <div class="shade-box" v-show="hoverIndex == index">
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -19,12 +53,60 @@ import BButton from "@/components/Button/index.vue";
 .all {
   width: 100%;
   height: 100%;
-  // background: red;
+  background: url("../../assets/img/product/listBg.png");
+  background-size: cover;
+  padding-top: 3%;
 
   .back-btn {
     position: absolute;
     left: 5%;
     top: 5%;
   }
+  .title-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .list-box {
+    width: 100%;
+    height: 70%;
+    padding: 0 5%;
+    // background: red;
+    margin-top: 40px;
+    display: flex;
+    justify-content: space-evenly;
+    .list-item {
+      width: 20%;
+      height: 100%;
+      background: url("../../assets/img/product/listItemBg.png");
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: center;
+      position: relative;
+      cursor: pointer;
+
+      img {
+        width: 80%;
+        object-fit: contain;
+        margin-left: -20px;
+      }
+
+      .shade-box {
+        position: absolute;
+        left: 0;
+        top: 14px;
+        width: 92.2%;
+        height: 94%;
+        background: url("../../assets/img/product/hoverBg.png");
+        color: #fff3e1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        font-family: "AlimamaShuHeiTi-Bold";
+      }
+    }
+  }
 }
 </style>

scene/public/static/js/loadCAD.js

@@ -72,7 +72,7 @@ window.grendCAD = (function grendCAD() {
           left:auto;
           transform: translate(0, 0);
           right: 10px;
-          top: 10px;
+          top: 80px;
           width: 120px;
           height: 120px;
           background:  rgba(56,56,56,0.56);

scene/src/components/info/index.vue

@@ -89,4 +89,15 @@ export default {
     letter-spacing: 2px;
   }
 }
+
+@media screen and (max-width: 1000px) {
+  .info-box {
+    height: 58px;
+    width: 326px;
+
+    .title-box {
+      font-size: 18px;
+    }
+  }
+}
 </style>