Browse Source

feat: 解决详情页description超长后see all icon位置以及背景

Jack Zhou 3 tháng trước cách đây
mục cha
commit
164c8c3c18

+ 14 - 3
src/views/Booking/src/components/BookingDetail/src/components/BasicInformation.vue

@@ -436,7 +436,9 @@ defineExpose({
                   {{ allData.marksAndDescription[1].content }}
                 </div>
                 <template #reference>
-                  <el-button class="description-see-all el-button--text">See All</el-button>
+                  <el-button class="description-see-all el-button--text">
+                    <span>See All</span>
+                  </el-button>
                 </template>
               </el-popover>
             </div>
@@ -600,7 +602,12 @@ defineExpose({
       right: 0;
       padding-right: 90px;
       padding-left: 17px;
-      background: linear-gradient(to right, transparent, rgb(255, 255, 250) 17px, white 40px);
+      background: linear-gradient(
+        to right,
+        transparent,
+        var(--color-mode) 17px,
+        var(--color-mode) 40px
+      );
     }
   }
 }
@@ -642,7 +649,11 @@ defineExpose({
     .description-see-all {
       position: absolute;
       top: 40px;
-      right: 26px;
+      right: 32px;
+      span {
+        font-size: 12px;
+        color: var(--color-theme);
+      }
     }
   }
 

+ 14 - 3
src/views/Tracking/src/components/TrackingDetail/src/components/BasicInformation.vue

@@ -425,7 +425,9 @@ defineExpose({
                   {{ allData.marksAndDescription[1].content }}
                 </div>
                 <template #reference>
-                  <el-button class="description-see-all el-button--text">See All</el-button>
+                  <el-button class="description-see-all el-button--text">
+                    <span>See All</span>
+                  </el-button>
                 </template>
               </el-popover>
             </div>
@@ -589,7 +591,12 @@ defineExpose({
       right: 0;
       padding-right: 90px;
       padding-left: 17px;
-      background: linear-gradient(to right, transparent, rgb(255, 255, 250) 17px, white 40px);
+      background: linear-gradient(
+        to right,
+        transparent,
+        var(--color-mode) 17px,
+        var(--color-mode) 40px
+      );
     }
   }
 }
@@ -631,7 +638,11 @@ defineExpose({
     .description-see-all {
       position: absolute;
       top: 40px;
-      right: 26px;
+      right: 32px;
+      span {
+        font-size: 12px;
+        color: var(--color-theme);
+      }
     }
   }
 

+ 1 - 1
src/views/Tracking/src/components/TrackingDetail/src/components/ContainersView.vue

@@ -75,7 +75,7 @@ watch(
         // tableRef.value && autoWidth(tableData.value, tableRef.value)
         tableRef.value?.reloadData(containers.container_data)
         if (
-          tableData.value.data?.length > 0 ||
+          tableData.value.data?.length > 0 &&
           tableData.value.data[0].containerStatusData.length > 0
         ) {
           tableRef.value?.toggleRowExpand(tableData.value.data[0])