微信小程序之个人中心静态页面_小程序个人中心页

知识点： flex布局 position定位 过滤

<!-- 个人信息 -->
<view class="user_info_wrap">
  <view class="user_img_wrap">
    <image class="user_bg" src="{{userInfo.authUrl}}"></image>
    <view class="user_info">
      <image class="user_icon" src="{{userInfo.authUrl}}"></image>
      <view class="user_nickname">{{userInfo.nickName}}</view>
    </view>
  </view>
</view>
<!-- 历史 -->
<view class="his_info_wrap">
  <view class="his_info">
    <!-- 收藏等 -->
    <view class="his_content">
      <navigator>
        <view class="his_num">0</view>
        <view class="his_name">收藏的店铺</view>
      </navigator>
      <navigator>
        <view class="his_num">0</view>
        <view class="his_name">收藏的店铺</view>
      </navigator>
      <navigator>
        <view class="his_num">0</view>
        <view class="his_name">收藏的店铺</view>
      </navigator>
      <navigator>
        <view class="his_num">0</view>
        <view class="his_name">收藏的店铺</view>
      </navigator>
    </view>
    <!-- 订单 -->
    <view class="order_content">
      <view class="my_order">我的订单</view>
      <view class="order_navig">
        <navigator>
          <icon class="icon-box-img" type="success"></icon>
          <view>全部订单</view>
        </navigator>
        <navigator>
          <icon class="icon-box-img" type="success"></icon>
          <view>待付款</view>
        </navigator>
        <navigator>
          <icon class="icon-box-img" type="success"></icon>
          <view>待收货</view>
        </navigator>
        <navigator>
          <icon class="icon-box-img" type="success"></icon>
          <view>退款/退货</view>
        </navigator>
      </view>
    </view>
    <!-- 地址 -->
    <view class="address_content">收货地址管理</view>
    <!-- 应用 -->
    <view class="app_content">
      <view class="contact">
        <text>联系客服</text>
        <text>400-418-4000</text>
      </view>
      <view class="idea">意见反馈</view>
      <view class="about">关于我们</view>
    </view>
    <!-- 推荐 -->
    <view class="recommend_content">把应用推荐给其他人</view>
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

/* 个人信息 */
page {
  background-color: #eaeaea;
  color: #999;
  font-size: 26rpx;
}
.user_info_wrap {
  height: 40vh;
  /* position: relative; */
  background-color: rgb(181, 189, 71);
}
.user_img_wrap {
  position: relative;
}
.user_img_wrap .user_bg {
  width: 100%;
  height: 41vh;
  filter: blur(10rpx);
}
.user_img_wrap .user_info {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}
.user_img_wrap .user_info .user_icon {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.user_img_wrap .user_info .user_nickname {
  margin-top: 40rpx;
  color: #fff;
}
/* 历史 */
.his_info_wrap {
  position: relative;
}
.his_info {
  padding-bottom: 20rpx;
  width: 95%;
  position: absolute;
  left: 50%;
  top: -20px;
  transform: translate(-50%);
}
.his_content {
  background-color: #fff;
  padding: 10rpx;
  display: flex;
  text-align: center;
}
.his_content navigator {
  flex: 1;
}
.his_num {
  color: rgb(227, 230, 71);
}
/* 订单 */
.order_content {
  background-color: #fff;
  margin-top: 40rpx;
  padding: 10rpx 10rpx 0 10rpx;
}
.my_order {
  padding: 10rpx;
  border-bottom: 1px solid #ccc;
}
.order_navig {
  display: flex;
  /* justify-content: center;
  align-items: center; */
  text-align: center;
}
.order_navig navigator {
  flex: 1;
  padding: 10rpx 0;
}
/* 地址 */
.address_content, .recommend_content {
  margin-top: 40rpx;
  padding: 20rpx 10rpx;
  background-color: #fff;
}
/* 应用 */
.app_content {
  margin-top: 40rpx;
  /* padding: 10rpx; */
  /* background-color: #fff; */
}
.app_content .contact {
  display: flex;
  justify-content: space-between;
}
.contact, .idea, .about {
  /* margin-top: 2rpx; */
  background-color: #fff;
  padding: 20rpx 10rpx;
  border-bottom: 1px solid #ccc;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

// pages/my/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      authUrl: '放入自己的图片即可',
      nickName: '一只烛'
    }
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13