Skip to content

梁建民 / scm_app

Go to a project
Commit f47fca98 by liangjianmin
Options

Refactor home page layout and styles to enhance user experience, including user… 

Refactor home page layout and styles to enhance user experience, including user card design, section headers, and entry card animations. Update JSON configuration for navigation bar refresh functionality in approve page.
parent 041d90f0
Inline Side-by-side
Showing with 276 additions and 63 deletions
assets/css/home/index.scss
.home-index { .home-index {
min-height: 100vh; min-height: 100vh;
padding-bottom: 158rpx; padding-bottom: 158rpx;
background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%); background: #f5f7fa;
.head { .head {
padding: 24rpx 28rpx;
min-height: 140rpx;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-radius: 0 0 24rpx 24rpx; padding: 24rpx 28rpx;
box-shadow: 0 6rpx 20rpx rgba(37, 99, 235, 0.3);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
top: -40%; top: -50%;
right: -15%; right: -20%;
width: 250rpx; width: 400rpx;
height: 250rpx; height: 400rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 60%); background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
pointer-events: none; pointer-events: none;
} }
.info-bar { &::after {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 300rpx;
height: 300rpx;
background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.user-card {
position: relative; position: relative;
z-index: 1; z-index: 1;
.info-bar {
.avatar-wrap {
width: 96rpx;
height: 96rpx;
background: rgba(255, 255, 255, 0.2);
border-radius: 24rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20rpx;
backdrop-filter: blur(10rpx);
.icon-juxing { .icon-juxing {
font-size: 90rpx; font-size: 56rpx;
color: #ffffff; color: #ffffff;
margin-right: 16rpx; }
} }
.t1 { .t1 {
font-size: 32rpx; font-size: 34rpx;
color: #ffffff; color: #ffffff;
font-weight: 600; font-weight: 600;
letter-spacing: 0.5rpx; letter-spacing: 0.5rpx;
margin-bottom: 6rpx;
} }
.t2 { .t2 {
font-size: 24rpx; font-size: 24rpx;
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.85);
margin-top: 6rpx;
} }
} }
.setting { .setting {
position: relative; width: 72rpx;
z-index: 1; height: 72rpx;
padding: 14rpx 18rpx; background: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.2);
border-radius: 20rpx; border-radius: 20rpx;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease; transition: all 0.2s ease;
backdrop-filter: blur(10rpx);
&:active { &:active {
background: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.25);
transform: scale(0.96); transform: scale(0.95);
} }
.iconfont { .iconfont {
font-size: 26rpx; font-size: 32rpx;
color: #ffffff; color: #ffffff;
} }
.tt {
font-size: 24rpx;
color: #ffffff;
margin-left: 6rpx;
font-weight: 500;
} }
} }
} }
.content-wrap {
padding: 28rpx 28rpx 0;
.section-header {
margin-bottom: 24rpx;
.section-title { .section-title {
font-size: 30rpx; font-size: 32rpx;
font-weight: 600; font-weight: 600;
color: #1e293b; color: #1e293b;
padding: 32rpx 28rpx 20rpx; }
} }
.entry-grid { .entry-grid {
padding: 0 28rpx; padding: 0 4rpx;
.entry-card { .entry-card {
width: calc(50% - 12rpx); position: relative;
margin-right: 24rpx; background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
border-radius: 20rpx;
padding: 32rpx 28rpx;
margin-bottom: 24rpx; margin-bottom: 24rpx;
padding: 28rpx 24rpx; overflow: hidden;
background: #ffffff; box-shadow:
border-radius: 16rpx; 0 2rpx 8rpx rgba(15, 23, 42, 0.04),
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05); 0 8rpx 24rpx rgba(15, 23, 42, 0.06),
transition: all 0.2s ease; inset 0 1rpx 0 rgba(255, 255, 255, 0.9);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
animation: cardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
&:nth-child(2n) { &::before {
margin-right: 0; content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.03) 0%, transparent 50%);
opacity: 0;
transition: opacity 0.4s ease;
} }
&:active { &:active {
transform: scale(0.97); transform: translateY(-4rpx) scale(0.99);
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08); box-shadow:
0 4rpx 16rpx rgba(59, 130, 246, 0.12),
0 16rpx 48rpx rgba(59, 130, 246, 0.15),
inset 0 1rpx 0 rgba(255, 255, 255, 1);
&::before {
opacity: 1;
} }
.entry-icon { .card-border {
width: 72rpx; opacity: 1;
height: 72rpx; }
background: #f0faf4;
border-radius: 16rpx; .icon-shine {
margin-right: 20rpx; opacity: 1;
transform: translateX(200rpx);
}
.icon-bg-layer {
transform: scale(1.15) rotate(10deg);
}
.action-line {
width: 100%;
}
.action-icon {
transform: translateX(8rpx);
background: rgba(59, 130, 246, 0.15);
}
}
.card-content {
display: flex;
align-items: center;
position: relative;
z-index: 1;
.icon-section {
position: relative;
margin-right: 24rpx;
flex-shrink: 0; flex-shrink: 0;
.icon-bg-layer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100rpx;
height: 100rpx;
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(37, 99, 235, 0.12) 100%);
border-radius: 24rpx;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
.entry-text { .icon-container {
font-size: 28rpx; position: relative;
color: #1e293b; width: 88rpx;
font-weight: 500; height: 88rpx;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border-radius: 22rpx;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 4rpx 12rpx rgba(59, 130, 246, 0.08),
inset 0 1rpx 0 rgba(255, 255, 255, 1),
inset 0 -1rpx 0 rgba(148, 163, 184, 0.1);
border: 1rpx solid rgba(59, 130, 246, 0.1);
}
.icon-shine {
position: absolute;
top: 0;
left: -100rpx;
width: 40rpx;
height: 100%;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
opacity: 0;
transition: all 0.6s ease;
pointer-events: none;
}
}
.text-section {
flex: 1;
display: flex;
flex-direction: column;
.entry-title {
font-size: 30rpx;
font-weight: 600;
color: #0f172a;
line-height: 1.3;
letter-spacing: 0.5rpx;
margin-bottom: 6rpx;
}
.entry-subtitle {
font-size: 22rpx;
color: #64748b;
line-height: 1.4;
letter-spacing: 0.3rpx;
}
}
}
.card-action {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 28rpx;
display: flex;
align-items: center;
.action-line {
width: 0;
height: 1rpx;
background: linear-gradient(90deg, transparent 0%, #3b82f6 100%);
margin-right: 12rpx;
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.action-icon {
width: 44rpx;
height: 44rpx;
border-radius: 50%;
background: rgba(59, 130, 246, 0.08);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
border: 1rpx solid rgba(59, 130, 246, 0.12);
}
}
.card-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 20rpx;
border: 2rpx solid transparent;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) border-box;
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
}
}
@keyframes cardSlideIn {
from {
opacity: 0;
transform: translateY(30rpx);
}
to {
opacity: 1;
transform: translateY(0);
} }
} }
} }
......
pages.json
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
"path": "pages/home/index", "path": "pages/home/index",
"style": { "style": {
"navigationBarTitleText": "供应链商务", "navigationBarTitleText": "供应链商务",
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark" "backgroundTextStyle": "dark"
} }
}, },
...@@ -23,7 +22,8 @@ ...@@ -23,7 +22,8 @@
{ {
"path": "pages/approve/index", "path": "pages/approve/index",
"style": { "style": {
"navigationBarTitleText": "审批列表" "navigationBarTitleText": "审批列表",
"enablePullDownRefresh": true
} }
}, },
{ {
......
pages/home/index.vue
<template> <template>
<view class="home-index"> <view class="home-index">
<view class="head" v-if="!loading && info.user_info"> <view class="head" v-if="!loading && info.user_info">
<view class="user-card">
<view class="row bothSide verCenter"> <view class="row bothSide verCenter">
<view class="info-bar row verCenter"> <view class="info-bar row verCenter">
<view class="avatar-wrap">
<text class="iconfont icon-juxing"></text> <text class="iconfont icon-juxing"></text>
</view>
<view class="column"> <view class="column">
<text class="t1">{{ info.user_info.name }}</text> <text class="t1">{{ info.user_info.name }}</text>
<text class="t2">{{ info.user_info.email }}</text> <text class="t2">{{ info.user_info.email }}</text>
...@@ -11,19 +14,42 @@ ...@@ -11,19 +14,42 @@
</view> </view>
<view class="setting row verCenter" @click="exit()"> <view class="setting row verCenter" @click="exit()">
<text class="iconfont icon-a-juxing13"></text> <text class="iconfont icon-a-juxing13"></text>
<text class="tt">设置</text> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="section-title">审批</view> <view class="content-wrap" v-if="!loading && info.user_info">
<view class="section-header row verCenter">
<text class="section-title">快捷入口</text>
</view>
<view class="entry-grid row" style="flex-wrap: wrap;"> <view class="entry-grid">
<view class="entry-card row verCenter" v-for="item in entryList" :key="item.id" @click="goApply(item)"> <view class="entry-card" v-for="(item, index) in entryList" :key="item.id" @click="goApply(item)" :style="{ animationDelay: (index * 0.1) + 's' }">
<view class="entry-icon row rowCenter verCenter"> <view class="card-content">
<u-icon name="plus-circle-fill" color="#19be6b" size="44"></u-icon> <view class="icon-section">
<view class="icon-bg-layer"></view>
<view class="icon-container">
<u-icon :name="item.icon" :color="item.color" size="48"></u-icon>
</view>
<view class="icon-shine"></view>
</view>
<view class="text-section">
<text class="entry-title">{{ item.name }}</text>
<text class="entry-subtitle">快速发起申请</text>
</view>
</view>
<view class="card-action">
<view class="action-line"></view>
<view class="action-icon">
<u-icon name="arrow-right" color="#3b82f6" size="18"></u-icon>
</view>
</view>
<view class="card-border"></view>
</view> </view>
<text class="entry-text">{{ item.name }}</text>
</view> </view>
</view> </view>
</view> </view>
...@@ -38,7 +64,12 @@ ...@@ -38,7 +64,12 @@
info: {}, info: {},
loading: true, loading: true,
entryList: [ entryList: [
{ id: 1, name: '费用减免申请' } {
id: 1,
name: '费用减免申请',
icon: 'file-text-fill',
color: '#3b82f6'
}
] ]
}; };
}, },
......
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