🌈 style:增加翻译

pyt

2025-03-05 1c4dddd5cab815cb15cbb57475a4c6f6ed60ceb2

 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>