feat(rebate):重构返利页面搜索和表格功能

- 使用原生HTML元素替换Element UI组件
- 新增操作类型、计算状态、审核状态、数据来源等搜索条件
- 添加表格控制按钮和自定义分页组件
- 实现状态标签样式和操作链接样式
- 优化表格样式和加载状态显示
- 完善搜索表单重置逻辑
- 调整页面布局和样式细节

@@ -32,6 +32,8 @@ export interface RebateSearchParams {
   productCode?: string
   productCode?: string
   operateType?: number
   operateType?: number
   calcFlag?: number
   calcFlag?: number
+  auditStatus?: number
+  dataSource?: string
   rebateStartDate?: string
   rebateStartDate?: string
   rebateEndDate?: string
   rebateEndDate?: string
 }
 }

@@ -2,51 +2,64 @@
   <div class="rebate-page">
   <div class="rebate-page">
     <!-- 搜索区域 -->
     <!-- 搜索区域 -->
     <div class="search-section">
     <div class="search-section">
-      <div class="search-form">
       <div class="search-row">
       <div class="search-row">
         <div class="search-item">
         <div class="search-item">
-            <span class="search-label">经销商名称</span>
-          <el-input
+          <label>经销商名称:</label>
+          <input 
             v-model="searchForm.dealerName" 
             v-model="searchForm.dealerName" 
+            class="search-input" 
             placeholder="请输入经销商名称"
             placeholder="请输入经销商名称"
-            clearable
-              size="small"
-              style="width: 160px"
           />
           />
         </div>
         </div>
         <div class="search-item">
         <div class="search-item">
-            <span class="search-label">返利编号</span>
-          <el-input
+          <label>返利编号:</label>
+          <input 
             v-model="searchForm.rebateNo" 
             v-model="searchForm.rebateNo" 
+            class="search-input" 
             placeholder="请输入返利编号"
             placeholder="请输入返利编号"
-            clearable
-              size="small"
-              style="width: 160px"
           />
           />
         </div>
         </div>
         <div class="search-item">
         <div class="search-item">
-            <span class="search-label">日期</span>
-          <el-date-picker
-              v-model="dateRange"
-              type="daterange"
-            range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              size="small"
-              format="YYYY-MM-DD"
-              value-format="YYYY-MM-DD"
-              @change="handleDateRangeChange"
-              style="width: 240px"
-            />
+          <label>操作类型:</label>
+          <select v-model="searchForm.operateType" class="search-select">
+            <option value="">所有</option>
+            <option value="1">新增</option>
+            <option value="2">修改</option>
+            <option value="3">删除</option>
+          </select>
         </div>
         </div>
-          <div class="search-actions">
-            <el-button type="primary" size="small" @click="handleSearch" :loading="loading">
-              查询
-          </el-button>
-            <el-button size="small" @click="handleReset">
-            重置
-          </el-button>
+        <div class="search-item">
+          <label>计算状态:</label>
+          <select v-model="searchForm.calcFlag" class="search-select">
+            <option value="">所有</option>
+            <option value="0">未计算</option>
+            <option value="1">已计算</option>
+          </select>
+        </div>
+      </div>
+      <div class="search-row">
+        <div class="search-item">
+          <label>审核状态:</label>
+          <select v-model="searchForm.auditStatus" class="search-select">
+            <option value="">所有</option>
+            <option value="0">待审核</option>
+            <option value="1">审核通过</option>
+            <option value="2">审核中</option>
+            <option value="3">审核拒绝</option>
+          </select>
+        </div>
+        <div class="search-item">
+          <label>数据来源:</label>
+          <select v-model="searchForm.dataSource" class="search-select">
+            <option value="">所有</option>
+            <option value="ERP系统">ERP系统</option>
+            <option value="手工录入">手工录入</option>
+            <option value="API导入">API导入</option>
+          </select>
         </div>
         </div>
+        <div class="search-actions">
+          <button @click="handleSearch" class="search-btn" :disabled="loading">🔍 搜索</button>
+          <button @click="handleReset" class="reset-btn">🔄 重置</button>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -96,91 +109,99 @@
       </div>
       </div>
     </div>
     </div>
 
 
+    <!-- 操作按钮区域 -->
+    <div class="action-section">
+      <div class="action-buttons">
+        <button @click="handleExport" class="action-btn secondary" :disabled="exportLoading">
+          📋 导出
+        </button>
+      </div>
+    </div>
+
     <!-- 数据表格 -->
     <!-- 数据表格 -->
     <div class="table-section">
     <div class="table-section">
       <div class="table-header">
       <div class="table-header">
