添加简介导览

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

@@ -1,5 +1,9 @@
 <script setup lang="ts">
 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";
+import Title2 from "@/assets/img/home/introduce/title2.png";
+
 const emit = defineEmits(["close"]);
 const close = () => {
   emit("close");
@@ -9,7 +13,10 @@ const close = () => {
 <template>
   <div class="info">
     <div class="cad">
-      <BButton @click="close" />
+      <BButton class="back" @click="close" />
+      <img class="map" :src="Map" alt="" />
+      <img class="title1" :src="Title1" alt="" />
+      <img class="title2" :src="Title2" alt="" />
     </div>
   </div>
 </template>
@@ -18,17 +25,39 @@ const close = () => {
 .info {
   width: 100%;
   height: 100%;
-  background: rgba(0, 0, 0, 0.466);
+  background: rgba(0, 0, 0, 0.432);
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   z-index: 2;
   .cad {
-    width: 70%;
-    height: 85%;
-    background: rgba(255, 0, 0, 0.151);
+    width: 65%;
+    height: 80%;
+    background-image: url("./../../../../assets/img/home/introduce/bg.png");
     border-radius: 10px;
+    position: relative;
+
+    .back {
+      position: absolute;
+      bottom: 10%;
+      right: 8%;
+    }
+
+    .map {
+      width: 30%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 10%;
+    }
+
+    .title1 {
+      width: 45%;
+      position: absolute;
+      right: 20%;
+      top: -7%;
+    }
   }
 }
 </style>

linjiagou/src/view/home/index.vue

@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import Introduce from "./components/introduce/index.vue";
 
+import Icon1 from "@/assets/img/home/icon1.png";
+import Icon2 from "@/assets/img/home/icon2.png";
+import Icon3 from "@/assets/img/home/icon3.png";
+
+import Bolang from "@/assets/img/home/bolang.png";
+import line from "@/assets/img/home/xian.png";
+import title from "@/assets/img/home/title.png";
+
 const router = useRouter();
 
 const moduleIndex = ref(0);
@@ -22,6 +30,8 @@ onMounted(() => {
   <div class="all">
     <!-- 功能栏 -->
     <div class="option-box">
+      <!-- 线 -->
+      <img class="star-line" :src="line" alt="" />
       <!-- 展馆介绍 -->
       <div
         class="box-item"
@@ -31,8 +41,7 @@ onMounted(() => {
           }
         "
       >
-        <div class="box-top"></div>
-        <div class="box-botoom">展馆介绍</div>
+        <img :src="Icon1" alt="" />
       </div>
       <div class="box-line"></div>
       <!-- 星星 -->
@@ -45,8 +54,7 @@ onMounted(() => {
           }
         "
       >
-        <div class="box-top"></div>
-        <div class="box-botoom">线上展厅</div>
+        <img :src="Icon2" alt="" />
       </div>
       <div class="box-line"></div>
       <!-- 星星 -->
@@ -59,8 +67,7 @@ onMounted(() => {
           }
         "
       >
-        <div class="box-top"></div>
-        <div class="box-botoom">文物鉴赏</div>
+        <img :src="Icon3" alt="" />
       </div>
     </div>
 
@@ -75,6 +82,11 @@ onMounted(() => {
     />
 
     <!--  -->
+
+    <img class="wave" :src="Bolang" alt="" />
+
+    <!-- title -->
+    <img class="title" :src="title" alt="" />
   </div>
 </template>
 
@@ -82,49 +94,64 @@ onMounted(() => {
 .all {
   width: 100%;
   height: 100%;
-  background: rgba(85, 117, 224, 0.418);
+  background-image: url("../../assets/img/home/bg.png");
   background-size: 100% 100%;
 
   .option-box {
-    width: 100%;
+    width: 50%;
     height: 100px;
     display: flex;
     justify-content: center;
     position: absolute;
-    bottom: 0;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 2;
+    .star-line {
+      width: 85%;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-top: -10px;
+    }
+    // position: relative;
+
+    // background-image: url("../../assets/img/home/xian.png");
     // background: rgba(114, 17, 17, 0.671);
 
     .box-item {
       height: 100%;
       cursor: pointer;
-      .box-top {
-        width: 68px;
-        height: 68px;
-        background: #fff3e1;
-        border-radius: 20px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-bottom: 5px;
-      }
-      .box-botoom {
-        width: 100%;
-        text-align: center;
-        font-family: "AlimamaShuHeiTi-Bold";
-        font-weight: bold;
-        font-size: 16px;
-        color: #fff3e1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        width: 90%;
       }
     }
 
     .box-line {
-      width: 70px;
+      width: 13%;
       height: 2px;
-      background: #fff3e1;
+      background: #fff3e100;
       margin-top: 34px;
       margin-left: 5px;
       margin-right: 5px;
+      // display: none;
     }
   }
+
+  .wave {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+  }
+
+  .title {
+    width: 40%;
+    position: absolute;
+    // top: 4%;
+    left: 20%;
+  }
 }
 </style>

scene/public/static/css/main.css

@@ -4347,7 +4347,7 @@ a.tag-link {
     justify-content: center;
     align-items: center;
     cursor: pointer;
-    margin-top: -5px;
+    margin: 1px;
 }
 
 .tourSpinner {
@@ -4355,7 +4355,7 @@ a.tag-link {
     top: -10px;
     left: -10px;
     border: 5px solid rgba(255, 255, 255, .4);
-    //text-shadow: 0 0 5px rgba(0, 0, 0, .9)
+    text-shadow: 0 0 5px rgba(0, 0, 0, .9)
 }
 
 .tourSpinner:before {

scene/public/static/js/main_2020_show.js

@@ -6374,7 +6374,7 @@ window.Modernizr = function(n, e, t) {
                 var pullTab = $("#pullTab"),
                     mobileRadius = {
                         "bottom":{"border-bottom-left-radius":"10px","border-bottom-right-radius":"10px"},
-                        "top":{"border-top-left-radius":"10px","border-top-right-radius":"10px"}
+                        "top":{"border-top-left-radius":"10px","border-top-right-radius":"10px"},
                     },
                     topRadius = {
                         "bottom":{"border-top-right-radius":"10px","border-bottom-right-radius":"10px"},

scene/src/App.vue

@@ -17,13 +17,18 @@ export default {};
 </script>
 <style lang="less">
 @font-face {
-  font-family: "btmText"; /* 字体名称 */
+  font-family: "SourceHanSerifCN-Medium"; /* 字体名称 */
   src: url("../src/assets/fonts/SourceHanSerifCN-Medium.otf"); /* 字体文件相对路径 */
 }
 @font-face {
   font-family: "AlimamaShuHeiTi-Bold"; /* 字体名称 */
   src: url("../src/assets/fonts/AlimamaShuHeiTi-Bold.ttf"); /* 字体文件相对路径 */
 }
+
+@font-face {
+  font-family: "AdobeHeitiStd"; /* 字体名称 */
+  src: url("../src/assets/fonts/AdobeHeitiStd.otf"); /* 字体文件相对路径 */
+}
 .vvvv {
   width: 100%;
   height: 100%;

scene/src/assets/style/myBase.css

@@ -19,6 +19,7 @@
 
 #thumb-container .thumbImg .overlay {
   color: #fff;
+  font-family: 'AlimamaShuHeiTi-Bold';
 }
 
 #thumb-container .active .overlay {

scene/src/components/info/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="info-box" v-if="title != '' && disc != ''">
+    <div
+      class="title-box"
+      @click="
+        () => {
+          isShow = !isShow;
+        }
+      "
+    >
+      <div class="detail">{{ title }}</div>
+      <img src="../../assets/img/infoIcon.png" alt="" />
+    </div>
+    <div class="disc-box" v-show="isShow" v-html="disc"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      title: "",
+      disc: "",
+      isShow: false,
+    };
+  },
+  computed: {},
+  watch: {},
+  methods: {},
+  created() {},
+  mounted() {
+    let timeA = -1;
+    timeA = window.setInterval(() => {
+      if (window.DATA) {
+        clearInterval(timeA);
+      }
+      this.title = window.DATA.name;
+      this.disc = window.DATA.summary;
+      document.title = window.DATA.name;
+    }, 100);
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="less" scoped>
+.info-box {
+  position: absolute;
+  z-index: 10000;
+  height: 58px;
+  width: 575px;
+  top: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #fff3e1;
+
+  .title-box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url("../../assets/img/infoBg.png");
+    background-size: 100% 100%;
+    font-size: 22px;
+    font-family: "AdobeHeitiStd";
+    cursor: pointer;
+    img {
+      width: 25px;
+      height: 25px;
+      margin-left: 10px;
+      margin-top: 10px;
+    }
+  }
+
+  .disc-box {
+    width: 100%;
+    background: url("../../assets/img/discBg.png");
+    background-size: 100% 100%;
+    padding: 30px;
+    text-indent: 2em;
+    line-height: 25px;
+    letter-spacing: 2px;
+  }
+}
+</style>

scene/src/pages/Home.vue

@@ -71,6 +71,8 @@
 
       <welcome @close="hideWelcome" v-if="showWelcome" />
 
+      <info />
+
       <div class="loading" v-if="0">
         <span>加载中...</span>
       </div>
@@ -96,6 +98,7 @@ import vError from "@/views/gui/error";
 import vrCon from "@/views/gui/vrcon";
 import vOther from "@/views/gui/other";
 import welcome from "@/components/welcome";
+import info from "@/components/info";
 
 import { addVisitAPI } from "../utils/api";
 
@@ -114,6 +117,7 @@ export default {
     vrCon,
     vOther,
     welcome,
+    info
   },
 
   data() {