commit

src/main/resources/static/components/plugins/h5/TableColumn.vue

@@ -37,26 +37,32 @@ module.exports = {
 <style scoped>
 .table-column {
   display: flex;
-  padding: 6px 0;
+  width: calc(50% - 6px);
-    align-items: center;
+  min-width: 0;
+  padding: 4px 0;
+  align-items: center;
+  box-sizing: border-box;
 }
 
 .label {
-  color: #333;
+  color: #98a3b3;
-  font-size: 14px;
+  font-size: 12px;
+  line-height: 18px;
   flex-shrink: 0;
-  max-width: 120px;
+  max-width: 50%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .value {
-  color: #555;
+  min-width: 0;
-  font-size: 14px;
+  color: #56657a;
-  flex-grow: 1; /* 动态占据剩余部分 */
+  font-size: 12px;
-  white-space: nowrap; /* 防止换行 */
+  line-height: 18px;
-  overflow: hidden; /* 隐藏溢出的部分 */
+  flex-grow: 1;
-  text-overflow: ellipsis; /* 省略号 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 </style>

src/main/resources/static/components/plugins/h5/TableList.vue

@@ -1,5 +1,5 @@
 <template>
-  <van-pull-refresh v-model="tableRefreshing" @refresh="onRefresh">
+  <van-pull-refresh class="table-list" v-model="tableRefreshing" @refresh="onRefresh">
     <div v-if="tableData.length === 0" class="empty-state">
       <van-empty description="暂无数据"></van-empty>
     </div>
@@ -18,12 +18,12 @@
             </div>
           </slot>
 
-          <div style="display: flex;column-gap: 10px"
+          <div class="table-list-content"
                :style="{'max-height':img ? '100px':'unset', 'overflow': img ? 'hidden':'unset' }">
             <div class="img-container" v-if="img">
-              <img :src="row[img]" alt="" style="object-fit: cover">
+              <img :src="row[img]" alt="">
             </div>
-            <div style="width: 100%">
+            <div class="table-list-columns">
               <slot :index="index" :row="row"></slot>
             </div>
           </div>
@@ -161,33 +161,36 @@ module.exports = {
 <style scoped>
 .table-list-container {
   padding: 0;
-  margin-top: 10px;
+  margin-top: 12px;
 }
 
 .table-list-container .table-list-item {
   background-color: #fff;
-  border-bottom: 1px solid #eaecef;
+  border: 1px solid #eef1f6;
-  padding: 16px;
+  border-radius: 12px;
+  box-shadow: 0 7px 20px rgba(55, 85, 126, .08);
+  padding: 14px;
   position: relative;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+  overflow: hidden;
 }
 
 .table-list-container .table-list-item:last-child {
-  border-bottom: none;
   margin-bottom: 0;
 }
 
 .table-list-container .table-list-item .item-header {
   display: flex;
   justify-content: space-between;
-  align-items: flex-start;
+  align-items: center;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .table-list-container .table-list-item .item-title {
-  font-size: 16px;
+  font-size: 15px;
-  font-weight: 500;
+  line-height: 22px;
-  color: #1f2f3d;
+  font-weight: 600;
+  color: #263548;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -199,15 +202,29 @@ module.exports = {
   width: 100px;
   height: 100px;
   flex-shrink: 0;
-  border-radius: 6px;
+  overflow: hidden;
+  border-radius: 10px;
 }
 
 .table-list-container .table-list-item .img-container img {
   width: 100%;
   height: 100%;
-  border-radius: 6px;
+  object-fit: cover;
+  border-radius: 10px;
 }
 
+.table-list-container .table-list-item .table-list-content {
+  display: flex;
+  column-gap: 10px;
+}
+
+.table-list-container .table-list-item .table-list-columns {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  flex-wrap: wrap;
+  column-gap: 12px;
+}
 
 .table-list-container .table-list-item .item-meta {
   display: flex;
@@ -254,48 +271,57 @@ module.exports = {
 
 .table-list-container .table-list-item .item-actions {
   display: flex;
-  column-gap: 20px;
+  gap: 8px;
+  flex-wrap: wrap;
   justify-content: end;
-  margin-top: 15px;
+  margin-top: 10px;
-  padding-top: 12px;
+  padding-top: 10px;
-  border-top: 1px solid #eaecef;
+  border-top: 1px solid #edf1f6;
 }
 
 .table-list-container .table-list-item .action-btn {
-  display: flex;
+  display: inline-flex;
   align-items: center;
-  justify-content: end;
+  justify-content: center;
-  font-size: 14px;
+  min-height: 26px;
+  padding: 4px 10px;
+  box-sizing: border-box;
+  border-radius: 14px;
+  background-color: #eaf4ff;
+  font-size: 12px;
+  line-height: 18px;
   color: var(--color-primary);
-  padding: 4px 0;
+  cursor: pointer;
 }
 
 .table-list-container .table-list-item .action-btn i {
-  margin-right: 6px;
+  margin-right: 5px;
-  font-size: 16px;
+  font-size: 13px;
 }
 
 .table-list-container .table-list-item .action-btn.delete {
-  color: #ff0000;
+  color: #f04444;
+  background-color: #fff0f0;
 }
 
 .table-list-container .table-list-item .action-btn.review {
   color: #67c23a;
+  background-color: #eef9e9;
 }
 
-.table-list-container .empty-state {
+.empty-state {
   text-align: center;
   padding: 60px 20px;
   color: #909399;
 }
 
-.table-list-container .empty-state i {
+.empty-state i {
   font-size: 60px;
   margin-bottom: 16px;
   color: #dcdee0;
 }
 
-.table-list-container .empty-state p {
+.empty-state p {
   margin-top: 10px;
   font-size: 14px;
 }