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 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 TBody from "../../../../components/TBody/TBody";
|
||||||
import TButton, { SIZES } from "../../../../components/TButton/TButton";
|
|
||||||
import TButtonTab, {
|
import TButtonTab, {
|
||||||
LIST_TYPE,
|
LIST_TYPE,
|
||||||
} from "../../../../components/TButtonTab/TButtonTab";
|
} from "../../../../components/TButtonTab/TButtonTab";
|
||||||
import TDropDown from "../../../../components/TDropDown/TDropDown";
|
import TDropDown from "../../../../components/TDropDown/TDropDown";
|
||||||
import THeader from "../../../../components/THeader/THeader";
|
import THeader from "../../../../components/THeader/THeader";
|
||||||
|
import TPopUp from "../../../../components/TPopUp/TPopUp";
|
||||||
import { $L } from "../../../../utils/helperMethods";
|
import { $L } from "../../../../utils/helperMethods";
|
||||||
import css from "./MyOrders.module.less";
|
import css from "./MyOrders.module.less";
|
||||||
|
import CancelOrderList from "./OrderList/CancelOrderList";
|
||||||
|
import OrderList from "./OrderList/OrderList";
|
||||||
|
|
||||||
const TabContainer = SpotlightContainerDecorator(
|
const TabContainer = SpotlightContainerDecorator(
|
||||||
{ enterTo: "last-focused" },
|
{ enterTo: "last-focused" },
|
||||||
"div"
|
"div"
|
||||||
);
|
);
|
||||||
|
|
||||||
export default function MyOrders({ title, cbScrollTo }) {
|
export default function MyOrders({ title, cbScrollTo }) {
|
||||||
const [selectedTab, setSelectedTab] = useState(0);
|
const [selectedTab, setSelectedTab] = useState(0);
|
||||||
|
|
||||||
const [dropDownTab, setDropDownTab] = 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 tabList = [$L("ORDERS"), $L("CANCELLED ORDERS")];
|
||||||
|
|
||||||
const handleItemClick = useCallback(
|
const handleItemClick = useCallback(
|
||||||
@@ -30,6 +40,23 @@ export default function MyOrders({ title, cbScrollTo }) {
|
|||||||
},
|
},
|
||||||
[selectedTab]
|
[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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<THeader title={title} />
|
<THeader title={title} />
|
||||||
@@ -51,19 +78,281 @@ export default function MyOrders({ title, cbScrollTo }) {
|
|||||||
{filterMethods}
|
{filterMethods}
|
||||||
</TDropDown>
|
</TDropDown>
|
||||||
</TabContainer>
|
</TabContainer>
|
||||||
<div className={css.orderlist}>
|
|
||||||
<div className={css.orderNmInfo}>
|
{/* <div className={css.noOrderList}>
|
||||||
<p className={css.orderTitle}>
|
<div className={css.noOrderBox}>
|
||||||
ORDER NUMBER : <span className={css.orderNm}>AA12349575h6</span>
|
<img src={noOrderImg} />
|
||||||
</p>
|
<span className={css.noOrderTitle}>
|
||||||
<TButton size="small" className={css.orderCancelBtn}>
|
THERE IS NO ORDER HISTORY
|
||||||
{$L("Cancel order")}
|
</span>
|
||||||
</TButton>
|
<br />
|
||||||
|
<span className={css.noOrderSub}>
|
||||||
|
Use search above to find past orders.
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={css.orderInfo}></div>
|
</div> */}
|
||||||
|
|
||||||
|
<div className={css.orderlist}>
|
||||||
|
{selectedTab === 0 && <OrderList />}
|
||||||
|
{selectedTab === 1 && <CancelOrderList />}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</TBody>
|
</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;
|
padding: 60px 60px 0;
|
||||||
.tabContainer {
|
.tabContainer {
|
||||||
.ordersTab {
|
.ordersTab {
|
||||||
|
width: 100%;
|
||||||
|
> div {
|
||||||
|
width: 360px;
|
||||||
|
height: 66px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.dropdown {
|
.dropdown {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@@ -13,42 +18,237 @@
|
|||||||
top: 60px;
|
top: 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.orderlist {
|
.noOrderList {
|
||||||
margin-top: 40px;
|
margin-top: 180px;
|
||||||
border-radius: 12px;
|
.noOrderBox {
|
||||||
border: 1px solid #dadada;
|
width: 540px;
|
||||||
background: #f8f8f8;
|
height: 252px;
|
||||||
|
text-align: center;
|
||||||
width: 100%;
|
margin: 0 auto;
|
||||||
overflow: hidden;
|
> img {
|
||||||
.orderNmInfo {
|
width: 100%;
|
||||||
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 {
|
.noOrderTitle {
|
||||||
background: #808080;
|
font-size: 36px;
|
||||||
.size(@w:224px,@h:60px);
|
color: #a3a3a3;
|
||||||
align-self: center;
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
.noOrderSub {
|
||||||
|
font-size: 24px;
|
||||||
|
color: #b5b5b5;
|
||||||
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.orderInfo {
|
}
|
||||||
background: #f2f2f2;
|
.orderlist {
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollBox {
|
||||||
|
margin: 30px 60px;
|
||||||
|
width: 780px;
|
||||||
|
height: 460px;
|
||||||
|
overflow: hidden auto;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
border: 1px solid #dadada;
|
||||||
|
> li {
|
||||||
|
width: 100%;
|
||||||
|
height: 90px;
|
||||||
|
border-bottom: 1px solid #dadada;
|
||||||
|
background: #fff;
|
||||||
|
padding: 0 30px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
&.hideInfo {
|
||||||
|
padding: 30px;
|
||||||
|
background: #f2f2f2;
|
||||||
|
height: auto;
|
||||||
|
display: inline-block;
|
||||||
|
> h5 {
|
||||||
|
width: 100%;
|
||||||
|
color: #333;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
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;
|
||||||
|
color: #808080;
|
||||||
|
line-height: 1.33;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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 {
|
||||||
|
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