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 {
min-height: 100vh;
padding-bottom: 158rpx;
background: #f8fafc;
padding: 0 28rpx 180rpx;
box-sizing: border-box;
background: linear-gradient(180deg, #eef5ff 0%, #f7f9fc 42%, #f6f8fb 100%);
.profile-hero {
position: relative;
padding: 32rpx 32rpx 32rpx;
margin-bottom: 16rpx;
padding: 20rpx 24rpx 26rpx;
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 {
position: absolute;
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%;
}
display: none;
}
.profile-card {
position: relative;
z-index: 1;
min-height: 132rpx;
display: flex;
align-items: center;
padding: 0;
box-sizing: border-box;
border-radius: 0;
background: transparent;
box-shadow: none;
.avatar {
width: 96rpx;
height: 96rpx;
border-radius: 24rpx;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8rpx);
border: 2rpx solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
margin-right: 22rpx;
flex-shrink: 0;
.avatar-img {
width: 72rpx;
......@@ -66,96 +46,139 @@
}
.profile-meta {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
min-width: 0;
.p-name {
font-size: 36rpx;
font-weight: 600;
font-size: 38rpx;
line-height: 48rpx;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.5rpx;
letter-spacing: 0;
}
.p-email {
margin-top: 10rpx;
margin-top: 8rpx;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.86);
line-height: 34rpx;
color: rgba(255, 255, 255, 0.82);
word-break: break-all;
}
}
}
}
.info-list {
margin: 32rpx 32rpx 0;
.info-panel {
margin-top: 24rpx;
padding: 28rpx 28rpx 8rpx;
border-radius: 26rpx;
background: #ffffff;
border-radius: 20rpx;
padding: 8rpx 28rpx;
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.06);
box-shadow: 0 18rpx 42rpx 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 {
padding: 30rpx 0;
border-bottom: 1rpx solid #f1f5f9;
padding: 26rpx 0;
border-bottom: 1rpx solid #edf1f7;
&:last-child {
border-bottom: none;
}
.info-icon {
width: 60rpx;
height: 60rpx;
border-radius: 16rpx;
width: 64rpx;
height: 64rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
margin-right: 22rpx;
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 {
font-size: 28rpx;
font-size: 27rpx;
color: #64748b;
width: 140rpx;
flex-shrink: 0;
}
.info-value {
margin-left: 24rpx;
flex: 1;
font-size: 28rpx;
font-weight: 500;
color: #1e293b;
font-weight: 600;
color: #172033;
text-align: right;
word-break: break-all;
&.empty {
color: #cbd5e1;
font-weight: 500;
}
}
}
}
}
.logout-wrap {
padding: 36rpx 32rpx;
.logout-fixed {
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 {
height: 92rpx;
border-radius: 24rpx;
background: #ffffff;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(239, 68, 68, 0.08);
border: 1rpx solid rgba(239, 68, 68, 0.12);
box-shadow: 0 16rpx 36rpx rgba(15, 23, 42, 0.08);
transition: all 0.2s ease;
&:active {
transform: scale(0.98);
background: #fef2f2;
background: #fff5f5;
}
.logout-text {
margin-left: 10rpx;
font-size: 28rpx;
font-weight: 500;
font-weight: 600;
color: #ef4444;
margin-left: 10rpx;
letter-spacing: 0.5rpx;
letter-spacing: 0;
}
}
}
......
pages/mine/index.vue
......@@ -13,17 +13,25 @@
</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-item row verCenter" v-for="item in infoFields" :key="item.key">
<view class="info-icon" :style="{ background: item.bg }">
<u-icon :name="item.icon" color="#ffffff" size="32"></u-icon>
</view>
<view class="info-content">
<text class="info-label">{{ item.label }}</text>
<text class="info-value" :class="{ empty: !info[item.key] }">{{ info[item.key] || '--' }}</text>
</view>
</view>
</view>
</view>
<view class="logout-wrap">
<view class="logout-fixed">
<view class="logout-btn row rowCenter verCenter" @click="exit">
<u-icon name="close-circle" color="#ef4444" size="32"></u-icon>
<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