-        <div class="table-title">
-          返利记录
+        <div class="table-controls">
+          <button @click="handleTableSearch" class="control-btn">🔍</button>
+          <button @click="handleTableRefresh" class="control-btn">🔄</button>
+          <button @click="handleTableExport" class="control-btn">📋</button>
+          <button @click="handleTableViewToggle" class="control-btn">⊞</button>
         </div>
         </div>
-        <div class="table-actions">
-          <el-button type="primary" size="small" @click="handleExport" :loading="exportLoading">
-            <el-icon><Download /></el-icon>
-            导出
-          </el-button>
-          <div class="table-info">
-            数据状态: {{ loading ? '加载中...' : `共${rebateList.length}条记录` }}
       </div>
       </div>
+      
+      <div class="table-container">
+        <div v-if="loading" class="loading-overlay">
+          <div class="loading-spinner">加载中...</div>
         </div>
         </div>
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th>返利编号</th>
+              <th>订单编号</th>
+              <th>经销商代码</th>
+              <th>经销商名称</th>
+              <th>产品编码</th>
+              <th>返利金额</th>
+              <th>返利日期</th>
+              <th>操作类型</th>
+              <th>计算状态</th>
+              <th>更新时间</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-if="rebateList.length === 0">
+              <td colspan="11" class="empty-data">暂无数据</td>
+            </tr>
+            <tr v-for="row in rebateList" :key="row.rebateId">
+              <td>{{ row.rebateNo }}</td>
+              <td>{{ row.orderNo }}</td>
+              <td>{{ row.dealerCode }}</td>
+              <td>{{ row.dealerName }}</td>
+              <td>{{ row.productCode }}</td>
+              <td class="amount-text">{{ formatAmount(row.rebateAmount) }}</td>
+              <td>{{ row.rebateDate }}</td>
+              <td>
+                <span :class="getOperateTypeClass(row.operateType || 0)">
+                  {{ row.operateTypeText || getOperateTypeText(row.operateType || 0) }}
+                </span>
+              </td>
+              <td>
+                <span :class="getCalcFlagClass(row.calcFlag || 0)">
+                  {{ row.calcFlagText || getCalcFlagText(row.calcFlag || 0) }}
+                </span>
+              </td>
+              <td>{{ formatDate(row.updateTime || '') }}</td>
+              <td>
+                <button @click="handleViewDetail(row)" class="action-link">详情</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
       </div>
 
 
