搞个微信小程序002：个人信息

搞IT的锋2023-10-23 9:15

新建一个用于，和001中一样，然后，就改掉两个文件：

index.wxml:

XML 复制代码

<view>
  <!-- 头像区域 -->
  <view class="top">
    <view class="user-img">
      <image src="/images/tx.png"></image>
    </view>
  </view>
  <!-- 详细信息区域 -->
  <view class="menu">
    <view class="item">姓名：中锋</view>
    <view class="item">年龄：-9600</view>
    <view class="item">性别：男</view>
    <view class="item">特长：编程</view>
    <view class="item">爱好：佛法，中医</view>
  </view>
</view>

index.wxss:

css 复制代码

/**index.wxss**/
/* 头像区域的样式 */
.top {
  background: #0a87ec6e;
  width: 100%;
  padding: 30rpx 0;
}
.top .user-img {
  width: 252rpx;
  margin: 0 auto;
 }
.top image {
  width: 252rpx;
  height: 252rpx;
  border-radius: 50%;
  border: 6rpx solid #777F92;
}
/* 详细信息区域的样式 */
.menu .item {
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 2rpx solid #ccc;
  padding: 0 40rpx;
  font-size: 34rpx;
}

当然，要添加好头像文件tx.png，放下images目录下（images要自己新建）：

效果：