<view class=”market-card”>
<view class=”card-cont”>
<view class=”item”>
<view class=”box”>
<view class=”label”>认购</view>
<view class=”value”>6666666</view>
<view class=”line”>
<view class=”step”></view>
</view>
<view class=”ul”>
<view class=”li”>
<text class=”k”>实际</text>
<text class=”v”>6666666</text>
</view>
<view class=”li”>
<text class=”k”>目标</text>
<text class=”v”>6666666</text>
</view>
</view>
<view class=”p”>
<text class=”k”>套数</text>
<text class=”v”>100套</text>
</view>
<view class=”p”>
<text class=”k”>面积</text>
<text class=”v”>8888平</text>
</view>
</view>
</view>
<view class=”item”>
<view class=”box”>
<view class=”label”>认购</view>
<view class=”value”>6666666</view>
<view class=”line”></view>
<view class=”ul”>
<view class=”li”>
<text class=”k”>实际</text>
<text class=”v”>6666666</text>
</view>
<view class=”li”>
<text class=”k”>目标</text>
<text class=”v”>6666666</text>
</view>
</view>
<view class=”p”>
<text class=”k”>套数</text>
<text class=”v”>100套</text>
</view>
<view class=”p”>
<text class=”k”>面积</text>
<text class=”v”>8888平</text>
</view>
</view>
</view>
<view class=”item”>
<view class=”box”>
<view class=”label”>认购</view>
<view class=”value”>6666666</view>
<view class=”line”></view>
<view class=”ul”>
<view class=”li”>
<text class=”k”>实际</text>
<text class=”v”>6666666</text>
</view>
<view class=”li”>
<text class=”k”>目标</text>
<text class=”v”>6666666</text>
</view>
</view>
</view>
</view>
</view>
</view>
padding:0 8rpx;
}
.market-card .card-cont{
display:flex;
justify-content: center;
align-items: stretch; /* 拉伸子项的高度 */
}
.market-card .item{
width:33%;
font-size:28rpx;
display: flex; /* 添加 Flex 属性 */
flex-direction: column; /* 纵向布局，确保子元素垂直排列 */
}
.market-card .item .box{
margin:8rpx;
padding:24rpx;
background: #f2f2f2;
border-radius: 12rpx;
height: 100%;/* .item已经一致，.box有底色，要把高度扩充到100%*/
}