optrader/shoptime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[HomePanel] 공통 스타일 적용건.

Browse Source 
- util.module.less 적용건
This commit is contained in:
junghoon86.park
2024-02-15 13:48:29 +09:00
parent ba50a2f425
commit aa09918513
11 changed files with 194 additions and 371 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.module.less
View File

@@ -1,7 +1,8 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.container { .container {
background-color: #f8f8f8; background-color: @BG_COLOR_01;
display: flex; display: flex;
} }
@@ -10,73 +11,58 @@
display: flex; display: flex;
img, img,
video { video {
width: 100%; .size(@w: 100%, @h: 100%);
height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.leftBannerBox { .leftBannerBox {
width: 744px; .size(@w: 744px, @h: 858px);
height: 858px;
margin-right: 18px; margin-right: 18px;
&.dualBox { &.dualBox {
.topBox { .topBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
margin-bottom: 18px; margin-bottom: 18px;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
} }
.underBox { .underBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
} }
} }
} }
.videoBox { .videoBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
margin: 0 18px 18px 0; margin: 0 18px 18px 0;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
.videoPlayer { .videoPlayer {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px;
outline: "teal dashed 1px"; outline: "teal dashed 1px";
transform: "scale(1)"; transform: "scale(1)";
border-radius: 12px; border-radius: 12px;
@@ -84,10 +70,9 @@
} }
.banner02 { .banner02 {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
border-radius: 12px; border-radius: 12px;
border: 4px solid transparent;
box-sizing: border-box; box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
@@ -101,35 +86,28 @@
} }
.banner03 { .banner03 {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
box-sizing: border-box;
margin-right: 18px; margin-right: 18px;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
} }
} }
.banner04 { .banner04 {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
} }
@@ -173,23 +151,20 @@
display: flex; display: flex;
.imgBox { .imgBox {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
} }
> img { > img {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px;
object-fit: contain; object-fit: contain;
} }
} }

60
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.module.less
View File

