style: 修改滑动验证模块颜色，修改登录顶部渐变颜色

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -5,7 +5,7 @@ const props = defineProps({
   data: Object
 })
 
-const activeNames = ref<string[]>([])
+const activeNames = ref<number[]>([])
 
 const containerStatusData: any = ref([])
 watch(
@@ -13,6 +13,9 @@ watch(
   (newVal) => {
     if (newVal) {
       containerStatusData.value = newVal
+      if (containerStatusData.value.length === 1) {
+        activeNames.value = [0]
+      }
     } else {
       containerStatusData.value = []
     }

src/views/Login/src/components/ChangePasswordCard.vue

@@ -242,7 +242,8 @@ const checkPassword = () => {
     margin-bottom: 24px;
     padding: 40px 40px 0;
     background: url(../image/bg-login-card.png) no-repeat center center;
-
+    background-position: top left; /* 从左上角开始显示 */
+    background-size: 400px 100px; /* 保持背景图像的原始尺寸 */
     .welcome {
       margin-bottom: 16px;
       font-size: 24px;

src/views/Login/src/loginView.vue

@@ -249,176 +249,168 @@ const errorTipsRef = ref()
 <template>
   <div class="login">
     <ScoringSystem class="scoring-system"></ScoringSystem>
-    <div style="background-color: white">
-      <el-card class="login-card" v-if="status === 'login'">
-        <div class="card-title">
-          <span class="welcome">Welcome to KLN Portal</span>
-          <span class="tips">Login to your account</span>
+    <el-card class="login-card" v-if="status === 'login'">
+      <div class="card-title">
+        <span class="welcome">Welcome to KLN Portal</span>
+        <span class="tips">Login to your account</span>
+      </div>
+      <div class="send-email-tips" :style="{ display: isEmailTips ? 'flex' : 'none' }">
+        <div>
+          <span class="font_family icon-icon_confirm_b success-icon"></span>
+          <span class="text-content">{{ emailTipsContent }}</span>
         </div>
-        <div class="send-email-tips" :style="{ display: isEmailTips ? 'flex' : 'none' }">
-          <div>
-            <span class="font_family icon-icon_confirm_b success-icon"></span>
-            <span class="text-content">{{ emailTipsContent }}</span>
-          </div>
-
-          <span
-            @click="handleDeleteEmailTips"
-            class="font_family icon-icon_reject_b delete-icon"
-          ></span>
+
+        <span
+          @click="handleDeleteEmailTips"
+          class="font_family icon-icon_reject_b delete-icon"
+        ></span>
+      </div>
+      <div class="login-form">
+        <div class="label">
+          <span>User Name</span>
+        </div>
+        <el-input
+          ref="userNameRef"
+          :class="{ 'is-error': loginError.username }"
+          v-model="loginForm.username"
+          class="user-name"
+          placeholder="Please input user name"
+          @focus="handleDeleteEmailTips('username')"
+          @blur="handleCheckUser"
+        >
+          <template #prefix>
+            <span class="font_family icon-icon_username_b"></span>
+          </template>
+          <template #suffix>
+            <span v-if="isUserNameExit" class="font_family icon-icon_confirm_b confirm-icon"></span>
+          </template>
+        </el-input>
+        <div class="error" v-if="loginError.username">This account does not exist.</div>
+        <div class="label">
+          <span>Password</span>
+          <span class="forgot-password" @click="handleForgot">Forgot Password?</span>
+        </div>
+        <el-input
+          ref="passWordRef"
+          :class="{ 'is-error': loginError.password }"
+          v-model="loginForm.password"
+          type="password"
+          placeholder="Please input password"
+          show-password
+          @focus="handleDeleteEmailTips('password')"
+          ><template #prefix>
+            <span class="font_family icon-icon_password_b"></span>
+          </template>
+        </el-input>
+        <div class="error" v-if="loginError.password">Incorrect password. Please try again.</div>
+        <el-input
+          ref="codeRef"
+          :class="{ 'is-error': loginError.code }"
+          class="verification-code"
+          v-model="loginForm.code"
+          placeholder="Verification Code"
+          @focus="handleDeleteEmailTips('code')"
+          @keyup.enter="handleLogin"
+        >
+          <template #append>
+            <img
+              v-vloading="loading"
+              @click="getCode"
+              class="verification-code-img"
+              :src="verificationCode"
+              alt=""
+            />
+          </template>
+        </el-input>
+        <div class="error" v-if="loginError.code">Incorrect verification code.</div>
+        <el-checkbox
+          class="remember-password"
+          v-model="isRememerPwd"
+          label="Remember Password"
+          size="large"
+        />
+        <el-button @click="handleLogin" class="el-button--dark login-btn">Login</el-button>
+      </div>
+      <template #footer>
+        <div class="license">
+          <span>© 2024 KTreker from <span class="company">Kerry Logistics</span></span>
+          <span>Version 0.67</span>
         </div>
-        <div class="login-form">
-          <div class="label">
-            <span>User Name</span>
-          </div>
-          <el-input
-            ref="userNameRef"
-            :class="{ 'is-error': loginError.username }"
-            v-model="loginForm.username"
-            class="user-name"
-            placeholder="Please input user name"
-            @focus="handleDeleteEmailTips('username')"
-            @blur="handleCheckUser"
-          >
-            <template #prefix>
-              <span class="font_family icon-icon_username_b"></span>
-            </template>
-            <template #suffix>
-              <span
-                v-if="isUserNameExit"
-                class="font_family icon-icon_confirm_b confirm-icon"
-              ></span>
-            </template>
-          </el-input>
-          <div class="error" v-if="loginError.username">This account does not exist.</div>
-          <div class="label">
-            <span>Password</span>
-            <span class="forgot-password" @click="handleForgot">Forgot Password?</span>
-          </div>
-          <el-input
-            ref="passWordRef"
-            :class="{ 'is-error': loginError.password }"
-            v-model="loginForm.password"
-            type="password"
-            placeholder="Please input password"
-            show-password
-            @focus="handleDeleteEmailTips('password')"
-            ><template #prefix>
-              <span class="font_family icon-icon_password_b"></span>
-            </template>
-          </el-input>
-          <div class="error" v-if="loginError.password">Incorrect password. Please try again.</div>
-          <el-input
-            ref="codeRef"
-            :class="{ 'is-error': loginError.code }"
-            class="verification-code"
-            v-model="loginForm.code"
-            placeholder="Verification Code"
-            @focus="handleDeleteEmailTips('code')"
-            @keyup.enter="handleLogin"
-          >
-            <template #append>
-              <img
-                v-vloading="loading"
-                @click="getCode"
-                class="verification-code-img"
-                :src="verificationCode"
-                alt=""
-              />
-            </template>
-          </el-input>
-          <div class="error" v-if="loginError.code">Incorrect verification code.</div>
-          <el-checkbox
-            class="remember-password"
-            v-model="isRememerPwd"
-            label="Remember Password"
-            size="large"
-          />
-          <el-button @click="handleLogin" class="el-button--dark login-btn">Login</el-button>
+      </template>
+    </el-card>
+    <el-card class="login-card" v-else-if="status === 'reset'">
+      <div class="card-title">
+        <span class="welcome">Password Retrieval</span>
+        <span class="tips">We'll send your password to your email address.</span>
+      </div>
+      <div class="login-form">
+        <div class="label">
+          <span>User Name</span>
         </div>
-        <template #footer>
-          <div class="license">
-            <span>© 2024 KTreker from <span class="company">Kerry Logistics</span></span>
-            <span>Version 0.67</span>
-          </div>
-        </template>
-      </el-card>
-      <el-card class="login-card" v-else-if="status === 'reset'">
-        <div class="card-title">
-          <span class="welcome">Password Retrieval</span>
-          <span class="tips">We'll send your password to your email address.</span>
+        <el-input
+          ref="userNameRef"
+          :class="{ 'is-error': loginError.username }"
+          v-model="loginForm.username"
+          class="user-name"
+          placeholder="Please input user name"
+          @focus="handleDeleteEmailTips('username')"
+          @blur="handleCheckUser"
+        >
+          <template #prefix>
+            <span class="font_family icon-icon_username_b"></span>
+          </template>
+          <template #suffix>
+            <span v-if="isUserNameExit" class="font_family icon-icon_confirm_b confirm-icon"></span>
+          </template>
+        </el-input>
+        <div class="error" v-if="loginError.username">This account does not exist</div>
+        <div class="label">
+          <span>Email Address</span>
         </div>
-        <div class="login-form">
-          <div class="label">
-            <span>User Name</span>
-          </div>
-          <el-input
-            ref="userNameRef"
-            :class="{ 'is-error': loginError.username }"
-            v-model="loginForm.username"
-            class="user-name"
-            placeholder="Please input user name"
-            @focus="handleDeleteEmailTips('username')"
-            @blur="handleCheckUser"
-          >
-            <template #prefix>
-              <span class="font_family icon-icon_username_b"></span>
-            </template>
-            <template #suffix>
-              <span
-                v-if="isUserNameExit"
-                class="font_family icon-icon_confirm_b confirm-icon"
-              ></span>
-            </template>
-          </el-input>
-          <div class="error" v-if="loginError.username">This account does not exist</div>
-          <div class="label">
-            <span>Email Address</span>
-          </div>
-          <el-input
-            ref="passWordRef"
-            :class="{ 'is-error': loginError.email }"
-            v-model="loginForm.email"
-            placeholder="Please input your email address"
-            @focus="handleDeleteEmailTips('email')"
-            ><template #prefix>
-              <span class="font_family icon-icon_email_b"></span>
-            </template>
-          </el-input>
-          <div class="error" v-if="loginError.email">Incorrect email. Please try again.</div>
-          <el-input
-            ref="codeRef"
-            :class="{ 'is-error': loginError.code }"
-            class="verification-code"
-            v-model="loginForm.code"
-            placeholder="Verification Code"
-            @focus="handleDeleteEmailTips('code')"
-            @keyup.enter="handleSendPassword"
-            ><template #append>
-              <img
-                v-vloading="loading"
-                class="verification-code-img"
-                :src="verificationCode"
-                @click="getCode"
-                alt=""
-              /> </template
-          ></el-input>
-          <div class="error" v-if="loginError.code">Incorrect verification code.</div>
-          <el-button @click="handleSendPassword" class="el-button--dark login-btn"
-            >Send Password</el-button
-          >
-          <div @click="backLogin(false)" class="back-text">
-            <span class="font_family icon-icon_back_b"></span>
-            <span class="text"> Back to login</span>
-          </div>
+        <el-input
+          ref="passWordRef"
+          :class="{ 'is-error': loginError.email }"
+          v-model="loginForm.email"
+          placeholder="Please input your email address"
+          @focus="handleDeleteEmailTips('email')"
+          ><template #prefix>
+            <span class="font_family icon-icon_email_b"></span>
+          </template>
+        </el-input>
+        <div class="error" v-if="loginError.email">Incorrect email. Please try again.</div>
+        <el-input
+          ref="codeRef"
+          :class="{ 'is-error': loginError.code }"
+          class="verification-code"
+          v-model="loginForm.code"
+          placeholder="Verification Code"
+          @focus="handleDeleteEmailTips('code')"
+          @keyup.enter="handleSendPassword"
+          ><template #append>
+            <img
+              v-vloading="loading"
+              class="verification-code-img"
+              :src="verificationCode"
+              @click="getCode"
+              alt=""
+            /> </template
+        ></el-input>
+        <div class="error" v-if="loginError.code">Incorrect verification code.</div>
+        <el-button @click="handleSendPassword" class="el-button--dark login-btn"
+          >Send Password</el-button
+        >
+        <div @click="backLogin(false)" class="back-text">
+          <span class="font_family icon-icon_back_b"></span>
+          <span class="text"> Back to login</span>
         </div>
-        <template #footer>
-          <div class="license">
-            <span>© 2024 KTreker from <span class="company">Kerry Logistics</span></span>
-            <span>Version 0.67</span>
-          </div>
-        </template>
-      </el-card>
-    </div>
+      </div>
+      <template #footer>
+        <div class="license">
+          <span>© 2024 KTreker from <span class="company">Kerry Logistics</span></span>
+          <span>Version 0.67</span>
+        </div>
+      </template>
+    </el-card>
 
     <ErrorTips ref="errorTipsRef" @forget-password="status = 'reset'"></ErrorTips>
   </div>
@@ -432,7 +424,8 @@ const errorTipsRef = ref()
   align-items: center;
   height: 100%;
   width: 100%;
-  background: url(../src/image/bg.png) no-repeat;
+  background: url(../src/image/bg.png) no-repeat center center;
+  background-size: cover;
   .scoring-system {
     position: absolute;
     top: 0;
@@ -443,23 +436,16 @@ const errorTipsRef = ref()
 
 .login-card {
   width: 400px;
-  background: url(../src/image/bg-login-card.png) no-repeat center center;
-  background-position: top left; /* 从左上角开始显示 */
-  background-size: 400px 100px; /* 保持背景图像的原始尺寸 */
+
   .card-title {
     display: flex;
     flex-direction: column;
     align-items: center;
     height: 94px;
     padding-top: 32px;
-    // background: linear-gradient(
-    //   251deg,
-    //   #ffffff4d,
-    //   #fff4eb80 22.66%,
-    //   #f0f3ff80 44.57%,
-    //   #e0f7f999 80.46%,
-    //   #ffffff4d
-    // );
+    background: url(../src/image/bg-login-card.png) no-repeat center center;
+    background-position: top left; /* 从左上角开始显示 */
+    background-size: 400px 100px; /* 保持背景图像的原始尺寸 */
 
     .welcome {
       margin-bottom: 16px;

src/views/Tracking/src/components/PublicTracking/src/components/SlideVerify.vue

@@ -1,16 +1,21 @@
 <script lang="ts" setup>
-const dialogVisible = ref(true)
+const dialogVisible = ref(false)
 
 const position = ref(0)
 const isDragging = ref(false)
 const verifyText = ref('Swipe right to verify')
-const sliderState = ref<'start' | 'success' | 'error'>('start')
+const sliderState = ref<'start' | 'success' | 'error' | 'dragging'>('start')
 const styleMap = {
   start: {
     thumbColor: 'var(--color-neutral-1)',
     thumbIcon: 'icon-icon_drag__line_b',
     trackBackground: '#87909e'
   },
+  dragging: {
+    thumbColor: 'var(--color-neutral-1)',
+    thumbIcon: 'icon-icon_drag__line_b',
+    trackBackground: 'var(--color-success)'
+  },
   success: {
     thumbColor: '#fff',
     thumbIcon: 'icon-icon_confirm_b',
@@ -24,8 +29,20 @@ const styleMap = {
 }
 const trackRef = ref<HTMLElement | null>(null)
 
-const startDrag = (event: MouseEvent) => {
-  // 如果已经成功验证，则不允许再次拖动
+const getTrackBackground = () => {
+  const trackWidth = trackRef.value?.offsetWidth || 320
+  const progress = (position.value / (trackWidth - 40)) * 100 // 百分比
+  if (sliderState.value === 'start') {
+    return styleMap.start.trackBackground // 初始时灰色
+  } else if (sliderState.value === 'dragging') {
+    return `linear-gradient(90deg, ${styleMap.success.trackBackground} ${progress}%, ${styleMap.start.trackBackground} ${progress}%)`
+  } else if (sliderState.value === 'error') {
+    return `linear-gradient(90deg, ${styleMap.error.trackBackground} ${progress}%, ${styleMap.start.trackBackground} ${progress}%)`
+  }
+  return styleMap.success.trackBackground // 成功时整条绿色
+}
+
+const startDrag = () => {
   if (sliderState.value === 'success') {
     return
   }
@@ -38,7 +55,7 @@ const startDrag = (event: MouseEvent) => {
 const onDrag = (event: MouseEvent) => {
   if (isDragging.value) {
     if (trackRef.value) {
-      sliderState.value = 'start'
+      sliderState.value = 'dragging'
       verifyText.value = 'Swipe right to verify'
       const rect = trackRef.value.getBoundingClientRect()
       const offsetX = event.clientX - rect.left
@@ -52,22 +69,27 @@ const stopDrag = () => {
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('mouseup', stopDrag)
 
-  // 检查是否滑动到位
   if (trackRef.value) {
     const trackWidth = trackRef.value.offsetWidth
     if (position.value >= trackWidth - 40) {
       sliderState.value = 'success'
       verifyText.value = 'Verification successful'
+      setTimeout(() => {
+        dialogVisible.value = false
+      }, 500)
     } else {
       sliderState.value = 'error'
       verifyText.value = 'Verification failed'
-      // position.value = 0; // 重置位置
+      setTimeout(() => {
+        sliderState.value = 'start'
+        verifyText.value = 'Swipe right to verify'
+        position.value = 0
+      }, 3000)
     }
   }
 }
 
 const moveSlider = (event: MouseEvent) => {
-  // 仅在未成功时允许点击移动滑块
   if (sliderState.value !== 'success') {
     onDrag(event)
   }
@@ -82,7 +104,7 @@ const moveSlider = (event: MouseEvent) => {
       <div class="slider-container">
         <div
           class="slider-track"
-          :style="{ backgroundColor: styleMap[sliderState].trackBackground }"
+          :style="{ background: getTrackBackground() }"
           @click="moveSlider"
           ref="trackRef"
         >
@@ -93,7 +115,7 @@ const moveSlider = (event: MouseEvent) => {
             @mousedown="startDrag"
           >
             <span
-              v-if="sliderState === 'start'"
+              v-if="sliderState === 'start' || sliderState === 'dragging'"
               class="font_family"
               :style="{ color: styleMap[sliderState].thumbColor }"
               :class="[styleMap[sliderState].thumbIcon]"
@@ -126,8 +148,8 @@ const moveSlider = (event: MouseEvent) => {
 .slider-container {
   width: 320px;
   margin: 16px auto 0;
-
   text-align: center;
+  user-select: none;
 }
 .slider-track {
   position: relative;