修改我的U币的排版

src/assets/styles/portal-index.scss

@@ -391,7 +391,7 @@
     border-color: #387DF7;
 }
 .home-no-list{
-   margin-top: 156px;
+   margin-top: 120px;
    text-align: center;
    .img{
     width: 148px;

src/utils/tools.js

@@ -270,7 +270,7 @@ export function experienceValue(total) {
     start:'',
     end:'',
     endValue:null,
-    percentage:null,
+    percentage:0,
     total,
   }
     if(total < 300) {

src/views/ucurrency/Index.vue

@@ -2,30 +2,31 @@
   <div class="u-currency">
     <div class="myubi">
       <div class="ubi-hear">
-               <h6>我的U币:{{uinfo.uCurrency}}</h6><span class="pointer" @click="dialogVisible = true">U币规则 <i class="el-icon-arrow-right"></i> </span>
+        <h6>我的U币:{{uinfo.uCurrency}}</h6><span class="pointer" @click="dialogVisible = true">U币规则 <i
+            class="el-icon-arrow-right"></i> </span>
         <el-button icon="el-icon-document" @click="exportRecord()">导出记录</el-button>
       </div>
-           <div style="max-height:600px;overflow-y:auto;padding-right:50px">
+      <div style="max-height:600px;overflow-y:auto;padding-right:30px">
         <div class="Ubi-hist">
           <h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
-                    <div style="width:100%;height:290px" ref="chart"></div>
+          <div style="height:290px;min-width: 350px;" ref="chart"></div>
         </div>
         <div v-if="uCoinRecord.length > 0">
           <div class="my-Recording" v-for="(day, index) in uCoinRecord" :key="index">
             <h3>{{day.dayNmae}}</h3>
             <div class="Recording-info" v-for="info in day.list">
               <div class="info-tit">{{info.content}}</div>
-                            <div class="info-Gold"><img :src="`${webBaseUrl}/images/Uimg.png`" alt="">{{info.uvalue > 0? '+':''}} {{info.uvalue}}</div>
+              <div class="info-Gold"><img :src="`${webBaseUrl}/images/Uimg.png`" alt="">{{info.uvalue > 0? '+':''}}
+                {{info.uvalue}}</div>
             </div>
           </div>
         </div>
-
         <div v-else class="home-no-list">
-                    <img class="img" style="width:76px;height:76px" :src="`${webBaseUrl}/images/homeWu/u-wu.png`" alt="" srcset="">
+          <img class="img" style="width:76px;height:76px" :src="`${webBaseUrl}/images/homeWu/u-wu.png`" alt=""
+            srcset="">
           <p class="text">最近7天你可能太忙了，快开始 努力获得U币吧</p>
         </div>
       </div>
-
     </div>
     <div class="experience">
       <div class="exp-hear">
@@ -52,13 +53,14 @@
           我的排名 : <span> {{currentUserRankingData.rankingNo}}</span>
         </div>
         <div class="myexperience">
-                 我的经验值 :  <span>{{currentUserRankingData.total || currentUserRankingData.months || currentUserRankingData.years || currentUserRankingData.weeks}}</span>
+          我的经验值 :
+          <span>{{currentUserRankingData.total || currentUserRankingData.months || currentUserRankingData.years || currentUserRankingData.weeks}}</span>
         </div>
       </div>
       <div class="exp-bar">
         <h6> {{currentUserRankingData.total}}/{{current.endValue}}</h6>
         <div class="exp-barbox">
-                <el-progress :percentage="current.percentage" color="#387DF7"></el-progress>
+          <el-progress v-if="current.percentage" :percentage="current.percentage*100/current.endValue" color="#387DF7"></el-progress>
           <!-- <div class="exp-bar-cont"></div> -->
         </div>
         <div class="exp-barname">
@@ -74,14 +76,19 @@
           <div class="jy">经验值</div>
         </div>
         <div>
-            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(ran,index) in rankingData" :key="ran.id">
+          <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px"
+            v-for="(ran,index) in rankingData" :key="ran.id">
             <div class="tab-rank">
               <img v-if="index == 0" :src="`${webBaseUrl}/images/rank1.png`" alt="" />
               <img v-if="index == 1" :src="`${webBaseUrl}/images/rank2.png`" alt="" />
               <img v-if="index == 2" :src="`${webBaseUrl}/images/rank3.png`" alt="" />
-                    <div v-if="index > 2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{index+1}}</div>
+              <div v-if="index > 2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">
+                {{index+1}}</div>
+            </div>
+            <div class="tab-name">
+              <author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex">
+              </author-img> <span>{{ran.authorInfo.name}}</span>
             </div>
-                 <div class="tab-name"><author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex"></author-img> <span>{{ran.authorInfo.name}}</span> </div>
             <div class="bm tab-bm" style="margin-left:30px;">{{ran.authorInfo.orgInfo}}</div>
             <div class="jy tab-jy">
               <div style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
@@ -89,23 +96,30 @@
           </div>
         </div>
         <div v-if="currentUserRankingData.rankingNo>4" class="omit">
-                 <div>.</div> <div>.</div> <div>.</div>
+          <div>.</div>
+          <div>.</div>
+          <div>.</div>
+        </div>
+        <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px"
+          v-if="currentUserRankingData.authorInfo && currentUserRankingData.authorInfo.aid && currentUserRankingData.rankingNo>4">
+          <div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank">
+            {{currentUserRankingData.rankingNo}}</div>
+          <div class="tab-name">
+            <author-img :avatar="currentUserRankingData.authorInfo.avatar" :aid="currentUserRankingData.authorInfo.aid"
+              :sex="currentUserRankingData.authorInfo.sex"></author-img> <span
+              style="color: #0059FF;">{{currentUserRankingData.authorInfo.name}}</span>
+          </div>
+          <div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">{{currentUserRankingData.authorInfo.orgInfo}}
           </div>
-             <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-if="currentUserRankingData.authorInfo && currentUserRankingData.authorInfo.aid && currentUserRankingData.rankingNo>4">
-                 <div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >{{currentUserRankingData.rankingNo}}</div>
-                 <div class="tab-name"><author-img :avatar="currentUserRankingData.authorInfo.avatar" :aid="currentUserRankingData.authorInfo.aid" :sex="currentUserRankingData.authorInfo.sex"></author-img> <span style="color: #0059FF;">{{currentUserRankingData.authorInfo.name}}</span> </div>
-                 <div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">{{currentUserRankingData.authorInfo.orgInfo}}</div>
           <div class="jy tab-jy">
-                     <div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{currentUserRankingData.total}}</div>
+            <div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">
+              {{currentUserRankingData.total}}</div>
           </div>
         </div>
 
       </div>
     </div>
-      <el-dialog
-        :visible.sync="dialogVisible"
-        :show-close="false"
-        width="716px">
+    <el-dialog :visible.sync="dialogVisible" :show-close="false" width="716px">
       <div class="dialog-box">
         <div class="box-top">
           <p style="font-size: 26px;font-weight: 600;margin-bottom: 4px;">U币规则</p>
@@ -114,64 +128,41 @@
         <div style="max-height:420px;overflow-y: auto;">
           <div class="box-table">
             <p class="table-title portal-title-tow"><span></span>学习</p>
-                <el-table
-                    :data="tableData"
-                    style="width: 100%">
-                    <el-table-column
-                        prop="name"
-                        label="分类"
-                        width="180">
-                    </el-table-column>
-                    <el-table-column
-                        prop="name"
-                        label="描述"
-                        width="180">
+            <el-table :data="tableData" style="">
+              <el-table-column prop="name" label="分类" width="180"></el-table-column>
+              <el-table-column prop="name" label="描述" width="180">
                 <template slot-scope="scope">
                   <p v-for="(rem,index) in scope.row.hear" :key="index">{{rem}}</p>
                   <p style="font-size:12px;color: #999999;" v-if="scope.row.label">{{scope.row.label}}</p>
                 </template>
               </el-table-column>
-                    <el-table-column
-                        align="right"
-                        label="经验值/U币">
+              <el-table-column align="right" label="经验值/U币">
                 <template slot-scope="scope">
-                            <p style="font-size:16px;color: #999999;" v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
+                  <p style="font-size:16px;color: #999999;" v-for="(val,index) in scope.row.value" :key="index">{{val}}
+                  </p>
                 </template>
               </el-table-column>
-                    <el-table-column
-                    prop="upperlimit" align="right"
-                    label="每日上限">
+              <el-table-column prop="upperlimit" align="right" label="每日上限">
               </el-table-column>
             </el-table>
           </div>
           <div class="box-table">
             <p class="table-title portal-title-tow"><span></span>知识贡献</p>
-                <el-table
-                    :data="tableList"
-                    style="width: 100%">
-                    <el-table-column
-                        prop="name"
-                        label="分类"
-                        width="180">
+            <el-table :data="tableList" style="">
+              <el-table-column prop="name" label="分类" width="180">
               </el-table-column>
-                    <el-table-column
-                        prop="name"
-                        label="描述"
-                        width="180">
+              <el-table-column prop="name" label="描述" width="180">
                 <template slot-scope="scope">
                   <p v-for="(rem,index) in scope.row.hear" :key="index">{{rem}}</p>
                 </template>
               </el-table-column>
-                    <el-table-column
-                        align="right"
-                        label="经验值/U币">
+              <el-table-column align="right" label="经验值/U币">
                 <template slot-scope="scope">
-                            <p style="font-size:16px;color: #333333;font-weight: 600;" v-for="(val,index) in scope.row.value" :key="index">{{val}}</p>
+                  <p style="font-size:16px;color: #333333;font-weight: 600;" v-for="(val,index) in scope.row.value"
+                    :key="index">{{val}}</p>
                 </template>
               </el-table-column>
-                    <el-table-column
-                    prop="upperlimit" align="right"
-                    label="每日上限">
+              <el-table-column prop="upperlimit" align="right" label="每日上限">
               </el-table-column>
             </el-table>
           </div>
@@ -187,40 +178,97 @@
 
 <script>
   import apiStat from '@/api/phase2/stat.js';
-    import { mapGetters } from 'vuex';
-    import {getUType} from '@/utils/tools.js'
+  import {
+    mapGetters
+  } from 'vuex';
+  import {
+    getUType
+  } from '@/utils/tools.js'
   import authorImg from '@/components/Portal/authorImg.vue';
   import author from '@/components/Portal/authorInfo.vue';
   import apiUser from "@/api/system/user.js";
   import * as echarts from 'echarts'
-    import {translate,experienceValue} from "@/utils/tools.js";
+  import {
+    translate,
+    experienceValue
+  } from "@/utils/tools.js";
   export default {
     computed: {
       ...mapGetters(['userInfo']),
 
     },
-          components: {authorImg,author},
+    components: {
+      authorImg,
+      author
+    },
     data() {
       return {
-                current:{},
+        current: {
+          percentage: 0
+        },
         experienceValue,
         translate,
         cycle: 'total',
         name: '累计',
         getUType,
         dialogVisible: false,
-                tableData:[
-                    {name:'试听学习',hear:['每日累计学习10分钟','每日累计学习20分钟','每日累计学习30分钟','每日累计学习45分钟','每日累计学习60分钟',],value:['+10','+20','+30','+40',"+50"],upperlimit:50},
-                    {name:'案例学习',hear:['完成一个案例的阅读',],value:['+5'],upperlimit:30,label:'（最低3分钟）'},
-                    {name:'文章学习',hear:['完成一个文章的阅读',],value:['+5'],upperlimit:30,label:'（最低2分钟）'},
+        tableData: [{
+            name: '试听学习',
+            hear: ['每日累计学习10分钟', '每日累计学习20分钟', '每日累计学习30分钟', '每日累计学习45分钟', '每日累计学习60分钟', ],
+            value: ['+10', '+20', '+30', '+40', "+50"],
+            upperlimit: 50
+          },
+          {
+            name: '案例学习',
+            hear: ['完成一个案例的阅读', ],
+            value: ['+5'],
+            upperlimit: 30,
+            label: '（最低3分钟）'
+          },
+          {
+            name: '文章学习',
+            hear: ['完成一个文章的阅读', ],
+            value: ['+5'],
+            upperlimit: 30,
+            label: '（最低2分钟）'
+          },
         ],
-                tableList:[
-                    {name:'发布音视频课程',hear:['完成一个案音视频课',],value:['+60'],upperlimit:null},
-                    {name:'面授课记录',hear:['有一个完成的面授课记录（<4h）','有一个完成的面授课记录（>=4h）'],value:['+40','+60'],upperlimit:null},
-                    {name:'发布文章',hear:['每发布1篇文章',],value:['+40'],upperlimit:null},
-                    {name:'发布案例',hear:['每发布1篇案例',],value:['+50'],upperlimit:null},
-                    {name:'发布笔记',hear:['每发布公开笔记1篇',],value:["+5"],upperlimit:30},
-                    {name:'发表评论',hear:['在课程，问答，案例中发表1个评论',],value:['+2'],upperlimit:20},
+        tableList: [{
+            name: '发布音视频课程',
+            hear: ['完成一个案音视频课', ],
+            value: ['+60'],
+            upperlimit: null
+          },
+          {
+            name: '面授课记录',
+            hear: ['有一个完成的面授课记录（<4h）', '有一个完成的面授课记录（>=4h）'],
+            value: ['+40', '+60'],
+            upperlimit: null
+          },
+          {
+            name: '发布文章',
+            hear: ['每发布1篇文章', ],
+            value: ['+40'],
+            upperlimit: null
+          },
+          {
+            name: '发布案例',
+            hear: ['每发布1篇案例', ],
+            value: ['+50'],
+            upperlimit: null
+          },
+          {
+            name: '发布笔记',
+            hear: ['每发布公开笔记1篇', ],
+            value: ["+5"],
+            upperlimit: 30
+          },
+          {
+            name: '发表评论',
+            hear: ['在课程，问答，案例中发表1个评论', ],
+            value: ['+2'],
+            upperlimit: 20
+          },
         ],
         uCoinRecord: [],
         chart: null,
@@ -261,14 +309,25 @@
                 sex: null
               }
               this.getUserData([res.result.currentUserRankingData.aid], [res.result.currentUserRankingData])
-                            if(res.result.currentUserRankingData.weeks == undefined){res.result.currentUserRankingData.weeks = 0;}
-                            if(res.result.currentUserRankingData.months == undefined){res.result.currentUserRankingData.months = 0;}
-                            if(res.result.currentUserRankingData.years == undefined){res.result.currentUserRankingData.years = 0;}
-                            this.currentUserRankingData = res.result.currentUserRankingData;
-                            if(res.result.currentUserRankingData.total>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.total);}
-                            else if(res.result.currentUserRankingData.weeks>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.weeks);}
-                            else if(res.result.currentUserRankingData.months>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.months);}
-                            else if(res.result.currentUserRankingData.years>=0) {this.current = this.experienceValue(res.result.currentUserRankingData.years);}
+              if (res.result.currentUserRankingData.weeks == undefined) {
+                res.result.currentUserRankingData.weeks = 0;
+              }
+              if (res.result.currentUserRankingData.months == undefined) {
+                res.result.currentUserRankingData.months = 0;
+              }
+              if (res.result.currentUserRankingData.years == undefined) {
+                res.result.currentUserRankingData.years = 0;
+              }
+              this.currentUserRankingData = res.result.currentUserRankingData;                console.log()
+              if (res.result.currentUserRankingData.total >= 0) {
+                this.current = this.experienceValue(res.result.currentUserRankingData.total);
+              } else if (res.result.currentUserRankingData.weeks >= 0) {
+                this.current = this.experienceValue(res.result.currentUserRankingData.weeks);
+              } else if (res.result.currentUserRankingData.months >= 0) {
+                this.current = this.experienceValue(res.result.currentUserRankingData.months);
+              } else if (res.result.currentUserRankingData.years >= 0) {
+                this.current = this.experienceValue(res.result.currentUserRankingData.years);
+              }
             }
 
             const ids = [];
@@ -338,8 +397,7 @@
               return ` ${p}  ${name}`
             }
           },
