修改样式

src/components/mallIndex.vue

@@ -225,7 +225,7 @@
   }
 
   .text-omit {
-    width: 380px;
+    min-width: 180px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -251,11 +251,15 @@
     text-align: center;
   }
   
+  .UserInfoContent{
+    display: flex;
+    justify-content: flex-start;
+  }
+
   .Zheader_image {
     width: 32px;
     height: 32px;
     margin-right: 10px;
-    float: left;
   }
 
   .Zheader_image img {
@@ -266,8 +270,7 @@
   .nameList {
     height: 32px;
     line-height: 32px;
-    display: inline-block;
-    width: 280px;
+    width:80%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -422,7 +425,7 @@
         </div>
         <div class="table_Inner">
           <el-table :data="saleIncomeData" style="width: 100%" @sort-change='getSort'>
-            <el-table-column label="排名">
+            <el-table-column label="排名" width="60">
               <template slot-scope="scope">
                 <div class="rankIng" style="text-align:center;">
                   <template v-if="scope.$index+1<4">
@@ -436,21 +439,21 @@
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="GoodsName" label="商品" width="400">
+            <el-table-column prop="GoodsName" label="商品" min-width="180">
               <template slot-scope="scope">
                 <div class="text-omit">
                   {{scope.row.GoodsName}}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="Income" label="销售额" sortable width="150">
+            <el-table-column prop="Income" label="销售额" sortable width="120">
               <template slot-scope="scope">
                 <div style="padding-left:10px;">
                   {{scope.row.Income}}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="SaleCount" sortable label="销量" width="150">
+            <el-table-column prop="SaleCount" sortable label="销量" width="100">
               <template slot-scope="scope">
                 <div style="padding-left:10px;">
                   {{scope.row.SaleCount}}
@@ -467,7 +470,7 @@
         </div>
         <div class="table_Inner table2">
           <el-table :data="saleUserData" style="width: 100%" @sort-change='getSort'>
-            <el-table-column label="排名">
+            <el-table-column label="排名" width="60">
               <template slot-scope="scope">
                 <div class="rankIng">
                   <template v-if="scope.$index+1<4">
@@ -481,8 +484,9 @@
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="UserName" label="用户" width="400">
+            <el-table-column prop="UserName" label="用户" min-width="190">
               <template slot-scope="scope">
+                <div class="UserInfoContent">
                   <div class="Zheader_image">
                     <template v-if="scope.row.Photo">
                       <img :src="scope.row.Photo" alt="" />
@@ -491,17 +495,18 @@
                       <img src="../assets/img/id-card.png" alt="" />
                     </template>
                   </div>
-                <span class="nameList"> {{scope.row.UserName}}</span>
+                  <div class="nameList"> {{scope.row.UserName}}</div>
+                </div>
               </template>
             </el-table-column>
-            <el-table-column prop="Income" label="支付金额" sortable width="150">
+            <el-table-column prop="Income" label="支付金额" sortable width="120">
               <template slot-scope="scope">
                 <div style="padding-left:10px;">
                   {{scope.row.Income}}
                 </div>
               </template>
             </el-table-column>
-            <el-table-column prop="SaleCount" sortable label="支付件数" width="150">
+            <el-table-column prop="SaleCount" sortable label="支付件数" width="110">
               <template slot-scope="scope">
                 <div style="padding-left:10px;">
                   {{scope.row.SaleCount}}