响应式布局页面的优化

src/views/index.vue

@@ -50,7 +50,7 @@
       <!-- 中间部分 -->
       <div class="main">
         <el-row :gutter="10">
-          <el-col :xs="24" :md="24"  :lg="17" >
+          <el-col :xs="24" :lg="17" >
             <div class="main-left">
           <div class="main-left-top">
             <el-row type="flex" justify="space-between">
@@ -65,7 +65,7 @@
                     </el-col>
                     <el-col :span="12">
                       <div class="tp-img">
-                        <img src="@/assets/image/stay.png" alt="">
+                        <img src="@/assets/image/stay1.png" alt="" >
                       </div>
                     </el-col>
                   </el-row> 
@@ -82,7 +82,7 @@
                     </el-col>
                     <el-col :span="12">
                       <div class="tp-img">
-                        <img src="@/assets/image/stay.png" alt="">
+                        <img src="@/assets/image/stay2.png" alt="">
                       </div>
                     </el-col>
                   </el-row> 
@@ -99,7 +99,7 @@
                     </el-col>
                     <el-col :span="12">
                       <div class="tp-img">
-                        <img src="@/assets/image/stay.png" alt="">
+                        <img src="@/assets/image/stay3.png" alt="">
                       </div>
                     </el-col>
                   </el-row>
@@ -116,7 +116,7 @@
                     </el-col>
                     <el-col :span="12">
                       <div class="tp-img">
-                        <img src="@/assets/image/stay.png" alt="">
+                        <img src="@/assets/image/stay4.png" alt="">
                       </div>
                     </el-col>
                   </el-row> 
@@ -184,7 +184,7 @@
           </div>
         </div>
           </el-col>
-          <el-col :xs="24"  :md="24"   :lg="7"  >
+          <el-col :xs="24" :lg="7"  >
             <div class="main-right">
           <div class="main-right-top">
             <div class="sa">常用功能</div>
@@ -199,7 +199,7 @@
                   </div>
                 </el-col>
                 <el-col :span="8">
-                  <div style="text-align:center;cursor: pointer;" @click="goMyAssets()">
+                  <div class="main-right-top-point" style="text-align:center;cursor: pointer;" @click="goMyAssets()">
                     <div class="right-top-item">
                       <img src="@/assets/image/release.png" alt="">
                     </div>
@@ -270,14 +270,14 @@
         </div>
           </el-col>
         </el-row>   
-        
-        
       </div>
       <!-- 底部 -->
       <div class="footer">
+        <el-row :gutter="10">
+          <el-col :xs="24"  :lg="17">
             <div class="footer-left">
-          <div style="margin:30px 0 0 24px;">
-              <span class="ft-sp">热销类目排行</span>
+          <div style="margin:0 0 0 24px;">
+              <span class="footer-sp">热销类目排行</span>
               <!-- <div class="main-left-foot-top">
                 <el-date-picker
                   size="mini"
@@ -302,7 +302,7 @@
               </div> -->
           </div>
            <el-table
-            style="margin-top:41px;padding:16px 16px 0;"
+            style="margin-top:15px;padding:16px 16px 0;"
             :cell-style='changeCellStyle'
             :header-cell-style="{background:'linear-gradient(0deg, #FCEBCE 0%, #FEF6E9 100%)',color:'#955300'}"
             :data="cateGory">
@@ -310,7 +310,7 @@
               type="index"
               label="排名"
               align="center"
-              width="300">
+              width="200">
               <template slot-scope="scope">
                <div :class="scope.$index==0?'foot-index':'foot-indexone'">
                  <img src="@/assets/image/yelimg.png" alt=""  v-if="(scope.$index==0)">
@@ -322,15 +322,15 @@
             <el-table-column
               prop="category_name"
               label="品类"
-              align="left"
-              width="250"
+              align="center"
+              min-width="30%"
               >
             </el-table-column>
             <el-table-column
               prop="num"
               label="商品总数"
               align="center"
-              width='300' >
+              min-width='30%' >
               <template slot-scope="scope">
                <div class="foot-table">
                  <!-- <img src="@/assets/image/all-shop.png" alt="" class="foot-table-img"> -->
@@ -342,6 +342,7 @@
               prop="sale"
               align="center"
               label="交易量"
+              min-width="25%"
               >
               <template slot-scope="scope">
                <div class="foot-table">
@@ -357,6 +358,8 @@
             </el-table-column> -->
           </el-table>
             </div>
+          </el-col>
+          <el-col :xs="24"  :lg="7">
             <div class="footer-right">
               <div class="footer-right-top">
                 <span class="footer-right-top-text">商家成长</span>
@@ -379,6 +382,8 @@
                 <img src="@/assets/image/more.png" alt="" style="width:100%;">
               </div>
             </div>
+          </el-col>
+        </el-row>  
       </div>
       <el-dialog
         title="提示"
@@ -684,15 +689,30 @@ export default {
   text-align: center;
   border-left: 2px solid #e6edfe;
 }
-@media screen and (max-width: 1000px) {
- 
-.tp-img img{
+@media screen and (max-width: 1600px) {
+  .main-left-top .tp-col .tp-img {
+  display: none;
+}
+}
+@media screen and (max-width: 1200px) {
+.main-left-top .tp-le{
+  width: 100%;
+  text-align: center;
     
-width: 50px;
 }
-.main-right{
-  margin-top: 30px;
+.main-right-top,.footer-right{
+  margin-top: 20px;
+  margin-left: -15px;
+}
+.main-right-foot{
+  margin-left: -15px;
+}
+.footer-left{
+  margin-top: 20px;
 }
+// .main-left-top .tp-col {
+//   background: #ffffff;
+// }
 }
 //中间部分
 .main {
@@ -744,16 +764,18 @@ width: 50px;
 }
 //右侧内容
 .main-right {
+  z-index: 10000;
   height: 592px;
   margin-left: 15px;
 }
 .main-right-top {
   height: 198px;
-  overflow: hidden;
+  // overflow: hidden;
   background: #ffffff;
   border-radius: 4px;
 }
 .main-right-top .sa {
+  display: inline-block;
   margin: 30px 0 0 26px;
   font: 400 16px/5px Alibaba PuHuiTi;
   color: #000000;
@@ -768,6 +790,9 @@ width: 50px;
   background: #f0f6ff;
   border-radius: 10px;
 }
+.main-right-top-point{
+  cursor: pointer;
+}
 .main-right-foot {
   height: 374px;
   margin-top: 20px;
@@ -827,14 +852,18 @@ width: 50px;
 }
 //底部样式
 .footer-left {
-  width: 74%;
-  height: 428px;
-  float: left;
+  height: 448px;
   background: #ffffff;
   border-radius: 4px;
 }
+.footer-left .footer-sp{
+  margin: 30px 0 0 23px;
+  display: inline-block;
+  font: 400 16px/5px Alibaba PuHuiTi;
+  color: #000000;
+}
 .footer-right-top {
-  width: 25%;
+  width: 100%;
   height: 276px;
   background: #ffffff;
   border-radius: 4px;
@@ -883,7 +912,7 @@ width: 50px;
   margin: 14px 0 0px 23px;
 }
 .footer-right-bot {
-  width: 25%;
+  width: 100%;
   margin-top: 20px;
   display: inline-block;
   margin-left: 15px;