-                    series: [
-                        {
+          series: [{
             // name: 'name',
             type: 'pie',
             radius: ['50%', '40%'],
@@ -364,8 +422,7 @@
               show: false
             },
             data: chatData,
-                        }
-                    ]
+          }]
         };
         this.chart.setOption(option);
       },
@@ -402,13 +459,31 @@
   }
 </script>
 <style lang="scss" scoped>
+  .u-currency {
+    padding: 10px 18px;
+     display: flex;
+     justify-content: space-between;      overflow-x: auto;
+  }
+
+  .experience {
+    font-size: 16px;
+     min-width: 480px;
+     font-weight: 600;
+     color: #333333;
+  }
+
+  .myubi {
+    flex: 1;
+    padding-right: 30px;
   }
 
   ::v-deep .el-dialog {
     border-radius: 8px;
+
   }
 
   ::v-deep .el-dialog__header {
+    display: none;
   }
 
   ::v-deep .el-dialog__body {
@@ -416,15 +491,12 @@
     //    ::v-deep .el-table td.el-table__cell{
     //       font-size: 14px;
     //       color: #333333;
+    //    }
   }
 
   ::v-deep .el-table__body-wrapper {
     font-size: 14px;
-    .experience{
-        font-size: 16px;
-        font-weight: 600;
-        color: #333333;
-    }
+    color: #333333;
   }
 
   .dialog-box {
@@ -433,15 +505,19 @@
       position: absolute;
       left: 50%;
       transform: translate(-50%);
+      bottom: -127px;
     }
 
     .box-top {
       color: #FBA511;
       padding: 26px 212px 17px 61px;
+      background: url('../../../public/images/homeWu/u-bg.png') no-repeat;
     }
 
