294 lines
9.9 KiB
Swift
294 lines
9.9 KiB
Swift
//
|
||
// 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()
|
||
// }
|