liveh5-nuxt/app/pages/login/index.vue

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();
definePageMeta({
  layout: 'login',
})
function goToPage() {
  router.push('/countryRegion');
}
const phoneNum=ref('')
const code=ref('')
const pane=ref(0)
</script>

<template>
  <div class="h-[100vh] w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]">
    <div class="w-full flex justify-center mb-[100px]">
      <img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
    </div>
    <div v-if="pane===0">
      <div class="">
        <div class="w-full flex justify-between" @click="goToPage">
          <div class="text-[16px] text-[#000]">
            中国（大陆）
          </div>
          <div><van-icon color="#777" name="arrow" size="14" /></div>
        </div>
        <div class="border-b-[1.7px] mt-[8px]">
          <van-field v-model="phoneNum" clearable placeholder="请输入手机号">
            <template #label>
              <div class="text-[16px] text-[#1A1A1A] flex align-center justify-start">
                +86
              </div>
            </template>
          </van-field>
        </div>
        <div />
      </div>
      <div class="mt-[55px]">
        <van-button v-if="phoneNum" type="primary"  block style="height: 48px" >获取验证码</van-button>
        <van-button v-else type="primary" color="#D3D3D3"  block style="height: 48px" >获取验证码</van-button>
      </div>
    </div>
    <div v-else>
      <div class="flex mb-[16px]">
        <div class="text-[16px] text-[#BDBDBD] mr-[10px]">已发送验证码至</div>
        <div class="text-[16px] text-[#000]">15834362333</div>
      </div>
      <van-password-input
          :value="code"
          :gutter="10"
          focused
      />
      <div class="text-#2B53AC text-14px">
        重新发送
      </div>
      <div class="mt-[17px]">
        <van-button v-if="code.length === 6" type="primary"  block style="height: 48px" >登录</van-button>
        <van-button v-else type="primary" color="#D3D3D3"  block style="height: 48px" >登录</van-button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.van-cell.van-field){
  padding-left: 0;
}
:deep(.van-password-input){
  margin: 0;
}
:deep(.van-password-input__item){
  border: 1px solid #E5E5E5;
  width: 41px;
  height: 41px;
}
</style>