feat: 临时保存

src/components/showCase.vue

@@ -1,16 +1,75 @@
 <template>
   <div class="show-case-container">
-    <div class="show-case">
+    <div class="show-case" v-if="isModel">
       <iframe
         frameborder="0"
         src="https://www.4dmodel.com/SuperTwo/index.html?m=TEST"
       ></iframe>
     </div>
+    <div class="show-case" v-if="isVideo">
+      <video
+        src="https://4dscene.4dage.com/new4dkk/v2/video/homeVideoNew.mp4"
+        autoplay
+        playsinline
+      ></video>
+    </div>
+    <div class="show-case" v-if="isGallery">
+      <n-carousel draggable :show-dots="false" show-arrow>
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
+        />
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
+        />
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
+        />
+        <img
+          class="carousel-img"
+          src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
+        />
+
+        <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" />
+          </div>
+        </template>
+      </n-carousel>
+    </div>
     <div class="tools">
       <n-space class="group-type" :size="25">
-        <n-button type="primary" round>模型</n-button>
-        <n-button type="primary" round>视频</n-button>
-        <n-button type="primary" round>图片</n-button>
+        <n-button
+          class="model btn"
+          :class="{
+            active: isModel,
+          }"
+          round
+          @click="handleSwitchType('model')"
+        >
+          <img src="/img/icon_model.png" /> 模型
+        </n-button>
+        <n-button
+          class="video btn"
+          :class="{
+            active: isVideo,
+          }"
+          round
+          @click="handleSwitchType('video')"
+          ><img src="/img/icon_video.png" />视频</n-button
+        >
+        <n-button
+          class="gallery btn"
+          :class="{
+            active: isGallery,
+          }"
+          round
+          @click="handleSwitchType('gallery')"
+          ><img src="/img/icon_photo.png" />图片</n-button
+        >
       </n-space>
       <div class="actions">
         <div>
@@ -27,11 +86,21 @@
 import { ref, computed } from "vue";
 
 const type = ref("model");
+const defaultType = ref(["model", "video", "audio", "gallery"]);
 
 const isModel = computed(() => type.value === "model");
 const isVideo = computed(() => type.value === "video");
 const isAudio = computed(() => type.value === "audio");
 const isGallery = computed(() => type.value === "gallery");
+
+const handleSwitchType = (value) => {
+  if (defaultType.value.includes(value)) {
+    type.value = value;
+  } else {
+    type.value = "model";
+  }
+};
+
 defineOptions({
   name: "show-case",
 });
