From 8d4a6800d8814dfc2a72548a654ded4eea56a6c4 Mon Sep 17 00:00:00 2001
From: zhangsir <z1823137@163.com>
Date: Tue, 6 Aug 2024 17:01:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=97=B6=E9=95=BF=E5=A4=A9=E6=95=B0=E6=8E=92?=
 =?UTF-8?q?=E8=A1=8C=E6=A6=9C=E5=8C=BA=E5=88=86=E5=BD=93=E5=89=8D=E5=92=8C?=
 =?UTF-8?q?=E7=B4=AF=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user/ranking.vue | 1344 ++++++++++++++++++------------------
 1 file changed, 681 insertions(+), 663 deletions(-)

diff --git a/src/views/user/ranking.vue b/src/views/user/ranking.vue
index aac364e8..fc98775c 100644
--- a/src/views/user/ranking.vue
+++ b/src/views/user/ranking.vue
@@ -1,282 +1,284 @@
 <template>
   <div class="page-ranking">
-    
+
     <div class="page-ranking-col experience">
-          <div class="exp-hear">
-           <div class="exp-hear-text">
-                  经验值排行榜
-                  <el-tooltip placement="top"  effect="light">
-                    <div slot="content" style="line-height:13px;">
-                      所有用户经验值TOP排行榜单，通过学习、贡献等行为可以获得经验值 。</br></br>
-                      系统已经根据您在4月23日新系统上线之后产生的学习数据对经验值进行</br>
-                      <span  style="line-height:15px;">了初始化，更早的数据以及老系统中产生的数据，将在2022年底一次性</span></br>
-                      补充到您的经验值中，请您耐心等待。
-                    </div>
-                    <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
-                  </el-tooltip>
-                  <span class="exp-hear-textbor"></span>
-             </div>
-              <div class="exp-hear-xiala">
-                 <el-dropdown trigger="click"  @command="experienceCommand">
+      <div class="exp-hear">
+        <div class="exp-hear-text">
+          经验值排行榜
+          <el-tooltip placement="top"  effect="light">
+            <div slot="content" style="line-height:13px;">
+              所有用户经验值TOP排行榜单，通过学习、贡献等行为可以获得经验值 。</br></br>
+              系统已经根据您在4月23日新系统上线之后产生的学习数据对经验值进行</br>
+              <span  style="line-height:15px;">了初始化，更早的数据以及老系统中产生的数据，将在2022年底一次性</span></br>
+              补充到您的经验值中，请您耐心等待。
+            </div>
+            <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
+          </el-tooltip>
+          <span class="exp-hear-textbor"></span>
+        </div>
+        <div class="exp-hear-xiala">
+          <el-dropdown trigger="click"  @command="experienceCommand">
                     <span class="el-dropdown-link pointer">
                         {{experience.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                     </span>
-                    <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="total">累计</el-dropdown-item>
-                        <el-dropdown-item command="now">当前</el-dropdown-item>
-                        <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
-                        <el-dropdown-item command="months">本月</el-dropdown-item>
-                        <el-dropdown-item command="years">本年</el-dropdown-item> -->
-                    </el-dropdown-menu>
-                </el-dropdown>
-              </div>
-          </div>
-          <div class="myselftext">
-             <div class="myranking">
-                 {{isNow ? '当前' : '累计'}}排名 :  <span> {{currentUserRankingTotalData.rankNo}}</span>
-             </div>
-             <div class="myexperience">
-                {{isNow ? '当前' : '累计'}}经验值 :  <span>{{currentUserRankingTotalData.rankValue}}</span>
-             </div>
-          </div>
-
-
-          <div class="exp-table" style="margin-top:20px;">
-             <div class="table-hear">
-                <div style="margin-left:5px">排名</div>
-                <div style="margin-left:5px">姓名</div>
-                <div class="bm">经验值</div>
-             </div>
-             <div>
-            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(ran,index) in experience.list" :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>
-                 <div class="tab-name">
-                    <author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex"></author-img>
-                    <div>
-                        <span>{{ran.authorInfo.name}}</span>
-                        <div class="tab-bm">{{cutOrgNamePath(ran.authorInfo.orgInfo)}}</div>
-                    </div>
-
-                     </div>
-                 <div class="jy tab-jy">
-                     <div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
-                     <div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.months}}</div>
-                     <div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.years}}</div>
-                     <div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.weeks}}</div>
-                 </div>
-             </div>
-             </div>
-
-             <div v-if="experience.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
-                 <div v-if="experience.data.rankingNo>5" class="omit">
-                     <div>.</div> <div>.</div> <div>.</div>
-                 </div>
-             </div>
-
-
-             <div v-if="experience.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
-                 <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{experience.data.rankingNo}}</div>
-                 <div class="tab-name" v-if="userInfo.aid">
-                    <author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
-                    <div>
-                        <span style="color: #0059FF;">{{userInfo.name}}</span>
-                        <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
-                    </div>
-                </div>
-
-                 <div class="jy tab-jy">
-                     <div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.total}}</div>
-                     <div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.months}}</div>
-                     <div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.years}}</div>
-                     <div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.weeks}}</div>
-                 </div>
-             </div>
-
-          </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="total">累计</el-dropdown-item>
+              <el-dropdown-item command="now">当前</el-dropdown-item>
+              <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
+              <el-dropdown-item command="months">本月</el-dropdown-item>
+              <el-dropdown-item command="years">本年</el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+      <div class="myselftext">
+        <div class="myranking">
+          {{isNow ? '当前' : '累计'}}排名 :  <span> {{currentUserRankingTotalData.rankNo}}</span>
+        </div>
+        <div class="myexperience">
+          {{isNow ? '当前' : '累计'}}经验值 :  <span>{{currentUserRankingTotalData.rankValue}}</span>
+        </div>
       </div>
 
