修改

src/App.vue

@@ -1,27 +1,56 @@
 <template>
   <div id="app">
     <div class="view-container">
-      <AppHeader></AppHeader>
+      <AppHeader :visible="visible"></AppHeader>
       <router-view />
+      <AppBackTop></AppBackTop>
     </div>
-    
   </div>
 </template>
 <script lang="ts">
 import AppHeader from '@/components/AppHeader.vue';
+import AppBackTop from '@/components/AppBackTop.vue';
 export default {
   name: 'app',
   components: {
     AppHeader,
+    AppBackTop
   },
   data() {
     return {
       isGray: false,
+      visible:true,
     };
   },
-  created() {
-    
+  methods:{
+    // 保存滚动值，这是兼容的写法
+    handleScroll () {
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+          //变量scrollTop是滚动条滚动时，距离顶部的距离
+      // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+    //   //变量windowHeight是可视区的高度
+    //   var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
+    //   //变量windowHeight是可视区的高度
+    //   var scrollHeight =document.documentElement.scrollHeight || document.body.scrollHeight;
+    //       //滚动条到底部的条件
+    //    if(scrollTop + windowHeight == scrollHeight){
+    //         //你要触发的方法
+    //     }
+        if(scrollTop >= 80){
+            this.visible = false;
+        }else{
+          this.visible = true;
+        }
+    },
   },
+  mounted () {
+    window.addEventListener('scroll', this.handleScroll, true)
+  },
+
+  destroyed () {
+    // 离开该页面需要移除这个监听的事件，不然会报错
+    window.removeEventListener('scroll', this.handleScroll)
+  }
 }
 </script>
 <style>
@@ -31,42 +60,4 @@ export default {
   width: 100%;
   max-width: 1200px;
 }
-
-.header-box {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  background: #fff;
-  border-bottom: 1px solid #f1f1f1;
-  color: #909090;
-  height: 5rem;
-  z-index: 250;
-}
-
-.header-item {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  padding: 0 80px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #515767;
-}
-
-nav a.route-active {
-  color: #1e80ff;
-}
-
-
-.header-item i {
-  font-size: 30px;
-  margin-bottom: 5px;
-}
 </style>

src/components/AppHeader.vue

@@ -1,9 +1,9 @@
 <template>
     <div style="position: relative;height: 5rem;">
-        <nav class="header-box">
+        <nav class="header-box" :class="{'visible':visible}">
             <router-link to="/home">
                 <div class="header-item">
-                    <i class="icon-mall-gongnengguanli"></i>功能管理
+                    <i class="icon-mall-gongnengguanli"></i>功能列表
                 </div>
             </router-link>
             <router-link to="/noticeCenter">
@@ -21,4 +21,54 @@
             </router-link>
         </nav>
     </div>
-</template>
+</template>
+<script lang="ts">
+export default {
+    props:['visible'],
+}
+</script>
+
+<style>
+.header-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-bottom: 1px solid #f1f1f1;
+  color: #909090;
+  height: 5rem;
+  z-index: 250;
+  transition: all .2s;
+  transform: translate3d(0,-100%,0);
+}
+
+.header-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  padding: 0 80px;
+}
+
+nav a {
+  font-weight: bold;
+  color: #515767;
+}
+
+nav a.route-active {
+  color: #1e80ff;
+}
+
+
+.header-item i {
+  font-size: 30px;
+  margin-bottom: 5px;
+}
+.header-box.visible{
+    transform: translateZ(0);
+}
+</style>

src/components/AppSidebar.vue

