diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.jsx b/com.twin.app.shoptime/src/components/THeader/THeader.jsx index 438252f0..cfd9574c 100644 --- a/com.twin.app.shoptime/src/components/THeader/THeader.jsx +++ b/com.twin.app.shoptime/src/components/THeader/THeader.jsx @@ -5,9 +5,6 @@ import classNames from "classnames"; import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; import Spottable from "@enact/spotlight/Spottable"; -import { $L } from "../../utils/helperMethods"; -import TButton, { SIZES, TYPES } from "../TButton/TButton"; -import TSwitch from "../TSwitch/TSwitch"; import css from "./THeader.module.less"; const Container = SpotlightContainerDecorator( @@ -15,31 +12,13 @@ const Container = SpotlightContainerDecorator( "div" ); const SpottableComponent = Spottable("button"); -export default function THeader({ - title, - className, - onBackButton, - onClick, - chkDelete, -}) { +export default function THeader({ title, className, onBackButton, onClick }) { return ( {onBackButton && ( )}
{title}
- {title === "Reminders" && chkDelete && ( - <> - - - {$L("Delete")} - - - )}
); } diff --git a/com.twin.app.shoptime/src/components/THeader/THeader.module.less b/com.twin.app.shoptime/src/components/THeader/THeader.module.less index 14368f86..b2d89827 100644 --- a/com.twin.app.shoptime/src/components/THeader/THeader.module.less +++ b/com.twin.app.shoptime/src/components/THeader/THeader.module.less @@ -16,27 +16,3 @@ margin-left: 61px; } } - -.button { - .size(@w: 60px, @h: 60px); - background-size: cover; - background-position: center; - background-image: url("../../../assets/images/btn/btn-60-bk-back-nor@3x.png"); - border: none; - margin-right: -49px; - position: relative; - - &:focus { - background-image: url("../../../assets/images/btn/btn-60-wh-back-foc@3x.png"); - } -} - -.deleteBtn { - .size(@w: 180px, @h: 60px); - .position(@position: absolute, @top: 15px, @right: 60px, @bottom: auto, @left: auto); - &:focus { - &::after { - .focused(@boxShadow: 22px, @borderRadius:12px); - } - } -} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx index 69a74e59..fd09c9f7 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPagePanel.jsx @@ -23,7 +23,6 @@ export default function MyPagePanel() { const { panelInfo } = panelInfos || {}; const { menuNm, menuOrd } = panelInfo || {}; const { getScrollTo, scrollTop } = useScrollTo(); - const [hasBtn, setHasBtn] = useState(false); const myPageComponents = { "My Info": MyInfo, @@ -37,25 +36,6 @@ export default function MyPagePanel() { const SelectedComponent = menuNm && myPageComponents[menuNm]; - const [isOn, setIsOn] = useState(false); - const [checkTmp, setCheckTmp] = useState(false); - - const ToggleHandler = () => { - setIsOn(!isOn); - }; - const btnComponents = ["Recently Viewed", "Favorites", "Reminders"]; - const btnLength = btnComponents.filter( - (btnComponents) => btnComponents === menuNm - ).length; - - useEffect(() => { - if (isOn === true) { - setCheckTmp(true); - } else { - setCheckTmp(false); - } - }, [ToggleHandler]); - useEffect(() => { Spotlight.focus(SpotlightIds.TBODY); scrollTop(); @@ -63,18 +43,9 @@ export default function MyPagePanel() { return ( - = 1 ? true : false} - /> + - {SelectedComponent && ( - - )} + {SelectedComponent && } ); diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx index 46294116..c9e967e7 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.jsx @@ -1,294 +1,7 @@ import React from "react"; -import { useSelector } from "react-redux"; - -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; - -import TButton, { SIZES, TYPES } from "../../../../components/TButton/TButton"; -import TScroller from "../../../../components/TScroller/TScroller"; import css from "../Favorites/Favorites.module.less"; -const SpottableComponent = Spottable("div"); -const Container = SpotlightContainerDecorator( - { enterTo: "last-focused" }, - "div" -); export default function Favorites() { - const favoriteDatas = useSelector((state) => state.myPage.favoriteData); - - return ( -
-
- - - -
- -
-
-
Sold Out
-
-
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
Sold Out
-
-
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
-
-
-
- {/*
-
-
-
You have no Favorites
-
- - {$L("Previous")} - -
-
-
-
*/} -
- ); + return
Favorites
; } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less index 9076abcb..accd63ee 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Favorites/Favorites.module.less @@ -1,126 +1,2 @@ @import "../../../../style/CommonStyle.module.less"; @import "../../../../style/utils.module.less"; - -.favoriteContainer { - width: 100%; - - background: @BG_COLOR_01; - overflow-y: auto; - .contentsBox { - margin: 0 60px; - - .buttonBox { - width: 100%; - display: flex; - flex-direction: row-reverse; - .locateBox { - min-width: 180px; - width: 180px; - height: 54px; - margin: 0; - padding: 0; - box-sizing: border-box; - } - } - .contents { - margin-top: 42px; - width: 100%; - height: 100%; - display: flex; - flex-wrap: wrap; - - &.noContents { - text-align: center; - flex: none; - .noTitle { - margin-top: 246px; - width: 100%; - - .textBox { - font-size: 50px; - font-family: @baseFont; - color: @COLOR_GRAY06; - } - .emptyBtnBox { - margin-top: 88px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - .noTitleBtnBox { - min-width: 180px; - .size(@w: 180px, @h: 54px); - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: @baseFont; - } - } - } - } - .itemBox { - flex: none; - margin-right: 26px; - margin-bottom: 50px; - .position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto); - .size(@w: 315px, @h: 265px); - border-radius: 12px; - box-sizing: border-box; - border: 1px solid @COLOR_GRAY09; - overflow: hidden; - &:focus { - &::after { - .focused(@boxShadow: 22px, @borderRadius: 12px); - } - .productbox { - background: @COLOR_WHITE; - } - } - &:nth-child(5n + 5) { - margin-right: 0; - } - .imgBox { - .size(@w: 313px, @h: 177px); - img { - width: 100%; - } - .soldout { - position: absolute; - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w: 313px, @h: 177px); - text-align: center; - .soldOutBg { - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w: 313px, @h: 177px); - background: #ccc; - opacity: 0.4; - } - .soldOutText { - .size(@w: 313px, @h: 177px); - line-height: 177px; - color: #fff; - } - } - } - .productbox { - .size(@w: 313px, @h: 88px); - background-color: #e3e7ee; - padding: 15px 11px 0; - .pdName { - .elip(@clamp:1); - line-height: normal; - font-size: 20px; - font-family: @baseFont; - color: @COLOR_GRAY06; - } - .pdAccount { - .elip(@clamp:1); - font-size: 20px; - font-family: @baseFontBold; - color: @COLOR_GRAY06; - } - } - } - } - } -} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx index 1f8910fb..c7931718 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.jsx @@ -1,244 +1,7 @@ import React from "react"; -import { SpotlightContainerDecorator } from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; - -import TScroller from "../../../../components/TScroller/TScroller"; import css from "../RecentlyViewed/RecentlyViewed.module.less"; -const SpottableComponent = Spottable("div"); -const Container = SpotlightContainerDecorator( - { enterTo: "last-focused" }, - "div" -); - export default function RecentlyViewed() { - return ( -
-
- -
-
Today
-
- - -
- -
-
-
Sold Out
-
-
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
-
-
-
07/20
-
- - -
- -
-
-
Sold Out
-
-
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
Sold Out
-
-
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
- -
- -
-
-
- 7.3 cu. ft. Ultra Large Capacity Rear Control Gas Dryer with - LG EasyLoad™ Door and AI Sensing -
-
$999.99
-
-
-
-
-
- {/*
-
-
-
- You have no recently watched Shows or Item -
-
- - {$L("Previous")} - -
-
-
-
*/} -
- ); + return
RecentlyViewed
; } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less index beda3f8f..accd63ee 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/RecentlyViewed/RecentlyViewed.module.less @@ -1,133 +1,2 @@ @import "../../../../style/CommonStyle.module.less"; @import "../../../../style/utils.module.less"; - -.recentContainer { - width: 100%; - - background: @BG_COLOR_01; - .contentsBox { - margin: 0 60px; - .lineBox { - display: flex; - width: 100%; - height: 30px; - margin-top: 35px; - &.first-child { - margin-top: 42px; - } - .subTitle { - flex: none; - font-size: 36px; - font-family: @baseFontBold; - width: 132px; - color: @COLOR_GRAY06; - letter-spacing: -0.9px; - } - } - .contents { - margin-top: 30px; - width: 100%; - height: 100%; - display: flex; - flex-wrap: wrap; - - &.noContents { - text-align: center; - .noTitle { - margin-top: 246px; - width: 100%; - .textBox { - font-size: 50px; - font-family: @baseFont; - color: @COLOR_GRAY06; - } - .emptyBtnBox { - margin-top: 88px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: row; - .noTitleBtnBox { - min-width: 180px; - .size(@w: 180px, @h: 54px); - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: @baseFont; - } - } - } - } - .itemBox { - flex: none; - margin-right: 26px; - margin-top: 50px; - .position(@position: relative, @top: auto, @right: auto, @bottom: auto, @left: auto); - .size(@w: 315px, @h: 265px); - border-radius: 12px; - box-sizing: border-box; - border: 1px solid @COLOR_GRAY09; - overflow: hidden; - &:focus { - &::after { - .focused(@boxShadow: 22px, @borderRadius: 12px); - } - .productbox { - background: @COLOR_WHITE; - } - } - &:nth-child(5n + 5) { - margin-right: 0; - } - &:nth-child(1), - &:nth-child(2), - &:nth-child(3), - &:nth-child(4), - &:nth-child(5) { - margin-top: 0; - } - .imgBox { - .size(@w: 313px, @h: 177px); - img { - width: 100%; - } - .soldout { - position: absolute; - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w: 313px, @h: 177px); - text-align: center; - .soldOutBg { - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w: 313px, @h: 177px); - background: #ccc; - opacity: 0.4; - } - .soldOutText { - .size(@w: 313px, @h: 177px); - line-height: 177px; - color: #fff; - } - } - } - .productbox { - .size(@w: 313px, @h: 88px); - background-color: #e3e7ee; - padding: 15px 11px 0; - .pdName { - .elip(@clamp:1); - line-height: normal; - font-size: 20px; - font-family: @baseFont; - color: @COLOR_GRAY06; - } - .pdAccount { - .elip(@clamp:1); - font-size: 20px; - font-family: @baseFontBold; - color: @COLOR_GRAY06; - } - } - } - } - } -} diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx index c6fdb3f8..276540ab 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.jsx @@ -1,257 +1,5 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; -import classNames from "classnames"; - -import SpotlightContainerDecorator from "@enact/spotlight/SpotlightContainerDecorator"; -import Spottable from "@enact/spotlight/Spottable"; - -import css from "../Reminders/Reminders.module.less"; - -const SpottableComponent = Spottable("div"); -const Container = SpotlightContainerDecorator( - { enterTo: "last-focused" }, - "div" -); - -export default function Reminders({ checkTmp }) { - const [isCheck, setIsCheck] = useState(false); - useEffect(() => { - checkTmp === true ? setIsCheck(true) : setIsCheck(false); - }, [checkTmp]); - return ( - <> -
-
-
- - - -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
- -
HSN
-
03/21/2020 12:01 PM
-
- G by Giuliana Rancic Design FashionsG by Giuliana Rancic Design - Fashions -
-
with Host Michelle Yarn
-
-
-
-
- - ); +export default function Reminders() { + return
Reminders
; } diff --git a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less index 5afdc17a..accd63ee 100644 --- a/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less +++ b/com.twin.app.shoptime/src/views/MyPagePanel/MyPageSub/Reminders/Reminders.module.less @@ -1,109 +1,2 @@ @import "../../../../style/CommonStyle.module.less"; @import "../../../../style/utils.module.less"; - -.reminderContainer { - width: 100%; - .contentsBox { - padding: 0 60px; - .headerBox { - } - .tabContainer { - margin-top: 34px; - display: flex; - position: relative; - .tButtonTab { - width: 100%; - } - .tButton { - position: absolute; - right: 0; - top: 0; - margin: 0; - } - } - .contents { - } - .showItem { - margin-top: 50px; - display: flex; - flex-wrap: wrap; - .listItem { - flex: none; - .size(@w:315px,@h:177px); - padding: 26px 60px 26px 20px; - box-sizing: border-box; - margin: 0 26px 50px 0; - position: relative; - &:nth-child(5n + 1) { - border: 1px solid #0077c8; - background: #eef6fb; - } - &:nth-child(5n + 2) { - border: 1px solid #167aac; - background: #eef6fb; - } - &:nth-child(5n + 3) { - border: 1px solid #182535; - background: #f5f9fd; - } - &:nth-child(5n + 4) { - border: 1px solid #f57c67; - background: #fef6f5; - } - &:nth-child(5n + 5) { - border: 1px solid #0077c8; - background: #eef6fb; - margin-right: 0; - } - .logo { - .size(@w:30px,@h:30px); - border-radius: 50%; - .position(@position: absolute, @top: 11px, @right: 11px, @bottom: auto, @left: auto); - background-color: #0077c8; - font-size: 10px; - text-align: center; - line-height: 30px; - } - .date { - color: #cf0652; - font-family: @baseFontBold; - font-size: 20px; - height: 15px; - line-height: normal; - } - .title { - margin-top: 15px; - color: @COLOR_GRAY06; - font-family: @baseFontBold; - font-size: 24px; - line-height: 1.33; - .size(@w:235px,@h:56px); - .elip(@clamp:2); - } - .actor { - margin-top: 20px; - color: #666; - font-family: @baseFont; - font-size: 18px; - height: 13px; - line-height: normal; - } - &.checked { - &::after { - .position(@position: absolute, @top: 0, @right: auto, @bottom: auto, @left: 0); - .size(@w:315px,@h:177px); - background: rgba(0, 0, 0, 0.3); - content: ""; - box-sizing: border-box; - } - } - &:focus { - &::after { - .focused(@boxShadow: 22px, @borderRadius: 0px); - content: ""; - } - } - } - } - } -}