feat(i18n): 添加新文本并优化多语言支持

- 在 zh-CN.json 中添加了新文本 "text1": "请选择性别"
- 更新了多个组件的国际化支持,包括 realAuth、profile、itemDetail 等
-优化了部分组件的布局和样式
This commit is contained in:
xingyy 2025-02-13 11:53:24 +08:00
parent 226057ce8f
commit d840c2a453
13 changed files with 163 additions and 252 deletions

View File

@ -1,199 +1,119 @@
<script setup> <template>
import { ref, computed, onMounted, onBeforeUnmount, watch } from 'vue' <div
class="draggable-container"
:style="containerStyle"
@mousedown="startDrag"
@touchstart.prevent="startDrag"
>
<slot />
</div>
</template>
<script setup>
const props = defineProps({ const props = defineProps({
fixedSide: {
type: String,
default: 'none',
validator: (v) => ['left', 'right', 'top', 'bottom', 'none'].includes(v)
},
initialPosition: { initialPosition: {
type: Object, type: Object,
default: () => ({ x: 0, y: 0 }) default: () => ({ x: 0, y: 0 })
}, },
stick: { width: Number,
type: String, height: Number
default: null,
validator: (value) => ['left', 'right', 'top', 'bottom', null].includes(value)
},
dragMode: {
type: String,
default: 'free',
validator: (value) => ['free', 'horizontal', 'vertical'].includes(value)
},
stickyDistance: {
type: Number,
default: 20
},
margin: {
type: Number,
default: 0
},
draggable: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 1000
}
}) })
const emit = defineEmits(['update:position']) const position = ref({ ...props.initialPosition })
const containerRef = ref(null)
const position = ref(props.initialPosition)
const isDragging = ref(false) const isDragging = ref(false)
const startPos = ref({ x: 0, y: 0 }) const startPosition = ref({ x: 0, y: 0 })
const windowSize = ref({ width: 0, height: 0 })
const elementSize = ref({ width: 0, height: 0 })
const transformStyle = computed(() => ({ const containerStyle = computed(() => ({
transform: `translate3d(${position.value.x}px, ${position.value.y}px, 0)`,
zIndex: props.zIndex,
position: 'fixed', position: 'fixed',
top: '0', width: props.width ? `${props.width}px` : 'auto',
left: '0', // height: props.height ? `${props.height}px` : 'auto',
right: 'auto', left: `${position.value.x}px`,
bottom: 'auto' top: `${position.value.y}px`,
cursor: isDragging.value ? 'grabbing' : 'grab'
})) }))
const updateSizes = () => { const getClientPos = (e) => ({
if (typeof window !== 'undefined') { x: e.touches ? e.touches[0].clientX : e.clientX,
windowSize.value = { y: e.touches ? e.touches[0].clientY : e.clientY
width: window.innerWidth, })
height: window.innerHeight
}
if (containerRef.value) {
elementSize.value = {
width: containerRef.value.offsetWidth,
height: containerRef.value.offsetHeight
}
}
}
}
const handleStick = (pos) => { const startDrag = (e) => {
if (!props.stick) return pos
const { width, height } = elementSize.value
const { stickyDistance, margin } = props
const maxX = windowSize.value.width - width - margin
const maxY = windowSize.value.height - height - margin
const newPos = { ...pos }
switch (props.stick) {
case 'left':
if (pos.x < stickyDistance) newPos.x = margin
break
case 'right':
if (maxX - pos.x < stickyDistance) newPos.x = maxX
break
case 'top':
if (pos.y < stickyDistance) newPos.y = margin
break
case 'bottom':
if (maxY - pos.y < stickyDistance) newPos.y = maxY
break
}
return newPos
}
const constrainPosition = (pos) => {
const { width, height } = elementSize.value
const { margin } = props
const maxX = windowSize.value.width - width - margin
const maxY = windowSize.value.height - height - margin
return {
x: Math.min(Math.max(pos.x, margin), maxX),
y: Math.min(Math.max(pos.y, margin), maxY)
}
}
const handleStart = (event) => {
if (!props.draggable) return
const e = event.touches ? event.touches[0] : event
isDragging.value = true isDragging.value = true
startPos.value = { const { x, y } = getClientPos(e)
x: e.clientX - position.value.x, startPosition.value = {
y: e.clientY - position.value.y x: x - position.value.x,
y: y - position.value.y
} }
} }
const handleMove = (event) => { const onDrag = (e) => {
if (!isDragging.value) return if (!isDragging.value) return
const e = event.touches ? event.touches[0] : event const { x: clientX, y: clientY } = getClientPos(e)
let newPos = { const maxX = window.innerWidth - (props.width || 0)
x: e.clientX - startPos.value.x, const maxY = window.innerHeight - (props.height || 0)
y: e.clientY - startPos.value.y
let newX = clientX - startPosition.value.x
let newY = clientY - startPosition.value.y
//
switch (props.fixedSide) {
case 'left':
newX = 0
newY = Math.max(0, Math.min(newY, maxY))
break
case 'right':
newX = maxX
newY = Math.max(0, Math.min(newY, maxY))
break
case 'top':
newX = Math.max(0, Math.min(newX, maxX))
newY = 0
break
case 'bottom':
newX = Math.max(0, Math.min(newX, maxX))
newY = maxY
break
default:
newX = Math.max(0, Math.min(newX, maxX))
newY = Math.max(0, Math.min(newY, maxY))
} }
if (props.dragMode === 'horizontal') { position.value = {
newPos.y = position.value.y x: ['top', 'bottom', 'none'].includes(props.fixedSide) ? newX : position.value.x,
} else if (props.dragMode === 'vertical') { y: ['left', 'right', 'none'].includes(props.fixedSide) ? newY : position.value.y
newPos.x = position.value.x
} }
newPos = handleStick(newPos)
newPos = constrainPosition(newPos)
position.value = newPos
emit('update:position', newPos)
event.preventDefault()
} }
const handleEnd = () => { const stopDrag = () => {
isDragging.value = false isDragging.value = false
} }
//
onMounted(() => { onMounted(() => {
updateSizes() document.addEventListener('mousemove', onDrag)
window.addEventListener('resize', updateSizes) document.addEventListener('mouseup', stopDrag)
document.addEventListener('mousemove', handleMove) document.addEventListener('touchmove', onDrag)
document.addEventListener('mouseup', handleEnd) document.addEventListener('touchend', stopDrag)
document.addEventListener('touchmove', handleMove, { passive: false })
document.addEventListener('touchend', handleEnd)
}) })
onBeforeUnmount(() => { onUnmounted(() => {
window.removeEventListener('resize', updateSizes) document.removeEventListener('mousemove', onDrag)
document.removeEventListener('mousemove', handleMove) document.removeEventListener('mouseup', stopDrag)
document.removeEventListener('mouseup', handleEnd) document.removeEventListener('touchmove', onDrag)
document.removeEventListener('touchmove', handleMove) document.removeEventListener('touchend', stopDrag)
document.removeEventListener('touchend', handleEnd)
}) })
watch(() => props.initialPosition, (newPos) => {
position.value = newPos
}, {deep: true})
</script> </script>
<template>
<div
ref="containerRef"
class="drag-window"
:class="{ 'dragging': isDragging }"
:style="transformStyle"
@mousedown="handleStart"
@touchstart="handleStart"
>
<slot></slot>
</div>
</template>
<style scoped> <style scoped>
.drag-window { .draggable-container {
position: fixed;
touch-action: none; touch-action: none;
user-select: none; user-select: none;
-webkit-user-select: none; z-index: 9999;
will-change: transform;
transition: transform 0.2s ease;
}
.drag-window.dragging {
transition: none;
cursor: move;
} }
</style> </style>

