先外后里,由上而下,由左而右,盒子布局
分两部分布局,头部tab、列表内容。
html
<!-- 头部 -->
<view class='tab'>
<view class="tab-new {{selected_new?'active':'default'}}" bindtap="selected_new">最新理财</view>
<view class="tab-old {{selected_old?'active':'default'}}" bindtap="selected_old">往期理财</view>
</view>
<!-- 列表 -->
<view class='list'>
<view class='list-item'>
<view class='list-item-left'>
<view class="left-yield">2.5~4.5%</view>
<view class="left-yield-name">预计年化收益率</view>
<view class="left-property">产品性质:保本</view>
</view>
<view class='list-item-right'>
<view class='right-name'>1910期"鑫湖通"</view>
<view>起购金额:<span class='right-font-black'>5万</span></view>
<view>理财期限:<span class='right-font-black'>90天</span></view>
<view>开始时间:2019.03.21</view>
<view>结束时间:2019.03.21</view>
</view>
<view class="list-item-top top-rec">荐</view>
<image class="list-item-arrow" src="/img/common/right.png"></image>
</view>
<view class='list-item'>
<view class='list-item-left'>
<view class="left-yield">2.5~4.5%</view>
<view class="left-yield-name">预计年化收益率</view>
<view class="left-property">产品性质:保本</view>
</view>
<view class='list-item-right'>
<view class='right-name'>1910期"鑫湖通"</view>
<view>起购金额:<span class='right-font-black'>5万</span></view>
<view>理财期限:<span class='right-font-black'>90天</span></view>
<view>开始时间:2019.03.21</view>
<view>结束时间:2019.03.21</view>
</view>
<view class="list-item-top top-rec">荐</view>
<image class="list-item-arrow" src="/img/common/right.png"></image>
</view>
<view class='list-item'>
<view class='list-item-left'>
<view class="left-yield">2.5~4.5%</view>
<view class="left-yield-name">预计年化收益率</view>
<view class="left-property">产品性质:保本</view>
</view>
<view class='list-item-right'>
<view class='right-name'>1910期"鑫湖通"</view>
<view>起购金额:<span class='right-font-black'>5万</span></view>
<view>理财期限:<span class='right-font-black'>90天</span></view>
<view>开始时间:2019.03.21</view>
<view>结束时间:2019.03.21</view>
</view>
<view class="list-item-top top-new">新</view>
<image class="list-item-arrow" src="/img/common/right.png"></image>
</view>
</view>
css
/* 先外后里,由上而下,由左而右 大小要计算 */
.tab {
display: flex;
height: 70rpx;
line-height: 70rpx;
margin-top: 45rpx;
}
.tab .tab-new {
width: 50%;
text-align: center;
}
.tab .tab-old {
width: 50%;
text-align: center;
}
.tab .active {
font-size: 34rpx;
font-weight: bold;
color: #222;
position: relative;
}
.tab .active::after {
content: "";
width: 150rpx;
height: 6rpx;
background: rgba(2, 101, 255, 1);
position: absolute;
bottom: 0rpx;
left: 50%;
transform: translateX(-50%);
}
.tab .default {
font-size: 28rpx;
font-weight: 500;
color: #666;
}
.list {
padding: 40rpx 20rpx;
width: 100%;
}
.list .list-item {
margin-bottom: 30rpx;
padding-top: 15rpx;
width: 100%;
height: 244rpx;
display: flex;
position: relative;
}
.list .list-item .list-item-left {
width: 320rpx;
padding-left: 23rpx;
}
.list-item-left .left-yield {
line-height: 70rpx;
font-size: 50rpx;
color: rgba(255, 0, 0, 1);
padding-top:25rpx;
}
.list-item-left .left-yield-name {
font-size:26rpx;
color:rgba(102,102,102,1);
line-height:30rpx;
}
.list-item-left .left-property {
width: auto;
font-size:26rpx;
color:rgba(255,98,4,1);
line-height:30rpx;
border:1rpx solid rgba(255,98,4,1);
border-radius:4rpx;
margin-top:10rpx;
float:left;
}
.list .list-item .list-item-right {
width: 390rpx;
font-size: 24rpx;
color: rgba(102, 102, 102, 1);
line-height: 38rpx;
}
.list-item-right .right-name {
font-size: 30rpx;
color: rgba(34, 34, 34, 1);
line-height: 48rpx;
}
.list-item-right .right-font-black {
font-size:26rpx;
color:#333333;
}
.list .list-item .list-item-top {
position: absolute;
top: 0rpx;
right: 23rpx;
display: none;
font-weight: 400;
font-size: 30rpx;
color: #fff;
padding: 8rpx;
border-bottom-left-radius: 10rpx;
border-bottom-right-radius: 10rpx;
}
.list .list-item .top-rec {
display: block;
background-color: #ff404a;
}
.list .list-item .top-new {
display: block;
background-color: #0265ff;
}
.list .list-item .list-item-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 16rpx;
height: 28rpx;
right: 38rpx;
}