<view class="user_info_wrap"> <view class="user_img_wrap" wx:if="{{userInfo.avatarUrl}}"> <image class="user_bg" src="{{userInfo.avatarUrl}}"></image> <view class="user_info"> <image class="user_icon" src="{{userInfo.avatarUrl}}"></image> <view class="user_name">{{userInfo.nickName}}</view> </view> </view> <view class="user_btn" wx:else> <navigator url="/pages/login/login">授权登录</navigator> </view> </view> <view class="user_content"> <view class="user_main"> <view class="recommend_wrap" bindtap="logOut" wx:if="{{userInfo.avatarUrl}}"> 退出登录 </view> </view> <view class="address-box"> <view class="address-manage"> <navigator url="/pages/address/address">地址管理</navigator> </view> <view wx:if="{{hasAddress}}" class="address-list"> <view>{{address.name}}</view> <view>{{address.phone}}</view> <view>{{address.detail}}</view> </view> </view> <view class="orders-box"> <navigator url="/pages/order/order" class="orders">我的订单</navigator> </view> </view>帮我写一个wxss美化这个界面

以下是一个简单的样式美化，你可以根据自己的需求进行调整：

.user_info_wrap {
background-color: #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
border-radius: 6px;
padding: 20rpx;
margin-bottom: 20rpx;
}

.user_img_wrap {
display: flex;
align-items: center;
margin-bottom: 20rpx;
}

.user_bg {
width: 60rpx;
height: 60rpx;
margin-right: 20rpx;
border-radius: 50%;
background-color: #eee;
}

.user_info {
display: flex;
align-items: center;
}

.user_icon {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 10rpx;
}

.user_name {
font-size: 28rpx;
color: #333;
}

.user_btn {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #007aff;
color: #fff;
font-size: 28rpx;
}

.user_content {
background-color: #fff;
border-radius: 6px;
padding: 20rpx;
}

.recommend_wrap {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #007aff;
color: #fff;
font-size: 28rpx;
}

.address-box {
margin-top: 20rpx;
}

.address-manage {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #eee;
font-size: 28rpx;
}

.address-list {
margin-top: 20rpx;
padding: 20rpx;
background-color: #f5f5f5;
border-radius: 6px;
font-size: 28rpx;
}

.orders-box {
margin-top: 20rpx;
}

.orders {
display: flex;
align-items: center;
justify-content: center;
height: 60rpx;
border-radius: 6px;
background-color: #eee;
font-size: 28rpx;
}