@@ -1,43 +1,36 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.container { .container {
background-color: #f8f8f8; background-color: @BG_COLOR_01;
.homeTemplateBox { .homeTemplateBox {
margin: 24px 24px 0px; margin: 24px 24px 0px;
.mainBox { .mainBox {
display: flex; display: flex;
img, img,
video { video {
width: 100%; .size(@w: 100%, @h: 100%);
height: 100%;
object-fit: cover; object-fit: cover;
} }
.longBanner { .longBanner {
width: 486px; position: relative;
height: 858px; .size(@w: 486px, @h: 858px);
border: 4px solid transparent; .border-solid(@size:4px, @color:transparent);
box-sizing: border-box;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
&:focus, &:focus,
&:active, &:active,
&:hover, &:hover,
&:focus-within { &:focus-within {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
&.rollingBox { &.rollingBox {
position: relative; position: relative;
.rightBtn { .rightBtn {
position: absolute; .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
right: 18px;
top: 408px;
z-index: 1; z-index: 1;
width: 42px; .size(@w: 42px, @h: 42px);
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg"); background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px; background-size: 42px 42px;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -49,12 +42,9 @@
} }
} }
.leftBtn { .leftBtn {
position: absolute; .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
left: 18px;
top: 408px;
z-index: 1; z-index: 1;
width: 42px; .size(@w: 42px, @h: 42px);
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg"); background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px; background-size: 42px 42px;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -69,19 +59,17 @@
} }
.dualBox { .dualBox {
.smallBox { .smallBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
.border-solid(@size:4px, @color:transparent);
overflow: hidden; overflow: hidden;
&:focus, &:focus,
&:active, &:active,
&:hover, &:hover,
&:focus-within { &:focus-within {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
&:nth-child(1) { &:nth-child(1) {
margin-bottom: 18px; margin-bottom: 18px;
@@ -89,12 +77,9 @@
&.rollingBox { &.rollingBox {
position: relative; position: relative;
.rightBtn { .rightBtn {
position: absolute; .position(@position: absolute, @top: 190px, @right: 18px, @bottom: auto, @left: auto);
right: 18px;
top: 190px;
z-index: 1; z-index: 1;
width: 42px; .size(@w: 42px, @h: 42px);
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg"); background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px; background-size: 42px 42px;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -104,12 +89,9 @@
} }
} }
.leftBtn { .leftBtn {
position: absolute; .position(@position: absolute, @top: 190px, @right: auto, @bottom: auto, @left: 18px);
left: 18px;
top: 190px;
z-index: 1; z-index: 1;
width: 42px; .size(@w: 42px, @h: 42px);
height: 42px;
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg"); background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px; background-size: 42px 42px;
background-repeat: no-repeat; background-repeat: no-repeat;

96
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.module.less
View File

@@ -1,7 +1,8 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.container { .container {
background-color: #f8f8f8; background-color: @BG_COLOR_01;
display: flex; display: flex;
} }
@@ -10,68 +11,55 @@
display: flex; display: flex;
img, img,
video { video {
width: 100%; .size(@w: 100%, @h: 100%);
height: 100%;
object-fit: cover; object-fit: cover;
} }
} }
.leftBannerBox { .leftBannerBox {
width: 744px; .size(@w: 744px, @h: 858px);
height: 858px;
margin-right: 18px; margin-right: 18px;
&.dualBox { &.dualBox {
position: relative;
.topBox { .topBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
margin-bottom: 18px; margin-bottom: 18px;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
} }
.underBox { .underBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
} }
} }
} }
.videoBox { .videoBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
margin: 0 18px 18px 0; margin: 0 18px 18px 0;
border: 4px solid transparent;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
.videoPlayer { .videoPlayer {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px;
outline: "teal dashed 1px"; outline: "teal dashed 1px";
transform: "scale(1)"; transform: "scale(1)";
border-radius: 12px; border-radius: 12px;
@@ -79,52 +67,41 @@
} }
.banner02 { .banner02 {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
border-radius: 12px; border-radius: 12px;
border: 4px solid transparent;
box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
} }
} }
.banner03 { .banner03 {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
box-sizing: border-box;
margin-right: 18px; margin-right: 18px;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
} }
} }
.banner04 { .banner04 {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
box-sizing: border-box; box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
border-radius: 12px;
} }
} }
@@ -166,25 +143,22 @@
.mainBox { .mainBox {
display: flex; display: flex;
position: relative;
.imgBox { .imgBox {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box; position: unset;
.focusDropShadow();
} }
> img { > img {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px;
object-fit: contain; object-fit: contain;
} }
} }

84
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/Template.module.less
View File

@@ -1,7 +1,8 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.container { .container {
background-color: #f8f8f8; background-color: @BG_COLOR_01;
display: flex; display: flex;
} }
@@ -10,121 +11,91 @@
display: flex; display: flex;
img, img,
video { video {
width: 100%; .size(@w: 100%, @h: 100%);
height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 12px; border-radius: 12px;
} }
} }
.leftBannerBox { .leftBannerBox {
width: 744px; .size(@w: 744px, @h: 858px);
height: 858px;
margin-right: 18px; margin-right: 18px;
&.dualBox { &.dualBox {
.topBox { .topBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px;
margin-bottom: 18px; margin-bottom: 18px;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
.border-solid(@size:4px, @color:transparent);
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
} }
} }
.underBox { .underBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
} }
} }
} }
} }
.videoBox { .videoBox {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px;
margin: 0 18px 18px 0; margin: 0 18px 18px 0;
border: 4px solid transparent; .border-solid(@size:4px, @color:transparent);
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px; border-radius: 12px;
} }
.videoPlayer { .videoPlayer {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px;
outline: "teal dashed 1px"; outline: "teal dashed 1px";
transform: "scale(1)"; transform: "scale(1)";
border-radius: 12px; border-radius: 12px;
} }
} }
.banner02 { .banner02 {
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px;
border-radius: 12px; border-radius: 12px;
border: 4px solid transparent; .border-solid(@size:4px, @color:transparent);
box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
} }
} }
.banner03 { .banner03 {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
box-sizing: border-box;
margin-right: 18px; margin-right: 18px;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
} }
} }
.banner04 { .banner04 {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
} }
} }
@@ -168,18 +139,15 @@
display: flex; display: flex;
.imgBox { .imgBox {
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px; .border-solid(@size:4px, @color:transparent);
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
} }
img { img {
width: 100%; width: 100%;

2
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSale.jsx
View File

@@ -23,7 +23,7 @@ const SALE_ITEM_CONF = {
}; };
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ leaveFor: { left: "", right: "" }, enterTo: "last-focused" }, { enterTo: "last-focused" },
"div" "div"
); );

42
com.twin.app.shoptime/src/views/HomePanel/HomeOnSale/HomeOnSaleItem/HomeOnSaleItem.module.less
View File

