🌈 style:增加翻译

pyt

2025-03-05 1c4dddd5cab815cb15cbb57475a4c6f6ed60ceb2

🌈 style:增加翻译

 src/component/LogOut.vue

@@ -1,79 +1,82 @@
<template>
    <div>
        <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="btns">
                    <el-button @click="$emit('close')">关闭</el-button>
                    <el-button @click="submit" type="primary">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {};
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        submit() {
            this.$store.commit('SET_USERINFO', {})
            this.$store.commit('SET_USERNAME', '')
            localStorage.clear()
            window.location.replace('/');
        }
    },
};
</script>
<style scoped lang="less">
.color {
    color: rgba(59, 63, 86, .83);
}

.btns {
    display: flex;
    justify-content: center;
    margin-top: 108px;
    padding-bottom: 29px;

    .el-button {
        width: 190px;
        height: 50px;
        font-size: 20px;

    }

    .el-button--primary {
        background-color: #014099;
        border-color: #014099;
    }
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}
<template>

    <div>

        <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">退出登录 | 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')">关闭 | Close</el-button>

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

                </div>

            </div>

        </el-dialog>

    </div>

</template>



<script>

export default {

    components: {},

    props: {

        show: {

            type: Boolean,

            default: false

        }

    },

    data() {

        return {};

    },

    computed: {},

    watch: {},

    created() { },

    mounted() { },

    methods: {

        submit() {

            this.$store.commit('SET_USERINFO', {})

            this.$store.commit('SET_USERNAME', '')

            localStorage.clear()

            window.location.replace('/');

        }

    },

};

</script>

<style scoped lang="less">

.color {

    color: rgba(59, 63, 86, .83);

}



.btns {

    display: flex;

    justify-content: center;

    margin-top: 108px;

    padding-bottom: 29px;



    .el-button {

        width: 190px;

        height: 50px;

        font-size: 20px;



    }



    .el-button--primary {

        background-color: #014099;

        border-color: #014099;

    }

}



::v-deep .el-dialog {

    border-radius: 8px;



    .el-dialog__header {

        display: none !important;

    }



    .el-dialog__body {

        padding: 0 !important;



    }

}

</style>

 src/component/Notice.vue

@@ -1,66 +1,66 @@
<template>
    <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 v-html="content"></div>
            <div class="btns pointer" @click="$emit('close')">确认</div>
        </div>
    </el-dialog>
</template>

<script>
import { getNotice } from '@/view/service'
export default {
    components: {},
    props: {
        show: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            content: ''
        };
    },
    computed: {},
    watch: {},
    created() {
        getNotice().then(res => {
            this.content = res.data.content
        })
    },
    mounted() { },
    methods: {},
};
</script>
<style scoped lang="less">
.color1 {
    color: rgba(59, 63, 86, 1);
}

::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__header {
        display: none !important;
    }

    .el-dialog__body {
        padding: 0 !important;

    }
}

.btns {
    margin: 25px auto 0;
    width: 311px;
    line-height: 50px;
    background: #014099;
    border-radius: 4px;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;
}
<template>

    <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">下单须知 | Usage Instructions</div>

            <div v-html="content"></div>

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

        </div>

    </el-dialog>

</template>



<script>

import { getNotice } from '@/view/service'

export default {

    components: {},

    props: {

        show: {

            type: Boolean,

            default: false

        },

    },

    data() {

        return {

            content: ''

        };

    },

    computed: {},

    watch: {},

    created() {

        getNotice().then(res => {

            this.content = res.data.content

        })

    },

    mounted() { },

    methods: {},

};

</script>

<style scoped lang="less">

.color1 {

    color: rgba(59, 63, 86, 1);

}



::v-deep .el-dialog {

    border-radius: 8px;



    .el-dialog__header {

        display: none !important;

    }



    .el-dialog__body {

        padding: 0 !important;



    }

}



.btns {

    margin: 25px auto 0;

    width: 311px;

    line-height: 50px;

    background: #014099;

    border-radius: 4px;

    font-weight: bold;

    font-size: 18px;

    color: #FFFFFF;

}

