0235697 пре 4 дана
родитељ
комит
b77276fe32

+ 2 - 1
picture-web/src/app/app.routes.ts

@@ -10,4 +10,5 @@ export const routes: Routes = [
     redirectTo: 'mobile',
     pathMatch: 'full'
   }
-];
+];
+

+ 1 - 0
picture-web/src/index.html

@@ -12,3 +12,4 @@
   <app-root></app-root>
 </body>
 </html>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

+ 5 - 360
picture-web/src/modules/picture/cart-tab/cart-tab.html

@@ -1,345 +1,4 @@
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>简约购物车</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
-        }
-        
-        :root {
-            --primary-color: #FF6B00;
-            --primary-light: #FFE0CC;
-            --primary-dark: #E05A00;
-            --text-dark: #333333;
-            --text-light: #666666;
-            --text-lighter: #999999;
-            --border-color: #EEEEEE;
-            --bg-color: #F8F8F8;
-            --white: #FFFFFF;
-            --success: #4CAF50;
-        }
-        
-        body {
-            background-color: var(--bg-color);
-            color: var(--text-dark);
-            padding-bottom: 70px;
-        }
-        
-        /* 顶部导航 */
-        .header {
-            background-color: var(--white);
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-            padding: 12px 16px;
-            position: sticky;
-            top: 0;
-            z-index: 100;
-        }
-        
-        .header-content {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-        
-        .logo {
-            font-size: 20px;
-            font-weight: bold;
-            color: var(--primary-color);
-        }
-        
-        .cart-title {
-            font-size: 18px;
-            font-weight: 600;
-        }
-        
-        .edit-btn {
-            background: none;
-            border: none;
-            color: var(--primary-color);
-            font-size: 14px;
-            cursor: pointer;
-        }
-        
-        /* 购物车内容 */
-        .cart-container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px 16px;
-        }
-        
-        /* 全选区域 */
-        .select-all {
-            display: flex;
-            align-items: center;
-            background-color: var(--white);
-            padding: 12px 16px;
-            border-radius: 8px;
-            margin-bottom: 10px;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-        }
-        
-        .select-all input {
-            margin-right: 10px;
-            width: 18px;
-            height: 18px;
-            accent-color: var(--primary-color);
-        }
-        
-        /* 商品列表 */
-        .cart-items {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
-        }
-        
-        .cart-item {
-            background-color: var(--white);
-            border-radius: 8px;
-            padding: 16px;
-            display: flex;
-            align-items: center;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-            transition: transform 0.2s ease;
-        }
-        
-        .cart-item:hover {
-            transform: translateY(-2px);
-        }
-        
-        .item-select {
-            margin-right: 12px;
-        }
-        
-        .item-select input {
-            width: 18px;
-            height: 18px;
-            accent-color: var(--primary-color);
-        }
-        
-        .item-image {
-            width: 80px;
-            height: 80px;
-            border-radius: 6px;
-            overflow: hidden;
-            margin-right: 16px;
-            background: linear-gradient(135deg, #FFE0CC, #FFB080);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: var(--primary-dark);
-        }
-        
-        .item-image i {
-            font-size: 32px;
-        }
-        
-        .item-details {
-            flex: 1;
-        }
-        
-        .item-name {
-            font-weight: 600;
-            margin-bottom: 5px;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-        
-        .item-spec {
-            color: var(--text-light);
-            font-size: 13px;
-            margin-bottom: 8px;
-        }
-        
-        .item-price {
-            color: var(--primary-color);
-            font-weight: bold;
-            font-size: 16px;
-        }
-        
-        .item-controls {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-top: 10px;
-        }
-        
-        .quantity-control {
-            display: flex;
-            align-items: center;
-            border: 1px solid var(--border-color);
-            border-radius: 20px;
-            overflow: hidden;
-        }
-        
-        .quantity-btn {
-            width: 30px;
-            height: 30px;
-            background-color: var(--bg-color);
-            border: none;
-            font-size: 16px;
-            cursor: pointer;
-            color: var(--text-light);
-            transition: all 0.2s;
-        }
-        
-        .quantity-btn:active {
-            background-color: var(--border-color);
-        }
-        
-        .quantity-value {
-            width: 40px;
-            text-align: center;
-            font-size: 14px;
-        }
-        
-        .delete-btn {
-            background: none;
-            border: none;
-            color: var(--text-lighter);
-            font-size: 14px;
-            cursor: pointer;
-            transition: color 0.2s;
-        }
-        
-        .delete-btn:hover {
-            color: var(--primary-color);
-        }
-        
-        /* 底部结算栏 */
-        .checkout-bar {
-            position: fixed;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: var(--white);
-            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
-            padding: 12px 16px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        
-        .total-price {
-            flex: 1;
-        }
-        
-        .total-text {
-            font-size: 14px;
-            color: var(--text-light);
-            margin-bottom: 2px;
-        }
-        
-        .price {
-            color: var(--primary-color);
-            font-weight: bold;
-            font-size: 18px;
-        }
-        
-        .checkout-btn {
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: 25px;
-            padding: 12px 28px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: background-color 0.2s;
-            box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
-        }
-        
-        .checkout-btn:hover {
-            background-color: var(--primary-dark);
-        }
-        
-        .checkout-btn:disabled {
-            background-color: #cccccc;
-            cursor: not-allowed;
-            box-shadow: none;
-        }
-        
-        /* 空购物车状态 */
-        .empty-cart {
-            text-align: center;
-            padding: 60px 20px;
-        }
-        
-        .empty-cart i {
-            font-size: 80px;
-            color: #e0e0e0;
-            margin-bottom: 20px;
-        }
-        
-        .empty-cart h3 {
-            color: var(--text-light);
-            margin-bottom: 10px;
-        }
-        
-        .empty-cart p {
-            color: var(--text-lighter);
-            margin-bottom: 20px;
-        }
-        
-        .continue-btn {
-            background-color: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: 25px;
-            padding: 10px 24px;
-            font-size: 14px;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        
-        .continue-btn:hover {
-            background-color: var(--primary-dark);
-        }
-        
-        /* 动画 */
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        
-        .cart-item {
-            animation: fadeIn 0.4s ease forwards;
-        }
-        
-        .cart-item:nth-child(1) { animation-delay: 0.1s; }
-        .cart-item:nth-child(2) { animation-delay: 0.2s; }
-        .cart-item:nth-child(3) { animation-delay: 0.3s; }
-        
-        /* 响应式设计 */
-        @media (max-width: 480px) {
-            .item-image {
-                width: 70px;
-                height: 70px;
-            }
-            
-            .checkout-btn {
-                padding: 10px 20px;
-                font-size: 15px;
-            }
-            
-            .price {
-                font-size: 16px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <!-- 顶部导航 -->
+ <!-- 顶部导航 -->
     <header class="header">
         <div class="header-content">
             <div class="logo">ShopCart</div>
@@ -371,11 +30,7 @@
                     <div class="item-spec">白色 / L</div>
                     <div class="item-price">¥129.00</div>
                     <div class="item-controls">
-                        <div class="quantity-control">
-                            <button class="quantity-btn minus">-</button>
-                            <span class="quantity-value">1</span>
-                            <button class="quantity-btn plus">+</button>
-                        </div>
+                        
                         <button class="delete-btn">
                             <i class="fas fa-trash-alt"></i>
                         </button>
@@ -396,11 +51,7 @@
                     <div class="item-spec">黑色 / 42</div>
                     <div class="item-price">¥259.00</div>
                     <div class="item-controls">
-                        <div class="quantity-control">
-                            <button class="quantity-btn minus">-</button>
-                            <span class="quantity-value">1</span>
-                            <button class="quantity-btn plus">+</button>
-                        </div>
+                        
                         <button class="delete-btn">
                             <i class="fas fa-trash-alt"></i>
                         </button>
@@ -421,11 +72,7 @@
                     <div class="item-spec">i5/16GB/512GB</div>
                     <div class="item-price">¥5899.00</div>
                     <div class="item-controls">
-                        <div class="quantity-control">
-                            <button class="quantity-btn minus">-</button>
-                            <span class="quantity-value">1</span>
-                            <button class="quantity-btn plus">+</button>
-                        </div>
+                       
                         <button class="delete-btn">
                             <i class="fas fa-trash-alt"></i>
                         </button>
@@ -518,6 +165,4 @@
             // 更新初始总价
             updateTotal();
         });
-    </script>
-</body>
-</html>
+    </script>

+ 340 - 0
picture-web/src/modules/picture/cart-tab/cart-tab.scss

@@ -0,0 +1,340 @@
+:host ::ng-deep {
+  --primary-color: #FF6B00;
+  
+}
+
+
+
+ 
+ * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
+        }
+        
+        :root {
+            --primary-color: #FF6B00;
+            --primary-light: #FFE0CC;
+            --primary-dark: #E05A00;
+            --text-dark: #333333;
+            --text-light: #666666;
+            --text-lighter: #999999;
+            --border-color: #EEEEEE;
+            --bg-color: #F8F8F8;
+            --white: #FFFFFF;
+            --success: #4CAF50;
+        }
+        
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-dark);
+            padding-bottom: 70px;
+        }
+        
+        /* 顶部导航 */
+        .header {
+            background-color: var(--white);
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            padding: 12px 16px;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        
+        .header-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+        
+        .logo {
+            font-size: 20px;
+            font-weight: bold;
+            color: var(--primary-color);
+        }
+        
+        .cart-title {
+            font-size: 18px;
+            font-weight: 600;
+        }
+        
+        .edit-btn {
+            background: none;
+            border: none;
+            color: var(--primary-color);
+            font-size: 14px;
+            cursor: pointer;
+        }
+        
+        /* 购物车内容 */
+        .cart-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px 16px;
+        }
+        
+        /* 全选区域 */
+        .select-all {
+            display: flex;
+            align-items: center;
+            background-color: var(--white);
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 10px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+        }
+        
+        .select-all input {
+            margin-right: 10px;
+            width: 18px;
+            height: 18px;
+            accent-color: var(--primary-color);
+        }
+        
+        /* 商品列表 */
+        .cart-items {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+        
+        .cart-item {
+            background-color: var(--white);
+            border-radius: 8px;
+            padding: 16px;
+            display: flex;
+            align-items: center;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+            transition: transform 0.2s ease;
+        }
+        
+        .cart-item:hover {
+            transform: translateY(-2px);
+        }
+        
+        .item-select {
+            margin-right: 12px;
+        }
+        
+        .item-select input {
+            width: 18px;
+            height: 18px;
+            accent-color: var(--primary-color);
+        }
+        
+        .item-image {
+            width: 80px;
+            height: 80px;
+            border-radius: 6px;
+            overflow: hidden;
+            margin-right: 16px;
+            background: linear-gradient(135deg, #FFE0CC, #FFB080);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--primary-dark);
+        }
+        
+        .item-image i {
+            font-size: 32px;
+        }
+        
+        .item-details {
+            flex: 1;
+        }
+        
+        .item-name {
+            font-weight: 600;
+            margin-bottom: 5px;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        
+        .item-spec {
+            color: var(--text-light);
+            font-size: 13px;
+            margin-bottom: 8px;
+        }
+        
+        .item-price {
+            color: var(--primary-color);
+            font-weight: bold;
+            font-size: 16px;
+        }
+        
+        .item-controls {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 10px;
+        }
+        
+        .quantity-control {
+            display: flex;
+            align-items: center;
+            border: 1px solid var(--border-color);
+            border-radius: 20px;
+            overflow: hidden;
+        }
+        
+        .quantity-btn {
+            width: 30px;
+            height: 30px;
+            background-color: var(--bg-color);
+            border: none;
+            font-size: 16px;
+            cursor: pointer;
+            color: var(--text-light);
+            transition: all 0.2s;
+        }
+        
+        .quantity-btn:active {
+            background-color: var(--border-color);
+        }
+        
+        .quantity-value {
+            width: 40px;
+            text-align: center;
+            font-size: 14px;
+        }
+        
+        .delete-btn {
+            background: none;
+            border: none;
+            color: var(--text-lighter);
+            font-size: 14px;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+        
+        .delete-btn:hover {
+            color: var(--primary-color);
+        }
+        
+        /* 底部结算栏 */
+        .checkout-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+             margin-bottom: 50px; 
+            background-color: var(--white);
+            z-index: 999;
+            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
+            padding: 12px 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .total-price {
+            flex: 1;
+        }
+        
+        .total-text {
+            font-size: 14px;
+            color: var(--text-light);
+            margin-bottom: 2px;
+        }
+        
+        .price {
+            color: var(--primary-color);
+            font-weight: bold;
+            font-size: 18px;
+        }
+        
+        .checkout-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            padding: 12px 28px;
+            font-size: 16px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background-color 0.2s;
+            box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
+        }
+        
+        .checkout-btn:hover {
+            background-color: var(--primary-dark);
+        }
+        
+        .checkout-btn:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+        
+        /* 空购物车状态 */
+        .empty-cart {
+            text-align: center;
+            padding: 60px 20px;
+        }
+        
+        .empty-cart i {
+            font-size: 80px;
+            color: #e0e0e0;
+            margin-bottom: 20px;
+        }
+        
+        .empty-cart h3 {
+            color: var(--text-light);
+            margin-bottom: 10px;
+        }
+        
+        .empty-cart p {
+            color: var(--text-lighter);
+            margin-bottom: 20px;
+        }
+        
+        .continue-btn {
+            background-color: var(--primary-color);
+            color: white;
+            border: none;
+            border-radius: 25px;
+            padding: 10px 24px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: background-color 0.2s;
+        }
+        
+        .continue-btn:hover {
+            background-color: var(--primary-dark);
+        }
+        
+        /* 动画 */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        
+        .cart-item {
+            animation: fadeIn 0.4s ease forwards;
+        }
+        
+        .cart-item:nth-child(1) { animation-delay: 0.1s; }
+        .cart-item:nth-child(2) { animation-delay: 0.2s; }
+        .cart-item:nth-child(3) { animation-delay: 0.3s; }
+        
+        /* 响应式设计 */
+        @media (max-width: 480px) {
+            .item-image {
+                width: 70px;
+                height: 70px;
+            }
+            
+            .checkout-btn {
+                padding: 10px 20px;
+                font-size: 15px;
+            }
+            
+            .price {
+                font-size: 16px;
+            }
+        }

+ 5 - 5
picture-web/src/modules/picture/cart-tab/cart-tab.ts

@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-cart-tab',
-  imports: [],
+  standalone: true,
+  imports: [CommonModule],
   templateUrl: './cart-tab.html',
-  styleUrl: './cart-tab.scss'
+  styleUrls: ['./cart-tab.scss']
 })
-export class CartTab {
-
-}
+export class CartTab {} // ✅ 和 mobile.routes.ts 中保持一致

+ 3 - 1
picture-web/src/modules/picture/mobile.routes.ts

@@ -25,4 +25,6 @@ export const MOBILE_ROUTES: Routes = [
       }
     ]
   }
-];
+];
+
+