作者:吖鸟集团总公司 | 来源:互联网 | 2023-06-12 14:37
废话不多说,直接看效果:
效果一:
代码如下:
<view class='zhubo'>
<view class='zhuboLeft'>
<view class='zhubo-avater'>
<image class='zhuboIcon' src='../../image/video-list/avater.jpg'>image>
view>
<view class='zhuboDes'>
<view class='zhubo-name'>东辰-寒冰view>
<view class='zhubo-from'>来自虎牙直播view>
view>
view>
<view class='zhubo-Right'>关注view>
view>
/*主播信息 */
.zhubo{
margin: 0 28rpx 0;
height: 144rpx;
display:flex;
justify-content:space-between;
align-items: center;
}
.zhuboIcon{
width:80rpx;
height: 80rpx;
border-radius: 50%;
overflow: hidden;
}
.zhuboLeft{
display: flex;
}
.zhubo-avater{
padding-right: 20rpx;
display: flex;
align-items: center;
}
.zhubo-name{
font-weight: 700;
}
.zhubo-from{
color: #A6A6A6;
}
效果二:
<view class="userinfo">
<view class="userinfo-avatar">
<open-data type="userAvatarUrl">open-data>
view>
<open-data type="userNickName">open-data>
view>
.userinfo {
position: relative;
width: 750rpx;
height: 320rpx;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
overflow:hidden;
display: block;
width: 160rpx;
height: 160rpx;
margin: 20rpx;
margin-top: 50rpx;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.userinfo{
/* color: #fff; */
font-size: 14px;
background-color: #c0c0c0;
border-radius:40%;
}
以上就是对新组件open-data样式更改的总结,希望我的文章能够帮助到你!
open-data 基础库 1.4.0 开始支持,低版本需做兼容处理 用于展示微信开放的数据。 属性名 类型 默认值 说明 type String 开放数据类型 open-gid String 当 type="groupName" 时生效, 群id lang String en 当 type="user*" 时生效,以哪种语言展示 userInfo,有效值有:en, zh_CN, zh_TW type 有效值: 值 说明 最低版本 groupName 拉取群名称 1.4.0 userNickName 用户昵称 1.9.90 userAvatarUrl 用户头像 1.9.90 userGender 用户性别 1.9.90 userCity 用户所在城市 1.9.90 userProvince 用户所在省份 1.9.90 userCountry 用户所在国家 1.9.90 userLanguage 用户的语言 1.9.90 Tips: 只有当前用户在此群内才能拉取到群名称 示例: 在开发者工具中预览效果