@@ -1,48 +1,40 @@
@import "../../../../style/CommonStyle.module.less"; @import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.onSaleItemList { .onSaleItemList {
width: 630px; .size(@w: 630px, @h: 300px);
height: 300px;
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
overflow: hidden; overflow: hidden;
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; .border-solid(@size:4px, @color:transparent);
box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid #c70850; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
.focusDropShadow();
} }
.onSaleItemListImg { .onSaleItemListImg {
width: 300px; .size(@w: 300px, @h: 300px);
height: 300px;
object-fit: contain; object-fit: contain;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
} }
.onSaleItemListBox { .onSaleItemListBox {
width: 330px; .size(@w: 330px, @h: 300px);
height: 300px;
box-sizing: border-box; box-sizing: border-box;
padding: 24px; padding: 24px;
display: inline-block; display: inline-block;
.onSaleItemListBoxTitle { .onSaleItemListBoxTitle {
width: 282px; .size(@w: 282px, @h: 30px);
height: 30px;
font-size: 24px; font-size: 24px;
color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.5);
} }
.onSaleItemListBoxSaleBox { .onSaleItemListBoxSaleBox {
margin-top: 11px; margin-top: 11px;
width: 274px; .size(@w: 274px, @h: 70px);
height: 70px;
font-size: 50px; font-size: 50px;
color: #ffffff; color: @COLOR_WHITE;
text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); text-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
letter-spacing: -2px; letter-spacing: -2px;
line-height: 60px; line-height: 60px;
@@ -53,25 +45,19 @@
} }
.onSaleItemListBoxName { .onSaleItemListBoxName {
margin-top: 41px; margin-top: 41px;
width: 282px; .size(@w: 282px, @h: 60px);
height: 60px; .elip(@clamp:2);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-size: 24px; font-size: 24px;
line-height: 1.33; line-height: 1.33;
color: #fff; color: @COLOR_WHITE;
font-weight: bold; font-weight: bold;
} }
.onSaleItemListBoxPrice { .onSaleItemListBoxPrice {
margin-top: 9px; margin-top: 9px;
width: 282px; .size(@w: 282px, @h: 36px);
height: 36px;
font-size: 30px; font-size: 30px;
line-height: 0.93; line-height: 0.93;
color: #fff; color: @COLOR_WHITE;
letter-spacing: normal; letter-spacing: normal;
.onSaleItemListBoxPriceStripe { .onSaleItemListBoxPriceStripe {
margin-left: 4px; margin-left: 4px;

89
com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.module.less
View File

@@ -1,13 +1,13 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.itemBox { .itemBox {
background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png); background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_ver.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 486px 858px; background-size: 486px 858px;
background-position: center center; background-position: center center;
width: 486px; .size(@w: 486px, @h: 858px);
height: 858px;
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; .border-solid(@size:4px, @color:transparent);
border-radius: 12px; border-radius: 12px;
position: relative; position: relative;
@@ -17,49 +17,38 @@
} }
.textBox { .textBox {
margin: 268px 36px 0; margin: 268px 36px 0;
width: 406px; .size(@w: 406px, @h: 80px);
height: 80px; .elip(@clamp:2);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-family: "LGSmartUIBold";
font-weight: bold; font-weight: bold;
font-size: 30px; .font (@fontFamily:@baseFontBold, @fontSize:30px);
color: #333; color: @COLOR_GRAY06;
line-height: 1.27; line-height: 1.27;
} }
.accBox { .accBox {
width: 406px; .size(@w: 406px, @h: 50px);
height: 50px;
margin: 6px 36px 0; margin: 6px 36px 0;
text-align: center; text-align: center;
font-size: 42px; .font (@fontFamily:@baseFontBold, @fontSize:42px);
color: @PRIMARY_COLOR_RED; color: @PRIMARY_COLOR_RED;
font-weight: bold; font-weight: bold;
line-height: 1.14; line-height: 1.14;
.saleAccBox { .saleAccBox {
font-size: 24px; .font (@fontFamily:@baseFontBold, @fontSize:24px);
color: #767676; color: @COLOR_GRAY04;
vertical-align: middle; vertical-align: middle;
text-decoration: line-through; text-decoration: line-through;
} }
} }
.itemImgBox { .itemImgBox {
margin: 29px 62px 60px; margin: 29px 62px 60px;
width: 354px; .size(@w: 354px, @h: 354px);
height: 354px;
> img { > img {
width: 100%; width: 100%;
} }
} }
.leftBtn { .leftBtn {
position: absolute; .position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
left: 18px; .size(@w: 42px, @h: 42px);
top: 408px;
width: 42px;
height: 42px;
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png"); background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
background-size: 42px 42px; background-size: 42px 42px;
background-position: center center; background-position: center center;
@@ -72,11 +61,8 @@
} }
} }
.rightBtn { .rightBtn {
position: absolute; .position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
right: 18px; .size(@w: 42px, @h: 42px);
top: 408px;
width: 42px;
height: 42px;
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png"); background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
background-size: 42px 42px; background-size: 42px 42px;
background-position: center center; background-position: center center;
@@ -96,9 +82,8 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 744px 420px; background-size: 744px 420px;
background-position: center center; background-position: center center;
width: 744px; .size(@w: 744px, @h: 420px);
height: 420px; .border-solid(@size:4px, @color:transparent);
border: 4px solid transparent;
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
@@ -110,31 +95,24 @@
object-fit: contain; object-fit: contain;
} }
.textBox { .textBox {
font-family: "LGSmartUIBold";
margin: 230px 8px 0 46px; margin: 230px 8px 0 46px;
width: 320px; .size(@w: 320px, @h: 80px);
height: 80px; .elip(@clamp:2);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font-weight: bold; font-weight: bold;
font-size: 30px; .font (@fontFamily:@baseFontBold, @fontSize:30px);
color: #333; color: @COLOR_GRAY06;
line-height: 1.27; line-height: 1.27;
} }
.accBox { .accBox {
width: 320px; .size(@w: 320px, @h: 50px);
height: 50px;
margin: 6px 8px 0 46px; margin: 6px 8px 0 46px;
text-align: left; text-align: left;
font-size: 42px; .font (@fontFamily:@baseFontBold, @fontSize:42px);
color: @PRIMARY_COLOR_RED; color: @PRIMARY_COLOR_RED;
font-weight: bold; font-weight: bold;
line-height: 1.14; line-height: 1.14;
.saleAccBox { .saleAccBox {
font-size: 24px; .font (@fontFamily:@baseFontBold, @fontSize:24px);
color: #767676; color: #767676;
vertical-align: middle; vertical-align: middle;
text-decoration: line-through; text-decoration: line-through;
@@ -142,18 +120,14 @@
} }
.itemImgBox { .itemImgBox {
margin: 44px 26px 44px 0; margin: 44px 26px 44px 0;
width: 324px; .size(@w: 324px, @h: 324px);
height: 324px;
> img { > img {
width: 100%; width: 100%;
} }
} }
.leftBtn { .leftBtn {
position: absolute; .position(@position: absolute, @top: 189px, @right: auto, @bottom: auto, @left: 18px);
left: 18px; .size(@w: 42px, @h: 42px);
top: 189px;
width: 42px;
height: 42px;
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png"); background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
background-size: 42px 42px; background-size: 42px 42px;
background-position: center center; background-position: center center;
@@ -165,11 +139,8 @@
} }
} }
.rightBtn { .rightBtn {
position: absolute; .position(@position: absolute, @top: 189px, @right: 18px, @bottom: auto, @left:auto);
right: 18px; .size(@w: 42px, @h: 42px);
top: 189px;
width: 42px;
height: 42px;
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png"); background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
background-size: 42px 42px; background-size: 42px 42px;
background-position: center center; background-position: center center;

9
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShow.module.less
View File

@@ -1,4 +1,5 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.popularShow { .popularShow {
padding: 60px 0px 0px 60px; padding: 60px 0px 0px 60px;
@@ -19,9 +20,8 @@
} }
.addItem { .addItem {
width: 198px; .size(@w: 198px, @h: 438px);
height: 438px; background-color: @COLOR_WHITE;
background-color: #fff;
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
border-radius: 12px; border-radius: 12px;
background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg"); background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg");
@@ -32,8 +32,7 @@
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .border-solid(@size:4px, @color:@PRIMARY_COLOR_RED);
box-sizing: border-box;
border-radius: 12px; border-radius: 12px;
background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg"); background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg");
} }

78
com.twin.app.shoptime/src/views/HomePanel/PopularShow/PopularShowItem/PopularShowItem.module.less
View File

@@ -1,49 +1,40 @@
@import "../../../../style/CommonStyle.module.less"; @import "../../../../style/CommonStyle.module.less";
@import "../../../../style/utils.module.less";
.listItem { .listItem {
width: 546px; .size(@w:546px,@h:438px);
height: 438px;
padding: 14px; padding: 14px;
background-color: @COLOR_WHITE; background-color: @COLOR_WHITE;
border-radius: 12px; border-radius: 12px;
border: solid 1px @COLOR_GRAY02; .border-solid(@size:4px,@color:transparent);
box-sizing: border-box;
font-weight: bold; font-weight: bold;
font-family: "LGSmartUIBold"; font-family: @baseFontBold;
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; position: relative;
box-sizing: border-box;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box; box-sizing: border-box;
.focusDropShadow(); .focused(@boxShadow: 22px, @borderRadius: 12px);
} }
> img { > img {
width: 510px; .size(@w:510px,@h:288px);
height: 288px;
object-fit: contain; object-fit: contain;
} }
.horizonItem { .horizonItem {
width: 510px; .size(@w:510px,@h:61px);
height: 61px;
margin-top: 38px; margin-top: 38px;
color: #333; color: #333;
font-size: 24px; font-size: 24px;
text-overflow: ellipsis; .elip(@clamp:2);
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
display: flex; display: flex;
} }
.logo { .logo {
display: inline-block; display: inline-block;
width: 60px; .size(@w:60px,@h:60px);
height: 60px;
margin-right: 12px; margin-right: 12px;
.logoPath { .logoPath {
width: 100%; width: 100%;
@@ -54,58 +45,42 @@
display: inline-block; display: inline-block;
color: #333; color: #333;
font-size: 24px; font-size: 24px;
text-overflow: ellipsis; .elip(@clamp:2);
overflow: hidden; .size(@w:438px,@h:61px);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: 438px;
height: 61px;
} }
} }
.listItemVertical { .listItemVertical {
display: flex; display: flex;
width: 546px; .size(@w:546px,@h:438px);
height: 438px; padding: 14px;
padding: 18px;
background-color: @COLOR_WHITE; background-color: @COLOR_WHITE;
border-radius: 12px; border-radius: 12px;
border: solid 1px @COLOR_GRAY02;
box-sizing: border-box;
margin-right: 18px; margin-right: 18px;
border: 4px solid transparent; .border-solid(@size:4px,@color:transparent);
box-sizing: border-box;
font-weight: bold; font-weight: bold;
font-family: "LGSmartUIBold"; font-family: @baseFontBold;
&:focus, &:focus,
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box; box-sizing: border-box;
.focusDropShadow(); .focused(@boxShadow: 22px, @borderRadius: 12px);
} }
> img { > img {
width: 228px; .size(@w:228px,@h:402px);
height: 402px;
object-fit: contain; object-fit: contain;
} }
.verticalItem { .verticalItem {
margin-left: 11px; margin-left: 11px;
color: #333; color: #333;
font-size: 24px; font-size: 24px;
width: 270px; .size(@w:270px,@h:402px);
height: 402px; .elip(@clamp:12);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 12;
} }
.logo { .logo {
display: block; display: block;
width: 60px; .size(@w:60px,@h:60px);
height: 60px;
margin-right: 12px; margin-right: 12px;
.logoPath { .logoPath {
width: 100%; width: 100%;
@@ -116,12 +91,7 @@
margin-left: 11px; margin-left: 11px;
color: #333; color: #333;
font-size: 24px; font-size: 24px;
width: 270px; .size(@w:270px,@h:402px);
height: 402px; .elip(@clamp:12);
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 12;
} }
} }

1
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.jsx
View File

@@ -27,7 +27,6 @@ import css from '../../HomePanel/SubCategory/SubCategory.module.less';
const SpottableComponent = Spottable("div"); const SpottableComponent = Spottable("div");
const Container = SpotlightContainerDecorator( const Container = SpotlightContainerDecorator(
{ {
leaveFor: { left: "", right: "" },
enterTo: "last-focused", enterTo: "last-focused",
}, },
"div" "div"

15
com.twin.app.shoptime/src/views/HomePanel/SubCategory/SubCategory.module.less
View File

@@ -1,10 +1,12 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less";
.home { .home {
padding: 20px 0px 0 60px; padding: 20px 0px 0 60px;
justify-content: unset; justify-content: unset;
align-items: unset; align-items: unset;
flex-direction: unset; flex-direction: unset;
background-color: #f2f2f2; background-color: @BG_COLOR_02;
border: 1px solid #dadada; border: 1px solid #dadada;
width: 100%; width: 100%;
} }
@@ -21,10 +23,9 @@
} }
.addItem { .addItem {
width: 198px; .size(@w: 198px, @h: 438px);
height: 438px; background-color: @COLOR_WHITE;
background-color: #fff; .border-solid(@size:1px, @color:#e4e4e4);
border: 1px solid #e4e4e4;
border-radius: 12px; border-radius: 12px;
background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg"); background-image: url("../../../../assets/icon/button_icon/ic-more-nor.svg");
background-size: 66px 66px; background-size: 66px 66px;
@@ -34,9 +35,7 @@
&:hover, &:hover,
&:focus-within, &:focus-within,
&:active { &:active {
border: 4px solid @PRIMARY_COLOR_RED; .focused(@boxShadow: 22px, @borderRadius: 12px);
box-sizing: border-box;
border-radius: 12px;
background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg"); background-image: url("../../../../assets/icon/button_icon/ic-more-sel.svg");
} }
} }