adam/thaw
1
0
Fork 0
mirror of https://github.com/adoyle0/thaw.git synced 2025-01-22 22:09:22 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(demo): Home

Browse source
This commit is contained in:
luoxiao 2024-08-26 16:17:38 +08:00
parent 7893d35239
commit e153ef722b
1 changed files with 14 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
demo/src/pages/home.rs
View file

@ -2,6 +2,7 @@ use crate::components::SiteHeader;
use leptos::prelude::*; use leptos::prelude::*;
use leptos_router::hooks::{use_navigate, use_query_map}; use leptos_router::hooks::{use_navigate, use_query_map};
use thaw::*; use thaw::*;
use leptos_meta::Style;
#[component] #[component]
pub fn Home() -> impl IntoView { pub fn Home() -> impl IntoView {
@ -13,14 +14,24 @@ pub fn Home() -> impl IntoView {
navigate(&path, Default::default()); navigate(&path, Default::default());
} }
view! { view! {
<Style>
" .main { width: 1100px; margin: calc(50vh - 200px) auto 0; display: flex; }
.main > div { width: 50%; }
@media screen and (max-width: 1100px) {
.main { width: 100%; margin: calc(50vh - 280px) 0 0; flex-direction: column-reverse; }
.main > div { width: auto; text-align: center; }
.main > div > .thaw-space { justify-content: center; }
}
"
</Style>
<Layout position=LayoutPosition::Absolute> <Layout position=LayoutPosition::Absolute>
<SiteHeader/> <SiteHeader/>
<Layout <Layout
position=LayoutPosition::Absolute position=LayoutPosition::Absolute
attr:style="top: 64px" attr:style="top: 64px"
> >
<div style="width: 1100px; margin: calc(50vh - 200px) auto 0; display: flex"> <div class="main">
<div style="width: 50%"> <div>
<h2 style="line-height: 64px; font-size: 56px; margin: 0 0 18px">"Thaw UI"</h2> <h2 style="line-height: 64px; font-size: 56px; margin: 0 0 18px">"Thaw UI"</h2>
<p style="line-height: 36px; font-size: 24px">"An easy to use leptos component library"</p> <p style="line-height: 36px; font-size: 24px">"An easy to use leptos component library"</p>
<Space> <Space>
@ -43,7 +54,7 @@ pub fn Home() -> impl IntoView {
</Button> </Button>
</Space> </Space>
</div> </div>
<div style="width: 50%; text-align: center"> <div style="text-align: center">
<img src="/logo.svg" style="width: 200px"/> <img src="/logo.svg" style="width: 200px"/>
</div> </div>
</div> </div>