feat: save

src/components/showCase.vue

@@ -2,6 +2,7 @@
   <div class="show-case-container">
     <div class="show-case" v-if="isModel">
       <iframe
+        ref="iframeRef"
         frameborder="0"
         src="https://www.4dmodel.com/SuperTwo/index.html?m=TEST"
       ></iframe>
@@ -72,10 +73,14 @@
         >
       </n-space>
       <div class="actions">
-        <div>
+        <div v-if="isModel">
           <img src="/img/zoom-in.png" />
           <img src="/img/zoom-out.png" />
-          <img src="/img/reload.png" />
+          <img src="/img/reload.png" @click="reloadIframe" />
+        </div>
+        <div v-if="isGallery">
+          <img src="/img/audio-muted.png" />
+          <img src="/img/audio-unmuted.png" />
         </div>
       </div>
     </div>
@@ -85,6 +90,7 @@
 <script setup>
 import { ref, computed } from "vue";
 
+const iframeRef = ref();
 const type = ref("model");
 const defaultType = ref(["model", "video", "audio", "gallery"]);
 
@@ -123,16 +129,23 @@ const props = defineProps({
     default: () => [""],
   },
 });
+
+const reloadIframe = () => {
+  if (iframeRef.value) {
+    iframeRef.value.reload();
+    // console.log()
+  }
+};
 </script>
 
 <style>
 .show-case-container {
-  --show-case-width: 66.8125rem;
-  --show-case-height: 34.1875rem;
-  --show-case-border-radius: 0.625rem;
+  --show-case-width: 1069px;
+  --show-case-height: 547px;
+  --show-case-border-radius: 10px;
   --show-case-background: #c1b2b2;
-  --show-case-tools-padding: 1rem;
-  --show-case-btn-font-size: 1.125rem;
+  --show-case-tools-padding: 16px;
+  --show-case-btn-font-size: 18px;
   --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");
@@ -179,11 +192,11 @@ const props = defineProps({
         flex-direction: row;
         align-items: center;
         .btn-img {
-          width: 61px;
-          height: 61px;
+          width: 3.8125rem;
+          height: 3.8125rem;
           pointer-events: all;
           cursor: pointer;
-          margin: 0 1.25rem;
+          margin: 0 20px;
         }
       }
     }
@@ -192,7 +205,8 @@ const props = defineProps({
   .tools {
     display: inline-flex;
     position: absolute;
-    bottom: 1.25rem;
+    height: 2.25rem;
+    bottom: 20px;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
@@ -203,9 +217,9 @@ const props = defineProps({
       display: inline-flex;
       align-items: center;
       img {
-        height: 2.5rem;
+        height: 40px;
         width: auto;
-        margin: 0 0.3125rem;
+        margin: 0 5px;
         cursor: pointer;
         pointer-events: all;
       }
@@ -216,10 +230,10 @@ const props = defineProps({
         color: white;
         pointer-events: all;
         font-size: var(--show-case-btn-font-size);
-        padding: 10px 40px;
+        padding: 0.625rem 2.5rem;
         img {
-          height: 1.25rem;
-          margin-right: 0.5rem;
+          height: 20px;
+          margin-right: 8px;
           width: auto;
         }
         &.btn {

src/style.css

@@ -130,6 +130,7 @@ body,
   height: 100%;
   overflow: hidden;
 }
+
 .page:not(.home) .main .content .n-tabs .v-x-scroll,
 .page:not(.home) .main .content .n-tabs .v-x-scroll * {
   height: 100%;

src/views/info.vue

@@ -89,4 +89,6 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+
+</style>