+
+      <div class="exp-table" style="margin-top:20px;">
+        <div class="table-hear">
+          <div style="margin-left:5px">排名</div>
+          <div style="margin-left:5px">姓名</div>
+          <div class="bm">经验值</div>
+        </div>
+        <div>
+          <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(ran,index) in experience.list" :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>
+            <div class="tab-name">
+              <author-img :avatar="ran.authorInfo.avatar" :aid="ran.authorInfo.aid" :sex="ran.authorInfo.sex"></author-img>
+              <div>
+                <span>{{ran.authorInfo.name}}</span>
+                <div class="tab-bm">{{cutOrgNamePath(ran.authorInfo.orgInfo)}}</div>
+              </div>
+
+            </div>
+            <div class="jy tab-jy">
+              <div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.total}}</div>
+              <div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.months}}</div>
+              <div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.years}}</div>
+              <div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{ran.weeks}}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="experience.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
+          <div v-if="experience.data.rankingNo>5" class="omit">
+            <div>.</div> <div>.</div> <div>.</div>
+          </div>
+        </div>
+
+
+        <div v-if="experience.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+          <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{experience.data.rankingNo}}</div>
+          <div class="tab-name" v-if="userInfo.aid">
+            <author-img :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
+            <div>
+              <span style="color: #0059FF;">{{userInfo.name}}</span>
+              <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
+            </div>
+          </div>
+
+          <div class="jy tab-jy">
+            <div v-if="experience.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.total}}</div>
+            <div v-if="experience.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.months}}</div>
+            <div v-if="experience.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.years}}</div>
+            <div v-if="experience.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{experience.data.weeks}}</div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
     <div class="page-ranking-col Duration">
-           <div class="exp-hear">
-              <div class="exp-hear-text">
-                  学习时长排行榜
-                  <el-tooltip placement="top"  effect="light">
-                    <div slot="content">所有用户学习时长TOP排行榜单，统计单位为小时</div>
-                    <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
-                  </el-tooltip>
-                  <span class="exp-hear-textbor"></span>
-             </div>
-              <div class="exp-hear-xiala">
-                 <el-dropdown trigger="click" @command="durationCommand">
+      <div class="exp-hear">
+        <div class="exp-hear-text">
+          学习时长排行榜
+          <el-tooltip placement="top"  effect="light">
+            <div slot="content">所有用户学习时长TOP排行榜单，统计单位为小时</div>
+            <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
+          </el-tooltip>
+          <span class="exp-hear-textbor"></span>
+        </div>
+        <div class="exp-hear-xiala">
+          <el-dropdown trigger="click" @command="durationCommand">
                     <span class="el-dropdown-link pointer">
                         {{learningDuration.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                     </span>
-                    <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="total">累计</el-dropdown-item>
-                        <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
-                        <el-dropdown-item command="months">本月</el-dropdown-item>
-                        <el-dropdown-item command="years">本年</el-dropdown-item> -->
-                    </el-dropdown-menu>
-                </el-dropdown>
-              </div>
-          </div>
-          <div class="myselftext">
-             <div class="myranking">
-                 当前排名 :  <span> {{learningDurationTotalData.rankNo}}</span>
-             </div>
-             <div class="myexperience">
-                 累计学习时长:  <span> {{formatSecondToHour(learningDurationTotalData.rankValue)}}</span> h
-             </div>
-          </div>
-           <div class="exp-table" style="margin-top:20px;">
-             <div class="table-hear">
-                <div style="margin-left:5px">排名</div>
-                <div style="margin-left:5px">姓名</div>
-                <div style="margin-left:25%;">学习时长:小时</div>
-             </div>
-             <div>
-            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(lan,idx) in learningDuration.list" :key="lan.id">
-                 <div class="tab-rank">
-                    <img v-if="idx ==0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
-                    <img v-if="idx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
-                    <img v-if="idx ==2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
-                    <div v-if="idx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{idx+1}}</div>
-                </div>
-                 <div class="tab-name">
-                    <author-img :avatar="lan.authorInfo.avatar" :aid="lan.authorInfo.aid" :sex="lan.authorInfo.sex"></author-img>
-                    <div>
-                        <span>{{lan.authorInfo.name}}</span>
-                        <div class="tab-bm">{{cutOrgNamePath(lan.authorInfo.orgInfo)}}</div>
-                    </div>
-                </div>
-                 <div class="jy tab-jy">
-                     <div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.total)}}</div>
-                     <div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.months)}}</div>
-                     <div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.years)}}</div>
-                     <div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.weeks)}}</div>
-                 </div>
-             </div>
-             </div>
-
-             <div v-if="learningDuration.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
-                 <div v-if="learningDuration.data.rankingNo>5" class="omit">
-                     <div>.</div> <div>.</div> <div>.</div>
-                 </div>
-             </div>
-
-             <div v-if="learningDuration.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
-                 <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDuration.data.rankingNo}}</div>
-                 <div class="tab-name" v-if="userInfo.aid">
-                    <author-img  :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
-                    <div>
-                        <span style="color: #0059FF;">{{userInfo.name}}</span>
-                        <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
-                    </div>
-                </div>
-                 <div class="jy tab-jy">
-                     <div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.total)}}</div>
-                     <div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.months)}}</div>
-                     <div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.years)}}</div>
-                     <div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.weeks)}}</div>
-                 </div>
-             </div>
-          </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="total">累计</el-dropdown-item>
+              <el-dropdown-item command="now">当前</el-dropdown-item>
+              <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
+              <el-dropdown-item command="months">本月</el-dropdown-item>
+              <el-dropdown-item command="years">本年</el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </div>
-      
+      <div class="myselftext">
+        <div class="myranking">
+          {{isStudyTime ? '当前' : '累计'}}排名 :  <span> {{learningDurationTotalData.rankNo}}</span>
+        </div>
+        <div class="myexperience">
+          {{isStudyTime ? '当前' : '累计'}}学习时长:  <span> {{formatSecondToHour(learningDurationTotalData.rankValue)}}</span> h
+        </div>
+      </div>
+      <div class="exp-table" style="margin-top:20px;">
+        <div class="table-hear">
+          <div style="margin-left:5px">排名</div>
+          <div style="margin-left:5px">姓名</div>
+          <div style="margin-left:25%;">学习时长:小时</div>
+        </div>
+        <div>
+          <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(lan,idx) in learningDuration.list" :key="lan.id">
+            <div class="tab-rank">
+              <img v-if="idx ==0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
+              <img v-if="idx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
+              <img v-if="idx ==2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
+              <div v-if="idx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{idx+1}}</div>
+            </div>
+            <div class="tab-name">
+              <author-img :avatar="lan.authorInfo.avatar" :aid="lan.authorInfo.aid" :sex="lan.authorInfo.sex"></author-img>
+              <div>
+                <span>{{lan.authorInfo.name}}</span>
+                <div class="tab-bm">{{cutOrgNamePath(lan.authorInfo.orgInfo)}}</div>
+              </div>
+            </div>
+            <div class="jy tab-jy">
+              <div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.total)}}</div>
+              <div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.months)}}</div>
+              <div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.years)}}</div>
+              <div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{formatSecondToHour(lan.weeks)}}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="learningDuration.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
+          <div v-if="learningDuration.data.rankingNo>5" class="omit">
+            <div>.</div> <div>.</div> <div>.</div>
+          </div>
+        </div>
+
+        <div v-if="learningDuration.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+          <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDuration.data.rankingNo}}</div>
+          <div class="tab-name" v-if="userInfo.aid">
+            <author-img  :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
+            <div>
+              <span style="color: #0059FF;">{{userInfo.name}}</span>
+              <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
+            </div>
+          </div>
+          <div class="jy tab-jy">
+            <div v-if="learningDuration.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.total)}}</div>
+            <div v-if="learningDuration.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.months)}}</div>
+            <div v-if="learningDuration.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.years)}}</div>
+            <div v-if="learningDuration.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{formatSecondToHour(learningDuration.data.weeks)}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
 
     <div class="page-ranking-col Duration">
