// // HomeView.swift // demo // // Created by Jason on 2024/1/23. // import SwiftUI struct HomeView: View { @State private var selectedTab = 0 var body: some View { ScrollView { VStack(spacing: 12) { // Search // Banner // Navigation // TodayKill // Living // Bestselling PartyReading // NewBooks // Categories } } .frame(maxWidth: .infinity) .padding(.horizontal, 12) .background(Color.gray.opacity(0.2)) } let columns = [GridItem(.flexible()), GridItem(.flexible())] var Categories: some View { VStack { ScrollView(.horizontal) { HStack { Text("推荐") Text("竞品书单") Text("少儿") Text("武侠") Text("文创") Text("历史") Text("专辑") Text("世纪难题") Text("个性推荐") } } LazyVGrid(columns: columns, alignment: .center) { ForEach(0 ..< 20, id: \.self) { _ in GoodsCard() } } } } var NewBooks: some View { VStack(alignment: .leading) { HStack { Text("新书上架") Spacer() Image(systemName: "chevron.forward") } HStack(alignment: .top) { ForEach(0 ..< 4) { _ in VStack { Image("Images/LaunchScreen") .resizable() .frame(maxHeight: 120) .cornerRadius(4) Text("唐伯虎的故事,成就的是谁") .lineLimit(1) } .frame(maxWidth: 100) } } } .padding(12) .background(Color.white) .cornerRadius(12) } var PartyReading: some View { VStack(alignment: .leading) { HStack { Text("党政读物预订专区") .font(.title3) .foregroundColor(Color.white) Spacer() ShowMore(title: "全部") } Text("阅读这10本书,让你深度学习党政相关知识,思想提升") .foregroundColor(Color.red) Text("治国必先治党,治党才能国强,进入新时代,以习近平通知为核心的党中央以前所未有的勇气和定理推进全面从严治党,") .font(.caption) .foregroundColor(Color.gray) .lineLimit(2) ScrollView(.horizontal) { HStack(alignment: .top) { ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in VStack { Image("Images/LaunchScreen") .resizable() .frame(maxWidth: 120, maxHeight: 150) .cornerRadius(4) Text("唐伯虎的故事,成就的是谁") .lineLimit(1) } .frame(maxWidth: 100) } } } } .padding(12) .background(LinearGradient(colors: [Color.red, Color.white], startPoint: UnitPoint.top, endPoint: UnitPoint.bottom)) .cornerRadius(12) } var Bestselling: some View { VStack(alignment: .leading) { HStack { Text("畅销图书") Spacer() Text("全部") Image(systemName: "chevron.forward") } ScrollView(.horizontal) { HStack(alignment: .top) { ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in VStack { Image("Images/LaunchScreen") .resizable() .frame(maxWidth: 120, maxHeight: 150) .cornerRadius(4) Text("唐伯虎的故事,成就的是谁") .lineLimit(1) HStack { Image(systemName: "eye") Text("299万") } } .frame(maxWidth: 100) } } } } .padding(12) .background(Color.white) .cornerRadius(12) } var Living: some View { HStack { ForEach(0 ..< 3) { _ in VStack { HStack { Text("正在直播") Image(systemName: "livephoto") } Image("Images/LaunchScreen") .resizable(resizingMode: /*@START_MENU_TOKEN@*/ .stretch/*@END_MENU_TOKEN@*/) .aspectRatio(contentMode: .fit) .frame(maxWidth: 120) .cornerRadius(12) } .background(Color.pink.opacity(0.5)) .cornerRadius(12) } } } var TodayKill: some View { VStack(alignment: .leading) { HStack { Text("今日秒杀") Text("00:00:00") } 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") .foregroundColor(Color.red) .padding(12) .cornerRadius(12) .background(Color.white) HStack { Text("抢购") Image(systemName: "chevron.forward") } .foregroundColor(Color.white) } } HStack { ForEach(0 ..< 5) { _ in VStack { Image("Images/LaunchScreen") .resizable(resizingMode: /*@START_MENU_TOKEN@*/ .stretch/*@END_MENU_TOKEN@*/) .aspectRatio(contentMode: .fit) .frame(maxWidth: 120) Text("是石床垫:阿特伍德黑暗就故事") .lineLimit(1) Text("¥19.99") .foregroundColor(Color.red) } .frame(maxWidth: 110) .background(Color.white) } } .padding(12) .background(Color.white.opacity(0.3)) } .frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/) .background(Color.pink) .cornerRadius(12) } var Navigation: some View { HStack(spacing: 32) { ForEach(/*@START_MENU_TOKEN@*/0 ..< 5/*@END_MENU_TOKEN@*/) { _ in VStack { Image("Images/logo") .resizable(resizingMode: /*@START_MENU_TOKEN@*/ .stretch/*@END_MENU_TOKEN@*/) .aspectRatio(contentMode: .fit) .background(Color.white) .cornerRadius(64) Text("图书") } } } } var Banner: some View { HStack { Image("Images/banner1") .resizable(resizingMode: .stretch) .aspectRatio(contentMode: .fit) Image("Images/banner2") .resizable(resizingMode: .stretch) .aspectRatio(contentMode: .fit) Image("Images/banner3") .resizable(resizingMode: .stretch) .aspectRatio(contentMode: .fit) } .frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/) } var Search: some View { HStack(alignment: .center, spacing: 16) { HStack { Image(systemName: "magnifyingglass") .resizable() .frame(width: 18, height: 18) .foregroundColor(Color.gray) Text("搜索书籍") .foregroundColor(Color.gray) Spacer() } .frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/) .padding(12) .background(Color.white) .cornerRadius(32) ZStack { Image(systemName: "bell").resizable().frame(width: 24, height: 24) Text("9") .font(.system(size: 12)) .padding(4) .frame(minWidth: 24) .background(Color.red) .foregroundColor(Color.white) .cornerRadius(99) .offset(x: 10, y: -10) } .padding(.trailing, 12) } } } // // #Preview { // HomeView() // }