test

demo.xcodeproj/project.pbxproj

@@ -35,6 +35,9 @@
 		968A6FAE2B5FA329008609EE /* CamelPrice.swift in Sources */ = {isa = PBXBuildFile; fileRef = 968A6FAD2B5FA329008609EE /* CamelPrice.swift */; };
 		968A6FB02B5FBB86008609EE /* GoodsCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = 968A6FAF2B5FBB86008609EE /* GoodsCard.swift */; };
 		968A6FB22B5FC3A2008609EE /* ShowMore.swift in Sources */ = {isa = PBXBuildFile; fileRef = 968A6FB12B5FC3A2008609EE /* ShowMore.swift */; };
+		968A6FB42B610C67008609EE /* KillCountDown.swift in Sources */ = {isa = PBXBuildFile; fileRef = 968A6FB32B610C67008609EE /* KillCountDown.swift */; };
+		968A6FB62B6113BE008609EE /* UserAccountCard.swift in Sources */ = {isa = PBXBuildFile; fileRef = 968A6FB52B6113BE008609EE /* UserAccountCard.swift */; };
+		968A6FB82B6113FF008609EE /* UserAccountCardModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 968A6FB72B6113FF008609EE /* UserAccountCardModel.swift */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -67,6 +70,9 @@
 		968A6FAD2B5FA329008609EE /* CamelPrice.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CamelPrice.swift; sourceTree = "<group>"; };
 		968A6FAF2B5FBB86008609EE /* GoodsCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GoodsCard.swift; sourceTree = "<group>"; };
 		968A6FB12B5FC3A2008609EE /* ShowMore.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ShowMore.swift; sourceTree = "<group>"; };
+		968A6FB32B610C67008609EE /* KillCountDown.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KillCountDown.swift; sourceTree = "<group>"; };
+		968A6FB52B6113BE008609EE /* UserAccountCard.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserAccountCard.swift; sourceTree = "<group>"; };
+		968A6FB72B6113FF008609EE /* UserAccountCardModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = UserAccountCardModel.swift; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -129,6 +135,7 @@
 			isa = PBXGroup;
 			children = (
 				968A6F7B2B5F4E63008609EE /* TabBar.swift */,
+				968A6FB72B6113FF008609EE /* UserAccountCardModel.swift */,
 			);
 			path = Models;
 			sourceTree = "<group>";
@@ -152,6 +159,8 @@
 				968A6FAD2B5FA329008609EE /* CamelPrice.swift */,
 				968A6FAF2B5FBB86008609EE /* GoodsCard.swift */,
 				968A6FB12B5FC3A2008609EE /* ShowMore.swift */,
+				968A6FB32B610C67008609EE /* KillCountDown.swift */,
+				968A6FB52B6113BE008609EE /* UserAccountCard.swift */,
 			);
 			path = Components;
 			sourceTree = "<group>";
@@ -326,8 +335,11 @@
 				968A6F792B5F4E28008609EE /* TabBarView.swift in Sources */,
 				968A6FA82B5F6AF3008609EE /* CartView.swift in Sources */,
 				968A6FAA2B5F6B07008609EE /* CategoryView.swift in Sources */,
+				968A6FB82B6113FF008609EE /* UserAccountCardModel.swift in Sources */,
 				968A6F642B5F4C99008609EE /* demoApp.swift in Sources */,
+				968A6FB62B6113BE008609EE /* UserAccountCard.swift in Sources */,
 				968A6F952B5F6836008609EE /* BalanceView.swift in Sources */,
+				968A6FB42B610C67008609EE /* KillCountDown.swift in Sources */,
 				968A6F882B5F4EC4008609EE /* UserView.swift in Sources */,
 				968A6F9E2B5F688A008609EE /* LoginView.swift in Sources */,
 				968A6F8C2B5F67ED008609EE /* OrdersView.swift in Sources */,

demo/Components/KillCountDown.swift

