feat(format): 优化数字格式化和登录页面布局
- 在 ItemList 组件中添加 formatNumber 函数,用于将数字格式化为 "250XX" 格式 - 调整 login 页面背景图片布局,使其居底显示 - 优化 login 页面验证码输入框,提高用户体验 - 移除 nuxt.config.js 中的 https 配置项
This commit is contained in:
parent
e0af9f99a0
commit
9688e9b3a6
@ -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]">
|
||||||
|
@ -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>
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user