如果实现以下效果, 开发者需要怎么样做呢?
在index.wxml中增加以下布局:
<!-- 一行2列布局,左竖线右文字-->
<view class="text">
<view class="line-y"></view>
<text>精品推荐</text>
</view>
<!--一列2列 布局
精品推荐-->
<view class="cps2">
<view class="cp-item2">
<image src="/images/juhui.jpeg" class="cp-image2"></image>
<text>产品名称01</text>
<text>¥ 21.6</text>
</view>
<view class="cp-item2">
<image src="/images/ersongyi.jpeg" class="cp-image2"></image>
<text>产品名称02</text>
<text>¥ 185.6</text>
</view>
</view>
在index.wxss文件中增加以下样式:
/** 一行2列布局, 左竖线 右文字***/
.line-y{
width: 3px;
height: 18px;
display: inline-block;
background-color:brown;
margin-left:1px;
}
view.text{
display: flex;
align-items:center;
position: relative;
padding:6px;
background-color: aliceblue;
}
view.text text{
margin-left:14px;
}
/**精品推荐 1行2列图片的样式**/
.cps2{
display: flex;
flex-wrap: wrap; /**自动换行***/
margin-top:10rpx;
}
.cp-item2{
width: 48%;
display: flex;
align-items:center;
flex-direction: column;
padding:5rpx;
}
.cp-image2{
width: 330rpx;
height: 330rpx;
}
.cp-item2 text{
padding-top:10rpx;
font-size: 35rpx;
width: 100%;
text-align:left;
background-color:aliceblue;
margin-left:20rpx;
}
实现效果如下 :