feat: --

packages/pc/src/views/Home/index.scss

@@ -27,28 +27,35 @@
     background: url("./images/title-min.png") no-repeat center / contain;
     z-index: 5;
   }
-  &-menu {
+  &-sidebar {
     position: fixed;
-    top: 50%;
-    left: utils.vw-calc(30);
+    left: utils.vw-calc(70);
+    bottom: utils.vh-calc(264);
+    padding-top: utils.vh-calc(138);
+    width: utils.vh-calc(203);
+    height: utils.vh-calc(429);
+    background: url("./images/m-bg.png") no-repeat center / cover;
+    z-index: 1;
+  }
+  &-menu {
+    position: relative;
+    left: utils.vh-calc(-4);
     display: flex;
     flex-direction: column;
-    gap: utils.vh-calc(10);
-    transform: translateY(-50%);
-    z-index: 10;
 
     &-item {
-      width: utils.vh-calc(194);
-      height: utils.vh-calc(54);
+      width: utils.vh-calc(211);
+      height: utils.vh-calc(53);
       background-size: 100% 100%;
       background-repeat: no-repeat;
       cursor: pointer;
     }
   }
   &-tab {
-    position: fixed;
-    right: utils.vw-calc(57);
-    bottom: utils.vh-calc(68);
+    position: absolute;
+    top: utils.vh-calc(-90);
+    left: 50%;
+    transform: translateX(-50%);
     width: utils.vh-calc(273);
     height: utils.vh-calc(188);
     background: url("./images/tab-bg.png") no-repeat center / contain;

packages/pc/src/views/Home/index.vue

@@ -1,20 +1,31 @@
 <template>
   <div class="home">
-    <ul class="home-menu">
-      <li
-        v-for="index in 4"
-        :key="index"
-        class="home-menu-item"
-        :style="{
-          backgroundImage: `url(${
-            mIndex === index - 1
-              ? MIMAGES[index - 1].active
-              : MIMAGES[index - 1].default
-          })`,
-        }"
-        @click="handleMenu(index)"
-      />
-    </ul>
+    <div class="home-sidebar">
+      <div class="home-tab">
+        <div class="story" @click="$router.push({ name: 'story' })" />
+        <div class="biographies" @click="biographiesVisible = true" />
+      </div>
+
+      <ul class="home-menu">
+        <li
+          v-for="index in 4"
+          :key="index"
+          class="home-menu-item"
+          :style="{
+            backgroundImage: `url(${
+              hoverIndex === index
+                ? MIMAGES[index - 1].active
+                : mIndex === index - 1
+                ? MIMAGES[index - 1].active
+                : MIMAGES[index - 1].default
+            })`,
+          }"
+          @mouseover="hoverIndex = index"
+          @mouseleave="hoverIndex = -1"
+          @click="handleMenu(index)"
+        />
+      </ul>
+    </div>
 
     <div class="map">
       <div
@@ -64,11 +75,6 @@
         </transition>
       </div>
     </div>
-
-    <div class="home-tab">
-      <div class="story" @click="$router.push({ name: 'story' })" />
-      <div class="biographies" @click="biographiesVisible = true" />
-    </div>
   </div>
 
   <Biographies v-model:visible="biographiesVisible" />
@@ -85,6 +91,7 @@ import SharePopup from "./components/SharePopup.vue";
 const router = useRouter();
 const mIndex = ref(-1);
 const pIndex = ref(-1);
+const hoverIndex = ref(-1);
 const shareVisible = ref(false);
 const biographiesVisible = ref(false);
 

packages/pc/src/views/Step4Detail/index.scss

@@ -20,7 +20,7 @@
     background: url("@/assets/images/back-min.png") no-repeat center / contain;
   }
   &__title {
-    width: utils.vh-calc(97);
+    width: utils.vh-calc(210);
     height: utils.vh-calc(31);
   }
   &-content {

packages/pc/src/views/Step4Detail/index.vue

@@ -52,13 +52,92 @@ const showCanvas = ref(false);
 const showMask = ref(true);
 const audioPlaying = ref(false);
 let audio = null;
+let signatureInstance = null;
+
+// 将触摸事件转换为鼠标事件，以支持触摸屏
+const setupTouchSupport = (canvas) => {
+  // 触摸开始
+  canvas.addEventListener(
+    "touchstart",
+    (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      if (touch) {
+        const mouseEvent = new MouseEvent("mousedown", {
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+          bubbles: true,
+          cancelable: true,
+          buttons: 1,
+        });
+        canvas.dispatchEvent(mouseEvent);
+      }
+    },
+    { passive: false }
+  );
+
+  // 触摸移动
+  canvas.addEventListener(
+    "touchmove",
+    (e) => {
+      e.preventDefault();
+      const touch = e.touches[0];
+      if (touch) {
+        const mouseEvent = new MouseEvent("mousemove", {
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+          bubbles: true,
+          cancelable: true,
+          buttons: 1,
+        });
+        canvas.dispatchEvent(mouseEvent);
+      }
+    },
+    { passive: false }
+  );
+
+  // 触摸结束
+  canvas.addEventListener(
+    "touchend",
+    (e) => {
+      e.preventDefault();
+      const touch = e.changedTouches[0];
+      if (touch) {
+        const mouseEvent = new MouseEvent("mouseup", {
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+          bubbles: true,
+          cancelable: true,
+        });
+        canvas.dispatchEvent(mouseEvent);
+      }
+    },
+    { passive: false }
+  );
+
+  // 触摸取消
+  canvas.addEventListener(
+    "touchcancel",
+    (e) => {
+      e.preventDefault();
+      const mouseEvent = new MouseEvent("mouseup", {
+        bubbles: true,
+        cancelable: true,
+      });
+      canvas.dispatchEvent(mouseEvent);
+    },
+    { passive: false }
+  );
+};
 
 const handleMaskClick = async () => {
   showMask.value = false;
   await nextTick();
   const canvas = document.querySelector(".step4-detail-canvas-content canvas");
   if (canvas) {
-    new SmoothSignature(canvas);
+    signatureInstance = new SmoothSignature(canvas);
+    // 添加触摸事件支持
+    setupTouchSupport(canvas);
   }
 
   if (audio) {