haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compact user center layout

Browse Source
This commit is contained in:
hajimi
2026-08-03 03:43:20 +08:00
parent 1737ee517c
commit 21d466f355
1 changed files with 71 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/pages/user/user.vue
+71 -69
View File
@@ -3,7 +3,7 @@
<view class="user-toolbar" :style="{ paddingTop: statusBarHeight + 'px' }">
<text class="user-toolbar__title">我的</text>
<view class="user-toolbar__setting" @tap="goPage('/pages/user_set/user_set')">
<u-icon name="setting" color="#111827" size="34" />
<u-icon name="setting" color="#111827" size="28" />
</view>
</view>
@@ -22,7 +22,7 @@
</view>
<view class="user-profile__edit">
<text v-if="isLogin">编辑资料</text>
<u-icon name="arrow-right" color="#6b7280" size="28" />
<u-icon name="arrow-right" color="#6b7280" size="24" />
</view>
</view>
@@ -51,7 +51,7 @@
<view class="user-benefits__grid">
<view class="benefit-card benefit-card--points" @tap="openPointsBuy">
<view class="benefit-card__icon">
<u-icon name="coupon" color="#1468f5" size="42" />
<u-icon name="coupon" color="#1468f5" size="34" />
</view>
<view class="benefit-card__body">
<text class="benefit-card__title">积分中心</text>
@@ -61,18 +61,18 @@
</view>
<text class="benefit-card__desc">明细 · 已解锁内容</text>
</view>
<u-icon name="arrow-right" color="#8b929c" size="26" />
<u-icon name="arrow-right" color="#8b929c" size="22" />
</view>
<view class="benefit-card benefit-card--vip" @tap="goVip">
<view class="benefit-card__icon benefit-card__icon--vip">
<u-icon name="level" color="#fff" size="42" />
<u-icon name="level" color="#fff" size="34" />
</view>
<view class="benefit-card__body">
<text class="benefit-card__title">会员权益</text>
<text class="benefit-card__desc benefit-card__desc--vip">{{ memberStatusText }}</text>
<text class="benefit-card__button">查看权益</text>
</view>
<u-icon name="arrow-right" color="#8b929c" size="26" />
<u-icon name="arrow-right" color="#8b929c" size="22" />
</view>
</view>
</view>
@@ -82,9 +82,9 @@
<view class="user-list">
<view v-for="item in contentMenus" :key="item.key" class="user-list__item"
@tap="handleMenuTap(item)">
<view class="user-list__icon"><u-icon :name="item.icon" color="#1468f5" size="34" /></view>
<view class="user-list__icon"><u-icon :name="item.icon" color="#1468f5" size="30" /></view>
<text class="user-list__label">{{ item.label }}</text>
<u-icon name="arrow-right" color="#9aa0a8" size="26" />
<u-icon name="arrow-right" color="#9aa0a8" size="22" />
</view>
</view>
</view>
@@ -94,9 +94,9 @@
<view class="user-list">
<view v-for="item in accountMenus" :key="item.key" class="user-list__item"
@tap="handleMenuTap(item)">
<view class="user-list__icon"><u-icon :name="item.icon" color="#1468f5" size="34" /></view>
<view class="user-list__icon"><u-icon :name="item.icon" color="#1468f5" size="30" /></view>
<text class="user-list__label">{{ item.label }}</text>
<u-icon name="arrow-right" color="#9aa0a8" size="26" />
<u-icon name="arrow-right" color="#9aa0a8" size="22" />
</view>
</view>
</view>
@@ -251,17 +251,19 @@ const handleMenuTap = (item: any) => {
<style lang="scss" scoped>
.user-page {
min-height: 100vh;
height: 100vh;
overflow: hidden;
background: #f7f8fa;
color: #111827;
padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
padding-bottom: calc(88rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.user-toolbar {
position: relative;
min-height: 88rpx;
padding-left: 36rpx;
padding-right: 36rpx;
min-height: 72rpx;
padding-left: 24rpx;
padding-right: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
@@ -271,7 +273,7 @@ const handleMenuTap = (item: any) => {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 40rpx;
font-size: 34rpx;
line-height: 1;
font-weight: 700;
color: #111827;
@@ -279,8 +281,8 @@ const handleMenuTap = (item: any) => {
&__setting {
margin-left: auto;
width: 64rpx;
height: 64rpx;
width: 52rpx;
height: 52rpx;
display: flex;
align-items: center;
justify-content: center;
@@ -290,12 +292,12 @@ const handleMenuTap = (item: any) => {
.user-profile {
display: flex;
align-items: center;
padding: 36rpx 48rpx 34rpx;
padding: 18rpx 28rpx;
background: #fff;
&__avatar {
width: 132rpx;
height: 132rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
border: 2rpx solid #dbe5f6;
flex-shrink: 0;
@@ -304,7 +306,7 @@ const handleMenuTap = (item: any) => {
&__body {
flex: 1;
min-width: 0;
margin-left: 28rpx;
margin-left: 18rpx;
}
&__name-row,
@@ -314,7 +316,7 @@ const handleMenuTap = (item: any) => {
}
&__name-row {
gap: 14rpx;
gap: 10rpx;
}
&__name {
@@ -322,43 +324,43 @@ const handleMenuTap = (item: any) => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 38rpx;
font-size: 32rpx;
font-weight: 700;
color: #111827;
}
&__level {
padding: 4rpx 14rpx;
border-radius: 20rpx;
padding: 3rpx 10rpx;
border-radius: 16rpx;
color: #1468f5;
background: #edf4ff;
font-size: 24rpx;
font-size: 20rpx;
line-height: 1.2;
}
&__meta {
gap: 14rpx;
margin-top: 10rpx;
gap: 10rpx;
margin-top: 6rpx;
color: #6b7280;
font-size: 26rpx;
font-size: 22rpx;
}
&__edit {
display: flex;
align-items: center;
gap: 6rpx;
margin-left: 18rpx;
gap: 4rpx;
margin-left: 12rpx;
color: #6b7280;
font-size: 26rpx;
font-size: 22rpx;
white-space: nowrap;
}
}
.user-stats {
display: flex;
margin: 0 36rpx 24rpx;
padding: 28rpx 10rpx;
border-radius: 22rpx;
margin: 0 24rpx 12rpx;
padding: 18rpx 6rpx;
border-radius: 16rpx;
background: #fff;
box-shadow: 0 8rpx 28rpx rgba(23, 40, 75, 0.05);
@@ -373,16 +375,16 @@ const handleMenuTap = (item: any) => {
content: '';
position: absolute;
right: 0;
top: 12rpx;
top: 8rpx;
width: 1rpx;
height: 62rpx;
height: 44rpx;
background: #e5e7eb;
}
}
&__num {
color: #111827;
font-size: 34rpx;
font-size: 28rpx;
line-height: 1.2;
font-weight: 700;
@@ -392,51 +394,51 @@ const handleMenuTap = (item: any) => {
}
&__label {
margin-top: 8rpx;
margin-top: 4rpx;
color: #6b7280;
font-size: 24rpx;
font-size: 20rpx;
}
}
.user-content {
padding: 0 36rpx;
padding: 0 24rpx;
}
.user-section {
margin-bottom: 24rpx;
padding: 24rpx 16rpx 18rpx;
border-radius: 22rpx;
margin-bottom: 12rpx;
padding: 14rpx 10rpx 10rpx;
border-radius: 16rpx;
background: #fff;
box-shadow: 0 8rpx 28rpx rgba(23, 40, 75, 0.04);
&__title {
display: block;
margin: 0 8rpx 20rpx;
margin: 0 6rpx 10rpx;
color: #111827;
font-size: 32rpx;
font-size: 26rpx;
line-height: 1.2;
font-weight: 700;
}
}
.user-benefits {
padding-bottom: 28rpx;
padding-bottom: 12rpx;
&__grid {
display: flex;
gap: 18rpx;
gap: 10rpx;
}
}
.benefit-card {
flex: 1;
min-width: 0;
min-height: 178rpx;
min-height: 124rpx;
display: flex;
align-items: center;
padding: 22rpx 18rpx;
padding: 12rpx 10rpx;
border: 1rpx solid #c8dcff;
border-radius: 18rpx;
border-radius: 14rpx;
box-sizing: border-box;
&--points {
@@ -449,8 +451,8 @@ const handleMenuTap = (item: any) => {
}
&__icon {
width: 72rpx;
height: 72rpx;
width: 54rpx;
height: 54rpx;
flex-shrink: 0;
display: flex;
align-items: center;
@@ -466,13 +468,13 @@ const handleMenuTap = (item: any) => {
&__body {
flex: 1;
min-width: 0;
margin-left: 16rpx;
margin-left: 10rpx;
}
&__title {
display: block;
color: #111827;
font-size: 30rpx;
font-size: 24rpx;
font-weight: 600;
white-space: nowrap;
}
@@ -485,14 +487,14 @@ const handleMenuTap = (item: any) => {
&__value {
color: #1468f5;
font-size: 34rpx;
font-size: 28rpx;
font-weight: 700;
}
&__unit,
&__desc {
color: #6b7280;
font-size: 22rpx;
font-size: 18rpx;
}
&__unit {
@@ -501,24 +503,24 @@ const handleMenuTap = (item: any) => {
&__desc {
display: block;
margin-top: 7rpx;
margin-top: 4rpx;
white-space: nowrap;
}
&__desc--vip {
margin-top: 8rpx;
font-size: 24rpx;
margin-top: 4rpx;
font-size: 20rpx;
color: #6b6257;
}
&__button {
display: inline-block;
margin-top: 10rpx;
padding: 6rpx 20rpx;
border-radius: 22rpx;
margin-top: 6rpx;
padding: 4rpx 14rpx;
border-radius: 16rpx;
color: #fff;
background: #1468f5;
font-size: 22rpx;
font-size: 18rpx;
}
}
@@ -526,7 +528,7 @@ const handleMenuTap = (item: any) => {
overflow: hidden;
&__item {
min-height: 86rpx;
min-height: 58rpx;
display: flex;
align-items: center;
padding: 0 8rpx;
@@ -538,7 +540,7 @@ const handleMenuTap = (item: any) => {
}
&__icon {
width: 46rpx;
width: 36rpx;
display: flex;
justify-content: center;
flex-shrink: 0;
@@ -547,9 +549,9 @@ const handleMenuTap = (item: any) => {
&__label {
flex: 1;
min-width: 0;
margin-left: 18rpx;
margin-left: 12rpx;
color: #1f2937;
font-size: 28rpx;
font-size: 24rpx;
}
}