排行榜版式调整

src/components/UserCenter/menu.vue

@@ -375,7 +375,7 @@ export default {
       if (meta.activeMenu) {
         return meta.activeMenu;
       }
-      console.log(path,'path');
+      //console.log(path,'path');
       return path;
     },
   },

src/views/user/ranking.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="padding:26px 20px;display:flex;overflow-x: auto;">
-    <div class="experience" style="margin-right:72px">
+  <div class="page-ranking">
+    <div class="page-ranking-col experience">
           <div class="exp-hear">
            <div class="exp-hear-text">
                   经验值排行榜
@@ -88,7 +88,7 @@
           </div>
       </div>
 
-    <div class="Duration" style="margin-right:72px">
+    <div class="page-ranking-col Duration">
            <div class="exp-hear">
               <div class="exp-hear-text">
                   学习时长排行榜<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
@@ -161,7 +161,7 @@
           </div>
       </div>
 
-    <div class="Duration">
+    <div class="page-ranking-col Duration">
            <div class="exp-hear study-info">
               <div class="exp-hear-text">
                   学习天数排行榜<svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
@@ -458,6 +458,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+  //只是控制布局
+  .page-ranking{
+    padding:15px 18px;
+    display:flex;
+    overflow-x: auto;
+    
+  }
+  .page-ranking-col{
+     min-width: 430px;
+     //padding-right:30px;
+     padding-right: 5%;
+  }
+
 .omit{
   padding-left: 20px;
   div{
@@ -467,7 +480,7 @@ export default {
   }
 }
 .exp-table{
-      width: 100%;
+      //width: 100%;
       padding-left: 25px;
       .table-hear{
          display: flex;
@@ -496,7 +509,7 @@ export default {
  .myselftext{
       height: 75px;
       padding: 0 25px;
-      width: 100%;
+      //width: 100%;
       display: flex;
       .myranking{
           flex: 1;
@@ -570,9 +583,8 @@ export default {
     }
 }
 .experience{
-  min-width: 400px;
   .exp-hear{
-      width: 100%;
+      //width: 100%;
       height: 65px;
       background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
       .exp-hear-text{
@@ -605,7 +617,7 @@ export default {
   }
 
   .exp-bar{
-      width: 100%;
+      //width: 100%;
       h6{
            font-size: 14px;
             color: #666666;
@@ -614,7 +626,7 @@ export default {
             margin-left: 50px;
      }
      .exp-barname{
-         width: 100%;
+         //width: 100%;
          padding: 20px 35px;
          display: flex;
          span{
@@ -622,7 +634,7 @@ export default {
          }
      }
      .exp-barbox{
-         width: 100%;
+         //width: 100%;
          height: 8px;
         //  background: #ECF1FE;
          border-radius: 6px;
@@ -649,13 +661,13 @@ export default {
   }
 }
 .Duration{
-  min-width: 400px;
+
   .study-info{
       height: 62px !important;
       background: url('../../../public/images/study-info.png') no-repeat 100% / 100% !important;
   }
   .exp-hear{
-      width: 100%;
+      //width: 100%;
       height: 62px;
       background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
       .exp-hear-text{