@@ -19,13 +19,13 @@ export default {
   data() {
     return {
         sideBarList:[
-            // {
-            //     value:'employeeDynamics',
-            //     name:'首页',
-            //     path:'/home/employeeDynamics',
-            //     icon:'icon-mall-shouye',
-            //     checked:false,
-            // },
+            {
+                value:'index',
+                name:'首页',
+                path:'/home/index',
+                icon:'icon-mall-shouye',
+                checked:false,
+            },
             // {
             //     value:'',
             //     name:'每日签到',
@@ -73,7 +73,6 @@ export default {
         pointsMall: false,
         welfareList: false,
         festiveEvents: false,
-        scrollTop: 0,
         isActive:false,
     };
   },
@@ -90,29 +89,13 @@ export default {
     },
     // 保存滚动值，这是兼容的写法
     handleScroll () {
-      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-          //变量scrollTop是滚动条滚动时，距离顶部的距离
-      var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
-    //   //变量windowHeight是可视区的高度
-    //   var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
-    //   //变量windowHeight是可视区的高度
-    //   var scrollHeight =document.documentElement.scrollHeight || document.body.scrollHeight;
-    //       //滚动条到底部的条件
-    //    if(scrollTop + windowHeight == scrollHeight){
-    //         //你要触发的方法
-    //     }
-    //     console.log(scrollTop);
+        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
         if(scrollTop >= 80){
             this.isActive = true
+        }else{
+            this.isActive = false
         }
     },
-
-    // 滚动条回到顶部
-    backTop () {
-      if (this.scrollTop > 10) {
-        document.documentElement.scrollTop = 0
-      }
-    }
   },
   watch: {
     $route:'getRoute'
@@ -131,6 +114,24 @@ export default {
 }
 </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;

src/router/index.js

@@ -14,6 +14,10 @@ const routes = [
     component: HomeView,
     redirect:'home/pointsMall',
     children: [
+      {
+        path: '/home/index',
+        component: () => import('@/views/HomeView/Index.vue')
+      },
       {
         path: '/home/employeeDynamics',
         component: () => import('@/views/HomeView/EmployeeDynamics.vue')

src/views/HomeView.vue

@@ -15,7 +15,7 @@ export default {
   }
 }
 </script>
-<style scoped>
+<style>
 .main-container{
   position: relative;
   margin: 0 auto;
@@ -24,22 +24,29 @@ export default {
   margin-top: 1.66rem;
   display: flex;
 }
-.index-nav{
-  width: 180px;
-    position: -webkit-sticky;
+.myTabs {
+    background: #fff;
+}
+
+.myTabs .el-tabs__header {
     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; */
+    z-index: 2;
+    top: 0px;
+    background: #fff;
 }
-.index-nav-top{
-    top: 105px;
-    max-height: calc(100vh - 40px);
+
+.myTabs .el-tabs__item {
+    height: 60px;
+    line-height: 60px;
+    font-size: 18px;
+    font-weight: 500;
 }
-</style>
+
+.myTabs .el-tabs__item.is-active {
+    color: #1e80ff;
+}
+
+.myTabs .el-tabs__active-bar {
+
+    background-color: #1e80ff;
+}</style>

src/views/HomeView/Index.vue

@@ -0,0 +1,250 @@
+<template>
+    <div class="timeline-container">
+        <div class="timeline-content">
+            <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-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>
+                    </el-carousel>
+                </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>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+export default {
+  name: 'AppSidebar',
+  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')
+        }
+      ],
+    };
+  },
+  methods:{
+     // 保存滚动值，这是兼容的写法
+     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>
+.timeline-container{
+    margin: 0 auto;
+    height: 1500px;
+}
+.timeline-entry-list{
+    margin-right: 17.5rem;
+    border-radius: 2px;
+    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.66rem;
+}
+.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;
+}
+</style>

src/views/HomeView/MyCenter.vue

@@ -389,31 +389,4 @@ svg:not(:root) {
 .status .use-btn {
     color: #1e80ff;
 }
-</style>
-<style>
-.myTabs {
-    background: #fff;
-}
-
-.myTabs .el-tabs__header {
-    position: sticky;
-    z-index: 2;
-    top: 80px;
-    background: #fff;
-}
-
-.myTabs .el-tabs__item {
-    height: 60px;
-    line-height: 60px;
-    font-size: 18px;
-    font-weight: 500;
-}
-
-.myTabs .el-tabs__item.is-active {
-    color: #1e80ff;
-}
-
-.myTabs .el-tabs__active-bar {
-
-    background-color: #1e80ff;
-}</style>
+</style>

src/views/HomeView/PointsMall.vue

@@ -414,29 +414,4 @@ button {
     background-color: #1e80ff;
     color: #fff;
     box-shadow: 0 1px 2px 0 rgba(0,0,0,.05), 0 1px 2px 0 rgba(0,0,0,.05);
-}</style>
-<style>.myTabs {
-    background: #fff;
-}
-
-.myTabs .el-tabs__header {
-    position: sticky;
-    z-index: 2;
-    top: 80px;
-    background: #fff;
-}
-
-.myTabs .el-tabs__item {
-    height: 60px;
-    line-height: 60px;
-    font-size: 18px;
-    font-weight: 500;
-}
-.myTabs .el-tabs__item.is-active {
-    color: #1e80ff;
-}
-.myTabs .el-tabs__active-bar {
-   
-    background-color: #1e80ff;
-}
-</style>
+}</style>