Skip to content

梁建民 / scm_app

Go to a project
Commit 40db6d65 by liangjianmin
Options

style(home): 优化首页样式和布局 

- 调整问候语的样式，修改字体大小和行高
- 更新统计卡片的边距和阴影效果
- 修改个人中心页面的背景颜色和边框半径
parent 627768c0
Inline Side-by-side
Showing with 58 additions and 77 deletions
assets/css/home/index.scss
...@@ -44,22 +44,14 @@ ...@@ -44,22 +44,14 @@
} }
.greeting { .greeting {
display: flex; margin-bottom: 40rpx;
flex-direction: column;
margin-bottom: 36rpx;
.g-sub {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 4rpx;
margin-bottom: 8rpx;
}
.g-main { .g-main {
font-size: 40rpx; font-size: 44rpx;
font-weight: 700; font-weight: 600;
color: #ffffff; color: #ffffff;
letter-spacing: 1rpx; letter-spacing: 0.5rpx;
line-height: 1.3;
} }
} }
...@@ -67,9 +59,9 @@ ...@@ -67,9 +59,9 @@
position: relative; position: relative;
display: flex; display: flex;
background: #ffffff; background: #ffffff;
border-radius: 28rpx; border-radius: 24rpx;
padding: 40rpx 24rpx; padding: 36rpx 24rpx;
box-shadow: 0 16rpx 40rpx rgba(30, 58, 138, 0.16); box-shadow: 0 12rpx 32rpx rgba(30, 58, 138, 0.12);
.stat-item { .stat-item {
flex: 1; flex: 1;
...@@ -79,11 +71,11 @@ ...@@ -79,11 +71,11 @@
animation: statFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation: statFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
.stat-num { .stat-num {
font-size: 52rpx; font-size: 48rpx;
font-weight: 700; font-weight: 600;
color: #1e293b; color: #1e293b;
line-height: 1; line-height: 1;
margin-bottom: 12rpx; margin-bottom: 10rpx;
} }
.stat-label { .stat-label {
...@@ -120,18 +112,18 @@ ...@@ -120,18 +112,18 @@
margin: 28rpx 0 24rpx; margin: 28rpx 0 24rpx;
.title-bar { .title-bar {
width: 8rpx; width: 6rpx;
height: 30rpx; height: 28rpx;
border-radius: 4rpx; border-radius: 3rpx;
background: linear-gradient(180deg, #3b82f6, #2563eb); background: linear-gradient(180deg, #3b82f6, #2563eb);
margin-right: 16rpx; margin-right: 14rpx;
} }
.section-title { .section-title {
font-size: 32rpx; font-size: 30rpx;
font-weight: 700; font-weight: 600;
color: #0f172a; color: #0f172a;
letter-spacing: 1rpx; letter-spacing: 0.5rpx;
} }
} }
...@@ -180,9 +172,9 @@ ...@@ -180,9 +172,9 @@
.entry-title { .entry-title {
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 500;
color: #1e293b; color: #1e293b;
letter-spacing: 0.5rpx; letter-spacing: 0.3rpx;
} }
.entry-tip { .entry-tip {
......
assets/css/mine/index.scss
.mine-page { .mine-page {
min-height: 100vh; min-height: 100vh;
padding-bottom: 158rpx; padding-bottom: 158rpx;
background: #f4f6fb; background: #f8fafc;
.profile-hero { .profile-hero {
position: relative; position: relative;
padding: 56rpx 32rpx 40rpx; padding: 48rpx 32rpx 48rpx;
overflow: hidden; margin-bottom: 16rpx;
.hero-bg { .hero-bg {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 280rpx; height: 198rpx;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%); background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
border-radius: 0 0 48rpx 48rpx; border-radius: 0 0 32rpx 32rpx;
&::before {
content: '';
position: absolute;
top: -60rpx;
right: -50rpx;
width: 320rpx;
height: 320rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
}
} }
.profile-card { .profile-card {
...@@ -35,20 +25,20 @@ ...@@ -35,20 +25,20 @@
align-items: center; align-items: center;
.avatar { .avatar {
width: 120rpx; width: 96rpx;
height: 120rpx; height: 96rpx;
border-radius: 32rpx; border-radius: 24rpx;
background: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10rpx); backdrop-filter: blur(8rpx);
border: 2rpx solid rgba(255, 255, 255, 0.35); 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: 28rpx; margin-right: 20rpx;
.avatar-text { .avatar-text {
font-size: 52rpx; font-size: 40rpx;
font-weight: 700; font-weight: 500;
color: #ffffff; color: #ffffff;
} }
} }
...@@ -58,30 +48,30 @@ ...@@ -58,30 +48,30 @@
flex-direction: column; flex-direction: column;
.p-name { .p-name {
font-size: 40rpx; font-size: 36rpx;
font-weight: 700; font-weight: 600;
color: #ffffff; color: #ffffff;
letter-spacing: 1rpx; letter-spacing: 0.5rpx;
margin-bottom: 12rpx; margin-bottom: 8rpx;
} }
.p-position { .p-position {
font-size: 24rpx; font-size: 24rpx;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.8);
} }
} }
} }
} }
.info-list { .info-list {
margin: 0 32rpx; margin: 32rpx 32rpx 0;
background: #ffffff; background: #ffffff;
border-radius: 28rpx; border-radius: 20rpx;
padding: 8rpx 32rpx; padding: 8rpx 28rpx;
box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.06); box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.06);
.info-item { .info-item {
padding: 32rpx 0; padding: 30rpx 0;
border-bottom: 1rpx solid #f1f5f9; border-bottom: 1rpx solid #f1f5f9;
&:last-child { &:last-child {
...@@ -89,13 +79,13 @@ ...@@ -89,13 +79,13 @@
} }
.info-icon { .info-icon {
width: 64rpx; width: 60rpx;
height: 64rpx; height: 60rpx;
border-radius: 18rpx; border-radius: 16rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 24rpx; margin-right: 20rpx;
flex-shrink: 0; flex-shrink: 0;
} }
...@@ -109,7 +99,7 @@ ...@@ -109,7 +99,7 @@
.info-value { .info-value {
flex: 1; flex: 1;
font-size: 28rpx; font-size: 28rpx;
font-weight: 600; font-weight: 500;
color: #1e293b; color: #1e293b;
text-align: right; text-align: right;
word-break: break-all; word-break: break-all;
...@@ -118,13 +108,13 @@ ...@@ -118,13 +108,13 @@
} }
.logout-wrap { .logout-wrap {
padding: 48rpx 32rpx; padding: 36rpx 32rpx;
.logout-btn { .logout-btn {
height: 96rpx; height: 92rpx;
background: #ffffff; background: #ffffff;
border-radius: 24rpx; border-radius: 20rpx;
box-shadow: 0 8rpx 24rpx rgba(239, 68, 68, 0.08); box-shadow: 0 4rpx 16rpx rgba(239, 68, 68, 0.08);
transition: all 0.2s ease; transition: all 0.2s ease;
&:active { &:active {
...@@ -133,11 +123,11 @@ ...@@ -133,11 +123,11 @@
} }
.logout-text { .logout-text {
font-size: 30rpx; font-size: 28rpx;
font-weight: 600; font-weight: 500;
color: #ef4444; color: #ef4444;
margin-left: 12rpx; margin-left: 10rpx;
letter-spacing: 1rpx; letter-spacing: 0.5rpx;
} }
} }
} }
......
pages/home/index.vue
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
<view class="hero-bg"></view> <view class="hero-bg"></view>
<view class="hero-inner"> <view class="hero-inner">
<view class="greeting"> <view class="greeting">
<text class="g-sub">SUPPLY CHAIN</text>
<text class="g-main">供应链审批系统</text> <text class="g-main">供应链审批系统</text>
</view> </view>
<view class="stat-card"> <view class="stat-card">
......
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