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 @@
.hero {
position: relative;
padding: 48rpx 32rpx 64rpx;
padding: 36rpx 32rpx 54rpx;
overflow: hidden;
.hero-bg {
......@@ -13,28 +13,34 @@
top: 0;
left: 0;
right: 0;
height: 320rpx;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-radius: 0 0 48rpx 48rpx;
height: 250rpx;
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%),
linear-gradient(150deg, #60a5fa 0%, #3b82f6 46%, #2563eb 100%);
border-radius: 0 0 40rpx 40rpx;
&::before {
content: '';
position: absolute;
top: -80rpx;
right: -60rpx;
width: 360rpx;
height: 360rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%);
top: 26rpx;
right: -40rpx;
width: 280rpx;
height: 150rpx;
border: 1rpx solid rgba(255, 255, 255, 0.24);
border-radius: 999rpx;
transform: rotate(-16deg);
}
&::after {
content: '';
position: absolute;
bottom: -40rpx;
left: -40rpx;
width: 240rpx;
height: 240rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
right: 36rpx;
bottom: 20rpx;
width: 220rpx;
height: 96rpx;
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 @@
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 {
position: relative;
display: flex;
background: #ffffff;
border-radius: 24rpx;
padding: 36rpx 24rpx;
box-shadow: 0 12rpx 32rpx rgba(30, 58, 138, 0.12);
border-radius: 22rpx;
padding: 34rpx 24rpx;
border: 1rpx solid rgba(255, 255, 255, 0.72);
box-shadow: 0 16rpx 36rpx rgba(37, 99, 235, 0.18);
.stat-item {
flex: 1;
......@@ -102,18 +97,18 @@
}
.content-wrap {
padding: 8rpx 32rpx 0;
padding: 0 32rpx;
.group {
margin-bottom: 16rpx;
}
.section-header {
margin: 28rpx 0 24rpx;
margin: 22rpx 0 24rpx;
.title-bar {
width: 6rpx;
height: 28rpx;
height: 30rpx;
border-radius: 3rpx;
background: linear-gradient(180deg, #3b82f6, #2563eb);
margin-right: 14rpx;
......@@ -137,11 +132,13 @@
box-sizing: border-box;
width: calc(50% - 12rpx);
background: #ffffff;
border-radius: 24rpx;
padding: 32rpx 28rpx;
border-radius: 20rpx;
padding: 30rpx 28rpx 28rpx;
min-height: 176rpx;
display: flex;
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);
animation: cardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
......@@ -160,14 +157,14 @@
}
.icon-wrap {
width: 84rpx;
height: 84rpx;
border-radius: 22rpx;
width: 72rpx;
height: 72rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
box-shadow: 0 8rpx 20rpx rgba(37, 99, 235, 0.22);
margin-bottom: 22rpx;
box-shadow: 0 8rpx 18rpx rgba(71, 85, 105, 0.08);
}
.entry-title {
......
assets/css/mine/index.scss
......@@ -8,12 +8,43 @@
position: relative;
padding: 20rpx 24rpx 26rpx;
margin: 6rpx -28rpx 0;
background: #197adb;
overflow: hidden;
background: linear-gradient(150deg, #60a5fa 0%, #3b82f6 46%, #2563eb 100%);
border-radius: 0 0 28rpx 28rpx;
box-shadow: 0 12rpx 28rpx rgba(25, 122, 219, 0.16);
.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 {
......@@ -107,15 +138,15 @@
}
.info-icon {
width: 64rpx;
height: 64rpx;
border-radius: 18rpx;
width: 56rpx;
height: 56rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 22rpx;
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 {
......
pages/home/index.vue
......@@ -3,9 +3,6 @@
<view class="hero">
<view class="hero-bg"></view>
<view class="hero-inner">
<view class="greeting">
<text class="g-main">供应链审批系统</text>
</view>
<view class="stat-card">
<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>
......@@ -27,7 +24,7 @@
<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="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>
<text class="entry-title">{{ item.name }}</text>
<text class="entry-tip" v-if="item.disabled">暂未上线</text>
......@@ -55,15 +52,15 @@
{
title: '日常业务',
items: [
{ id: 'fee', name: '业务费用减免', icon: 'rmb-circle-fill', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', url: '/pages/apply/index' },
{ id: 'logistics', name: '物流车辆申请', icon: 'car-fill', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', url: '/pages/logistics/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', color: '#936a4b', bg: 'linear-gradient(135deg, #fbf4ec 0%, #f0e4d8 100%)', url: '/pages/logistics/index' }
]
},
{
title: '额度风控',
items: [
{ id: 'tempQuota', name: '临时额度申请', icon: 'clock-fill', bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)', disabled: true },
{ id: 'creditQuota', name: '授信额度申请', icon: 'integral-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', color: '#8c84a6', bg: 'linear-gradient(135deg, #f6f4fb 0%, #ebe7f5 100%)', disabled: true }
]
}
]
......
pages/mine/index.vue
......@@ -21,7 +21,7 @@
<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>
<u-icon :name="item.icon" :color="item.color" size="28"></u-icon>
</view>
<view class="info-content">
<text class="info-label">{{ item.label }}</text>
......@@ -48,8 +48,8 @@
return {
info: {},
infoFields: [
{ key: 'department_name', label: '部门', icon: 'grid-fill', bg: 'linear-gradient(135deg, #8b5cf6, #7c3aed)' },
{ key: 'position_name', label: '岗位', icon: 'account-fill', bg: 'linear-gradient(135deg, #f59e0b, #d97706)' }
{ key: 'department_name', label: '部门', icon: 'grid-fill', color: '#4f8078', bg: 'linear-gradient(135deg, #eef8f5 0%, #dcefeb 100%)' },
{ 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