效果图:
TIM截图20190105170021.png
css
/*@zxyuns 2019-01-05 新增会员优化*/
.brand-btn {
font-size: 24rpx;
border: 2rpx solid #dedede;
border-radius: 6rpx;
background: #f4f4f4;
text-align: center;
display: inline-block;
min-width: 80rpx;
height: 56rpx;
line-height: 56rpx;
margin-right: 20rpx;
padding: 0 40rpx;
}
.brand-btn.active {
color: #006BFF;
background: #FFFFFF;
border: 1rpx solid #006BFF;
}
.tl-p-40{
margin: 40rpx 40rpx 0 40rpx;
}
.tl-content{
display: flex;
flex-direction: row;
justify-content:center;
}
.tl-flex{ /*绝对居钟*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tl-flex2{/*垂直居中*/
display: flex;
flex-direction: column;
justify-content: center;
}
.tl-img-34{
width: 76rpx;
height: 76rpx;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.tl-title-14{
font-size:28rpx;
font-family:'PingFang-SC-Medium';
font-weight:600;
color:#333333;
}
.tl-title-12{
font-size:24rpx;
font-family:'PingFang-SC-Medium';
font-weight:500;
color:#333333;
}
.tl-title-9{
font-size:19rpx;
font-family:'PingFang-SC-Medium';
font-weight:500;
color:#333333;
}
.tl-title-11{
font-size:22rpx;
font-family:'PingFang-SC-Medium';
font-weight:500;
color:#999999;
}
.tl-blue{
color: #006BFF;
}
.tl-time{
font-size:24rpx;
font-family:'PingFang-SC-Medium';
font-weight:500;
color:#999999;
line-height:36rpx;
margin-top: 20rpx;
margin-bottom: 43rpx;
}
html
<view class="tl-content">
<view class="tl-flex" style="width:76rpx;height:166rpx;align-items: center;margin:0 auto;">
<image class="tl-img-34" src="https://file.snailpet.cn/63/51/63517d4b8f58172fd70e95131f55ba56.jpg"></image>
</view>
<view class="tl-flex2" style="width:430rpx;height:166rpx;margin-left: 24rpx">
<view class="tl-title-14">比瑞吉狗粮</view>
<view class="tl-title-9">[余额]</view>
<view class="tl-title-11">原价:¥78 <text class="tl-title-11">会员价:¥80</text></view>
</view>
<view class="tl-flex2" style="flex:1;height:166rpx;">
<view class="tl-title-12">总优惠:¥888</view>
</view>
</view>
<view class="tl-content">
<view class="tl-flex" style="width:76rpx;height:166rpx;align-items: center;margin:0 auto;">
<image class="tl-img-34" src="https://file.snailpet.cn/63/51/63517d4b8f58172fd70e95131f55ba56.jpg"></image>
</view>
<view class="tl-flex2" style="width:430rpx;height:166rpx;margin-left: 24rpx">
<view class="tl-title-14">比瑞吉狗粮</view>
<view class="tl-title-9">[余额]</view>
<view class="tl-title-11">原价:¥78 <text class="tl-title-11">会员价:¥80</text></view>
</view>
<view class="tl-flex2" style="flex:1;height:166rpx;">
<view class="tl-title-12">总优惠:¥888</view>
</view>
</view>
网友评论