+    .box-table {
       padding: 26px 14px 40px 66px;
 
+      .table-title {
         margin-bottom: 18px;
 
         span {
@@ -453,10 +529,12 @@
           margin-right: 10px;
         }
       }
+    }
   }
 
   .Recording-info {
     margin-top: 12px;
+    height: 45px;
     border-bottom: 1px solid #ddd;
 
     .info-tit {
@@ -464,12 +542,14 @@
       font-size: 14px;
       font-weight: 400;
       color: #333333;
+      line-height: 40px;
     }
 
     .info-Gold {
       float: right;
       font-size: 18px;
       color: #333333;
+      font-weight: 400;
       line-height: 40px;
 
       img {
@@ -477,8 +557,10 @@
         height: 32px;
         vertical-align: middle;
       }
+    }
   }
 
+  .Ubi-hist {
     margin-top: 15px;
 
     h6 {
@@ -486,20 +568,18 @@
       font-weight: 600;
       color: #333333;
       margin: 0;
+      float: left;
     }
 
     span {
       font-size: 14px;
       font-weight: 600;
       color: #999999;
-      .u-currency{
-          padding:26px 40px;
-          display:flex;
-          overflow-x: auto;
-      }
+    }
   }
 
 
+  .ubi-hear {
     height: 40px;
 
     button {
@@ -515,6 +595,7 @@
       font-size: 14px;
       font-weight: 400;
       color: #333333;
+      line-height: 40px;
     }
 
     h6 {
@@ -525,34 +606,37 @@
       color: #333333;
       font-size: 18px;
       font-weight: 600;
-    .myubi{
-      flex: 1;
-      margin-right: 84px;
-    }
+    }
   }
 
