pointsMall/src/views/HomeView/Index.vue

<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>