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
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 - <head> 3 +
4 +<head>
4 <meta charset="utf-8" /> 5 <meta charset="utf-8" />
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6 <meta name="renderer" content="webkit" /> 7 <meta name="renderer" content="webkit" />
7 - <meta 8 + <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
8 - name="viewport"
9 - content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
10 - />
11 <meta http-equiv="Content-Security-Policy" content=" 9 <meta http-equiv="Content-Security-Policy" content="
12 worker-src blob:; 10 worker-src blob:;
13 child-src blob: gap:; 11 child-src blob: gap:;
...@@ -16,7 +14,9 @@ ...@@ -16,7 +14,9 @@
16 14
17 15
18 <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> 16 <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
19 - <title><%= webpackConfig.name %></title> 17 + <title>
18 + <%= webpackConfig.name %>
19 + </title>
20 <!--[if lt IE 11 20 <!--[if lt IE 11
21 ]><script> 21 ]><script>
22 window.location.href = "/html/ie.html"; 22 window.location.href = "/html/ie.html";
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
30 margin: 0px; 30 margin: 0px;
31 padding: 0px; 31 padding: 0px;
32 } 32 }
33 +
33 .chromeframe { 34 .chromeframe {
34 margin: 0.2em 0; 35 margin: 0.2em 0;
35 background: #ccc; 36 background: #ccc;
...@@ -105,6 +106,7 @@ ...@@ -105,6 +106,7 @@
105 -ms-transform: rotate(0deg); 106 -ms-transform: rotate(0deg);
106 transform: rotate(0deg); 107 transform: rotate(0deg);
107 } 108 }
109 +
108 100% { 110 100% {
109 -webkit-transform: rotate(360deg); 111 -webkit-transform: rotate(360deg);
110 -ms-transform: rotate(360deg); 112 -ms-transform: rotate(360deg);
...@@ -118,6 +120,7 @@ ...@@ -118,6 +120,7 @@
118 -ms-transform: rotate(0deg); 120 -ms-transform: rotate(0deg);
119 transform: rotate(0deg); 121 transform: rotate(0deg);
120 } 122 }
123 +
121 100% { 124 100% {
122 -webkit-transform: rotate(360deg); 125 -webkit-transform: rotate(360deg);
123 -ms-transform: rotate(360deg); 126 -ms-transform: rotate(360deg);
...@@ -205,15 +208,17 @@ ...@@ -205,15 +208,17 @@
205 opacity: 0.5; 208 opacity: 0.5;
206 } 209 }
207 </style> 210 </style>
208 - </head> 211 +</head>
209 - <body> 212 +
213 +<body>
210 <div id="app"> 214 <div id="app">
211 <div id="loader-wrapper"> 215 <div id="loader-wrapper">
212 <div id="loader"></div> 216 <div id="loader"></div>
213 <div class="loader-section section-left"></div> 217 <div class="loader-section section-left"></div>
214 <div class="loader-section section-right"></div> 218 <div class="loader-section section-right"></div>
215 - <div class="load_title">正在加載系統資源，請耐心等待</div> 219 + <div class="load_title">Loading system resources, please be patient</div>
216 </div> 220 </div>
217 </div> 221 </div>
218 - </body> 222 +</body>
223 +
219 </html> 224 </html>
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -1107,3 +1107,58 @@ input:disabled { ...@@ -1107,3 +1107,58 @@ input:disabled {
1107 .questionIcon { 1107 .questionIcon {
1108 color: $fedexColor; 1108 color: $fedexColor;
1109 } 1109 }
1110 +
1111 +.uploadHistoryDialog {
1112 + .el-dialog__header {
1113 + .el-dialog__title {
1114 + font-size: 18px;
1115 + }
1116 + }
1117 +
1118 + .el-dialog__body {
1119 + padding: 10px 50px !important;
1120 + }
1121 +}
1122 +
1123 +.uploadHistoryTable {
1124 + .el-table__header-wrapper {
1125 + .el-table__header {
1126 + thead {
1127 + tr {
1128 + th {
1129 + background-color: #fff !important;
1130 + }
1131 + }
1132 + }
1133 + }
1134 + }
1135 +
1136 + .el-table__body-wrapper {
1137 + tbody {
1138 + tr {
1139 + td {
1140 + background-color: $formItemBackgroundColor;
1141 + }
1142 +
1143 + .el-table__expand-column {
1144 + .cell {
1145 + .el-table__expand-icon {
1146 + display: none !important;
1147 + }
1148 + }
1149 + }
1150 +
1151 + .el-table__expanded-cell {
1152 + padding: 0px;
1153 + background-color: #fff !important;
1154 + }
1155 + }
1156 +
1157 + tr:hover {
1158 + .el-table__expanded-cell {
1159 + background-color: #fff !important;
1160 + }
1161 + }
1162 + }
1163 + }
1164 +}
...\ No newline at end of file ...\ No newline at end of file
......
1 <template> 1 <template>
2 + <div style="pointer-events: auto" @click="formItemClick">
2 <el-form-item 3 <el-form-item
3 class="fedexFormItem" 4 class="fedexFormItem"
4 :label="itemLabel" 5 :label="itemLabel"
...@@ -8,11 +9,22 @@ ...@@ -8,11 +9,22 @@
8 :id="'inputOuter-' + type + '-' + prop" 9 :id="'inputOuter-' + type + '-' + prop"
9 > 10 >
10 <slot name="title" slot="label"></slot> 11 <slot name="title" slot="label"></slot>
12 + <el-tooltip
13 + v-if="toolyipShow"
14 + class="item"
15 + effect="dark"
16 + :content="content"
17 + :disabled="tooltipDisabled"
18 + placement="top"
19 + >
11 <slot></slot> 20 <slot></slot>
21 + </el-tooltip>
22 + <slot v-else></slot>
12 <template v-slot:error="scoped"> 23 <template v-slot:error="scoped">
13 <div class="formError">{{ scoped.error }}</div> 24 <div class="formError">{{ scoped.error }}</div>
14 </template> 25 </template>
15 </el-form-item> 26 </el-form-item>
27 + </div>
16 </template> 28 </template>
17 29
18 <script> 30 <script>
...@@ -42,11 +54,25 @@ export default { ...@@ -42,11 +54,25 @@ export default {
42 type: String, 54 type: String,
43 default: "", 55 default: "",
44 }, 56 },
57 + disabled: {
58 + type: Boolean,
59 + default: true,
60 + },
61 + toolyipShow: {
62 + type: Boolean,
63 + default: false,
64 + },
65 + eventType: {
66 + type: Boolean,
67 + default: false,
68 + },
45 }, 69 },
46 data() { 70 data() {
47 return { 71 return {
48 itemLabel: this.label, 72 itemLabel: this.label,
49 inputFocusType: false, 73 inputFocusType: false,
74 + content: "",
75 + tooltipDisabled: true,
50 }; 76 };
51 }, 77 },
52 watch: { 78 watch: {
...@@ -62,8 +88,13 @@ export default { ...@@ -62,8 +88,13 @@ export default {
62 let outInput = document.querySelector( 88 let outInput = document.querySelector(
63 "#inputOuter-" + this.type + "-" + this.prop 89 "#inputOuter-" + this.type + "-" + this.prop
64 ); //获取formitem 90 ); //获取formitem
91 + let dateEditor = document.querySelector(".el-date-editor");
65 if (inputInner) { 92 if (inputInner) {
93 + if (inputInner.disabled && this.eventType) {
94 + inputInner.style = "pointer-events:none";
95 + }
66 //通过input得id是否存在判断效果是否激活 96 //通过input得id是否存在判断效果是否激活
97 + this.activeType ? inputInner.classList.add("inputFocus") : "";
67 inputInner.addEventListener("focus", (e) => { 98 inputInner.addEventListener("focus", (e) => {
68 this.inputFocusType = true; 99 this.inputFocusType = true;
69 inputInner.classList.add("inputFocus"); 100 inputInner.classList.add("inputFocus");
...@@ -73,12 +104,8 @@ export default { ...@@ -73,12 +104,8 @@ export default {
73 inputInner.addEventListener("blur", (e) => { 104 inputInner.addEventListener("blur", (e) => {
74 if (!e.target.value && !e.target.placeholder) { 105 if (!e.target.value && !e.target.placeholder) {
75 // input失焦时如果无内容则移除active class 106 // input失焦时如果无内容则移除active class
76 - if (this.labelInput) {
77 this.itemLabel = this.label; 107 this.itemLabel = this.label;
78 - // labelInputInner_parentNode.style.display = 'inline-block'
79 - } else {
80 !this.activeType ? inputInner.classList.remove("inputFocus") : ""; 108 !this.activeType ? inputInner.classList.remove("inputFocus") : "";
81 - }
82 } else { 109 } else {
83 inputInner.classList.add("inputFocus"); 110 inputInner.classList.add("inputFocus");
84 } 111 }
...@@ -89,12 +116,8 @@ export default { ...@@ -89,12 +116,8 @@ export default {
89 inputInner.addEventListener("change", (e) => { 116 inputInner.addEventListener("change", (e) => {
90 if (!e.target.value && !e.target.placeholder) { 117 if (!e.target.value && !e.target.placeholder) {
91 // input失焦时如果无内容则移除active class 118 // input失焦时如果无内容则移除active class
92 - if (this.labelInput) {
93 this.itemLabel = this.label; 119 this.itemLabel = this.label;
94 - // labelInputInner_parentNode.style.display = 'inline-block'
95 - } else {
96 !this.activeType ? inputInner.classList.remove("inputFocus") : ""; 120 !this.activeType ? inputInner.classList.remove("inputFocus") : "";
97 - }
98 } else { 121 } else {
99 inputInner.classList.add("inputFocus"); 122 inputInner.classList.add("inputFocus");
100 } 123 }
...@@ -113,7 +136,62 @@ export default { ...@@ -113,7 +136,62 @@ export default {
113 if (inputInner.value) { 136 if (inputInner.value) {
114 inputInner.classList.add("inputFocus"); 137 inputInner.classList.add("inputFocus");
115 } 138 }
139 + this.content = inputInner.value;
116 }); 140 });
141 + } else {
142 + if (dateEditor) {
143 + this.activeType
144 + ? document
145 + .querySelector(".inputInner-" + this.type + "-" + this.prop)
146 + .classList.add("inputFocus")
147 + : "";
148 + if (
149 + document.querySelector(".inputInner-" + this.type + "-" + this.prop)
150 + ) {
151 + let dataInner = document
152 + .querySelector(".inputInner-" + this.type + "-" + this.prop)
153 + .getElementsByClassName("el-range-input");
154 + dataInner[0].addEventListener("focus", (e) => {
155 + this.inputFocusType = true;
156 + dataInner[0].classList.add("inputFocus");
157 + outInput.classList.add("activeBorder");
158 + });
159 +
160 + dataInner[1].addEventListener("focus", (e) => {
161 + this.inputFocusType = true;
162 + dataInner[1].classList.add("inputFocus");
163 + outInput.classList.add("activeBorder");
164 + });
165 +
166 + dataInner[0].addEventListener("blur", (e) => {
167 + if (!e.target.value && !e.target.placeholder) {
168 + // input失焦时如果无内容则移除active class
169 + this.itemLabel = this.label;
170 + !this.activeType
171 + ? dataInner[0].classList.remove("inputFocus")
172 + : "";
173 + } else {
174 + dataInner[0].classList.add("inputFocus");
175 + }
176 + this.inputFocusType = false;
177 + outInput.classList.remove("activeBorder");
178 + });
179 +
180 + dataInner[1].addEventListener("blur", (e) => {
181 + if (!e.target.value && !e.target.placeholder) {
182 + // input失焦时如果无内容则移除active class
183 + this.itemLabel = this.label;
184 + !this.activeType
185 + ? dataInner[1].classList.remove("inputFocus")
186 + : "";
187 + } else {
188 + dataInner[1].classList.add("inputFocus");
189 + }
190 + this.inputFocusType = false;
191 + outInput.classList.remove("activeBorder");
192 + });
193 + }
194 + }
117 } 195 }
118 }, 196 },
119 updated() { 197 updated() {
...@@ -123,27 +201,73 @@ export default { ...@@ -123,27 +201,73 @@ export default {
123 let outInput = document.querySelector( 201 let outInput = document.querySelector(
124 "#inputOuter-" + this.type + "-" + this.prop 202 "#inputOuter-" + this.type + "-" + this.prop
125 ); //获取formitem 203 ); //获取formitem
204 + let dateEditor = document.querySelector(".el-date-editor");
126 this.$nextTick(() => { 205 this.$nextTick(() => {
127 - if (inputInner && inputInner.value) { 206 + if (inputInner) {
207 + if (
208 + inputInner.value != undefined &&
209 + inputInner.value != "" &&
210 + inputInner.value != null
211 + ) {
128 inputInner.classList.add("inputFocus"); 212 inputInner.classList.add("inputFocus");
129 } else { 213 } else {
130 - !this.inputFocusType ? inputInner?.classList.remove("inputFocus") : ""; 214 + !this.inputFocusType ? inputInner.classList.remove("inputFocus") : "";
215 + this.activeType ? inputInner.classList.add("inputFocus") : "";
216 + }
217 + } else {
218 + if (dateEditor) {
219 + if (this.activeType) {
220 + document.querySelector(".inputInner-" + this.type + "-" + this.prop)
221 + .classList
222 + ? document
223 + .querySelector(".inputInner-" + this.type + "-" + this.prop)
224 + .classList.add("inputFocus")
225 + : "";
226 + }
227 + }
228 + }
229 + if (
230 + inputInner &&
231 + inputInner.offsetWidth &&
232 + inputInner.offsetWidth < inputInner.scrollWidth
233 + ) {
234 + this.content = inputInner.value;
235 + !this.disabled
236 + ? (this.tooltipDisabled = false)
237 + : (this.tooltipDisabled = true);
131 } 238 }
132 }); 239 });
133 }, 240 },
134 methods: { 241 methods: {
242 + formItemClick() {
243 + this.$emit("event", this.prop);
244 + },
135 getDateEditorNode() { 245 getDateEditorNode() {
136 let dateInput = document.getElementsByClassName("el-date-editor"); 246 let dateInput = document.getElementsByClassName("el-date-editor");
137 dateInput.forEach((item) => { 247 dateInput.forEach((item) => {
138 - item 248 + item.querySelector(".el-input__suffix")
249 + ? item
139 .querySelector(".el-input__suffix") 250 .querySelector(".el-input__suffix")
140 - .children[0].children[0].classList.add("el-icon-date"); 251 + .children[0].children[0].classList.add("el-icon-date")
252 + : "";
141 }); 253 });
142 let selectInput = document.getElementsByClassName("el-select"); 254 let selectInput = document.getElementsByClassName("el-select");
143 selectInput.forEach((item) => { 255 selectInput.forEach((item) => {
144 // item.querySelector('.el-input__suffix').children[0].children[0].style.display = 'none' 256 // item.querySelector('.el-input__suffix').children[0].children[0].style.display = 'none'
145 }); 257 });
146 }, 258 },
259 + onMouseOver(str) {
260 + if (this.$refs[str]) {
261 + const parentWidth = this.$refs[str].parentNode.offsetWidth;
262 + const contentWidth = this.$refs[str].offsetWidth;
263 + // 判断是否开启tooltip功能
264 + if (contentWidth > parentWidth) {
265 + this.isShowTooltip = false;
266 + } else {
267 + this.isShowTooltip = true;
268 + }
269 + }
270 + },
147 }, 271 },
148 }; 272 };
149 </script> 273 </script>
......
...@@ -6,10 +6,10 @@ export default { ...@@ -6,10 +6,10 @@ export default {
6 }, 6 },
7 // 公用 7 // 公用
8 common: { 8 common: {
9 - sureBtn: "確定", 9 + sureBtn: "OK",
10 goBack: "返回", 10 goBack: "返回",
11 submitBtn: "提交", 11 submitBtn: "提交",
12 - cancleBtn: "取消", 12 + cancleBtn: "Cancel",
13 useBtn: "使用", 13 useBtn: "使用",
14 saveBtn: "保存", 14 saveBtn: "保存",
15 closeBtn: "關閉", 15 closeBtn: "關閉",
...@@ -86,8 +86,8 @@ export default { ...@@ -86,8 +86,8 @@ export default {
86 onlineDeclare: "線上申報平臺帳號登錄", 86 onlineDeclare: "線上申報平臺帳號登錄",
87 registerNumber: "註冊線上申報平臺帳號", 87 registerNumber: "註冊線上申報平臺帳號",
88 userInfo: "用戶信息維護", 88 userInfo: "用戶信息維護",
89 - logOut: "退出登錄", 89 + logOut: "log out",
90 - logOutDia: "確定註銷並退出系統嗎？", 90 + logOutDia: "Are you sure to log out and exit the system?",
91 }, 91 },
92 // 申报输入 92 // 申报输入
93 fillIn: { 93 fillIn: {
......
...@@ -100,7 +100,6 @@ import TopNav from "@/components/TopNav"; ...@@ -100,7 +100,6 @@ import TopNav from "@/components/TopNav";
100 import Hamburger from "@/components/Hamburger"; 100 import Hamburger from "@/components/Hamburger";
101 import { removeToken } from "@/utils/auth"; 101 import { removeToken } from "@/utils/auth";
102 102
103 -
104 export default { 103 export default {
105 components: { 104 components: {
106 Breadcrumb, 105 Breadcrumb,
...@@ -109,9 +108,13 @@ export default { ...@@ -109,9 +108,13 @@ export default {
109 }, 108 },
110 data() { 109 data() {
111 return { 110 return {
112 - lang: localStorage.getItem("lang") || "zh-TW", 111 + lang: localStorage.getItem("lang") || "en",
113 langOptions: [ 112 langOptions: [
114 { 113 {
114 + label: "English",
115 + value: "en",
116 + },
117 + {
115 label: "中文繁體", 118 label: "中文繁體",
116 value: "zh-TW", 119 value: "zh-TW",
117 }, 120 },
...@@ -147,7 +150,7 @@ export default { ...@@ -147,7 +150,7 @@ export default {
147 this.$store.dispatch("app/toggleSideBar"); 150 this.$store.dispatch("app/toggleSideBar");
148 }, 151 },
149 async logout() { 152 async logout() {
150 - this.$confirm(this.$t("layout.logOutDia"), "提示", { 153 + this.$confirm(this.$t("layout.logOutDia"), "Tip", {
151 confirmButtonText: this.$t("common.sureBtn"), 154 confirmButtonText: this.$t("common.sureBtn"),
152 cancelButtonText: this.$t("common.cancleBtn"), 155 cancelButtonText: this.$t("common.cancleBtn"),
153 type: "warning", 156 type: "warning",
...@@ -165,7 +168,7 @@ export default { ...@@ -165,7 +168,7 @@ export default {
165 this.$emit("login", "login"); 168 this.$emit("login", "login");
166 } else if (val == "create") { 169 } else if (val == "create") {
167 this.$emit("login", "create"); 170 this.$emit("login", "create");
168 - }else if(val == "fedexRegister"){ 171 + } else if (val == "fedexRegister") {
169 this.$emit("login", "fedexRegister"); 172 this.$emit("login", "fedexRegister");
170 } 173 }
171 }, 174 },
......
This diff is collapsed. Click to expand it.
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 <div class="buttonItem-icon"> 36 <div class="buttonItem-icon">
37 <svg-icon class="el-icon-user-solid" icon-class="fedex-login" /> 37 <svg-icon class="el-icon-user-solid" icon-class="fedex-login" />
38 </div> 38 </div>
39 - <div class="buttonItem-title">在線申報平臺帳號登錄</div> 39 + <div class="buttonItem-title">user log in</div>
40 <div class="textCenter"> 40 <div class="textCenter">
41 <svg-icon 41 <svg-icon
42 class="el-icon-user-solid" 42 class="el-icon-user-solid"
...@@ -205,14 +205,13 @@ export default { ...@@ -205,14 +205,13 @@ export default {
205 }, 205 },
206 attrs: { class: "font-style" }, 206 attrs: { class: "font-style" },
207 }, 207 },
208 - "註冊完成後請回到FedEx線上申報平臺重新登錄。" 208 + "After registration is completed, please return to the FedEx online declaration platform and log in again."
209 ), 209 ),
210 ]), 210 ]),
211 confirmButtonClass: "confirm-button", 211 confirmButtonClass: "confirm-button",
212 showCancelButton: true, 212 showCancelButton: true,
213 - 213 + confirmButtonText: this.$t("common.sureBtn"),
214 - confirmButtonText: "確定", 214 + cancelButtonText: this.$t("common.cancleBtn"),
215 - cancelButtonText: "取消",
216 iconClass: "el-icon-warning", 215 iconClass: "el-icon-warning",
217 center: true, 216 center: true,
218 // showClose: false, 217 // showClose: false,
...@@ -409,10 +408,10 @@ export default { ...@@ -409,10 +408,10 @@ export default {
409 } 408 }
410 } 409 }
411 .guide-box { 410 .guide-box {
412 - height: 170px;
413 font-size: 16px; 411 font-size: 16px;
414 padding-left: 249px; 412 padding-left: 249px;
415 - padding-top: 48px; 413 + padding-top: 24px;
414 + padding-bottom: 24px;
416 background: #f8f8f8; 415 background: #f8f8f8;
417 .guide { 416 .guide {
418 color: #4d148c; 417 color: #4d148c;
......