feat(format): 优化数字格式化和登录页面布局

- 在 ItemList 组件中添加 formatNumber 函数,用于将数字格式化为 "250XX" 格式
- 调整 login 页面背景图片布局,使其居底显示
- 优化 login 页面验证码输入框,提高用户体验
- 移除 nuxt.config.js 中的 https 配置项
This commit is contained in:
xingyy 2025-03-02 13:57:52 +08:00
parent e0af9f99a0
commit 9688e9b3a6
3 changed files with 39 additions and 5 deletions

View File

@ -40,6 +40,26 @@ const openShow = async (item) => {
localState.value.showDetail = true localState.value.showDetail = true
currentItem.value = item currentItem.value = item
} }
/**
* 将数字格式化为"250XX"格式其中XX是两位数
* @param {number} num - 要格式化的数字
* @return {string} - 格式化后的字符串
*/
function formatNumber(num) {
//
if (typeof num !== 'number' && isNaN(Number(num))) {
throw new Error('输入必须是有效数字');
}
// ()
const number = Number(num);
// 0
const formattedNum = number.toString().padStart(2, '0');
// "250"
return `250${formattedNum}`;
}
</script> </script>
<template> <template>
@ -73,7 +93,7 @@ const openShow = async (item) => {
<div <div
class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]" class="absolute rounded-2px overflow-hidden line-height-12px left-[8px] top-[8px] h-[17px] w-[55px] flex items-center justify-center bg-[#2b53ac] text-[12px] text-[#fff]"
> >
Lot{{ item.index }} Lot{{ formatNumber(item.index) }}
</div> </div>
</div> </div>
<div class="pt-[8px]"> <div class="pt-[8px]">

View File

@ -160,7 +160,7 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div class="h-screen-nav w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-cover px-[31px] pt-[86px]"> <div class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] bg-bottom bg-cover grow-1 px-[31px] pt-[86px]">
<div class="w-full flex justify-center mb-[100px]"> <div class="w-full flex justify-center mb-[100px]">
<img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt=""> <img class="h-[105px] w-[189px]" src="@/static/images/ghfggff.png" alt="">
</div> </div>
@ -197,7 +197,22 @@ onUnmounted(() => {
<div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div> <div class="text-[16px] text-[#BDBDBD] mr-[10px]">{{ $t('login.hasSendTo') }}</div>
<div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div> <div class="text-[16px] text-[#000]">+{{ selectedZone }} {{ phoneNum }}</div>
</div> </div>
<van-password-input :value="code" :gutter="10" :mask="false" focused @focus="showKeyboard = true" /> <div class="relative">
<van-password-input
:value="code"
:gutter="10"
:mask="false"
:focused="false"
/>
<input
v-model="code"
type="tel"
maxlength="6"
class="opacity-0 absolute top-0 left-0 h-full w-full"
@input="code = $event.target.value.replace(/\D/g, '').slice(0, 6)"
/>
</div>
<div class="flex justify-between"> <div class="flex justify-between">
<div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`"> <div :class="`${countdown>0?'text-#BDBDBD':'text-#2B53AC'} text-14px`">
{{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span> {{ $t('login.reSend') }}<span v-if="countdown>0">({{countdown}})</span>
@ -213,7 +228,6 @@ onUnmounted(() => {
</div> </div>
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
<van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />
<div v-if="!isKeyboardVisible" class="text-center text-14px absolute left-1/2 transform translate-x--1/2 bottom-20px"> <div v-if="!isKeyboardVisible" class="text-center text-14px absolute left-1/2 transform translate-x--1/2 bottom-20px">
{{ $t('login.agreement') }}<span class="text-#3454AF " @click="$router.push('/privacyPolicy')">{{ $t('login.privacyPolicy') }}</span> {{ $t('login.agreement') }}<span class="text-#3454AF " @click="$router.push('/privacyPolicy')">{{ $t('login.privacyPolicy') }}</span>
</div> </div>

View File

@ -151,7 +151,7 @@ export default defineNuxtConfig({
// 指定 Nuxt 应用程序的兼容性日期,确保应用程序在未来的 Nuxt 版本中保持稳定性 // 指定 Nuxt 应用程序的兼容性日期,确保应用程序在未来的 Nuxt 版本中保持稳定性
compatibilityDate: '2025-02-28', compatibilityDate: '2025-02-28',
devServer: { devServer: {
https: httpsOptions, // https: httpsOptions,
host: '0.0.0.0', host: '0.0.0.0',
port: 3000, port: 3000,
}, },