@@ -0,0 +1,38 @@
+//
+//  KillCountDown.swift
+//  demo
+//
+//  Created by Jason on 2024/1/24.
+//
+
+import SwiftUI
+
+struct KillCountDown: View {
+    var body: some View {
+        HStack(spacing: 6) {
+            number(num: 23)
+            spector
+            number(num: 19)
+            spector
+            number(num: 9)
+        }
+    }
+
+    func number(num: Int) -> some View {
+        var s = String(num)
+        if num < 10 {
+            s = "0".appending(s)
+        }
+        return Text(s)
+            .padding(4)
+            .foregroundColor(Color.red)
+            .background(Color.white)
+            .font(.system(size: 14))
+            .cornerRadius(4)
+    }
+
+    var spector: some View {
+        Text(":")
+            .foregroundColor(Color.white)
+    }
+}

demo/Components/UserAccountCard.swift

@@ -0,0 +1,25 @@
+//
+//  UserAccountCard.swift
+//  demo
+//
+//  Created by Jason on 2024/1/24.
+//
+
+import SwiftUI
+
+struct UserAccountCard: View {
+    var model: UserAccountCardModel
+    var body: some View {
+        VStack {
+            HStack {
+                Image(systemName: model.icon)
+                Text(model.title)
+            }
+            Text(model.info)
+                .font(.caption)
+        }
+        .padding(12)
+        .background(Color.white)
+        .cornerRadius(8)
+    }
+}

demo/Models/UserAccountCardModel.swift

@@ -0,0 +1,15 @@
+//
+//  UserAccountCardModel.swift
+//  demo
+//
+//  Created by Jason on 2024/1/24.
+//
+
+import Foundation
+
+struct UserAccountCardModel: Identifiable {
+    var id = UUID()
+    var title: String
+    var icon: String
+    var info: String
+}

demo/Views/Home/HomeView.swift

