修改

src/App.vue

@@ -7,7 +7,7 @@
     </div>
   </div>
 </template>
-<script lang="ts">
+<script>
 import AppHeader from '@/components/AppHeader.vue';
 import AppBackTop from '@/components/AppBackTop.vue';
 export default {

src/api/allApi.js

@@ -127,6 +127,24 @@ export function msgList(query) {
   })
 }
 
+//首页消息详情
+export function msgInfo(query) {
+  return request({
+    url: '/mall-msg/info',
+    method: 'get',
+    params:query
+  })
+}
+
+//首页获取用户信息
+export function useInfo(query) {
+  return request({
+    url: '/mall-integral/getUseInfo',
+    method: 'get',
+    params:query
+  })
+}
+
 
 export function createNews(data) {
   return request({

src/components/AppHeader.vue

@@ -8,9 +8,9 @@
             </router-link>
             <router-link to="/noticeCenter">
                 <div class="header-item">
-                    <el-badge :value="2" class="item">
+                    <!-- <el-badge :value="2" class="item"> -->
                         <i class="el-icon-message-solid"></i>
-                    </el-badge>
+                    <!-- </el-badge> -->
                     通知中心
                 </div>
             </router-link>
@@ -22,7 +22,7 @@
         </nav>
     </div>
 </template>
-<script lang="ts">
+<script>
 export default {
     props:['visible'],
 }

src/components/AppSidebar.vue

@@ -13,7 +13,7 @@
     </div>
     
 </template>
-<script lang="ts">
+<script>
 export default {
   name: 'AppSidebar',
   data() {

src/components/AppSidebar1.vue

@@ -0,0 +1,144 @@
+<template>
+    <div class="index-nav" :class="{'index-nav-top':isActive}">
+        <nav class="side-navigator-wrap">
+            <div v-for="(item,index) in sideBarList" :key="index" class="nav-item-wrap">
+                <div class="nav-item-content" :class="{ active: item.checked }">
+                    <router-link :to="item.path" class="nav-item">
+                        <!-- <i :class="item.icon"></i> -->
+                        <span class="nav-item-text">{{ item.name }}</span>
+                    </router-link>
+                </div>
+            </div>
+        </nav>
+    </div>
+    
+</template>
+<script>
+export default {
+  name: 'AppSidebar1',
+  data() {
+    return {
+        sideBarList:[
+            {
+                value:'present',
+                name:'当前积分',
+                path:'/pointsRank/present',
+                icon:'icon-mall-shouye',
+                checked:false,
+            },
+            {
+                value:'history',
+                name:'获取总积分',
+                path:'/pointsRank/history',
+                icon:'icon-mall-jifenshangcheng',
+                checked:false,
+            },
+        ],
+        isActive:false,
+    };
+  },
+  methods:{
+    getRoute(){
+        var path = this.$route.path;
+        this.sideBarList.forEach(item => {
+            if(path.indexOf(item.value) != -1){
+                item.checked = true;
+            } else{
+                item.checked = false;
+            }     
+        });
+    },
+    // 保存滚动值，这是兼容的写法
+    handleScroll () {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        if(scrollTop >= 80){
+            this.isActive = true
+        }else{
+            this.isActive = false
+        }
+    },
+  },
+  watch: {
+    $route:'getRoute'
+  },
+  created() {
+    this.getRoute();
+  },
+  mounted () {
+    window.addEventListener('scroll', this.handleScroll, true)
+  },
+
+  destroyed () {
+    // 离开该页面需要移除这个监听的事件，不然会报错
+    window.removeEventListener('scroll', this.handleScroll)
+  }
+}
+</script>
+<style scoped>
+.index-nav{
+  width: 180px;
+    position: -webkit-sticky;
+    position: sticky;
+    top: 80px;
+    margin-right: 20px;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    border-radius: 4px;
+    background-color: #fff;
+    max-height: calc(100vh - 101px);
+    /* overflow-x: hidden; */
+}
+.index-nav-top{
+    top: 20px;
+    max-height: calc(100vh - 40px);
+}
+li a {
+    font-weight: bold;
+    color: #515767;
+}
+
+li a.router-link-active {
+    color: #1e80ff;
+}
+.side-navigator-wrap{
+    min-width: 180px;
+    box-sizing: border-box;
+    padding: 8px;
+    font-size: 16px;
+    color: #515767;
+}
+.nav-item-wrap{
+    display: flex;
+    flex-direction: column;
+}
+.nav-item-content{
+    line-height: 24px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+.active{
+    background-color: #eaf2ff;
+    color: #1e80ff;
+    font-weight: 500
+}
+.nav-item{
+    display: inline-block;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    padding: 10px 17px;
+}
+.nav-item i{
+    vertical-align: middle;
+    margin-right: 12px;
+}
+.nav-item-text{
+    vertical-align: middle;
+    position: relative;
+}
+</style>

src/components/SiderInfo.vue

@@ -0,0 +1,267 @@
+<template>
+    <div class="index-aside aside" :class="{ 'sticky top': isActive }">
+        <div class="signin-tip sidebar-block signin">
+            <div class="first-line">
+                <div class="icon-text">
+                    <span class="title">
+                        {{ hoursTip }}
+                        <!-- <span class="title-days">77天</span> -->
+                    </span>
+                    <div class="second-line">点亮在商城的每一天</div>
+                </div>
+                <button class="btn signedin-btn">
+                    <span v-if="dataInfo.signStatus==0" class="btn-text sign-text">去签到</span>
+                    <span v-else class="btn-text signed-text">已签到</span>
+                </button>
+            </div>
+        </div>
+        <div class="signin-tip sidebar-block">
+            <div class="avatar">
+                <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                <span class="name">{{ dataInfo.userName }}</span>
+            </div>
+            <div class="info">
+                <div class="info-item">
+                    <div class="item-itle">部门：</div>
+                    <div class="item-content">{{ dataInfo.deptName }}</div>
+                </div>
+                <div class="info-item">
+                    <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>
+        </div>
+        <div class="sidebar-block sticky-block">
+            <div class="avatar">
+                <el-avatar :size="50" :src="avatarUrl"></el-avatar>
+                <span class="name">{{ dataInfo.userName }}</span>
+            </div>
+            <div class="info">
+                <div class="info-item">
+                    <div class="item-itle">部门：</div>
+                    <div class="item-content">{{ dataInfo.deptName }}</div>
+                </div>
+                <div class="info-item">
+                    <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>
+        </div>
+    </div>
+</template>
+<script>
+import { useInfo } from "@/api/allApi";
+export default {
+    data() {
+        return {
+            hoursTip:'你好！',
+            isActive: false,
+            dataInfo:{},
+            avatarUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
+        };
+    },
+    created() {
+        this.getUserInfo();
+        this.getHoursTip()
+    },
+    methods: {
+        getUserInfo(){
+            const parmas = {
+                userId:13683797487
+            }
+            useInfo(parmas).then(response=>{
+                this.dataInfo = response.data.data;
+                this.avatarUrl = this.dataInfo.httpFile + this.dataInfo.headImage;
+            })
+        },
+        getHoursTip() {
+            let date = new Date();
+            if (date.getHours() >= 0 && date.getHours() < 12) {
+                this.hoursTip = "上午好！"
+            } else if (date.getHours() >= 12 && date.getHours() < 18) {
+                this.hoursTip = "下午好！"
+            } else {
+                this.hoursTip = "晚上好！"
+            }
+        },
+
+     // 保存滚动值，这是兼容的写法
+     handleScroll() {
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
+        if (scrollTop >= 550) {
+            this.isActive = true
+        } else {
+            this.isActive = false
+        }
+    },
+},
+
+mounted() {
+    window.addEventListener('scroll', this.handleScroll, true)
+},
+
+destroyed() {
+    // 离开该页面需要移除这个监听的事件，不然会报错
+    window.removeEventListener('scroll', this.handleScroll)
+}
+}
+</script>
+<style>
+.aside {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+}
+
+.aside.index-aside {
+    width: 16.3rem;
+}
+
+.hot-list-wrap {
+    /* padding: 1.33rem 0 0.66rem; */
+    background-color: #fff;
+    border-radius: 4px;
+    margin-bottom: 1.25rem;
+}
+
+.timeline-index-view.sidebar-block {
+    box-shadow: none;
+}
+
+.sidebar-block {
+    background-color: #fff;
+    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
+    border-radius: 2px;
+    margin-bottom: 1rem;
+    font-size: 1.16rem;
+    line-height: 1.29;
+    border-radius: 4px;
+    color: #333;
+}
+
+.signin-tip {
+    padding: 20px;
+    background-color: #fff;
+    box-sizing: border-box;
+}
+
+.first-line {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.first-line .icon-text {
+    display: flex;
+    flex-direction: column;
+}
+
+.first-line .btn {
+    cursor: pointer;
+    border-radius: 4px;
+    height: 36px;
+    width: 74px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(30, 128, 255, .3);
+    background-color: rgba(30, 128, 255, .05);
+}
+
+.first-line .signed-text {
+    color: #abcdff;
+}
+.first-line .sign-text {
+    color: #1e80ff;
+}
+.first-line .btn-text {
+    font-size: 14px;
+    font-weight: 400;
+    white-space: nowrap;
+}
+
+.first-line .title {
+    color: #1d2129;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+}
+
+.second-line {
+    color: #8a919f;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 24px;
+    margin-top: 2px;
+}
+
+.first-line .title-days {
+    margin-left: 4px;
+    color: #1e80ff;
+}
+
+.sidebar-block .avatar {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.avatar .name {
+    margin-top: 2px;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #252933;
+}
+
+.sidebar-block .info {
+    margin-top: 5px;
+}
+
+.info .info-item {
+    font-size: 1rem;
+    display: flex;
+    justify-content: space-between;
+    line-height: 2rem;
+}
+
+.info-item .blue {
+    color: #1e80ff;
+}
+
+.sidebar-block.sticky-block {
+    padding: 20px;
+    background-color: #fff;
+    box-sizing: border-box;
+    position: fixed;
+    box-shadow: none;
+    opacity: 0;
+    transition: all .2s;
+    width: 16.3rem;
+    z-index: -1;
+    top: 67px;
+    pointer-events: none;
+}
+
+.index-aside.sticky.top .sticky-block {
+    top: 20px;
+}
+
+.index-aside.sticky .sticky-block {
+    opacity: 1;
+    top: 80px;
+    z-index: 5;
+    pointer-events: all;
+}</style>

src/main.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
+// import { msgTips } from "@/api/allApi";
 import router from './router'
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
@@ -8,7 +9,14 @@ import './assets/icon/iconfont.css';
 // import './permission' // permission control
 const baseUrl = '';
 Vue.prototype.baseUrl = baseUrl;
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+
+Vue.prototype.getMsgTips = function (){
+  msgTips().then(response => {
+    return response.data.data
+  })
+}
+// this.getMsgTips();
 Vue.use(ElementUI);
 new Vue({
   router,

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import PointsRank from '../views/PointsRank.vue'
 
 Vue.use(VueRouter)
 
@@ -12,12 +13,16 @@ const routes = [
   {
     path: '/home',
     component: HomeView,
-    redirect:'home/pointsMall',
+    redirect:'/home/index',
     children: [
       {
         path: '/home/index',
         component: () => import('@/views/HomeView/Index.vue')
       },
+      {
+        path: '/home/index/msgDetail',
+        component: () => import('@/views/HomeView/MsgDetail.vue')
+      },
       {
         path: '/home/employeeDynamics',
         component: () => import('@/views/HomeView/EmployeeDynamics.vue')
@@ -54,7 +59,18 @@ const routes = [
   },
   {
     path: '/pointsRank',
-    component: () => import('../views/PointsRank.vue')
+    component: PointsRank,
+    redirect:'/pointsRank/present',
+    children: [
+      {
+        path: '/pointsRank/present',
+        component: () => import('@/views/PointsRank/Present.vue')
+      },
+      {
+        path: '/pointsRank/history',
+        component: () => import('@/views/PointsRank/History.vue')
+      },
+    ]
   }
 ]
 

src/views/HomeView/Index.vue

@@ -4,7 +4,7 @@
             <div class="timeline-entry-list">
                 <div class="hot-list-wrap">
                     <el-empty :image-size="200" v-if="bannerList.length < 1"></el-empty>
-                    <el-carousel arrow="never" indicator-position="none" height="150px" trigger="click" :interval="5000" v-if="bannerList.length > 0">
+                    <el-carousel arrow="never" indicator-position="none" height="207px" trigger="click" :interval="5000" v-if="bannerList.length > 0">
                     <el-carousel-item v-for="(item, index) in bannerList" :key="index">
                         <router-link to="/productTrials"><img style="width: 100%; height: 100%" :src="item.url" /></router-link>
                     </el-carousel-item>
@@ -16,7 +16,7 @@
                     </div>
                     <el-empty v-if="dataList.length==0" :image-size="200"></el-empty>
                     <div v-else class="entry-list">
-                        <div v-for="(item,index) in dataList" :key="index" class="list-item">
+                        <div v-for="(item,index) in dataList" :key="index" @click="handleClickMag(item.msgId)" class="list-item">
                             <div class="meta-container">
                                 <div class="user-message">
                                         系统通知
@@ -38,81 +38,27 @@
                         </div>
                     </div>
                 </div>
-                
-               
-            </div>
-            <div class="index-aside aside" :class="{'sticky top':isActive}">
-                <div class="signin-tip sidebar-block signin">
-                    <div class="first-line">
-                        <div class="icon-text">
-                            <span class="title">
-                                连续签到<span class="title-days">77天</span>
-                            </span>
-                            <div class="second-line">点亮在社区的每一天</div>
-                        </div> 
-                        <button class="btn signedin-btn">
-                            <span class="btn-text signed-text">已签到</span>
-                        </button>
-                    </div>
-                </div>
-                <div class="signin-tip sidebar-block">
-                    <div class="avatar">
-                        <el-avatar :size="50" :src="circleUrl"></el-avatar>
-                        <span class="name">兔子爱吃香蕉皮儿</span>
-                    </div>
-                    <div class="info">
-                        <div class="info-item">
-                            <div class="item-itle">部门：</div>
-                            <div class="item-content">软件工程院</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="item-itle">我的积分：</div>
-                            <div class="item-content blue">10000积分</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="item-itle">我的勋章：</div>
-                            <div class="item-content blue">50个</div>
-                        </div>
-                    </div>
-                </div>
-                <div class="sidebar-block sticky-block">
-                    <div class="avatar">
-                        <el-avatar :size="50" :src="circleUrl"></el-avatar>
-                        <span class="name">兔子爱吃香蕉皮儿</span>
-                    </div>
-                    <div class="info">
-                        <div class="info-item">
-                            <div class="item-itle">部门：</div>
-                            <div class="item-content">软件工程院</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="item-itle">我的积分：</div>
-                            <div class="item-content blue">10000积分</div>
-                        </div>
-                        <div class="info-item">
-                            <div class="item-itle">我的勋章：</div>
-                            <div class="item-content blue">50个</div>
-                        </div>
-                    </div>
-                </div>
             </div>
+            <SiderInfo></SiderInfo>
         </div>
     </div>
 </template>
-<script lang="ts">
+<script>
 import { msgList } from "@/api/allApi";
+import SiderInfo from '@/components/SiderInfo.vue'
 export default{
+  components: {
+    SiderInfo
+  },
   data() {
     return {
-        isActive:false,
-        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
         bannerList: [
             {
                 url: require('@/assets/image/banner.png')
             },
-            {
-                url: require('@/assets/image/banner1.png')
-            }
+            // {
+            //     url: require('@/assets/image/banner1.png')
+            // }
         ],
         dataList:[],
         page:1,
@@ -120,10 +66,17 @@ export default{
     };
   },
   created(){
-    // this.getDataList();
+    this.getDataList();
   },
   methods:{
-    
+    handleClickMag(id) {
+        this.$router.push({
+            path: '/home/index/msgDetail',
+            query: {
+                id: id,
+            }
+        });
+    },
     getDataList(){
         let data = {
             limit:10,
@@ -146,12 +99,6 @@ export default{
     },
      // 保存滚动值，这是兼容的写法
      handleScroll () {
-        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
-        if(scrollTop >= 550){
-            this.isActive = true
-        }else{
-            this.isActive = false
-        }
         if((document.documentElement.scrollTop + window.innerHeight) == document.body.offsetHeight){
             if(this.page > this.pages){
                 return
@@ -182,133 +129,6 @@ export default{
     width: 720px;
     position: relative;
 }
-.aside{
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1;
-}
-.aside.index-aside{
-    width: 16.3rem;
-}
-.hot-list-wrap{
-    /* padding: 1.33rem 0 0.66rem; */
-    background-color: #fff;
-    border-radius: 4px;
-    margin-bottom: 1.25rem;
-}
-.timeline-index-view.sidebar-block {
-    box-shadow: none;
-}
-.sidebar-block{
-    background-color: #fff;
-    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
-    border-radius: 2px;
-    margin-bottom: 1rem;
-    font-size: 1.16rem;
-    line-height: 1.29;
-    border-radius: 4px;
-    color: #333;
-}
-.signin-tip{
-    padding: 20px;
-    background-color: #fff;
-    box-sizing: border-box;
-}
-.first-line{
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-}
-.first-line .icon-text{
-    display: flex;
-    flex-direction: column;
-}
-.first-line .btn{
-    border-radius: 4px;
-    height: 36px;
-    width: 74px;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid rgba(30,128,255,.3);
-    background-color: rgba(30,128,255,.05);
-}
-.first-line .signed-text{
-    color: #abcdff;
-}
-.first-line .btn-text{
-    color: #1e80ff;
-    font-size: 14px;
-    font-weight: 400;
-    white-space: nowrap;
-}
-.first-line .title{
-    color: #1d2129;
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 24px;
-}
-.second-line{
-    color: #8a919f;
-    font-size: 12px;
-    font-weight: 400;
-    line-height: 24px;
-    margin-top: 2px;
-}
-.first-line .title-days{
-    margin-left: 4px;
-    color: #1e80ff;
-}
-.sidebar-block .avatar{
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-.avatar .name{
-    margin-top: 2px;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #252933;
-}
-.sidebar-block .info{
-    margin-top: 5px;
-}
-.info .info-item{
-    font-size: 1rem;
-    display: flex;
-    justify-content: space-between;
-    line-height: 2rem;
-}
-.info-item .blue{
-    color: #1e80ff;
-}
-.sidebar-block.sticky-block{
-    padding: 20px;
-    background-color: #fff;
-    box-sizing: border-box;
-    position: fixed;
-    box-shadow: none;
-    opacity: 0;
-    transition: all .2s;
-    width: 16.3rem;
-    z-index: -1;
-    top: 67px;
-    pointer-events: none;
-}
-.index-aside.sticky.top .sticky-block{
-    top: 20px;
-}
-.index-aside.sticky .sticky-block{
-    opacity: 1;
-    top: 80px;
-    z-index: 5;
-    pointer-events: all;
-}
 .entry-list-container{
     background-color: #fff;
     border-radius: 4px;

src/views/HomeView/MsgDetail.vue

@@ -0,0 +1,102 @@
+<template>
+    <div class="timeline-container">
+        <div class="timeline-content">
+            <div class="timeline-entry-list">
+                <div class="article">
+                    <div class="article-title">
+                        {{ data.title }}
+                    </div>
+                    <div class="author-info-block">
+                        <div class="meta-box"> 
+                            {{ data.createTime }}
+                        </div>
+                    </div>
+                    <div class="markdown-body" v-html="data.content"></div>
+                </div>
+            </div>
+            <SiderInfo></SiderInfo>
+        </div>
+    </div>
+</template>
+<script>
+import { msgInfo } from "@/api/allApi";
+import SiderInfo from '@/components/SiderInfo.vue'
+export default{
+  components: {
+    SiderInfo
+  },
+  data() {
+    return {
+        data:{},
+    };
+  },
+  created(){
+    this.getDataInfo(this.$route.query.id);
+  },
+  methods:{
+        getDataInfo(id){
+            msgInfo({msgId:id}).then(response => {
+                    this.data = response.data.data;
+                }).catch(() => {})
+        },
+  },
+}
+</script>
+<style>
+.timeline-container{
+    margin: 0 auto;
+}
+.timeline-entry-list{
+    margin-right: 17.5rem;
+    border-radius: 2px;
+    width: 720px;
+    position: relative;
+}
+.timeline-entry-list .article{
+    border-radius: 4px 4px 0 0;
+    position: relative;
+    padding-top: 2.667rem;
+    z-index: 1;
+    overflow: hidden;
+    background-color: #fff;
+    padding-left: 2.67rem;
+    padding-right: 2.67rem;
+    margin-bottom: 2rem;
+    box-sizing: border-box;
+}
+.article .article-title{
+    margin: 0 0 1rem;
+    font-size: 1.667rem;
+    font-weight: 600;
+    line-height: 1.31;
+    color: #252933;
+}
+.article .author-info-block{
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.667rem
+}
+.article .markdown-body {
+    overflow: hidden;
+    line-height: 1.75;
+    font-size: 15px;
+    background-image: linear-gradient(90deg,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0),linear-gradient(1turn,rgba(72,42,10,.05) 5%,rgba(72,42,10,0) 0);
+    background-size: 20px 20px;
+    background-position: 50%;
+    padding-top: 0!important;
+}
+.markdown-body img {
+    max-width: 100%;
+}
+.markdown-body p {
+    color: #412c0c;
+    letter-spacing: 1px;
+    font-weight: 400;
+}
+.author-info-block .meta-box{
+    font-size: 1rem;
+    color: #8a919f;
+    margin-top: 2px;
+    line-height: 22px;
+}
+</style>

src/views/HomeView/MyCenter.vue

@@ -191,8 +191,8 @@ export default {
     },
     created() {
         
-        // this.getSecondList('1,2,3');
-        // this.getThirdList();
+        this.getSecondList('1,2,3');
+        this.getThirdList();
     },
     methods: {
         getFirstList(val){

src/views/HomeView/PointsMall.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="right-wrap">
-        <img src="//lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/banner.d73d31c.png" alt="banner" class="banner">
+        <img src="./../../assets/image/banner4.png" alt="banner" class="banner">
         <div class="notice-board">
             <div class="notice-header">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
@@ -359,8 +359,8 @@ button {
 }
 
 .notice-board {
-    padding: 1.667rem;
-    margin-bottom: 1.333rem;
+    padding: 1rem 1.667rem;
+    margin-bottom: 16px;
     background: #fff;
     border-radius: 4px;
 }
@@ -372,7 +372,7 @@ button {
 
 .notice-board .notice-header .title {
     margin-left: 1rem;
-    font-size: 1.333rem;
+    font-size: 1rem;
     line-height: 2rem;
     font-weight: 500;
     color: #252933;
@@ -381,8 +381,8 @@ button {
 .notice-board .notice-content {
     margin-top: 0.2rem;
     margin-left: 2.5rem;
-    font-size: 0.94rem;
-    line-height: 1.833rem;
+    font-size: 0.8rem;
+    line-height: 0.5rem;
     white-space: pre-line;
     color: #515767;
 }

src/views/PointsRank.vue

@@ -1,5 +1,27 @@
 <template>
-    <div class="pointsRank">
-      <h1>积分排行</h1>
-    </div>
-  </template>
+  <div class="main-container">
+    <AppSidebar></AppSidebar>
+    <router-view />
+  </div>
+</template>
+
+<script>
+import AppSidebar from '@/components/AppSidebar1.vue'
+
+export default {
+  name: 'PointsRank',
+  components: {
+    AppSidebar
+  }
+}
+</script>
+<style>
+.main-container{
+  position: relative;
+  margin: 0 auto;
+  width: 100%;
+  max-width: 1200px;
+  margin-top: 1.66rem;
+  display: flex;
+}
+</style>

src/views/PointsRank/History.vue

@@ -0,0 +1,195 @@
+
+<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>
+</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>
+ .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;
+   color: #1e80ff;
+ }
+ .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/PointsRank/Present.vue

@@ -0,0 +1,195 @@
+
+<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>
+</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>
+  .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;
+    color: #1e80ff;
+  }
+  .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>