-           <div class="exp-hear study-info">
-              <div class="exp-hear-text">
-                  学习天数排行榜
-                  <el-tooltip placement="top"  effect="light">
-                    <div slot="content">所有用户学习天数TOP排行榜单，每活跃学习1天可累计学习天数</div>
-                    <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
-                  </el-tooltip>
-                  <span class="exp-hear-textbor" style="background:#f1b48f !important"></span>
-             </div>
-              <div class="exp-hear-xiala">
-                 <el-dropdown trigger="click" @command="daysCommand">
+      <div class="exp-hear study-info">
+        <div class="exp-hear-text">
+          学习天数排行榜
+          <el-tooltip placement="top"  effect="light">
+            <div slot="content">所有用户学习天数TOP排行榜单，每活跃学习1天可累计学习天数</div>
+            <svg-icon style="margin-left: 14px;font-size:20px;padding-top: 4px;" icon-class="doubt"></svg-icon>
+          </el-tooltip>
+          <span class="exp-hear-textbor" style="background:#f1b48f !important"></span>
+        </div>
+        <div class="exp-hear-xiala">
+          <el-dropdown trigger="click" @command="daysCommand">
                     <span class="el-dropdown-link pointer">
                         {{learningDays.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                     </span>
-                    <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item command="total">累计</el-dropdown-item>
-                        <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
-                        <el-dropdown-item command="months">本月</el-dropdown-item>
-                        <el-dropdown-item command="years">本年</el-dropdown-item> -->
-                    </el-dropdown-menu>
-                </el-dropdown>
-              </div>
-          </div>
-          <div class="myselftext">
-             <div class="myranking">
-                 当前排名 :  <span> {{learningDaysTotalData.rankNo}}</span>
-             </div>
-             <div class="myexperience">
-                 累计学习天数 :  <span>{{learningDaysTotalData.rankValue}}</span>
-             </div>
-          </div>
-           <div class="exp-table" style="margin-top:20px;">
-             <div class="table-hear">
-                <div style="margin-left:5px">排名</div>
-                <div style="margin-left:5px">姓名</div>
-                <div style="margin-left:41%;">学习天数</div>
-             </div>
-             <div>
-            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(day,inx) in learningDays.list" :key="day.id">
-                 <div class="tab-rank" >
-                    <img v-if="inx ==0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
-                    <img v-if="inx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
-                    <img v-if="inx ==2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
-                    <div v-if="inx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{inx+1}}</div>
-                </div>
-                 <div class="tab-name">
-                    <author-img :avatar="day.authorInfo.avatar" :aid="day.authorInfo.aid" :sex="day.authorInfo.sex"></author-img>
-                    <div>
-                        <span>{{day.authorInfo.name}}</span>
-                        <div class="tab-bm">{{cutOrgNamePath(day.authorInfo.orgInfo)}}</div>
-                    </div>
-                </div>
-
-                 <div class="jy tab-jy">
-                     <div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.total}}</div>
-                     <div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.weeks}}</div>
-                     <div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.months}}</div>
-                     <div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.years}}</div>
-                 </div>
-             </div>
-             </div>
-
-             <div v-if="learningDays.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
-                 <div v-if="learningDays.data.rankingNo>5" class="omit">
-                     <div>.</div> <div>.</div> <div>.</div>
-                 </div>
-             </div>
-
-
-             <div v-if="learningDays.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
-                 <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDays.data.rankingNo}}</div>
-                 <div class="tab-name" v-if="userInfo.aid">
-                    <author-img  :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
-                    <div>
-                        <span style="color: #0059FF;">{{userInfo.name}}</span>
-                        <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
-                    </div>
-                </div>
-
-                 <div class="jy tab-jy">
-                     <div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.total}}</div>
-                     <div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.weeks}}</div>
-                     <div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.months}}</div>
-                     <div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.years}}</div>
-                 </div>
-             </div>
-          </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item command="total">累计</el-dropdown-item>
+              <el-dropdown-item command="now">当前</el-dropdown-item>
+              <!-- <el-dropdown-item command="weeks">本周</el-dropdown-item>
+              <el-dropdown-item command="months">本月</el-dropdown-item>
+              <el-dropdown-item command="years">本年</el-dropdown-item> -->
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
       </div>
