// // 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(.vertical, showsIndicators: false) { VStack(spacing: 12) { Search Banner Navigation TodayKill Living Bestselling PartyReading NewBooks Categories } } .frame(maxWidth: .infinity) .padding(.horizontal, 12) .background(Color.gray.opacity(0.2)) } 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) .font(.system(size: 16)) Spacer() } .frame(maxWidth: /*@START_MENU_TOKEN@*/ .infinity/*@END_MENU_TOKEN@*/) .padding(12) .background(Color.white) .cornerRadius(32) Image(systemName: "bell") .resizable() .frame(width: 24, height: 24) .overlay(alignment: .topTrailing) { Circle() .fill(Color.red.opacity(0.8)) .frame(width: 20, height: 20) .overlay { Text("20") .foregroundColor(Color.white) .font(.system(size: 12)) } .offset(x: 8, y: -10) } Spacer() } } let columns = [GridItem(.flexible()), GridItem(.flexible())] var Categories: some View { VStack { ScrollView(.horizontal, showsIndicators: false) { HStack { Text("推荐") Text("竞品书单") Text("少儿") Text("武侠") Text("文创") Text("历史") Text("专辑") Text("世纪难题") Text("个性推荐") } } LazyVGrid(columns: columns, alignment: .center) { ForEach(0 ..< 20, id: \.self) { _ in GoodsCard(title: "首页进入的商品标题,如果长了,会不会自动隐藏的问题,这里需要测试") } } } } var Banner: some View { TabView { ForEach(1 ..< 4) { index in GeometryReader { proxy in let minX = proxy.frame(in: .global).minX Image("Images/banner" + String(index)) .resizable() .aspectRatio(contentMode: .fill) .cornerRadius(12) .rotation3DEffect( .degrees(minX / -10), axis: (x: 0.0, y: 1, z: 0.0) ) } } } .tabViewStyle(.page(indexDisplayMode: .always)) .frame(height: 220) .cornerRadius(12) } 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) { VStack(alignment: .leading) { HStack { Text("今日秒杀") .foregroundColor(Color.white) .font(.system(size: 16)) KillCountDown() } .padding(8) .background(LinearGradient(colors: [Color.yellow.opacity(0.3), Color.white.opacity(0.3)], startPoint: .leading, endPoint: .bottom)) 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 { Text("石床垫:阿特伍德黑暗就故事(有的人说啥就是啥呢有的人说啥就是啥呢有的人说啥就是啥呢)") .font(.system(size: 20)) .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("抢购") .font(.system(size: 14)) 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) } } } } .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("图书") .font(.system(size: 14)) } } } } } #Preview { HomeView() }