feat: 保存

.env.development

@@ -1,2 +1,3 @@
 VITE_DOMAIN_URL="http://192.168.20.61:8059"
 VITE_API_URL="http://192.168.20.61:8059/api/"
+VITE_PUBLIC_DIR="/web/"

.env.production

@@ -1,2 +1,3 @@
 VITE_DOMAIN_URL="http://192.168.20.61:8059"
-VITE_API_URL="http://192.168.20.61:8059/api/"
+VITE_API_URL="http://192.168.20.61:8059/api/"
+VITE_PUBLIC_DIR="/web/"

src/components/heroSubTitle.vue

@@ -7,6 +7,8 @@
 </template>
 <script setup>
 import { computed } from "vue";
+import { computedAsync } from "@vueuse/core";
+
 defineOptions({
   name: "hero-sub-title",
 });
@@ -16,8 +18,14 @@ const props = defineProps({
     default: () => 1,
   },
 });
-
-const titleSrc = computed(() => `/img/subtitle_${props.type || 1}.png`);
+// const titleSrc = computed(() => `/img/subtitle_${props.type || 1}.png`);
+const titleSrc = computedAsync(
+  async () => {
+    const url = await import(`../assets/subtitle_${props.type || 1}.png`);
+    return url.default;
+  },
+  null // initial state
+);
 </script>
 
 <style lang="scss" scoped>

src/components/infoBox.vue

@@ -11,7 +11,7 @@
         <span> {{ time }}</span>
         <div class="see-more" @click="$router.push(`/info-detail/${id}`)">
           查看
-          <img class="see-more-img" src="/img/see_more.png" alt="see more" />
+          <img class="see-more-img" src="img/see_more.png" alt="see more" />
         </div>
       </div>
     </div>

src/components/showCase.vue

@@ -31,8 +31,8 @@
 
         <template #arrow="{ prev, next }">
           <div class="custom-arrow">
-            <img class="btn-img" src="/img/arrow-left.png" @click="prev" />
-            <img class="btn-img" src="/img/arrow-right.png" @click="next" />
+            <img class="btn-img" src="img/arrow-left.png" @click="prev" />
+            <img class="btn-img" src="img/arrow-right.png" @click="next" />
           </div>
         </template>
       </n-carousel>
@@ -47,7 +47,7 @@
           round
           @click="handleSwitchType('model')"
         >
-          <img src="/img/icon_model.png" /> 模型
+          <img src="img/icon_model.png" /> 模型
         </n-button>
         <n-button
           class="video btn"
@@ -56,7 +56,7 @@
           }"
           round
           @click="handleSwitchType('video')"
-          ><img src="/img/icon_video.png" />视频</n-button
+          ><img src="img/icon_video.png" />视频</n-button
         >
         <n-button
           class="gallery btn"
@@ -66,19 +66,19 @@
           round
           @click="handleSwitchType('gallery')"
         >
-          <img src="/img/icon_photo.png" />图片</n-button
+          <img src="img/icon_photo.png" />图片</n-button
         >
       </n-space>
       <div class="actions">
         <div v-if="isModel">
-          <img src="/img/zoom-in.png" />
-          <img src="/img/zoom-out.png" />
-          <img src="/img/reload.png" @click="reloadIframe" />
+          <img src="img/zoom-in.png" />
+          <img src="img/zoom-out.png" />
+          <img src="img/reload.png" @click="reloadIframe" />
         </div>
         <div v-if="isGallery">
-          <img src="/img/audio-muted.png" @click="stop" />
+          <img src="img/audio-muted.png" @click="stop" />
           <img
-            src="/img/audio-unmuted.png"
+            src="img/audio-unmuted.png"
             @click="!isPlaying ? play() : () => {}"
           />
         </div>
@@ -237,26 +237,48 @@ const reloadIframe = () => {
     }
     .group-type {
       :deep(.n-button) {
-        background-color: #ababab;
+        --n-border: none !important;
+        --n-border-hover: none !important;
+        --n-border-pressed: none !important;
+        --n-border-focus: none !important;
+        --n-ripple-color: none !important;
+        transition: none;
+        background-color: transparent;
         color: white;
         pointer-events: all;
         font-size: var(--show-case-btn-font-size);
-        padding: 10px 40px;
+        // min-width: 80px;
+        // padding: 10px 40px;
         img {
           height: 1.25rem;
           margin-right: 0.5rem;
           width: auto;
         }
         &.btn {
-          background-size: cover;
+          background-size: contain;
           background-repeat: no-repeat;
+          background-position: top center;
+          border: none;
         }
         &.model {
-          // background-image: var(--show-case-btn-model-bg);
+          background-image: var(--show-case-btn-model-bg);
+        }
+        &.video {
+          background-image: var(--show-case-btn-video-bg);
+        }
+        &.gallery {
+          background-image: var(--show-case-btn-gallery-bg);
         }
         &.active {
-          background-color: var(--main-primary-color);
-          border-color: var(--main-primary-color);
+          &.model {
+            background-image: var(--show-case-btn-model-bg-active);
+          }
+          &.video {
+            background-image: var(--show-case-btn-video-bg-active);
+          }
+          &.gallery {
+            background-image: var(--show-case-btn-gallery-bg-active);
+          }
         }
       }
     }

