课程评论回复

2025-12-12 04:16:45 +08:00 · 2022-09-23 19:01:44 +08:00
parent 14a5ec636e
commit c4bd52783d
8 changed files with 314 additions and 132 deletions
--- a/src/api/phase2/note.js
+++ b/src/api/phase2/note.js
@@ -44,7 +44,7 @@ const del=function (id){
 * }
 * */
 const coursePage=function (query){
-  return ajax.post(baseURL,'/xboe/subgroup/m/noteinfo/course',query);
+  return ajax.post(baseURL,'/xboe/subgroup/m/noteinfo/course-page',query);
 }

 /**
--- a/src/api/phase2/stat.js
+++ b/src/api/phase2/stat.js
@@ -47,14 +47,6 @@ const userDynamicList = function(data) {
    return ajax.post(baseURL,'/xboe/m/stat/userdynamic/list',data);
 }

-/**
- * 获取用户最近 x 天的U币记录
- * @param {String} aid 用户的id
- * @param {Integer} days x天的记录，默认为7天
- */
-const userCoinList = function(aid,days) {
-    return ajax.get(baseURL,'/xboe/m/stat/usercoinrecord/list?aid='+aid+'&days='+days);
-}
 /**
 * 获取用户全部勋章
 * @param {String} aid 用户的id
@@ -113,6 +105,15 @@ const exportUserCoinRecord = function(aid) {
    return ajax.get(baseURL,'/xboe/m/stat/usercoinrecord/export?aid='+aid);
 }

+/**
+ * 获取用户最近 x 天的U币记录
+ * @param {String} aid 用户的id
+ * @param {Integer} days x天的记录，默认为7天
+ */
+ const userCoinList = function(aid,days) {
+    return ajax.get(baseURL,'/xboe/m/stat/usercoinrecord/list?aid='+aid+'&days='+days);
+}
+

 export default {
    sendEvent,
--- a/src/components/Course/myNote.vue
+++ b/src/components/Course/myNote.vue
@@ -2,8 +2,8 @@
    <div class="my-note">
        <div class="mynote">
            <div class="mynote-tab">
-                <div @click="notetabType(1)" :class="notetab == 1 ? 'noteactive' : ' ' "> <a href="#">新增笔记</a> </div>
-                <div @click="notetabType(2)" :class="notetab == 2 ? 'noteactive' : ' '"> <a href="#">我的笔记</a> </div>
+                <div @click="notetabType(1)" :class="notetab == 1 ? 'noteactive' : ' ' "> <span>新增笔记</span> </div>
+                <div @click="notetabType(2)" :class="notetab == 2 ? 'noteactive' : ' '"> <span>我的笔记</span> </div>
            </div>
            <!-- 新增笔记  -->
            <div class="newcote-content" v-if="notetab == 1">
@@ -86,8 +86,8 @@ export default {
            default: () => { }
        },
        score: {
-            type:String,
-            default:''
+            type:Number,
+            default:0
        }
    },
    name: 'MyNote',
