<template>
<view class="big-box flex-col align-center">
<top-navigation :isBack="true">
</top-navigation>
<view class="title-box ">
<view class="title">
打卡排行榜
</view>
<view class="num justify-center align-center">
第{{88}}期
</view>
</view>
<image class="jiangbei" src="/static/images/signgame/jiangbei.png" mode=""></image>
<view class="scroll-box border ">
<scroll-view scroll-y="true" >
<view class="flex-col align-center">
<view v-for="i in 100 " class="rank-item">
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
export default {
}
</script>
<style>
@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
.big-box {
position: relative;
height: 100vh;
overflow: hidden;
background-image: linear-gradient(180deg , #EC8445, #F2B36B);
.num{
padding:20rpx;
border-radius: 1000rpx;
width: max-content;
background: #FFF;
}
.title-box{
position: absolute;
width: 100%;
}
.jiangbei{
position: fixed;
top: 0;
right: 50rpx;
width: 403.47rpx;
height: 339.58rpx;
}
.scroll-box{
overflow: hidden;
width: 667.36rpx;
flex: 1;
margin-top: calc(339.58rpx - 88rpx);
scroll-view{
height:100%
}
.rank-item{
width: 618rpx;
height: 97rpx;
background: #FFF1E5;
margin-bottom: 13rpx;
}
}
}
</style>
通过给页面一个flex布局 ,在scroll-view外层套一层view添加css flex:1进行撑满,需要注意最大盒子设置overflow:hidden, scroll-view的高度设置100%