吉安感知网项目-前端
chenyao
2026-01-15 d086ea096dbc2e5bc29a20a9e9280f5ccc5868b7
uniapps/work-wx/src/subPackages/userDetail/password/index.vue
@@ -1,6 +1,6 @@
<!-- 修改密码 -->
<template>
   <view class="container">
   <view class="user-password">
      <view class="pageBg"></view>
      <view class="detailBox">
         <div class="detailCon">
@@ -20,7 +20,7 @@
            <div class="orderRow">
               <div class="rowTitle">验证码</div>
               <input type="text" v-model="passwordForm.code" placeholder="请输入验证码" class="input-item" />
               <u-button class="getCode" :disabled="countDown > 0" @click="sendVerificationCode" type="primary" color="#007AFF">
               <u-button :disabled="countDown > 0" @click="sendVerificationCode" type="primary" color="#007AFF">
                  {{ countDown > 0 ? `${countDown}s后重发` : '获取验证码' }}
               </u-button>
            </div>
@@ -34,6 +34,7 @@
</template>
<script setup>
   import userbgSvg from "@/static/images/user/userbg.svg";
   import {
      useUserStore
   } from "@/store/index.js";
@@ -246,126 +247,125 @@
</script>
<style lang="scss" scoped>
   .container {
   .user-password {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
   }
   .pageBg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url("@/static/images/user/userbg.svg")  no-repeat ;
      background-size: 100%;
   }
   .detailBox {
      position: absolute;
      top: 180rpx;
      // margin-top: 40rpx;
      width: 702rpx;
      min-height: 326rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
      .detailCon {
         padding: 0 24rpx;
      .pageBg {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-image: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ztzf_app_assets/images/user/bg.png");
         background-size: 100%;
      }
      .orderRow {
      .detailBox {
         position: absolute;
         top: 180rpx;
         // margin-top: 40rpx;
         width: 702rpx;
         min-height: 326rpx;
         background: #FFFFFF;
         border-radius: 12rpx;
         box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
         .detailCon {
            padding: 0 24rpx;
         }
         .orderRow {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 96rpx;
            border-bottom: 2rpx solid #f5f5f5;
            color: #7b7b7b;
            .rowTitle {
               font-family: Source Han Sans CN, Source Han Sans CN;
               font-weight: 400;
               font-size: 30rpx;
               color: #222324;
               white-space: nowrap;
            }
            input.input-item {
               text-align: right;
               border: none !important;
               background: transparent !important;
               box-shadow: none !important;
               padding: 0 !important;
               margin: 0 !important;
               height: auto !important;
               outline: none;
               font-size: 30rpx;
               color: #222324;
               font-family: Source Han Sans CN, Source Han Sans CN;
            }
      :deep(.uni-input-placeholder) {
         color: #D5D5D5;
      }
            input.input-item::placeholder {
               font-size: 30rpx;
            }
            // .code-container {
            //    display: flex;
            //    align-items: center;
            //    justify-content: flex-end;
            //    width: 100%;
            // }
            .send-code-btn {
               margin-left: 20rpx;
               width: 200rpx;
               height: 70rpx;
               line-height: 70rpx;
               font-size: 26rpx;
               background: #f5f5f5;
               color: #666;
               border-radius: 8rpx;
            }
            .send-code-btn:disabled {
               background: #e0e0e0;
               color: #999;
            }
            :deep(.u-button){
               width: 180rpx !important;
               height: 60rpx !important;
            }
         }
      }
      .btngroup {
         display: flex;
         justify-content: space-between;
         align-items: center;
         height: 96rpx;
         border-bottom: 2rpx solid #f5f5f5;
         color: #7b7b7b;
         .rowTitle {
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 30rpx;
            color: #222324;
            white-space: nowrap;
         }
         input.input-item {
            text-align: right;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 0 !important;
            margin: 0 !important;
            height: auto !important;
            outline: none;
            font-size: 30rpx;
            color: #222324;
            font-family: Source Han Sans CN, Source Han Sans CN;
         }
      :deep(.uni-input-placeholder) {
        color: #D5D5D5;
      }
         input.input-item::placeholder {
            font-size: 30rpx;
         }
         // .code-container {
         //    display: flex;
         //    align-items: center;
         //    justify-content: flex-end;
         //    width: 100%;
         // }
         .send-code-btn {
            margin-left: 20rpx;
            width: 200rpx;
            height: 70rpx;
            line-height: 70rpx;
            font-size: 26rpx;
            background: #f5f5f5;
            color: #666;
            border-radius: 8rpx;
         }
         .send-code-btn:disabled {
            background: #e0e0e0;
            color: #999;
         position: absolute;
         bottom: 150rpx;
         :deep(.u-button){
            width: 276rpx !important;
            height: 100rpx !important;
         }
      }
   }
   .btngroup {
      display: flex;
      position: absolute;
      bottom: 150rpx;
   }
      :deep(.u-button:first-child) {
         margin-right: 30rpx !important;
      }
   :deep(.u-button:first-child) {
      margin-right: 30rpx !important;
      .custom-style {
         width: 276rpx;
         height: 100rpx;
         font-family: "Source Han Sans CN";
         font-weight: 400;
         font-size: 36rpx;
      }
   }
   .custom-style {
      width: 276rpx;
      height: 100rpx;
        font-family: "Source Han Sans CN";
      font-weight: 400;
      font-size: 36rpx;
   }
   :deep(.u-button.data-v-461e713c){
      width: 276rpx !important;
      height: 100rpx !important;
   }
   .getCode {
      margin-left: 20rpx;
            width: 180rpx;
        }
</style>