小程序用户中心布局样式

小程序用户中心布局样式_第1张图片

1.usercenter.wxml



    
        
            
        
        
    
    个人信息
    
        
            
                kevin
            
            说明文字
        
        
            
                kevin
            
            说明文字
        
    

2.usercenter.wxss

/* pages/usercenter/usercenter.wxss */
.userinfo{
    position: relative;
    width: 750rpx;
    height: 320rpx;
    color: #999;
    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)
}

3.app.wxss

/* 导入weui的css样式定义 */
@import 'weui.wxss';
/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

 

你可能感兴趣的:(小程序,小程序)