小程序模板网

微信小程序 open-data更改样式 open-data 显示头像 圆形

废话不多说,直接看效果:

效果一:

代码如下:

 

  1. <view class='zhubo'>
  2. <view class='zhuboLeft'>
  3. <view class='zhubo-avater'>
  4. <image class='zhuboIcon' src='../../image/video-list/avater.jpg'></image>
  5. </view>
  6. <view class='zhuboDes'>
  7. <view class='zhubo-name'>东辰-寒冰</view>
  8. <view class='zhubo-from'>来自虎牙直播</view>
  9. </view>
  10. </view>
  11. <view class='zhubo-Right'>关注</view>
  12. </view>
 

  1. /*主播信息 */
  2. .zhubo{
  3. margin: 0 28rpx 0;
  4. height: 144rpx;
  5. display:flex;
  6. justify-content:space-between;
  7. align-items: center;
  8. }
  9. .zhuboIcon{
  10. width:80rpx;
  11. height: 80rpx;
  12. border-radius: 50%;
  13. overflow: hidden;
  14. }
  15. .zhuboLeft{
  16. display: flex;
  17. }
  18. .zhubo-avater{
  19. padding-right: 20rpx;
  20. display: flex;
  21. align-items: center;
  22. }
  23. .zhubo-name{
  24. font-weight: 700;
  25. }
  26. .zhubo-from{
  27. color: #A6A6A6;
  28. }

效果二:

 

  1. <view class="userinfo">
  2. <view class="userinfo-avatar">
  3. <open-data type="userAvatarUrl"></open-data>
  4. </view>
  5. <open-data type="userNickName"></open-data>
  6. </view>
 

  1. .userinfo {
  2. position: relative;
  3. width: 750rpx;
  4. height: 320rpx;
  5. color: #fff;
  6. display: flex;
  7. flex-direction: column;
  8. align-items: center;
  9. }
  10.  
  11. .userinfo-avatar {
  12. overflow:hidden;
  13. display: block;
  14. width: 160rpx;
  15. height: 160rpx;
  16. margin: 20rpx;
  17. margin-top: 50rpx;
  18. border-radius: 50%;
  19. border: 2px solid #fff;
  20. box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  21. }
  22.  
  23. .userinfo{
  24. /* color: #fff; */
  25. font-size: 14px;
  26. background-color: #c0c0c0;
  27. border-radius:40%;
  28. }

以上就是对新组件open-data样式更改的总结,希望我的文章能够帮助到你!



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24562.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询