feat: 保存

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@vueuse/core": "^10.6.1",
     "@vueuse/integrations": "^10.6.1",
+    "@vueuse/sound": "^2.0.1",
     "axios": "^1.6.2",
     "naive-ui": "^2.35.0",
     "pinia": "^2.1.7",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@vueuse/integrations':
     specifier: ^10.6.1
     version: 10.6.1(axios@1.6.2)(vue@3.3.8)
+  '@vueuse/sound':
+    specifier: ^2.0.1
+    version: 2.0.1(vue@3.3.8)
   axios:
     specifier: ^1.6.2
     version: 1.6.2
@@ -601,6 +604,20 @@ packages:
       - '@vue/composition-api'
       - vue
 
+  /@vueuse/sound@2.0.1(vue@3.3.8):
+    resolution: {integrity: sha512-7Fbp9lQkuUnpTXS9vPbvT2FDYHuwJbvKPivOYETaVVSmcZKoczw6zcsebsARkH5Ged0f045YUOZnV/RuCzyLXQ==}
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^2.0.0 || >=3.0.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+    dependencies:
+      howler: 2.2.4
+      vue: 3.3.8
+      vue-demi: 0.14.6(vue@3.3.8)
+    dev: false
+
   /acorn@8.11.2:
     resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
     engines: {node: '>=0.4.0'}
@@ -1008,6 +1025,10 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: false
 
+  /howler@2.2.4:
+    resolution: {integrity: sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w==}
+    dev: false
+
   /ieee754@1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false

src/components/collectBox.vue

@@ -57,7 +57,7 @@ const handleDetail = () => {
   --n-padding-left: 0 !important;
   --n-padding-bottom: 0 !important;
   background: #f5f5f5;
-  box-shadow: 0px 2px 4px 0px rgba(46, 25, 16, 0.16);
+  box-shadow: 0rem .125rem .25rem 0rem rgba(46, 25, 16, 0.16);
   border-radius: 0.8125rem;
   padding: 0;
   cursor: pointer;
@@ -86,9 +86,9 @@ const handleDetail = () => {
       left: 0;
       position: absolute;
       background-image: var(--collect-box-title-dot);
-      background-size: 20px 20px;
-      width: 20px;
-      height: 20px;
+      background-size: 1.25rem 1.25rem;
+      width: 1.25rem;
+      height: 1.25rem;
       background-repeat: no-repeat;
       background-position: center left;
     }

src/components/infoBox.vue

@@ -55,9 +55,9 @@ defineProps({
   // width: 32.1875rem;
   // height: 26.5rem;
   background: #f5f5f5;
-  box-shadow: 0px 2px 4px 0px rgba(46,25,16,0.16);
+  box-shadow: 0rem .125rem .25rem 0rem rgba(46,25,16,0.16);
   border-radius: .8125rem;
-  border-top: 8px solid var(--main-primary-color);
+  border-top: .5rem solid var(--main-primary-color);
   .cover {
     background-color: gray;
     overflow: hidden;

src/components/showCase.vue

@@ -69,7 +69,8 @@
           }"
           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">
@@ -79,8 +80,11 @@
           <img src="/img/reload.png" @click="reloadIframe" />
         </div>
         <div v-if="isGallery">
-          <img src="/img/audio-muted.png" />
-          <img src="/img/audio-unmuted.png" />
+          <img src="/img/audio-muted.png" @click="stop" />
+          <img
+            src="/img/audio-unmuted.png"
+            @click="!isPlaying ? play() : () => {}"
+          />
         </div>
       </div>
     </div>
@@ -89,6 +93,7 @@
 
 <script setup>
 import { ref, computed } from "vue";
+import { useSound } from "@vueuse/sound";
 
 const iframeRef = ref();
 const type = ref("model");
@@ -98,10 +103,18 @@ 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 { play, isPlaying, stop } = useSound(
+  "//samplelib.com/lib/preview/mp3/sample-15s.mp3"
+);
 
 const handleSwitchType = (value) => {
   if (defaultType.value.includes(value)) {
     type.value = value;
+    if (value === "gallery") {
+      play();
+    } else {
+      stop();
+    }
   } else {
     type.value = "model";
   }
@@ -132,20 +145,21 @@ const props = defineProps({
 
 const reloadIframe = () => {
   if (iframeRef.value) {
-    iframeRef.value.reload();
-    // console.log()
+    try {
+      iframeRef.value.src += "";
+    } catch (error) {}
   }
 };
 </script>
 
 <style>
 .show-case-container {
-  --show-case-width: 1069px;
-  --show-case-height: 547px;
-  --show-case-border-radius: 10px;
+  --show-case-width: 66.8125rem;
+  --show-case-height: 34.1875rem;
+  --show-case-border-radius: 0.625rem;
   --show-case-background: #c1b2b2;
-  --show-case-tools-padding: 16px;
-  --show-case-btn-font-size: 18px;
+  --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");
@@ -196,7 +210,7 @@ const reloadIframe = () => {
           height: 3.8125rem;
           pointer-events: all;
           cursor: pointer;
-          margin: 0 20px;
+          margin: 0 1.25rem;
         }
       }
     }
@@ -206,7 +220,7 @@ const reloadIframe = () => {
     display: inline-flex;
     position: absolute;
     height: 2.25rem;
-    bottom: 20px;
+    bottom: 1.25rem;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
@@ -217,9 +231,9 @@ const reloadIframe = () => {
       display: inline-flex;
       align-items: center;
       img {
-        height: 40px;
+        height: 2.5rem;
         width: auto;
-        margin: 0 5px;
+        margin: 0 0.3125rem;
         cursor: pointer;
         pointer-events: all;
       }
@@ -230,10 +244,10 @@ const reloadIframe = () => {
         color: white;
         pointer-events: all;
         font-size: var(--show-case-btn-font-size);
-        padding: 0.625rem 2.5rem;
+        padding: 10px 40px;
         img {
-          height: 20px;
-          margin-right: 8px;
+          height: 1.25rem;
+          margin-right: 0.5rem;
           width: auto;
         }
         &.btn {

src/components/sideMenu.vue

@@ -39,10 +39,10 @@ defineOptions({
     background-image: var(--main-sub-logo);
     background-repeat: no-repeat;
     background-size: cover;
-    margin-top: 77px;
+    margin-top: 4.8125rem;
   }
   .back {
-    margin-bottom: 77px;
+    margin-bottom: 4.8125rem;
     width: var(--go-home-width);
     height: var(--go-home-width);
     border-radius: 50%;

src/views/feedback.vue

@@ -17,9 +17,20 @@
             />
 
             <n-space align="center" style="padding: 20px" justify="center">
-              <n-input size="large" type="text" placeholder="昵称" />
-              <n-input size="large" type="text" placeholder="联系方式" />
               <n-input
+                v-model:value="nickName"
+                size="large"
+                type="text"
+                placeholder="昵称"
+              />
+              <n-input
+                v-model:value="contact"
+                size="large"
+                type="text"
+                placeholder="联系方式"
+              />
+              <n-input
+                v-model:value="verifyCode"
                 size="large"
                 type="text"
                 placeholder="请填入图形验证码"
@@ -47,9 +58,18 @@ import heroSubTitle from "../components/heroSubTitle";
 import { useInfoStore } from "../store/info";
 const title = ref("detail");
 const feedBackContent = ref("");
+const nickName = ref("");
+const contact = ref("");
+const verifyCode = ref("");
 watchEffect(() => {
   document.title = title.value;
 });
+
+const submit = () => {
+
+
+
+};
 </script>
 
 <style lang="scss" scoped>