From 1c4dddd5cab815cb15cbb57475a4c6f6ed60ceb2 Mon Sep 17 00:00:00 2001
From: pyt <626651354@qq.com>
Date: 星期三, 05 三月 2025 10:49:47 +0800
Subject: [PATCH] 🌈 style:增加翻译
---
src/component/userInfo.vue | 132 +++++++++++++++++++++++++++++++++++++++-----
1 files changed, 117 insertions(+), 15 deletions(-)
diff --git a/src/component/userInfo.vue b/src/component/userInfo.vue
index 41c9855..40bb7da 100644
--- a/src/component/userInfo.vue
+++ b/src/component/userInfo.vue
@@ -3,35 +3,76 @@
append-to-body @open="open">
<div class="content">
<el-form label-position="left" label-width="120px" ref="form" :model="form" :rules="rules">
- <div class="title">个人信息</div>
- <div class="company">所属公司：{{ userInfo.companyName }}</div>
+ <div class="title">个人信息 | Personal Information</div>
+ <div class="company">
+ <div class="company-info">
+ <div class="company-cn">所属公司{{ userInfo.companyName }}</div>
+ <div class="company-en">Company</div>
+ </div>
+ </div>
<el-row :gutter="90" class="companyForm">
<el-col :span="6.5">
<el-form-item label="姓名:" prop="userName">
+ <template #label>
+ <div class="form-label">
+ <div>姓名</div>
+ <div class="label-en">Name</div>
+ </div>
+ </template>
<el-input v-model="form.userName" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
- <el-col :span="6.5"><el-form-item label="手机号:" prop="phone" label-width="120px">
+ <el-col :span="6.5">
+ <el-form-item prop="phone">
+ <template #label>
+ <div class="form-label">
+ <div>手机号</div>
+ <div class="label-en">Mobile Phone</div>
+ </div>
+ </template>
<el-input v-model="form.phone"></el-input>
- </el-form-item></el-col>
- <el-col :span="6.5"><el-form-item label="邮箱:" prop="userEmail">
+ </el-form-item>
+ </el-col>
+ <el-col :span="6.5">
+ <el-form-item prop="userEmail">
+ <template #label>
+ <div class="form-label">
+ <div>邮箱</div>
+ <div class="label-en">Email</div>
+ </div>
+ </template>
<el-input v-model="form.userEmail"></el-input>
- </el-form-item></el-col>
+ </el-form-item>
+ </el-col>
</el-row>
- <div class="company" style="margin-top: 6px;">其他邮箱
+ <div class="company" style="margin-top: 6px;">
+ <div class="company-info">
+ <div class="company-cn">其他邮箱</div>
+ <div class="company-en">Other email(s)</div>
+ </div>
<div @click="addEmail" class="btn"><img src="@/assets/add.png" alt="">新增邮箱</div>
</div>
<el-row :gutter="90" class="companyForm">
<div v-for="(item, index) in form.otherEmails" :key="item">
<el-col :span="6.5">
- <el-form-item label="邮箱:" :prop="'otherEmails.' + index + '.mail'" :rules="[{
- required: true, message: '请输入邮箱', trigger: 'change'
- }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }]">
+ <el-form-item :prop="'otherEmails.' + index + '.mail'">
+ <template #label>
+ <div class="form-label">
+ <div>邮箱</div>
+ <div class="label-en">Email</div>
+ </div>
+ </template>
<el-input v-model="item.mail"></el-input>
</el-form-item>
</el-col>
<el-col :span="16">
<el-form-item label="备注:" label-width="120px">
+ <template #label>
+ <div class="form-label">
+ <div>备注</div>
+ <div class="label-en">Remarks</div>
+ </div>
+ </template>
<div style="display: flex;align-items: center;"><el-input
v-model="item.mark"></el-input>
<img @click="delEmail(item, index)"
@@ -42,13 +83,23 @@
</el-col>
</div>
</el-row>
- <div class="company" style="margin-top: 6px;">常用收件信息
+ <div class="company" style="margin-top: 6px;">
+ <div class="company-info">
+ <div class="company-cn">常用收件信息</div>
+ <div class="company-en">Frequently Used Consignee Information</div>
+ </div>
<div class="btn" @click="addContact"><img src="@/assets/add.png" alt="">新增收件人</div>
</div>
<el-row :gutter="90" class="companyForm" v-for="(item, index) in form.contactInfoList" :key="item">
<el-col :span="6.5">
<el-form-item label="收件人姓名:" :rules="[{ required: true, message: '请输入', trigger: 'change' }]"
:prop="'contactInfoList.' + index + '.name'">
+ <template #label>
+ <div class="form-label">
+ <div>收件人姓名</div>
+ <div class="label-en">Name</div>
+ </div>
+ </template>
<el-input v-model="item.name"></el-input>
</el-form-item>
</el-col>
@@ -56,6 +107,12 @@
<el-form-item label="收件人手机号:"
:rules="[{ required: true, message: '请输入', trigger: 'change' }, { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }]"
:prop="'contactInfoList.' + index + '.phone'">
+ <template #label>
+ <div class="form-label">
+ <div>收件人手机号</div>
+ <div class="label-en">Mobile Phone</div>
+ </div>
+ </template>
<el-input v-model="item.phone"></el-input>
</el-form-item>
</el-col>
@@ -63,19 +120,37 @@
<el-form-item label="收件人邮箱:"
:rules="[{ required: true, message: '请输入', trigger: 'change' }, { type: 'email', message: '请输入正确的邮箱地址', trigger: 'change' }]"
:prop="'contactInfoList.' + index + '.email'">
+ <template #label>
+ <div class="form-label">
+ <div>收件人邮箱</div>
+ <div class="label-en">Email</div>
+ </div>
+ </template>
<el-input v-model="item.email"></el-input>
</el-form-item>
</el-col>
<el-col :span="20" style="padding-right: 52px;">
<el-form-item label="收件人地址:" :rules="[{ required: true, message: '请输入', trigger: 'change' }]"
:prop="'contactInfoList.' + index + '.address'">
+ <template #label>
+ <div class="form-label">
+ <div>收件人地址</div>
+ <div class="label-en">Consignee's Address</div>
+ </div>
+ </template>
<el-input v-model="item.address"></el-input>
</el-form-item>
</el-col>
<el-col :span="20" style="padding-right: 52px;position: relative;">
<el-form-item label="备注:">
+ <template #label>
+ <div class="form-label">
+ <div>备注</div>
+ <div class="label-en">Remarks</div>
+ </div>
+ </template>
<div style="display: flex;align-items: center;"><el-input type="textarea" :rows="3"
- v-model="item.remark"></el-input>
+ v-model="item.Remarks"></el-input>
<img @click="delContact(item, index)"
style="width: 19px;height: 21px;cursor: pointer;position: absolute;right: -175px;"
src="@/assets/delete.png" alt="">
@@ -85,8 +160,8 @@
</el-row>
</el-form>
<div class="btns">
- <el-button @click="$emit('close')">关闭</el-button>
- <el-button type="primary" @click="submit">保存</el-button>
+ <el-button @click="$emit('close')">关闭 | Close</el-button>
+ <el-button type="primary" @click="submit">保存 | Save</el-button>
</div>
</div>
</el-dialog>
@@ -159,7 +234,7 @@
}
if (res.data.addressInfo) {
res.data.addressInfo.map(item => {
- item.remark = item.mark
+ item.Remarks = item.mark
})
}
this.form = {
@@ -221,6 +296,20 @@
line-height: 24px;
margin-left: 38px;
padding-right: 50px;
+
+ .company-info {
+ line-height: 12px;
+
+ .company-cn {
+ color: #3B3F56;
+ }
+
+ .company-en {
+ font-size: 12px;
+ color: #999;
+ margin-top: 4px;
+ }
+ }
.btn {
width: 151px;
@@ -287,6 +376,19 @@
font-size: 15px;
color: #3B3F56;
font-weight: 500;
+ display: flex;
+ }
+
+ .form-label {
+ white-space: normal;
+ line-height: 1.2; // 从1.2调整到1
+ display: flex;
+ flex-direction: column;
+
+ .label-en {
+ font-size: 12px;
+ color: #999;
+ }
}
}
</style>
--
Gitblit v1.7.1