|
|
@@ -18,11 +18,12 @@
|
|
|
<!-- 账号 -->
|
|
|
<view class="country-code">
|
|
|
<view class="country-phone">
|
|
|
- <image style="width: 24px; height: 24px" src="/src/static/icon/phone.svg"></image>
|
|
|
+ <image class="imgIcon" src="/src/static/icon/phone.svg"></image>
|
|
|
<view class="login-text">手机号</view>
|
|
|
</view>
|
|
|
<view class="phone-input">
|
|
|
- <view>+86</view>
|
|
|
+ <view @click="replacePhone">{{ replacePoneValue }}</view>
|
|
|
+ <image class="w-[32rpx] h-[32rpx]" src="/src/static/icon/chevron-right.svg"></image>
|
|
|
<view>
|
|
|
<input v-model="account" type="text" placeholder="请输入手机号" />
|
|
|
</view>
|
|
|
@@ -31,10 +32,7 @@
|
|
|
<!-- 验证码 -->
|
|
|
<view class="country-password">
|
|
|
<view class="country-phone">
|
|
|
- <image
|
|
|
- style="width: 24px; height: 24px"
|
|
|
- src="/src/static/icon/Verification.svg"
|
|
|
- ></image>
|
|
|
+ <image class="imgIcon" src="/src/static/icon/Verification.svg"></image>
|
|
|
<view class="login-text">验证码</view>
|
|
|
</view>
|
|
|
<view class="phone-input">
|
|
|
@@ -42,7 +40,7 @@
|
|
|
<input v-model="verification" type="text" placeholder="请输入验证码" />
|
|
|
</view>
|
|
|
<image
|
|
|
- style="width: 1px; height: 16px; background: red"
|
|
|
+ style="width: 2rpx; height: 32rpx; background: #e7e7e7"
|
|
|
src="/src/static/icon/textBor.svg"
|
|
|
></image>
|
|
|
<view class="send-btn" :disabled="isCountingDown" @click="sendVerificationCode">
|
|
|
@@ -53,28 +51,160 @@
|
|
|
</view>
|
|
|
|
|
|
<wd-button @click="loginBtn" class="login-button">登录</wd-button>
|
|
|
+
|
|
|
+ <!-- 手机 -->
|
|
|
+ <view @click.stop="showArea = false" v-if="showArea" class="wrap">
|
|
|
+ <view class="wrap-content">
|
|
|
+ <wd-index-bar sticky>
|
|
|
+ <view v-for="item in areaData" :key="item.index">
|
|
|
+ <wd-index-anchor :index="item.index" />
|
|
|
+ <wd-cell
|
|
|
+ border
|
|
|
+ clickable
|
|
|
+ v-for="city in item.data"
|
|
|
+ :key="city"
|
|
|
+ :title="city"
|
|
|
+ @click="handleClick(item.index, city)"
|
|
|
+ ></wd-cell>
|
|
|
+ </view>
|
|
|
+ </wd-index-bar>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import { ref } from 'vue'
|
|
|
+ import { ref, computed } from 'vue'
|
|
|
const account = ref('') // 账号
|
|
|
const verification = ref('') // 验证码
|
|
|
- const countdown = ref(0)
|
|
|
+ const countdown = ref(0) // 发送验证码
|
|
|
+ const replacePoneValue = ref('+86')
|
|
|
const isCountingDown = ref(false)
|
|
|
+ const showArea = ref(false)
|
|
|
+ const areaData = ref([
|
|
|
+ {
|
|
|
+ index: 'A',
|
|
|
+ data: ['阿坝', '阿拉善', '阿里', '安康', '安庆', '鞍山', '安顺', '安阳', '澳门'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 'B',
|
|
|
+ data: [
|
|
|
+ '北京',
|
|
|
+ '白银',
|
|
|
+ '保定',
|
|
|
+ '宝鸡',
|
|
|
+ '保山',
|
|
|
+ '包头',
|
|
|
+ '巴中',
|
|
|
+ '北海',
|
|
|
+ '蚌埠',
|
|
|
+ '本溪',
|
|
|
+ '毕节',
|
|
|
+ '滨州',
|
|
|
+ '百色',
|
|
|
+ '亳州',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 'C',
|
|
|
+ data: [
|
|
|
+ '重庆',
|
|
|
+ '成都',
|
|
|
+ '长沙',
|
|
|
+ '长春',
|
|
|
+ '沧州',
|
|
|
+ '常德',
|
|
|
+ '昌都',
|
|
|
+ '长治',
|
|
|
+ '常州',
|
|
|
+ '巢湖',
|
|
|
+ '潮州',
|
|
|
+ '承德',
|
|
|
+ '郴州',
|
|
|
+ '赤峰',
|
|
|
+ '池州',
|
|
|
+ '崇左',
|
|
|
+ '楚雄',
|
|
|
+ '滁州',
|
|
|
+ '朝阳',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 'D',
|
|
|
+ data: [
|
|
|
+ '大连',
|
|
|
+ '东莞',
|
|
|
+ '大理',
|
|
|
+ '丹东',
|
|
|
+ '大庆',
|
|
|
+ '大同',
|
|
|
+ '大兴安岭',
|
|
|
+ '德宏',
|
|
|
+ '德阳',
|
|
|
+ '德州',
|
|
|
+ '定西',
|
|
|
+ '迪庆',
|
|
|
+ '东营',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 'E',
|
|
|
+ data: ['鄂尔多斯', '恩施', '鄂州'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 'F',
|
|
|
+ data: ['福州', '防城港', '佛山', '抚顺', '抚州', '阜新', '阜阳'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 'G',
|
|
|
+ data: ['广州', '桂林', '贵阳', '甘南', '赣州', '甘孜', '广安', '广元', '贵港', '果洛'],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 'H',
|
|
|
+ data: [
|
|
|
+ '杭州',
|
|
|
+ '哈尔滨',
|
|
|
+ '合肥',
|
|
|
+ '海口',
|
|
|
+ '呼和浩特',
|
|
|
+ '海北',
|
|
|
+ '海东',
|
|
|
+ '海南',
|
|
|
+ '海西',
|
|
|
+ '邯郸',
|
|
|
+ '汉中',
|
|
|
+ '鹤壁',
|
|
|
+ '河池',
|
|
|
+ '鹤岗',
|
|
|
+ '黑河',
|
|
|
+ '衡水',
|
|
|
+ '衡阳',
|
|
|
+ '河源',
|
|
|
+ '贺州',
|
|
|
+ '红河',
|
|
|
+ '淮安',
|
|
|
+ '淮北',
|
|
|
+ '怀化',
|
|
|
+ '淮南',
|
|
|
+ '黄冈',
|
|
|
+ '黄南',
|
|
|
+ '黄山',
|
|
|
+ '黄石',
|
|
|
+ '惠州',
|
|
|
+ '葫芦岛',
|
|
|
+ '呼伦贝尔',
|
|
|
+ '湖州',
|
|
|
+ '菏泽',
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ])
|
|
|
|
|
|
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
|
|
|
@@ -87,6 +217,21 @@
|
|
|
}
|
|
|
}, 1000)
|
|
|
}
|
|
|
+
|
|
|
+ // 更换手机
|
|
|
+ const replacePhone = () => {
|
|
|
+ showArea.value = true
|
|
|
+ }
|
|
|
+ // 选取手机地区区号
|
|
|
+ const handleClick = (item, area) => {
|
|
|
+ replacePoneValue.value = area
|
|
|
+ }
|
|
|
+
|
|
|
+ // 点击登录
|
|
|
+ const loginBtn = () => {
|
|
|
+ console.log(account.value, verification.value, replacePoneValue.value)
|
|
|
+ console.log(2222)
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
@@ -94,47 +239,45 @@
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
min-height: 100vh;
|
|
|
- background: linear-gradient(to bottom, #c4eee6, #fff);
|
|
|
+ background: linear-gradient(0deg, #fff 0%, #ffac78 100%);
|
|
|
}
|
|
|
|
|
|
.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;
|
|
|
+ height: 144rpx;
|
|
|
+ margin: 200rpx 0 40rpx 0;
|
|
|
+ .title-en {
|
|
|
+ margin: 0 0 16rpx 0;
|
|
|
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
|
+ font-size: 48rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.input-wrapper {
|
|
|
position: relative;
|
|
|
width: 100%;
|
|
|
- height: 11.25rem;
|
|
|
- margin: 0.625rem 0 1.25rem 0;
|
|
|
+ height: 360rpx;
|
|
|
+ margin: 20rpx 0 40rpx 0;
|
|
|
}
|
|
|
|
|
|
.country-code {
|
|
|
width: 100%;
|
|
|
- height: 5rem;
|
|
|
- padding: 1rem 0;
|
|
|
+ height: 160rpx;
|
|
|
+ padding: 32rpx 0;
|
|
|
}
|
|
|
|
|
|
.phone-input {
|
|
|
display: flex;
|
|
|
- gap: 1rem;
|
|
|
+ gap: 20rpx;
|
|
|
align-items: center;
|
|
|
- height: 3.5rem;
|
|
|
- border-bottom: 0.03125rem solid var(--Gray-Gray3, #e7e7e7);
|
|
|
+ height: 56px; /* 3.5rem = 56px */
|
|
|
+ border-bottom: 0.5px solid var(--Gray-Gray3, #e7e7e7);
|
|
|
}
|
|
|
|
|
|
.country-phone {
|
|
|
@@ -143,23 +286,23 @@
|
|
|
}
|
|
|
|
|
|
.login-text {
|
|
|
- margin-left: 0.625rem;
|
|
|
+ margin-left: 20rpx;
|
|
|
}
|
|
|
|
|
|
.phone-input input {
|
|
|
flex: 1;
|
|
|
- padding: 0 1rem;
|
|
|
- font-size: 0.875rem;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
|
|
|
|
.verification-input {
|
|
|
- width: 27.75rem;
|
|
|
+ width: 27.75rem; /* 27.75rem = 444px */
|
|
|
}
|
|
|
|
|
|
.send-btn {
|
|
|
- width: 13.75rem;
|
|
|
+ width: 440rpx;
|
|
|
overflow: hidden;
|
|
|
- font-size: 0.875rem;
|
|
|
+ font-size: 28rpx;
|
|
|
color: #f88842;
|
|
|
text-overflow: ellipsis;
|
|
|
white-space: nowrap;
|
|
|
@@ -168,11 +311,34 @@
|
|
|
|
|
|
.login-button {
|
|
|
width: 100%;
|
|
|
- height: 3rem;
|
|
|
- margin: 5rem 0 1.25rem 0;
|
|
|
- font-size: 1rem;
|
|
|
+ height: 96rpx;
|
|
|
+ margin: 160rpx 0 40rpx 0;
|
|
|
+ font-size: 32rpx;
|
|
|
color: white;
|
|
|
background: #f88842 !important;
|
|
|
- border-radius: 0.5rem;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(3, 3, 3, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .wrap-content {
|
|
|
+ position: relative;
|
|
|
+ top: 176rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgIcon {
|
|
|
+ width: 48rpx;
|
|
|
+ height: 48rpx;
|
|
|
}
|
|
|
</style>
|
PIWALIN
