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 @@
}
.greeting {
display: flex;
flex-direction: column;
margin-bottom: 36rpx;
.g-sub {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.6);
letter-spacing: 4rpx;
margin-bottom: 8rpx;
}
margin-bottom: 40rpx;
.g-main {
font-size: 40rpx;
font-weight: 700;
font-size: 44rpx;
font-weight: 600;
color: #ffffff;
letter-spacing: 1rpx;
letter-spacing: 0.5rpx;
line-height: 1.3;
}
}
......@@ -67,9 +59,9 @@
position: relative;
display: flex;
background: #ffffff;
border-radius: 28rpx;
padding: 40rpx 24rpx;
box-shadow: 0 16rpx 40rpx rgba(30, 58, 138, 0.16);
border-radius: 24rpx;
padding: 36rpx 24rpx;
box-shadow: 0 12rpx 32rpx rgba(30, 58, 138, 0.12);
.stat-item {
flex: 1;
......@@ -79,11 +71,11 @@
animation: statFadeIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
.stat-num {
font-size: 52rpx;
font-weight: 700;
font-size: 48rpx;
font-weight: 600;
color: #1e293b;
line-height: 1;
margin-bottom: 12rpx;
margin-bottom: 10rpx;
}
.stat-label {
......@@ -120,18 +112,18 @@
margin: 28rpx 0 24rpx;
.title-bar {
width: 8rpx;
height: 30rpx;
border-radius: 4rpx;
width: 6rpx;
height: 28rpx;
border-radius: 3rpx;
background: linear-gradient(180deg, #3b82f6, #2563eb);
margin-right: 16rpx;
margin-right: 14rpx;
}
.section-title {
font-size: 32rpx;
font-weight: 700;
font-size: 30rpx;
font-weight: 600;
color: #0f172a;
letter-spacing: 1rpx;
letter-spacing: 0.5rpx;
}
}
......@@ -180,9 +172,9 @@
.entry-title {
font-size: 28rpx;
font-weight: 600;
font-weight: 500;
color: #1e293b;
letter-spacing: 0.5rpx;
letter-spacing: 0.3rpx;
}
.entry-tip {
......
assets/css/mine/index.scss
.mine-page {
min-height: 100vh;
padding-bottom: 158rpx;
background: #f4f6fb;
background: #f8fafc;
.profile-hero {
position: relative;
padding: 56rpx 32rpx 40rpx;
overflow: hidden;
padding: 48rpx 32rpx 48rpx;
margin-bottom: 16rpx;
.hero-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 280rpx;
background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #3b82f6 100%);
border-radius: 0 0 48rpx 48rpx;
&::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%);
}
height: 198rpx;
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
border-radius: 0 0 32rpx 32rpx;
}
.profile-card {
......@@ -35,20 +25,20 @@
align-items: center;
.avatar {
width: 120rpx;
height: 120rpx;
border-radius: 32rpx;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10rpx);
border: 2rpx solid rgba(255, 255, 255, 0.35);
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);
display: flex;
align-items: center;
justify-content: center;
margin-right: 28rpx;
margin-right: 20rpx;
.avatar-text {
font-size: 52rpx;
font-weight: 700;
font-size: 40rpx;
font-weight: 500;
color: #ffffff;
}
}
......@@ -58,30 +48,30 @@
flex-direction: column;
.p-name {
font-size: 40rpx;
font-weight: 700;
font-size: 36rpx;
font-weight: 600;
color: #ffffff;
letter-spacing: 1rpx;
margin-bottom: 12rpx;
letter-spacing: 0.5rpx;
margin-bottom: 8rpx;
}
.p-position {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.85);
color: rgba(255, 255, 255, 0.8);
}
}
}
}
.info-list {
margin: 0 32rpx;
margin: 32rpx 32rpx 0;
background: #ffffff;
border-radius: 28rpx;
padding: 8rpx 32rpx;
box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.06);
border-radius: 20rpx;
padding: 8rpx 28rpx;
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.06);
.info-item {
padding: 32rpx 0;
padding: 30rpx 0;
border-bottom: 1rpx solid #f1f5f9;
&:last-child {
......@@ -89,13 +79,13 @@
}
.info-icon {
width: 64rpx;
height: 64rpx;
border-radius: 18rpx;
width: 60rpx;
height: 60rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 24rpx;
margin-right: 20rpx;
flex-shrink: 0;
}
......@@ -109,7 +99,7 @@
.info-value {
flex: 1;
font-size: 28rpx;
font-weight: 600;
font-weight: 500;
color: #1e293b;
text-align: right;
word-break: break-all;
......@@ -118,13 +108,13 @@
}
.logout-wrap {
padding: 48rpx 32rpx;
padding: 36rpx 32rpx;
.logout-btn {
height: 96rpx;
height: 92rpx;
background: #ffffff;
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(239, 68, 68, 0.08);
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(239, 68, 68, 0.08);
transition: all 0.2s ease;
&:active {
......@@ -133,11 +123,11 @@
}
.logout-text {
font-size: 30rpx;
font-weight: 600;
font-size: 28rpx;
font-weight: 500;
color: #ef4444;
margin-left: 12rpx;
letter-spacing: 1rpx;
margin-left: 10rpx;
letter-spacing: 0.5rpx;
}
}
}
......
pages/home/index.vue
......@@ -4,7 +4,6 @@
<view class="hero-bg"></view>
<view class="hero-inner">
<view class="greeting">
<text class="g-sub">SUPPLY CHAIN</text>
<text class="g-main">供应链审批系统</text>
</view>
<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