@@ -64,6 +133,12 @@ const props = defineProps({
   --show-case-background: #c1b2b2;
   --show-case-tools-padding: 1rem;
   --show-case-btn-font-size: 1.125rem;
+  --show-case-btn-model-bg: url("/img/show_case_m_bg.png");
+  --show-case-btn-model-bg-active: url("/img/show_case_m_bg_active.png");
+  --show-case-btn-video-bg: url("/img/show_case_v_bg.png");
+  --show-case-btn-video-bg-active: url("/img/show_case_v_bg_active.png");
+  --show-case-btn-gallery-bg: url("/img/show_case_p_bg.png");
+  --show-case-btn-gallery-bg-active: url("/img/show_case_p_bg_active.png");
 }
 </style>
 
@@ -77,10 +152,40 @@ const props = defineProps({
   .show-case {
     width: 100%;
     height: 100%;
-    iframe {
+    iframe,
+    video,
+    :deep(.n-carousel) {
       width: 100%;
       height: 100%;
     }
+    :deep(.n-carousel) {
+      .carousel-img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .custom-arrow {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        // background: red;
+        z-index: 111;
+        pointer-events: none;
+        display: inline-flex;
+        justify-content: space-between;
+        flex-direction: row;
+        align-items: center;
+        .btn-img {
+          width: 61px;
+          height: 61px;
+          pointer-events: all;
+          cursor: pointer;
+          margin: 0 1.25rem;
+        }
+      }
+    }
   }
 
   .tools {
@@ -106,9 +211,27 @@ const props = defineProps({
     }
     .group-type {
       :deep(.n-button) {
+        background-color: #ababab;
+        color: white;
         pointer-events: all;
         font-size: var(--show-case-btn-font-size);
         padding: 10px 40px;
+        img {
+          height: 1.25rem;
+          margin-right: 0.5rem;
+          width: auto;
+        }
+        &.btn {
+          background-size: cover;
+          background-repeat: no-repeat;
+        }
+        &.model {
+          // background-image: var(--show-case-btn-model-bg);
+        }
+        &.active {
+          background-color: var(--main-primary-color);
+          border-color: var(--main-primary-color);
+        }
       }
     }
   }

src/style.css

@@ -124,7 +124,7 @@ body,
 /* .tab-content */
 .page:not(.home) .main .content .n-tabs {
   --n-tab-font-size: 1.25rem !important;
-  --n-tab-gap: 60px !important;
+  --n-tab-gap: 120px !important;
   --n-pane-padding-top: 3.125rem !important;
   --n-pane-padding-bottom: 3.125rem !important;
   height: 100%;

src/views/collect-detail.vue

@@ -42,7 +42,7 @@ import { watchEffect, ref } from "vue";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
 import heroSubTitle from "../components/heroSubTitle";
-import showCase from "../components/showCase.vue";
+import showCase from "../components/showCase";
 
 const title = ref("collect-detail");
 
@@ -56,13 +56,17 @@ watchEffect(() => {
   --main-show-case-background: #ddd5d5;
   --main-detail-margin: 1.875rem;
   --main-detail-padding: 1.875rem;
-  box-shadow: var(--main-box-shadow);
+  // box-shadow: var(--main-box-shadow);
   margin: var(--main-detail-margin);
   margin-bottom: 0;
   flex: 1;
   border-radius: 0.8125rem;
-  background: #fff;
+  background-color: transparent;
   padding: 2rem 3rem 4rem 3rem;
+  background-image: var(--main-detail-background-img);
+  background-size: cover;
+  background-position: top 100%;
+  background-repeat: no-repeat;
 
   overflow-y: scroll;
   &::-webkit-scrollbar {
@@ -81,7 +85,6 @@ watchEffect(() => {
     max-width: 66.8125rem;
     margin: 0 auto;
     font-size: 20px;
-
     .title {
       font-size: 1.875rem;
       line-height: 3.75rem;

src/views/collect.vue

@@ -21,7 +21,7 @@
                   v-model:value="inputValue"
                   placeholder="请输入要搜索的藏品"
                 />
-                <n-button round type="primary" > 搜索 </n-button>
+                <n-button round type="primary"> 搜索 </n-button>
               </n-input-group>
             </span>
           </template>
@@ -94,17 +94,17 @@ import { useFullscreen } from "@vueuse/core";
 import collectBox from "../components/collectBox";
 import subHeader from "../components/subHeader";
 import sideMenu from "../components/sideMenu";
-import noticeBox from "../components/noticeBox";
-import { useInfoStore } from "../store/info";
+// import noticeBox from "../components/noticeBox";
+// import { useInfoStore } from "../store/info";
 
 const XGap = ref(50);
 const YGap = ref(50);
 const inputValue = ref("");
-const { isFullscreen, enter, exit, toggle } = useFullscreen();
-const InfoStore = useInfoStore();
+
+// const InfoStore = useInfoStore();
 
 onMounted(() => {
-  InfoStore.getData();
+  // InfoStore.getData();
 });
 </script>
 
@@ -114,7 +114,9 @@ onMounted(() => {
   flex: 1;
   .input-container {
     width: 100%;
+    max-width: 515px;
     padding: 0 20px;
   }
 }
+
 </style>

src/views/info-detail.vue

@@ -55,13 +55,17 @@ watchEffect(() => {
   --main-show-case-background: #ddd5d5;
   --main-detail-margin: 1.875rem;
   --main-detail-padding: 1.875rem;
-  box-shadow: var(--main-box-shadow);
+  // box-shadow: var(--main-box-shadow);
   margin: var(--main-detail-margin);
   margin-bottom: 0;
   flex: 1;
   border-radius: 0.8125rem;
-  background: #fff;
+  background: transparent;
   padding: 2rem 3rem 4rem 3rem;
+  background-image: var(--main-detail-background-img);
+  background-size: cover;
+  background-position: top 100%;
+  background-repeat: no-repeat;
 
   overflow-y: scroll;
   &::-webkit-scrollbar {

src/views/survey.vue

@@ -3,10 +3,8 @@
     <div class="content">
       <sub-header />
       <div class="left">
-        <hero-sub-title :type="4"/>
+        <hero-sub-title :type="4" />
         <div class="detail">
-          <!-- <div class="back" @click="$router.go(-1)"></div> -->
-
           <div class="info">
             <n-grid :y-gap="YGap" :cols="1" class="tab-grid">
               <template v-for="(_, index) in 16">