diff --git a/src/views/modules/datacenter/product-analysis/index.vue b/src/views/modules/datacenter/product-analysis/index.vue
index a50c401..f56596c 100644
--- a/src/views/modules/datacenter/product-analysis/index.vue
+++ b/src/views/modules/datacenter/product-analysis/index.vue
@@ -105,20 +105,13 @@
         </div>
       </div>
     </div>
-    <div
-      style="
-        padding: 10px;
-        border: 1px solid #ccc;
-        margin-top: 20px;
-      "
-    >
-      <div style="font-size: 18px; margin-bottom: 40px">商品排行榜</div>
-      <el-row style="" type="flex" justify="space-between">
-        <el-col :span="11"
-          ><div class="grid-content bg-purple">商品访客数TOP</div>
+    <div class="product" style="margin-top: 20px">
+      <div style="font-size: 18px; margin-bottom: 20px">商品排行榜</div>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <div class="grid-content">商品访客数TOP</div>
           <el-table
             :data="productList.viewPeopleList"
-            border
             style="width: 100%"
             height="35vh"
           >
@@ -152,13 +145,13 @@
               label="访客数"
               width="140"
             >
-            </el-table-column> </el-table
-        ></el-col>
-        <el-col :span="11"
-          ><div class="grid-content bg-purple">商品支付转化率TOP</div>
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content">商品支付转化率TOP</div>
           <el-table
             :data="productList.payConversionList"
-            border
             style="width: 100%"
             height="35vh"
           >
@@ -196,12 +189,11 @@
           </el-table>
         </el-col>
       </el-row>
-      <el-row style="margin:20px 0" type="flex" justify="space-between">
-        <el-col :span="11"
-          ><div class="grid-content bg-purple">销售量TOP</div>
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="12">
+          <div class="grid-content">销售量TOP</div>
           <el-table
             :data="productList.saleConutList"
-            border
             style="width: 100%"
             height="35vh"
           >
@@ -235,13 +227,13 @@
               label="销售量"
               width="140"
             >
-            </el-table-column> </el-table
-        ></el-col>
-        <el-col :span="11"
-          ><div class="grid-content bg-purple">销售额TOP</div>
+            </el-table-column>
+          </el-table>
+        </el-col>
+        <el-col :span="12">
+          <div class="grid-content">销售额TOP</div>
           <el-table
             :data="productList.saleMoneyList"
-            border
             style="width: 100%"
             height="35vh"
           >
@@ -279,12 +271,11 @@
           </el-table>
         </el-col>
       </el-row>
-      <el-row style="" type="flex" justify="space-between">
-        <el-col :span="11"
-          ><div class="grid-content bg-purple">回复率TOP</div>
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="12">
+          <div class="grid-content">回复率TOP</div>
           <el-table
             :data="productList.repurchaseList"
-            border
             style="width: 100%"
             height="35vh"
           >
@@ -318,8 +309,9 @@
               label="回复率（%）"
               width="140"
             >
-            </el-table-column> </el-table
-        ></el-col>
+            </el-table-column>
+          </el-table>
+        </el-col>
       </el-row>
     </div>
   </div>
@@ -354,43 +346,48 @@ export default {
 
 <style lang="scss" scoped>
 .product {
-  margin-top: 20px;
-  padding: 10px;
-  border: 1px solid #ccc;
+  padding: 20px;
+  background-color: #f5f7fa;
 }
 .stat-list {
-  display: flex;
-  align-items: center;
-  /* justify-content: space-between; */
-  flex-wrap: wrap;
-  //   margin-top: 20px;
-  padding: 10px;
-  //   border: 1px solid #ccc;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  margin-top: 20px;
 }
 .stat-item {
-  width: 25%;
-  margin: 30px 30px;
-  display: flex;
-  align-items: center;
-}
-.stat-icon {
-  background: rgb(99 152 252);
-  width: 60px;
-  height: 60px;
-  border-radius: 3px;
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
+  }
 }
 .stat-right {
-  margin-left: 12px;
-  font-size: 18px;
+  font-size: 16px;
 }
 .stat-title {
-  //   color: #969696;
+  color: #909399;
   font-weight: 600;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
+}
+.stat-value {
+  font-size: 24px;
+  font-weight: bold;
+  color: #303133;
+  &.clickable {
+    cursor: pointer;
+    text-decoration: underline;
+    color: #409eff;
+  }
 }
 .grid-content {
   margin-bottom: 20px;
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 600;
+  color: #303133;
 }
 </style>
\ No newline at end of file