吉安感知网项目-前端
shuishen
2026-01-22 3c5a06b1fe06a30207da0f6dedf2dff99f1899d2
uniapps/work-wx/src/pages/register/index.vue
@@ -2,7 +2,7 @@
<template>
    <view class="register-page">
        <view class="pageBg"></view>
        <view class="content">
        <!-- <view class="content">
           <view class="row">
             <view class="label"><span class="required">*</span>手机号码</view>
             <view class="input">
@@ -36,7 +36,34 @@
                {{ countDown > 0 ? `${countDown}s后重发` : '获取验证码' }}
            </u-button>
           </view>
        </view>
        </view> -->
        <view class="detailBox">
         <div class="detailCon">
            <div class="orderRow">
               <div class="rowTitle">手机号码</div>
               <input type="text" v-model="formParams.userName" placeholder="请输入手机号码" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">昵称</div>
               <input type="text" v-model="formParams.nikeName" placeholder="请输入昵称" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">密码</div>
               <input type="password" v-model="formParams.password" placeholder="请输入密码" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">确认密码</div>
               <input type="password" v-model="formParams.password2" placeholder="请输入确认密码" class="input-item" />
            </div>
            <div class="orderRow">
               <div class="rowTitle">验证码</div>
               <input type="text" v-model="formParams.code" placeholder="请输入验证码" class="input-item" />
               <u-button :disabled="countDown > 0" @click="sendVerificationCode" type="primary" color="#007AFF">
                  {{ countDown > 0 ? `${countDown}s后重发` : '获取验证码' }}
               </u-button>
            </div>
         </div>
      </view>
        <view class="register">
            <u-button type="primary" color="#007AFF" @click="register">注册</u-button>
        </view>
@@ -210,55 +237,91 @@
<style scoped lang="scss">
.register-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .pageBg {
      position: fixed;
      top: 0;
      left: 0;
      // position: fixed;
      // top: 0;
      // left: 0;
      width: 100%;
      height: 100%;
      background-image: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/images/user/user-bg.png")  no-repeat ;
        background: url("https://wrj.shuixiongit.com/aiskyminio/cloud-bucket/ja-app-wx/images/user/user-bg.png")  no-repeat ;
        background-size: 100%;
   }
    .content {
    .detailBox {
        position: absolute;
        top: 192rpx;
        left: 24rpx;
        right: 24rpx;
        top: 180rpx;
        width: 702rpx;
        min-height: 326rpx;
        background: #FFFFFF;
        border-radius: 6px;
        padding: 20px;
        .row {
        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;
            border-bottom: 1rpx solid #f5f5f5;
            margin: 10rpx 0;
        }
        .label {
            width: 140rpx;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 15px;
            color: #222324;
            .nike {
                margin-right: 16rpx;
            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;
            }
            .required {
                color: #FF4444;
            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;
            }
        }
        .input {
            flex: 1;
        }
        :deep(.u-input) {
            border-color: transparent;
        }
        :deep(.u-icon--right) {
            display: none;
        }
        :deep(.u-button) {
            width: 180rpx;
            :deep(.uni-input-placeholder) {
                color: #D5D5D5;
            }
            input.input-item::placeholder {
                font-size: 30rpx;
            }
            .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;
            }
        }
    }
    .register {
@@ -266,9 +329,11 @@
            position: fixed;
            left: 24rpx;
            right: 24rpx;
            bottom: 126rpx;
            bottom: 150rpx;
            font-weight: 400;
            width: 80% !important;
            height: 100rpx !important;
            height: 76rpx !important;
            font-size: 28rpx !important;
        }
    }
}