feat: 根据1.0UAT修改bug和样式

src/styles/elementui.scss

@@ -165,6 +165,9 @@ button.el-button.el-button--icon {
 
 button.el-button {
   border-radius: 6px;
+  & + .el-button {
+    margin-left: 8px;
+  }
 }
 
 // pagination

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -109,8 +109,10 @@ const formatTime = (time: string) => {
             <div class="content">
               <!-- <span>{{ allData?.transportInfo?.origin }}</span> -->
               <el-tooltip placement="top">
-                <template #content>{{ allData?.transportInfo?.origin }}</template>
-                <span class="info single-line-ellipsis">{{ allData?.transportInfo?.origin }}</span>
+                <template #content>{{ allData?.transportInfo?.origin || '--' }}</template>
+                <span class="info single-line-ellipsis">{{
+                  allData?.transportInfo?.origin || '--'
+                }}</span>
               </el-tooltip>
               <div class="line_container">
                 <hr color="#000000" />
@@ -122,9 +124,9 @@ const formatTime = (time: string) => {
             <div class="title">Destination</div>
             <div class="content">
               <el-tooltip placement="top">
-                <template #content>{{ allData?.transportInfo?.destination }}</template>
+                <template #content>{{ allData?.transportInfo?.destination || '--' }}</template>
                 <span class="info single-line-ellipsis">{{
-                  allData?.transportInfo?.destination
+                  allData?.transportInfo?.destination || '--'
                 }}</span>
               </el-tooltip>
             </div>
@@ -153,7 +155,7 @@ const formatTime = (time: string) => {
     </div>
     <div class="info-content">
       <VueDraggable
-        style="display: flex; flex-direction: column; gap: 16px"
+        style="display: flex; flex-direction: column; gap: 8px"
         ref="infoContentRef"
         ghost-class="ghost-class"
         :forceFallback="true"

src/views/Booking/src/components/BookingDetail/src/components/BasicInformation.vue

@@ -114,20 +114,20 @@ const convertData = (data: any) => {
       top: [
         {
           label: 'Booking No.',
-          content: data.basicInfo['bookingNo.'] || ''
+          content: data.basicInfo['bookingNo.'] || '--'
         },
         {
           label: 'HAWB/HBL No.',
-          content: data.basicInfo['HAWB/HBOL'] || '',
+          content: data.basicInfo['HAWB/HBOL'] || '--',
           type: 'link'
         },
         {
           label: 'Carrier Booking No.',
-          content: data.basicInfo['Carrier_Booking_No'] || ''
+          content: data.basicInfo['Carrier_Booking_No'] || '--'
         },
         {
           label: 'PO No.',
-          content: data.basicInfo['PO_NO'] || ''
+          content: data.basicInfo['PO_NO'] || '--'
         },
         {
           label: 'Ref No.',
@@ -137,74 +137,74 @@ const convertData = (data: any) => {
       bottom: [
         {
           label: 'Vessel / Airline',
-          content: data.basicInfo['Vessel/Airline'] || ''
+          content: data.basicInfo['Vessel/Airline'] || '--'
         },
         {
           label: 'Voyage / Flight',
-          content: data.basicInfo['Voyage/Filght'] || ''
+          content: data.basicInfo['Voyage/Filght'] || '--'
         },
         {
           label: 'Incoterm',
-          content: data.basicInfo['Incoterm'] || ''
+          content: data.basicInfo['Incoterm'] || '--'
         },
         {
           label: 'Service Type',
-          content: data.basicInfo['Service_Type'] || ''
+          content: data.basicInfo['Service_Type'] || '--'
         }
       ]
     },
     businessPartners: [
       {
         title: 'Shipper',
-        company: data.businessPartners.shipper.company || '',
-        address: data.businessPartners.shipper.address || '',
-        phone: data.businessPartners.shipper.phone || ''
+        company: data.businessPartners.shipper.company || '--',
+        address: data.businessPartners.shipper.address || '--',
+        phone: data.businessPartners.shipper.phone || '--'
       },
       {
         title: 'Consignee',
-        company: data.businessPartners.consignee.company || '',
-        address: data.businessPartners.consignee.address || '',
-        phone: data.businessPartners.consignee.phone || ''
+        company: data.businessPartners.consignee.company || '--',
+        address: data.businessPartners.consignee.address || '--',
+        phone: data.businessPartners.consignee.phone || '--'
       },
       {
         title: 'Origin Agent',
-        company: data.businessPartners.origin.company || '',
-        address: data.businessPartners.origin.address || '',
-        phone: data.businessPartners.origin.phone || ''
+        company: data.businessPartners.origin.company || '--',
+        address: data.businessPartners.origin.address || '--',
+        phone: data.businessPartners.origin.phone || '--'
       },
       {
         title: 'Destination Agent',
-        company: data.businessPartners.destination.company || '',
-        address: data.businessPartners.destination.address || '',
-        phone: data.businessPartners.destination.phone || ''
+        company: data.businessPartners.destination.company || '--',
+        address: data.businessPartners.destination.address || '--',
+        phone: data.businessPartners.destination.phone || '--'
       }
     ],
     packing: [
       {
         label: 'Quantity / Unit',
-        content: data.packing['Quantity/Unit'] || ''
+        content: data.packing['Quantity/Unit'] || '--'
       },
       {
         label: 'G. Weight',
-        content: data.packing['G. Weight'] || ''
+        content: data.packing['G. Weight'] || '--'
       },
       {
         label: 'Ch. Weight',
-        content: data.packing['Ch. Weight'] || ''
+        content: data.packing['Ch. Weight'] || '--'
       },
       {
         label: 'Volume',
-        content: data.packing['Volume'] || ''
+        content: data.packing['Volume'] || '--'
       }
     ],
     marksAndDescription: [
       {
         label: 'Marks',
-        content: data.marksAndDescription.marsk || ''
+        content: data.marksAndDescription.marsk || '--'
       },
       {
         label: 'Description',
-        content: data.marksAndDescription.description || ''
+        content: data.marksAndDescription.description || '--'
       }
     ]
   }
@@ -343,10 +343,12 @@ defineExpose({
         <div class="item" v-for="item in curShowBusinessPartnersData" :key="item.title">
           <div class="title">
             {{ item.title }}
-            <span
-              class="font_family icon-icon_clone_b copy-icon"
-              @click="handleCopy([item.company, item.address, item.phone])"
-            ></span>
+            <el-button class="el-button--text copy-btn">
+              <span
+                class="font_family icon-icon_clone_b copy-icon"
+                @click="handleCopy([item.company, item.address, item.phone])"
+              ></span
+            ></el-button>
           </div>
           <div class="content">
             <div class="info">
@@ -384,10 +386,12 @@ defineExpose({
           <div class="data-item" v-for="item in allData.marksAndDescription" :key="item.label">
             <div class="title">
               {{ item.label }}
-              <span
-                class="font_family icon-icon_clone_b copy-icon"
-                @click="handleCopy([item.content])"
-              ></span>
+              <el-button class="el-button--text copy-btn">
+                <span
+                  class="font_family icon-icon_clone_b copy-icon"
+                  @click="handleCopy([item.content])"
+                ></span>
+              </el-button>
             </div>
             <div
               ref="descriptionContainerRef"
@@ -634,6 +638,24 @@ defineExpose({
 }
 </style>
 <style lang="scss">
+.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  height: 16px !important;
+  width: 16px;
+  padding: 0 !important;
+
+  color: var(--color-neutral-2);
+  & > span {
+    display: block;
+    height: 16px;
+    width: 16px;
+  }
+  .font_family {
+    font-size: 10px !important;
+    color: var(--color-neutral-1) !important;
+  }
+}
 div.el-popper.marks-popover {
   border-radius: 12px;
   overflow: hidden;

src/views/Booking/src/components/BookingDetail/src/components/EmailView.vue

@@ -215,7 +215,9 @@ const sendEmail = () => {
     <div class="show-records">
       <div class="record-item" v-for="(item, index) in emailRecords" :key="index">
         <div class="header">
-          <div class="avatar">{{ item.name?.slice(0, 1) }}</div>
+          <div class="avatar">
+            <span>{{ item.name?.slice(0, 1) }}</span>
+          </div>
           <div class="name">{{ item.name }}</div>
           <div class="date">{{ dayjs(item.creatTime).format('MM-DD-YYYY HH:mm:ss') }}</div>
         </div>
@@ -282,14 +284,17 @@ const sendEmail = () => {
     padding-left: 0px;
 
     .avatar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       width: 24px;
       height: 24px;
       border-radius: 50%;
-      text-align: center;
-      line-height: 24px;
-      color: #fff;
-      font-weight: 700;
       background-color: var(--color-theme);
+      span {
+        color: #fff;
+        font-weight: 700;
+      }
     }
 
     .name {

src/views/Layout/src/components/Header/HeaderView.vue

@@ -116,7 +116,9 @@ const handleLogin = () => {
         content="this is content, this is content, this is content"
       >
         <div class="title">
-          <div class="avatar">{{ userStore.username?.slice(0, 1) }}</div>
+          <div class="avatar">
+            <span>{{ userStore.username?.slice(0, 1) }}</span>
+          </div>
           <span class="name">{{ userStore.username }}</span>
         </div>
         <div class="options">
@@ -130,7 +132,9 @@ const handleLogin = () => {
           </div>
         </div>
         <template #reference>
-          <div class="avatar" v-if="userStore.username">{{ userStore.username?.slice(0, 1) }}</div>
+          <div class="avatar" v-if="userStore.username">
+            <span>{{ userStore.username?.slice(0, 1) }}</span>
+          </div>
         </template>
       </el-popover>
       <el-button
@@ -159,16 +163,19 @@ const handleLogin = () => {
 
 <style lang="scss" scoped>
 .avatar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   width: 24px;
   height: 24px;
   border-radius: 50%;
-  text-align: center;
-  line-height: 24px;
-  color: #fff;
-  font-size: 16px;
-  font-weight: 700;
   background-color: var(--color-theme);
   cursor: pointer;
+  & > span {
+    color: #fff;
+    font-size: 16px;
+    font-weight: 700;
+  }
 }
 .layout-toolbar {
   display: flex;
@@ -218,11 +225,15 @@ div.el-popover.el-popper.user-config-popover {
       height: 48px;
       border-radius: 50%;
       text-align: center;
-      line-height: 48px;
-      color: #fff;
-      font-size: 32px;
-      font-weight: 700;
       background-color: var(--color-theme);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      span {
+        color: #fff;
+        font-size: 32px;
+        font-weight: 700;
+      }
     }
   }
   .options {

src/views/Layout/src/components/Menu/MenuView.vue

@@ -54,7 +54,6 @@ const getMenuList = () => {
       menuList.value = res.data
     }
   })
-  // return menuList
 }
 getMenuList()
 //监听窗口大小
@@ -201,6 +200,9 @@ const menuRef = ref()
   background-color: var(--color-mune-active-bg);
   color: var(--color-theme);
   font-weight: 700;
+  & > span {
+    color: var(--color-theme);
+  }
 }
 .el-menu-item {
   height: 40px;
@@ -218,6 +220,9 @@ li.clear-active-style {
   background-color: transparent !important;
   color: var(--color-neutral-1) !important;
   font-weight: normal !important;
+  & > span {
+    color: var(--color-neutral-1) !important;
+  }
 }
 
 :deep(.el-sub-menu__title) {

src/views/Login/src/components/ChangePasswordCard.vue

@@ -11,12 +11,9 @@ const loginForm = ref({
 loginForm.value.username = localStorage.getItem('username') || ''
 if (!loginForm.value.username) {
   router.push({
-    name: 'Login',
-    query: {
-      status: 'login'
-    }
+    name: 'Login'
   })
-  ElMessage.error('Please login first')
+  ElMessage.warning('Please login first')
 }
 const newPwdErrTips = ref('')
 const loginError: any = ref({
@@ -61,7 +58,7 @@ const handleChangePwd = () => {
         router.push({
           name: 'Login',
           query: {
-            status: 'login'
+            isChange: 'true'
           }
         })
       } else if (res.code === 400) {
@@ -231,7 +228,7 @@ const checkPassword = () => {
   align-items: center;
   height: 100%;
   width: 100%;
-  background: url(../image/bg-image.png) no-repeat center center;
+  background: url(../image/bg.png) no-repeat center center;
   background-size: cover;
 }
 

src/views/Login/src/components/ErrorTips.vue

@@ -58,5 +58,8 @@ defineExpose({
       cursor: pointer;
     }
   }
+  &.el-dialog--center .el-dialog__footer {
+    padding-right: 0;
+  }
 }
 </style>

src/views/Login/src/loginView.vue

@@ -223,6 +223,19 @@ const handleSendPassword = () => {
 }
 
 const isEmailTips = ref(false)
+const emailTipsContent = ref()
+// 判断当前路由中是否有 isChange 参数，如果有则提示修改密码成功
+const initEmailTips = () => {
+  if (route.query.isChange === 'true') {
+    isEmailTips.value = true
+    emailTipsContent.value = 'Changed successfully. Please log in.'
+  } else {
+    isEmailTips.value = false
+    emailTipsContent.value = 'New Password sent to registered email.'
+  }
+}
+initEmailTips()
+
 const handleDeleteEmailTips = (type?: any) => {
   isEmailTips.value = false
   if (type) {
@@ -237,13 +250,16 @@ const errorTipsRef = ref()
   <div class="login">
     <ScoringSystem class="scoring-system"></ScoringSystem>
     <el-card class="login-card" v-if="status === 'login'">
-      <div class="title">
+      <div class="card-title">
         <span class="welcome">Welcome to KLN Portal</span>
         <span class="tips">Login to your account</span>
       </div>
-      <div class="send-email-tips" :style="{ display: isEmailTips ? 'block' : 'none' }">
-        <span class="font_family icon-icon_confirm_b success-icon"></span>
-        New Password sent to registered email.
+      <div class="send-email-tips" :style="{ display: isEmailTips ? 'flex' : 'none' }">
+        <div>
+          <span class="font_family icon-icon_confirm_b success-icon"></span>
+          <span class="text-content">{{ emailTipsContent }}</span>
+        </div>
+
         <span
           @click="handleDeleteEmailTips"
           class="font_family icon-icon_reject_b delete-icon"
@@ -323,9 +339,9 @@ const errorTipsRef = ref()
       </template>
     </el-card>
     <el-card class="login-card" v-else-if="status === 'reset'">
-      <div class="title">
+      <div class="card-title">
         <span class="welcome">Password Retrieval</span>
-        <span class="tips">We'll send you new password in email</span>
+        <span class="tips">We'll send your password to your email address.</span>
       </div>
       <div class="login-form">
         <div class="label">
@@ -408,7 +424,7 @@ const errorTipsRef = ref()
   align-items: center;
   height: 100%;
   width: 100%;
-  background: url(../src/image/bg-image.png) no-repeat center center;
+  background: url(../src/image/bg.png) no-repeat center center;
   background-size: cover;
   .scoring-system {
     position: absolute;
@@ -421,12 +437,20 @@ const errorTipsRef = ref()
 .login-card {
   width: 400px;
 
-  .title {
+  .card-title {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-bottom: 24px;
-
+    height: 94px;
+    padding-top: 32px;
+    background: linear-gradient(
+      251deg,
+      #ffffff4d,
+      #fff4eb80 22.66%,
+      #f0f3ff80 44.57%,
+      #e0f7f999 80.46%,
+      #ffffff4d
+    );
     .welcome {
       margin-bottom: 16px;
       font-size: 24px;
@@ -437,12 +461,13 @@ const errorTipsRef = ref()
   .send-email-tips {
     display: flex;
     align-items: center;
+    justify-content: space-between;
     height: 40px;
+    margin: 24px 40px 0;
     padding: 12px;
     padding-left: 14px;
     background-color: #e5f6f1;
     border-radius: 6px;
-    color: var(--color-success);
 
     .success-icon {
       display: inline-flex;
@@ -450,22 +475,27 @@ const errorTipsRef = ref()
       justify-content: center;
       height: 16px;
       width: 16px;
+      padding-left: 1px;
       margin-right: 4px;
       font-size: 14px;
       color: #fff;
       background-color: var(--color-success);
       border-radius: 50%;
     }
+    .text-content {
+      color: var(--color-success);
+    }
 
     .delete-icon {
-      margin-left: 6px;
+      // align-self: ri;
+      margin-left: 8px;
       color: var(--color-success);
       cursor: pointer;
     }
   }
 
   :deep(.el-card__body) {
-    padding: 40px;
+    padding: 0px;
     padding-bottom: 16px;
   }
 
@@ -480,6 +510,7 @@ const errorTipsRef = ref()
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+  padding: 0 40px;
 
   .el-input {
     height: 40px;
@@ -589,11 +620,3 @@ const errorTipsRef = ref()
   }
 }
 </style>
-<style lang="scss">
-.login {
-  .el-checkbox__label {
-    font-weight: 600;
-    color: var(--color-neutral-2);
-  }
-}
-</style>

src/views/Tracking/src/components/PublicTracking/src/PublicTrackingSearch.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { useHeaderSearch } from '@/stores/modules/headerSearch'
 
 const router = useRouter()
-const route = useRoute()
 
 const headerSearch = useHeaderSearch()
 const searchResult = ref('')
@@ -19,7 +18,7 @@ headerSearch.clearSearchData()
 // 当 sharedData 发生变化时，更新 inputValue
 watch(
   () => headerSearchdData.value,
-  (newData) => {
+  () => {
     // if (newData) {
     inputVModel.value = headerSearchdData.value
     searchResult.value = headerSearch.searchResult
@@ -60,7 +59,7 @@ const handleSearchNo = () => {
     <div class="search-info">
       <div class="title">Tracking</div>
       <el-input
-        class="search-input"
+        class="public-tracking-search-input"
         v-model="inputVModel"
         placeholder="Search a reference number to see shipment details"
       >
@@ -99,10 +98,11 @@ const handleSearchNo = () => {
   color: var(--color-neutral-3);
 }
 .public-tracking-search {
+  position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  position: relative;
+  padding-bottom: 160px;
   background: url(./image/bg.png) no-repeat center center;
   background-size: cover;
   z-index: 1;
@@ -127,9 +127,10 @@ const handleSearchNo = () => {
   & > .title {
     margin-bottom: 24px;
     font-size: 40px;
+    font-weight: 700;
     color: var(--color-theme);
   }
-  .search-input {
+  .public-tracking-search-input {
     width: 480px;
     height: 40px;
     :deep(.el-input__wrapper) {
@@ -166,4 +167,9 @@ const handleSearchNo = () => {
     padding-top: 24px;
   }
 }
+.public-tracking-search-input {
+  :deep(.el-input__wrapper) {
+    box-shadow: 0 0 0 1px #2b2f36 inset;
+  }
+}
 </style>

src/views/Tracking/src/components/PublicTracking/src/components/BasicInformation.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import XEClipboard from 'xe-clipboard'
+
 const props = defineProps({
   data: Object
 })
@@ -133,6 +135,21 @@ watch(
   },
   { immediate: true, deep: true }
 )
+
+const handleCopy = (data: any) => {
+  const sanitizedData = data.map((item: string) => {
+    return item
+      ? item
+          .replace(/[\r\n]+/g, ' ')
+          .replace(/\s+/g, ' ')
+          .trim()
+      : ''
+  }) // 用空格替换换行符
+  const copyText = sanitizedData.join('\n') // 拼接为单行文本
+  if (XEClipboard.copy(copyText)) {
+    ElMessage.success('Copy success')
+  }
+}
 </script>
 
 <template>
@@ -150,7 +167,16 @@ watch(
     <div class="right-section">
       <div class="business-partner">
         <div class="item" v-for="item in allData.businessPartners" :key="item.title">
-          <div class="title">{{ item.title }}</div>
+          <div class="title">
+            {{ item.title }}
+            <el-button class="el-button--text copy-btn">
+              <span
+                class="font_family icon-icon_clone_b copy-icon"
+                @click="handleCopy([item.company, item.address, item.phone])"
+              ></span
+            ></el-button>
+          </div>
+
           <div class="content">
             <div class="info">
               <span class="font_family icon-icon_company_b"></span>
@@ -370,20 +396,22 @@ watch(
 }
 </style>
 <style lang="scss">
-div.el-popper.marks-popover {
-  border-radius: 12px;
-  overflow: hidden;
-  .el-popover__title {
-    height: 48px;
-    padding-left: 16px;
-    background-color: var(--color-header-bg);
-    line-height: 48px;
-    font-size: 18px;
-    font-weight: 700;
+.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  height: 16px !important;
+  width: 16px;
+  padding: 0 !important;
+
+  color: var(--color-neutral-2);
+  & > span {
+    display: block;
+    height: 16px;
+    width: 16px;
   }
-  .description-info {
-    padding: 0px 16px 16px;
-    font-weight: 500;
+  .font_family {
+    font-size: 10px !important;
+    color: var(--color-neutral-1) !important;
   }
 }
 </style>

src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -130,7 +130,7 @@ const formatTime = (time: string) => {
         </template>
       </VBox>
       <!-- Milestones -->
-      <VBox style="margin-top: 16px" :isSeeAll="false" :is-draggable="false">
+      <VBox style="margin-top: 8px" :isSeeAll="false" :is-draggable="false">
         <template #header>Milestones</template>
         <template #content>
           <MilestonesTable :data="allData"></MilestonesTable>
@@ -259,6 +259,7 @@ const formatTime = (time: string) => {
     color: var(--color-neutral-2);
   }
   .content {
+    min-height: 16px;
     font-size: 14px;
     font-weight: 700;
     color: var(--color-neutral-1);

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -142,8 +142,10 @@ const formatTime = (time: string) => {
             <div class="title">Origin</div>
             <div class="content">
               <el-tooltip placement="top">
-                <template #content>{{ allData?.transportInfo?.origin }}</template>
-                <span class="info single-line-ellipsis">{{ allData?.transportInfo?.origin }}</span>
+                <template #content>{{ allData?.transportInfo?.origin || '--' }}</template>
+                <span class="info single-line-ellipsis">{{
+                  allData?.transportInfo?.origin || '--'
+                }}</span>
               </el-tooltip>
 
               <div class="line_container">
@@ -156,9 +158,9 @@ const formatTime = (time: string) => {
             <div class="title">Destination</div>
             <div class="content">
               <el-tooltip placement="top">
-                <template #content>{{ allData?.transportInfo?.destination }}</template>
+                <template #content>{{ allData?.transportInfo?.destination || '--' }}</template>
                 <span class="info single-line-ellipsis">{{
-                  allData?.transportInfo?.destination
+                  allData?.transportInfo?.destination || '--'
                 }}</span>
               </el-tooltip>
             </div>
@@ -188,7 +190,7 @@ const formatTime = (time: string) => {
     </div>
     <div class="info-content">
       <VueDraggable
-        style="display: flex; flex-direction: column; gap: 16px"
+        style="display: flex; flex-direction: column; gap: 8px"
         ref="infoContentRef"
         ghost-class="ghost-class"
         :forceFallback="true"
@@ -434,6 +436,7 @@ const formatTime = (time: string) => {
     color: var(--color-neutral-2);
   }
   .content {
+    min-height: 16px;
     font-size: 14px;
     font-weight: 700;
     color: var(--color-neutral-1);

src/views/Tracking/src/components/TrackingDetail/src/components/BasicInformation.vue

@@ -114,19 +114,19 @@ const convertData = (data: any) => {
       top: [
         {
           label: 'MAWB/MBL No.',
-          content: data.basicInfo['MAWB/MBL No.']
+          content: data.basicInfo['MAWB/MBL No.'] || '--'
         },
         {
           label: 'HAWB/HBL No.',
-          content: data.basicInfo['HAWB/HBOL']
+          content: data.basicInfo['HAWB/HBOL'] || '--'
         },
         {
           label: 'Booking No.',
-          content: data.basicInfo.Carrier_Booking_No
+          content: data.basicInfo.Carrier_Booking_No || '--'
         },
         {
           label: 'PO No.',
-          content: data.basicInfo.PO_NO
+          content: data.basicInfo.PO_NO || '--'
         },
         {
           label: 'Ref No.',
@@ -136,40 +136,40 @@ const convertData = (data: any) => {
       bottom: [
         {
           label: 'Vessel / Airline',
-          content: data.basicInfo['Vessel/Airline']
+          content: data.basicInfo['Vessel/Airline'] || '--'
         },
         {
           label: 'Voyage / Flight',
-          content: data.basicInfo['Voyage/Filght']
+          content: data.basicInfo['Voyage/Filght'] || '--'
         },
         {
           label: 'Incoterm',
-          content: data.basicInfo.Incoterm
+          content: data.basicInfo.Incoterm || '--'
         },
         {
           label: 'Service Type',
-          content: data.basicInfo.Service_Type
+          content: data.basicInfo.Service_Type || '--'
         }
       ]
     },
     businessPartners: [
       {
         title: 'Shipper',
-        company: data.businessPartners.shipper.company,
-        address: data.businessPartners.shipper.address,
-        phone: data.businessPartners.shipper.phone
+        company: data.businessPartners.shipper.company || '--',
+        address: data.businessPartners.shipper.address || '--',
+        phone: data.businessPartners.shipper.phone || '--'
       },
       {
         title: 'Consignee',
-        company: data.businessPartners.consignee.company,
-        address: data.businessPartners.consignee.address,
-        phone: data.businessPartners.consignee.phone
+        company: data.businessPartners.consignee.company || '--',
+        address: data.businessPartners.consignee.address || '--',
+        phone: data.businessPartners.consignee.phone || '--'
       },
       {
         title: 'Origin Agent',
-        company: data.businessPartners.origin.company,
-        address: data.businessPartners.origin.address,
-        phone: data.businessPartners.origin.phone
+        company: data.businessPartners.origin.company || '--',
+        address: data.businessPartners.origin.address || '--',
+        phone: data.businessPartners.origin.phone || '--'
       },
       {
         title: 'Destination Agent',
@@ -181,29 +181,29 @@ const convertData = (data: any) => {
     packing: [
       {
         label: 'Quantity / Unit',
-        content: data.packing['Quantity/Unit']
+        content: data.packing['Quantity/Unit'] || '--'
       },
       {
         label: 'G. Weight',
-        content: data.packing['G. Weight']
+        content: data.packing['G. Weight'] || '--'
       },
       {
         label: 'Ch. Weight',
-        content: data.packing['Ch. Weight']
+        content: data.packing['Ch. Weight'] || '--'
       },
       {
         label: 'Volume',
-        content: data.packing.Volume
+        content: data.packing.Volume || '--'
       }
     ],
     marksAndDescription: [
       {
         label: 'Marks',
-        content: data.marksAndDescription.marks
+        content: data.marksAndDescription.marks || '--'
       },
       {
         label: 'Description',
-        content: data.marksAndDescription.description
+        content: data.marksAndDescription.description || '--'
       }
     ]
   }
@@ -340,10 +340,12 @@ defineExpose({
         <div class="item" v-for="item in curShowBusinessPartnersData" :key="item.title">
           <div class="title">
             {{ item.title }}
-            <span
-              class="font_family icon-icon_clone_b copy-icon"
-              @click="handleCopy([item.company, item.address, item.phone])"
-            ></span>
+            <el-button class="el-button--text copy-btn">
+              <span
+                class="font_family icon-icon_clone_b copy-icon"
+                @click="handleCopy([item.company, item.address, item.phone])"
+              ></span
+            ></el-button>
           </div>
           <div class="content">
             <div class="info">
@@ -380,10 +382,12 @@ defineExpose({
           <div class="data-item" v-for="item in allData.marksAndDescription" :key="item.label">
             <div class="title">
               {{ item.label }}
-              <span
-                class="font_family icon-icon_clone_b copy-icon"
-                @click="handleCopy([item.content])"
-              ></span>
+              <el-button class="el-button--text copy-btn">
+                <span
+                  class="font_family icon-icon_clone_b copy-icon"
+                  @click="handleCopy([item.content])"
+                ></span>
+              </el-button>
             </div>
             <div
               ref="descriptionContainerRef"
@@ -629,6 +633,24 @@ defineExpose({
 }
 </style>
 <style lang="scss">
+.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  height: 16px !important;
+  width: 16px;
+  padding: 0 !important;
+
+  color: var(--color-neutral-2);
+  & > span {
+    display: block;
+    height: 16px;
+    width: 16px;
+  }
+  .font_family {
+    font-size: 10px !important;
+    color: var(--color-neutral-1) !important;
+  }
+}
 div.el-popper.marks-popover {
   border-radius: 12px;
   overflow: hidden;

src/views/Tracking/src/components/TrackingDetail/src/components/EmailDrawer.vue

@@ -210,7 +210,9 @@ defineExpose({
       <div class="show-records">
         <div class="record-item" v-for="(item, index) in emailRecords" :key="index">
           <div class="header">
-            <div class="avatar">{{ item.name?.slice(0, 1) }}</div>
+            <div class="avatar">
+              <span>{{ item.name?.slice(0, 1) }}</span>
+            </div>
             <div class="name">{{ item.name }}</div>
             <div class="date">{{ dayjs(item.creatTime).format('MM-DD-YYYY HH:mm:ss') }}</div>
           </div>
@@ -273,14 +275,17 @@ defineExpose({
     padding-left: 0px;
 
     .avatar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       width: 24px;
       height: 24px;
       border-radius: 50%;
-      text-align: center;
-      line-height: 24px;
-      color: #fff;
-      font-weight: 700;
       background-color: var(--color-theme);
+      span {
+        color: #fff;
+        font-weight: 700;
+      }
     }
 
     .name {

src/views/Tracking/src/components/TrackingDetail/src/components/RoutesView.vue

@@ -98,8 +98,8 @@ onBeforeUnmount(() => {
               <div class="title">Origin</div>
               <div class="content">
                 <el-tooltip placement="top">
-                  <template #content>{{ item.origin }}</template>
-                  <span class="single-line-ellipsis">{{ item.origin }}</span>
+                  <template #content>{{ item.origin || '--' }}</template>
+                  <span class="single-line-ellipsis">{{ item.origin || '--' }}</span>
                 </el-tooltip>
 
                 <div class="line_container">
@@ -111,8 +111,8 @@ onBeforeUnmount(() => {
             <div class="destination" ref="">
               <div class="title">Destination</div>
               <el-tooltip placement="top">
-                <template #content>{{ item.destination }}</template>
-                <div class="content single-line-ellipsis">{{ item.destination }}</div>
+                <template #content>{{ item.destination || '--' }}</template>
+                <div class="content single-line-ellipsis">{{ item.destination || '--' }}</div>
               </el-tooltip>
             </div>
           </div>
@@ -137,8 +137,8 @@ onBeforeUnmount(() => {
                 <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
 
                 <el-tooltip placement="top">
-                  <template #content>{{ item.origin }}</template>
-                  <span class="label single-line-ellipsis">{{ item.origin }}</span>
+                  <template #content>{{ item.origin || '--' }}</template>
+                  <span class="label single-line-ellipsis">{{ item.origin || '--' }}</span>
                 </el-tooltip>
                 <div class="line_container">
                   <hr color="#000000" />
@@ -161,8 +161,8 @@ onBeforeUnmount(() => {
                 <span style="font-size: 24px" class="font_family icon-icon_location_fill_b"></span>
 
                 <el-tooltip placement="top">
-                  <template #content>{{ item.destination }}</template>
-                  <span class="label single-line-ellipsis">{{ item.destination }}</span>
+                  <template #content>{{ item.destination || '--' }}</template>
+                  <span class="label single-line-ellipsis">{{ item.destination || '--' }}</span>
                 </el-tooltip>
               </div>
               <div class="eta">
@@ -180,11 +180,11 @@ onBeforeUnmount(() => {
           <div class="transport-info">
             <div class="item">
               <div class="title">Vessel</div>
-              <div class="content">{{ item.vessel }}</div>
+              <div class="content">{{ item.vessel || '--' }}</div>
             </div>
             <div class="item">
               <div class="title">Voyage No.</div>
-              <div class="content">{{ item.voyageNo }}</div>
+              <div class="content">{{ item.voyageNo || '--' }}</div>
             </div>
           </div>
         </div>