🌈 style:增加翻译

pyt

2025-03-05 1c4dddd5cab815cb15cbb57475a4c6f6ed60ceb2

🌈 style:增加翻译

 src/component/LogOut.vue

@@ -3,11 +3,14 @@
        <el-dialog :visible.sync="show" :show-close="false" width="518px" @close="$emit('close')"
            :modal-append-to-body="false">
            <div class="txt-center pt--32">
                <div class="fs--21 font-bold">退出登录</div>
                <div class="fs--16 mt--77 color">确认退出当前登录帐号吗？</div>
                <div class="fs--21 font-bold">退出登录 | Log Out</div>

                <div class="fs--16 mt--77 color">

                    <div>确认退出当前登录帐号吗？</div>

                    <div>Confirm to log out of this account?</div>

                </div>

                <div class="btns">
                    <el-button @click="$emit('close')">关闭</el-button>
                    <el-button @click="submit" type="primary">确认</el-button>
                    <el-button @click="$emit('close')">关闭 | Close</el-button>

                    <el-button @click="submit" type="primary">确认 | Confirm</el-button>

                </div>
            </div>
        </el-dialog>

 src/component/Notice.vue

@@ -2,9 +2,9 @@
    <el-dialog :visible.sync="show" :show-close="false" width="1018px" @close="$emit('close')"
        :modal-append-to-body="false">
        <div class="txt-center pt--30 pb--25">
            <div class="fs--18 mb--70 font-bold color1">下单须知</div>
            <div class="fs--18 mb--70 font-bold color1">下单须知 | Usage Instructions</div>

            <div v-html="content"></div>
            <div class="btns pointer" @click="$emit('close')">确认</div>
            <div class="btns pointer" @click="$emit('close')">确认 | Confirm</div>

        </div>
    </el-dialog>
</template>

 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>


 src/view/Home.vue

@@ -7,55 +7,105 @@
        <div class="search-box">
            <div class="title-card">
                <div class="title-left">
                    订单列表
                    订单列表 | Order List
                </div>
                <div class="title-right">
                    <span @click="noticeShow = true" class="order-agress">下单须知</span>
                    <div>
                        <div @click="noticeShow = true" class="order-agress">下单须知</div>
                        <div @click="noticeShow = true" class="order-agress">Usage Instructions</div>
                    </div>
                    <div class="line"></div>
                    <span class="add-ord" @click="$router.push('/addOrder')">添加订单</span>
                    <div>
                        <div class="add-ord" @click="$router.push('/addOrder')">添加订单</div>
                        <div class="add-ord" @click="$router.push('/addOrder')">Add orders</div>
                    </div>
                </div>
            </div>
            <div class="search-form">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <div class="flex a-center justify-between flex-wrap">
                        <el-form-item label="订单编号：" prop="orderId" class="unset_m" style="margin-left: 15px">
                        <el-form-item prop="orderId" class="unset_m" style="margin-left: 15px">
                            <template #label>
                                <div style="white-space: normal;line-height:1.2">
                                    <div>订单编号</div>
                                    <div style="font-size: 12px;color: #999">Order No.</div>
                                </div>
                            </template>
                            <el-input style="width: 230px;" v-model="searchForm.orderId" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="集装箱号：" prop="container" class="unset_m">

                        <el-form-item prop="container" class="unset_m">
                            <template #label>
                                <div style="white-space: normal;line-height:1.2">
                                    <div>集装箱号</div>
                                    <div style="font-size: 12px;color: #999">Container No.</div>
                                </div>
                            </template>
                            <el-input style="width: 230px;" v-model="searchForm.container" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="提单号：" prop="bol" class="unset_m">

                        <el-form-item prop="bol" class="unset_m">
                            <template #label>
                                <div style="white-space: normal;line-height:1.2">
                                    <div>提单号</div>
                                    <div style="font-size: 12px;color: #999">BOL No.</div>
                                </div>
                            </template>
                            <el-input style="width: 230px;" v-model="searchForm.bol" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="收件人邮箱：" prop="email" class="unset_m">

                        <el-form-item prop="email" class="unset_m">
                            <template #label>
                                <div style="white-space: normal;line-height:1.2">
                                    <div>收件人邮箱</div>
                                    <div style="font-size: 12px;color: #999">Consignee's Email</div>
                                </div>
                            </template>
                            <el-input style="width: 230px;" v-model="searchForm.email" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态：" prop="status" class="unset_m">

                        <el-form-item prop="status" class="unset_m">
                            <template #label>
                                <div style="white-space: normal;line-height:1.2">
                                    <div>订单状态</div>
                                    <div style="font-size: 12px;color: #999">Order Status</div>
                                </div>
                            </template>
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.status"
                                placeholder="请选择">
                                <el-option v-for="item in options" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
                                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收件人地址：" prop="address" class="unset_m1"
                            style="margin-bottom: unset !important;">

                        <el-form-item prop="address" class="unset_m1" style="margin-bottom: unset !important;">
                            <template #label>
                                <div style="white-space: normal;line-height:1.2">
                                    <div>收件人地址</div>
                                    <div style="font-size: 12px;color: #999">Consignee's Address</div>
                                </div>
                            </template>
                            <el-input style="width: 230px;" v-model="searchForm.address" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="DO文件是否上传：" prop="DO" class="unset_m1"
                            style="margin-bottom: unset !important;">

                        <el-form-item prop="DO" class="unset_m1" style="margin-bottom: unset !important;">
                            <template #label>
                                <div style="white-space: normal;line-height:1.2">
                                    <div>DO文件是否上传</div>
                                    <div style="font-size: 12px;color: #999">Was DO Uploaded?</div>
                                </div>
                            </template>
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.DO"
                                placeholder="请选择">
                                <el-option v-for="item in option1" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
                                <el-option v-for="item in option1" :key="item.id" :label="item.label" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width: 570px;">
                        </el-form-item>
                        <div class="flex a-center">
                            <el-button type="default" class="reset" @click="reset">重置</el-button>
                            <el-button type="primary" class="search" @click="search">搜索</el-button>
                            <el-button type="default" class="reset" @click="reset">重置 | Reset</el-button>
                            <el-button type="primary" class="search" @click="search">搜索 | Search</el-button>
                        </div>
                    </div>
                </el-form>
