From 9a296719ad590232309b164c7a247d725b6dd0f6 Mon Sep 17 00:00:00 2001
From: yiqiu <yiqiu@ycyaw.com>
Date: Fri, 20 Mar 2026 21:09:34 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BB=AA=E8=A1=A8=E7=9B=98UI=E5=85=A8?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96=20=E7=A3=A8=E7=A0=82=E7=8E=BB?=
 =?UTF-8?q?=E7=92=83=E9=9D=A2=E6=9D=BF+=E4=BD=8E=E9=A5=B1=E5=92=8C?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87+=E5=9C=86=E8=A7=92=E7=BB=9F=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 clientarea/hgcloud/css/home.css | 116 ++++++++++++++++++++------------
 1 file changed, 74 insertions(+), 42 deletions(-)

diff --git a/clientarea/hgcloud/css/home.css b/clientarea/hgcloud/css/home.css
index 62aac69..dccf192 100644
--- a/clientarea/hgcloud/css/home.css
+++ b/clientarea/hgcloud/css/home.css
@@ -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;