计件宝一键重传

src/views/piece/dashboard/index.vue

@@ -14,22 +14,51 @@
     </div>
   </van-overlay>
   <van-row class="container">
-    <van-col style="background-color: #dbdcdc" span="6">
-      <van-row justify="center" :gutter="[0, 23]" style="margin-top: 23px">
-        <h3 style="text-align: center; margin-bottom: 20px; color: #3498db;">用户信息</h3>
-        <van-col span="24"><span>用户ID：</span> {{ userInfo.userId }}</van-col>
-        <van-col span="24"><span>用户姓名：</span> {{ userInfo.name }}</van-col>
-        <van-col span="24"><span>IP：</span> {{ ipAddress || '获取中...' }}</van-col>
-        <van-col span="24"><span>MAC：</span> {{ mac }}</van-col>
-      </van-row>
-      <van-row justify="center" :gutter="[0, 23]" style="margin-top: 23px">
-        <van-col span="24">
-          错误数量：<span style="color: red">{{ errNum }}</span>
-        </van-col>
-        <van-col span="24">
-          <van-button style="width: 100px" v-if="errNum > 0" plain :loading="isOnePush" :disabled="isOnePush" loading-text="加载中..." type="danger" @click="_one_click_push">一键重传</van-button>
-        </van-col>
-      </van-row>
+    <van-col span="6" class="user-panel">
+      <div class="user-header">
+        <h3>用户信息</h3>
+      </div>
+
+      <div class="info-grid">
+        <div class="info-item">
+          <div class="info-label">用户ID</div>
+          <div class="info-value">{{ userInfo.userId }}</div>
+        </div>
+
+        <div class="info-item">
+          <div class="info-label">用户姓名</div>
+          <div class="info-value">{{ userInfo.name }}</div>
+        </div>
+
+<!--        <div class="info-item">-->
+<!--          <div class="info-label">IP地址</div>-->
+<!--          <div class="info-value">{{ ipAddress || '获取中...' }}</div>-->
+<!--        </div>-->
+
+        <div class="info-item">
+          <div class="info-label">MAC地址</div>
+          <div class="info-value">{{ mac }}</div>
+        </div>
+      </div>
+
+      <div class="error-section">
+        <div class="error-display">
+          <div class="error-label">错误数量</div>
+          <div class="error-count">{{ errNum }}</div>
+        </div>
+        <!-- 添加的一键重传按钮 -->
+        <van-button
+          v-if="errNum > 0"
+          plain
+          :loading="isOnePush"
+          :disabled="isOnePush"
+          loading-text="重传中..."
+          type="danger"
+          class="retry-btn"
+          @click="_one_click_push">
+          一键重传
+        </van-button>
+      </div>
     </van-col>
     <van-col span="18" class="table-container">
       <van-cell-group class="custom-cell-group">
@@ -70,7 +99,7 @@
               <div class="col status"
                    :style="{ color: item.isPush === 0 ? '#333' : item.isPush === 1 ? '#67C23A' : '#F56C6C' }"
                    @click="_rePush(item)">
-                {{ item.isPush === 0 ? '待上传' : item.isPush === 1 ? '上传成功' : '上传失败' }}
+                {{ item.isPush === 0 ? '上传' : item.isPush === 1 ? '成功' : '重传' }}
               </div>
             </div>
             <van-back-top />
@@ -201,7 +230,7 @@ onMounted(() => {
     _openSetting()
   }
   // ip
-  fetchIP()
+  // fetchIP()
   // err数量
   errNum.value = getErrNum()
 })
@@ -601,7 +630,8 @@ span
   padding-top: 0  // 移除之前的padding-top
 
 .table-row
-  height: 18px
+  font-size: 10px
+  height: 21px
   display: flex
   box-sizing: border-box
 
@@ -613,17 +643,17 @@ span
 
 /* 列宽设置 - 确保表头和表体使用相同的宽度 */
 .index
-  flex: 0 0 30px
+  flex: 0 0 24px
   width: 30px
   text-align: center
 
 .time
-  flex: 0 0 70px
-  width: 70px
+  flex: 0 0 60px
+  width: 60px
 
 .operator
-  flex: 0 0 50px
-  width: 50px
+  flex: 0 0 55px
+  width: 55px
 
 .content
   flex: 1
@@ -631,8 +661,8 @@ span
   white-space: normal /* 允许换行 */
 
 .status
-  flex: 0 0 50px
-  width: 50px
+  flex: 0 0 40px
+  width: 40px
 
 /* 确保表体中的单元格与表头对齐 */
 :deep(.van-list)
@@ -656,23 +686,22 @@ span
   height: auto  // 移除固定高度
   display: flex
   align-items: center
-  min-height: 20px  // 确保有足够高度
+  min-height: 24px  // 确保有足够高度
   .van-cell
     display: flex
     align-items: center
     height: 100%
   .van-cell__title
-    flex: 0 0 50px !important
+    flex: 0 0 30px !important
     font-size: 10px
-    max-width: 50px
-    min-width: 50px
+    max-width: 70px
+    min-width: 70px
   .van-cell__value
     flex: 1
+    line-height: 24px
     color: red
-    font-size: 9px
-    padding-left: 3px
+    font-size: 13px
     text-align: left
-    margin-left: 1px
 
 .van-notice-bar
   background-color: #f8f9fa
@@ -720,4 +749,100 @@ span
 
 .fade-leave-to
   opacity: 0
+
+/* 左侧用户信息面板样式优化 */
+.user-panel
+  background-color: #f5f7fa
+  padding: 10px 10px
+  height: 100%
+  display: flex
+  flex-direction: column
+
+.user-header
+  text-align: center
+  margin-bottom: 6px
+  position: relative
+  padding-bottom: 6px
+
+.user-header h3
+  color: #3498db
+  font-weight: 500
+  font-size: 10px
+
+.user-header::after
+  content: ''
+  position: absolute
+  bottom: 0
+  left: 0
+  right: 0
+  height: 2px
+  background: linear-gradient(to right, transparent, #3498db, transparent)
+
+.info-grid
+  display: grid
+  grid-template-columns: 1fr
+  padding-bottom: 5px
+  gap: 0px
+  flex: 1
+
+.info-item
+  display: flex
+  flex-direction: column
+
+.info-label
+  font-size: 8px
+  color: #7f8c8d
+  margin-bottom: 2px
+  display: flex
+  align-items: center
+
+.info-label::before
+  content: ''
+  display: inline-block
+  width: 3px
+  height: 10px
+  background-color: #3498db
+  margin-right: 3px
+  border-radius: 2px
+
+.info-value
+  font-size: 8px
+  font-weight: 500
+  color: #2c3e50
+  padding-left: 8px
+
+.error-section
+  margin-top: auto
+  padding-top: 10px
+  padding-bottom: 30px
+  border-top: 1px dashed #e0e0e0
+
+.error-display
+  display: flex
+  justify-content: space-between
+  align-items: center
+  background: #fff5f5
+  padding: 12px 15px
+  border-radius: 8px
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05)
+
+.error-label
+  font-size: 7px
+  color: #7f8c8d
+
+.error-count
+  font-size: 10px
+  font-weight: bold
+  color: #ff4757
+
+.retry-btn
+  width: 45px
+  height: 18px
+  font-size: 7px
+  font-weight: bold
+  border-radius: 4px
+  box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3)
+  transition: all 0.3s
+  margin-top: 5px
+  margin-left: 28px
 </style>