@@ -13,10 +13,10 @@ struct HomeView: View {
     var body: some View {
         ScrollView {
             VStack(spacing: 12) {
-                Search
+//                Search
 //                Banner
 //                Navigation
-//                TodayKill
+                TodayKill
 //                Living
 //                Bestselling
 //                PartyReading
@@ -174,46 +174,68 @@ struct HomeView: View {
 
     var TodayKill: some View {
         VStack(alignment: .leading) {
-            HStack {
+            VStack(alignment: .leading) {
-                Text("今日秒杀")
+                HStack {
-                Text("00:00:00")
+                    Text("今日秒杀")
-            }
-            HStack {
-                Image("Images/LaunchScreen")
-                    .resizable(resizingMode: /*@START_MENU_TOKEN@*/ .stretch/*@END_MENU_TOKEN@*/)
-                    .aspectRatio(contentMode: .fit)
-                    .frame(maxWidth: 120)
-                VStack {
-                    Text("石床垫：阿特伍德黑暗就故事（有的人说啥就是啥呢有的人说啥就是啥呢有的人说啥就是啥呢）")
-                        .multilineTextAlignment(/*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/)
-                        .lineLimit(/*@START_MENU_TOKEN@*/2/*@END_MENU_TOKEN@*/)
                         .foregroundColor(Color.white)
-                    Text("￥19.99")
+                    KillCountDown()
-                        .foregroundColor(Color.red)
-                        .padding(12)
-                        .cornerRadius(12)
-                        .background(Color.white)
-                    HStack {
-                        Text("抢购")
-                        Image(systemName: "chevron.forward")
-                    }
-                    .foregroundColor(Color.white)
                 }
-            }
+                .padding(8)
-            HStack {
+                .background(LinearGradient(colors: [Color.yellow.opacity(0.3), Color.white.opacity(0.3)], startPoint: .leading, endPoint: .bottom))
-                ForEach(0 ..< 5) { _ in
+                HStack(spacing: 12) {
+                    Image("Images/LaunchScreen")
+                        .resizable(resizingMode: /*@START_MENU_TOKEN@*/ .stretch/*@END_MENU_TOKEN@*/)
+                        .frame(maxWidth: 120, maxHeight: 150)
+                        .overlay(alignment: .bottom) {
+                            Text("剩余100")
+                                .font(.system(size: 14))
+                                .foregroundColor(Color.white)
+                                .frame(maxWidth: .infinity)
+                                .padding(.vertical, 4)
+                                .background(Color.red.opacity(0.5))
+                        }
+                        .cornerRadius(8)
                     VStack {
-                        Image("Images/LaunchScreen")
+                        Text("石床垫：阿特伍德黑暗就故事（有的人说啥就是啥呢有的人说啥就是啥呢有的人说啥就是啥呢）")
-                            .resizable(resizingMode: /*@START_MENU_TOKEN@*/ .stretch/*@END_MENU_TOKEN@*/)
+                            .font(.title2)
-                            .aspectRatio(contentMode: .fit)
+                            .multilineTextAlignment(/*@START_MENU_TOKEN@*/ .leading/*@END_MENU_TOKEN@*/)
-                            .frame(maxWidth: 120)
+                            .lineLimit(/*@START_MENU_TOKEN@*/2/*@END_MENU_TOKEN@*/)
-                        Text("是石床垫：阿特伍德黑暗就故事")
+                            .foregroundColor(Color.white)
-                            .lineLimit(1)
                         Text("￥19.99")
                             .foregroundColor(Color.red)
+                            .padding(12)
+                            .cornerRadius(12)
+                            .background(Color.white)
+                        HStack {
+                            Text("抢购")
+                            Image(systemName: "chevron.forward")
+                        }
+                        .foregroundColor(Color.white)
+                    }
+                    .frame(height: 150)
+                }
+            }
+            .padding(12)
+            VStack {
+                ScrollView(.horizontal) {
+                    HStack {
+                        ForEach(0 ..< 8) { _ in
+                            VStack {
+                                Image("Images/LaunchScreen")
+                                    .antialiased(true)
+                                    .resizable(resizingMode: .stretch)
+                                    .frame(maxWidth: 100, maxHeight: 130)
+                                Text("是石床垫：阿特伍德黑暗就故事")
+                                    .font(.system(size: 14))
+                                    .lineLimit(1)
+                                CamelPrice(amount: 19.99, size: 12)
+                            }
+                            .padding(4)
+                            .frame(maxWidth: 110)
+                            .background(Color.white)
+                            .cornerRadius(4)
+                        }
                     }
-                    .frame(maxWidth: 110)
-                    .background(Color.white)
                 }
             }
             .padding(12)

demo/Views/User/UserView.swift

@@ -8,6 +8,8 @@
 import SwiftUI
 
 struct UserView: View {
+    @State private var showDetail = false
+
     var body: some View {
         ScrollView {
             Header
@@ -21,9 +23,8 @@ struct UserView: View {
                 tj
             }
             .padding(16)
-            .background(LinearGradient(colors: [Color.orange, Color.gray], startPoint: .top, endPoint: UnitPoint(x: 0, y: 0.5)))
+            .background(Color.gray.opacity(0.2))
             .cornerRadius(12)
-            .offset(y: -76)
         }
     }
 
@@ -51,11 +52,17 @@ struct UserView: View {
             Image(systemName: "gearshape")
                 .foregroundColor(Color.gray)
         }
-        .padding(.horizontal, 16)
+        .padding(.horizontal, 24)
     }
 
     var ToVip: some View {
         HStack(spacing: /*@START_MENU_TOKEN@*/nil/*@END_MENU_TOKEN@*/, content: {
+            Text("VIP de yixie 简介部分")
+            Button(action: {
+                self.showDetail.toggle()
+            }, label: {
+                Text("详情")
+            })
             Spacer()
             Button("立即开通") {}
                 .foregroundColor(Color.red)
@@ -68,6 +75,8 @@ struct UserView: View {
         .padding(16)
         .padding(.bottom, 64)
         .frame(maxWidth: .infinity)
+        .frame(height: showDetail ? 100 : 200)
+        .animation(.default, value: showDetail)
         .background(
             Image("Images/banner3").resizable(resizingMode: .tile)
 //                .overlay(
@@ -82,17 +91,7 @@ struct UserView: View {
         ScrollView(.horizontal) {
             HStack(spacing: 16) {
                 ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in
-                    VStack {
+                    UserAccountCard(model: UserAccountCardModel(title: "我的积分", icon: "star", info: "共30001分"))
-                        HStack {
-                            Image(systemName: "star")
-                            Text("我的积分")
-                        }
-                        Text("共8888分")
-                            .font(.caption)
-                    }
-                    .padding(12)
-                    .background(Color.white)
-                    .cornerRadius(8)
                 }
             }
         }