From a41936dc0076b7ae50038da817d2406c9d96b925 Mon Sep 17 00:00:00 2001
From: "pikachu1995@126.com" <pikachu1995@126.com>
Date: Tue, 20 Oct 2026 14:14:46 +0800
Subject: [PATCH] =?UTF-8?q?fix(uniapp):=20=E4=BF=AE=E5=A4=8D=E6=BB=91?=
 =?UTF-8?q?=E5=9D=97=E9=AA=8C=E8=AF=81=20movable-area=20=E5=B5=8C=E5=A5=97?=
 =?UTF-8?q?=E5=A1=8C=E9=99=B7=E5=AF=BC=E8=87=B4=E6=97=A0=E6=B3=95=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/verification/verification.vue | 64 +++++++++++-------------
 1 file changed, 28 insertions(+), 36 deletions(-)

diff --git a/components/verification/verification.vue b/components/verification/verification.vue
index ee1f62b..ba2afa0 100644
--- a/components/verification/verification.vue
+++ b/components/verification/verification.vue
@@ -4,7 +4,7 @@
       v-if="!state.hid"
       class="flex-row-center"
       :style="{ top: state.scHight }"
-      style="width: 750rpx; position: fixed; z-index: 100; left: 0"
+      style="width: 750rpx; position: fixed; z-index: 100; left: 0; background-color: #ffffff; padding: 40rpx 0"
     >
       <view class="flex-column-center">
         <movable-area
@@ -44,33 +44,31 @@
           ></image>
         </movable-area>
 
-        <view class="v-track">
+        <movable-area class="v-track" animation="false">
           <view class="v-fill" :style="{ width: fillWidth }"></view>
           <text class="v-track-text" :style="{ color: state.col }">{{
             state.hasImg
           }}</text>
-          <movable-area class="v-area" animation="false">
-            <movable-view
-              scale-value="1"
-              animation="false"
-              damping="50"
-              :x="state.movePv"
-              class="v-handle"
-              :style="handleStyle"
-              direction="horizontal"
-              @change="moveChange"
-              @touchend="end"
-            >
-              <u-icon
-                color="#ffffff"
-                size="38"
-                v-if="state.endLoad"
-                name="arrow-right"
-              ></u-icon>
-              <u-icon color="#ffffff" size="38" v-else name="reload"></u-icon>
-            </movable-view>
-          </movable-area>
-        </view>
+          <movable-view
+            scale-value="1"
+            animation="false"
+            damping="50"
+            :x="state.movePv"
+            class="v-handle"
+            :style="handleStyle"
+            direction="horizontal"
+            @change="moveChange"
+            @touchend="end"
+          >
+            <u-icon
+              color="#ffffff"
+              size="38"
+              v-if="state.endLoad"
+              name="arrow-right"
+            ></u-icon>
+            <u-icon color="#ffffff" size="38" v-else name="reload"></u-icon>
+          </movable-view>
+        </movable-area>
 
         <view class="v-foot">
           <view class="v-icon-btn" @click="getCode">
@@ -116,7 +114,7 @@ const phone = uni.getSystemInfoSync()
 const l = phone.screenWidth / 750
 
 const mainColor = computed(() => store.getters.mainColor)
-const fillWidth = computed(() => `calc(${state.moveX}px + 42rpx)`)
+const fillWidth = computed(() => `${state.moveX + 42 * l}px`)
 const handleStyle = computed(() => {
   const glow = /^#[0-9a-fA-F]{6}$/.test(mainColor.value)
     ? mainColor.value + '59'
@@ -282,9 +280,6 @@ defineExpose({
   margin-top: 36rpx;
   background-color: #f7f7f8;
   border-radius: 42rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
 
 .v-fill {
@@ -297,17 +292,14 @@ defineExpose({
 }
 
 .v-track-text {
-  font-size: 26rpx;
-  letter-spacing: 2rpx;
-}
-
-.v-area {
   position: absolute;
   left: 0;
+  right: 0;
   top: 0;
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
+  line-height: 84rpx;
+  text-align: center;
+  font-size: 26rpx;
+  letter-spacing: 2rpx;
 }
 
 .v-handle {