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