style(admin): B-27 DAN结算/供应商/能量规则/家庭收益页面美化

cfc-web/src/views/admin/DanExecution.vue

@@ -28,9 +28,7 @@
           <template slot-scope="{ row }">
             <div class="status-cell">
               <i :class="executionIconClass(row.assessorStatus)" :style="{ color: executionIconColor(row.assessorStatus) }"></i>
-              <el-tag :type="executionStatusType(row.assessorStatus)" size="mini">
-                {{ executionStatusLabel(row.assessorStatus) }}
-              </el-tag>
+              <StatusTag size="mini" :type="executionStatusType(row.assessorStatus)" :text="executionStatusLabel(row.assessorStatus)" />
             </div>
           </template>
         </el-table-column>
@@ -41,21 +39,17 @@
           <template slot-scope="{ row }">
             <div v-if="row.plannerId" class="status-cell">
               <i :class="executionIconClass(row.plannerStatus)" :style="{ color: executionIconColor(row.plannerStatus) }"></i>
-              <el-tag :type="executionStatusType(row.plannerStatus)" size="mini">
-                {{ executionStatusLabel(row.plannerStatus) }}
-              </el-tag>
+              <StatusTag size="mini" :type="executionStatusType(row.plannerStatus)" :text="executionStatusLabel(row.plannerStatus)" />
             </div>
-            <span v-else style="color: #999;">—</span>
+            <span v-else style="color: var(--adm-text-45);">—</span>
           </template>
         </el-table-column>
         <el-table-column label="用户确认" width="110">
           <template slot-scope="{ row }">
             <div class="status-cell">
               <i :class="row.userConfirmed === 1 ? 'el-icon-circle-check' : 'el-icon-time'"
-                 :style="{ color: row.userConfirmed === 1 ? '#67c23a' : '#909399' }"></i>
-              <el-tag :type="row.userConfirmed === 1 ? 'success' : 'info'" size="mini">
-                {{ row.userConfirmed === 1 ? '已确认' : '未确认' }}
-              </el-tag>
+                 :style="{ color: row.userConfirmed === 1 ? 'var(--adm-success)' : 'var(--adm-text-45)' }"></i>
+              <StatusTag size="mini" :type="row.userConfirmed === 1 ? 'success' : 'info'" :text="row.userConfirmed === 1 ? '已确认' : '未确认'" />
             </div>
           </template>
         </el-table-column>
@@ -97,9 +91,7 @@
           <el-descriptions-item label="评估师状态">
             <div class="status-cell">
               <i :class="executionIconClass(currentRecord.assessorStatus)" :style="{ color: executionIconColor(currentRecord.assessorStatus) }"></i>
-              <el-tag :type="executionStatusType(currentRecord.assessorStatus)" size="mini">
-                {{ executionStatusLabel(currentRecord.assessorStatus) }}
-              </el-tag>
+              <StatusTag size="mini" :type="executionStatusType(currentRecord.assessorStatus)" :text="executionStatusLabel(currentRecord.assessorStatus)" />
             </div>
           </el-descriptions-item>
           <el-descriptions-item label="评估师完成时间">{{ formatTime(currentRecord.assessorCompletedAt) }}</el-descriptions-item>
@@ -108,9 +100,7 @@
           <el-descriptions-item label="规划师状态">
             <div v-if="currentRecord.plannerId" class="status-cell">
               <i :class="executionIconClass(currentRecord.plannerStatus)" :style="{ color: executionIconColor(currentRecord.plannerStatus) }"></i>
-              <el-tag :type="executionStatusType(currentRecord.plannerStatus)" size="mini">
-                {{ executionStatusLabel(currentRecord.plannerStatus) }}
-              </el-tag>
+              <StatusTag size="mini" :type="executionStatusType(currentRecord.plannerStatus)" :text="executionStatusLabel(currentRecord.plannerStatus)" />
             </div>
             <span v-else>无</span>
           </el-descriptions-item>
@@ -119,10 +109,8 @@
           <el-descriptions-item label="用户确认">
             <div class="status-cell">
               <i :class="currentRecord.userConfirmed === 1 ? 'el-icon-circle-check' : 'el-icon-time'"
-                 :style="{ color: currentRecord.userConfirmed === 1 ? '#67c23a' : '#909399' }"></i>
-              <el-tag :type="currentRecord.userConfirmed === 1 ? 'success' : 'info'" size="mini">
-                {{ currentRecord.userConfirmed === 1 ? '已确认' : '未确认' }}
-              </el-tag>
+                 :style="{ color: currentRecord.userConfirmed === 1 ? 'var(--adm-success)' : 'var(--adm-text-45)' }"></i>
+              <StatusTag size="mini" :type="currentRecord.userConfirmed === 1 ? 'success' : 'info'" :text="currentRecord.userConfirmed === 1 ? '已确认' : '未确认'" />
             </div>
           </el-descriptions-item>
           <el-descriptions-item label="确认时间">{{ formatTime(currentRecord.userConfirmedAt) }}</el-descriptions-item>
