小程序名片卡片

常用样式,以便日后使用

QQ截图20190718153927.png
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%;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容