+      <div class="myselftext">
+        <div class="myranking">
+          {{isStudyDay ? '当前' : '累计'}}排名 :  <span> {{learningDaysTotalData.rankNo}}</span>
+        </div>
+        <div class="myexperience">
+          {{isStudyDay ? '当前' : '累计'}}学习天数 :  <span>{{learningDaysTotalData.rankValue}}</span>
+        </div>
+      </div>
+      <div class="exp-table" style="margin-top:20px;">
+        <div class="table-hear">
+          <div style="margin-left:5px">排名</div>
+          <div style="margin-left:5px">姓名</div>
+          <div style="margin-left:41%;">学习天数</div>
+        </div>
+        <div>
+          <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px" v-for="(day,inx) in learningDays.list" :key="day.id">
+            <div class="tab-rank" >
+              <img v-if="inx ==0" :src="`${webBaseUrl}/images/rank1.png`" alt=""/>
+              <img v-if="inx ==1" :src="`${webBaseUrl}/images/rank2.png`" alt=""/>
+              <img v-if="inx ==2" :src="`${webBaseUrl}/images/rank3.png`" alt=""/>
+              <div v-if="inx >2" style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">{{inx+1}}</div>
+            </div>
+            <div class="tab-name">
+              <author-img :avatar="day.authorInfo.avatar" :aid="day.authorInfo.aid" :sex="day.authorInfo.sex"></author-img>
+              <div>
+                <span>{{day.authorInfo.name}}</span>
+                <div class="tab-bm">{{cutOrgNamePath(day.authorInfo.orgInfo)}}</div>
+              </div>
+            </div>
+
+            <div class="jy tab-jy">
+              <div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.total}}</div>
+              <div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.weeks}}</div>
+              <div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.months}}</div>
+              <div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;">{{day.years}}</div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="learningDays.data.rankingNo>5" style="margin-top:20px;border-bottom: 1px solid #ddd;padding-bottom:40px">
+          <div v-if="learningDays.data.rankingNo>5" class="omit">
+            <div>.</div> <div>.</div> <div>.</div>
+          </div>
+        </div>
+
+
+        <div v-if="learningDays.data.rankingNo>5" class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+          <div style="color: #0059FF;line-height: 40px;padding-left:14px;font-size: 16px;" class="tab-rank" >{{learningDays.data.rankingNo}}</div>
+          <div class="tab-name" v-if="userInfo.aid">
+            <author-img  :avatar="userInfo.avatar" :aid="userInfo.aid" :sex="userInfo.sex"></author-img>
+            <div>
+              <span style="color: #0059FF;">{{userInfo.name}}</span>
+              <div class="tab-bm" style="color: #0059FF;">{{cutOrgNamePath(userInfo.departFullName)}}</div>
+            </div>
+          </div>
+
+          <div class="jy tab-jy">
+            <div v-if="learningDays.field == 'total'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.total}}</div>
+            <div v-if="learningDays.field == 'weeks'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.weeks}}</div>
+            <div v-if="learningDays.field == 'months'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.months}}</div>
+            <div v-if="learningDays.field == 'years'" style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">{{learningDays.data.years}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
 
 
 
@@ -284,66 +286,68 @@
 </template>
 
 <script>