</style>

 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>
@@ -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 {

 src/view/Login.vue

@@ -1,178 +1,179 @@
<template>
    <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="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="请输入邮箱" />
            </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="请输入密码" />
            </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="请输入验证码" />
                <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>
    </div>
</template>

<script>
import { generateVerificationCode } from '@/utils/utils';
import { login } from './service'
import CryptoJS from 'crypto-js';
export default {
    components: {},
    props: {},
    data() {
        return {
            account: '',
            pwd: '',
            code: '',
            codeStr: '',
        };
    },
    created() {
        this.codeStr = generateVerificationCode()
    },
    mounted() {
        document.addEventListener("keydown", this.handleKeyDown);
    },
    methods: {
        // 监听当前页面是否按下了回车
        handleKeyDown(event) {
            if (event.key === "Enter") {
                this.loginFun();
            }
        },
        loginFun() {
            if (!this.account) {
                this.$message({
                    message: '请输入邮箱',
                    type: 'warning'
                });
                return
            }
            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
            if (!emailPattern.test(this.account)) {
                this.$message({
                    message: '请输入有效的邮箱地址',
                    type: 'warning'
                });
                return;
            }
            if (!this.pwd) {
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
                return
            }
            if (!this.code) {
                this.$message({
                    message: '请输入验证码',
                    type: 'warning'
                });
                return
            }
            if (!this.codeStr.match(new RegExp(this.code, "i"))) {
                this.$message({
                    message: '验证码错误',
                    type: 'warning'
                });
                this.codeStr = generateVerificationCode()
                return
            }
            login({
                account: this.account,
                pwd: CryptoJS.MD5(this.pwd).toString(),
                type: 2
            }).then((result) => {
                localStorage.setItem('extra', result.data.extra);
                this.$store.commit('SET_USERINFO', result.data);
                this.$router.push({ path: '/home' });
            }).catch(() => {
                this.code = ''
                this.codeStr = generateVerificationCode()
            });
        }
    },
};
</script>
<style scoped lang="less">
.bgcolor1 {
    background: #014099;
    color: #FFFFFF;
}

.color1 {
    color: #3B3F56;
}

.content {
    position: relative;
    background-image: url("../assets/img/loginBg.png");
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
}

.login_box {
    position: absolute;
    top: 50%;
    right: 178px;
    transform: translateY(-50%);
    width: 535px;
    height: 612px;
    background: #FFFFFF;
    border-radius: 11px;
    display: flex;
    flex-direction: column;
    align-items: center;

    .text_box {
        width: 352px;
        background: #F9F9F9;
        border-radius: 6px;
        border: 1px solid #DFDFDF;

        .code {
            padding: 19px 0;
            text-align: center;
            flex-shrink: 0;
            width: 80px;
            height: 100%;
            background: #014099;
            border-radius: 6px;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 16px;
        }
    }


    ::v-deep .el-input {
        .el-input__inner {
            background-color: transparent;
            border: unset;
            padding: 0;
            height: unset;
            line-height: 16px;
        }

        .el-input__inner::placeholder {
            font-size: 16px;
            font-weight: 400;
        }

        .el-input__icon {
            line-height: unset;
        }
    }
}
<template>

    <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">客户登录 | 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="请输入邮箱 | 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="请输入密码 | 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="请输入验证码 | 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">登录 | Login</div>

        </div>

    </div>

</template>



<script>

import { generateVerificationCode } from '@/utils/utils';

import { login } from './service'

import CryptoJS from 'crypto-js';

export default {

    components: {},

    props: {},

    data() {

        return {

            account: '',

            pwd: '',

            code: '',

            codeStr: '',

        };

    },

    created() {

        this.codeStr = generateVerificationCode()

    },

    mounted() {

        document.addEventListener("keydown", this.handleKeyDown);

    },

    methods: {

        // 监听当前页面是否按下了回车

        handleKeyDown(event) {

            if (event.key === "Enter") {

                this.loginFun();

            }

        },

        loginFun() {

            if (!this.account) {

                this.$message({

                    message: '请输入邮箱',

                    type: 'warning'

                });

                return

            }

            const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

            if (!emailPattern.test(this.account)) {

                this.$message({

                    message: '请输入有效的邮箱地址',

                    type: 'warning'

                });

                return;

            }

            if (!this.pwd) {

                this.$message({

                    message: '请输入密码',

                    type: 'warning'

                });

                return

            }

            if (!this.code) {

                this.$message({

                    message: '请输入验证码',

                    type: 'warning'

                });

                return

            }

            if (!this.codeStr.match(new RegExp(this.code, "i"))) {

                this.$message({

                    message: '验证码错误',

                    type: 'warning'

                });

                this.codeStr = generateVerificationCode()

                return

            }

            login({

                account: this.account,

                pwd: CryptoJS.MD5(this.pwd).toString(),

                type: 2

            }).then((result) => {

                localStorage.setItem('extra', result.data.extra);

                this.$store.commit('SET_USERINFO', result.data);

                this.$router.push({ path: '/home' });

            }).catch(() => {

                this.code = ''

                this.codeStr = generateVerificationCode()

            });

        }

    },

};

</script>

<style scoped lang="less">

.bgcolor1 {

    background: #014099;

    color: #FFFFFF;

}



.color1 {

    color: #3B3F56;

}



.content {

    position: relative;

    background-image: url("../assets/img/loginBg.png");

    background-size: 100% 100%;

    height: 100%;

    width: 100%;

}



.login_box {

    position: absolute;

    top: 50%;

    right: 178px;

    transform: translateY(-50%);

    width: 535px;

    height: 612px;

    background: #FFFFFF;

    border-radius: 11px;

    display: flex;

    flex-direction: column;

    align-items: center;



    .text_box {

        width: 352px;

        background: #F9F9F9;

        border-radius: 6px;

        border: 1px solid #DFDFDF;



        .code {

            padding: 19px 0;

            text-align: center;

            flex-shrink: 0;

            width: 80px;

            height: 100%;

            background: #014099;

            border-radius: 6px;

            font-weight: 400;

            font-size: 16px;

            color: #FFFFFF;

            line-height: 16px;

        }

    }





    ::v-deep .el-input {

        .el-input__inner {

            background-color: transparent;

            border: unset;

            padding: 0;

            height: unset;

            line-height: 16px;

            
            &::placeholder {

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

                color: #999;

                font-weight: 400;

            }

        }



        .el-input__icon {

            line-height: unset;

        }

    }

}

</style>

 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>

@@ -1040,10 +1041,10 @@
            this.$message.error('联系电话和邮箱至少填写其中一项');



          } else {

            this.form.DOFileUrls = this.fileList1.map(item => {return { url: item.url }})

            this.form.PUFileUrls = this.fileList2.map(item => {return { url: item.url }})

            this.form.PODFileUrls = this.fileList3.map(item => {return { url: item.url }})

            this.form.otherFileUrls = this.fileList4.map(item => {return { url: item.url }})

            this.form.DOFileUrls = this.fileList1.map(item => { return { url: item.url } })

            this.form.PUFileUrls = this.fileList2.map(item => { return { url: item.url } })

            this.form.PODFileUrls = this.fileList3.map(item => { return { url: item.url } })

            this.form.otherFileUrls = this.fileList4.map(item => { return { url: item.url } })

            // 添加订单

            if (this.type === 'add') {

              if (this.isSave) {

@@ -1239,7 +1240,7 @@
          this.upFileAsArrayBuffer('http://47.108.239.173:2020/api/oss/upload_file', e.file, { methods: 'POST', fileName: res.data.data }).then(resp => {

            if (resp.data.status === 0) {

              console.log(resp.data, 'resp.data.data');

              


              this[`fileList${value}`].push({ name: obj.originalName, url: 'http://47.108.239.173:2020/api/oss/download/' + res.data.data })

              this.$forceUpdate()

            }