View File

@ -39,7 +39,7 @@ const props = defineProps({
</div> </div>
<div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px"> <div class="flex px-[16px] bg-#fff h-[36px] items-center mb-6px">
<div class="text-[#575757] text-[14px]">{{$t('detail.text6')}}</div> <div class="text-[#575757] text-[14px]">{{$t('detail.text6')}}</div>
<div class="text-#575757 text-14px font-bold">RMB 1,000</div> <div class="text-#575757 text-14px font-bold">{{detailInfo?.startPriceCurrency}} {{detailInfo?.startPrice}}</div>
</div> </div>
<div class="px-[16px] bg-#fff pt-12px pb-18px"> <div class="px-[16px] bg-#fff pt-12px pb-18px">
<div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}</div> <div class="text-[#575757] text-[14px] mb-4px">{{$t('detail.text7')}}</div>

View File

@ -1,11 +1,10 @@
<script setup> <script setup>
import { ref, computed } from 'vue' import {ref, computed} from 'vue'
import dayjs from 'dayjs' import dayjs from 'dayjs'
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: [Date, String, Number], type: [Date, String, Number]
default: () => new Date() //
}, },
label: { label: {
type: String, type: String,
@ -25,11 +24,11 @@ const props = defineProps({
}, },
minDate: { minDate: {
type: Date, type: Date,
default: () => new Date(1900, 0, 1) default: () => dayjs('1900-01-01').toDate()
}, },
maxDate: { maxDate: {
type: Date, type: Date,
default: () => new Date(2100, 11, 31) default: () => dayjs('2100-12-31').toDate()
}, },
format: { format: {
type: String, type: String,
@ -40,48 +39,58 @@ const props = defineProps({
const emit = defineEmits(['update:modelValue', 'change']) const emit = defineEmits(['update:modelValue', 'change'])
const show = ref(false) const show = ref(false)
// //
const displayText = computed(() => {
return dayjs(props.modelValue).format(props.format)
})
//
const defaultValue = computed(() => { const defaultValue = computed(() => {
const date = props.modelValue || new Date() let date
if (props.modelValue) {
date = dayjs(props.modelValue)
} else {
date = dayjs()
}
//
if (!date.isValid()) {
date = dayjs()
}
return [ return [
date.getFullYear(), date.year(),
date.getMonth() + 1, date.month() + 1,
date.getDate() date.date()
] ]
}) })
//
const formatDate = (dateArr) => {
const [year, month, day] = dateArr
return dayjs(`${year}-${month}-${day}`).format(props.format)
}
//
const displayValue = computed(() => {
if (!props.modelValue) return ''
const date = dayjs(props.modelValue)
return date.isValid() ? date.format(props.format) : ''
})
// //
const onConfirm = ({ selectedValues }) => { const onConfirm = ({selectedValues}) => {
show.value = false show.value = false
const date = new Date(selectedValues[0], selectedValues[1] - 1, selectedValues[2]) const formattedDate = formatDate(selectedValues)
emit('update:modelValue', date) emit('update:modelValue', formattedDate)
emit('change', date) emit('change', formattedDate)
} }
// //
const onCancel = () => { const onCancel = () => {
show.value = false show.value = false
} }
//
const reset = () => {
emit('update:modelValue', new Date())
}
defineExpose({
reset
})
</script> </script>
<template> <template>
<div> <div>
<van-field <van-field
:model-value="displayText" :model-value="displayValue"
@click="show = true" @click="show = true"
readonly readonly
:disabled="disabled" :disabled="disabled"
@ -95,6 +104,9 @@ defineExpose({
<van-popup <van-popup
v-model:show="show" v-model:show="show"
position="bottom" position="bottom"
teleport="#__nuxt"
destroy-on-close
safe-area-inset-bottom
> >
<van-date-picker <van-date-picker
:min-date="minDate" :min-date="minDate"

View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
const props = defineProps({ const props = defineProps({
value: { modelValue: {
type: [Number, String] type: [Number, String]
}, },
columns: { columns: {
@ -30,28 +30,20 @@ const props = defineProps({
} }
}) })
const emit = defineEmits(['update:value', 'change']) const emit = defineEmits(['update:modelValue', 'change'])
const show = ref(false) const show = ref(false)
const onConfirm = (value) => { const onConfirm = (value) => {
show.value = false show.value = false
emit('update:value', value.value) emit('update:modelValue', value.selectedValues?.[0])
emit('change', value) emit('change', value.selectedValues?.[0])
} }
const displayText = computed(() => { const displayText = computed(() => {
const selected = props.columns.find(x => x.value === props.value) const selected = props.columns.find(x => x.value === props.modelValue)
return selected?.text || '' return selected?.text || ''
}) })
const reset = () => {
emit('update:value', undefined)
}
defineExpose({
reset
})
</script> </script>
<template> <template>
@ -72,6 +64,7 @@ defineExpose({
v-model:show="show" v-model:show="show"
destroy-on-close destroy-on-close
position="bottom" position="bottom"
teleport="#__nuxt"
safe-area-inset-bottom safe-area-inset-bottom
> >
<van-picker <van-picker

View File

@ -44,7 +44,7 @@ const onRefresh = async () => {
const openShow = async (item) => { const openShow = async (item) => {
localState.value.showDetail = true localState.value.showDetail = true
currentItem.value = item currentItem.value = item
getArtworkDetail(item.uuid) /* getArtworkDetail(item.uuid)*/
} }
</script> </script>
@ -103,7 +103,7 @@ const openShow = async (item) => {
</div> </div>
</van-list> </van-list>
</van-pull-refresh> </van-pull-refresh>
<DetailPopup v-model:show="localState.showDetail" :detailInfo="artWorkDetail"></DetailPopup> <DetailPopup v-model:show="localState.showDetail" :detailInfo="currentItem"></DetailPopup>
</div> </div>
</template> </template>

View File

@ -119,8 +119,8 @@ watch(()=>props.show,(newValue)=>{
<div class="ellipsis line-height-20px text-16px font-600 min-h-40px"> <div class="ellipsis line-height-20px text-16px font-600 min-h-40px">
{{ item.artworkTitle }} {{ item.artworkTitle }}
</div> </div>
<div class="text-14px text-#575757">{{ $t('home.start_price') }}RMB 1,000</div> <div class="text-14px text-#575757">{{ $t('home.start_price') }}{{item?.startPriceCurrency}} {{item?.startPrice}}</div>
<div class="text-14px text-#B58047">{{ $t('home.close_price') }}{{ $t('live_room.wait_update') }}</div> <div class="text-14px text-#B58047" v-if="item.soldPrice">{{ $t('home.close_price') }}{{item.soldPrice}}</div>
</div> </div>
</div> </div>
</van-list> </van-list>

View File

@ -120,7 +120,7 @@ const goLogin =async () => {
userInfo.value=res.data.accountInfo userInfo.value=res.data.accountInfo
token.value=res.data.token token.value=res.data.token
if (!res.data.isReal){ if (res.data?.accountInfo?.userExtend?.isReal===0){
await router.push('/realAuth'); await router.push('/realAuth');
}else { }else {
await router.push('/'); await router.push('/');

View File

@ -32,7 +32,8 @@ const initData=async ()=>{
const res=await userArtworks({}) const res=await userArtworks({})
if (res.status===0){ if (res.status===0){
myList.value=res.data.data myList.value=res.data.data
showMyList.value=groupAndSortByDate(myList.value) // showMyList.value=groupAndSortByDate(myList.value)
showMyList.value=[]
} }
} }
const router = useRouter() const router = useRouter()
@ -79,21 +80,28 @@ const onRefresh = async () => {
<div class="text-#575757 text-14px">{{userInfo.telNum}}</div> <div class="text-#575757 text-14px">{{userInfo.telNum}}</div>
</div> </div>
</div> </div>
<div class="flex-grow-1 "> <div class="grow-1 flex flex-col">
<div class="border-b-1px border-b-#D3D3D3 px-16px flex"> <div class="border-b-1px border-b-#D3D3D3 px-16px flex">
<div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">{{$t('home.my_lots')}}</div> <div class="text-#000 text-16px border-b-3 border-b-#2B53AC h-36px">{{$t('home.my_lots')}}</div>
</div> </div>
<van-pull-refresh v-model="localState.refreshing" <van-pull-refresh v-model="localState.refreshing"
:success-text="$t('home.refresh_show')" :success-text="$t('home.refresh_show')"
:success-duration="700" :success-duration="700"
class="h-full grow-1"
@refresh="onRefresh"> @refresh="onRefresh">
<template #success> <template #success>
<van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span> <van-icon name="success" /> <span>{{ $t('home.refresh_show') }}</span>
</template> </template>
<van-list <van-list
:finished-text="$t('home.finished_text')" :finished-text="$t('home.finished_text')"
class="h-full"
> >
<div class="px-16px pt-14px" v-for="(item,index) of showMyList" > <div class="flex flex-col items-center pt-100px" v-if="showMyList?.length<1">
<img class="w-103px h-88px mb-19px" src="@/static/images/zu5512@2x.png" alt="">
<div class="text-14px text-#575757">您暂无拍品</div>
<div class="text-14px text-#575757">快去竞拍吧</div>
</div>
<div class="px-16px pt-14px" v-for="(item,index) of showMyList" v-else >
<div class="text-#575757 text-14px mb-3px">{{item.userCreatedAt}}</div> <div class="text-#575757 text-14px mb-3px">{{item.userCreatedAt}}</div>
<div class="flex mb-22px" v-for="(item1,index1) of item.list" @click="goDetail(item1)"> <div class="flex mb-22px" v-for="(item1,index1) of item.list" @click="goDetail(item1)">
<div class="flex-shrink-0 mr-10px rounded-4px overflow-hidden"> <div class="flex-shrink-0 mr-10px rounded-4px overflow-hidden">

View File

@ -44,17 +44,17 @@ const {userInfo}= authStore()
<div class="mr-10px">{{$t('realAuth.birthday')}}</div> <div class="mr-10px">{{$t('realAuth.birthday')}}</div>
<div>{{userInfo.birthDate}}</div> <div>{{userInfo.birthDate}}</div>
</div> </div>
<div class="flex"> <div class="flex mb-20px">
<div class="mr-10px">{{$t('realAuth.adress')}}</div> <div class="mr-10px">{{$t('realAuth.adress')}}</div>
<div>{{userInfo.idNum}}</div> <div>{{userInfo.userExtend.address}}</div>
</div> </div>
<div class="flex"> <div class="flex mb-20px">
<div class="mr-10px">{{$t('realAuth.bank')}}</div> <div class="mr-10px">{{$t('realAuth.bank')}}</div>
<div>{{userInfo.idNum}}</div> <div>{{userInfo.userExtend.bankName}}</div>
</div> </div>
<div class="flex"> <div class="flex mb-20px">
<div class="mr-10px">{{$t('realAuth.bankCard')}}</div> <div class="mr-10px">{{$t('realAuth.bankCard')}}</div>
<div>{{userInfo.idNum}}</div> <div>{{userInfo.userExtend.bankNo}}</div>
</div> </div>
</template> </template>
</div> </div>

View File

@ -5,18 +5,14 @@ import {userUpdate} from "@/api/auth/index.js";
import {message} from '@/components/x-message/useMessage.js' import {message} from '@/components/x-message/useMessage.js'
import detail from './components/detail.vue' import detail from './components/detail.vue'
import {authStore} from "@/stores/auth/index.js"; import {authStore} from "@/stores/auth/index.js";
import XVanDate from '@/components/x-van-date/index.vue'
import XVanSelect from '@/components/x-van-select/index.vue'
const router = useRouter(); const router = useRouter();
const route = useRoute(); const { locale } = useI18n()
const showPicker = ref(false);
const {userInfo}= authStore() const {userInfo}= authStore()
const birthdayDate = ref([]) const active=ref(locale.value==='zh-CN'?0:1)
const showBirthdayPicker = ref(false)
const minDate = new Date(1950, 0, 1)
const maxDate = new Date(2025, 12, 31)
const active=ref(0)
const { t } = useI18n() const { t } = useI18n()
const form=ref({ const form=ref({
idNum: "",
realName: "", realName: "",
sex:'', sex:'',
birthDate:'', birthDate:'',
@ -34,15 +30,6 @@ const columns=ref([
{ text: t('realAuth.male'), value: 1 }, { text: t('realAuth.male'), value: 1 },
{ text: t('realAuth.female'), value: 2 }, { text: t('realAuth.female'), value: 2 },
]) ])
const onConfirm = ({ selectedValues, selectedOptions }) => {
form.value.sex=selectedValues?.[0]
showPicker.value = false
}
const onBirthdayConfirm = (value) => {
form.value.birthDate=value.selectedValues.join('-')
showBirthdayPicker.value = false
}
function isFormComplete(obj) { function isFormComplete(obj) {
for (const key in obj) { for (const key in obj) {
if (typeof obj[key] === 'object' && obj[key] !== null) { if (typeof obj[key] === 'object' && obj[key] !== null) {
@ -58,6 +45,7 @@ function isFormComplete(obj) {
const statusCode=ref(0) const statusCode=ref(0)
const confirm=async ()=>{ const confirm=async ()=>{
const thatForm=active.value===0?form1.value:form.value const thatForm=active.value===0?form1.value:form.value
thatForm.userExtend.isMainland=active.value===0?1:0
if (isFormComplete(thatForm)){ if (isFormComplete(thatForm)){
const res=await userUpdate(thatForm) const res=await userUpdate(thatForm)
if (res.status===0){ if (res.status===0){
@ -74,7 +62,6 @@ const goHome=()=>{
router.push('/') router.push('/')
} }
definePageMeta({ definePageMeta({
title: '实名认证',
i18n: 'realAuth.title', i18n: 'realAuth.title',
}) })
</script> </script>
@ -100,16 +87,13 @@ definePageMeta({
<div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.otherTabDesc') }}</div> <div class="text-[#BDBDBD] text-[16px] mb-[34px]">{{ $t('realAuth.otherTabDesc') }}</div>
<div class="mb-[100px]"> <div class="mb-[100px]">
<div class="border-b-[1.7px] mt-[8px]"> <div class="border-b-[1.7px] mt-[8px]">
<van-field :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field> <van-field v-model="form.realName" :label="$t('realAuth.name')" clearable :placeholder="$t('realAuth.namePlaceholder')"></van-field>
</div> </div>
<div class="border-b-[1.7px] mt-[8px]"> <div class="border-b-[1.7px] mt-[8px]">
<van-field :modelValue="columns.find(x=>x.value===form.sex)?.text" is-link readonly name="picker" :label="$t('realAuth.gender')" <x-van-select v-model="form.sex" :placeholder="$t('realAuth.text1')" :label="$t('realAuth.gender')" :columns="columns"/>
@click="showPicker = true" />
</div> </div>
<div class="border-b-[1.7px] mt-[8px]"> <div class="border-b-[1.7px] mt-[8px]">
<van-field v-model="form.birthDate" is-link readonly name="birthdayPicker" :label="$t('realAuth.birthday')" <x-van-date v-model="form.birthDate" :label="$t('realAuth.birthday')" :placeholder="$t('realAuth.birthdayPlaceholder')"/>
:placeholder="$t('realAuth.birthdayPlaceholder')" @click="showBirthdayPicker = true" />
</div> </div>
<div class="border-b-[1.7px] mt-[8px]"> <div class="border-b-[1.7px] mt-[8px]">
<van-field v-model="form.userExtend.address" :label="$t('realAuth.adress')" clearable <van-field v-model="form.userExtend.address" :label="$t('realAuth.adress')" clearable
@ -144,13 +128,6 @@ definePageMeta({
<div v-else class="mt-auto pb-94px"> <div v-else class="mt-auto pb-94px">
<van-button color="#E9F1F8" @click="goHome" style="color: #2B53AC;font-weight: 600" block>{{ $t('home.go_home')}}</van-button> <van-button color="#E9F1F8" @click="goHome" style="color: #2B53AC;font-weight: 600" block>{{ $t('home.go_home')}}</van-button>
</div> </div>
<van-popup v-model:show="showPicker" destroy-on-close position="bottom">
<van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
</van-popup>
<van-popup v-model:show="showBirthdayPicker" destroy-on-close position="bottom">
<van-date-picker v-model="birthdayDate" :min-date="minDate" :max-date="maxDate"
@cancel="showBirthdayPicker = false" @confirm="onBirthdayConfirm" />
</van-popup>
</div> </div>
</template> </template>

View File

@ -28,10 +28,10 @@ const adress=ref('')
<div <div
class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] h-screen-nav bg-cover pt-77px flex-grow-1 flex flex-col "> class="w-[100vw] bg-[url('@/static/images/asdfsdd.png')] h-screen-nav bg-cover pt-77px flex-grow-1 flex flex-col ">
<div class="text-16px text-#191919 font-bold mb-40px px-34px"> <div class="text-16px text-#191919 font-bold mb-40px px-34px">
{{$t(personal.title)}} {{$t('personal.title')}}
</div> </div>
<div class="grow-1 px-34px"> <div class="grow-1 px-34px">
<van-field type="tel" :label-width="161" :label="$t(personal.text)" class="mb-10px" :placeholder="$t('login.phonePlaceholder')"> <van-field type="tel" :label-width="161" :label="$t('personal.text')" class="mb-10px" :placeholder="$t('login.phonePlaceholder')">
<template #label> <template #label>
<div class="flex"> <div class="flex">
<div class="mr-41px whitespace-nowrap">{{$t('profile.phone')}}</div> <div class="mr-41px whitespace-nowrap">{{$t('profile.phone')}}</div>
@ -50,7 +50,7 @@ const adress=ref('')
<van-field :label="$t('realAuth.bankCard')" class="mb-10px" :placeholder="$t('realAuth.bankCardPlaceholder')"/> <van-field :label="$t('realAuth.bankCard')" class="mb-10px" :placeholder="$t('realAuth.bankCardPlaceholder')"/>
</div> </div>
<div class="h-81px bg-#fff flex justify-center pt-7px border-t"> <div class="h-81px bg-#fff flex justify-center pt-7px border-t">
<van-button color="#2B53AC" class="w-213px van-btn-h-38px">{{$t(personal.next)}}</van-button> <van-button color="#2B53AC" class="w-213px van-btn-h-38px">{{$t('personal.next')}}</van-button>
</div> </div>
</div> </div>
</template> </template>

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

View File

@ -73,7 +73,8 @@
"bankCardPlaceholder": "请输入银行卡号码", "bankCardPlaceholder": "请输入银行卡号码",
"cancel": "取消", "cancel": "取消",
"confirm": "确定", "confirm": "确定",
"success_mess": "提交成功" "success_mess": "提交成功",
"text1": "请选择性别"
}, },
"detail": { "detail": {
"text1": "作者", "text1": "作者",