@@ -114,8 +114,9 @@ export default {
        ...mapGetters(['intTimeNote', 'userInfo']),
    },
    mounted() {
-        this.mynoteData.courseId = this.data.courseId;
-        this.mynoteData.contentId = this.data.id;
+        console.log(this.data,'data111');
+        // this.mynoteData.courseId = this.data.courseId;
+        // this.mynoteData.contentId = this.data.id;
        //   if(localStorage.getItem("NOTE_TEXT") !=''){
        //     this.mynoteData.content = localStorage.getItem("NOTE_TEXT");
        //     this.notetab = 1;
@@ -125,6 +126,13 @@ export default {

    },
    watch: {
+        data(val){
+           if(val.id) {
+            console.log(val,'val');
+            this.mynoteData.courseId = this.data.courseId;
+            this.mynoteData.contentId = this.data.id;
+           }
+        },
        intTimeNote(val) {
            this.mynoteData.playTime = val;
        }
@@ -405,7 +413,7 @@ export default {
            flex: 1;
        }

-        .noteactive a {
+        .noteactive span {
            font-weight: 600;
            color: #333333;
            padding-bottom: 7px;
--- a/src/components/Portal/noteComment.vue
+++ b/src/components/Portal/noteComment.vue
@@ -15,7 +15,7 @@
            <div class="comment" v-for="(com,comIdx) in list" :key="com.id">
                 <div class="comment-top">
                    <div class="comment-author">
-                        <authorInfo :avatar="com.avatar" :name="com.sysCreateBy" :sex="com.sex" :info="com.orgInfo"></authorInfo>
+                        <authorInfo :avatar="com.avatar" :name="com.name" :sex="com.sex" :info="com.orgInfo"></authorInfo>
                    </div>
                 </div>
                 <div class="comment-body" >
@@ -30,17 +30,6 @@
                          <showTime :time="com.sysCreateTime"></showTime>
                          <interactBar :type="10" :shares="false"  :data="com" @addAnswers="showReply(com)" :favorites="false" :views="false" :comments="false" :answers="true"></interactBar>
                        </div>
-                        <!-- <div class="comment-btns"> -->
-                          
-                           <!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
-                           <!-- <div v-show="btnsShowRowId==com.id"> -->
-                            
-                             <!-- <a @click="showReply(com)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a> -->
-                             <!--必须当前登录人是一个人-->
-                             <!-- <a v-if="userInfo.aid==com.sysCreateAid" @click="delCommnet(com,comIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a> -->
-                             <!-- <a v-if="com.replyList && com.replyList.length==5" @click="showMoreReply(com)" ><svg-icon icon-class="all" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>全部</span></a> -->
-                           <!-- </div> -->
-                        <!-- </div> -->
                        <div v-if="replyInfo.parentId==com.id" class="comment-reply" style="padding-bottom: 5px;">
                          <div style="width:100%;display:flex;">
                            <div style="flex: 1;">
@@ -76,13 +65,6 @@
                                       <showTime :time="reply.sysCreateTime"></showTime>
                                       <interactBar :type="10" :shares="false"  :data="reply" @addAnswers="showReply(reply)" :favorites="false" :views="false"  :comments="false" :answers="true"></interactBar>
                                      </div>
-                                     <!-- <div class="comment-btns"> -->
-                                        <!-- <a><svg-icon icon-class="like"></svg-icon><span>66</span></a> -->
-                                        <!-- <div v-show="btnsShowRowId==reply.id">
-                                          <a  @click="showReply(reply)"><svg-icon icon-class="comment" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>回复</span></a>
-                                          <a  v-if="userInfo.aid==reply.sysCreateAid" @click="delReply(com,reply,replyIdx)"><svg-icon icon-class="remove" style="margin-right: 0px;font-size: 16px;"></svg-icon><span>删除</span></a>
-                                        </div> -->
-                                     <!-- </div> -->
                                  </div>
                                  <!--发布回复-->
                                  <div v-if="replyInfo.parentId==reply.id" class="comment-reply" style="padding-bottom: 5px;">
@@ -163,6 +145,7 @@
    import apiComment from '@/api/modules/comments.js'
    import apiUser from '@/api/system/user.js'
    import authorInfo from '@/components/Portal/authorInfo.vue';
+    import apiNote from '@/api/phase2/note.js';
    // import author from '@/components/Portal/author.vue';
    import { mapGetters } from 'vuex';
    export default {
@@ -282,31 +265,13 @@
      mounted() {
        this.author = this.authorId;
        this.loadData(false);
-        //在中文输入法状态下输入光标不在文字最后，同时会被遮挡两个文字大小的长度
-        // let vm=document.querySelector('.hideControl input')
-        // vm.addEventListener('compositionstart',(e)=>{
-        // vm.style.padding='0 63px 0 0'
-        // vm.size=100
-        //以上两种方式都未解决
-        // })
      },
        methods: {
        loadMore() {
          this.pageIndex +=1;
          this.loadData(true);
        },
-        // lookYourself() {// 只看作者
-        // this.pageIndex =1;
-        // this.isAuthor = !this.isAuthor;
-        // if(this.isAuthor){
-        //   this.author = this.authorId;
-        // } else{
-        //    this.author = '';
-        // }
-        //   this.loadData();
-        // },
        loadAuthorInfo(list,ids){ //加载作者信息，头像，机构信息
-        // console.log(list,ids)
          if(ids.length==0){
            return;
          }
@@ -319,6 +284,7 @@
                    item.avatar=author.avatar;
                    item.orgInfo=author.orgInfo;
                    item.sex=author.sex;
+                    item.name=author.name;
                    return true;
                  }else{
                    return false;
@@ -349,18 +315,19 @@
          let params={
            pageIndex:this.pageIndex,
            pageSize:this.pageSize,
-            type:this.objType,
-            id:this.objId,
-            author: this.author,
+            openType:1,
+            courseId:this.objId,
          }
          let $this=this;
-          apiComment.pageQuery(params).then(res=>{
+          apiNote.coursePage(params).then(res=>{
              if(res.status==200){
                let ids=[];
                let allList=[];
                res.result.list.forEach(item=>{
+                  item.replyList = [];
                  item.avatar='';
                  item.orgInfo='';
+                  item.name='';
                  item.isAll=false;
                  //item.sex=null;
                  allList.push(item);
@@ -369,12 +336,39 @@
                      item.replyList.forEach(reply=>{
                        reply.avatar='';
                        reply.orgInfo='';
+                        reply.name='';
                        reply.sex=null;
                        reply.isAll=false;
                        allList.push(reply);
                        ids.push(reply.sysCreateAid);
                      })
                  }
+              
+                  let query={
+                    pageIndex:this.pageIndex,
+                    pageSize:this.pageSize,
+                    type:6,
+                    id:item.id,
+                    // author: this.author,
+                  }
+                  // console.log(item,'item');
+                  apiComment.pageQuery(query).then(res=>{
+                     if(res.status == 200 && res.result.list.length > 0) {
+                      let ids = [];
+                      res.result.list.forEach(it=>{
+                        ids.push(item.sysCreateAid);
+                        it.replyList = [];
+                        it.avatar='';
+                        it.orgInfo='';
+                        it.name='';
+                        it.isAll=false;
+                      })
+                      // let ids = res.result.list.map(item=>item.sysCreateAid);
+                      const noReapetIds=[...new Set(ids)]
+                      this.loadAuthorInfo(res.result.list,noReapetIds);
+                        item.replyList.push(...res.result.list);
+                     }
+                  })
                });
                this.loadAuthorInfo(allList,ids);
                this.total=res.result.count;
@@ -460,12 +454,14 @@
          item.isAll=!item.isAll;
        },
        showReply(item){
-          console.log("9999999999");
            this.replyInfo.objType=this.objType;
-            this.replyInfo.objId=this.objId;
+            this.replyInfo.objId=item.id;
            this.replyInfo.parentId=item.id;
            this.replyInfo.replyAid=item.sysCreateAid;
            this.replyInfo.replyName=item.sysCreateBy;
+            this.replyInfo.toAid='';
+            this.replyInfo.toAname='';
+            this.replyInfo.clevel=1;
            this.replyShow=true;
        },
        cancelReply(){
@@ -480,11 +476,11 @@
          if(this.replyInfo.content==''){
            return;
          }
-          this.replyInfo.commentId=comment.id;
-          if(comment.replyList==''){
-            comment.replyList=[];
-          }
-          apiComment.reply(this.replyInfo).then(res=>{
+          // this.replyInfo.commentId=comment.id;
+          // if(comment.replyList==''){
+          //   comment.replyList=[];
+          // }
+          apiComment.add(this.replyInfo).then(res=>{
             if(res.status==200){
                res.result.sex = null;
                res.result.isAll=false;
--- a/src/utils/tools.js
+++ b/src/utils/tools.js
@@ -238,3 +238,28 @@ export function testType(type) { //此方法移到tools中
    }
    return text;
  }
+// u币key
+  const uTypeMaps = {
+    'PublishArticle': '发表文章',
+    'ViewArticle': '阅读文章',
+    'StudyCourse': '学习课程',
+    'PublishCourse': '发布课程',
+    'PulishQuestion': '发布问题',
+    'ReadQuestion': '阅读问题',
+    'AnswerQuestion': '回答问题',
+    'PublishNote': '发布笔记',
+    'PublishComment': '发表评论',
+    'ReplyComment': '回复评论',
+    'Praise': '点赞',
+    'ScoreCourse':'课程评分',
+    'Feedback':'意见反馈',
+    'VideoStudyDayStat':'试听学习时长',
+    'ViewCase':'阅读案例',
+    'ViewArticle':'阅读文章',
+    'DeleteQuestion':'删除问题',
+    'other':'其他'
+};
+export function getUType(type) {
+    let name =  uTypeMaps[type];
+    return name;
+}
--- a/src/views/study/coursenew.vue
+++ b/src/views/study/coursenew.vue
@@ -114,13 +114,8 @@
                   <comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id" :toUsers="toUsers"></comments>
                </div>
                <div v-show="!courestab" class="coures-note">
-                  <note-comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="1" :obj-id="courseInfo.id"></note-comments>
-                   <!-- <div class="note-tole">33条笔记</div>
-                   <div class="note-info">
-                      
-                   </div> -->
+                  <note-comments v-if="courseInfo.id && courseInfo.id != ''" :obj-type="6" :obj-id="courseInfo.id"></note-comments>
                </div>
-               
            </div>
           </div>
           <div class="coures-infobox">
@@ -151,7 +146,7 @@
            </div>
               </div>
               <!-- 我的笔记 -->
-               <div class="mynote" v-if="tab == 2">
+               <div class="mynote" v-show="tab == 2">
                 <my-note :data="contentData" @videoLocation="videoLocation" @onPlayVideo="onPlayVideo" :score="courseInfo.score"></my-note>
               </div>
           </div>
--- a/src/views/ucurrency/Index.vue
+++ b/src/views/ucurrency/Index.vue
@@ -3,41 +3,22 @@
       <div class="myubi">
           <div class="ubi-hear">
               <h6>我的U币:367</h6><span class="cursor-pointer" @click="dialogVisible = true">U币规则 <i class="el-icon-arrow-right"></i> </span>
-                <el-button>导出记录</el-button>
+                <el-button @click="exportRecord()">导出记录</el-button>
           </div>
+           <div style="max-height:600px;overflow-y:auto;padding-right:50px">
                <div class="Ubi-hist">
                    <h6>U币历史记录</h6><span>（最多保留近7天的记录）</span>
+                    <div style="width:100%;height:290px" ref="chart"></div>
                </div>
-          <div class="my-Recording">
-            <h3>5月31日</h3>
-            <div class="Recording-info">
-              <div class="info-tit">发布笔记</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">回答问题</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">意见反馈</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
+                <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">{{getUType(info.eventKey)}}</div>
+                        <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt="">{{info.uvalue > 0? '+':''}} {{info.uvalue}}</div>
                    </div>
                </div>
-           <div class="my-Recording">
-            <h3>5月29日</h3>
-            <div class="Recording-info">
-              <div class="info-tit">发布笔记</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">回答问题</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
-              <div class="Recording-info">
-              <div class="info-tit">意见反馈</div>
-              <div class="info-Gold"><img src="../../../public/images/Uimg.png" alt=""> +5</div>
-            </div>
           </div>
+           
       </div>
        <div class="experience">
          <div class="exp-hear">
@@ -51,11 +32,10 @@
                    累计<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>黄金糕</el-dropdown-item>
-                    <el-dropdown-item>狮子头</el-dropdown-item>
-                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
-                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
-                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+                    <el-dropdown-item>累计</el-dropdown-item>
+                    <el-dropdown-item>本周</el-dropdown-item>
+                    <el-dropdown-item>本月</el-dropdown-item>
+                    <el-dropdown-item disabled>本年</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown> 
              </div>
@@ -186,6 +166,8 @@
 <script>
    import apiStat from '@/api/phase2/stat.js';
    import { mapGetters } from 'vuex';
+    import {getUType} from '@/utils/tools.js'
+    import * as echarts from 'echarts'
      export default{
          computed: {
          ...mapGetters(['userInfo']),
@@ -194,15 +176,102 @@
          components: {},
          data(){
              return{
+                getUType,
                dialogVisible:false,
-                tableData:[]
+                tableData:[],
+                uCoinRecord:[],
+                chart:null,
              }
          },
          mounted() {
-             
+             this.getList();
          },
        methods:{
+            exportRecord() {
+                let urlPre=window.location.protocol+'//'+window.location.host;
+                window.open(urlPre + '/xboe/m/stat/usercoinrecord/export?aid='+this.userInfo.aid)
+            },
+            initChat(chatData) {
+               this.chart = echarts.init(this.$refs.chart);
+               const option = {
+                    tooltip: {
+                        trigger: 'item'
+                    },
+                    legend: {
+                        top: 'center',
+                        right:100,
+                        orient:'vertical',
+                        itemWidth:8,
+                        itemHeight:8,
+                        borderRadius:'50%',
+                        itemGap:26,
+                        formatter:function(name) {
+                            let data =option.series[0].data;
+                            let total = 0;
+                            let tarValue = 0;//每一项值
+                            for(let i = 0;i < data.length;i++){
+                                total += data[i].value;
+                                if(data[i].name == name) {
+                                    tarValue = data[i].value;
+                                }
+                            }
+                            let p =Math.round((tarValue/total)*100)+'%';
+                            return ` ${p}  ${name}`
+                        }
+                    },
+                    series: [
+                        {
+                        // name: 'name',
+                        type: 'pie',
+                        radius: ['50%', '40%'],
+                        avoidLabelOverlap: false,
+                        center: ['32%','50%'],
+                        itemStyle: {
+                            borderRadius: 0,
+                            borderColor: '#fff',
+                            borderWidth: 2,
+                            normal: {
+                                color: function (colors) {
+                                    let colorList = ['#5bb9fe','#f7b36b','#72e5d5','#e1e1f9'];
+                                    return colorList[colors.dataIndex];
+                                },
+                            }
+                        },
+                        label: {
+                            show: false,
+                            position: 'center',
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: chatData,
+                        }
+                    ]
+                    };
+                    this.chart.setOption(option);
+            },
+           getList() {
+            apiStat.userCoinList(this.userInfo.aid,7).then(res=>{
+                if(res.status == 200) {
+                   this.uCoinRecord = [];
+                    for(let key in res.result.uCoinRecord){
+                        this.uCoinRecord.push({
+                        dayNmae: key,
+                        list:res.result.uCoinRecord[key]
+                        })
+                    }
+                    let chatData = [];
                    
+                    for(let key in res.result.chatData){
+                        chatData.push({
+                            value:res.result.chatData[key],
+                            name:this.getUType(key)
+                        })
+                    }
+                    this.initChat(chatData);
+                }
+            })
+           }
        }
      }
 </script>
@@ -314,7 +383,7 @@
    }
    .myubi{
      flex: 1;
-      margin-right: 107px;
+      margin-right: 84px;
    }
    .omit{
        padding-left: 20px;
--- a/src/views/user/ranking.vue
+++ b/src/views/user/ranking.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="padding:26px 40px;display:flex;">
+  <div style="padding:26px 40px;display:flex;overflow-x: auto;">
      <div class="experience">
          <div class="exp-hear">
              <div class="exp-hear-text">
@@ -12,11 +12,10 @@
                    累计<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>黄金糕</el-dropdown-item>
-                    <el-dropdown-item>狮子头</el-dropdown-item>
-                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
-                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
-                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+                    <el-dropdown-item>累计</el-dropdown-item>
+                    <el-dropdown-item>本周</el-dropdown-item>
+                    <el-dropdown-item>本月</el-dropdown-item>
+                    <el-dropdown-item>本年</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown> 
              </div>
@@ -43,8 +42,8 @@
             <div class="table-hear">
                <div style="margin-left:5px">排名</div>
                <div style="margin-left:5px">姓名</div>
-                <div class="bm">部门</div>
-                <div class="jy">经验值</div>
+                <div class="bm">学习时长</div>
+                <!-- <div class="jy">经验值</div> -->
             </div>
             <div style="height:450px;overflow-y:auto">
            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
@@ -114,11 +113,10 @@
                    累计<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>黄金糕</el-dropdown-item>
-                    <el-dropdown-item>狮子头</el-dropdown-item>
-                    <el-dropdown-item>螺蛳粉</el-dropdown-item>
-                    <el-dropdown-item disabled>双皮奶</el-dropdown-item>
-                    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
+                    <el-dropdown-item>累计</el-dropdown-item>
+                    <el-dropdown-item>本周</el-dropdown-item>
+                    <el-dropdown-item>本月</el-dropdown-item>
+                    <el-dropdown-item>本年</el-dropdown-item>
                </el-dropdown-menu>
                </el-dropdown> 
              </div>
@@ -193,6 +191,96 @@
             </div>
          </div>
      </di>
+      <di class="Duration">
+           <div class="exp-hear">
+              <div class="exp-hear-text">
+                  学习天数排行榜
+                  <span class="exp-hear-textbor"></span>
+             </div>
+              <div class="exp-hear-xiala">
+                 <el-dropdown trigger="click">
+                <span class="el-dropdown-link">
+                    累计<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item>累计</el-dropdown-item>
+                    <el-dropdown-item>本周</el-dropdown-item>
+                    <el-dropdown-item>本月</el-dropdown-item>
+                    <el-dropdown-item>本年</el-dropdown-item>
+                </el-dropdown-menu>
+                </el-dropdown> 
+              </div>
+          </div>
+          <div class="myselftext">
+             <div class="myranking">
+                 我的排名 :  <span> 128</span>
+             </div>
+             <div class="myexperience">
+                 我的经验值 :  <span> 367</span>
+             </div>
+          </div>
+           <div class="exp-table">
+             <div class="table-hear">
+                <div style="margin-left:5px">排名</div>
+                <div style="margin-left:5px">姓名</div>
+                <div class="bm">学习天数</div>
+                <!-- <div class="jy">经验值</div> -->
+             </div>
+             <div style="height:500px;overflow-y:auto">
+            <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank1.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span></div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank2.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div class="tab-rank" ><img src="../../../public/images/rank3.png" alt=""></div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">4</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+              <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="line-height: 40px;padding-left:15px;font-size: 16px;color: #333333;">5</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span>小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;">1093</div>
+                 </div>
+             </div>
+             </div>
+             <div class="omit">
+                 <div>.</div> <div>.</div> <div>.</div>
+             </div>
+             <div class="table-hear" style="margin-top:40px;border-bottom: 1px solid #ddd;padding-bottom:20px">
+                 <div style="color: #0059FF;line-height: 40px;padding-left:15px;font-size: 16px;" class="tab-rank" >128</div>
+                 <div class="tab-name"><img src="../../../public/images/Avatarwoman.png" alt=""> <span style="color: #0059FF;">小李</span> </div>
+                 <div class="bm tab-bm" style="margin-left:30px;color: #0059FF;">BOE / 企划中心 / 数据资产部</div>
+                 <div class="jy tab-jy">
+                     <div style="font-size: 18px;color: #333333;font-weight: 600;color: #0059FF;">1093</div>
+                 </div>
+             </div>
+          </div>
+      </di>
  </div>
 </template>