🌈 style:增加翻译

pyt

2025-03-05 1c4dddd5cab815cb15cbb57475a4c6f6ed60ceb2

 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>
@@ -153,7 +287,7 @@
                    label: '待到港'
                },
                {
                    id:  '已到港',
                    id: '已到港',
                    label: '已到港'
                },
                {
@@ -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 {