feat: layout CheckoutPage

This commit is contained in:
Tan Le
2021-09-23 11:42:08 +07:00
parent ee3a331696
commit d5c0aba8a2
8 changed files with 54 additions and 12 deletions

View File

@@ -1,6 +1,5 @@
import { Layout } from 'src/components/common';
import { LayoutCheckout } from 'src/components/common';
import { CheckoutPage } from 'src/components/modules/checkout';
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
export default function Checkout() {
return (
@@ -10,4 +9,4 @@ export default function Checkout() {
)
}
Checkout.Layout = Layout
Checkout.Layout = LayoutCheckout

View File

@@ -0,0 +1,17 @@
@import "../../../styles/utilities";
.layoutCheckout {
display: flex;
flex-direction: column;
min-height: 100vh;
> main {
flex: 1;
position: relative;
}
.footer {
@apply spacing-horizontal;
padding-top: 3rem;
padding-left: 3.2rem;
padding-bottom: 3rem;
background-color: var(--gray);
}
}

View File

@@ -0,0 +1,20 @@
import s from './LayoutCheckout.module.scss'
interface Props {
children?: any,
}
const LayoutCheckout = ({ children }: Props) => {
return (
<div className={s.layoutCheckout}>
<main>{children}</main>
<footer className={s.footer}>
<div>
© 2021 Online Grocery
</div>
</footer>
</div>
)
}
export default LayoutCheckout

View File

@@ -47,3 +47,4 @@ export { default as StaticImage} from './StaticImage/StaticImage'
export { default as EmptyCommon} from './EmptyCommon/EmptyCommon'
export { default as CustomShapeSvg} from './CustomShapeSvg/CustomShapeSvg'
export { default as RecommendedRecipes} from './RecommendedRecipes/RecommendedRecipes'
export { default as LayoutCheckout} from './LayoutCheckout/LayoutCheckout'

View File

@@ -3,7 +3,7 @@
min-width: 100%;
@screen lg {
max-width: 56.3rem;
@apply flex justify-between flex-col border-l-2 border-solid border-line;
@apply flex justify-between flex-col;
}
.title {
display: none;

View File

@@ -1,11 +1,13 @@
.warpper{
@apply w-full;
padding: 3.2rem;
@screen lg {
padding-right: 8.8rem;
}
.title{
margin-bottom: 3.2rem;
@apply flex justify-between items-center;
.viewCart{
margin-right: 5.6rem;
@apply text-primary font-bold;
display: block;
cursor: pointer;

View File

@@ -2,7 +2,10 @@
.warpper{
@apply u-form;
@screen md {
padding: 0 5.6rem;
padding-left: 5.6rem;
.button {
min-width: 22rem;
}
}
.bottom{
margin-top: 2.4rem;

View File

@@ -1,7 +1,7 @@
@import "../../../../styles/utilities";
.warrper{
@apply flex;
.right{
@apply flex w-full h-full absolute;
.right {
display: none;
@screen lg {
display: block;
@@ -11,10 +11,10 @@
min-width: 56.3rem;
}
}
.left{
@apply w-full;
.left {
@apply w-full border-r-2 border-solid border-line;
}
.mobile{
.mobile {
@apply hidden;
&.isShow{
@apply block;
@@ -22,7 +22,7 @@
@apply hidden;
}
}
.modal{
.modal {
background: rgba(0, 0, 0, 0.5);
position: fixed;
left: 0;