feat: add user profile page and improve UI styling

styles/mall.css

@@ -1,15 +1,25 @@
-/* 商城页面专用样式 */
+/* 商城页面专用样式 - 小米风格设计 */
 
-/* 顶部促销横幅 */
+/* 页面整体样式 */
+#mall-page {
+    background-color: #f5f5f5;
+    min-height: 100vh;
+}
+
+#mall-page .container {
+    background-color: #f5f5f5;
+}
+
+/* 顶部促销横幅 - 小米风格 */
 .promo-banner {
-    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
-    padding: 12px 20px;
+    background: linear-gradient(135deg, #ff6900 0%, #ff8f00 100%);
+    padding: 10px 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: relative;
-    border-radius: 0 0 20px 20px;
-    margin-bottom: 15px;
+    margin-bottom: 12px;
+    box-shadow: 0 2px 8px rgba(255, 105, 0, 0.2);
 }
 
 .promo-content {
@@ -48,18 +58,25 @@
     font-weight: bold;
 }
 
-/* 搜索框样式 */
+/* 搜索框样式 - 小米风格 */
 .search-section {
-    padding: 0 20px 20px;
+    padding: 0 16px 16px;
 }
 
 .search-box {
-    background-color: #f5f5f5;
-    border-radius: 25px;
-    padding: 12px 16px;
+    background-color: #f8f8f8;
+    border-radius: 20px;
+    padding: 10px 16px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
+    border: 1px solid #e0e0e0;
+    transition: all 0.3s ease;
+}
+
+.search-box:focus-within {
+    border-color: #ff6900;
+    box-shadow: 0 0 0 2px rgba(255, 105, 0, 0.1);
 }
 
 .search-box i {
@@ -80,15 +97,16 @@
     color: #999;
 }
 
-/* 主要产品展示区域 */
+/* 主要产品展示区域 - 小米风格 */
 .main-product-section {
-    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
-    margin: 0 20px 20px;
-    border-radius: 16px;
-    padding: 25px;
+    background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%);
+    margin: 0 16px 16px;
+    border-radius: 12px;
+    padding: 20px;
     color: white;
     position: relative;
     overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
 .featured-product {
@@ -122,19 +140,21 @@
 }
 
 .cta-button {
-    background: linear-gradient(135deg, #ff1744 0%, #d50000 100%);
+    background: linear-gradient(135deg, #ff6900 0%, #ff8f00 100%);
     color: white;
     border: none;
-    padding: 12px 20px;
-    border-radius: 25px;
-    font-size: 14px;
+    padding: 10px 18px;
+    border-radius: 20px;
+    font-size: 13px;
     font-weight: 600;
     cursor: pointer;
-    transition: transform 0.2s;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(255, 105, 0, 0.3);
 }
 
-.cta-button:hover {
-    transform: translateY(-2px);
+.cta-button:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 4px rgba(255, 105, 0, 0.4);
 }
 
 .product-images {
@@ -210,13 +230,14 @@
     margin: 0;
 }
 
-/* 分类导航网格 */
+/* 分类导航网格 - 小米风格 */
 .category-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
-    gap: 20px;
-    padding: 20px;
-    margin-bottom: 10px;
+    gap: 16px;
+    padding: 16px;
+    margin-bottom: 8px;
+    background: white;
 }
 
 .category-item {
@@ -233,15 +254,20 @@
 }
 
 .category-icon {
-    width: 50px;
-    height: 50px;
-    border-radius: 12px;
+    width: 48px;
+    height: 48px;
+    border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin-bottom: 8px;
-    font-size: 20px;
+    margin-bottom: 6px;
+    font-size: 18px;
     color: white;
+    transition: transform 0.2s ease;
+}
+
+.category-item:active .category-icon {
+    transform: scale(0.95);
 }
 
 .phone-icon {
@@ -292,19 +318,21 @@
     font-weight: 500;
 }
 
-/* 促销活动区域 */
+/* 促销活动区域 - 小米风格 */
 .promotion-section {
-    padding: 0 20px 20px;
+    padding: 0 16px 16px;
+    background: #f5f5f5;
 }
 
 .promo-card.large {
-    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
-    border-radius: 16px;
-    padding: 25px;
-    margin-bottom: 15px;
+    background: linear-gradient(135deg, #ff6900 0%, #ff8f00 100%);
+    border-radius: 12px;
+    padding: 20px;
+    margin-bottom: 12px;
     color: white;
     position: relative;
     overflow: hidden;
+    box-shadow: 0 3px 15px rgba(255, 105, 0, 0.25);
 }
 
 .promo-header {
@@ -333,14 +361,21 @@
 }
 
 .promo-btn {
-    background-color: rgba(0,0,0,0.2);
+    background-color: rgba(255,255,255,0.2);
     color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 20px;
-    font-size: 14px;
+    border: 1px solid rgba(255,255,255,0.3);
+    padding: 8px 16px;
+    border-radius: 16px;
+    font-size: 13px;
     font-weight: 600;
     cursor: pointer;
+    transition: all 0.2s ease;
+    backdrop-filter: blur(10px);
+}
+
+.promo-btn:active {
+    transform: scale(0.98);
+    background-color: rgba(255,255,255,0.3);
 }
 
 .tech-icon {
@@ -354,20 +389,26 @@
     border-radius: 50%;
 }
 
-/* 促销卡片网格 */
+/* 促销卡片网格 - 小米风格 */
 .promo-cards-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 15px;
-    margin-bottom: 20px;
+    gap: 12px;
+    margin-bottom: 16px;
 }
 
 .promo-card.small {
     background: white;
-    border-radius: 12px;
-    padding: 20px;
+    border-radius: 10px;
+    padding: 16px;
     text-align: center;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.promo-card.small:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
 }
 
 .speaker-visual,
@@ -392,19 +433,25 @@
     margin: 0;
 }
 
-/* 底部促销网格 */
+/* 底部促销网格 - 小米风格 */
 .bottom-promo-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 15px;
+    gap: 12px;
 }
 
 .promo-item {
     background: white;
-    border-radius: 12px;
-    padding: 20px;
+    border-radius: 10px;
+    padding: 16px;
     text-align: center;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.promo-item:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 6px rgba(0,0,0,0.12);
 }
 
 .item-visual {