-      <el-table
-        v-loading="loading"
-        :data="rebateList"
-        style="width: 100%"
-        :header-cell-style="{ background: '#fafafa', color: '#333', fontWeight: 'normal' }"
-        :empty-text="rebateList.length === 0 ? '暂无数据' : ''"
-        size="small"
-      >
-        <el-table-column prop="rebateNo" label="返利编号" width="140" align="center" />
-        <el-table-column prop="orderNo" label="订单编号" width="140" align="center" />
-        <el-table-column prop="dealerCode" label="经销商代码" width="120" align="center" />
-        <el-table-column prop="dealerName" label="经销商名称" min-width="150" />
-        <el-table-column prop="productCode" label="产品编码" width="120" align="center" />
-        <el-table-column prop="rebateAmount" label="返利金额" width="120" align="right">
-          <template #default="{ row }">
-            <span class="amount-text">{{ formatAmount(row.rebateAmount) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column prop="rebateDate" label="返利日期" width="120" align="center" />
-        <el-table-column prop="operateTypeText" label="操作类型" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="getOperateTypeTagType(row.operateType)" size="small">
-              {{ row.operateTypeText || getOperateTypeText(row.operateType) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="calcFlagText" label="计算状态" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="getCalcFlagTagType(row.calcFlag)" size="small">
-              {{ row.calcFlagText || getCalcFlagText(row.calcFlag) }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column prop="updateTime" label="更新时间" width="150" align="center">
-          <template #default="{ row }">
-            {{ formatDate(row.updateTime) }}
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="80" align="center">
-          <template #default="{ row }">
-            <el-button type="primary" size="small" link @click="handleViewDetail(row)">
-              详情
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
       <!-- 分页 -->
       <!-- 分页 -->
       <div class="pagination-wrapper">
       <div class="pagination-wrapper">
         <div class="pagination-info">
         <div class="pagination-info">
           共 {{ pagination.total }} 条，{{ pagination.pageSize }}/页
           共 {{ pagination.total }} 条，{{ pagination.pageSize }}/页
         </div>
         </div>
-        <el-pagination
-          v-model:current-page="pagination.pageNum"
-          v-model:page-size="pagination.pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="pagination.total"
-          layout="sizes, prev, pager, next"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          small
-        />
+        <div class="pagination-controls">
+          <button @click="handlePrevPage" :disabled="pagination.pageNum <= 1" class="page-btn">‹</button>
+          <button 
+            v-for="page in getPageNumbers()" 
+            :key="page"
+            @click="handlePageChange(page)"
+            :class="['page-btn', { active: page === pagination.pageNum }]"
+          >
+            {{ page }}
+          </button>
+          <button @click="handleNextPage" :disabled="pagination.pageNum >= getTotalPages()" class="page-btn">›</button>
+        </div>
         <div class="pagination-jump">
         <div class="pagination-jump">
           前往
           前往
-          <el-input
+          <input
             v-model="jumpPage"
             v-model="jumpPage"
-            size="small"
-            style="width: 50px; margin: 0 8px;"
+            class="jump-input"
             @keyup.enter="handleJumpPage"
             @keyup.enter="handleJumpPage"
           />
           />
           页
           页
@@ -435,6 +456,8 @@ const searchForm = reactive<RebateSearchParams>({
   productCode: '',
   productCode: '',
   operateType: undefined,
   operateType: undefined,
   calcFlag: undefined,
   calcFlag: undefined,
+  auditStatus: undefined,
+  dataSource: '',
   rebateStartDate: '',
   rebateStartDate: '',
   rebateEndDate: ''
   rebateEndDate: ''
 })
 })
@@ -730,15 +753,17 @@ const handleReset = () => {
   Object.assign(searchForm, {
   Object.assign(searchForm, {
     pageNum: 1,
     pageNum: 1,
     pageSize: 10,
     pageSize: 10,
-    rebateNo: undefined,
-    dealerName: undefined,
-    productName: undefined,
-    rebateType: undefined,
-    status: undefined,
-    applyStartTime: undefined,
-    applyEndTime: undefined
+    rebateNo: '',
+    dealerCode: '',
+    dealerName: '',
+    productCode: '',
+    operateType: undefined,
+    calcFlag: undefined,
+    auditStatus: undefined,
+    dataSource: '',
+    rebateStartDate: '',
+    rebateEndDate: ''
   })
   })
-  applyDateRange.value = null
   pagination.pageNum = 1
   pagination.pageNum = 1
   getRebateList()
   getRebateList()
 }
 }
@@ -748,6 +773,104 @@ const handleRefresh = () => {
   getRebateList()
   getRebateList()
 }
 }
 
 
+// 表格控制按钮
+const handleTableSearch = () => {
+  handleSearch()
+}
+
+const handleTableRefresh = () => {
+  handleRefresh()
+}
+
+const handleTableExport = () => {
+  handleExport()
+}
+
+const handleTableViewToggle = () => {
+  // 切换视图模式
+  console.log('切换视图模式')
+}
+
+// 分页控制
+const handlePrevPage = () => {
+  if (pagination.pageNum > 1) {
+    pagination.pageNum--
+    getRebateList()
+  }
+}
+
+const handleNextPage = () => {
+  if (pagination.pageNum < getTotalPages()) {
+    pagination.pageNum++
+    getRebateList()
+  }
+}
+
+const handlePageChange = (page: number | string) => {
+  if (typeof page === 'number') {
+    pagination.pageNum = page
+    getRebateList()
+  }
+}
+
+const getPageNumbers = () => {
+  const totalPages = getTotalPages()
+  const current = pagination.pageNum
+  const pages = []
+  
+  if (totalPages <= 7) {
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i)
+    }
+  } else {
+    if (current <= 4) {
+      for (let i = 1; i <= 5; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(totalPages)
+    } else if (current >= totalPages - 3) {
+      pages.push(1)
+      pages.push('...')
+      for (let i = totalPages - 4; i <= totalPages; i++) {
+        pages.push(i)
+      }
+    } else {
+      pages.push(1)
+      pages.push('...')
+      for (let i = current - 1; i <= current + 1; i++) {
+        pages.push(i)
+      }
+      pages.push('...')
+      pages.push(totalPages)
+    }
+  }
+  
+  return pages
+}
+
+const getTotalPages = () => {
+  return Math.ceil(pagination.total / pagination.pageSize)
+}
+
+// 状态样式类
+const getOperateTypeClass = (type: number) => {
+  const classes = {
+    1: 'status-tag success',
+    2: 'status-tag warning', 
+    3: 'status-tag danger'
+  }
+  return classes[type as keyof typeof classes] || 'status-tag'
+}
+
+const getCalcFlagClass = (flag: number) => {
+  const classes = {
+    0: 'status-tag warning',
+    1: 'status-tag success'
+  }
+  return classes[flag as keyof typeof classes] || 'status-tag'
+}
+
 // 分页变化
 // 分页变化
 const handleSizeChange = (size: number) => {
 const handleSizeChange = (size: number) => {
   pagination.pageSize = size
   pagination.pageSize = size
@@ -784,11 +907,11 @@ const handleViewDetail = async (row: Rebate) => {
     const response = await rebateApi.getRebateById(row.rebateId)
     const response = await rebateApi.getRebateById(row.rebateId)
     console.log('详情接口响应:', response)
     console.log('详情接口响应:', response)
     
     
-    // 根据request.ts拦截器的处理，response.data已经是实际数据
-    if (response && response.data) {
-      rebateDetail.value = response.data
+    // 根据request.ts拦截器的处理，response直接就是数据对象
+    if (response) {
+      rebateDetail.value = response as unknown as Rebate
       detailDialogVisible.value = true
       detailDialogVisible.value = true
-      console.log('详情数据:', response.data)
+      console.log('详情数据:', response)
     } else {
     } else {
       ElMessage.error('获取返利详情失败')
       ElMessage.error('获取返利详情失败')
     }
     }
@@ -1478,23 +1601,57 @@ onMounted(async () => {
   border-radius: 4px;
   border-radius: 4px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 
 
-  .search-form {
   .search-row {
   .search-row {
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 24px;
     gap: 24px;
     flex-wrap: wrap;
     flex-wrap: wrap;
+    margin-bottom: 12px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
 
 
     .search-item {
     .search-item {
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
       gap: 8px;
       gap: 8px;
 
 
-        .search-label {
+      label {
         font-size: 14px;
         font-size: 14px;
         color: #333;
         color: #333;
         white-space: nowrap;
         white-space: nowrap;
-          min-width: 70px;
+        min-width: 80px;
+      }
+
+      .search-input {
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 14px;
+        width: 160px;
+        transition: border-color 0.3s;
+
+        &:focus {
+          outline: none;
+          border-color: #409eff;
+        }
+      }
+
+      .search-select {
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 14px;
+        width: 120px;
+        background: white;
+        cursor: pointer;
+        transition: border-color 0.3s;
+
+        &:focus {
+          outline: none;
+          border-color: #409eff;
+        }
       }
       }
     }
     }
 
 
@@ -1502,6 +1659,96 @@ onMounted(async () => {
       margin-left: auto;
       margin-left: auto;
       display: flex;
       display: flex;
       gap: 8px;
       gap: 8px;
+
+      .search-btn, .reset-btn {
+        padding: 8px 16px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 14px;
+        cursor: pointer;
+        transition: all 0.3s;
+        background: white;
+
+        &:hover {
+          background: #f5f7fa;
+        }
+
+        &:disabled {
+          opacity: 0.6;
+          cursor: not-allowed;
+        }
+      }
+
+      .search-btn {
+        background: #409eff;
+        color: white;
+        border-color: #409eff;
+
+        &:hover {
+          background: #66b1ff;
+        }
+      }
+    }
+  }
+}
+
+.action-section {
+  background: white;
+  padding: 12px 20px;
+  margin-bottom: 16px;
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+
+  .action-buttons {
+    display: flex;
+    gap: 12px;
+
+    .action-btn {
+      padding: 8px 16px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      font-size: 14px;
+      cursor: pointer;
+      transition: all 0.3s;
+      background: white;
+
+      &:hover {
+        background: #f5f7fa;
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      &.primary {
+        background: #409eff;
+        color: white;
+        border-color: #409eff;
+
+        &:hover {
+          background: #66b1ff;
+        }
+      }
+
+      &.secondary {
+        background: #67c23a;
+        color: white;
+        border-color: #67c23a;
+
+        &:hover {
+          background: #85ce61;
+        }
+      }
+
+      &.danger {
+        background: #f56c6c;
+        color: white;
+        border-color: #f56c6c;
+
+        &:hover {
+          background: #f78989;
+        }
       }
       }
     }
     }
   }
   }
@@ -1580,55 +1827,107 @@ onMounted(async () => {
 
 
 .table-section {
 .table-section {
   background: white;
   background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
   overflow: hidden;
   overflow: hidden;
 
 
   .table-header {
   .table-header {
     display: flex;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-end;
     align-items: center;
     align-items: center;
-    padding: 20px 20px 0 20px;
-    margin-bottom: 16px;
+    padding: 12px 20px;
+    border-bottom: 1px solid #f0f0f0;
+    background: #fafafa;
 
 
-    .table-title {
-      font-size: 16px;
-      font-weight: 500;
-      color: #333;
+    .table-controls {
+      display: flex;
+      gap: 8px;
+
+      .control-btn {
+        padding: 6px 12px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: white;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.3s;
+
+        &:hover {
+          background: #f5f7fa;
+          border-color: #409eff;
+        }
+      }
     }
     }
+  }
+
+  .table-container {
+    position: relative;
 
 
-    .table-actions {
+    .loading-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(255, 255, 255, 0.8);
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
-      gap: 12px;
+      justify-content: center;
+      z-index: 10;
 
 
-      .table-info {
-        font-size: 12px;
-        color: #999;
-      }
+      .loading-spinner {
+        font-size: 14px;
+        color: #666;
       }
       }
     }
     }
 
 
-  .el-table {
-    border: none;
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+
+      thead {
+        background: #fafafa;
 
 
-    :deep(.el-table__header) {
         th {
         th {
-        background-color: #fafafa;
-        border: none;
+          padding: 12px 16px;
+          text-align: left;
           font-weight: 500;
           font-weight: 500;
           color: #333;
           color: #333;
+          border-bottom: 1px solid #e0e0e0;
+          white-space: nowrap;
         }
         }
       }
       }
 
 
-    :deep(.el-table__body) {
-      tr:hover > td {
-        background-color: #f5f7fa;
+      tbody {
+        tr {
+          transition: background-color 0.3s;
+
+          &:hover {
+            background: #f5f7fa;
+          }
+
+          &:nth-child(even) {
+            background: #fafafa;
+          }
+
+          &:nth-child(even):hover {
+            background: #f0f2f5;
           }
           }
 
 
           td {
           td {
-        border: none;
+            padding: 12px 16px;
             border-bottom: 1px solid #f0f0f0;
             border-bottom: 1px solid #f0f0f0;
+            vertical-align: middle;
+
+            &.empty-data {
+              text-align: center;
+              color: #999;
+              font-style: italic;
+              padding: 40px;
+            }
+          }
+        }
       }
       }
     }
     }
   }
   }
@@ -1646,15 +1945,100 @@ onMounted(async () => {
       color: #666;
       color: #666;
     }
     }
 
 
+    .pagination-controls {
+      display: flex;
+      gap: 4px;
+      align-items: center;
+
+      .page-btn {
+        padding: 6px 12px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: white;
+        cursor: pointer;
+        font-size: 14px;
+        transition: all 0.3s;
+        min-width: 32px;
+
+        &:hover:not(:disabled) {
+          background: #f5f7fa;
+          border-color: #409eff;
+        }
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        &.active {
+          background: #409eff;
+          color: white;
+          border-color: #409eff;
+        }
+      }
+    }
+
     .pagination-jump {
     .pagination-jump {
       display: flex;
       display: flex;
       align-items: center;
       align-items: center;
+      gap: 8px;
       font-size: 14px;
       font-size: 14px;
       color: #666;
       color: #666;
+
+      .jump-input {
+        width: 50px;
+        padding: 4px 8px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        text-align: center;
+        font-size: 14px;
+
+        &:focus {
+          outline: none;
+          border-color: #409eff;
+        }
+      }
     }
     }
   }
   }
 }
 }
 
 
+.status-tag {
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 12px;
+  font-weight: 500;
+
+  &.success {
+    background: #f0f9ff;
+    color: #67c23a;
+  }
+
+  &.warning {
+    background: #fdf6ec;
+    color: #e6a23c;
+  }
+
+  &.danger {
+    background: #fef0f0;
+    color: #f56c6c;
+  }
+}
+
+.action-link {
+  color: #409eff;
+  text-decoration: none;
+  cursor: pointer;
+  font-size: 14px;
+  background: none;
+  border: none;
+  padding: 0;
+
+  &:hover {
+    color: #66b1ff;
+    text-decoration: underline;
+  }
+}
+
 .amount-text {
 .amount-text {
   color: #f56c6c;
   color: #f56c6c;
   font-weight: 500;
   font-weight: 500;