常用样式,以便日后使用
html:
<view class='pageview'>
<view class="pjo-list t-flex t-j-b t-a-i-c" bindtap='getMissionDetails'>
<view class='info-left t-flex'>
<view class='info-img margin-l30'>
<image src='../../../images/lg.png'></image>
</view>
<view class='info-text t-flex t-column t-j-b margin-l30'>
<text class='t-ov line50 font30 col-000'>15-16栋墙面粉刷</text>
<text class='t-ov line50 font30 col-c4c4c4'>衡阳胜利驾校 </text>
<text class='t-ov line50 font30 col-c4c4c4'>衡阳胜利驾校 </text>
</view>
</view>
<view class='info-right t-flex t-j-c t-a-i-c margin-r30'>
<text class='font32 col-e74a45'>已加入</text>
</view>
</view>
</view>
css:
.t-flex{
display: flex;
}
.t-j-b{
justify-content: space-between;
}
.t-a-i-c{
align-items: center;
}
.t-column{
flex-direction: column;
}
.margin-l30{
margin-left: 30rpx;
}
.font30{
font-size: 30rpx;
}
.col-000{
color: #000000;
}
.col-c4c4c4{
color: #c4c4c4;
}
.col-9f9f9f{
color: #9f9f9f;
}
.t-ov{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line50{
line-height: 50rpx;
}
.pageview{
width: 100%;
}
.pjo-list{
width: 100%;
height: 250rpx;
}
.info-img{
width: 150rpx;
height: 150rpx;
}
.info-img image{
width: 100%;
height: 100%;
}
.info-text text{
width: 350rpx;
}
.info-right{
width: 150rpx;
height: 100%;
}