yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 仪表盘UI全面优化 磨砂玻璃面板+低饱和卡片+圆角统一
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
yiqiu
2026-03-20 21:09:34 +08:00
parent f79642c7ca
commit 9a296719ad
1 changed files with 74 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
clientarea/hgcloud/css/home.css
View File

@@ -3,23 +3,27 @@
} }
.main-card { .main-card {
max-width: none; max-width: none;
background: #0d1117; background: transparent;
} }
.main-content { .main-content {
display: flex; display: flex;
gap: 20px;
} }
.left-box { .left-box {
flex: 1; flex: 1;
min-width: 0;
} }
.info-box { .info-box {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box; box-sizing: border-box;
padding: 0.84rem 0.6rem 0.4rem 1.1rem; padding: 0.6rem 0.5rem 0.4rem 0.6rem;
border-right: 1px solid rgba(255,255,255,0.06); background: rgba(255, 255, 255, 0.04);
background-color: #161b22; border: 1px solid rgba(255, 255, 255, 0.06);
min-height: 1.88rem; border-radius: 16px;
min-height: 1.6rem;
backdrop-filter: blur(8px);
} }
.info-first { .info-first {
height: 0.6rem; height: 0.6rem;
@@ -30,13 +34,14 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
font-size: 0.36rem; font-size: 0.28rem;
background: #161b22; background: linear-gradient(135deg, #3B82F6, #8B5CF6);
width: 0.6rem; width: 0.52rem;
height: 0.6rem; height: 0.52rem;
border-radius: 0.03rem; border-radius: 50%;
color: #FFFFFF; color: #FFFFFF;
font-weight: bold; font-weight: bold;
flex-shrink: 0;
} }
.name-box { .name-box {
display: flex; display: flex;
@@ -149,8 +154,8 @@
width: 0.16rem; width: 0.16rem;
} }
.statistics-box { .statistics-box {
margin-top: 0.4rem; margin-top: 20px;
padding: 0 0.36rem 0rem 0.8rem; padding: 0;
} }
.title-text { .title-text {
font-weight: Bold; font-weight: Bold;
@@ -165,7 +170,10 @@
} }
.money-box { .money-box {
flex: 1; flex: 1;
background-color: #161b22; background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
backdrop-filter: blur(8px);
} }
.order-box { .order-box {
display: flex; display: flex;
@@ -303,26 +311,29 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 1.16rem; width: 1.16rem;
border-radius: 0.03rem; border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
} }
.order-item:hover { .order-item:hover {
cursor: default; cursor: default;
transform: scale(1.1); transform: translateY(-4px);
transition: all 0.3s; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
} }
.order-box { .order-box {
margin-left: 0.29rem; margin-left: 16px;
gap: 12px;
} }
.order-box-1 { .order-box-1 {
margin-right: 0.11rem; background: linear-gradient(145deg, rgba(114, 57, 234, 0.3), rgba(114, 57, 234, 0.08));
background: #7239EA; border: 1px solid rgba(114, 57, 234, 0.2);
} }
.order-box-2 { .order-box-2 {
margin-right: 0.11rem; background: linear-gradient(145deg, rgba(54, 153, 255, 0.3), rgba(54, 153, 255, 0.08));
background: #3699FF; border: 1px solid rgba(54, 153, 255, 0.2);
} }
.order-box-3 { .order-box-3 {
background: #3DD598; background: linear-gradient(145deg, rgba(61, 213, 152, 0.3), rgba(61, 213, 152, 0.08));
border: 1px solid rgba(61, 213, 152, 0.2);
} }
.order-title { .order-title {
color: #FFFFFF; color: #FFFFFF;
@@ -341,11 +352,15 @@
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
} }
.product-list-box { .product-list-box {
margin-top: 0.4rem; margin-top: 20px;
padding: 0 0.36rem 0rem 0.8rem; padding: 0;
} }
.goods-box { .goods-box {
background-color: #161b22; background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
backdrop-filter: blur(8px);
padding: 0 20px;
} }
.goods-table { .goods-table {
border-spacing: 0; border-spacing: 0;
@@ -376,9 +391,13 @@
} }
.right-box { .right-box {
box-sizing: border-box; box-sizing: border-box;
padding: 0.4rem; padding: 24px;
width: 5.9rem; width: 380px;
background-color: #161b22; flex-shrink: 0;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 16px;
backdrop-filter: blur(8px);
} }
.recommend-box { .recommend-box {
width: 3.65rem; width: 3.65rem;
@@ -454,9 +473,10 @@
color: #8B949E; color: #8B949E;
} }
.WorkOrder-content { .WorkOrder-content {
padding: 0.3rem 0.3rem 0 0.3rem; padding: 16px;
border-radius: 0.03rem; border-radius: 12px;
border: 1px solid rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.06);
background: rgba(255, 255, 255, 0.02);
} }
.WorkOrder-item { .WorkOrder-item {
display: flex; display: flex;
@@ -560,28 +580,40 @@
.no-product { .no-product {
width: 100%; width: 100%;
text-align: center; text-align: center;
margin-top: 1.06rem; padding: 60px 0 80px;
padding-bottom: 1.72rem; }
.no-product::before {
content: '\e4b6';
font-family: 'Phosphor';
font-size: 72px;
color: #8B949E;
opacity: 0.2;
display: block;
margin-bottom: 16px;
} }
.no-product h2 { .no-product h2 {
font-weight: 400; font-weight: 500;
color: #E6E8EB; color: #E6E8EB;
font-size: 0.28rem; font-size: 18px;
} }
.no-product p { .no-product p {
margin: 0.1rem 0 0.2rem 0; margin: 8px 0 20px 0;
color: #8B949E; color: #8B949E;
font-size: 0.14rem; font-size: 14px;
} }
.no-product .el-button { .no-product .el-button {
margin: 0 auto; margin: 0 auto;
width: 1.02rem; padding: 10px 28px;
height: 0.32rem; background: linear-gradient(135deg, #3B82F6, #2563EB);
background: #0058FF; border-radius: 999px;
border-radius: 0.03rem; font-size: 14px;
font-size: 0.14rem;
border: none; border: none;
color: rgba(255, 255, 255, 0.9); color: #fff;
transition: all 0.2s ease;
}
.no-product .el-button:hover {
box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4);
transform: translateY(-1px);
} }
.no-recommend { .no-recommend {
margin: 0 auto; margin: 0 auto;