From aa09918513141006035b03d5c421073aec7ed169 Mon Sep 17 00:00:00 2001 From: "junghoon86.park" Date: Thu, 15 Feb 2024 13:48:29 +0900 Subject: [PATCH] =?UTF-8?q?[HomePanel]=20=EA=B3=B5=ED=86=B5=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9=EA=B1=B4.=20=20-=20util?= =?UTF-8?q?.module.less=20=EC=A0=81=EC=9A=A9=EA=B1=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HomeBannerTemplate1.module.less | 89 +++++++---------- .../HomeBannerTemplate2.module.less | 60 ++++-------- .../HomeBannerTemplate3.module.less | 96 +++++++------------ .../HomePanel/HomeBanner/Template.module.less | 84 +++++----------- .../views/HomePanel/HomeOnSale/HomeOnSale.jsx | 2 +- .../HomeOnSaleItem/HomeOnSaleItem.module.less | 42 +++----- .../HomeTodayDeal/HomeTodayDeal.module.less | 89 ++++++----------- .../PopularShow/PopularShow.module.less | 9 +- .../PopularShowItem.module.less | 78 +++++---------- .../HomePanel/SubCategory/SubCategory.jsx | 1 - .../SubCategory/SubCategory.module.less | 15 ++- 11 files changed, 194 insertions(+), 371 deletions(-) diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less index b2ef41e6..c2c0db2b 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less @@ -1,7 +1,8 @@ @import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; .container { - background-color: #f8f8f8; + background-color: @BG_COLOR_01; display: flex; } @@ -10,73 +11,58 @@ display: flex; img, video { - width: 100%; - height: 100%; + .size(@w: 100%, @h: 100%); object-fit: cover; } } .leftBannerBox { - width: 744px; - height: 858px; + .size(@w: 744px, @h: 858px); margin-right: 18px; &.dualBox { .topBox { - width: 744px; - height: 420px; - + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); margin-bottom: 18px; - border: 4px solid transparent; border-radius: 12px; overflow: hidden; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } .underBox { - width: 744px; - height: 420px; - - border: 4px solid transparent; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; overflow: hidden; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } } } .videoBox { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); margin: 0 18px 18px 0; - border: 4px solid transparent; - border-radius: 12px; overflow: hidden; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } .videoPlayer { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); outline: "teal dashed 1px"; transform: "scale(1)"; border-radius: 12px; @@ -84,10 +70,9 @@ } .banner02 { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; - border: 4px solid transparent; box-sizing: border-box; &:focus, &:hover, @@ -101,35 +86,28 @@ } .banner03 { - width: 486px; - height: 858px; - border: 4px solid transparent; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; - box-sizing: border-box; margin-right: 18px; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } .banner04 { - width: 486px; - height: 858px; - border: 4px solid transparent; - box-sizing: border-box; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } @@ -173,23 +151,20 @@ display: flex; .imgBox { - width: 486px; - height: 858px; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); margin-right: 18px; - border: 4px solid transparent; border-radius: 12px; overflow: hidden; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } > img { - width: 486px; - height: 858px; + .size(@w: 486px, @h: 858px); object-fit: contain; } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less index dca5aed1..9c438843 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less @@ -1,43 +1,36 @@ @import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; .container { - background-color: #f8f8f8; - + background-color: @BG_COLOR_01; .homeTemplateBox { margin: 24px 24px 0px; .mainBox { display: flex; img, video { - width: 100%; - height: 100%; + .size(@w: 100%, @h: 100%); object-fit: cover; } .longBanner { - width: 486px; - height: 858px; - border: 4px solid transparent; - box-sizing: border-box; + position: relative; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; overflow: hidden; &:focus, &:active, &:hover, &:focus-within { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } &.rollingBox { position: relative; .rightBtn { - position: absolute; - right: 18px; - top: 408px; + .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto); z-index: 1; - width: 42px; - height: 42px; + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg"); background-size: 42px 42px; background-repeat: no-repeat; @@ -49,12 +42,9 @@ } } .leftBtn { - position: absolute; - left: 18px; - top: 408px; + .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px); z-index: 1; - width: 42px; - height: 42px; + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg"); background-size: 42px 42px; background-repeat: no-repeat; @@ -69,19 +59,17 @@ } .dualBox { .smallBox { - width: 744px; - height: 420px; - border: 4px solid transparent; + .size(@w: 744px, @h: 420px); border-radius: 12px; + .border-solid(@size:4px, @color:transparent); overflow: hidden; + &:focus, &:active, &:hover, &:focus-within { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } &:nth-child(1) { margin-bottom: 18px; @@ -89,12 +77,9 @@ &.rollingBox { position: relative; .rightBtn { - position: absolute; - right: 18px; - top: 190px; + .position(@position: absolute, @top: 190px, @right: 18px, @bottom: auto, @left: auto); z-index: 1; - width: 42px; - height: 42px; + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg"); background-size: 42px 42px; background-repeat: no-repeat; @@ -104,12 +89,9 @@ } } .leftBtn { - position: absolute; - left: 18px; - top: 190px; + .position(@position: absolute, @top: 190px, @right: auto, @bottom: auto, @left: 18px); z-index: 1; - width: 42px; - height: 42px; + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg"); background-size: 42px 42px; background-repeat: no-repeat; diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less index 4048e5be..cda4b7f4 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less @@ -1,7 +1,8 @@ @import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; .container { - background-color: #f8f8f8; + background-color: @BG_COLOR_01; display: flex; } @@ -10,68 +11,55 @@ display: flex; img, video { - width: 100%; - height: 100%; + .size(@w: 100%, @h: 100%); object-fit: cover; } } .leftBannerBox { - width: 744px; - height: 858px; + .size(@w: 744px, @h: 858px); margin-right: 18px; &.dualBox { + position: relative; .topBox { - width: 744px; - height: 420px; - + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); margin-bottom: 18px; - border: 4px solid transparent; border-radius: 12px; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } .underBox { - width: 744px; - height: 420px; - - border: 4px solid transparent; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } } } .videoBox { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); margin: 0 18px 18px 0; - border: 4px solid transparent; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } .videoPlayer { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); outline: "teal dashed 1px"; transform: "scale(1)"; border-radius: 12px; @@ -79,52 +67,41 @@ } .banner02 { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; - border: 4px solid transparent; - box-sizing: border-box; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); } } .banner03 { - width: 486px; - height: 858px; - border: 4px solid transparent; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; - box-sizing: border-box; margin-right: 18px; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } .banner04 { - width: 486px; - height: 858px; - border: 4px solid transparent; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); box-sizing: border-box; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } } @@ -166,25 +143,22 @@ .mainBox { display: flex; - + position: relative; .imgBox { - width: 486px; - height: 858px; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); margin-right: 18px; - border: 4px solid transparent; border-radius: 12px; overflow: hidden; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); + position: unset; } > img { - width: 486px; - height: 858px; + .size(@w: 486px, @h: 858px); object-fit: contain; } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less index 1cf3f455..1ce3bdc9 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less @@ -1,7 +1,8 @@ @import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; .container { - background-color: #f8f8f8; + background-color: @BG_COLOR_01; display: flex; } @@ -10,121 +11,91 @@ display: flex; img, video { - width: 100%; - height: 100%; + .size(@w: 100%, @h: 100%); object-fit: cover; border-radius: 12px; } } .leftBannerBox { - width: 744px; - height: 858px; + .size(@w: 744px, @h: 858px); margin-right: 18px; &.dualBox { .topBox { - width: 744px; - height: 420px; - + .size(@w: 744px, @h: 420px); margin-bottom: 18px; - border: 4px solid transparent; border-radius: 12px; + .border-solid(@size:4px, @color:transparent); &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); } } .underBox { - width: 744px; - height: 420px; - - border: 4px solid transparent; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); } } } } .videoBox { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); margin: 0 18px 18px 0; - border: 4px solid transparent; + .border-solid(@size:4px, @color:transparent); &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); border-radius: 12px; } .videoPlayer { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); outline: "teal dashed 1px"; transform: "scale(1)"; border-radius: 12px; } } .banner02 { - width: 744px; - height: 420px; + .size(@w: 744px, @h: 420px); border-radius: 12px; - border: 4px solid transparent; - box-sizing: border-box; + .border-solid(@size:4px, @color:transparent); &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); } } .banner03 { - width: 486px; - height: 858px; - border: 4px solid transparent; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; - box-sizing: border-box; margin-right: 18px; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); } } .banner04 { - width: 486px; - height: 858px; - border: 4px solid transparent; - box-sizing: border-box; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); } } @@ -168,18 +139,15 @@ display: flex; .imgBox { - width: 486px; - height: 858px; + .size(@w: 486px, @h: 858px); + .border-solid(@size:4px, @color:transparent); margin-right: 18px; - border: 4px solid transparent; border-radius: 12px; &:focus, &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); } img { width: 100%; diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx index 6e99c7ab..433d22b8 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx @@ -23,7 +23,7 @@ const SALE_ITEM_CONF = { }; const Container = SpotlightContainerDecorator( - { leaveFor: { left: "", right: "" }, enterTo: "last-focused" }, + { enterTo: "last-focused" }, "div" ); diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less index e55ed072..b4316ab6 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less @@ -1,48 +1,40 @@ @import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; .onSaleItemList { - width: 630px; - height: 300px; + .size(@w: 630px, @h: 300px); border-radius: 12px; display: flex; overflow: hidden; margin-right: 18px; - border: 4px solid transparent; - box-sizing: border-box; + .border-solid(@size:4px, @color:transparent); &:focus, &:hover, &:focus-within, &:active { - border: 4px solid #c70850; - box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); } .onSaleItemListImg { - width: 300px; - height: 300px; + .size(@w: 300px, @h: 300px); object-fit: contain; display: inline-block; box-sizing: border-box; } .onSaleItemListBox { - width: 330px; - height: 300px; + .size(@w: 330px, @h: 300px); box-sizing: border-box; padding: 24px; display: inline-block; - .onSaleItemListBoxTitle { - width: 282px; - height: 30px; + .size(@w: 282px, @h: 30px); font-size: 24px; color: rgba(255, 255, 255, 0.5); } .onSaleItemListBoxSaleBox { margin-top: 11px; - width: 274px; - height: 70px; + .size(@w: 274px, @h: 70px); font-size: 50px; - color: #ffffff; + color: @COLOR_WHITE; text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); letter-spacing: -2px; line-height: 60px; @@ -53,25 +45,19 @@ } .onSaleItemListBoxName { margin-top: 41px; - width: 282px; - height: 60px; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + .size(@w: 282px, @h: 60px); + .elip(@clamp:2); font-size: 24px; line-height: 1.33; - color: #fff; + color: @COLOR_WHITE; font-weight: bold; } .onSaleItemListBoxPrice { margin-top: 9px; - width: 282px; - height: 36px; + .size(@w: 282px, @h: 36px); font-size: 30px; line-height: 0.93; - color: #fff; + color: @COLOR_WHITE; letter-spacing: normal; .onSaleItemListBoxPriceStripe { margin-left: 4px; diff --git a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less index 9b3b07af..fa6e8ffb 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less @@ -1,13 +1,13 @@ @import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; .itemBox { background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png); background-repeat: no-repeat; background-size: 486px 858px; background-position: center center; - width: 486px; - height: 858px; + .size(@w: 486px, @h: 858px); margin-right: 18px; - border: 4px solid transparent; + .border-solid(@size:4px, @color:transparent); border-radius: 12px; position: relative; @@ -17,49 +17,38 @@ } .textBox { margin: 268px 36px 0; - width: 406px; - height: 80px; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - font-family: "LGSmartUIBold"; + .size(@w: 406px, @h: 80px); + .elip(@clamp:2); font-weight: bold; - font-size: 30px; - color: #333; + .font (@fontFamily:@baseFontBold, @fontSize:30px); + color: @COLOR_GRAY06; line-height: 1.27; } .accBox { - width: 406px; - height: 50px; + .size(@w: 406px, @h: 50px); margin: 6px 36px 0; text-align: center; - font-size: 42px; + .font (@fontFamily:@baseFontBold, @fontSize:42px); color: @PRIMARY_COLOR_RED; font-weight: bold; line-height: 1.14; .saleAccBox { - font-size: 24px; - color: #767676; + .font (@fontFamily:@baseFontBold, @fontSize:24px); + color: @COLOR_GRAY04; vertical-align: middle; text-decoration: line-through; } } .itemImgBox { margin: 29px 62px 60px; - width: 354px; - height: 354px; + .size(@w: 354px, @h: 354px); > img { width: 100%; } } .leftBtn { - position: absolute; - left: 18px; - top: 408px; - width: 42px; - height: 42px; + .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px); + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png"); background-size: 42px 42px; background-position: center center; @@ -72,11 +61,8 @@ } } .rightBtn { - position: absolute; - right: 18px; - top: 408px; - width: 42px; - height: 42px; + .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto); + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png"); background-size: 42px 42px; background-position: center center; @@ -96,9 +82,8 @@ background-repeat: no-repeat; background-size: 744px 420px; background-position: center center; - width: 744px; - height: 420px; - border: 4px solid transparent; + .size(@w: 744px, @h: 420px); + .border-solid(@size:4px, @color:transparent); border-radius: 12px; display: flex; @@ -110,31 +95,24 @@ object-fit: contain; } .textBox { - font-family: "LGSmartUIBold"; margin: 230px 8px 0 46px; - width: 320px; - height: 80px; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + .size(@w: 320px, @h: 80px); + .elip(@clamp:2); font-weight: bold; - font-size: 30px; - color: #333; + .font (@fontFamily:@baseFontBold, @fontSize:30px); + color: @COLOR_GRAY06; line-height: 1.27; } .accBox { - width: 320px; - height: 50px; + .size(@w: 320px, @h: 50px); margin: 6px 8px 0 46px; text-align: left; - font-size: 42px; + .font (@fontFamily:@baseFontBold, @fontSize:42px); color: @PRIMARY_COLOR_RED; font-weight: bold; line-height: 1.14; .saleAccBox { - font-size: 24px; + .font (@fontFamily:@baseFontBold, @fontSize:24px); color: #767676; vertical-align: middle; text-decoration: line-through; @@ -142,18 +120,14 @@ } .itemImgBox { margin: 44px 26px 44px 0; - width: 324px; - height: 324px; + .size(@w: 324px, @h: 324px); > img { width: 100%; } } .leftBtn { - position: absolute; - left: 18px; - top: 189px; - width: 42px; - height: 42px; + .position(@position: absolute, @top: 189px, @right: auto, @bottom: auto, @left: 18px); + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png"); background-size: 42px 42px; background-position: center center; @@ -165,11 +139,8 @@ } } .rightBtn { - position: absolute; - right: 18px; - top: 189px; - width: 42px; - height: 42px; + .position(@position: absolute, @top: 189px, @right: 18px, @bottom: auto, @left:auto); + .size(@w: 42px, @h: 42px); background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png"); background-size: 42px 42px; background-position: center center; diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less index d8375304..8412d15f 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less @@ -1,4 +1,5 @@ @import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; .popularShow { padding: 60px 0px 0px 60px; @@ -19,9 +20,8 @@ } .addItem { - width: 198px; - height: 438px; - background-color: #fff; + .size(@w: 198px, @h: 438px); + background-color: @COLOR_WHITE; border: 1px solid #e4e4e4; border-radius: 12px; background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg"); @@ -32,8 +32,7 @@ &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; + .border-solid(@size:4px, @color:@PRIMARY_COLOR_RED); border-radius: 12px; background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg"); } diff --git a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less index 08bce0f2..d5f87fa8 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less @@ -1,49 +1,40 @@ @import "../../../../style/CommonStyle.module.less"; +@import "../../../../style/utils.module.less"; + .listItem { - width: 546px; - height: 438px; + .size(@w:546px,@h:438px); padding: 14px; background-color: @COLOR_WHITE; border-radius: 12px; - border: solid 1px @COLOR_GRAY02; - box-sizing: border-box; + .border-solid(@size:4px,@color:transparent); font-weight: bold; - font-family: "LGSmartUIBold"; + font-family: @baseFontBold; margin-right: 18px; - border: 4px solid transparent; - box-sizing: border-box; - + position: relative; &:focus, &:hover, &:focus-within, &:active { border: 4px solid @PRIMARY_COLOR_RED; box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); } > img { - width: 510px; - height: 288px; + .size(@w:510px,@h:288px); object-fit: contain; } .horizonItem { - width: 510px; - height: 61px; + .size(@w:510px,@h:61px); margin-top: 38px; color: #333; font-size: 24px; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; + .elip(@clamp:2); display: flex; } .logo { display: inline-block; - width: 60px; - height: 60px; + .size(@w:60px,@h:60px); margin-right: 12px; .logoPath { width: 100%; @@ -54,58 +45,42 @@ display: inline-block; color: #333; font-size: 24px; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - width: 438px; - height: 61px; + .elip(@clamp:2); + .size(@w:438px,@h:61px); } } .listItemVertical { display: flex; - width: 546px; - height: 438px; - padding: 18px; + .size(@w:546px,@h:438px); + padding: 14px; background-color: @COLOR_WHITE; border-radius: 12px; - border: solid 1px @COLOR_GRAY02; - box-sizing: border-box; margin-right: 18px; - border: 4px solid transparent; - box-sizing: border-box; + .border-solid(@size:4px,@color:transparent); font-weight: bold; - font-family: "LGSmartUIBold"; + font-family: @baseFontBold; &:focus, &:hover, &:focus-within, &:active { border: 4px solid @PRIMARY_COLOR_RED; box-sizing: border-box; - .focusDropShadow(); + .focused(@boxShadow: 22px, @borderRadius: 12px); } > img { - width: 228px; - height: 402px; + .size(@w:228px,@h:402px); object-fit: contain; } .verticalItem { margin-left: 11px; color: #333; font-size: 24px; - width: 270px; - height: 402px; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 12; + .size(@w:270px,@h:402px); + .elip(@clamp:12); } .logo { display: block; - width: 60px; - height: 60px; + .size(@w:60px,@h:60px); margin-right: 12px; .logoPath { width: 100%; @@ -116,12 +91,7 @@ margin-left: 11px; color: #333; font-size: 24px; - width: 270px; - height: 402px; - text-overflow: ellipsis; - overflow: hidden; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 12; + .size(@w:270px,@h:402px); + .elip(@clamp:12); } } diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx index 08e30afd..3e594a39 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx @@ -27,7 +27,6 @@ import css from '../../HomePanel/SubCategory/SubCategory.module.less'; const SpottableComponent = Spottable("div"); const Container = SpotlightContainerDecorator( { - leaveFor: { left: "", right: "" }, enterTo: "last-focused", }, "div" diff --git a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less index cb6cafd7..b4d84844 100644 --- a/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less +++ b/com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less @@ -1,10 +1,12 @@ @import "../../../style/CommonStyle.module.less"; +@import "../../../style/utils.module.less"; + .home { padding: 20px 0px 0 60px; justify-content: unset; align-items: unset; flex-direction: unset; - background-color: #f2f2f2; + background-color: @BG_COLOR_02; border: 1px solid #dadada; width: 100%; } @@ -21,10 +23,9 @@ } .addItem { - width: 198px; - height: 438px; - background-color: #fff; - border: 1px solid #e4e4e4; + .size(@w: 198px, @h: 438px); + background-color: @COLOR_WHITE; + .border-solid(@size:1px, @color:#e4e4e4); border-radius: 12px; background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg"); background-size: 66px 66px; @@ -34,9 +35,7 @@ &:hover, &:focus-within, &:active { - border: 4px solid @PRIMARY_COLOR_RED; - box-sizing: border-box; - border-radius: 12px; + .focused(@boxShadow: 22px, @borderRadius: 12px); background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg"); } }