06_心理咨询_微信小程序项目实战_我的页面静态效果实现

一、用户信息展示

1.1 页面结构

        1、定义一个view，给其定义id：userInfoView；

        2、在userInfoView里面定义三个子view，分别用来承载昵称、来自哪里、积分；

<!-- 用户信息展示区域 -->
<view id="userInfoView">
  <view>昵称: 少年先锋队员</view>
  <view>来自: 河南·郑州</view>
  <view>积分: 1080</view>
</view>

1.2 样式实现

        1、给userInfoView设置背景颜色、上下内边距、文本居中；
                padding不同值的表示方式:
                *    上下左右的内边距
                **    上下、左右的内边距
                *** 上、左右、下的内边距
                **** 上、右、下、左的内边距(顺时针)
                注：给父元素的内容设置的样式，可以被子元素继承得到；比如：字体颜色、字体大小、文本居中；

        2、给三个子view的文字设置大小、颜色；

        3、给第二个子view设置上下外边距 或 内边距；

/* 用户信息展示样式 */
#userInfoView{
  background: #87cefa;
  padding: 30rpx 0 40rpx;
  text-align: center;
}

#userInfoView > view:nth-child(1){
  color: #fff;
  font-size: 34rpx;
}

#userInfoView > view:nth-child(2){
  color: #fff;
  font-size: 30rpx;
  padding: 30rpx 0;
}

#userInfoView > view:nth-child(3){
  color: #0f9ffb;
  font-size: 34rpx;
}

二、个人中心列表项

2.1 页面结构

         1、定义一个view，给其添加class：userItemListView；

        2、在userItemListView里面定义对应个数的子view；

        3、每个子view里面定义对应的文本和箭头；

<!-- 用户列表选项 -->
<view class="userItemListView">
  <view>
    <text>我的测评</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>我的咨询</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>我的回答</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>我的通知</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>课程收藏</text>
    <view class="arrow"></view>
  </view>
</view>

<view class="userItemListView">
  <view>
    <text>绑定手机</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>修改密码</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>关于我们</text>
    <view class="arrow"></view>
  </view>
  <view>
    <text>退出登录</text>
    <view class="arrow"></view>
  </view>
</view>

2.2 样式实现

        1、给页面设置整体的背景色；

        2、给userItemListView设置背景色、左右内边距、上下外边距；

        3、给userItemListView里面的子view设置高度、行高、下边框、相对定位；

        4、给文字设置大小、粗细；

        5、设置箭头样式；

        注：垂直外边距的合并；当两个外边距垂直堆叠的时候，不是累加，而是以两者大的为主；

/* 用户列表选项样式 */
.userItemListView{
  background: #fff;
  padding: 0 50rpx;
  margin: 24rpx 0;
}

.userItemListView > view{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1rpx solid #F1F1F1;
  position: relative;
}

/* 移除最后一个元素的下边框 */
.userItemListView > view:last-child{
  border: none;
}

.arrow{
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #999;
  border-right: 4rpx solid #999;
  /* 旋转45度 */
  transform: rotate(45deg);
  /* 调整位置 */
  position: absolute;
  right: 30rpx;
  top: 38rpx;
}


.userItemListView text{
  font-size: 30rpx;
}