327 lines
12 KiB
Swift
327 lines
12 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(.vertical, showsIndicators: false) {
|
||
VStack(spacing: 12) {
|
||
Search
|
||
Banner
|
||
Navigation
|
||
TodayKill
|
||
Living
|
||
Bestselling
|
||
PartyReading
|
||
NewBooks
|
||
Categories
|
||
}
|
||
}
|
||
.frame(maxWidth: .infinity)
|
||
.padding(.horizontal, 12)
|
||
}
|
||
|
||
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(
|
||
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(
|
||
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()
|
||
}
|