style: 修改登录顶部渐变为渐变图片

src/hooks/useOverflow.ts

@@ -0,0 +1,36 @@
+import { ref, watch, onMounted, nextTick } from 'vue'
+
+export const useOverflow = (elementRef, dataRef) => {
+  const isOverflow = ref(false)
+  const checkOverflow = (element) => {
+    if (element) {
+      return element.scrollWidth > element.clientWidth
+    }
+    return false
+  }
+
+  // 初次 mounted 时检查是否溢出
+  onMounted(() => {
+    nextTick(() => {
+      isOverflow.value = checkOverflow(elementRef.value)
+    })
+  })
+
+  // 监听数据变化，更新溢出状态
+  watch(
+    () => dataRef.value,
+    () => {
+      nextTick(() => {
+        isOverflow.value = checkOverflow(elementRef.value)
+      })
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  )
+
+  return {
+    isOverflow
+  }
+}

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

@@ -248,7 +248,8 @@ const formatTime = (time: string) => {
       margin: 0 8px;
       // border-bottom: 1px solid var(--color-border);
       & > .item {
-        flex: 1;
+        flex: 1 1 33%;
+        max-width: 40%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -272,15 +273,12 @@ const formatTime = (time: string) => {
         flex-direction: row;
         justify-content: flex-start;
         gap: 16px;
-        max-width: 500px;
         .origin {
-          width: 60%;
+          flex: 1;
+          width: calc(60% - 16px);
         }
         .destination {
-          width: 40%;
-          .info {
-            width: calc(100% - 16px);
-          }
+          max-width: 40%;
         }
         .title {
           margin-top: 11px;

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

@@ -240,6 +240,8 @@ const checkPassword = () => {
     flex-direction: column;
     align-items: center;
     margin-bottom: 24px;
+    padding: 40px 40px 0;
+    background: url(../image/bg-login-card.png) no-repeat center center;
 
     .welcome {
       margin-bottom: 16px;
@@ -249,7 +251,7 @@ const checkPassword = () => {
   }
 
   :deep(.el-card__body) {
-    padding: 40px;
+    padding: 0;
     padding-bottom: 16px;
   }
 
@@ -264,7 +266,7 @@ const checkPassword = () => {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-
+  padding: 0 40px;
   .el-input {
     height: 40px;
     .confirm-icon {

src/views/Login/src/loginView.vue

@@ -443,14 +443,15 @@ const errorTipsRef = ref()
     align-items: center;
     height: 94px;
     padding-top: 32px;
-    background: linear-gradient(
-      251deg,
-      #ffffff4d,
-      #fff4eb80 22.66%,
-      #f0f3ff80 44.57%,
-      #e0f7f999 80.46%,
-      #ffffff4d
-    );
+    // background: linear-gradient(
+    //   251deg,
+    //   #ffffff4d,
+    //   #fff4eb80 22.66%,
+    //   #f0f3ff80 44.57%,
+    //   #e0f7f999 80.46%,
+    //   #ffffff4d
+    // );
+    background: url(../src/image/bg-login-card.png) no-repeat center center;
     .welcome {
       margin-bottom: 16px;
       font-size: 24px;

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

@@ -65,7 +65,11 @@ const handleSearchNo = () => {
         placeholder="Search a reference number to see shipment details"
       >
         <template #append>
-          <span @click="handleSearchNo" class="font_family icon-icon_search_b"></span>
+          <span
+            @click="handleSearchNo"
+            style="padding: 0 12px; cursor: pointer"
+            class="font_family icon-icon_search_b"
+          ></span>
         </template>
       </el-input>
       <div class="empty">

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

@@ -82,19 +82,31 @@ const formatTime = (time: string) => {
       </div>
       <div class="detail-info">
         <div class="item transport-way">
-          <div class="place">
+          <div class="origin">
             <div class="title">Origin</div>
             <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>
+              </el-tooltip>
               <div class="line_container">
                 <hr color="#000000" />
                 <div class="right-icon"></div>
               </div>
             </div>
           </div>
-          <div class="place">
+          <div class="destination">
             <div class="title">Destination</div>
-            <div class="content">{{ allData.transportInfo?.destination }}</div>
+            <div class="content">
+              <el-tooltip placement="top">
+                <template #content>{{ allData?.transportInfo?.destination || '--' }}</template>
+                <span class="info single-line-ellipsis">{{
+                  allData?.transportInfo?.destination || '--'
+                }}</span>
+              </el-tooltip>
+            </div>
           </div>
         </div>
         <div class="item">
@@ -180,7 +192,8 @@ const formatTime = (time: string) => {
       height: 96px;
       margin: 0 8px;
       & > .item {
-        flex: 1;
+        flex: 1 1 33%;
+        max-width: 40%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -204,8 +217,12 @@ const formatTime = (time: string) => {
         flex-direction: row;
         justify-content: flex-start;
         gap: 16px;
-        .place {
+        .origin {
           flex: 1;
+          width: calc(60% - 16px);
+        }
+        .destination {
+          max-width: 40%;
         }
         .title {
           margin-top: 11px;
@@ -221,6 +238,7 @@ const formatTime = (time: string) => {
           .line_container {
             flex: 1;
             position: relative;
+            min-width: 26px;
             margin-left: 16px;
           }
           .line_container hr {
@@ -264,4 +282,10 @@ const formatTime = (time: string) => {
     color: var(--color-neutral-1);
   }
 }
+.single-line-ellipsis {
+  display: inline-block; /* 或者根据需要使用 inline-block */
+  white-space: nowrap; /* 不换行 */
+  overflow: hidden; /* 隐藏超出部分 */
+  text-overflow: ellipsis; /* 超出部分显示省略号 */
+}
 </style>

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

@@ -13,6 +13,7 @@ import MapView from './components/MapView.vue'
 import { cloneDeep } from 'lodash'
 import { transportationMode } from '@/components/TransportationMode'
 import { useRoute } from 'vue-router'
+import { useOverflow } from '@/hooks/useOverflow'
 
 const route = useRoute()
 
@@ -107,6 +108,10 @@ getData()
 const formatTime = (time: string) => {
   return time ? dayjs(time).format('MMM-DD-YYYY hh:mm A') : '--'
 }
+const originRef = ref()
+const destinationRef = ref()
+const { isOverflow: isOriginOverflow } = useOverflow(originRef, allData)
+const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allData)
 </script>
 
 <template>
@@ -142,13 +147,15 @@ const formatTime = (time: string) => {
           <div class="origin">
             <div class="title">Origin</div>
             <div class="content">
-              <el-tooltip placement="top">
+              <el-tooltip v-if="isOriginOverflow" placement="top">
                 <template #content>{{ allData?.transportInfo?.origin || '--' }}</template>
-                <span class="info single-line-ellipsis">{{
+                <span ref="originRef" class="info single-line-ellipsis">{{
                   allData?.transportInfo?.origin || '--'
                 }}</span>
               </el-tooltip>
-
+              <span v-else ref="originRef" class="info single-line-ellipsis">{{
+                allData?.transportInfo?.origin || '--'
+              }}</span>
               <div class="line_container">
                 <hr color="#000000" />
                 <div class="right-icon"></div>
@@ -158,12 +165,15 @@ const formatTime = (time: string) => {
           <div class="destination">
             <div class="title">Destination</div>
             <div class="content">
-              <el-tooltip placement="top">
+              <el-tooltip v-if="isDestinationOverflow" placement="top">
                 <template #content>{{ allData?.transportInfo?.destination || '--' }}</template>
-                <span class="info single-line-ellipsis">{{
+                <span ref="destinationRef" class="info single-line-ellipsis">{{
                   allData?.transportInfo?.destination || '--'
                 }}</span>
               </el-tooltip>
+              <span v-else ref="destinationRef" class="info single-line-ellipsis">{{
+                allData?.transportInfo?.destination || '--'
+              }}</span>
             </div>
           </div>
         </div>
@@ -324,7 +334,8 @@ const formatTime = (time: string) => {
       height: 96px;
       margin: 0 8px;
       & > .item {
-        flex: 1;
+        flex: 1 1 33%;
+        max-width: 40%;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -348,15 +359,12 @@ const formatTime = (time: string) => {
         flex-direction: row;
         justify-content: flex-start;
         gap: 16px;
-        max-width: 500px;
         .origin {
-          width: 60%;
+          flex: 1;
+          width: calc(60% - 16px);
         }
         .destination {
-          width: 40%;
-          .info {
-            width: calc(100% - 16px);
-          }
+          max-width: 40%;
         }
         .title {
           margin-top: 11px;
@@ -447,3 +455,8 @@ const formatTime = (time: string) => {
   text-overflow: ellipsis; /* 超出部分显示省略号 */
 }
 </style>
+<style lang="scss">
+.is-show-tooltip {
+  // display: none;
+}
+</style>

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

@@ -89,7 +89,7 @@ const formatDate = (date: string) => {
               <div class="title">Destination</div>
               <el-tooltip placement="top">
                 <template #content>{{ item.destination || '--' }}</template>
-                <div class="content single-line-ellipsis">{{ item.destination || '--' }}</div>
+                <span class="content single-line-ellipsis">{{ item.destination || '--' }}</span>
               </el-tooltip>
             </div>
           </div>