@@ -63,48 +113,132 @@
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column width="200" prop="orderId" label="订单编号" align="center">
                <el-table-column width="200" prop="orderId" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>订单编号</div>
                            <div class="header-en">Order No.</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="container" label="集装箱号" align="center">
                <el-table-column width="200" prop="container" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>集装箱号</div>
                            <div class="header-en">Container No.</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="bol" label="提单号" align="center">
                <el-table-column width="200" prop="bol" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>提单号</div>
                            <div class="header-en">BOL No.</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="mail" label="收件人邮箱" align="center">
                <el-table-column width="200" prop="mail" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>收件人邮箱</div>
                            <div class="header-en">Consignee's Email</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="250" prop="address" label="收件人地址" align="center">
                <el-table-column width="250" prop="address" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>收件人地址</div>
                            <div class="header-en">Consignee's Address</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="estinatedArrival" label="预计到港" align="center">
                <el-table-column width="200" prop="estinatedArrival" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>预计到港</div>
                            <div class="header-en">ETA</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="pickupDate" label="提柜日期" align="center">
                <el-table-column width="200" prop="pickupDate" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>提柜日期</div>
                            <div class="header-en">Pickup Date</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="deliverySchedule" label="计划送柜日期" align="center">
                <el-table-column width="200" prop="deliverySchedule" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>计划送柜日期</div>
                            <div class="header-en">Delivery Schedule</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="cargoType" label="柜型" align="center">
                <el-table-column width="200" prop="cargoType" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>柜型</div>
                            <div class="header-en">Container Type</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="200" prop="realSchedule" label="实际送货日期" align="center">
                <el-table-column width="200" prop="realSchedule" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>实际送货日期</div>
                            <div class="header-en">Actual Delivery Date</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column width="150" prop="DO" label="DO文件是否上传" align="center">
                <el-table-column width="150" prop="DO" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>DO文件是否上传</div>
                            <div class="header-en">Was DO Uploaded?</div>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <div>{{ scope.row.DO ? '是' : '否' }}</div>
                    </template>
                </el-table-column>
                <el-table-column width="150" prop="asPU" label="PU文件是否上传" align="center">
                <el-table-column width="150" prop="asPU" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>PU文件是否上传</div>
                            <div class="header-en">Is PU Uploaded?</div>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <div>{{ scope.row.asPU ? '是' : '否' }}</div>
                    </template>
                </el-table-column>
                <el-table-column width="150" prop="status" label="订单状态" align="center">
                <el-table-column width="150" prop="status" align="center">
                    <template #header>
                        <div class="custom-header">
                            <div>订单状态</div>
                            <div class="header-en">Order Status</div>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        
                        <div v-if="scope.row.status == '收货⼈已确认' || scope.row.status == '待卡车确认' || scope.row.status == '待收货⼈确认'">预约中</div>
                        <div v-if="scope.row.status == '收货⼈已确认' || scope.row.status == '待卡车确认' || scope.row.status == '待收货⼈确认'">
                            预约中</div>
                        <div v-else-if="scope.row.status == '卡车和收货⼈均确认'">预约完成</div>
                        <div v-else>{{ scope.row.status }}</div>
                    </template>
                </el-table-column>
                <el-table-column width="150" prop="option" label="操作" align="center" fixed="right">
                <el-table-column width="150" prop="option" align="center" fixed="right">
                    <template #header>
                        <div class="custom-header">
                            <div>操作</div>
                            <div class="header-en">Operation</div>
                        </div>
                    </template>
                    <template slot-scope="scope">
                        <el-button type="text" class="table-btn"
                            @click="handleClick(scope.row, 'detail')">查看详情</el-button><span class="line-set">|</span>
                        <el-button type="text" class="table-btn" @click="handleClick(scope.row, 'detail')">查看详情</el-button>
                        <span class="line-set">|</span>
                        <el-button type="text" class="table-btn" @click="handleClick(scope.row, 'edit')">编辑</el-button>
                    </template>
                </el-table-column>
