Fedex / iClear-Connect-Pre-Clearance

Go to a project
Toggle navigation Toggle navigation pinning
jinhui.wang
fa61e853 1 parent 481b22de

文本修改，样式修改

Expand all
Inline Side-by-side
Showing 7 changed files with 223 additions and 37 deletions
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<meta http-equiv="Content-Security-Policy" content="
worker-src blob:;
child-src blob: gap:;
......@@ -16,7 +14,9 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= webpackConfig.name %></title>
<title>
<%= webpackConfig.name %>
</title>
<!--[if lt IE 11
]><script>
window.location.href = "/html/ie.html";
......@@ -30,6 +30,7 @@
margin: 0px;
padding: 0px;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
......@@ -105,6 +106,7 @@
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
......@@ -118,6 +120,7 @@
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
......@@ -205,15 +208,17 @@
opacity: 0.5;
}
</style>
</head>
<body>
</head>
<body>
<div id="app">
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
<div class="load_title">正在加載系統資源，請耐心等待</div>
<div class="load_title">Loading system resources, please be patient</div>
</div>
</div>
</body>
</body>
</html>
\ No newline at end of file
......
......@@ -1107,3 +1107,58 @@ input:disabled {
.questionIcon {
color: $fedexColor;
}
.uploadHistoryDialog {
.el-dialog__header {
.el-dialog__title {
font-size: 18px;
}
}
.el-dialog__body {
padding: 10px 50px !important;
}
}
.uploadHistoryTable {
.el-table__header-wrapper {
.el-table__header {
thead {
tr {
th {
background-color: #fff !important;
}
}
}
}
}
.el-table__body-wrapper {
tbody {
tr {
td {
background-color: $formItemBackgroundColor;
}
.el-table__expand-column {
.cell {
.el-table__expand-icon {
display: none !important;
}
}
}
.el-table__expanded-cell {
padding: 0px;
background-color: #fff !important;
}
}
tr:hover {
.el-table__expanded-cell {
background-color: #fff !important;
}
}
}
}
}
\ No newline at end of file
......
<template>
<div style="pointer-events: auto" @click="formItemClick">
<el-form-item
class="fedexFormItem"
:label="itemLabel"
......@@ -8,11 +9,22 @@
:id="'inputOuter-' + type + '-' + prop"
>
<slot name="title" slot="label"></slot>
<el-tooltip
v-if="toolyipShow"
class="item"
effect="dark"
:content="content"
:disabled="tooltipDisabled"
placement="top"
>
<slot></slot>
</el-tooltip>
<slot v-else></slot>
<template v-slot:error="scoped">
<div class="formError">{{ scoped.error }}</div>
</template>
</el-form-item>
</div>
</template>
<script>
......@@ -42,11 +54,25 @@ export default {
type: String,
default: "",
},
disabled: {
type: Boolean,
default: true,
},
toolyipShow: {
type: Boolean,
default: false,
},
eventType: {
type: Boolean,
default: false,
},
},
data() {
return {
itemLabel: this.label,
inputFocusType: false,
content: "",
tooltipDisabled: true,
};
},
watch: {
......@@ -62,8 +88,13 @@ export default {
let outInput = document.querySelector(
"#inputOuter-" + this.type + "-" + this.prop
); //获取formitem
let dateEditor = document.querySelector(".el-date-editor");
if (inputInner) {
if (inputInner.disabled && this.eventType) {
inputInner.style = "pointer-events:none";
}
//通过input得id是否存在判断效果是否激活
this.activeType ? inputInner.classList.add("inputFocus") : "";
inputInner.addEventListener("focus", (e) => {
this.inputFocusType = true;
inputInner.classList.add("inputFocus");
......@@ -73,12 +104,8 @@ export default {
inputInner.addEventListener("blur", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
if (this.labelInput) {
this.itemLabel = this.label;
// labelInputInner_parentNode.style.display = 'inline-block'
} else {
!this.activeType ? inputInner.classList.remove("inputFocus") : "";
}
} else {
inputInner.classList.add("inputFocus");
}
......@@ -89,12 +116,8 @@ export default {
inputInner.addEventListener("change", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
if (this.labelInput) {
this.itemLabel = this.label;
// labelInputInner_parentNode.style.display = 'inline-block'
} else {
!this.activeType ? inputInner.classList.remove("inputFocus") : "";
}
} else {
inputInner.classList.add("inputFocus");
}
......@@ -113,7 +136,62 @@ export default {
if (inputInner.value) {
inputInner.classList.add("inputFocus");
}
this.content = inputInner.value;
});
} else {
if (dateEditor) {
this.activeType
? document
.querySelector(".inputInner-" + this.type + "-" + this.prop)
.classList.add("inputFocus")
: "";
if (
document.querySelector(".inputInner-" + this.type + "-" + this.prop)
) {
let dataInner = document
.querySelector(".inputInner-" + this.type + "-" + this.prop)
.getElementsByClassName("el-range-input");
dataInner[0].addEventListener("focus", (e) => {
this.inputFocusType = true;
dataInner[0].classList.add("inputFocus");
outInput.classList.add("activeBorder");
});
dataInner[1].addEventListener("focus", (e) => {
this.inputFocusType = true;
dataInner[1].classList.add("inputFocus");
outInput.classList.add("activeBorder");
});
dataInner[0].addEventListener("blur", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
this.itemLabel = this.label;
!this.activeType
? dataInner[0].classList.remove("inputFocus")
: "";
} else {
dataInner[0].classList.add("inputFocus");
}
this.inputFocusType = false;
outInput.classList.remove("activeBorder");
});
dataInner[1].addEventListener("blur", (e) => {
if (!e.target.value && !e.target.placeholder) {
// input失焦时如果无内容则移除active class
this.itemLabel = this.label;
!this.activeType
? dataInner[1].classList.remove("inputFocus")
: "";
} else {
dataInner[1].classList.add("inputFocus");
}
this.inputFocusType = false;
outInput.classList.remove("activeBorder");
});
}
}
}
},
updated() {
......@@ -123,27 +201,73 @@ export default {
let outInput = document.querySelector(
"#inputOuter-" + this.type + "-" + this.prop
); //获取formitem
let dateEditor = document.querySelector(".el-date-editor");
this.$nextTick(() => {
if (inputInner && inputInner.value) {
if (inputInner) {
if (
inputInner.value != undefined &&
inputInner.value != "" &&
inputInner.value != null
) {
inputInner.classList.add("inputFocus");
} else {
!this.inputFocusType ? inputInner?.classList.remove("inputFocus") : "";
!this.inputFocusType ? inputInner.classList.remove("inputFocus") : "";
this.activeType ? inputInner.classList.add("inputFocus") : "";
}
} else {
if (dateEditor) {
if (this.activeType) {
document.querySelector(".inputInner-" + this.type + "-" + this.prop)
.classList
? document
.querySelector(".inputInner-" + this.type + "-" + this.prop)
.classList.add("inputFocus")
: "";
}
}
}
if (
inputInner &&
inputInner.offsetWidth &&
inputInner.offsetWidth < inputInner.scrollWidth
) {
this.content = inputInner.value;
!this.disabled
? (this.tooltipDisabled = false)
: (this.tooltipDisabled = true);
}
});
},
methods: {
formItemClick() {
this.$emit("event", this.prop);
},
getDateEditorNode() {
let dateInput = document.getElementsByClassName("el-date-editor");
dateInput.forEach((item) => {
item
item.querySelector(".el-input__suffix")
? item
.querySelector(".el-input__suffix")
.children[0].children[0].classList.add("el-icon-date");
.children[0].children[0].classList.add("el-icon-date")
: "";
});
let selectInput = document.getElementsByClassName("el-select");
selectInput.forEach((item) => {
// item.querySelector('.el-input__suffix').children[0].children[0].style.display = 'none'
});
},
onMouseOver(str) {
if (this.$refs[str]) {
const parentWidth = this.$refs[str].parentNode.offsetWidth;
const contentWidth = this.$refs[str].offsetWidth;
// 判断是否开启tooltip功能
if (contentWidth > parentWidth) {
this.isShowTooltip = false;
} else {
this.isShowTooltip = true;
}
}
},
},
};
</script>
......
......@@ -6,10 +6,10 @@ export default {
},
// 公用
common: {
sureBtn: "確定",
sureBtn: "OK",
goBack: "返回",
submitBtn: "提交",
cancleBtn: "取消",
cancleBtn: "Cancel",
useBtn: "使用",
saveBtn: "保存",
closeBtn: "關閉",
......@@ -86,8 +86,8 @@ export default {
onlineDeclare: "線上申報平臺帳號登錄",
registerNumber: "註冊線上申報平臺帳號",
userInfo: "用戶信息維護",
logOut: "退出登錄",
logOutDia: "確定註銷並退出系統嗎？",
logOut: "log out",
logOutDia: "Are you sure to log out and exit the system?",
},
// 申报输入
fillIn: {
......
......@@ -100,7 +100,6 @@ import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import { removeToken } from "@/utils/auth";
export default {
components: {
Breadcrumb,
......@@ -109,9 +108,13 @@ export default {
},
data() {
return {
lang: localStorage.getItem("lang") || "zh-TW",
lang: localStorage.getItem("lang") || "en",
langOptions: [
{
label: "English",
value: "en",
},
{
label: "中文繁體",
value: "zh-TW",
},
......@@ -147,7 +150,7 @@ export default {
this.$store.dispatch("app/toggleSideBar");
},
async logout() {
this.$confirm(this.$t("layout.logOutDia"), "提示", {
this.$confirm(this.$t("layout.logOutDia"), "Tip", {
confirmButtonText: this.$t("common.sureBtn"),
cancelButtonText: this.$t("common.cancleBtn"),
type: "warning",
......@@ -165,7 +168,7 @@ export default {
this.$emit("login", "login");
} else if (val == "create") {
this.$emit("login", "create");
}else if(val == "fedexRegister"){
} else if (val == "fedexRegister") {
this.$emit("login", "fedexRegister");
}
},
......
This diff is collapsed. Click to expand it.
......@@ -36,7 +36,7 @@
<div class="buttonItem-icon">
<svg-icon class="el-icon-user-solid" icon-class="fedex-login" />
</div>
<div class="buttonItem-title">在線申報平臺帳號登錄</div>
<div class="buttonItem-title">user log in</div>
<div class="textCenter">
<svg-icon
class="el-icon-user-solid"
......@@ -205,14 +205,13 @@ export default {
},
attrs: { class: "font-style" },
},
"註冊完成後請回到FedEx線上申報平臺重新登錄。"
"After registration is completed, please return to the FedEx online declaration platform and log in again."
),
]),
confirmButtonClass: "confirm-button",
showCancelButton: true,
confirmButtonText: "確定",
cancelButtonText: "取消",
confirmButtonText: this.$t("common.sureBtn"),
cancelButtonText: this.$t("common.cancleBtn"),
iconClass: "el-icon-warning",
center: true,
// showClose: false,
......@@ -409,10 +408,10 @@ export default {
}
}
.guide-box {
height: 170px;
font-size: 16px;
padding-left: 249px;
padding-top: 48px;
padding-top: 24px;
padding-bottom: 24px;
background: #f8f8f8;
.guide {
color: #4d148c;
......