-    import apiUser from "@/api/system/user.js";
-    import apiStat from '@/api/phase2/stat.js';
-    import { mapGetters } from 'vuex';
-    import authorImg from '@/components/Portal/authorImg.vue';
-    import {translate,experienceValue,formatSecondToHour,cutOrgNamePath} from "@/utils/tools.js";
+import apiUser from "@/api/system/user.js";
+import apiStat from '@/api/phase2/stat.js';
+import { mapGetters } from 'vuex';
+import authorImg from '@/components/Portal/authorImg.vue';
+import {translate,experienceValue,formatSecondToHour,cutOrgNamePath} from "@/utils/tools.js";
 export default {
-    computed: {
-      ...mapGetters(['userInfo']),
+  computed: {
+    ...mapGetters(['userInfo']),
 
-      },
-      components: {authorImg},
+  },
+  components: {authorImg},
   data(){
-      return{
-        experienceValue,
-        cutOrgNamePath:cutOrgNamePath,
-        current:{},
-        currentUserRankingTotalData:{
-          rankNo:0, // 经验值累计排名
-          rankValue:0 ,// 经验值累计,
-          endValue:0 // 累计经验值进度条最大值
+    return{
+      experienceValue,
+      cutOrgNamePath:cutOrgNamePath,
+      current:{},
+      currentUserRankingTotalData:{
+        rankNo:0, // 经验值累计排名
+        rankValue:0 ,// 经验值累计,
+        endValue:0 // 累计经验值进度条最大值
+      },
+      translate,
+      formatSecondToHour:formatSecondToHour,
+      experience:{
+        field:'total',
+        name:'累计',
+        data:{
+          rankingNo:0,
+          total:0
         },
-        translate,
-        formatSecondToHour:formatSecondToHour,
-        experience:{
-            field:'total',
-            name:'累计',
-            data:{
-                rankingNo:0,
-                total:0
-            },
-            list:[],
+        list:[],
+      },
+      learningDuration:{
+        field:'total',
+        name:'累计',
+        data:{
+          rankingNo:0,
+          total:0
         },
-        learningDuration:{
-            field:'total',
-            name:'累计',
-            data:{
-                rankingNo:0,
-                total:0
-            },
-            list:[],
+        list:[],
+      },
+      learningDurationTotalData:{
+        rankNo:0, // 学习时长累计排名
+        rankValue:0  // 累计学习时长
+      },
+      learningDaysTotalData:{
+        rankNo:0, // 学习天数累计排名
+        rankValue:0  // 累计学习天数
+      },
+      learningDays:{
+        field:'total',
+        name:'累计',
+        data:{
+          rankingNo:0,
+          total:0
         },
-        learningDurationTotalData:{
-          rankNo:0, // 学习时长累计排名
-          rankValue:0  // 累计学习时长
-        },
-        learningDaysTotalData:{
-          rankNo:0, // 学习天数累计排名
-          rankValue:0  // 累计学习天数
-        },
-        learningDays:{
-            field:'total',
-            name:'累计',
-            data:{
-                rankingNo:0,
-                total:0
-            },
-            list:[],
-        },
-        isNow: false,
-      }
+        list:[],
+      },
+      isNow: false,
+      isStudyTime: false,
+      isStudyDay: false,
+    }
   },
   mounted() {
     this.getExperience();
@@ -354,390 +358,404 @@ export default {
 
     // 经验值排行榜（下拉框事件）
     experienceCommand(e) {
-        this.isNow = false
-        this.experience.field = e;
-        this.experience.name = this.translate(e)
-        this.getExperience();
+      this.isNow = false
+      this.experience.field = e;
+      this.experience.name = this.translate(e)
+      this.getExperience();
     },
     // 学习时长（下拉框事件）
     durationCommand(e) {
-        this.learningDuration.field = e;
-        this.learningDuration.name = this.translate(e)
-        this.getDuration();
+      this.isStudyTime = false
+      this.learningDuration.field = e;
+      this.learningDuration.name = this.translate(e)
+      this.getDuration();
     },
     // 学习天数（下拉框事件）
     daysCommand(e) {
-        this.learningDays.field = e;
-        this.learningDays.name = this.translate(e)
-        this.getDays();
+      this.isStudyDay = false
+      this.learningDays.field = e;
+      this.learningDays.name = this.translate(e)
+      this.getDays();
     },
     getExperience() {//经验值
-  let data = {
-      aid:this.userInfo.aid,// #用户id
-      statType:21, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
-      field:this.experience.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
-      num:5,//  #显示的条数
-  }
-  if(data.field == 'now'){
-    data.statType = 20
-    data.field = 'total'
-    this.experience.field = 'total'
-    this.isNow = true
-  }
-  apiStat.getRanking(data).then(res=>{
-      if(res.status==200){
+      let data = {
+        aid:this.userInfo.aid,// #用户id
+        statType:21, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
+        field:this.experience.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
+        num:5,//  #显示的条数
+      }
+      if(data.field == 'now'){
+        data.statType = 20
+        data.field = 'total'
+        this.experience.field = 'total'
+        this.isNow = true
+      }
+      apiStat.getRanking(data).then(res=>{
+        if(res.status==200){
           if(res.result.currentUserRankingData) {
-              res.result.currentUserRankingData.authorInfo={
-                  aid: "",
-                  name: "",
-                  orgInfo: "",
-                  avatar: "",
-                  sex: null
-              }
-              this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
-              this.experience.data = res.result.currentUserRankingData;
-              if(this.experience.field == 'total') {
-                this.current = this.experienceValue(res.result.currentUserRankingData.total);
-                this.currentUserRankingTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
-                this.currentUserRankingTotalData.rankValue = res.result.currentUserRankingData.total;
-                this.currentUserRankingTotalData.endValue = this.current.endValue;
-              }
-          }
-          this.current.total=res.result.currentUserRankingData.total;//当前用户的经验值是固定的
-         const ids= [];
-         res.result.rankingData.forEach(item=>{
-          ids.push(item.aid)
-          item.authorInfo = {
+            res.result.currentUserRankingData.authorInfo={
               aid: "",
               name: "",
               orgInfo: "",
               avatar: "",
               sex: null
+            }
+            this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
+            this.experience.data = res.result.currentUserRankingData;
+            if(this.experience.field == 'total') {
+              this.current = this.experienceValue(res.result.currentUserRankingData.total);
+              this.currentUserRankingTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
+              this.currentUserRankingTotalData.rankValue = res.result.currentUserRankingData.total;
+              this.currentUserRankingTotalData.endValue = this.current.endValue;
+            }
           }
-         })
-         this.getUserData(ids,res.result.rankingData)
-         this.experience.list = res.result.rankingData;
-      }
-  })
+          this.current.total=res.result.currentUserRankingData.total;//当前用户的经验值是固定的
+          const ids= [];
+          res.result.rankingData.forEach(item=>{
+            ids.push(item.aid)
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              sex: null
+            }
+          })
+          this.getUserData(ids,res.result.rankingData)
+          this.experience.list = res.result.rankingData;
+        }
+      })
     },
     getDuration() {//学习时长
       let data = {
-          aid:this.userInfo.aid,// #用户id
-          statType:10, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
-          field:this.learningDuration.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
-          num:5,//  #显示的条数
+        aid:this.userInfo.aid,// #用户id
+        statType:10, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
+        field:this.learningDuration.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
+        num:5,//  #显示的条数
+      }
+      if(data.field == 'now'){
+        data.statType = 12
+        data.field = 'total'
+        this.experience.field = 'total'
+        this.isStudyTime = true
       }
       apiStat.getRanking(data).then(res=>{
-          if(res.status==200){
-              if(res.result.currentUserRankingData) {
-                  res.result.currentUserRankingData.authorInfo={
-                      aid: "",
-                      name: "",
-                      orgInfo: "",
-                      avatar: "",
-                      sex: null
-                  }
-                  this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
-                  this.learningDuration.data = res.result.currentUserRankingData;
-                  if(data.field == 'total'){
-                    this.learningDurationTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
-                    this.learningDurationTotalData.rankValue = res.result.currentUserRankingData.total;
-                  }
-              }
-
-
-             const ids= [];
-             res.result.rankingData.forEach(item=>{
-              ids.push(item.aid)
-              item.authorInfo = {
-                  aid: "",
-                  name: "",
-                  orgInfo: "",
-                  avatar: "",
-                  sex: null
-              }
-             })
-             this.getUserData(ids,res.result.rankingData)
-             this.learningDuration.list = res.result.rankingData;
+        if(res.status==200){
+          if(res.result.currentUserRankingData) {
+            res.result.currentUserRankingData.authorInfo={
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              sex: null
+            }
+            this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData])
+            this.learningDuration.data = res.result.currentUserRankingData;
+            if(data.field == 'total'){
+              this.learningDurationTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
+              this.learningDurationTotalData.rankValue = res.result.currentUserRankingData.total;
+            }
           }
+
+
+          const ids= [];
+          res.result.rankingData.forEach(item=>{
+            ids.push(item.aid)
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              sex: null
+            }
+          })
+          this.getUserData(ids,res.result.rankingData)
+          this.learningDuration.list = res.result.rankingData;
+        }
       })
     },
     //学习天数
     getDays() {
       let data = {
-          aid:this.userInfo.aid,// #用户id
-          statType:11, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
-          field:this.learningDays.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
-          num:5,//  #显示的条数
+        aid:this.userInfo.aid,// #用户id
+        statType:11, // #统计类型  10学习时长 11 学习天数 20表经验值 30表u币 40表获取天数
+        field:this.learningDays.field,// #统计周期 todays-当天,weeks-周,months-月,years-年 total-总计
+        num:5,//  #显示的条数
+      }
+      if(data.field == 'now'){
+        data.statType = 13
+        data.field = 'total'
+        this.experience.field = 'total'
+        this.isStudyDay = true
       }
       apiStat.getRanking(data).then(res=>{
-          if(res.status==200){
-              if(res.result.currentUserRankingData) {
-                  res.result.currentUserRankingData.authorInfo={
-                      aid: "",
-                      name: "",
-                      orgInfo: "",
-                      avatar: "",
-                      sex: null
-                  }
-                  this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData]);
-                  this.learningDays.data = res.result.currentUserRankingData;
-                  if(data.field == 'total'){
-                    this.learningDaysTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
-                    this.learningDaysTotalData.rankValue = res.result.currentUserRankingData.total;
-                  }
-              }
-
-             const ids= [];
-             res.result.rankingData.forEach(item=>{
-              ids.push(item.aid)
-              item.authorInfo = {
-                  aid: "",
-                  name: "",
-                  orgInfo: "",
-                  avatar: "",
-                  sex: null
-              }
-             })
-             this.getUserData(ids,res.result.rankingData)
-             this.learningDays.list = res.result.rankingData;
+        if(res.status==200){
+          if(res.result.currentUserRankingData) {
+            res.result.currentUserRankingData.authorInfo={
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              sex: null
+            }
+            this.getUserData([res.result.currentUserRankingData.aid],[res.result.currentUserRankingData]);
+            this.learningDays.data = res.result.currentUserRankingData;
+            if(data.field == 'total'){
+              this.learningDaysTotalData.rankNo = res.result.currentUserRankingData.rankingNo;
+              this.learningDaysTotalData.rankValue = res.result.currentUserRankingData.total;
+            }
           }
+
+          const ids= [];
+          res.result.rankingData.forEach(item=>{
+            ids.push(item.aid)
+            item.authorInfo = {
+              aid: "",
+              name: "",
+              orgInfo: "",
+              avatar: "",
+              sex: null
+            }
+          })
+          this.getUserData(ids,res.result.rankingData)
+          this.learningDays.list = res.result.rankingData;
+        }
       })
     },
     getUserData(ids,list) {
-                const noReapetIds = [...new Set(ids)];
-                apiUser.getByIds(noReapetIds).then(res => {
-                    if (res.status == 200) {
-                        list.forEach((item, index) => {
-                            res.result.some(author => {
-                            if (author.aid == item.aid) {
-                                item.authorInfo = author;
-                                return true;
-                            } else {
-                                return false;
-                            }
-                        });
-                    });
-                    } else {
-                    this.$message.error(res.message);
-                    }
-                });
+      const noReapetIds = [...new Set(ids)];
+      apiUser.getByIds(noReapetIds).then(res => {
+        if (res.status == 200) {
+          list.forEach((item, index) => {
+            res.result.some(author => {
+              if (author.aid == item.aid) {
+                item.authorInfo = author;
+                return true;
+              } else {
+                return false;
+              }
+            });
+          });
+        } else {
+          this.$message.error(res.message);
+        }
+      });
     },
-}
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-  //只是控制布局
-  .page-ranking{
-    padding:15px 18px;
-    display:flex;
-    overflow-x: auto;
-  }
-  ::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
-        background-color: #fff !important;
-        color: #0059FF !important;
-    }
-  ::v-deep.el-dropdown-menu {
-      border: none !important;
-  }
-  .page-ranking-col{
-     min-width: 430px;
-     //padding-right:30px;
-     padding-right: 5%;
-  }
+//只是控制布局
+.page-ranking{
+  padding:15px 18px;
+  display:flex;
+  overflow-x: auto;
+}
+::v-deep .el-dropdown-menu__item:not(.is-disabled):hover{
+  background-color: #fff !important;
+  color: #0059FF !important;
+}
+::v-deep.el-dropdown-menu {
+  border: none !important;
+}
+.page-ranking-col{
+  min-width: 430px;
+  //padding-right:30px;
+  padding-right: 5%;
+}
 
 .omit{
   padding-left: 13px;
   div{
-      font-size: 30px;
-      line-height: 10px;
-      color: #D8D8D8;
+    font-size: 30px;
+    line-height: 10px;
+    color: #D8D8D8;
   }
 }
 .exp-table{
-      //width: 100%;
-      padding-left: 25px;
-      padding-right: 10px;
-      .table-hear{
-         display: flex;
-        div{
-        //  margin-right: 13%;
-         min-width: 60px;
-         font-size: 14px;
-         font-weight: 400;
-         color: #999999;
-       }
-      .bm{
-        //   flex: 1;
-          margin-left: 46%;
-        // float: right;
-      }
-      .jy{
-          margin-left: auto;
-          text-align: right;
-          margin-right: 0;
-          text-align: center;
-      }
-      }
-
-
-  }
- .myselftext{
-      height: 75px;
-      padding: 0 25px;
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      .myranking{
-        //   flex: 1;
-          line-height: 75px;
-          font-size: 14px;
-          font-weight: 400;
-          color: #666666;
-          span{
-              color: #333;
-              font-weight: 600;
-              font-size: 18px;
-          }
-      }
-      .myexperience{
-        //   text-align: right;
-          line-height: 75px;
-        //   margin-left: auto;
-          font-size: 14px;
-          font-weight: 400;
-          color: #666666;
-          span{
-              color: #333;
-              font-weight: 600;
-              font-size: 18px;
-          }
-      }
-  }
-.tab-jy{
-    padding-top: 10px;
-    padding-right: 10px;
+  //width: 100%;
+  padding-left: 25px;
+  padding-right: 10px;
+  .table-hear{
+    display: flex;
     div{
-        line-height: 28px;
-        width: 70px;
-        text-align: center;
-        font-size: 18px;
-        color: #333333;
-        font-weight: 600;
-        height: 28px;
-        background: #F7F8FA;
-        border-radius: 14px;
+      //  margin-right: 13%;
+      min-width: 60px;
+      font-size: 14px;
+      font-weight: 400;
+      color: #999999;
     }
+    .bm{
+      //   flex: 1;
+      margin-left: 46%;
+      // float: right;
+    }
+    .jy{
+      margin-left: auto;
+      text-align: right;
+      margin-right: 0;
+      text-align: center;
+    }
+  }
+
+
+}
+.myselftext{
+  height: 75px;
+  padding: 0 25px;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  .myranking{
+    //   flex: 1;
+    line-height: 75px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #666666;
+    span{
+      color: #333;
+      font-weight: 600;
+      font-size: 18px;
+    }
+  }
+  .myexperience{
+    //   text-align: right;
+    line-height: 75px;
+    //   margin-left: auto;
+    font-size: 14px;
+    font-weight: 400;
+    color: #666666;
+    span{
+      color: #333;
+      font-weight: 600;
+      font-size: 18px;
+    }
+  }
+}
+.tab-jy{
+  padding-top: 10px;
+  padding-right: 10px;
+  div{
+    line-height: 28px;
+    width: 70px;
+    text-align: center;
+    font-size: 18px;
+    color: #333333;
+    font-weight: 600;
+    height: 28px;
+    background: #F7F8FA;
+    border-radius: 14px;
+  }
 }
 .tab-bm{
-    font-size: 12px !important;
-    color: #666666;
-    margin-top: 7px;
+  font-size: 12px !important;
+  color: #666666;
+  margin-top: 7px;
 }
 .exp-table .table-hear div{
-    min-width: 65px !important;
+  min-width: 65px !important;
 }
 .tab-name{
-    min-width: 65px;
-    display: flex;
-    ::v-deep .item-author{
-        min-width: 54px !important;
-    }
-    img{
-        width: 40px;
-        height: 40px;
-        vertical-align: middle;
-    }
-    span{
-        color: #333333;
-        font-size: 14px;
-        font-weight: 600;
-    }
+  min-width: 65px;
+  display: flex;
+  ::v-deep .item-author{
+    min-width: 54px !important;
+  }
+  img{
+    width: 40px;
+    height: 40px;
+    vertical-align: middle;
+  }
+  span{
+    color: #333333;
+    font-size: 14px;
+    font-weight: 600;
+  }
 
 }
 .tab-rank{
-    width: 54px;
-    img{
-         width: 40px;
-         height: 40px;
+  width: 54px;
+  img{
+    width: 40px;
+    height: 40px;
 
-    }
+  }
 }
 .experience{
   .exp-hear{
-      //width: 100%;
-      height: 65px;
-      background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
-      .exp-hear-text{
-          float: left;
-          line-height: 65px;
-          margin-left: 25px;
-          font-size: 18px;
-          font-weight: 600;
-          color: #333333;
-          position: relative;
-          z-index: 888;
-          .exp-hear-textbor{
-            width: 108px;
-            height: 10px;
-            background: #9CC7FC;
-            border-radius: 9px;
-            display: inline-block;
-            position: absolute;
-            left: 0;
-            z-index: -1;
-            top: 60%;
-          }
-      }
-      .exp-hear-xiala{
-          line-height: 65px;
-          float: right;
-          margin-right: 15px;
+    //width: 100%;
+    height: 65px;
+    background: url('../../../public/images/expbg.png') no-repeat 100% / 100%;
+    .exp-hear-text{
+      float: left;
+      line-height: 65px;
+      margin-left: 25px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #333333;
+      position: relative;
+      z-index: 888;
+      .exp-hear-textbor{
+        width: 108px;
+        height: 10px;
+        background: #9CC7FC;
+        border-radius: 9px;
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        z-index: -1;
+        top: 60%;
       }
+    }
+    .exp-hear-xiala{
+      line-height: 65px;
+      float: right;
+      margin-right: 15px;
+    }
 
   }
 
   .exp-bar{
+    //width: 100%;
+    h6{
+      font-size: 14px;
+      color: #666666;
+      font-weight: 600;
+      margin: 0;
+      margin-left: 50px;
+    }
+    .exp-barname{
       //width: 100%;
-      h6{
-           font-size: 14px;
-            color: #666666;
-            font-weight: 600;
-            margin: 0;
-            margin-left: 50px;
-     }
-     .exp-barname{
-         //width: 100%;
-         padding: 20px 35px;
-         display: flex;
-         span{
-             flex: 1;
-         }
-     }
-     .exp-barbox{
-         //width: 100%;
-         height: 8px;
-        //  background: #ECF1FE;
-         border-radius: 6px;
-         margin-left: 25px;
-         margin-top: 3px;
-         position: relative;
-         z-index: 1;
-         ::v-deep .el-progress__text{
-            display: none;
-         }
-         .exp-bar-cont{
-             width: 230px;
-             height: 6px;
-             background: #0059FF;
-             border-radius: 6px;
-             opacity: 0.56;
-             position: absolute;
-             left: 0;
-             z-index: 999;
-         }
-     }
+      padding: 20px 35px;
+      display: flex;
+      span{
+        flex: 1;
+      }
+    }
+    .exp-barbox{
+      //width: 100%;
+      height: 8px;
+      //  background: #ECF1FE;
+      border-radius: 6px;
+      margin-left: 25px;
+      margin-top: 3px;
+      position: relative;
+      z-index: 1;
+      ::v-deep .el-progress__text{
+        display: none;
+      }
+      .exp-bar-cont{
+        width: 230px;
+        height: 6px;
+        background: #0059FF;
+        border-radius: 6px;
+        opacity: 0.56;
+        position: absolute;
+        left: 0;
+        z-index: 999;
+      }
+    }
 
 
   }
@@ -745,39 +763,39 @@ export default {
 .Duration{
 
   .study-info{
-      height: 62px !important;
-      background: url('../../../public/images/study-info.png') no-repeat 100% / 100% !important;
+    height: 62px !important;
+    background: url('../../../public/images/study-info.png') no-repeat 100% / 100% !important;
   }
   .exp-hear{
-      //width: 100%;
-      height: 62px;
-      background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
-      .exp-hear-text{
-          float: left;
-          line-height: 62px;
-          margin-left: 25px;
-          font-size: 18px;
-          font-weight: 600;
-          color: #333333;
-          position: relative;
-          z-index: 888;
-          .exp-hear-textbor{
-            width: 130px;
-            height: 10px;
-            background: #FDAFB3 ;
-            border-radius: 9px;
-            display: inline-block;
-            position: absolute;
-            left: 0;
-            z-index: -1;
-            top: 60%;
-          }
-      }
-      .exp-hear-xiala{
-          line-height: 65px;
-          float: right;
-          margin-right: 15px;
+    //width: 100%;
+    height: 62px;
+    background: url('../../../public/images/Durbg.png') no-repeat 100% / 100%;
+    .exp-hear-text{
+      float: left;
+      line-height: 62px;
+      margin-left: 25px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #333333;
+      position: relative;
+      z-index: 888;
+      .exp-hear-textbor{
+        width: 130px;
+        height: 10px;
+        background: #FDAFB3 ;
+        border-radius: 9px;
+        display: inline-block;
+        position: absolute;
+        left: 0;
+        z-index: -1;
+        top: 60%;
       }
+    }
+    .exp-hear-xiala{
+      line-height: 65px;
+      float: right;
+      margin-right: 15px;
+    }
 
   }
 }