@@ -297,8 +431,8 @@
        padding: 0 23px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 75px;
        line-height: 75px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        font-size: 20px;
@@ -308,6 +442,7 @@
        .title-right {
            display: flex;
            align-items: center;
            text-align: center;

            .order-agress {
                font-family: SourceHanSansCN, SourceHanSansCN;
@@ -361,9 +496,14 @@
        }

        ::v-deep {
            .el-form-item {
                display: flex;
                align-items: center;
            }

            .el-form-item__label {
                font-size: 16px;
                color: rgba(59, 63, 86, .8);
                line-height: 1.2 !important;
                vertical-align: middle;
            }

            .el-input__inner {

 src/view/Login.vue

@@ -2,21 +2,21 @@
    <div class="content">
        <div class="login_box">
            <img src="../assets/img/logo@2x.png" class="w--255 h--95 mt--57" />
            <div class="my--33 fs--28 lh--28 font-bold color1">客户登录</div>
            <div class="my--33 fs--28 lh--28 font-bold color1">客户登录 | User(C) Login</div>

            <div class="flex a-center px--14 py--19 text_box">
                <img src="../assets/img/youxiang@2x.png" class="w--20 h--15 mr--25 shrink0" />
                <el-input v-model="account" placeholder="请输入邮箱" />
                <el-input v-model="account" placeholder="请输入邮箱 | Email" />

            </div>
            <div class="flex a-center mt--16 px--14 py--19 text_box">
                <img src="../assets/img/mima@2x.png" class="w--18 h--20 mr--26 shrink0" />
                <el-input show-password v-model="pwd" placeholder="请输入密码" />
                <el-input show-password v-model="pwd" placeholder="请输入密码 | Password" />

            </div>
            <div class="flex a-center mt--16 pl--14 text_box">
                <img src="../assets/img/yanzhengma@2x.png" class="w--18 h--20 mr--26 shrink0" />
                <el-input v-model="code" placeholder="请输入验证码" />
                <el-input v-model="code" placeholder="请输入验证码 | Verification code" />

                <div class="code pointer">{{ codeStr }}</div>
            </div>
            <div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录</div>
            <div @click="loginFun" class="mt--53 fs--18 lh--27 font-bold py--18 px--158 br--6 pointer bgcolor1">登录 | Login</div>

        </div>
    </div>
</template>
@@ -163,12 +163,13 @@
            padding: 0;
            height: unset;
            line-height: 16px;
        }

        .el-input__inner::placeholder {
            font-size: 16px;
            &::placeholder {

                font-size: 14px;  // 确保在此处设置

                color: #999;

            font-weight: 400;
        }
        }


        .el-input__icon {
            line-height: unset;

 src/view/addOrder.vue

@@ -254,7 +254,9 @@
                    </div>

                    <div class="box_text2">QTY</div>

                  </div>

                  <el-input :disabled="type == 'detail'" v-model="form.QTY" placeholder="请输入"></el-input>

                  <el-input :disabled="type == 'detail'" v-model="form.QTY" placeholder="请输入"

                    onkeypress="return event.charCode >= 48 && event.charCode <= 57">

                  </el-input>

                </div>

              </el-form-item>

              <el-form-item label="" class="label4" prop="QTYUnit" label-width="0">

@@ -398,8 +400,7 @@
                        </div>

                        <div class="box_text2">Tel</div>

                      </div>

                      <el-input type="number" :disabled="type != 'add'" v-model="form.tel"

                        placeholder="请输入"></el-input>

                      <el-input type="number" :disabled="type != 'add'" v-model="form.tel" placeholder="请输入"></el-input>



                    </div>

                  </el-form-item>