baby-app/src/pages/user/login.vue

<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '登录',
  },
}
</route>
<template>
  <view class="login-container">
    <view class="login-box">
      <view class="login_title">
        <view class="title-en">Hello!</view>
        <view class="title-en">欢迎登录橙宝日志</view>
      </view>
      <!--  输入框-->
      <view class="input-wrapper">
        <!-- 账号 -->
        <view class="country-code">
          <view class="country-phone">
            <image style="width: 24px; height: 24px" src="/src/static/icon/phone.svg"></image>
            <view class="login-text">手机号</view>
          </view>
          <view class="phone-input">
            <view>+86</view>
            <view>
              <input v-model="account" type="text" placeholder="请输入手机号" />
            </view>
          </view>
        </view>
        <!-- 验证码 -->
        <view class="country-password">
          <view class="country-phone">
            <image
              style="width: 24px; height: 24px"
              src="/src/static/icon/Verification.svg"
            ></image>
            <view class="login-text">验证码</view>
          </view>
          <view class="phone-input">
            <view class="verification-input">
              <input v-model="verification" type="text" placeholder="请输入验证码" />
            </view>
            <image
              style="width: 1px; height: 16px; background: red"
              src="/src/static/icon/textBor.svg"
            ></image>
            <view class="send-btn" :disabled="isCountingDown" @click="sendVerificationCode">
              {{ buttonText }}
            </view>
          </view>
        </view>
      </view>

      <wd-button @click="loginBtn" class="login-button">登录</wd-button>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const account = ref('') // 账号
  const verification = ref('') // 验证码
  const countdown = ref(0)
  const isCountingDown = ref(false)

  const buttonText = computed(() => {
    return isCountingDown.value ? `${countdown.value}秒后重新发送` : '发送验证码'
  })

  // 点击登录
  const loginBtn = () => {
    console.log(account.value, verification.value)
    console.log(2222)
  }

  // 发生验证码
  const sendVerificationCode = () => {
    if (isCountingDown.value) return
    countdown.value = 60
    isCountingDown.value = true
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
        isCountingDown.value = false
      }
    }, 1000)
  }
</script>

<style scoped lang="scss">
  .login-container {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(to bottom, #c4eee6, #fff);
  }

  .login-box {
    width: 90%;
    font-size: 1rem;
  }

  .login_title {
    width: 100%;
    height: 4.5rem;
    margin: 6.25rem 0 1.25rem 0;
  }

  .title-en {
    margin: 0 0 0.5rem 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #333333;
  }

  .input-wrapper {
    position: relative;
    width: 100%;
    height: 11.25rem;
    margin: 0.625rem 0 1.25rem 0;
  }

  .country-code {
    width: 100%;
    height: 5rem;
    padding: 1rem 0;
  }

  .phone-input {
    display: flex;
    gap: 1rem;
    align-items: center;
    height: 3.5rem;
    border-bottom: 0.03125rem solid var(--Gray-Gray3, #e7e7e7);
  }

  .country-phone {
    display: flex;
    align-items: center;
  }

  .login-text {
    margin-left: 0.625rem;
  }

  .phone-input input {
    flex: 1;
    padding: 0 1rem;
    font-size: 0.875rem;
  }

  .verification-input {
    width: 27.75rem;
  }

  .send-btn {
    width: 13.75rem;
    overflow: hidden;
    font-size: 0.875rem;
    color: #f88842;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: transparent;
  }

  .login-button {
    width: 100%;
    height: 3rem;
    margin: 5rem 0 1.25rem 0;
    font-size: 1rem;
    color: white;
    background: #f88842 !important;
    border-radius: 0.5rem;
  }
</style>