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/view/Home.vue | 220 +++++++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 180 insertions(+), 40 deletions(-)
diff --git a/src/view/Home.vue b/src/view/Home.vue
index 7eb5c7f..e0f1b56 100644
--- a/src/view/Home.vue
+++ b/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 {
--
Gitblit v1.7.1