From f66eee1d038afc05f1a727db256ba5c6818f6fb4 Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Tue, 27 Jan 2026 15:35:51 +0800
Subject: [PATCH] 1

---
 src/assets/css/index.scss |  129 +++++++++++++++++++++++++++++++++++++-----
 1 files changed, 112 insertions(+), 17 deletions(-)

diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index dc4d866..9d3afaf 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -6,7 +6,7 @@
 
 /* overwite default */
 :root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
@@ -107,19 +107,43 @@
 
 
 .inputBackground {
-  background: #1B233B;
+  background: $input_background;
+  border-radius: 12px;
+  border: 1px solid rgba(118, 128, 143, 0.1);
+  transition: all 0.2s ease;
+  
+  &:focus {
+    border-color: rgba(146, 209, 255, 0.3);
+    box-shadow: 0 0 0 3px rgba(146, 209, 255, 0.1);
+  }
 }
 
 .colorMain {
-  color: #1194F7;
+  color: #92D1FF;
 }
 
 .btnMain {
-  background: #1194F7;
+  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+  border: none;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+    box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+    transform: translateY(-1px);
+  }
+  
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
+  }
 }
 
 #cryptos .btnMain {
-  background: linear-gradient(90deg, #2C64D4 0%, #38AEEA 100%)
+  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+  box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
 }
 
 .leftReturn {
@@ -135,6 +159,37 @@
 
 .text-blue {
   color: $blue;
+}
+
+/* Crypto.com 风格辅助类 */
+.shadow-card {
+  box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+}
+
+.shadow-card-hover {
+  box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 6px 24px rgba(146, 209, 255, 0.16);
+    transform: translateY(-2px);
+  }
+}
+
+.gradient-primary {
+  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.border-crypto {
+  border: 1px solid rgba(118, 128, 143, 0.1);
+  border-radius: 12px;
 }
 
 /***************** global use framework *****************/
@@ -257,35 +312,75 @@
   outline: none;
 }
 
-/* border radius */
+/* border radius - Crypto.com 风格 */
 .rounded-sm {
-  border-radius: 2px;
-}
-
-.rounded {
-  border-radius: 4px;
-}
-
-.rounded-md {
   border-radius: 6px;
 }
 
-.rounded-lg {
+.rounded {
   border-radius: 8px;
 }
 
-.rounded-xl {
+.rounded-md {
+  border-radius: 10px;
+}
+
+.rounded-lg {
   border-radius: 12px;
 }
 
-.rounded-2xl {
+.rounded-xl {
   border-radius: 16px;
+}
+
+.rounded-2xl {
+  border-radius: 20px;
 }
 
 .rounded-full {
   border-radius: 9999px;
 }
 
+/* 卡片样式 - Crypto.com 风格 */
+.card {
+  background: $main_background;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 2px 12px rgba(146, 209, 255, 0.08);
+  border: 1px solid rgba(118, 128, 143, 0.1);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    box-shadow: 0 4px 20px rgba(146, 209, 255, 0.12);
+    transform: translateY(-2px);
+  }
+}
+
+/* 渐变按钮 */
+.btn-gradient {
+  background: linear-gradient(135deg, #92D1FF 0%, #7BB8FF 100%);
+  color: #ffffff;
+  border: none;
+  border-radius: 12px;
+  padding: 12px 24px;
+  font-weight: 600;
+  font-size: 15px;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba(146, 209, 255, 0.3);
+  transition: all 0.3s ease;
+  
+  &:hover {
+    background: linear-gradient(135deg, #7BB8FF 0%, #6BA8FF 100%);
+    box-shadow: 0 6px 16px rgba(146, 209, 255, 0.4);
+    transform: translateY(-1px);
+  }
+  
+  &:active {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgba(146, 209, 255, 0.3);
+  }
+}
+
 /** box-sizing */
 .box-border {
   box-sizing: border-box;

--
Gitblit v1.9.3