@@ -137,17 +125,13 @@
               ¥{{ (currentRecord.assessorSettlement.commissionAmount / 100).toFixed(2) }}
             </el-descriptions-item>
             <el-descriptions-item v-if="currentRecord.assessorSettlement" label="评估师结算状态">
-              <el-tag :type="settlementStatusType(currentRecord.assessorSettlement.status)" size="mini">
-                {{ settlementStatusLabel(currentRecord.assessorSettlement.status) }}
-              </el-tag>
+              <StatusTag size="mini" :type="settlementStatusType(currentRecord.assessorSettlement.status)" :text="settlementStatusLabel(currentRecord.assessorSettlement.status)" />
             </el-descriptions-item>
             <el-descriptions-item v-if="currentRecord.plannerSettlement" label="规划师结算金额">
               ¥{{ (currentRecord.plannerSettlement.commissionAmount / 100).toFixed(2) }}
             </el-descriptions-item>
             <el-descriptions-item v-if="currentRecord.plannerSettlement" label="规划师结算状态">
-              <el-tag :type="settlementStatusType(currentRecord.plannerSettlement.status)" size="mini">
-                {{ settlementStatusLabel(currentRecord.plannerSettlement.status) }}
-              </el-tag>
+              <StatusTag size="mini" :type="settlementStatusType(currentRecord.plannerSettlement.status)" :text="settlementStatusLabel(currentRecord.plannerSettlement.status)" />
             </el-descriptions-item>
           </el-descriptions>
         </div>
