Skip to content

Commit 0d930c0

Browse files
mox-hubmox-hub
committed
个人页面v2修改完成
1 parent 92b0e3b commit 0d930c0

File tree

4 files changed

+112
-108
lines changed

4 files changed

+112
-108
lines changed

‎pages/index/index.wxss‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ page{
1616
width: 100%;
1717
height: 500rpx;
1818
font-size: 70rpx;
19+
height: 43vh;
1920
}
2021

2122
.content1{
22-
height: 45%;
2323
margin-top: 2%;
2424
margin-left: 12px;
2525
margin-right: 12px;
@@ -31,7 +31,6 @@ page{
3131
}
3232

3333
.content2{
34-
height: 45%;
3534
margin-top: 10px;
3635
margin-left: 8px;
3736
margin-right: 8px;

‎pages/user/user.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ Page({
66
*/
77
data: {
88
open : false,
9-
username : "abc",
9+
id : "20220001",
10+
username : "不醒人室",
1011
phone : "12345678912",
11-
QQ : "123456789"
12+
QQ : "88888888"
1213
},
1314

1415
showUserInfoTap:function(){
@@ -29,7 +30,7 @@ Page({
2930
}
3031
})
3132
},
32-
kindToggle(e) {
33+
infoToggle(e) {
3334

3435
var that = this;
3536
if(that.open == true){

‎pages/user/user.wxml‎

Lines changed: 19 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
11
<!--pages/user/index.wxml-->
22
<!-- <text>pages/user/index.wxml</text> -->
33
<view class="container">
4-
<!-- 头像部分 -->
5-
<view class="header">
6-
<view class="info-box">
7-
<view style="text-align: center; margin-bottom:2%;">
8-
<!-- <image class="avatar-img" src="{{avatarUrl}}" /> -->
9-
<image class="avatar-img" src="/icons/me-o.png" />
10-
</view>
11-
</view>
12-
<view class="info-value">
13-
<view class="username">
4+
<!-- 头像卡片部分 -->
5+
<view class="header-card">
6+
<view class="header-avatar-outline">
7+
<!-- <image class="header-avatar" src="{{avatarUrl}}" /> -->
8+
<image class="header-avatar" src="/icons/me-o.png" />
9+
</view>
10+
<view class="haeder-user-info">
11+
<view class="haeder-user-info-username">
1412
<text>{{username}}</text>
1513
</view>
16-
<view class="phone">
17-
<text>{{phone}}</text>
14+
<view class="haeder-user-info-phone">
15+
<text>寻物ID: {{id}}</text>
1816
</view>
1917
</view>
2018
</view>
2119

2220
<!-- 个人信息栏 -->
23-
<view class="kind-list__item">
24-
<view class="weui-flex kind-list__item-hd {{open ? 'kind-list__item-hd_show' : ''}}" bindtap="kindToggle">
21+
<view class="info-list__item">
22+
<view class="weui-flex info-list__item-hd {{open ? 'info-list__item-hd_show' : ''}}" bindtap="infoToggle">
2523
<view class="weui-flex__item">个人信息</view>
26-
<image aria-role="button" aria-label="{{open ? ' 收起' : ' 展开'}}" class="kind-list__img" src="/icons/collect-o.png"></image>
24+
<image aria-role="button" aria-label="{{open ? ' 收起' : ' 展开'}}" class="info-list__img" src="/icons/collect-o.png"></image>
2725
</view>
28-
<view aria-hidden="{{open ? 'false' : 'true'}}" class="kind-list__item-bd {{open ? 'kind-list__item-bd_show' : ''}}">
26+
<view aria-hidden="{{open ? 'false' : 'true'}}" class="info-list__item-bd {{open ? 'info-list__item-bd_show' : ''}}">
2927
<view class="weui-cells weui-cells_show">
3028
<view class="weui-cell">
3129
<view class="weui-cell__bd">昵称</view>
@@ -41,15 +39,15 @@
4139
</view>
4240
<!-- 个人信息修改页面跳转 -->
4341
<navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/user/change_user_info" open-type='navigate'>
44-
<image class="icon" src="/icons/collect-o.png"></image>
45-
<view class="weui-cell__bd" ext-class="text"><view>修改个人信息</view></view>
42+
<view class="weui-cell__bd" ext-class="text"><view>修改我的信息</view></view>
4643
<view class="weui-cell__ft"></view>
4744
</navigator>
4845
</view>
4946
</view>
5047
</view>
5148

5249
<!-- 功能栏 -->
50+
<view class="weui-cells__title">我的功能</view>
5351
<view class="weui-cells">
5452
<navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/collect/collect" open-type='switchTab'>
5553
<image class="icon" src="/icons/collect-o.png"></image>
@@ -63,6 +61,7 @@
6361
</navigator>
6462
</view>
6563
<!-- 关于页面跳转 -->
64+
<view class="weui-cells__title">关于</view>
6665
<view class="weui-cells">
6766
<navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/about/about" open-type='navigate'>
6867
<view class="weui-cell__bd"><view>关于</view></view>
@@ -73,23 +72,11 @@
7372
<view class="weui-cell__ft"></view>
7473
</navigator>
7574
</view>
76-
<!-- 页面测试部分 -->
77-
<view class="weui-cells">
78-
<navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/msg/msg_success" open-type='navigate'>
79-
<image class="icon" src="/icons/collect-o.png"></image>
80-
<view class="weui-cell__bd"><view>成功返回页面</view></view>
81-
<view class="weui-cell__ft"></view>
82-
</navigator>
83-
<navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" url="/pages/msg/msg_warn" open-type='navigate'>
84-
<image class="icon" src="/icons/collect-o.png"></image>
85-
<view class="weui-cell__bd" ext-class="text"><view>失败返回页面</view></view>
86-
<view class="weui-cell__ft"></view>
87-
</navigator>
88-
</view>
75+
8976
<!-- 获取个人信息 -->
9077
<view style="margin-top:20%">
9178
<!-- <button open-type="getUserInfo" bindtap="showUserInfoTap">获取个人信息</button> -->
92-
<!-- <button bindtap="kindToggle" disabled="{{open}}">测试</button> -->
79+
<!-- <button bindtap="infoToggle" disabled="{{open}}">测试</button> -->
9380
</view>
9481

9582
<!-- 底栏 -->

‎pages/user/user.wxss‎

Lines changed: 88 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -3,89 +3,106 @@
33
page{
44
background-color: #f5f6f8;
55
}
6-
.info-box{
7-
width:140rpx;
8-
height:140rpx;
9-
margin-left: 60rpx;
10-
margin-top: 10%;
11-
border:2px solid;
12-
border-color: #994949;
13-
border-radius: 100px;
14-
}
15-
.avatar-img {
16-
margin-top: 20rpx;
17-
margin-bottom: 20rpx;
18-
width: 100rpx;
19-
height: 100rpx;
20-
border: 1px solid #ededed;
21-
}
22-
.icon {
23-
width: 34rpx;
24-
height: 34rpx;
25-
margin-bottom: -4rpx;
26-
margin-right: 10rpx;
27-
}
28-
.username {
29-
margin-top: 50rpx;
30-
margin-left: 60rpx;
31-
font-size: 60rpx;
32-
}
33-
.phone {
34-
/* margin-top: 10rpx; */
35-
margin-left: 60rpx;
36-
font-size: 30rpx;
37-
}
38-
.header {
39-
display: flex;
40-
flex-direction: row;
41-
}
426

43-
.weui-flex {
44-
-webkit-box-align: center;
45-
-webkit-align-items: center;
46-
align-items: center
47-
}
48-
49-
.weui-cells:after,
50-
.weui-cells:before {
51-
display: none
52-
}
53-
54-
.weui-cells_show {
55-
opacity: 1;
56-
-webkit-transform: translateY(0);
57-
transform: translateY(0)
58-
}
7+
/* 头部卡片样式 */
8+
.header-card{
9+
margin-top: 10rpx;
10+
margin-left: 12rpx;
11+
margin-right: 12rpx;
12+
background-color:#FFFFFF;
13+
border:6rpx solid;
14+
border-color: #f0f0f0;
15+
border-radius: 14rpx;
16+
17+
display: flex;
18+
flex-direction: row;
19+
}
20+
.header-avatar-outline {
21+
text-align: center;
22+
align-items: center;
23+
margin-left: 40rpx;
24+
margin-top: 20rpx;
25+
width:140rpx;
26+
height:140rpx;
27+
border: 3rpx solid #a1abb2;
28+
border-radius: 20rpx;
29+
background-color: #f0f0f0;
30+
}
31+
.header-avatar {
32+
align-items: center;
33+
margin-top: 20rpx;
34+
margin-bottom: 20rpx;
35+
width: 100rpx;
36+
height: 100rpx;
37+
}
38+
.haeder-user-info {
39+
margin-bottom: 40rpx;
40+
}
41+
.haeder-user-info-username {
42+
margin-top: 50rpx;
43+
margin-left: 60rpx;
44+
font-size: 40rpx;
45+
}
46+
.haeder-user-info-phone {
47+
margin-left: 60rpx;
48+
font-size: 25rpx;
49+
}
50+
51+
/* 全局样式 */
52+
.icon {
53+
width: 34rpx;
54+
height: 34rpx;
55+
margin-bottom: -4rpx;
56+
margin-right: 10rpx;
57+
}
58+
59+
/* 个人信息栏目样式 */
60+
.weui-flex {
61+
-webkit-box-align: center;
62+
-webkit-align-items: center;
63+
align-items: center
64+
}
65+
66+
.weui-cells_show {
67+
opacity: 1;
68+
-webkit-transform: translateY(0);
69+
transform: translateY(0)
70+
}
5971

60-
.kind-list__item-hd {
61-
padding: 20px;
62-
-webkit-transition: opacity .3s;
63-
transition: opacity .3s
72+
.info-list__item-hd {
73+
padding: 30rpx;
74+
border:6rpx solid;
75+
border-color: #f0f0f0;
76+
border-radius: 14rpx;
77+
margin-left: 12rpx;
78+
margin-right: 12rpx;
79+
-webkit-transition: opacity .3s;
80+
transition: opacity .3s
6481
}
6582

66-
.kind-list__item-bd {
67-
height: 0;
68-
overflow: hidden
83+
.info-list__item-bd {
84+
height: 0;
85+
overflow: hidden
6986
}
7087

71-
.kind-list__item {
72-
margin: 10px 0;
73-
background-color: var(--weui-BG-2);
74-
border-radius: 2px;
75-
overflow: hidden
88+
.info-list__item {
89+
margin: 10px 0;
90+
background-color: var(--weui-BG-2);
91+
border-radius: 2px;
92+
overflow: hidden
7693
}
7794

78-
.kind-list__item:first-child {
79-
margin-top: 0
95+
.info-list__item:first-child {
96+
margin-top: 0
8097
}
8198

82-
.kind-list__img {
83-
width: 30px;
84-
height: 30px
99+
.info-list__img {
100+
width: 40rpx;
101+
height: 40rpx
85102
}
86-
.kind-list__item-bd_show {
103+
.info-list__item-bd_show {
87104
height: auto
88105
}
89-
.kind-list__item-hd_show {
106+
.info-list__item-hd_show {
90107
opacity: .4
91108
}

0 commit comments

Comments
 (0)