Skip to content

梁建民 / scm_app

Go to a project
Commit 7573331c by liangjianmin
Options

feat(mine): 优化个人信息面板样式和布局 

调整个人信息面板的样式，增加标题和子标题，重构信息项的显示方式，提升用户体验。
parent 936cece5
Inline Side-by-side
Showing with 99 additions and 68 deletions
assets/css/mine/index.scss
.mine-page { .mine-page {
min-height: 100vh; min-height: 100vh;
padding-bottom: 158rpx; padding: 0 28rpx 180rpx;
background: #f8fafc; box-sizing: border-box;
background: linear-gradient(180deg, #eef5ff 0%, #f7f9fc 42%, #f6f8fb 100%);
.profile-hero { .profile-hero {
position: relative; position: relative;
padding: 32rpx 32rpx 32rpx; padding: 20rpx 24rpx 26rpx;
margin-bottom: 16rpx; margin: 6rpx -28rpx 0;
background: #197adb;
border-radius: 0 0 28rpx 28rpx;
box-shadow: 0 12rpx 28rpx rgba(25, 122, 219, 0.16);
.hero-bg { .hero-bg {
position: absolute; display: none;
top: 0;
left: 0;
right: 0;
height: 148rpx;
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
border-radius: 0 0 32rpx 32rpx;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200rpx;
height: 200rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
border-radius: 50%;
}
&::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 160rpx;
height: 160rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
border-radius: 50%;
}
} }
.profile-card { .profile-card {
position: relative; position: relative;
z-index: 1; z-index: 1;
min-height: 132rpx;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0;
box-sizing: border-box;
border-radius: 0;
background: transparent;
box-shadow: none;
.avatar { .avatar {
width: 96rpx; width: 96rpx;
height: 96rpx; height: 96rpx;
border-radius: 24rpx; border-radius: 24rpx;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(8rpx);
border: 2rpx solid rgba(255, 255, 255, 0.3);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 20rpx; margin-right: 22rpx;
flex-shrink: 0;
.avatar-img { .avatar-img {
width: 72rpx; width: 72rpx;
...@@ -66,96 +46,139 @@ ...@@ -66,96 +46,139 @@
} }
.profile-meta { .profile-meta {
flex: 1;
min-width: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
min-width: 0;
.p-name { .p-name {
font-size: 36rpx; font-size: 38rpx;
font-weight: 600; line-height: 48rpx;
font-weight: 700;
color: #ffffff; color: #ffffff;
letter-spacing: 0.5rpx; letter-spacing: 0;
} }
.p-email { .p-email {
margin-top: 10rpx; margin-top: 8rpx;
font-size: 24rpx; font-size: 24rpx;
color: rgba(255, 255, 255, 0.86); line-height: 34rpx;
color: rgba(255, 255, 255, 0.82);
word-break: break-all; word-break: break-all;
} }
} }
} }
} }
.info-list { .info-panel {
margin: 32rpx 32rpx 0; margin-top: 24rpx;
padding: 28rpx 28rpx 8rpx;
border-radius: 26rpx;
background: #ffffff; background: #ffffff;
border-radius: 20rpx; box-shadow: 0 18rpx 42rpx rgba(15, 23, 42, 0.06);
padding: 8rpx 28rpx;
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.06);
.panel-title {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 8rpx;
.panel-name {
font-size: 30rpx;
line-height: 40rpx;
font-weight: 700;
color: #172033;
}
.panel-sub {
font-size: 22rpx;
line-height: 32rpx;
color: #94a3b8;
}
}
.info-list {
.info-item { .info-item {
padding: 30rpx 0; padding: 26rpx 0;
border-bottom: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #edf1f7;
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
.info-icon { .info-icon {
width: 60rpx; width: 64rpx;
height: 60rpx; height: 64rpx;
border-radius: 16rpx; border-radius: 18rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 20rpx; margin-right: 22rpx;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.1);
}
.info-content {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: space-between;
} }
.info-label { .info-label {
font-size: 28rpx; font-size: 27rpx;
color: #64748b; color: #64748b;
width: 140rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.info-value { .info-value {
margin-left: 24rpx;
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 600;
color: #1e293b; color: #172033;
text-align: right; text-align: right;
word-break: break-all; word-break: break-all;
&.empty { &.empty {
color: #cbd5e1; color: #cbd5e1;
font-weight: 500;
}
} }
} }
} }
} }
.logout-wrap { .logout-fixed {
padding: 36rpx 32rpx; position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
padding: 20rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
box-sizing: border-box;
background: linear-gradient(180deg, rgba(246, 248, 251, 0) 0%, rgba(246, 248, 251, 0.94) 28%, #f6f8fb 100%);
.logout-btn { .logout-btn {
height: 92rpx; height: 92rpx;
border-radius: 24rpx;
background: #ffffff; background: #ffffff;
border-radius: 20rpx; border: 1rpx solid rgba(239, 68, 68, 0.12);
box-shadow: 0 4rpx 16rpx rgba(239, 68, 68, 0.08); box-shadow: 0 16rpx 36rpx rgba(15, 23, 42, 0.08);
transition: all 0.2s ease; transition: all 0.2s ease;
&:active { &:active {
transform: scale(0.98); transform: scale(0.98);
background: #fef2f2; background: #fff5f5;
} }
.logout-text { .logout-text {
margin-left: 10rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 600;
color: #ef4444; color: #ef4444;
margin-left: 10rpx; letter-spacing: 0;
letter-spacing: 0.5rpx;
} }
} }
} }
......
pages/mine/index.vue
...@@ -13,17 +13,25 @@ ...@@ -13,17 +13,25 @@
</view> </view>
</view> </view>
<view class="info-panel">
<view class="panel-title">
<text class="panel-name">账号资料</text>
<text class="panel-sub">基础信息</text>
</view>
<view class="info-list"> <view class="info-list">
<view class="info-item row verCenter" v-for="item in infoFields" :key="item.key"> <view class="info-item row verCenter" v-for="item in infoFields" :key="item.key">
<view class="info-icon" :style="{ background: item.bg }"> <view class="info-icon" :style="{ background: item.bg }">
<u-icon :name="item.icon" color="#ffffff" size="32"></u-icon> <u-icon :name="item.icon" color="#ffffff" size="32"></u-icon>
</view> </view>
<view class="info-content">
<text class="info-label">{{ item.label }}</text> <text class="info-label">{{ item.label }}</text>
<text class="info-value" :class="{ empty: !info[item.key] }">{{ info[item.key] || '--' }}</text> <text class="info-value" :class="{ empty: !info[item.key] }">{{ info[item.key] || '--' }}</text>
</view> </view>
</view> </view>
</view>
</view>
<view class="logout-wrap"> <view class="logout-fixed">
<view class="logout-btn row rowCenter verCenter" @click="exit"> <view class="logout-btn row rowCenter verCenter" @click="exit">
<u-icon name="close-circle" color="#ef4444" size="32"></u-icon> <u-icon name="close-circle" color="#ef4444" size="32"></u-icon>
<text class="logout-text">退出账号</text> <text class="logout-text">退出账号</text>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment