Shulou(Shulou.com)06/01 Report--

This article mainly introduces WeChat Mini Programs how to use open-data to change the avatar display style, the article is very detailed, has a certain reference value, interested friends must read it!

The code is as follows:

Dongchen-Ice

From Huya TV

Attention

/ * VJ information * /

.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

}

Effect two:

.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%

}

The above is all the contents of the article "how to change the display style of WeChat Mini Programs's avatar using open-data". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.