src/components/subHeader.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script setup>
+import logo from '../assets/logo.png'
 defineOptions({
   name: "sub-header",
 });
@@ -14,7 +15,7 @@ defineOptions({
 defineProps({
   logo: {
     type: String,
-    default: () => "/img/logo.png",
+    default: () => logo,
   },
 });
 </script>

src/router/index.js

@@ -102,9 +102,10 @@ const routes = [
     redirect: "/404",
   },
 ];
+const basePath = import.meta.env.VITE_PUBLIC_DIR;
 
 const router = createRouter({
-  history: createWebHistory(),
+  history: createWebHistory(basePath),
   routes,
 });
 

src/views/collect-detail.vue

@@ -5,29 +5,31 @@
       <div class="left">
         <hero-sub-title :type="3" />
         <div class="detail">
-          <div class="back" @click="$router.go(-1)"></div>
+          <div class="detail-wrapper">
+            <div class="back" @click="$router.go(-1)"></div>
 
-          <div class="info">
-            <!-- <div class="show-case"></div> -->
-            <show-case />
-            <h3 class="title">湘鄂赣省工农银行洋银叁角纸币</h3>
-            <div class="label-list">
-              <span>时代：土地革命时期</span>
-              <span>来源：澄潭三星</span>
-              <span>质地：纸质</span>
-              <span>级别：二级</span>
-            </div>
-            <div class="text">
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
-              这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+            <div class="info">
+              <!-- <div class="show-case"></div> -->
+              <show-case />
+              <h3 class="title">湘鄂赣省工农银行洋银叁角纸币</h3>
+              <div class="label-list">
+                <span>时代：土地革命时期</span>
+                <span>来源：澄潭三星</span>
+                <span>质地：纸质</span>
+                <span>级别：二级</span>
+              </div>
+              <div class="text">
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+                这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简
+              </div>
             </div>
           </div>
         </div>
@@ -62,17 +64,24 @@ watchEffect(() => {
   flex: 1;
   border-radius: 0.8125rem;
   background-color: transparent;
-  padding: 2rem 3rem 4rem 3rem;
+  // padding: 2rem 3rem 4rem 3rem;
   background-image: var(--main-detail-background-img);
   background-size: cover;
-  background-position: top 100%;
+  background-position: top center;
   background-repeat: no-repeat;
-
-  overflow-y: scroll;
-  &::-webkit-scrollbar {
-    display: none;
+  overflow: hidden;
+  // height: ;
+  .detail-wrapper {
+    display: block;
+    width: 100%;
+    flex: 1;
+    height: calc(100% - var(--main-detail-margin) - 10px);
+    margin-top: var(--main-detail-margin);
+    overflow-y: scroll;
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
-
   .back {
     background-image: url("/img/back_arrow.png");
     width: 7.5rem;
@@ -80,11 +89,13 @@ watchEffect(() => {
     background-repeat: no-repeat;
     background-size: contain;
     margin-bottom: 0.75rem;
+    margin-left: 3rem;
   }
   .info {
     max-width: 66.8125rem;
     margin: 0 auto;
     font-size: 20px;
+    padding-bottom: 5rem;
     .title {
       font-size: 1.875rem;
       line-height: 3.75rem;

src/views/collect.vue

@@ -6,7 +6,7 @@
         <n-tabs type="line" pane-class="tab-content">
           <template #prefix>
             <span class="meta-title">
-              <img src="/img/subtitle_3.png" />
+              <img src="img/subtitle_3.png" />
             </span>
           </template>
           <template #suffix>

src/views/exhibition-detail.vue

@@ -7,10 +7,10 @@
         <div class="container">
           <div class="top_banner">
             <div class="go-back">
-              <img src="/img/ex_back.png" @click="$router.go(-1)" />
+              <img :src="exBack" @click="$router.go(-1)" />
             </div>
             <div class="vr-btn-container">
-              <img src="/img/vr_button.png" @click="handleVRButton" />
+              <img :src="vrBtn" @click="handleVRButton" />
             </div>
           </div>
 
@@ -40,6 +40,8 @@
 import heroSubTitle from "../components/heroSubTitle";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
+import exBack from "../assets/ex_back.png";
+import vrBtn from "../assets/vr_button.png";
 import { useRouter } from "vue-router";
 const router = useRouter();
 

src/views/exhibition.vue

@@ -6,7 +6,7 @@
         <n-tabs type="line" pane-class="tab-content">
           <template #prefix>
             <span class="meta-title">
-              <img src="/img/subtitle_2.png" />
+              <img src="img/subtitle_2.png" />
             </span>
           </template>
           <n-tab-pane name="all" tab="全部展览">

src/views/home.vue

@@ -12,7 +12,7 @@
         <img
           class="carousel-img"
           style="width: 100%; height: 100%; object-fit: cover"
-          src="/img/show_banner.png"
+          src="img/show_banner.png"
         />
         <template v-for="item in posters">
           <img
@@ -25,7 +25,7 @@
     </div>
     <div class="right">
       <div class="home_logo">
-        <img src="/img/logo.png" />
+        <img :src="Logo" />
       </div>
       <n-space class="navigate" justify="flex-start" align="center">
         <n-button class="btn btn_1" @click="push('/info')" text>
@@ -52,6 +52,7 @@
 import { computed, onBeforeMount, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useInfoStore } from "../store/info";
+import Logo from "../assets/logo.png";
 
 const { push } = useRouter();
 const InfoStore = useInfoStore();
@@ -59,7 +60,6 @@ const InfoStore = useInfoStore();
 const posters = computed(() => InfoStore.poster.data || []);
 const domain = ref(import.meta.env.VITE_DOMAIN_URL);
 
-
 onMounted(async () => {
   await InfoStore.getPoster();
 });

src/views/info.vue

@@ -6,7 +6,7 @@
         <n-tabs type="line" pane-class="tab-content">
           <template #prefix>
             <span class="meta-title">
-              <img src="/img/subtitle_1.png" />
+              <img src="img/subtitle_1.png" />
             </span>
           </template>
           <n-tab-pane name="展览" tab="展览">

src/views/survey-detail.vue

@@ -3,7 +3,7 @@
     <div class="content">
       <sub-header />
       <div class="left">
-        <hero-sub-title />
+        <hero-sub-title :type="4" />
         <div class="detail">
           <div class="back" @click="$router.go(-1)"></div>
           <div class="info"></div>

src/views/viewer.vue

@@ -3,7 +3,7 @@
     <img
       v-if="isShowback"
       class="btn-back"
-      src="/img/sub_back_btn.png"
+      :src="backBTN"
       @click="handleBack"
     />
     <iframe frameborder="0" :src="url"></iframe>
@@ -12,6 +12,7 @@
 <script setup>
 import { computed, watchEffect, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
+import backBTN from "../assets/sub_back_btn.png";
 const isShowback = ref(true);
 const router = useRouter();
 

vite.config.js

@@ -1,4 +1,4 @@
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from 'vite';
 import vue from "@vitejs/plugin-vue";
 import path from "path";
 import AutoImport from "unplugin-auto-import/vite";
@@ -6,38 +6,44 @@ import Components from "unplugin-vue-components/vite";
 import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
 import { ViteImageOptimizer } from "vite-plugin-image-optimizer";
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    AutoImport({
-      imports: [
-        "vue",
-        {
-          "naive-ui": [
-            "useDialog",
-            "useMessage",
-            "useNotification",
-            "useLoadingBar",
-          ],
+
+function pathResolve(dir) {
+  return path.resolve(process.cwd(), ".", dir);
+}
+export default ({ mode }) =>
+  defineConfig({
+    base: loadEnv(mode, process.cwd()).VITE_PUBLIC_DIR,
+    plugins: [
+      vue(),
+      AutoImport({
+        imports: [
+          "vue",
+          {
+            "naive-ui": [
+              "useDialog",
+              "useMessage",
+              "useNotification",
+              "useLoadingBar",
+            ],
+          },
+        ],
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()],
+      }),
+      ViteImageOptimizer({
+        png: {
+          quality: 100,
         },
-      ],
-    }),
-    Components({
-      resolvers: [NaiveUiResolver()],
-    }),
-    ViteImageOptimizer({
-      png: {
-        quality: 100,
-      },
-      jpg: {
-        quality: 100,
+        jpg: {
+          quality: 100,
+        },
+      }),
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve(__dirname, "src"),
       },
-    }),
-  ],
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "src"),
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
     },
-    extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
-  },
-});
+  });