@@ -282,10 +266,10 @@ export default {
       return 'el-icon-info'
     },
     executionIconColor(status) {
-      if (status === 'completed') return '#67c23a'
-      if (status === 'pending') return '#e6a23c'
-      if (status === 'rejected') return '#f56c6c'
-      return '#909399'
+      if (status === 'completed') return 'var(--adm-success)'
+      if (status === 'pending') return 'var(--adm-warning)'
+      if (status === 'rejected') return 'var(--adm-error)'
+      return 'var(--adm-text-45)'
     },
     settlementStatusType(status) {
       if (status === 'settled') return 'success'
@@ -307,26 +291,6 @@ export default {
 .admin-page {
   padding: 20px;
 }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-
-.admin-page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.admin-page-title {
-  font-size: 18px;
-  font-weight: bold;
-}
 
 .filter-bar {
   display: flex;
@@ -347,19 +311,4 @@ export default {
   margin-top: 20px;
   text-align: right;
 }
-
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
 </style>

cfc-web/src/views/admin/DanSettlement.vue

@@ -44,7 +44,7 @@
           <template slot-scope="{ row }">
             <div class="status-cell">
               <i :class="row.providerType === 'assessor' ? 'el-icon-user' : 'el-icon-s-custom'"
-                 :style="{ color: row.providerType === 'assessor' ? '#409EFF' : '#67c23a' }"></i>
+                 :style="{ color: row.providerType === 'assessor' ? 'var(--adm-primary)' : 'var(--adm-success)' }"></i>
               <StatusTag :type="row.providerType === 'assessor' ? 'primary' : 'success'" :text="row.providerType === 'assessor' ? '评估师' : '规划师'" size="mini" />
             </div>
           </template>
@@ -61,7 +61,7 @@
         </el-table-column>
         <el-table-column label="结算金额" width="120">
           <template slot-scope="{ row }">
-            <span style="font-weight: bold; color: #409EFF;">
+            <span class="adm-num" style="font-weight: bold; color: var(--adm-primary);">
               ¥{{ (row.commissionAmount / 100).toFixed(2) }}
             </span>
           </template>
@@ -70,9 +70,7 @@
           <template slot-scope="{ row }">
             <div class="status-cell">
               <i :class="statusIconClass(row.status)" :style="{ color: statusIconColor(row.status) }"></i>
-              <el-tag :type="statusType(row.status)" size="mini">
-                {{ statusLabel(row.status) }}
-              </el-tag>
+              <StatusTag size="mini" :type="statusType(row.status)" :text="statusLabel(row.status)" />
             </div>
           </template>
         </el-table-column>
@@ -125,23 +123,21 @@
           <el-descriptions-item label="服务类型">
             <div class="status-cell">
               <i :class="currentRecord.providerType === 'assessor' ? 'el-icon-user' : 'el-icon-s-custom'"
-                 :style="{ color: currentRecord.providerType === 'assessor' ? '#409EFF' : '#67c23a' }"></i>
+                 :style="{ color: currentRecord.providerType === 'assessor' ? 'var(--adm-primary)' : 'var(--adm-success)' }"></i>
               <StatusTag :type="currentRecord.providerType === 'assessor' ? 'primary' : 'success'" :text="currentRecord.providerType === 'assessor' ? '评估师' : '规划师'" size="mini" />
             </div>
           </el-descriptions-item>
           <el-descriptions-item label="服务费">¥{{ (currentRecord.serviceFee / 100).toFixed(2) }}</el-descriptions-item>
           <el-descriptions-item label="佣金比例">{{ currentRecord.commissionRate }}%</el-descriptions-item>
           <el-descriptions-item label="结算金额">
-            <span style="font-weight: bold; color: #409EFF;">
+            <span class="adm-num" style="font-weight: bold; color: var(--adm-primary);">
               ¥{{ (currentRecord.commissionAmount / 100).toFixed(2) }}
             </span>
           </el-descriptions-item>
           <el-descriptions-item label="结算状态">
             <div class="status-cell">
               <i :class="statusIconClass(currentRecord.status)" :style="{ color: statusIconColor(currentRecord.status) }"></i>
-              <el-tag :type="statusType(currentRecord.status)" size="mini">
-                {{ statusLabel(currentRecord.status) }}
-              </el-tag>
+              <StatusTag size="mini" :type="statusType(currentRecord.status)" :text="statusLabel(currentRecord.status)" />
             </div>
           </el-descriptions-item>
           <el-descriptions-item label="结算时间">{{ formatTime(currentRecord.settledAt) }}</el-descriptions-item>
@@ -295,43 +291,21 @@ export default {
       return 'el-icon-info'
     },
     statusIconColor(status) {
-      if (status === 'settled') return '#67c23a'
-      if (status === 'pending') return '#e6a23c'
-      if (status === 'failed') return '#f56c6c'
-      return '#909399'
+      if (status === 'settled') return 'var(--adm-success)'
+      if (status === 'pending') return 'var(--adm-warning)'
+      if (status === 'failed') return 'var(--adm-error)'
+      return 'var(--adm-text-45)'
     }
   }
 }
 </script>
 
 <style scoped>
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-
-.admin-page-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.admin-page-title {
-  font-size: 18px;
-  font-weight: bold;
-}
-
 .filter-bar {
   display: flex;
   align-items: center;
 }
 
-
 .status-cell {
   display: flex;
   align-items: center;
@@ -346,19 +320,4 @@ export default {
   margin-top: 20px;
   text-align: right;
 }
-
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
 </style>

cfc-web/src/views/admin/EcomSupplierManage.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="ecom-supplier-manage admin-page">
-    <div class="header admin-page-header">
-      <h2 class="admin-page-title">电商供应商管理</h2>
+    <PageHeader title="电商供应商管理">
       <div class="flex items-center gap-sm">
         <el-input v-model="keyword" placeholder="搜索供应商名称..." prefix-icon="el-icon-search" clearable style="width: 220px;" @keyup.enter.native="handleSearch" @clear="handleSearch" />
         <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增供应商</el-button>
       </div>
-    </div>
+    </PageHeader>
 
     <div class="adm-table-wrap">
     <el-table :data="list" v-loading="loading" border stripe height="100%">
@@ -232,18 +231,4 @@ export default {
 .ecom-supplier-manage {
   padding: 20px;
 }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
 </style>

cfc-web/src/views/admin/EnergyBehaviorConfig.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="energy-behavior-config admin-page">
-    <div class="header">
-      <h2>能量行为配置</h2>
+    <PageHeader title="能量行为配置">
       <div class="filters">
         <el-input v-model="keyword" placeholder="搜索行为名称/编码..." prefix-icon="el-icon-search" style="width:260px" clearable @keyup.enter.native="loadList" @clear="loadList" />
         <el-select v-model="enabledFilter" placeholder="状态筛选" @change="loadList" style="width: 140px;" clearable>
@@ -10,7 +9,7 @@
           <el-option label="已禁用" value="0" />
         </el-select>
       </div>
-    </div>
+    </PageHeader>
 
         <div class="adm-table-wrap">
 <el-table :data="list" v-loading="loading" border stripe highlight-current-row height="100%">
@@ -36,12 +35,12 @@
       </el-table-column>
       <el-table-column prop="amountSource" label="值来源" width="120">
         <template slot-scope="{ row }">
-          <el-tag size="mini" :type="sourceTypeTag(row.amountSource)">{{ sourceTypeLabel(row.amountSource) }}</el-tag>
+          <StatusTag size="mini" :type="sourceTypeTag(row.amountSource) || 'primary'" :text="sourceTypeLabel(row.amountSource)" />
         </template>
       </el-table-column>
       <el-table-column label="维度分配" min-width="200">
         <template slot-scope="{ row }">
-          <span v-if="!row.dimensionAssign" style="color:#999">未配置</span>
+          <span v-if="!row.dimensionAssign" style="color:var(--adm-text-45)">未配置</span>
           <el-tag v-for="d in parseDimAssign(row.dimensionAssign)" :key="d.dim" size="mini" :style="{ background: dimColor(d.dim), color: '#fff', marginRight: '4px' }">
             {{ dimLabel(d.dim) }} {{ d.ratio }}%
           </el-tag>
@@ -251,15 +250,5 @@ export default {
 </script>
 
 <style scoped>
-.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
 .filters { display: flex; gap: 10px; align-items: center; }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
 </style>

cfc-web/src/views/admin/EnergyRuleManagement.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="energy-rule-manage admin-page">
-    <div class="header">
-      <h2>能量规则管理</h2>
+    <PageHeader title="能量规则管理">
       <div class="filters">
         <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
         <el-select v-model="dimensionFilter" placeholder="维度筛选" @change="loadList" style="width: 140px;" clearable>
@@ -10,7 +9,7 @@
         </el-select>
         <el-button type="primary" icon="el-icon-plus" @click="showDialog(null)">新增规则</el-button>
       </div>
-      </div>
+    </PageHeader>
         <div class="adm-table-wrap">
 <el-table height="100%" :data="list" v-loading="loading" border stripe>
       <el-table-column prop="id" label="ID" width="60">
@@ -45,7 +44,7 @@
       </el-table-column>
       <el-table-column label="优先级" width="70">
         <template slot-scope="{ row }">
-          <el-tag size="mini">{{ row.priority || 0 }}</el-tag>
+          <StatusTag size="mini" type="primary" :text="String(row.priority || 0)" />
         </template>
       </el-table-column>
       <el-table-column label="状态" width="80">
@@ -249,16 +248,5 @@ export default {
 </script>
 
 <style scoped>
-.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
-.header h2 { margin: 0; }
 .filters { display: flex; align-items: center; gap: 12px; }
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
 </style>

cfc-web/src/views/admin/FamilyEarnings.vue

@@ -1,12 +1,11 @@
 <template>
   <div class="family-earnings admin-page">
-    <div class="header admin-page-header">
-      <h2 class="admin-page-title">家庭收益管理</h2>
+    <PageHeader title="家庭收益管理">
       <div class="flex items-center gap-sm">
         <el-input v-model="searchKeyword" placeholder="搜索家庭ID..." prefix-icon="el-icon-search" style="width:200px" clearable @keyup.enter.native="loadList" @clear="loadList" />
         <el-button type="primary" @click="loadList">刷新</el-button>
       </div>
-    </div>
+    </PageHeader>
 
     <div class="adm-table-wrap">
       <el-table :data="list" v-loading="loading" border stripe height="100%" @row-click="showDetail">
@@ -18,22 +17,22 @@
         <el-table-column prop="familyId" label="家庭ID" width="100" />
         <el-table-column label="累计推荐收入" width="140">
           <template slot-scope="{ row }">
-            <span class="amount-orange">{{ fenToYuan(row.totalEarned) }}</span>
+            <span class="adm-num amount-orange">{{ fenToYuan(row.totalEarned) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="可支配余额" width="140">
           <template slot-scope="{ row }">
-            <span class="amount-green">{{ fenToYuan(row.availableAmount) }}</span>
+            <span class="adm-num amount-green">{{ fenToYuan(row.availableAmount) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="已提现" width="120">
           <template slot-scope="{ row }">
-            {{ fenToYuan(row.withdrawnAmount) }}
+            <span class="adm-num">{{ fenToYuan(row.withdrawnAmount) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="已分配" width="120">
           <template slot-scope="{ row }">
-            {{ fenToYuan(row.distributedAmount) }}
+            <span class="adm-num">{{ fenToYuan(row.distributedAmount) }}</span>
           </template>
         </el-table-column>
         <el-table-column label="更新时间" width="160">
@@ -58,10 +57,10 @@
         <el-descriptions :column="2" border v-if="detail">
           <el-descriptions-item label="家庭ID">{{ detail.familyId || '-' }}</el-descriptions-item>
           <el-descriptions-item label="累计推荐收入">
-            <span class="amount-orange">{{ fenToYuan(detail.totalEarned) }}</span>
+            <span class="adm-num amount-orange">{{ fenToYuan(detail.totalEarned) }}</span>
           </el-descriptions-item>
           <el-descriptions-item label="可支配余额">
-            <span class="amount-green">{{ fenToYuan(detail.availableAmount) }}</span>
+            <span class="adm-num amount-green">{{ fenToYuan(detail.availableAmount) }}</span>
           </el-descriptions-item>
           <el-descriptions-item label="已提现">{{ fenToYuan(detail.withdrawnAmount) }}</el-descriptions-item>
           <el-descriptions-item label="已分配">{{ fenToYuan(detail.distributedAmount) }}</el-descriptions-item>
@@ -81,9 +80,7 @@
           </el-table-column>
           <el-table-column label="池权限" width="100">
             <template slot-scope="{ row }">
-              <el-tag :type="row.canUseFamilyBalance ? 'success' : 'info'" size="mini">
-                {{ row.canUseFamilyBalance ? '可用' : '关闭' }}
-              </el-tag>
+              <StatusTag size="mini" :type="row.canUseFamilyBalance ? 'success' : 'info'" :text="row.canUseFamilyBalance ? '可用' : '关闭'" />
             </template>
           </el-table-column>
           <el-table-column label="管理员" width="80">
@@ -168,24 +165,10 @@ export default {
 }
 .amount-orange {
   font-weight: bold;
-  color: #e6a23c;
+  color: var(--adm-warning-text);
 }
 .amount-green {
   font-weight: bold;
-  color: #67c23a;
-}
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
+  color: var(--adm-success);
 }
 </style>

cfc-web/src/views/admin/data-source-config.vue

@@ -26,7 +26,7 @@
             <span class="sort-header" @click.stop="onSortClick('sourceType', $event)">类型<span v-if="sortIndex('sourceType') !== null" class="sort-index" :class="sortClass('sourceType') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('sourceType') }}</span>{{ sortIcon('sourceType') }}</span>
           </template>
           <template slot-scope="scope">
-            <el-tag size="mini">{{ scope.row.sourceType }}</el-tag>
+            <StatusTag size="mini" type="primary" :text="scope.row.sourceType" />
           </template>
         </el-table-column>
         <el-table-column prop="dimensionCodes" label="维度" width="150" show-overflow-tooltip>
@@ -45,8 +45,8 @@
             <span class="sort-header" @click.stop="onSortClick('fileUrl', $event)">文件URL<span v-if="sortIndex('fileUrl') !== null" class="sort-index" :class="sortClass('fileUrl') === 'sort-asc' ? 'sort-asc-badge' : 'sort-desc-badge'">{{ sortIndex('fileUrl') }}</span>{{ sortIcon('fileUrl') }}</span>
           </template>
           <template slot-scope="scope">
-            <a v-if="scope.row.fileUrl" :href="scope.row.fileUrl" target="_blank" style="color:#409EFF;font-size:12px;">查看文件</a>
-            <span v-else style="color:#999">-</span>
+            <a v-if="scope.row.fileUrl" :href="scope.row.fileUrl" target="_blank" style="color:var(--adm-primary);font-size:12px;">查看文件</a>
+            <span v-else style="color:var(--adm-text-45)">-</span>
           </template>
         </el-table-column>
         <el-table-column prop="createdAt" label="创建时间" width="160">
@@ -115,8 +115,8 @@
 
     <el-dialog title="操作成功" :visible.sync="successDialogVisible" width="400px" :close-on-click-modal="false">
       <div style="text-align:center;padding:10px 0">
-        <i class="el-icon-success" style="color:#67C23A;font-size:32px"></i>
-        <p style="margin:12px 0 0;font-size:16px;color:#303133">保存成功</p>
+        <i class="el-icon-success" style="color:var(--adm-success);font-size:32px"></i>
+        <p style="margin:12px 0 0;font-size:16px;color:var(--adm-text-88)">保存成功</p>
       </div>
       <div slot="footer">
         <el-button type="primary" @click="handleContinue">继续添加</el-button>
@@ -242,21 +242,4 @@ export default {
     }
   }
 }
-</script>
-
-<style scoped>
-.sort-header {
-  cursor: pointer;
-  user-select: none;
-  font-weight: 500;
-  font-size: 12px;
-}
-.sort-header:hover {
-  color: #409eff;
-}
-.sort-tag {
-  margin-left: 8px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-</style>
+</script>