+  .omit {
     padding-left: 20px;
 
     div {
       font-size: 30px;
       line-height: 10px;
       color: #D8D8D8;
+    }
   }
-      width: 100%;
+
   .exp-table {
     //width: 100%;
+    padding-left: 25px;
     padding-right: 20px;
 
+    .table-hear {
       display: flex;
 
       div {
         min-width: 90px;
         font-size: 14px;
         font-weight: 400;
+        color: #999999;
       }
 
       .bm {
         flex: 1;
+        margin-left: 20px;
       }
 
       .jy {
@@ -563,23 +647,27 @@
       }
     }
 
+
   }
 
   .myselftext {
-      width: 100%;
+    height: 75px;
     padding: 0 25px;
+    //width: 100%;
     display: flex;
 
     .myranking {
       flex: 1;
       line-height: 75px;
       font-size: 14px;
+      font-weight: 400;
       color: #666666;
 
       span {
         color: #333;
         font-weight: 600;
         font-size: 18px;
+      }
     }
 
     .myexperience {
@@ -587,6 +675,7 @@
       line-height: 75px;
       margin-left: auto;
       font-size: 14px;
+      font-weight: 400;
       color: #666666;
 
       span {
@@ -594,8 +683,10 @@
         font-weight: 600;
         font-size: 18px;
       }
+    }
   }
 
