myorders퍼블 처리건.
This commit is contained in:
junghoon86.park
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
@@ -1,26 +1,36 @@
|
||||
import React, { useCallback, useState } from "react";
|
||||
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import classNames from "classnames";
|
||||
|
||||
import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator";
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import noOrderImg from "../../../../../assets/images/img-my-info-billing@3x.png";
|
||||
import TBody from "../../../../components/TBody/TBody";
|
||||
import TButton, { SIZES } from "../../../../components/TButton/TButton";
|
||||
import TButtonTab, {
|
||||
LIST_TYPE,
|
||||
} from "../../../../components/TButtonTab/TButtonTab";
|
||||
import TDropDown from "../../../../components/TDropDown/TDropDown";
|
||||
import THeader from "../../../../components/THeader/THeader";
|
||||
import TPopUp from "../../../../components/TPopUp/TPopUp";
|
||||
import { $L } from "../../../../utils/helperMethods";
|
||||
import css from "./MyOrders.module.less";
|
||||
import CancelOrderList from "./OrderList/CancelOrderList";
|
||||
import OrderList from "./OrderList/OrderList";
|
||||
|
||||
const TabContainer = SpotlightContainerDecorator(
|
||||
{ enterTo: "last-focused" },
|
||||
"div"
|
||||
);
|
||||
|
||||
export default function MyOrders({ title, cbScrollTo }) {
|
||||
const [selectedTab, setSelectedTab] = useState(0);
|
||||
|
||||
const [dropDownTab, setDropDownTab] = useState(0);
|
||||
const [filterMethods, setFilterMethods] = useState(["3Month", "6Month"]);
|
||||
const [filterMethods, setFilterMethods] = useState([
|
||||
"Last 3Month",
|
||||
"Last 6Month",
|
||||
]);
|
||||
const tabList = [$L("ORDERS"), $L("CANCELLED ORDERS")];
|
||||
|
||||
const handleItemClick = useCallback(
|
||||
@@ -30,6 +40,23 @@ export default function MyOrders({ title, cbScrollTo }) {
|
||||
},
|
||||
[selectedTab]
|
||||
);
|
||||
const [popOpen, setPopOpen] = useState(false);
|
||||
const [orderPopOpen, setOrderPopOpen] = useState(false);
|
||||
const [orderTrackOpen, setOrderTrackOpen] = useState(false);
|
||||
const [orderCancelOpen, setOrderCancelOpen] = useState(false);
|
||||
const onClose = useCallback(() => {
|
||||
setPopOpen(true);
|
||||
}, []);
|
||||
const onOrderPopClose = useCallback(() => {
|
||||
setOrderPopOpen(true);
|
||||
}, []);
|
||||
const onOrderTrackClose = useCallback(() => {
|
||||
setOrderTrackOpen(true);
|
||||
}, []);
|
||||
const onOrderCancelClose = useCallback(() => {
|
||||
setOrderCancelOpen(true);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<THeader title={title} />
|
||||
@@ -51,19 +78,281 @@ export default function MyOrders({ title, cbScrollTo }) {
|
||||
{filterMethods}
|
||||
</TDropDown>
|
||||
</TabContainer>
|
||||
<div className={css.orderlist}>
|
||||
<div className={css.orderNmInfo}>
|
||||
<p className={css.orderTitle}>
|
||||
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
|
||||
</p>
|
||||
<TButton size="small" className={css.orderCancelBtn}>
|
||||
{$L("Cancel order")}
|
||||
</TButton>
|
||||
|
||||
{/* <div className={css.noOrderList}>
|
||||
<div className={css.noOrderBox}>
|
||||
<img src={noOrderImg} />
|
||||
<span className={css.noOrderTitle}>
|
||||
THERE IS NO ORDER HISTORY
|
||||
</span>
|
||||
<br />
|
||||
<span className={css.noOrderSub}>
|
||||
Use search above to find past orders.
|
||||
</span>
|
||||
</div>
|
||||
<div className={css.orderInfo}></div>
|
||||
</div> */}
|
||||
|
||||
<div className={css.orderlist}>
|
||||
{selectedTab === 0 && <OrderList />}
|
||||
{selectedTab === 1 && <CancelOrderList />}
|
||||
</div>
|
||||
</div>
|
||||
</TBody>
|
||||
<TPopUp
|
||||
kind="optionPopup"
|
||||
open={popOpen}
|
||||
//options 옵션 넣어줘야함.
|
||||
onClose={onClose}
|
||||
hasText
|
||||
hasButton
|
||||
button1Text={$L("Cancel")}
|
||||
title={$L("SELECT CANCELLATION REASON")}
|
||||
/>
|
||||
{/* mypage order detail */}
|
||||
<TPopUp
|
||||
kind="scrollPopup"
|
||||
open={orderPopOpen}
|
||||
onClose={onOrderPopClose}
|
||||
hasText
|
||||
hasButton
|
||||
button1Text={$L("Cancel")}
|
||||
title={$L("ORDER DETAILS")}
|
||||
>
|
||||
<div className={css.scrollBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<div className={css.leftBox}>Preparing for shipment</div>
|
||||
<div className={css.rightBox}>
|
||||
Arriving January 10~ January 15
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.textList}>
|
||||
<div className={css.productLogo}></div>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
abHWIXLEveryday Essentials Crossbody with 2 Straps abc
|
||||
</div>
|
||||
</li>
|
||||
<li className={css.hideInfo}>
|
||||
<h5>SHIPPING ADDRESS</h5>
|
||||
<ul className={css.shippingInfo}>
|
||||
<li>Hong Gil dong</li>
|
||||
<li>8 Bennetts Mills RD</li>
|
||||
<li>At Speedway</li>
|
||||
<li>Jackson, NJ 08527-4510</li>
|
||||
<li>United States</li>
|
||||
<li>Phone number : 0821099461234</li>
|
||||
<li>Email : honggildong00@gmail.com</li>
|
||||
</ul>
|
||||
<h5>BILLING ADDRESS</h5>
|
||||
<ul className={css.shippingInfo}>
|
||||
<li>Hong Gil dong</li>
|
||||
<li>8 Bennetts Mills RD</li>
|
||||
<li>At Speedway</li>
|
||||
<li>Jackson, NJ 08527-4510</li>
|
||||
<li>United States</li>
|
||||
<li>Phone number : 0821099461234</li>
|
||||
<li>Email : honggildong00@gmail.com</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.textList}>ORDER SUMMARY</div>
|
||||
</li>
|
||||
<li className={css.hideInfo}>
|
||||
<ul className={css.orderInfo}>
|
||||
<li>
|
||||
<span className={css.title}>Items</span>
|
||||
<span className={css.info}>$ 40.20</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Quantity</span>
|
||||
<span className={css.info}>2</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Items Total</span>
|
||||
<span className={css.info}>$ 80.40</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Option</span>
|
||||
<span className={css.info}>$ 12.40</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Shipping & handling</span>
|
||||
<span className={css.info}>$ 10.50</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Total before tax</span>
|
||||
<span className={css.info}>$ 103.20</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>
|
||||
Estimated tax to be collected
|
||||
</span>
|
||||
<span className={css.info}>$ 10.30</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Your Coupon Savings</span>
|
||||
<span className={css.info}>-$ 20</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className={css.blackLi}>
|
||||
<div className={css.totalList}>ITEM ORDER TOTAL</div>
|
||||
<div className={css.totalAccountList}>$ 93.60</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</TPopUp>
|
||||
{/* 08_02_3_my orders_track package */}
|
||||
<TPopUp
|
||||
kind="scrollPopup"
|
||||
open={orderTrackOpen}
|
||||
onClose={onOrderTrackClose}
|
||||
hasText
|
||||
hasButton
|
||||
button1Text={$L("Cancel")}
|
||||
title={$L("TRACK PACKAGE")}
|
||||
>
|
||||
<div className={css.scrollBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<div className={css.textList}>Ordered on January 5, 2023</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.textList}>Order 111-1721950-401433</div>
|
||||
</li>
|
||||
<li className={css.hideInfo}>
|
||||
<ul className={css.deliveryInfo}>
|
||||
<li>
|
||||
{/* <span className={css.notYet} /> 회색
|
||||
<span className={css.delivering} /> 쩜쩜 찍힌거 */}
|
||||
<span className={css.complete} />
|
||||
<div className={css.orderDate}>
|
||||
<h6>ORDERED</h6>
|
||||
<span>January 5, 2023</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className={classNames(css.imgLiner, css.active)} />
|
||||
<li>
|
||||
{/* <span className={css.notYet} /> */}
|
||||
<span className={css.delivering} />
|
||||
{/* <span className={css.complete} /> */}
|
||||
<div className={css.shipperDate}>
|
||||
<h6>Shipped</h6>
|
||||
<span>January 6, 2023</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className={classNames(css.imgLiner, css.active)} />
|
||||
<li>
|
||||
{/* <span className={css.notYet} /> */}
|
||||
<span className={css.delivering} />
|
||||
{/* <span className={css.complete} /> */}
|
||||
<div className={css.deliveryDate}>
|
||||
<h6>Out for delivery</h6>
|
||||
<span>January 6, 2023</span>
|
||||
</div>
|
||||
</li>
|
||||
<li className={css.imgLiner} />
|
||||
<li>
|
||||
<span className={css.notYet} />
|
||||
{/* <span className={css.delivering} /> */}
|
||||
{/* <span className={css.complete} /> */}
|
||||
<div className={css.arrivingDate}>
|
||||
<h6>Arriving</h6>
|
||||
<span></span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.textList}>SHIPMENT DETAILS</div>
|
||||
</li>
|
||||
<li className={css.hideInfo}>
|
||||
<h5>January 6, 2023</h5>
|
||||
<ul className={css.shipmentDetail}>
|
||||
<li>9:49 AM</li>
|
||||
<li>Out for delivery San Leandro, US</li>
|
||||
</ul>
|
||||
<h5>January 5, 2023</h5>
|
||||
<ul className={css.shipmentDetail}>
|
||||
<li>8:38 PM</li>
|
||||
<li>Shipped San Leandro, US</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</TPopUp>
|
||||
{/* 08_02_6_my orders_cancellation details */}
|
||||
<TPopUp
|
||||
kind="scrollPopup"
|
||||
open={orderCancelOpen}
|
||||
onClose={onOrderCancelClose}
|
||||
hasText
|
||||
hasButton
|
||||
button1Text={$L("Cancel")}
|
||||
title={$L("CANCELLATION DETAILS")}
|
||||
>
|
||||
<div className={css.scrollBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<div className={css.leftBox}>CANCELLED DATE</div>
|
||||
<div className={css.rightBox}>January 5, 2023</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.textList}>
|
||||
<div className={css.productLogo}></div>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
abHWIXLEveryday Essentials Crossbody with 2 Straps abc
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.textList}>ORDER SUMMARY</div>
|
||||
</li>
|
||||
<li className={css.hideInfo}>
|
||||
<ul className={css.orderInfo}>
|
||||
<li>
|
||||
<span className={css.title}>Items</span>
|
||||
<span className={css.info}>$ 40.20</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Quantity</span>
|
||||
<span className={css.info}>2</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Items Total</span>
|
||||
<span className={css.info}>$ 80.40</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Option</span>
|
||||
<span className={css.info}>$ 12.40</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Shipping & handling</span>
|
||||
<span className={css.info}>$ 10.50</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Total before tax</span>
|
||||
<span className={css.info}>$ 103.20</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>
|
||||
Estimated tax to be collected
|
||||
</span>
|
||||
<span className={css.info}>$ 10.30</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className={css.title}>Your Coupon Savings</span>
|
||||
<span className={css.info}>-$ 20</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className={css.blackLi}>
|
||||
<div className={css.totalList}>ITEM ORDER TOTAL</div>
|
||||
<div className={css.totalAccountList}>$ 93.60</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</TPopUp>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,6 +6,11 @@
|
||||
padding: 60px 60px 0;
|
||||
.tabContainer {
|
||||
.ordersTab {
|
||||
width: 100%;
|
||||
> div {
|
||||
width: 360px;
|
||||
height: 66px;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
position: absolute;
|
||||
@@ -13,42 +18,237 @@
|
||||
top: 60px;
|
||||
}
|
||||
}
|
||||
.noOrderList {
|
||||
margin-top: 180px;
|
||||
.noOrderBox {
|
||||
width: 540px;
|
||||
height: 252px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
> img {
|
||||
width: 100%;
|
||||
}
|
||||
.noOrderTitle {
|
||||
font-size: 36px;
|
||||
color: #a3a3a3;
|
||||
font-weight: bold;
|
||||
}
|
||||
.noOrderSub {
|
||||
font-size: 24px;
|
||||
color: #b5b5b5;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderlist {
|
||||
margin-top: 40px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #dadada;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollBox {
|
||||
margin: 30px 60px;
|
||||
width: 780px;
|
||||
height: 460px;
|
||||
overflow: hidden auto;
|
||||
|
||||
> ul {
|
||||
border: 1px solid #dadada;
|
||||
> li {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.orderNmInfo {
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #dadada;
|
||||
background: #fff;
|
||||
padding: 0 30px;
|
||||
display: flex;
|
||||
background: #2c343f;
|
||||
line-height: 90px;
|
||||
padding: 0 60px;
|
||||
justify-content: space-between;
|
||||
.orderTitle {
|
||||
color: @COLOR_WHITE;
|
||||
font-size: 30px;
|
||||
&.hideInfo {
|
||||
padding: 30px;
|
||||
background: #f2f2f2;
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
> h5 {
|
||||
width: 100%;
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
font-family: @baseFont;
|
||||
.orderNm {
|
||||
font-size: 30px;
|
||||
color: @COLOR_WHITE;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.shippingInfo {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
height: 230px;
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> li {
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-family: @baseFont;
|
||||
color: #808080;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
.orderCancelBtn {
|
||||
background: #808080;
|
||||
.size(@w:224px,@h:60px);
|
||||
align-self: center;
|
||||
.deliveryInfo {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
height: auto;
|
||||
> li {
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: #808080;
|
||||
line-height: 1.33;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
&.imgLiner {
|
||||
height: 30px;
|
||||
width: calc(100% - 23px);
|
||||
margin-left: 23px;
|
||||
border-left: 3px solid #808080;
|
||||
&.active {
|
||||
border-left: 3px solid #ce1c5e;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
margin-left: 17px;
|
||||
width: calc(100% - 65px);
|
||||
flex: none;
|
||||
line-height: 1;
|
||||
> h6 {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
> span {
|
||||
font-size: 24px;
|
||||
color: #808080;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
> span {
|
||||
flex: none;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: inline-block;
|
||||
&.notYet {
|
||||
background: url("../../../../../assets/images/icons/ic-track-scheduled@3x.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
&.delivering {
|
||||
background: url("../../../../../assets/images/icons/ic-track-ongoing@3x.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
&.complete {
|
||||
background: url("../../../../../assets/images/icons/ic-track-completed@3x.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.shipmentDetail {
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
> li {
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: #808080;
|
||||
line-height: 1.33;
|
||||
}
|
||||
}
|
||||
.orderInfo {
|
||||
background: #f2f2f2;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
> li {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.title {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.info {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.leftBox {
|
||||
flex: none;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
line-height: 90px;
|
||||
}
|
||||
.rightBox {
|
||||
flex: none;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: #222;
|
||||
line-height: 90px;
|
||||
}
|
||||
.textList {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
width: 720px;
|
||||
margin: 24px 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
.elip(@clamp:1);
|
||||
.productLogo {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: #c70850;
|
||||
margin-right: 6px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
&.blackLi {
|
||||
background: #2c343f;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.totalList {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
.totalAccountList {
|
||||
font-size: 42px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
import React from "react";
|
||||
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import TButton from "../../../../../components/TButton/TButton";
|
||||
import { $L } from "../../../../../utils/helperMethods";
|
||||
import css from "./CancelOrderList.module.less";
|
||||
|
||||
const SpottableComponent = Spottable("div");
|
||||
export default function OrderList() {
|
||||
return (
|
||||
<div className={css.orderBorder}>
|
||||
<div className={css.orderNmInfo}>
|
||||
<p className={css.orderTitle}>
|
||||
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className={css.orderInfo}>
|
||||
<div className={css.infoBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.topBox}>
|
||||
<h4>payment method</h4>
|
||||
<span>Mastercard / ****-1199</span>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<h4>order date</h4>
|
||||
<span>January 5, 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.orderItemList}>
|
||||
<ul>
|
||||
{/* 여기부터 아이템 리스트들 */}
|
||||
<li>
|
||||
<div className={css.topBox}>
|
||||
<div className={css.leftSmallBox}>
|
||||
<span className={css.orderGreen}>Preparing for shipment</span>
|
||||
{/* 색상별 뿌려주는 틀림.
|
||||
<span className={css.orderBlue}>Shipping</span>
|
||||
<span className={css.orderRed}>Canceled</span>
|
||||
<span className={css.orderBlack}>Completed</span>
|
||||
*/}
|
||||
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
|
||||
</div>
|
||||
|
||||
<TButton size="small" className={css.orderDetailBtn}>
|
||||
{$L("view order details")}
|
||||
</TButton>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.productBox}>
|
||||
<div className={css.logo}>
|
||||
<span className={css.logoImg}></span>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
</div>
|
||||
<div className={css.orderPdInfo}>
|
||||
<div className={css.productImg}></div>
|
||||
<div className={css.pdInfo}>
|
||||
<ul>
|
||||
<li>ID: A565145</li>
|
||||
<li>Qty: 1</li>
|
||||
<li>Silver Metallic / XL</li>
|
||||
</ul>
|
||||
<div className={css.orderAcc}>
|
||||
$38.09
|
||||
<span>|</span>
|
||||
<span>OPTION: $5.50</span>
|
||||
<span>|</span>
|
||||
<span>S&H: $5.50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.topBox}>
|
||||
<div className={css.leftSmallBox}>
|
||||
<span className={css.orderGreen}>Preparing for shipment</span>
|
||||
{/* 색상별 뿌려주는 틀림.
|
||||
<span className={css.orderBlue}>Shipping</span>
|
||||
<span className={css.orderRed}>Canceled</span>
|
||||
<span className={css.orderBlack}>Completed</span>
|
||||
*/}
|
||||
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
|
||||
</div>
|
||||
|
||||
<TButton size="small" className={css.orderDetailBtn}>
|
||||
{$L("view order details")}
|
||||
</TButton>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.productBox}>
|
||||
<div className={css.logo}>
|
||||
<span className={css.logoImg}></span>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
</div>
|
||||
<div className={css.orderPdInfo}>
|
||||
<div className={css.productImg}></div>
|
||||
<div className={css.pdInfo}>
|
||||
<ul>
|
||||
<li>ID: A565145</li>
|
||||
<li>Qty: 1</li>
|
||||
<li>Silver Metallic / XL</li>
|
||||
</ul>
|
||||
<div className={css.orderAcc}>
|
||||
$38.09
|
||||
<span>|</span>
|
||||
<span>OPTION: $5.50</span>
|
||||
<span>|</span>
|
||||
<span>S&H: $5.50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
@import "../../../../../style/CommonStyle.module.less";
|
||||
@import "../../../../../style/utils.module.less";
|
||||
.orderBorder {
|
||||
background: #f8f8f8;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #dadada;
|
||||
margin-bottom: 30px;
|
||||
&:last-child {
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
.orderNmInfo {
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: #2c343f;
|
||||
line-height: 90px;
|
||||
padding: 0 60px;
|
||||
justify-content: space-between;
|
||||
.orderTitle {
|
||||
color: @COLOR_WHITE;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
font-family: @baseFont;
|
||||
.orderNm {
|
||||
font-size: 30px;
|
||||
color: @COLOR_WHITE;
|
||||
font-weight: normal;
|
||||
font-family: @baseFont;
|
||||
}
|
||||
}
|
||||
.orderCancelBtn {
|
||||
background: #808080;
|
||||
.size(@w:224px,@h:60px);
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
.orderInfo {
|
||||
background-color: #f8f8f8;
|
||||
.infoBox {
|
||||
background: #f2f2f2;
|
||||
width: 1680px;
|
||||
padding: 40px 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.leftBox {
|
||||
width: 1680px;
|
||||
|
||||
.topBox {
|
||||
> h4 {
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
color: #222;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> span {
|
||||
display: inline-block;
|
||||
margin: 6px 0 20px 0;
|
||||
font-size: 24px;
|
||||
color: #808080;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
border-bottom: 1px solid #dadada;
|
||||
}
|
||||
.underBox {
|
||||
> h4 {
|
||||
margin-top: 20px;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
color: #222;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> span {
|
||||
display: inline-block;
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 24px;
|
||||
color: #808080;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightBox {
|
||||
width: 1130px;
|
||||
height: 173px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 6px;
|
||||
> ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
> li {
|
||||
width: 188px;
|
||||
height: 173px;
|
||||
border-right: 1px solid #dadada;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
> div {
|
||||
border-bottom: 1px solid #dadada;
|
||||
text-align: center;
|
||||
line-height: 86px;
|
||||
&:first-child {
|
||||
width: 188px;
|
||||
height: 86px;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
&:last-child {
|
||||
width: 188px;
|
||||
height: 86px;
|
||||
border-bottom: none;
|
||||
font-size: 30px;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.totalAccount {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 18px 60px;
|
||||
background: #dadada;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.accTitle {
|
||||
text-transform: uppercase;
|
||||
line-height: 44px;
|
||||
color: #222;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.accountNum {
|
||||
color: #c70850;
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
.orderItemList {
|
||||
background: #f8f8f8;
|
||||
padding: 30px 60px;
|
||||
width: 100%;
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
width: 1560px;
|
||||
height: 423px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 40px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.topBox {
|
||||
padding: 20px 60px;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-bottom: 1px solid #dadada;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.leftSmallBox {
|
||||
color: #222;
|
||||
font-size: 24px;
|
||||
margin: 9px 0;
|
||||
.orderGreen {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(8, 199, 73, 0.3);
|
||||
border: 3px solid #08c749;
|
||||
border-radius: 6px;
|
||||
color: #08c749;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.orderBlue {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(8, 199, 199, 0.3);
|
||||
border: 3px solid #0877c7;
|
||||
border-radius: 6px;
|
||||
color: #0877c7;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.orderRed {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(199, 8, 80, 0.3);
|
||||
border: 3px solid #c70850;
|
||||
border-radius: 6px;
|
||||
color: #c70850;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.orderBlack {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(20, 20, 20, 0.3);
|
||||
border: 3px solid #141414;
|
||||
border-radius: 6px;
|
||||
color: #141414;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.orderDetailBtn {
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.underBox {
|
||||
flex: none;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 322px;
|
||||
.leftBox {
|
||||
width: 1059px;
|
||||
height: 322px;
|
||||
border-right: 1px solid #dadada;
|
||||
padding: 30px 60px;
|
||||
.productBox {
|
||||
.logo {
|
||||
display: flex;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
line-height: 42px;
|
||||
margin-bottom: 20px;
|
||||
.logoImg {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: #000;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
.orderPdInfo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.productImg {
|
||||
flex: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #dadada;
|
||||
}
|
||||
.pdInfo {
|
||||
margin-left: 20px;
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: #808080;
|
||||
margin-bottom: 6px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderAcc {
|
||||
margin-top: 54px;
|
||||
color: #c70850;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
> span {
|
||||
color: #808080;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin: 0 5.5px;
|
||||
line-height: 36px;
|
||||
&:first-child {
|
||||
margin: 0 5.5px 0 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightBox {
|
||||
width: 500px;
|
||||
height: 322px;
|
||||
padding: 0 60px;
|
||||
> ul {
|
||||
list-style: none;
|
||||
height: 100%;
|
||||
> li {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
.divBtn {
|
||||
width: 380px;
|
||||
height: 60px;
|
||||
border: 1px solid #dadada;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
line-height: 58px;
|
||||
font-size: 24px;
|
||||
color: #808080;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
background-image: linear-gradient(to top, #f5f5f5, #fff);
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
&:focus {
|
||||
&::after {
|
||||
.focused(@boxShadow: 0, @borderRadius: 6px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,399 @@
|
||||
import React from "react";
|
||||
|
||||
import Spottable from "@enact/spotlight/Spottable";
|
||||
|
||||
import TButton from "../../../../../components/TButton/TButton";
|
||||
import { $L } from "../../../../../utils/helperMethods";
|
||||
import css from "./OrderList.module.less";
|
||||
|
||||
const SpottableComponent = Spottable("div");
|
||||
export default function OrderList() {
|
||||
return (
|
||||
<>
|
||||
<div className={css.orderBorder}>
|
||||
<div className={css.orderNmInfo}>
|
||||
<p className={css.orderTitle}>
|
||||
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
|
||||
</p>
|
||||
<TButton size="small" className={css.orderCancelBtn}>
|
||||
{$L("Cancel order")}
|
||||
</TButton>
|
||||
</div>
|
||||
|
||||
<div className={css.orderInfo}>
|
||||
<div className={css.infoBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.topBox}>
|
||||
<h4>payment method</h4>
|
||||
<span>Mastercard / ****-1199</span>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<h4>order date</h4>
|
||||
<span>January 5, 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<div>item</div>
|
||||
<div>4</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>item total</div>
|
||||
<div>$90.40</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>option</div>
|
||||
<div>$4.40</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>s&h</div>
|
||||
<div>$11.00</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>tax</div>
|
||||
<div>$5.00</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>coupon</div>
|
||||
<div>-$10.00</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.totalAccount}>
|
||||
<div className={css.accTitle}>order total</div>
|
||||
<div className={css.accountNum}>$ 95.80</div>
|
||||
</div>
|
||||
<div className={css.orderItemList}>
|
||||
<ul>
|
||||
{/* 여기부터 아이템 리스트들 */}
|
||||
<li>
|
||||
<div className={css.topBox}>
|
||||
<div className={css.leftSmallBox}>
|
||||
<span className={css.orderGreen}>
|
||||
Preparing for shipment
|
||||
</span>
|
||||
{/* 색상별 뿌려주는 틀림.
|
||||
<span className={css.orderBlue}>Shipping</span>
|
||||
<span className={css.orderRed}>Canceled</span>
|
||||
<span className={css.orderBlack}>Completed</span>
|
||||
*/}
|
||||
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
|
||||
</div>
|
||||
|
||||
<TButton size="small" className={css.orderDetailBtn}>
|
||||
{$L("view order details")}
|
||||
</TButton>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.productBox}>
|
||||
<div className={css.logo}>
|
||||
<span className={css.logoImg}></span>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
</div>
|
||||
<div className={css.orderPdInfo}>
|
||||
<div className={css.productImg}></div>
|
||||
<div className={css.pdInfo}>
|
||||
<ul>
|
||||
<li>ID: A565145</li>
|
||||
<li>Qty: 1</li>
|
||||
<li>Silver Metallic / XL</li>
|
||||
</ul>
|
||||
<div className={css.orderAcc}>
|
||||
$38.09
|
||||
<span>|</span>
|
||||
<span>OPTION: $5.50</span>
|
||||
<span>|</span>
|
||||
<span>S&H: $5.50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.topBox}>
|
||||
<div className={css.leftSmallBox}>
|
||||
<span className={css.orderGreen}>
|
||||
Preparing for shipment
|
||||
</span>
|
||||
{/* 색상별 뿌려주는 틀림.
|
||||
<span className={css.orderBlue}>Shipping</span>
|
||||
<span className={css.orderRed}>Canceled</span>
|
||||
<span className={css.orderBlack}>Completed</span>
|
||||
*/}
|
||||
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
|
||||
</div>
|
||||
|
||||
<TButton size="small" className={css.orderDetailBtn}>
|
||||
{$L("view order details")}
|
||||
</TButton>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.productBox}>
|
||||
<div className={css.logo}>
|
||||
<span className={css.logoImg}></span>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
</div>
|
||||
<div className={css.orderPdInfo}>
|
||||
<div className={css.productImg}></div>
|
||||
<div className={css.pdInfo}>
|
||||
<ul>
|
||||
<li>ID: A565145</li>
|
||||
<li>Qty: 1</li>
|
||||
<li>Silver Metallic / XL</li>
|
||||
</ul>
|
||||
<div className={css.orderAcc}>
|
||||
$38.09
|
||||
<span>|</span>
|
||||
<span>OPTION: $5.50</span>
|
||||
<span>|</span>
|
||||
<span>S&H: $5.50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.orderBorder}>
|
||||
<div className={css.orderNmInfo}>
|
||||
<p className={css.orderTitle}>
|
||||
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
|
||||
</p>
|
||||
<TButton size="small" className={css.orderCancelBtn}>
|
||||
{$L("Cancel order")}
|
||||
</TButton>
|
||||
</div>
|
||||
|
||||
<div className={css.orderInfo}>
|
||||
<div className={css.infoBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.topBox}>
|
||||
<h4>payment method</h4>
|
||||
<span>Mastercard / ****-1199</span>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<h4>order date</h4>
|
||||
<span>January 5, 2023</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<div>item</div>
|
||||
<div>4</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>item total</div>
|
||||
<div>$90.40</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>option</div>
|
||||
<div>$4.40</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>s&h</div>
|
||||
<div>$11.00</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>tax</div>
|
||||
<div>$5.00</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>coupon</div>
|
||||
<div>-$10.00</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.totalAccount}>
|
||||
<div className={css.accTitle}>order total</div>
|
||||
<div className={css.accountNum}>$ 95.80</div>
|
||||
</div>
|
||||
<div className={css.orderItemList}>
|
||||
<ul>
|
||||
{/* 여기부터 아이템 리스트들 */}
|
||||
<li>
|
||||
<div className={css.topBox}>
|
||||
<div className={css.leftSmallBox}>
|
||||
<span className={css.orderGreen}>
|
||||
Preparing for shipment
|
||||
</span>
|
||||
{/* 색상별 뿌려주는 틀림.
|
||||
<span className={css.orderBlue}>Shipping</span>
|
||||
<span className={css.orderRed}>Canceled</span>
|
||||
<span className={css.orderBlack}>Completed</span>
|
||||
*/}
|
||||
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
|
||||
</div>
|
||||
|
||||
<TButton size="small" className={css.orderDetailBtn}>
|
||||
{$L("view order details")}
|
||||
</TButton>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.productBox}>
|
||||
<div className={css.logo}>
|
||||
<span className={css.logoImg}></span>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
</div>
|
||||
<div className={css.orderPdInfo}>
|
||||
<div className={css.productImg}></div>
|
||||
<div className={css.pdInfo}>
|
||||
<ul>
|
||||
<li>ID: A565145</li>
|
||||
<li>Qty: 1</li>
|
||||
<li>Silver Metallic / XL</li>
|
||||
</ul>
|
||||
<div className={css.orderAcc}>
|
||||
$38.09
|
||||
<span>|</span>
|
||||
<span>OPTION: $5.50</span>
|
||||
<span>|</span>
|
||||
<span>S&H: $5.50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className={css.topBox}>
|
||||
<div className={css.leftSmallBox}>
|
||||
<span className={css.orderGreen}>
|
||||
Preparing for shipment
|
||||
</span>
|
||||
{/* 색상별 뿌려주는 틀림.
|
||||
<span className={css.orderBlue}>Shipping</span>
|
||||
<span className={css.orderRed}>Canceled</span>
|
||||
<span className={css.orderBlack}>Completed</span>
|
||||
*/}
|
||||
Arriving January 10~ January 15 {/* 문구 다틀릴예정 */}
|
||||
</div>
|
||||
|
||||
<TButton size="small" className={css.orderDetailBtn}>
|
||||
{$L("view order details")}
|
||||
</TButton>
|
||||
</div>
|
||||
<div className={css.underBox}>
|
||||
<div className={css.leftBox}>
|
||||
<div className={css.productBox}>
|
||||
<div className={css.logo}>
|
||||
<span className={css.logoImg}></span>
|
||||
IHWIP XL Everyday Essentials Crossbody with 2 Straps
|
||||
</div>
|
||||
<div className={css.orderPdInfo}>
|
||||
<div className={css.productImg}></div>
|
||||
<div className={css.pdInfo}>
|
||||
<ul>
|
||||
<li>ID: A565145</li>
|
||||
<li>Qty: 1</li>
|
||||
<li>Silver Metallic / XL</li>
|
||||
</ul>
|
||||
<div className={css.orderAcc}>
|
||||
$38.09
|
||||
<span>|</span>
|
||||
<span>OPTION: $5.50</span>
|
||||
<span>|</span>
|
||||
<span>S&H: $5.50</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={css.rightBox}>
|
||||
<ul>
|
||||
<li>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
VIEW CANCELLATION DETAILS
|
||||
</SpottableComponent>
|
||||
<SpottableComponent className={css.divBtn}>
|
||||
BUY IT AGAIN
|
||||
</SpottableComponent>
|
||||
{/* 버튼은 4개까지만 복사해서 쓰면댐 */}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,357 @@
|
||||
@import "../../../../../style/CommonStyle.module.less";
|
||||
@import "../../../../../style/utils.module.less";
|
||||
.orderBorder {
|
||||
background: #f8f8f8;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #dadada;
|
||||
margin-bottom: 30px;
|
||||
&:last-child {
|
||||
margin-bottom: 93px;
|
||||
}
|
||||
.orderNmInfo {
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
background: #2c343f;
|
||||
line-height: 90px;
|
||||
padding: 0 60px;
|
||||
justify-content: space-between;
|
||||
.orderTitle {
|
||||
color: @COLOR_WHITE;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
font-family: @baseFont;
|
||||
.orderNm {
|
||||
font-size: 30px;
|
||||
color: @COLOR_WHITE;
|
||||
font-weight: normal;
|
||||
font-family: @baseFont;
|
||||
}
|
||||
}
|
||||
.orderCancelBtn {
|
||||
background: #808080;
|
||||
.size(@w:224px,@h:60px);
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
.orderInfo {
|
||||
background-color: #f8f8f8;
|
||||
.infoBox {
|
||||
background: #f2f2f2;
|
||||
width: 1680px;
|
||||
padding: 40px 60px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.leftBox {
|
||||
width: 400px;
|
||||
margin-right: 30px;
|
||||
.topBox {
|
||||
> h4 {
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
color: #222;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> span {
|
||||
display: inline-block;
|
||||
margin: 6px 0 20px 0;
|
||||
font-size: 24px;
|
||||
color: #808080;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
border-bottom: 1px solid #dadada;
|
||||
}
|
||||
.underBox {
|
||||
> h4 {
|
||||
margin-top: 20px;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
color: #222;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> span {
|
||||
display: inline-block;
|
||||
margin: 6px 0 0 0;
|
||||
font-size: 24px;
|
||||
color: #808080;
|
||||
width: 400px;
|
||||
height: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightBox {
|
||||
width: 1130px;
|
||||
height: 173px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 6px;
|
||||
> ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
> li {
|
||||
width: 188px;
|
||||
height: 173px;
|
||||
border-right: 1px solid #dadada;
|
||||
&:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
> div {
|
||||
border-bottom: 1px solid #dadada;
|
||||
text-align: center;
|
||||
line-height: 86px;
|
||||
&:first-child {
|
||||
width: 188px;
|
||||
height: 86px;
|
||||
text-transform: uppercase;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
&:last-child {
|
||||
width: 188px;
|
||||
height: 86px;
|
||||
border-bottom: none;
|
||||
font-size: 30px;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.totalAccount {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 18px 60px;
|
||||
background: #dadada;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.accTitle {
|
||||
text-transform: uppercase;
|
||||
line-height: 44px;
|
||||
color: #222;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.accountNum {
|
||||
color: #c70850;
|
||||
font-weight: bold;
|
||||
font-size: 40px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
.orderItemList {
|
||||
background: #f8f8f8;
|
||||
padding: 60px;
|
||||
width: 100%;
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
width: 1560px;
|
||||
height: 423px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border: 1px solid #dadada;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 40px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.topBox {
|
||||
padding: 20px 60px;
|
||||
flex: none;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border-bottom: 1px solid #dadada;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.leftSmallBox {
|
||||
color: #222;
|
||||
font-size: 24px;
|
||||
margin: 9px 0;
|
||||
.orderGreen {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(8, 199, 73, 0.3);
|
||||
border: 3px solid #08c749;
|
||||
border-radius: 6px;
|
||||
color: #08c749;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.orderBlue {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(8, 199, 199, 0.3);
|
||||
border: 3px solid #0877c7;
|
||||
border-radius: 6px;
|
||||
color: #0877c7;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.orderRed {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(199, 8, 80, 0.3);
|
||||
border: 3px solid #c70850;
|
||||
border-radius: 6px;
|
||||
color: #c70850;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.orderBlack {
|
||||
margin-right: 14px;
|
||||
height: 42px;
|
||||
padding: 9px 15px;
|
||||
background: rgba(20, 20, 20, 0.3);
|
||||
border: 3px solid #141414;
|
||||
border-radius: 6px;
|
||||
color: #141414;
|
||||
font-size: 20px;
|
||||
line-height: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.orderDetailBtn {
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
.underBox {
|
||||
flex: none;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 322px;
|
||||
.leftBox {
|
||||
width: 1059px;
|
||||
height: 322px;
|
||||
border-right: 1px solid #dadada;
|
||||
padding: 30px 60px;
|
||||
.productBox {
|
||||
.logo {
|
||||
display: flex;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
line-height: 42px;
|
||||
margin-bottom: 20px;
|
||||
.logoImg {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
background: #000;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
.orderPdInfo {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.productImg {
|
||||
flex: none;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #dadada;
|
||||
}
|
||||
.pdInfo {
|
||||
margin-left: 20px;
|
||||
> ul {
|
||||
list-style: none;
|
||||
> li {
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
color: #808080;
|
||||
margin-bottom: 6px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.orderAcc {
|
||||
margin-top: 54px;
|
||||
color: #c70850;
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
> span {
|
||||
color: #808080;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
margin: 0 5.5px;
|
||||
line-height: 36px;
|
||||
&:first-child {
|
||||
margin: 0 5.5px 0 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.rightBox {
|
||||
width: 500px;
|
||||
height: 322px;
|
||||
padding: 0 60px;
|
||||
> ul {
|
||||
list-style: none;
|
||||
height: 100%;
|
||||
> li {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
height: 100%;
|
||||
.divBtn {
|
||||
width: 380px;
|
||||
height: 60px;
|
||||
border: 1px solid #dadada;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
line-height: 58px;
|
||||
font-size: 24px;
|
||||
color: #808080;
|
||||
font-weight: 600;
|
||||
border-radius: 6px;
|
||||
background-image: linear-gradient(to top, #f5f5f5, #fff);
|
||||
margin-bottom: 6px;
|
||||
position: relative;
|
||||
&:focus {
|
||||
&::after {
|
||||
.focused(@boxShadow: 0, @borderRadius: 6px);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user