修改

src/App.vue

@@ -44,7 +44,7 @@ export default {
     },
   },
   mounted () {
-    window.addEventListener('scroll', this.handleScroll, true)
+    window.addEventListener('scroll', this.handleScroll)
   },
 
   destroyed () {

src/api/allApi.js

@@ -154,7 +154,7 @@ export function sign(query) {
   })
 }
 
-export function signCount(query) {
+export function signInfo(query) {
   return request({
     url: '/mall-sign/signCount',
     method: 'post',

src/components/AppSidebar.vue

@@ -19,13 +19,13 @@ export default {
   data() {
     return {
         sideBarList:[
-            // {
-            //     value:'index',
-            //     name:'首页',
-            //     path:'/home/index',
-            //     icon:'icon-mall-shouye',
-            //     checked:false,
-            // },
+            {
+                value:'index',
+                name:'首页',
+                path:'/home/index',
+                icon:'icon-mall-shouye',
+                checked:false,
+            },
             {
                 value:'signIn',
                 name:'每日签到',
@@ -33,20 +33,20 @@ export default {
                 icon:'icon-mall-qiandao',
                 checked:false,
             },
-            // {
-            //     value:'pointsMall',
-            //     name:'积分商城',
-            //     path:'/home/pointsMall',
-            //     icon:'icon-mall-jifenshangcheng',
-            //     checked:false,
-            // },
-            // {
-            //     value:'festiveEvents',
-            //     name:'节日活动',
-            //     path:'/home/festiveEvents',
-            //     icon:'icon-mall-huodong',
-            //     checked:false,
-            // },
+            {
+                value:'pointsMall',
+                name:'积分商城',
+                path:'/home/pointsMall',
+                icon:'icon-mall-jifenshangcheng',
+                checked:false,
+            },
+            {
+                value:'festiveEvents',
+                name:'节日活动',
+                path:'/home/festiveEvents',
+                icon:'icon-mall-huodong',
+                checked:false,
+            },
             {
                 value:'myMedal',
                 name:'我的勋章',
@@ -54,20 +54,20 @@ export default {
                 icon:'icon-mall-xunzhang',
                 checked:false,
             },
-            // {
-            //     value:'welfareList',
-            //     name:'福利领取',
-            //     path:'/home/welfareList',
-            //     icon:'icon-mall-hongbao',
-            //     checked:false,
-            // },
-            // {
-            //     value:'myCenter',
-            //     name:'个人中心',
-            //     path:'/home/myCenter',
-            //     icon:'icon-mall-gerenzhongxin',
-            //     checked:false,
-            // },
+            {
+                value:'welfareList',
+                name:'福利领取',
+                path:'/home/welfareList',
+                icon:'icon-mall-hongbao',
+                checked:false,
+            },
+            {
+                value:'myCenter',
+                name:'个人中心',
+                path:'/home/myCenter',
+                icon:'icon-mall-gerenzhongxin',
+                checked:false,
+            },
             {
                 value:'earnPoints',
                 name:'积分获取',
@@ -111,7 +111,7 @@ export default {
     this.getRoute();
   },
   mounted () {
-    window.addEventListener('scroll', this.handleScroll, true)
+    window.addEventListener('scroll', this.handleScroll)
   },
 
   destroyed () {

src/components/AppSidebar1.vue

@@ -65,7 +65,7 @@ export default {
     this.getRoute();
   },
   mounted () {
-    window.addEventListener('scroll', this.handleScroll, true)
+    window.addEventListener('scroll', this.handleScroll)
   },
 
   destroyed () {

src/components/SiderInfo.vue

@@ -26,12 +26,16 @@
                     <div class="item-content">{{ dataInfo.deptName }}</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">我的积分：</div>
+                    <div class="item-itle">积分：</div>
                     <div class="item-content blue">{{ dataInfo.surplusIntegral }}积分</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">我的勋章：</div>
-                    <div class="item-content blue">{{ dataInfo.medalCount }}个</div>
+                    <div class="item-itle">排行：</div>
+                    <div class="item-content blue">5名</div>
+                </div>
+                <div class="info-item">
+                    <div class="item-itle">勋章：</div>
+                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div>
             </div>
         </div>
@@ -46,12 +50,16 @@
                     <div class="item-content">{{ dataInfo.deptName }}</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">我的积分：</div>
+                    <div class="item-itle">积分：</div>
                     <div class="item-content blue">{{ dataInfo.surplusIntegral }}积分</div>
                 </div>
                 <div class="info-item">
-                    <div class="item-itle">我的勋章：</div>
-                    <div class="item-content blue">{{ dataInfo.medalCount }}个</div>
+                    <div class="item-itle">排行：</div>
+                    <div class="item-content blue">5名</div>
+                </div>
+                <div class="info-item">
+                    <div class="item-itle">勋章：</div>
+                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
                 </div>
             </div>
         </div>
@@ -105,7 +113,7 @@ export default {
 },
 
 mounted() {
-    window.addEventListener('scroll', this.handleScroll, true)
+    window.addEventListener('scroll', this.handleScroll)
 },
 
 destroyed() {

src/main.js

@@ -7,7 +7,7 @@ import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/global.css';
 import './assets/icon/iconfont.css';
 // import './permission' // permission control
-const baseUrl = '';
+const baseUrl = 'https://xiaoyou.dgtis.com/admin/storage/create';
 Vue.prototype.baseUrl = baseUrl;
 Vue.config.productionTip = false;
 

src/utils/request.js

@@ -4,7 +4,7 @@ import { getToken } from '@/utils/auth'
 
 // create an axios instance
 const service = axios.create({
-  baseURL: 'http://192.168.100.208:9083/admin', // api的base_url
+  baseURL: 'http://47.103.79.143:9084/admin', // api的base_url
   timeout: 10000 // request timeout
 })
 
@@ -38,7 +38,7 @@ service.interceptors.response.use(
         Message({
           message: errmsg,
           type: 'error',
-          duration: 5 * 1000
+          duration: 2 * 1000
         })
       }
       return Promise.reject('error')
@@ -50,7 +50,7 @@ service.interceptors.response.use(
     Message({
       message: '连接超时',
       type: 'error',
-      duration: 5 * 1000
+      duration: 2 * 1000
     })
     return Promise.reject(error)
   })

src/views/HomeView/EarnPoints.vue

@@ -2,13 +2,61 @@
     <div class="timeline-container">
         <div class="timeline-content">
             <div class="timeline-entry-list">
-               
                 <div class="entry-list-container">
-                   
+                    <div class="tab-header">
+                        <span class="tab-title">证书列表</span>
+                    </div>
+                    <div class="content-body">
+                        <el-button size="small" type="primary"  @click="dialogVisible = true">上传证书</el-button>
+                        <el-table size="small" :data="dataList" border style="margin-top: 20px;width: 100%">
+                            <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
+                            <el-table-column width="80" align="center" prop="type" label="类型"></el-table-column>
+                            <el-table-column align="center" prop="title" label="证书">
+                                <template slot-scope="props">
+                                    <a style="color: #1e80ff;" target="_blank" :href="props.row.file">{{ props.row.title }}</a>
+                                </template>
+                            </el-table-column>
+                            <el-table-column width="150" align="center" prop="createTime" label="上传时间"></el-table-column>
+                        </el-table>
+                    </div>
                 </div>
             </div>
             <SiderInfo></SiderInfo>
         </div>
+        <el-dialog
+            title="上传证书"
+            :visible.sync="dialogVisible"
+            width="40%">
+            <el-form ref="dataForm" :model="dataForm" label-width="50px">
+                <el-form-item label="类型:">
+                    <el-select style="width: 95%;" size="small" v-model="dataForm.type"
+                            placeholder="请选择证书类型">
+                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+                            </el-option>
+                        </el-select>
+                </el-form-item>
+                <el-form-item label="名称:">
+                    <el-input placeholder="请填写证名称" size="small" style="width: 95%;" v-model="dataForm.title"></el-input>
+                </el-form-item>
+               
+                <el-form-item label="证书:">
+                    <el-upload
+                    :action="fileUrl"
+                    :file-list="dataForm.files"
+                    :on-success="handleAvatarSuccess"
+                    :before-upload="beforeUploadFile"
+                    :before-remove="beforeRemove"
+                    :on-remove="handleRemove"
+                    >
+                        <el-button size="small" type="primary">点击上传</el-button>
+                    </el-upload>
+                </el-form-item>
+            </el-form>
+            <span slot="footer" class="dialog-footer">
+                <!-- <el-button size="small" @click="dialogVisible = false">取 消</el-button> -->
+                <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
+            </span>
+            </el-dialog>
     </div>
 </template>
 <script>
@@ -20,41 +68,113 @@ export default{
   },
   data() {
     return {
-        dataList:[],
-        page:1,
-        pages:1,
+        fileUrl: this.baseUrl,
+        dataList:[
+            {
+                title:'英语四级证书',
+                file: "https://xiaoyou.dgtis.com/images/image/2023/05/08/5hibpn5vzqr1i3z1cm3b.jpg",
+                fileName: "微信图片_20230217092706.jpg",
+                type: "类别1",
+                createTime: "2023-5-8",
+            }
+        ],
+        dialogVisible: false,
+        options: [{
+                value: '类别1',
+                label: '类别1'
+            }, {
+                value: '类别2',
+                label: '类别2'
+            }, {
+                value: '类别3',
+                label: '类别3'
+            }, {
+                value: '类别4',
+                label: '类别4'
+            }, {
+                value: '类别5',
+                label: '类别5'
+            }],
+        dataForm: {
+            title:'',
+            files:[],
+            fileName: '',
+            file:'',
+            createTime:'2023-5-8'
+        }
     };
   },
   created(){
     // this.getDataList();
   },
   methods:{
-    handleClickMag(id) {
-        this.$router.push({
-            path: '/home/index/msgDetail',
-            query: {
-                id: id,
-            }
-        });
+    beforeRemove(file, fileList) {
+      return this.$confirm(`确定移除 ${file.name}？`);
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+      let files = [];
+        let names = [];
+        for (let i in fileList) {
+          let response = fileList[i].response;
+          let name = fileList[i].name;
+          let url = response.data.url;
+          files.push(url);
+          names.push(name);
+        }
+        this.dataForm.file = files.join(",");
+        this.dataForm.fileName = names.join(",");
+    },
+    beforeUploadFile(file){
+      console.log(file);
+      const size = file.size / 1024 / 1024;
+      console.log(size);
+    //   if(size > 10 ){
+    //     this.$message.error("文件大小不能超过10MB！");
+    //       return false;
+    //   }
+    },
+    handleAvatarSuccess(res, file, fileList) {
+      console.log(file, fileList);
+      console.log("------", "==========");
+      console.log("res = " , res);
+
+      let files = [];
+        let names = [];
+        for (let i in fileList) {
+          let response = fileList[i].response;
+          if (response.errno && response.errno != "0") {
+            this.$message.error("该文件上传失败,已被移除,请重新上传!");
+            // 上传失败移除该 file 对象
+            fileList.splice(i, 1);
+          } else {
+            let name = fileList[i].name;
+            let url = fileList[i].response.data.url;
+            files.push(url);
+            names.push(name);
+          }
+        }
+        this.dataForm.file = files.join(",");
+        this.dataForm.fileName = names.join(",");
+    },
+    resetForm() {
+        this.$refs['dataForm'].resetFields();
     },
+    submitForm() {
+        this.$refs['dataForm'].validate((valid) => {
+          if (valid) {
+            this.dataList.push(this.dataForm);
+            console.log(this.dataList);
+            this.dialogVisible = false;
+            this.resetForm();
+          } else {
+            return false;
+          }
+        });
+      },
     getDataList(){
-        let data = {
-            limit:10,
-            page:this.page,
-            type:0,
-        };
-        msgList(data).then(response=>{
-            if(this.page==1){
-                this.dataList = response.data.data.list;
-                this.page = response.data.data.pageNum;
-                this.pages = response.data.data.pages;
-            }else{
-                this.dataList = [
-                    ...this.dataList,
-                    ...response.data.data.list
-                ]
-            }
-            ++this.page  
+        msgList().then(response=>{
+            this.dataList = response.data.data.list; 
         })
     },
     
@@ -76,6 +196,9 @@ export default{
     border-radius: 4px;
     min-height: 500px;
 }
+.content-body {
+  padding: 10px 20px 16px;
+}
 .entry-list-container .tab-header {
     display: flex;
     align-items: center;
@@ -90,85 +213,4 @@ export default{
     font-size: 18px;
     font-weight: 600;
 }
-.entry-list{
-    width: 100%;
-    background-color: #fff;
-    position: relative;
-}
-.list-item:hover {
-    background: #fafafa;
-}
-.list-item{
-    position: relative;
-    cursor: pointer;
-    padding: 12px 20px 0;
-}
-.list-item .meta-container{
-    display: flex;
-    align-items: center;
-}
-.list-item .meta-container .user-message{
-    max-width: 162px;
-    font-size: 13px;
-    line-height: 22px;
-    color: #4e5969;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-}
-.list-item .meta-container .dividing{
-    line-height: 22px;
-    width: 1px;
-    height: 14px;
-    background: #e5e6eb;
-    margin: 0 8px;
-}
-.list-item .meta-container .date{
-    line-height: 22px;
-    font-size: 13px;
-    color: #86909c;
-}
-.list-item .main{
-    margin-top: 6px;
-    padding-bottom: 12px;
-    display: flex;
-    border-bottom: 1px solid #e5e6eb;
-}
-.list-item .main .info-box{
-    flex-grow: 1;
-}
-.list-item .main .info-box .title:visited {
-    color: #86909c;
-}
-.list-item .main .info-box .title{
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 24px;
-    color: #1d2129;
-    margin-bottom: 8px;
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-}
-.list-item .main .info-box .description{
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 22px;
-    color: #86909c;
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-}
-.list-item .thumb{
-    flex: 0 0 auto;
-    width: 120px;
-    height: 80px;
-    margin-left: 24px;
-    border-radius: 2px;
-}
 </style>

src/views/HomeView/Index.vue

@@ -110,7 +110,7 @@ export default{
   },
  
   mounted () {
-    window.addEventListener('scroll', this.handleScroll, true)
+    window.addEventListener('scroll', this.handleScroll)
   },
 
   destroyed () {

src/views/HomeView/MyCenter.vue

@@ -2,7 +2,7 @@
     <div class="right-wrap">
         <div class="myTabs" style="background: #fff;">
             <el-tabs style="padding: 0 20px 40px 20px;" v-model="activeName" @tab-click="handleClick">
-                <!-- <el-tab-pane label="我的积分" name="first">
+                <el-tab-pane label="我的积分" name="first">
                     <el-radio-group v-model="firstTabPosition" style="margin-bottom: 30px;">
                         <el-radio-button v-for="(item, index) in firstTabsList" :key="index" :label="item.value"
                             @click="handleClickFirstTabs(item.value)">
@@ -34,7 +34,7 @@
 
                     </div>
                     <div v-else class="integralRules" v-html="integralRules"></div>
-                </el-tab-pane> -->
+                </el-tab-pane>
                 <el-tab-pane label="我的兑换" name="second">
                     <el-radio-group v-model="secondTabPosition" @change="handleClickSecondTabs">
                         <el-radio-button v-for="(item, index) in secondTabsList" :key="index" :label="item.value">
@@ -186,7 +186,7 @@ export default {
             tableData: [],
             currentPage: 4,
             integralRules: '<p>1. 掘金小铺【公益进展】最新公益活动进展在这里，感谢掘友们的大力支持</p> <p>2. 小铺商品春夏限定4月上新啦</p>',
-            activeName: 'second',
+            activeName: 'first',
         };
     },
     created() {

src/views/HomeView/SignIn.vue

@@ -50,15 +50,19 @@
               <div class="item-content">{{ dataInfo.deptName }}</div>
             </div>
             <div class="info-item">
-              <div class="item-itle">我的积分：</div>
+              <div class="item-itle">积分：</div>
               <div class="item-content blue">
                 {{ dataInfo.surplusIntegral }}积分
               </div>
             </div>
             <div class="info-item">
-              <div class="item-itle">我的勋章：</div>
-              <div class="item-content blue">{{ dataInfo.medalCount }}个</div>
-            </div>
+                    <div class="item-itle">排行：</div>
+                    <div class="item-content blue">5名</div>
+                </div>
+                <div class="info-item">
+                    <div class="item-itle">勋章：</div>
+                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
+                </div>
           </div>
         </div>
         <div class="sidebar-block sticky-block">
@@ -72,15 +76,19 @@
               <div class="item-content">{{ dataInfo.deptName }}</div>
             </div>
             <div class="info-item">
-              <div class="item-itle">我的积分：</div>
+              <div class="item-itle">积分：</div>
               <div class="item-content blue">
                 {{ dataInfo.surplusIntegral }}积分
               </div>
             </div>
             <div class="info-item">
-              <div class="item-itle">我的勋章：</div>
-              <div class="item-content blue">{{ dataInfo.medalCount }}个</div>
-            </div>
+                    <div class="item-itle">排行：</div>
+                    <div class="item-content blue">5名</div>
+                </div>
+                <div class="info-item">
+                    <div class="item-itle">勋章：</div>
+                    <div class="item-content blue">{{ dataInfo.medalCount }}枚</div>
+                </div>
           </div>
         </div>
       </div>
@@ -163,7 +171,7 @@ export default {
   },
 
   mounted() {
-    window.addEventListener("scroll", this.handleScroll, true);
+    window.addEventListener("scroll", this.handleScroll);
   },
 
   destroyed() {

src/views/NoticeCenter.vue

@@ -100,10 +100,11 @@ export default{
   },
  
   mounted () {
-    window.addEventListener('scroll', this.handleScroll, true)
+    window.addEventListener('scroll', this.handleScroll)
   },
 
   destroyed () {
+    console.log('lalalal')
     // 离开该页面需要移除这个监听的事件，不然会报错
     window.removeEventListener('scroll', this.handleScroll)
   }

src/views/PointsRank/History.vue

@@ -1,194 +1,172 @@
 
 <template>
-    <div class="timeline-container">
-       <div class="timeline-content">
-           <div class="timeline-entry-list">
-               
-               <div class="entry-list-container">
-                历史总积分排行
-               </div>
-           </div>
-           <SiderInfo></SiderInfo>
-       </div>
-   </div>
+  <div class="timeline-container">
+    <div class="timeline-content">
+      <div class="timeline-entry-list">
+        <div class="entry-list-container">
+          <div class="tab-title">
+            <div class="title-box">
+              <span class="box-text">积分排行榜</span>
+            </div>
+          </div>
+          <el-card class="box-card">
+            <div class="tab-list">
+              <div class="list-title">
+                <div class="title-left">
+                  <div class="left-rank title-text">排名</div>
+                  <div class="left-avatar title-text">头像</div>
+                  <div class="left-userName title-text">用户名</div>
+                </div>
+                <div class="title-right">
+                  <div class="right-Integral title-text">积分</div>
+                </div>
+              </div>
+              <div v-for="item in 10" class="list-title list-item">
+                <div class="title-left">
+                  <div class="left-rank">
+                    <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                  </div>
+                  <div class="left-avatar">
+                    <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                  </div>
+                  <div class="left-userName item-text">兔子爱吃香蕉皮</div>
+                </div>
+                <div class="title-right">
+                  <div class="right-Integral item-text">10000</div>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </div>
+      </div>
+      <SiderInfo></SiderInfo>
+    </div>
+  </div>
 </template>
-   
- 
- <script>
- import { msgList } from "@/api/allApi";
- import SiderInfo from '@/components/SiderInfo.vue'
- export default{
- components: {
-   SiderInfo,
- },
- data() {
-   return {
-       dataList:[],
-       page:1,
-       pages:1,
-   };
- },
- created(){
-   this.getDataList();
- },
- methods:{
-   handleClickMag(id) {
-       this.$router.push({
-           path: '/home/index/msgDetail',
-           query: {
-               id: id,
-           }
-       });
-   },
-   getDataList(){
-       let data = {
-           limit:10,
-           page:this.page,
-           type:0,
-       };
-       msgList(data).then(response=>{
-           if(this.page==1){
-               this.dataList = response.data.data.list;
-               this.page = response.data.data.pageNum;
-               this.pages = response.data.data.pages;
-           }else{
-               this.dataList = [
-                   ...this.dataList,
-                   ...response.data.data.list
-               ]
-           }
-           ++this.page  
-       })
-   },
-    // 保存滚动值，这是兼容的写法
-    handleScroll () {
-       if((document.documentElement.scrollTop + window.innerHeight) == document.body.offsetHeight){
-           if(this.page > this.pages){
-               return
-           }else{
-               this.getDataList();
-           }
-       }
-   },
- },
- 
- mounted () {
-   window.addEventListener('scroll', this.handleScroll, true)
- },
- 
- destroyed () {
-   // 离开该页面需要移除这个监听的事件，不然会报错
-   window.removeEventListener('scroll', this.handleScroll)
- }
- }
- </script>
- <style scoped>
- .timeline-container{
-   margin: 0 auto;
- }
- .timeline-entry-list{
-   margin-right: 17.5rem;
-   border-radius: 2px;
-   width: 720px;
-   position: relative;
- }
- .entry-list-container{
-   background-color: #fff;
-   border-radius: 4px;
- }
- .entry-list-container .tab-header {
-   display: flex;
-   align-items: center;
-   justify-content: space-between;
-   padding: 20px 20px 16px;
-   border-bottom: 1px solid #e5e6eb;
-   overflow: hidden;
- }
- 
- .tab-header .tab-title {
-   white-space: nowrap;
-   font-size: 18px;
-   font-weight: 600;
- }
- .entry-list{
-   width: 100%;
-   background-color: #fff;
-   position: relative;
- }
- .list-item:hover {
-   background: #fafafa;
- }
- .list-item{
-   position: relative;
-   cursor: pointer;
-   padding: 12px 20px 0;
- }
- .list-item .meta-container{
-   display: flex;
-   align-items: center;
- }
- .list-item .meta-container .user-message{
-   max-width: 162px;
-   font-size: 13px;
-   line-height: 22px;
-   color: #4e5969;
-   white-space: nowrap;
-   overflow: hidden;
-   text-overflow: ellipsis;
-   word-break: break-all;
- }
- .list-item .meta-container .dividing{
-   line-height: 22px;
-   width: 1px;
-   height: 14px;
-   background: #e5e6eb;
-   margin: 0 8px;
- }
- .list-item .meta-container .date{
-   line-height: 22px;
-   font-size: 13px;
-   color: #86909c;
- }
- .list-item .main{
-   margin-top: 6px;
-   padding-bottom: 12px;
-   display: flex;
-   border-bottom: 1px solid #e5e6eb;
- }
- .list-item .main .info-box{
-   flex-grow: 1;
- }
- .list-item .main .info-box .title:visited {
-   color: #86909c;
- }
- .list-item .main .info-box .title{
-   font-weight: 700;
-   font-size: 16px;
-   line-height: 24px;
-   color: #1d2129;
-   margin-bottom: 8px;
-   display: -webkit-box;
-   overflow: hidden;
-   text-overflow: ellipsis;
-   -webkit-box-orient: vertical;
-   -webkit-line-clamp: 1;
- }
- .list-item .main .info-box .description{
-   font-weight: 400;
-   font-size: 13px;
-   line-height: 22px;
-   color: #86909c;
-   display: -webkit-box;
-   overflow: hidden;
-   text-overflow: ellipsis;
-   -webkit-box-orient: vertical;
-   -webkit-line-clamp: 2;
- }
- .list-item .thumb{
-   flex: 0 0 auto;
-   width: 120px;
-   height: 80px;
-   margin-left: 24px;
-   border-radius: 2px;
- }
- </style>
+    
+  
+  <script>
+import { msgList } from "@/api/allApi";
+import SiderInfo from "@/components/SiderInfo.vue";
+export default {
+  components: {
+    SiderInfo,
+  },
+  data() {
+    return {
+      avatarUrl:
+        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      dataList: [],
+      page: 1,
+      pages: 1,
+    };
+  },
+  created() {
+    // this.getDataList();
+  },
+  methods: {
+    handleClickMag(id) {
+      this.$router.push({
+        path: "/home/index/msgDetail",
+        query: {
+          id: id,
+        },
+      });
+    },
+    getDataList() {
+      let data = {
+        limit: 10,
+        page: this.page,
+        type: 0,
+      };
+      msgList(data).then((response) => {
+        this.dataList = response.data.data.list;
+      });
+    },
+  },
+};
+</script>
+  <style scoped>
+.timeline-container {
+  margin: 0 auto;
+}
+.timeline-entry-list {
+  margin-right: 17.5rem;
+  border-radius: 2px;
+  width: 720px;
+  position: relative;
+}
+.entry-list-container {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 20px 20px 16px;
+  min-height: 500px;
+}
+.entry-list-container .tab-title {
+  margin-bottom: -25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tab-title .title-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #1e80ff;
+  border-radius: 25px;
+}
+.title-box .box-text {
+  color: #fff;
+  padding: 10px 40px;
+  font-size: 20px;
+}
+.entry-list-container .tab-list {
+  margin: 0 auto;
+  width: 450px;
+}
+.tab-list .list-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tab-list .list-title {
+  margin-top: 15px;
+}
+.list-title .title-left {
+  width: 70%;
+  display: flex;
+  align-items: center;
+}
+.title-left .left-rank,
+.title-left .left-avatar,
+.title-left .left-userName,
+.title-right .right-Integral {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.title-left .left-rank {
+  width: 60px;
+}
+.title-left .left-avatar {
+  width: 60px;
+}
+.title-left .left-userName {
+  width: 150px;
+}
+.title-right .right-Integral {
+  width: 60px;
+}
+.title-text {
+  color: #8a919f;
+}
+.item-text {
+  color: #1d2129;
+  font-weight: 600;
+}
+.box-card {
+  margin: 0 auto;
+  width: 500px;
+  border-radius: 10px;
+}
+</style>

src/views/PointsRank/Present.vue

@@ -1,194 +1,172 @@
 
 <template>
-     <div class="timeline-container">
-        <div class="timeline-content">
-            <div class="timeline-entry-list">
-                <div class="entry-list-container">
-                    当前积分排行
+  <div class="timeline-container">
+    <div class="timeline-content">
+      <div class="timeline-entry-list">
+        <div class="entry-list-container">
+          <div class="tab-title">
+            <div class="title-box">
+              <span class="box-text">积分排行榜</span>
+            </div>
+          </div>
+          <el-card class="box-card">
+            <div class="tab-list">
+              <div class="list-title">
+                <div class="title-left">
+                  <div class="left-rank title-text">排名</div>
+                  <div class="left-avatar title-text">头像</div>
+                  <div class="left-userName title-text">用户名</div>
+                </div>
+                <div class="title-right">
+                  <div class="right-Integral title-text">积分</div>
+                </div>
+              </div>
+              <div v-for="item in 10" class="list-title list-item">
+                <div class="title-left">
+                  <div class="left-rank">
+                    <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                  </div>
+                  <div class="left-avatar">
+                    <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                  </div>
+                  <div class="left-userName item-text">兔子爱吃香蕉皮</div>
                 </div>
+                <div class="title-right">
+                  <div class="right-Integral item-text">10000</div>
+                </div>
+              </div>
             </div>
-            <SiderInfo></SiderInfo>
+          </el-card>
         </div>
+      </div>
+      <SiderInfo></SiderInfo>
     </div>
+  </div>
 </template>
     
   
   <script>
-  import { msgList } from "@/api/allApi";
-  import SiderInfo from '@/components/SiderInfo.vue'
-  export default{
+import { msgList } from "@/api/allApi";
+import SiderInfo from "@/components/SiderInfo.vue";
+export default {
   components: {
     SiderInfo,
   },
   data() {
     return {
-        dataList:[],
-        page:1,
-        pages:1,
+      avatarUrl:
+        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+      dataList: [],
+      page: 1,
+      pages: 1,
     };
   },
-  created(){
-    this.getDataList();
+  created() {
+    // this.getDataList();
   },
-  methods:{
+  methods: {
     handleClickMag(id) {
-        this.$router.push({
-            path: '/home/index/msgDetail',
-            query: {
-                id: id,
-            }
-        });
-    },
-    getDataList(){
-        let data = {
-            limit:10,
-            page:this.page,
-            type:0,
-        };
-        msgList(data).then(response=>{
-            if(this.page==1){
-                this.dataList = response.data.data.list;
-                this.page = response.data.data.pageNum;
-                this.pages = response.data.data.pages;
-            }else{
-                this.dataList = [
-                    ...this.dataList,
-                    ...response.data.data.list
-                ]
-            }
-            ++this.page  
-        })
+      this.$router.push({
+        path: "/home/index/msgDetail",
+        query: {
+          id: id,
+        },
+      });
     },
-     // 保存滚动值，这是兼容的写法
-     handleScroll () {
-        if((document.documentElement.scrollTop + window.innerHeight) == document.body.offsetHeight){
-            if(this.page > this.pages){
-                return
-            }else{
-                this.getDataList();
-            }
-        }
+    getDataList() {
+      let data = {
+        limit: 10,
+        page: this.page,
+        type: 0,
+      };
+      msgList(data).then((response) => {
+        this.dataList = response.data.data.list;
+      });
     },
   },
-  
-  mounted () {
-    window.addEventListener('scroll', this.handleScroll, true)
-  },
-  
-  destroyed () {
-    // 离开该页面需要移除这个监听的事件，不然会报错
-    window.removeEventListener('scroll', this.handleScroll)
-  }
-  }
-  </script>
+};
+</script>
   <style scoped>
-  .timeline-container{
-    margin: 0 auto;
-  }
-  .timeline-entry-list{
-    margin-right: 17.5rem;
-    border-radius: 2px;
-    width: 720px;
-    position: relative;
-  }
-  .entry-list-container{
-    background-color: #fff;
-    border-radius: 4px;
-    min-height: 500px;
-  }
-  .entry-list-container .tab-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 20px 20px 16px;
-    border-bottom: 1px solid #e5e6eb;
-    overflow: hidden;
-  }
-  
-  .tab-header .tab-title {
-    white-space: nowrap;
-    font-size: 18px;
-    font-weight: 600;
-  }
-  .entry-list{
-    width: 100%;
-    background-color: #fff;
-    position: relative;
-  }
-  .list-item:hover {
-    background: #fafafa;
-  }
-  .list-item{
-    position: relative;
-    cursor: pointer;
-    padding: 12px 20px 0;
-  }
-  .list-item .meta-container{
-    display: flex;
-    align-items: center;
-  }
-  .list-item .meta-container .user-message{
-    max-width: 162px;
-    font-size: 13px;
-    line-height: 22px;
-    color: #4e5969;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    word-break: break-all;
-  }
-  .list-item .meta-container .dividing{
-    line-height: 22px;
-    width: 1px;
-    height: 14px;
-    background: #e5e6eb;
-    margin: 0 8px;
-  }
-  .list-item .meta-container .date{
-    line-height: 22px;
-    font-size: 13px;
-    color: #86909c;
-  }
-  .list-item .main{
-    margin-top: 6px;
-    padding-bottom: 12px;
-    display: flex;
-    border-bottom: 1px solid #e5e6eb;
-  }
-  .list-item .main .info-box{
-    flex-grow: 1;
-  }
-  .list-item .main .info-box .title:visited {
-    color: #86909c;
-  }
-  .list-item .main .info-box .title{
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 24px;
-    color: #1d2129;
-    margin-bottom: 8px;
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-  }
-  .list-item .main .info-box .description{
-    font-weight: 400;
-    font-size: 13px;
-    line-height: 22px;
-    color: #86909c;
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-  }
-  .list-item .thumb{
-    flex: 0 0 auto;
-    width: 120px;
-    height: 80px;
-    margin-left: 24px;
-    border-radius: 2px;
-  }
-  </style>
+.timeline-container {
+  margin: 0 auto;
+}
+.timeline-entry-list {
+  margin-right: 17.5rem;
+  border-radius: 2px;
+  width: 720px;
+  position: relative;
+}
+.entry-list-container {
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 20px 20px 16px;
+  min-height: 500px;
+}
+.entry-list-container .tab-title {
+  margin-bottom: -25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tab-title .title-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #1e80ff;
+  border-radius: 25px;
+}
+.title-box .box-text {
+  color: #fff;
+  padding: 10px 40px;
+  font-size: 20px;
+}
+.entry-list-container .tab-list {
+  margin: 0 auto;
+  width: 450px;
+}
+.tab-list .list-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.tab-list .list-title {
+  margin-top: 15px;
+}
+.list-title .title-left {
+  width: 70%;
+  display: flex;
+  align-items: center;
+}
+.title-left .left-rank,
+.title-left .left-avatar,
+.title-left .left-userName,
+.title-right .right-Integral {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.title-left .left-rank {
+  width: 60px;
+}
+.title-left .left-avatar {
+  width: 60px;
+}
+.title-left .left-userName {
+  width: 150px;
+}
+.title-right .right-Integral {
+  width: 60px;
+}
+.title-text {
+  color: #8a919f;
+}
+.item-text {
+  color: #1d2129;
+  font-weight: 600;
+}
+.box-card {
+  margin: 0 auto;
+  width: 500px;
+  border-radius: 10px;
+}
+</style>

vue.config.js

@@ -3,18 +3,6 @@ module.exports = defineConfig({
   transpileDependencies: true,
   lintOnSave:false,
    //关闭eslint检查
-   css: {
-           loaderOptions: {
-               // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
-               // 因为 `scss` 语法在内部也是由 sass-loader 处理的
-               // 但是在配置 `additionalData` 选项的时候
-               // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
-               // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
-               scss: {
-                   additionalData: `@import "~@/assets/styles/index.scss";`
-               },
-           }
-       }
 })