+  .tab-jy {
     padding-top: 10px;
 
     div {
@@ -608,19 +699,24 @@
       height: 28px;
       background: #F7F8FA;
       border-radius: 14px;
+    }
   }
 
   .tab-bm {
+    line-height: 40px;
   }
 
+  .tab-name {
     display: flex;
     min-width:98px;
     ::v-deep .item-author {
+      min-width: 50px !important;
     }
 
     img {
       width: 40px;
       height: 40px;
+      vertical-align: middle;
     }
 
     span {
@@ -630,6 +726,7 @@
       font-size: 14px;
       font-weight: 600;
     }
+
   }
 
   .tab-rank {
@@ -639,12 +736,15 @@
       width: 40px;
       height: 40px;
 
+    }
   }
 
+  .experience {
     flex: 1;
-      width: 100%;
+
     .exp-hear {
       //width: 100%;
+      height: 65px;
       background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
 
       .exp-hear-text {
@@ -654,6 +754,7 @@
         font-size: 18px;
         font-weight: 600;
         color: #333333;
+        position: relative;
         z-index: 888;
 
         .exp-hear-textbor {
@@ -666,6 +767,7 @@
           left: 0;
           z-index: -1;
           top: 60%;
+        }
       }
 
       .exp-hear-xiala {
@@ -675,7 +777,8 @@
       }
 
     }
-      width: 100%;
+
+    .exp-bar {
 
       //width: 100%;
       h6 {
@@ -683,16 +786,19 @@
         color: #666666;
         font-weight: 600;
         margin: 0;
+        margin-left: 50px;
       }
-         width: 100%;
+
       .exp-barname {
         //width: 100%;
+        padding: 20px 35px;
         display: flex;
 
         span {
           flex: 1;
+        }
       }
-         width: 100%;
+
       .exp-barbox {
         //width: 100%;
         height: 8px;
@@ -700,9 +806,11 @@
         border-radius: 6px;
         margin-left: 25px;
         margin-top: 3px;
+        position: relative;
         z-index: 1;
 
         ::v-deep .el-progress__text {
+          display: none;
         }
 
         .exp-bar-cont {
@@ -717,6 +825,4 @@
         }
       }
 
-
-
     }

src/views/user/ranking.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="padding:26px 40px;display:flex;overflow-x: auto;">
+  <div style="padding:26px 20px;display:flex;overflow-x: auto;">
     <div class="experience" style="margin-right:72px">
           <div class="exp-hear">
            <div class="exp-hear-text">
@@ -27,7 +27,6 @@
              </div>
              <div class="myexperience">
                  我的经验值 :  <span>{{experience.data.total || experience.data.months || experience.data.years || experience.data.weeks}}</span>
-
              </div>
           </div>
           <div class="exp-bar">
@@ -572,7 +571,6 @@ export default {
 }
 .experience{
   min-width: 400px;
-
   .exp-hear{
       width: 100%;
       height: 65px;