Skip to content

梁建民 / scm_app

Go to a project
Commit c66cc9f3 by liangjianmin
Options

style(home): 调整首页样式以优化视觉效果 

- 修改英雄区域的内边距和背景样式
- 更新统计卡片的边框和阴影效果
- 调整内容区域的内边距和标题高度
- 优化入口卡片的样式和阴影
- 移除不必要的问候语元素
parent 7aaeeb6a
Inline Side-by-side
Showing with 82 additions and 57 deletions
assets/css/home/index.scss
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.hero { .hero {
position: relative; position: relative;
padding: 48rpx 32rpx 64rpx; padding: 36rpx 32rpx 54rpx;
overflow: hidden; overflow: hidden;
.hero-bg { .hero-bg {
...@@ -13,28 +13,34 @@ ...@@ -13,28 +13,34 @@
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
height: 320rpx; height: 250rpx;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); background:
border-radius: 0 0 48rpx 48rpx; radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 30%),
radial-gradient(circle at 86% 22%, rgba(219, 234, 254, 0.32) 0, rgba(219, 234, 254, 0) 28%),
linear-gradient(150deg, #60a5fa 0%, #3b82f6 46%, #2563eb 100%);
border-radius: 0 0 40rpx 40rpx;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -80rpx; top: 26rpx;
right: -60rpx; right: -40rpx;
width: 360rpx; width: 280rpx;
height: 360rpx; height: 150rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%); border: 1rpx solid rgba(255, 255, 255, 0.24);
border-radius: 999rpx;
transform: rotate(-16deg);
} }
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -40rpx; right: 36rpx;
left: -40rpx; bottom: 20rpx;
width: 240rpx; width: 220rpx;
height: 240rpx; height: 96rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%); background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0.18) 2rpx, transparent 2rpx, transparent 18rpx);
opacity: 0.45;
} }
} }
...@@ -43,25 +49,14 @@ ...@@ -43,25 +49,14 @@
z-index: 1; z-index: 1;
} }
.greeting {
margin-bottom: 40rpx;
.g-main {
font-size: 44rpx;
font-weight: 600;
color: #ffffff;
letter-spacing: 0.5rpx;
line-height: 1.3;
}
}
.stat-card { .stat-card {
position: relative; position: relative;
display: flex; display: flex;
background: #ffffff; background: #ffffff;
border-radius: 24rpx; border-radius: 22rpx;
padding: 36rpx 24rpx; padding: 34rpx 24rpx;
box-shadow: 0 12rpx 32rpx rgba(30, 58, 138, 0.12); border: 1rpx solid rgba(255, 255, 255, 0.72);
box-shadow: 0 16rpx 36rpx rgba(37, 99, 235, 0.18);
.stat-item { .stat-item {
flex: 1; flex: 1;
...@@ -102,18 +97,18 @@ ...@@ -102,18 +97,18 @@
} }
.content-wrap { .content-wrap {
padding: 8rpx 32rpx 0; padding: 0 32rpx;
.group { .group {
margin-bottom: 16rpx; margin-bottom: 16rpx;
} }
.section-header { .section-header {
margin: 28rpx 0 24rpx; margin: 22rpx 0 24rpx;
.title-bar { .title-bar {
width: 6rpx; width: 6rpx;
height: 28rpx; height: 30rpx;
border-radius: 3rpx; border-radius: 3rpx;
background: linear-gradient(180deg, #3b82f6, #2563eb); background: linear-gradient(180deg, #3b82f6, #2563eb);
margin-right: 14rpx; margin-right: 14rpx;
...@@ -137,11 +132,13 @@ ...@@ -137,11 +132,13 @@
box-sizing: border-box; box-sizing: border-box;
width: calc(50% - 12rpx); width: calc(50% - 12rpx);
background: #ffffff; background: #ffffff;
border-radius: 24rpx; border-radius: 20rpx;
padding: 32rpx 28rpx; padding: 30rpx 28rpx 28rpx;
min-height: 176rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.05); border: 1rpx solid rgba(226, 232, 240, 0.7);
box-shadow: 0 10rpx 28rpx rgba(15, 23, 42, 0.06);
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
animation: cardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards; animation: cardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
...@@ -160,14 +157,14 @@ ...@@ -160,14 +157,14 @@
} }
.icon-wrap { .icon-wrap {
width: 84rpx; width: 72rpx;
height: 84rpx; height: 72rpx;
border-radius: 22rpx; border-radius: 18rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 24rpx; margin-bottom: 22rpx;
box-shadow: 0 8rpx 20rpx rgba(37, 99, 235, 0.22); box-shadow: 0 8rpx 18rpx rgba(71, 85, 105, 0.08);
} }
.entry-title { .entry-title {
......
assets/css/mine/index.scss
...@@ -8,12 +8,43 @@ ...@@ -8,12 +8,43 @@
position: relative; position: relative;
padding: 20rpx 24rpx 26rpx; padding: 20rpx 24rpx 26rpx;
margin: 6rpx -28rpx 0; margin: 6rpx -28rpx 0;
background: #197adb; overflow: hidden;
background: linear-gradient(150deg, #60a5fa 0%, #3b82f6 46%, #2563eb 100%);
border-radius: 0 0 28rpx 28rpx; border-radius: 0 0 28rpx 28rpx;
box-shadow: 0 12rpx 28rpx rgba(25, 122, 219, 0.16); box-shadow: 0 12rpx 28rpx rgba(25, 122, 219, 0.16);
.hero-bg { .hero-bg {
display: none; position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 30%),
radial-gradient(circle at 86% 22%, rgba(219, 234, 254, 0.32) 0, rgba(219, 234, 254, 0) 28%);
&::before {
content: '';
position: absolute;
top: 18rpx;
right: -46rpx;
width: 260rpx;
height: 132rpx;
border: 1rpx solid rgba(255, 255, 255, 0.24);
border-radius: 999rpx;
transform: rotate(-16deg);
}
&::after {
content: '';
position: absolute;
right: 32rpx;
bottom: 18rpx;
width: 200rpx;
height: 88rpx;
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0.18) 2rpx, transparent 2rpx, transparent 18rpx);
opacity: 0.42;
}
} }
.profile-card { .profile-card {
...@@ -107,15 +138,15 @@ ...@@ -107,15 +138,15 @@
} }
.info-icon { .info-icon {
width: 64rpx; width: 56rpx;
height: 64rpx; height: 56rpx;
border-radius: 18rpx; border-radius: 16rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-right: 22rpx; margin-right: 22rpx;
flex-shrink: 0; flex-shrink: 0;
box-shadow: 0 10rpx 22rpx rgba(15, 23, 42, 0.1); box-shadow: 0 8rpx 18rpx rgba(71, 85, 105, 0.08);
} }
.info-content { .info-content {
......
pages/home/index.vue
...@@ -3,9 +3,6 @@ ...@@ -3,9 +3,6 @@
<view class="hero"> <view class="hero">
<view class="hero-bg"></view> <view class="hero-bg"></view>
<view class="hero-inner"> <view class="hero-inner">
<view class="greeting">
<text class="g-main">供应链审批系统</text>
</view>
<view class="stat-card"> <view class="stat-card">
<view class="stat-item" v-for="(item, index) in statList" :key="item.key" :style="{ animationDelay: (index * 0.08) + 's' }"> <view class="stat-item" v-for="(item, index) in statList" :key="item.key" :style="{ animationDelay: (index * 0.08) + 's' }">
<text class="stat-num">{{ item.value }}</text> <text class="stat-num">{{ item.value }}</text>
...@@ -27,7 +24,7 @@ ...@@ -27,7 +24,7 @@
<view class="entry-grid"> <view class="entry-grid">
<view class="entry-card" :class="{ 'is-disabled': item.disabled }" v-for="(item, index) in group.items" :key="item.id" @click="goApply(item)" :style="{ animationDelay: (gIndex * 0.1 + index * 0.06) + 's' }"> <view class="entry-card" :class="{ 'is-disabled': item.disabled }" v-for="(item, index) in group.items" :key="item.id" @click="goApply(item)" :style="{ animationDelay: (gIndex * 0.1 + index * 0.06) + 's' }">
<view class="icon-wrap" :style="{ background: item.bg }"> <view class="icon-wrap" :style="{ background: item.bg }">
<u-icon :name="item.icon" color="#ffffff" size="40"></u-icon> <u-icon :name="item.icon" :color="item.color" size="34"></u-icon>
</view> </view>
<text class="entry-title">{{ item.name }}</text> <text class="entry-title">{{ item.name }}</text>
<text class="entry-tip" v-if="item.disabled">暂未上线</text> <text class="entry-tip" v-if="item.disabled">暂未上线</text>
...@@ -55,15 +52,15 @@ ...@@ -55,15 +52,15 @@
{ {
title: '日常业务', title: '日常业务',
items: [ items: [
{ id: 'fee', name: '业务费用减免', icon: 'rmb-circle-fill', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', url: '/pages/apply/index' }, { id: 'fee', name: '业务费用减免', icon: 'rmb-circle-fill', color: '#4f8078', bg: 'linear-gradient(135deg, #eef8f5 0%, #dcefeb 100%)', url: '/pages/apply/index' },
{ id: 'logistics', name: '物流车辆申请', icon: 'car-fill', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', url: '/pages/logistics/index' } { id: 'logistics', name: '物流车辆申请', icon: 'car-fill', color: '#936a4b', bg: 'linear-gradient(135deg, #fbf4ec 0%, #f0e4d8 100%)', url: '/pages/logistics/index' }
] ]
}, },
{ {
title: '额度风控', title: '额度风控',
items: [ items: [
{ id: 'tempQuota', name: '临时额度申请', icon: 'clock-fill', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', disabled: true }, { id: 'tempQuota', name: '临时额度申请', icon: 'clock-fill', color: '#8294a8', bg: 'linear-gradient(135deg, #f3f7fb 0%, #e6eef6 100%)', disabled: true },
{ id: 'creditQuota', name: '授信额度申请', icon: 'integral-fill', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', disabled: true } { id: 'creditQuota', name: '授信额度申请', icon: 'integral-fill', color: '#8c84a6', bg: 'linear-gradient(135deg, #f6f4fb 0%, #ebe7f5 100%)', disabled: true }
] ]
} }
] ]
......
pages/mine/index.vue
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<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="item.color" size="28"></u-icon>
</view> </view>
<view class="info-content"> <view class="info-content">
<text class="info-label">{{ item.label }}</text> <text class="info-label">{{ item.label }}</text>
...@@ -48,8 +48,8 @@ ...@@ -48,8 +48,8 @@
return { return {
info: {}, info: {},
infoFields: [ infoFields: [
{ key: 'department_name', label: '部门', icon: 'grid-fill', bg: 'linear-gradient(135deg, #8b5cf6, #7c3aed)' }, { key: 'department_name', label: '部门', icon: 'grid-fill', color: '#4f8078', bg: 'linear-gradient(135deg, #eef8f5 0%, #dcefeb 100%)' },
{ key: 'position_name', label: '岗位', icon: 'account-fill', bg: 'linear-gradient(135deg, #f59e0b, #d97706)' } { key: 'position_name', label: '岗位', icon: 'account-fill', color: '#936a4b', bg: 'linear-gradient(135deg, #fbf4ec 0%, #f0e4d8 100%)' }
] ]
}; };
}, },
......
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