微信小程序个人信息展示页面样式设计 - สวยงาม และใช้งานง่าย

<view class='container'>
    <view class='info-row-img'>
      <text class='info-label'></text>
      <image class='avatar' src='{{avatar}}' mode='aspectFit'></image>
    </view>
  <view class='user-info'>
    <view class='info-row'>
      <text class='info-label'>User ID:</text>
      <input class='info-value' value='{{userId}}' disabled='{{!isEditing}}' bindinput='onUserIdInput'/>
    </view>
    <view class='info-row'>
      <text class='info-label'>OpenID:</text>
      <input class='info-value' value='{{openid}}' disabled='{{!isEditing}}' bindinput='onOpenIdInput'/>
    </view>
    <view class='info-row'>
      <text class='info-label'>昵称:</text>
      <input class='info-value' value='{{nickname}}' disabled='true' bindinput='onNicknameInput'/>
    </view>
<pre><code>&lt;view class='info-row'&gt;
    &lt;text class='info-label'&gt;性别:&lt;/text&gt;
    &lt;view wx:if='{{gender==1}}'&gt; &lt;text class='info-value'&gt;男&lt;/text&gt; &lt;/view&gt;
    &lt;view wx:if='{{gender==2}}'&gt; &lt;text class='info-value'&gt;女&lt;/text&gt; &lt;/view&gt;
    &lt;view wx:if='{{gender==0}}'&gt; &lt;text class='info-value'&gt;未认证&lt;/text&gt; &lt;/view&gt;
    
&lt;/view&gt;
&lt;view class='info-row'&gt;
  &lt;text class='info-label'&gt;学院:&lt;/text&gt;
  &lt;input class='info-value' value='{{school}}' disabled='true' bindinput='onSchoolInput'/&gt;
&lt;/view&gt;
&lt;view class='info-row'&gt;
  &lt;text class='info-label'&gt;校内身份:&lt;/text&gt;
  &lt;text class='info-value'&gt;{{identity}}&lt;/text&gt;
&lt;/view&gt;
&lt;view class='info-row'&gt;
  &lt;text class='info-label'&gt;注册时间:&lt;/text&gt;
  &lt;text class='info-value'&gt;{{createTime}}&lt;/text&gt;
&lt;/view&gt;
&lt;view class='info-row'&gt;
  &lt;text class='info-label'&gt;真名:&lt;/text&gt;
  &lt;input class='info-value' value='{{realname}}' disabled='true' bindinput='onRealNameInput'/&gt;
&lt;/view&gt;
&lt;view class='info-row'&gt;
  &lt;text class='info-label'&gt;身份证号:&lt;/text&gt;
  &lt;input class='info-value' value='{{idnumber}}' disabled='true' bindinput='onIdNumberInput' type='idcard'/&gt;
&lt;/view&gt;
&lt;view class='info-row'&gt;
  &lt;text class='info-label'&gt;学/工号:&lt;/text&gt;
  &lt;input class='info-value' value='{{studentnumber}}'disabled='true' bindinput='onStudentNumberInput' type='number' /&gt;
&lt;/view&gt;
&lt;view class='info-row'&gt;
  &lt;text class='info-label'&gt;邮箱:&lt;/text&gt;
  &lt;input class='info-value' value='{{email}}'disabled='true' bindinput='onEmailInput'/&gt;
&lt;/view&gt;
</code></pre>
  </view>
</view>
<view class='btn'>
    <button type='primary' bindtap='submit'>主页</button>
</view>
<style>
  .container{
    padding: 20rpx;
    background-color: #fff;
  }
  .info-row-img{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #eee;
    margin-bottom: 20rpx;
  }
  .avatar{
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 2rpx solid #eee;
  }
  .user-info{
    font-size: 28rpx;
  }
  .info-row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;
  }
  .info-label{
    color: #999;
    margin-right: 20rpx;
  }
  .info-value{
    color: #333;
    flex-grow: 1;
    text-align: right;
  }
  .btn{
    margin-top: 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  button{
    background-color: #007aff;
    color: #fff;
    font-size: 32rpx;
    padding: 20rpx 40rpx;
    border-radius: 10rpx;
  }
</style>