1.修改index.vue的body样式，写入overflow: hidden;溢出隐藏，使绿色部分也能变成圆角，并删除绿色背景，重新配置swiper-item
2、构建主体首页布局
<template>
<view class="homeLayout">
<view class="head">
<home-head>
</home-head>
</view>
<view class="body">
<view class="swiperOut">
<swiper vertical>
<swiper-item v-for="(item,index) in 5">
<view class="content">
<view class="soupTapGroup">
<view class="tab">
<view class="icon"><image src="../../static/images/du-icon.png" mode="aspectFill"></image></view>
<view class="text">毒鸡汤</view>
</view>
<view class="tab">
<view class="icon"><image src="../../static/images/xin-icon.png" mode="aspectFill"></image></view>
<view class="text">心灵鸡汤</view>
</view>
</view>
<view class="main">
<text>鸡汤内容</text>
</view>
<view class="author">
<view class="line"></view>
<view class="userinfo">
<view class="avatar">
<image src="../../static/images/self.png" mode="aspectFill"></image>、//aspectfill保证图片完全展示
</view>
<view class="name"></view>
<view class="from"></view>
</view>
</view>
</view>
<view class="info">
操作按钮
</view>
</swiper-item>
</swiper>
</view>
<view class="progress">
<view class="line"></view>
</view>
</view>
</view>
</template>
<script setup>
</script>
<style lang="scss">
.homeLayout{
height: 100vh;
background: #BDE1FB;
display: flex;
flex-direction: column;
.head{
}
.body{
flex: 1;
background: #fff;
border-radius: 50rpx 50rpx 0 0;
overflow: hidden;
.swiperOut{
height: calc(100% - 10rpx);
swiper{
height: 100%;
swiper-item{
.content{
height: calc(100% - 130rpx);
border: 1px solid red;
display: flex;
justify-content: center;
flex-direction: column;
padding: 0 30rpx;
.soupTapGroup{
.tab{
height: 56rpx;
width: fit-content;
background: #aaa;
display: flex;
align-items: center;
font-size: 26rpx;
font-weight: 400;
letter-spacing: normal;//字间间距
padding: 0 20rpx;
border-radius: 56rpx;
.icon{
display: flex;
height: 36rpx;
width: 36rpx;
border-radius: 50%;
display: flex;
align-items: center; //垂直居中
justify-content: center; //水平居中
image{
width: 100%;
height: 100%;
}
}
.text{
padding-left: 10rpx;
}
}
.tab:nth-child(1){
background: #FFF3F7;
.icon{
background: linear-gradient(to right,#f83162,#ff7795); //因为上面的写了俩个tab，这里用nth-child表示第一项和第二项
}
}
.tab:nth-child(2){
background: #EDFDF0;
.icon{
background: linear-gradient(to right,#4f9153,#4bbb8b);
}
}
}
.author{
.avatar{
display: flex;
height: 40rpx;
width: 40rpx;
image{
width: 100%;
height: 100%;
}
}
}
}
.info{
height: 130rpx;
border: 1px solid green;
}
}
}
}
.progress{
height: 10rpx;
width: 100%;
background: #eee;
.line{
height: 100%;
width: 50%;
background: linear-gradient(to right,#BDE1FB,#74dbef);
}
}
}
}
</style>
