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

[HomePanel] 홈패널 상단 배너

Browse Source 
Detail Notes :
 
1. 불필요한 코드 삭제 및 스타일 재정리
This commit is contained in:
jangheon Pyo
2024-02-16 17:38:06 +09:00
parent da8e2fae1a
commit 02086fbba9
9 changed files with 234 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate1.jsx
View File

@@ -77,16 +77,12 @@ export default function HomeBannerTemplate1() {
<div className={css.mainBox}> <div className={css.mainBox}>
<div className={css.dualBox}> <div className={css.dualBox}>
{/* 배너1 */} {/* 배너1 */}
<div <div className={css.smallBox} onKeyDown={keyDown}>
className={classNames(css.videoBox, css.topBox)}
onKeyDown={keyDown}
>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" && return item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling
className={css.smallBox}
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
@@ -95,7 +91,6 @@ export default function HomeBannerTemplate1() {
) : item.banrLctnNo === "1" && ) : item.banrLctnNo === "1" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random <Random
className={css.smallBox}
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
@@ -104,7 +99,6 @@ export default function HomeBannerTemplate1() {
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
className={css.smallBox}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={wdthImage1} src={wdthImage1}
@@ -114,30 +108,22 @@ export default function HomeBannerTemplate1() {
</div> </div>
{/* 배너2 */} {/* 배너2 */}
<div className={classNames(css.videoBox, css.underBox)}> <div className={css.smallBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "2" && return item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling
className={css.smallBox}
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
imageType={true} imageType={true}
// spotlightId={"roll02"}
/> />
) : item.banrLctnNo === "2" && ) : item.banrLctnNo === "2" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random <Random bannerData={item} key={index} imageType={true} />
className={css.smallBox}
bannerData={item}
key={index}
imageType={true}
/>
) : ( ) : (
<CustomImage <CustomImage
className={css.smallBox}
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
@@ -149,7 +135,7 @@ export default function HomeBannerTemplate1() {
</div> </div>
{/* 배너3 */} {/* 배너3 */}
<SpottableComponent className={classNames(css.imgBox, css.mr18)}> <div className={css.imgBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" && return item.banrLctnNo === "3" &&
@@ -177,10 +163,10 @@ export default function HomeBannerTemplate1() {
/> />
); );
})} })}
</SpottableComponent> </div>
{/* 배너4 */} {/* 배너4 */}
<SpottableComponent className={classNames(css.imgBox)}> <div className={css.imgBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" && return item.banrLctnNo === "4" &&
@@ -208,7 +194,7 @@ export default function HomeBannerTemplate1() {
/> />
); );
})} })}
</SpottableComponent> </div>
</div> </div>
</div> </div>
</Container> </Container>

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

@@ -1,10 +1,6 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less"; @import "../../../style/utils.module.less";
.container {
background-color: @BG_COLOR_01;
}
.homeTemplateBox { .homeTemplateBox {
padding: 24px; padding: 24px;
img, img,
@@ -12,144 +8,44 @@
.size(@w: 100%, @h: 100%); .size(@w: 100%, @h: 100%);
object-fit: cover; object-fit: cover;
} }
}
.leftBannerBox { .mainBox {
.size(@w: 744px, @h: 858px); display: flex;
&.dualBox { justify-content: space-between;
.topBox {
.size(@w: 744px, @h: 420px); .dualBox {
.border-solid(@size:4px, @color:transparent); .size(@w: 744px, @h: 858px);
margin-bottom: 18px; display: flex;
border-radius: 12px; justify-content: space-between;
overflow: hidden; flex-direction: column;
&:focus, .smallBox {
&:focus-within { .size(@w: 744px, @h: 420px);
.focused(@boxShadow: 22px, @borderRadius: 12px); border-radius: 12px;
position: unset; position: relative;
> img {
border-radius: 12px;
}
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
} }
} }
.underBox {
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
overflow: hidden;
&:focus,
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
}
}
}
.videoBox {
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
margin: 0 18px 18px 0;
border-radius: 12px;
overflow: hidden;
// &:focus,
// &:focus-within {
// .focused(@boxShadow: 22px, @borderRadius: 12px);
// position: unset;
// }
.videoPlayer {
.size(@w: 744px, @h: 420px);
outline: "teal dashed 1px";
transform: "scale(1)";
border-radius: 12px;
}
}
.banner02 { .imgBox {
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
box-sizing: border-box;
&:focus,
&:focus-within {
border: 4px solid @PRIMARY_COLOR_RED;
box-sizing: border-box;
.focusDropShadow();
border-radius: 12px;
}
}
.banner03 {
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
margin-right: 18px;
&:focus,
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
}
.banner04 {
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
&:focus,
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
}
.bannerFlexCol {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bannerFlexRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mainBox {
display: flex;
justify-content: space-between;
}
.mainBox {
display: flex;
.imgBox {
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
margin-right: 18px;
border-radius: 12px;
overflow: hidden;
&:focus,
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
> img {
.size(@w: 486px, @h: 858px); .size(@w: 486px, @h: 858px);
object-fit: contain; position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
} }
} }
} }

130
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate2.jsx
View File

@@ -73,7 +73,7 @@ export default function HomeBannerTemplate2() {
<div className={css.homeTemplateBox}> <div className={css.homeTemplateBox}>
<div className={css.mainBox}> <div className={css.mainBox}>
{/* 배너1 */} {/* 배너1 */}
<SpottableComponent className={classNames(css.longBanner, css.mr18)}> <div className={css.imgBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" && return item.banrLctnNo === "1" &&
@@ -101,76 +101,74 @@ export default function HomeBannerTemplate2() {
/> />
); );
})} })}
</SpottableComponent> </div>
<div className={classNames(css.dualBox, css.mr18)}> <div className={css.dualBox}>
<div className={css.dualBox}> {/* 배너2 */}
{/* 배너2 */} <div className={css.smallBox}>
<SpottableComponent className={css.smallBox}> {bannerInfos &&
{bannerInfos && bannerInfos.map((item, index) => {
bannerInfos.map((item, index) => { return item.banrLctnNo === "2" &&
return item.banrLctnNo === "2" && item.shptmDspyTpNm == "Rolling" ? (
item.shptmDspyTpNm == "Rolling" ? ( <Rolling
<Rolling bannerData={item}
bannerData={item} index={index}
index={index} key={index}
key={index} imageType={true}
imageType={true} />
/> ) : item.banrLctnNo === "2" &&
) : item.banrLctnNo === "2" && item.shptmDspyTpNm == "Random" ? (
item.shptmDspyTpNm == "Random" ? ( <Random
<Random bannerData={item}
bannerData={item} index={index}
index={index} key={index}
key={index} imageType={true}
imageType={true} />
/> ) : (
) : ( <CustomImage
<CustomImage key={index}
key={index} onClickBanner={onClickBanner}
onClickBanner={onClickBanner} delay={0}
delay={0} src={wdthImage1}
src={wdthImage1} />
/> );
); })}
})} </div>
</SpottableComponent>
{/* 배너3 */} {/* 배너3 */}
<SpottableComponent className={css.smallBox}> <div className={css.smallBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" && return item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Rolling" ? ( item.shptmDspyTpNm == "Rolling" ? (
<Rolling <Rolling
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
imageType={true} imageType={true}
/> />
) : item.banrLctnNo === "3" && ) : item.banrLctnNo === "3" &&
item.shptmDspyTpNm == "Random" ? ( item.shptmDspyTpNm == "Random" ? (
<Random <Random
bannerData={item} bannerData={item}
index={index} index={index}
key={index} key={index}
imageType={true} imageType={true}
/> />
) : ( ) : (
<CustomImage <CustomImage
key={index} key={index}
onClickBanner={onClickBanner} onClickBanner={onClickBanner}
delay={0} delay={0}
src={wdthImage2} src={wdthImage2}
/> />
); );
})} })}
</SpottableComponent>
</div> </div>
</div> </div>
{/* 배너4 */} {/* 배너4 */}
<SpottableComponent className={css.longBanner}> <div className={css.imgBox}>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" && return item.banrLctnNo === "4" &&
@@ -198,7 +196,7 @@ export default function HomeBannerTemplate2() {
/> />
); );
})} })}
</SpottableComponent> </div>
</div> </div>
</div> </div>
</Container> </Container>

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

@@ -1,121 +1,52 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less"; @import "../../../style/utils.module.less";
.container { .homeTemplateBox {
background-color: @BG_COLOR_01; padding: 24px;
.homeTemplateBox { img,
margin: 24px 24px 0px; video {
.mainBox { .size(@w: 100%, @h: 100%);
display: flex; object-fit: cover;
img, }
video {
.size(@w: 100%, @h: 100%);
object-fit: cover;
}
.longBanner {
position: relative;
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
overflow: hidden;
&:focus,
&:active,
&:hover,
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
&.rollingBox {
position: relative;
.rightBtn {
.position(@position: absolute, @top: 408px, @right: 18px, @bottom: auto, @left: auto);
z-index: 1;
.size(@w: 42px, @h: 42px);
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
.position(@position: absolute, @top: 408px, @right: auto, @bottom: auto, @left: 18px);
z-index: 1;
.size(@w: 42px, @h: 42px);
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus,
&:active,
&:hover,
&:focus-within {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
}
}
.dualBox {
.smallBox {
.size(@w: 744px, @h: 420px);
border-radius: 12px;
.border-solid(@size:4px, @color:transparent);
overflow: hidden;
&:focus, .mainBox {
&:active, display: flex;
&:hover, justify-content: space-between;
&:focus-within {
.focused(@boxShadow: 22px, @borderRadius: 12px); .dualBox {
position: unset; .size(@w: 744px, @h: 858px);
} display: flex;
&:nth-child(1) { justify-content: space-between;
margin-bottom: 18px; flex-direction: column;
} .smallBox {
&.rollingBox { .size(@w: 744px, @h: 420px);
position: relative; border-radius: 12px;
.rightBtn { position: relative;
.position(@position: absolute, @top: 190px, @right: 18px, @bottom: auto, @left: auto); > img {
z-index: 1; border-radius: 12px;
.size(@w: 42px, @h: 42px); }
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-nor.svg"); &:focus {
background-size: 42px 42px; &::after {
background-repeat: no-repeat; .focused(@boxShadow:22px, @borderRadius:12px);
&:focus-within,
&:focus {
background-image: url("../../../../assets/button/42x42/btn-prev-thumb-foc.svg");
}
}
.leftBtn {
.position(@position: absolute, @top: 190px, @right: auto, @bottom: auto, @left: 18px);
z-index: 1;
.size(@w: 42px, @h: 42px);
background-image: url("../../../../assets/button/42x42/btn-next-thumb-nor.svg");
background-size: 42px 42px;
background-repeat: no-repeat;
&:focus-within,
&:focus {
background-image: url("../../../../assets/button/42x42/btn-next-thumb-foc.svg");
}
}
} }
} }
} }
} }
}
/* margin전용 */ .imgBox {
.mt18 { .size(@w: 486px, @h: 858px);
margin-top: 18px; position: relative;
}
.ml18 { &:focus {
margin-left: 18px; &::after {
} .focused(@boxShadow:22px, @borderRadius:12px);
.mr18 { }
margin-right: 18px; }
} > img {
.mb18 { .size(@w: 486px, @h: 858px);
margin-bottom: 18px; border-radius: 12px;
object-fit: contain;
}
}
} }
} }

22
com.twin.app.shoptime/src/views/HomePanel/HomeBanner/HomeBannerTemplate3.jsx
View File

@@ -89,7 +89,7 @@ export default function HomeBannerTemplate3() {
<div className={css.mainBox}> <div className={css.mainBox}>
{/* 배너1 */} {/* 배너1 */}
<SpottableComponent className={css.imgBox} spotlightId="banner01"> <div className={css.imgBox} spotlightId="banner01">
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "1" && return item.banrLctnNo === "1" &&
@@ -116,10 +116,10 @@ export default function HomeBannerTemplate3() {
/> />
); );
})} })}
</SpottableComponent> </div>
{/* 배너2 */} {/* 배너2 */}
<SpottableComponent <div
className={css.imgBox} className={css.imgBox}
spotlightId="banner02" spotlightId="banner02"
onFocus={_onFocus} onFocus={_onFocus}
@@ -152,15 +152,12 @@ export default function HomeBannerTemplate3() {
/> />
); );
})} })}
</SpottableComponent> </div>
<div className={css.dualBox}> <div className={css.dualBox}>
{/* 배너3 */} {/* 배너3 */}
<SpottableComponent <div className={css.smallBox} spotlightId="banner03">
className={classNames(css.videoBox, css.topBox)}
spotlightId="banner03"
>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "3" && return item.banrLctnNo === "3" &&
@@ -188,13 +185,10 @@ export default function HomeBannerTemplate3() {
/> />
); );
})} })}
</SpottableComponent> </div>
{/* 배너4 */} {/* 배너4 */}
<SpottableComponent <div className={css.smallBox} spotlightId="banner04">
className={classNames(css.videoBox, css.underBox)}
spotlightId="banner04"
>
{bannerInfos && {bannerInfos &&
bannerInfos.map((item, index) => { bannerInfos.map((item, index) => {
return item.banrLctnNo === "4" && return item.banrLctnNo === "4" &&
@@ -222,7 +216,7 @@ export default function HomeBannerTemplate3() {
/> />
); );
})} })}
</SpottableComponent> </div>
</div> </div>
</div> </div>
</Container> </Container>

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

@@ -1,165 +1,51 @@
@import "../../../style/CommonStyle.module.less"; @import "../../../style/CommonStyle.module.less";
@import "../../../style/utils.module.less"; @import "../../../style/utils.module.less";
.container {
background-color: @BG_COLOR_01;
display: flex;
}
.homeTemplateBox { .homeTemplateBox {
margin: 24px 24px 0px; padding: 24px;
display: flex;
img, img,
video { video {
.size(@w: 100%, @h: 100%); .size(@w: 100%, @h: 100%);
object-fit: cover; object-fit: cover;
} }
}
.leftBannerBox { .mainBox {
.size(@w: 744px, @h: 858px); display: flex;
margin-right: 18px; justify-content: space-between;
&.dualBox {
position: relative; .dualBox {
.topBox { .size(@w: 744px, @h: 858px);
.size(@w: 744px, @h: 420px); display: flex;
.border-solid(@size:4px, @color:transparent); justify-content: space-between;
margin-bottom: 18px; flex-direction: column;
border-radius: 12px; .smallBox {
&:focus, .size(@w: 744px, @h: 420px);
&:hover, border-radius: 12px;
&:focus-within, position: relative;
&:active { > img {
.focused(@boxShadow: 22px, @borderRadius: 12px); border-radius: 12px;
position: unset; }
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
} }
} }
.underBox {
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
&:focus,
&:hover,
&:focus-within,
&:active {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
}
}
}
.videoBox {
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
margin: 0 18px 18px 0;
&:focus,
&:hover,
&:focus-within,
&:active {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
.videoPlayer {
.size(@w: 744px, @h: 420px);
outline: "teal dashed 1px";
transform: "scale(1)";
border-radius: 12px;
}
}
.banner02 { .imgBox {
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
&:focus,
&:hover,
&:focus-within,
&:active {
.focused(@boxShadow: 22px, @borderRadius: 12px);
}
}
.banner03 {
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px;
margin-right: 18px;
&:focus,
&:hover,
&:focus-within,
&:active {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
}
.banner04 {
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
box-sizing: border-box;
&:focus,
&:hover,
&:focus-within,
&:active {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
}
.bannerFlexCol {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.bannerFlexRow {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.mainBox {
display: flex;
}
.mainBox {
display: flex;
position: relative;
.imgBox {
.size(@w: 486px, @h: 858px);
.border-solid(@size:4px, @color:transparent);
margin-right: 18px;
border-radius: 12px;
overflow: hidden;
&:focus,
&:hover,
&:focus-within,
&:active {
.focused(@boxShadow: 22px, @borderRadius: 12px);
position: unset;
}
> img {
.size(@w: 486px, @h: 858px); .size(@w: 486px, @h: 858px);
object-fit: contain; position: relative;
&:focus {
&::after {
.focused(@boxShadow:22px, @borderRadius:12px);
}
}
> img {
.size(@w: 486px, @h: 858px);
border-radius: 12px;
object-fit: contain;
}
} }
} }
} }

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

@@ -2,8 +2,7 @@
@import "../../style/utils.module.less"; @import "../../style/utils.module.less";
.panel { .panel {
overflow-y: auto; background-color: @BG_COLOR_01;
background-color: #f8f8f8;
} }
.tBody { .tBody {

7
com.twin.app.shoptime/src/views/HomePanel/HomeTodayDeal/HomeTodayDeal.jsx
View File

@@ -61,7 +61,12 @@ export default function HomeTodayDeal({
useEffect(() => {}); useEffect(() => {});
return ( return (
<div className={css.rollingWrap}> <div
className={classNames(
css.rollingWrap,
isHorizontal && css.isHorizontalWrap
)}
>
{rolling === true && ( {rolling === true && (
<SpottableComponent <SpottableComponent
className={classNames(css.arrow, css.leftBtn)} className={classNames(css.arrow, css.leftBtn)}

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

@@ -3,110 +3,113 @@
.rollingWrap { .rollingWrap {
position: relative; position: relative;
.itemBox { .itemBox {
.size(@w: 486px, @h: 858px);
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-size: 486px 858px; background-size: 486px 858px;
background-position: center center; background-position: left top;
.size(@w: 744px, @h: 420px);
.border-solid(@size:4px, @color:transparent);
border-radius: 12px; border-radius: 12px;
position: relative; position: relative;
padding: 268px 36px 0;
img { img {
width: 100%; width: 100%;
object-fit: contain; object-fit: contain;
} }
text-align: center;
.textBox { .textBox {
margin: 268px 36px 0; .size(@w: 100%, @h: 80px);
.size(@w: 406px, @h: 80px);
.elip(@clamp:2); .elip(@clamp:2);
font-weight: bold;
.font (@fontFamily:@baseFontBold, @fontSize:30px); .font (@fontFamily:@baseFontBold, @fontSize:30px);
color: @COLOR_GRAY06; color: @COLOR_GRAY06;
line-height: 1.27; line-height: 1.27;
margin-bottom: 6px;
} }
.accBox { .accBox {
.size(@w: 406px, @h: 50px); .size(@w: 100%, @h: 50px);
margin: 6px 36px 0;
text-align: center;
.font (@fontFamily:@baseFontBold, @fontSize:42px); .font (@fontFamily:@baseFontBold, @fontSize:42px);
color: @PRIMARY_COLOR_RED; color: @PRIMARY_COLOR_RED;
font-weight: bold;
line-height: 1.14; line-height: 1.14;
margin-bottom: 35px;
.saleAccBox { .saleAccBox {
.font (@fontFamily:@baseFontBold, @fontSize:24px); .font (@fontFamily:@baseFont, @fontSize:24px);
color: @COLOR_GRAY04; color: @COLOR_GRAY04;
vertical-align: middle; vertical-align: middle;
text-decoration: line-through; text-decoration: line-through;
margin-left: 9px;
} }
} }
.itemImgBox { .itemImgBox {
margin: 29px 62px 60px;
.size(@w: 354px, @h: 354px);
> img { > img {
width: 100%; .size(@w: 354px, @h: 354px);
} }
} }
&.isHorizontal { &.isHorizontal {
.size(@w: 744px, @h: 420px);
background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png); background-image: url(../../../../assets/images/mainTemplate/img_home_banner_td_hor.png);
background-size: 744px 420px; background-size: 744px 420px;
background-position: center center;
display: flex; display: flex;
padding: 0 30px 0 0;
> div { > div {
flex: none; flex: none;
} }
.textBox { .textBox {
margin: 230px 8px 0 46px; .size(@w: 294px, @h: 80px);
.size(@w: 320px, @h: 80px); margin: 234px 0 5px 50px;
.elip(@clamp:2); .elip(@clamp:2);
font-weight: bold; text-align: left;
.font (@fontFamily:@baseFontBold, @fontSize:30px);
color: @COLOR_GRAY06;
line-height: 1.27;
} }
.accBox { .accBox {
.size(@w: 320px, @h: 50px); .size(@w: 320px, @h: 50px);
margin: 6px 8px 0 46px; margin-left: 50px;
text-align: left; text-align: left;
.saleAccBox { .saleAccBox {
color: #767676; color: #767676;
} }
} }
.itemImgBox { .itemImgBox {
margin: 44px 26px 44px 0; margin: 47px 0 0 8px;
.size(@w: 324px, @h: 324px); > img {
.size(@w: 324px, @h: 324px);
}
} }
} }
} }
&:focus-within,
&:focus { &:focus {
&::after { &::after {
.focused(@borderRadius: 12px); .focused(@borderRadius: 12px);
} }
} }
.arrow { .arrow {
z-index: 10; z-index: 10;
.size(@w: 42px, @h: 42px); .size(@w: 42px, @h: 42px);
background-size: 42px 42px; background-size: 42px 42px;
background-position: center center; background-position: center center;
&.leftBtn { &.leftBtn {
.position(@position: absolute, @top: 200px, @left: 18px); .position(@position: absolute, @top: 429px, @left: 18px);
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png"); background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_nor.png");
&:focus, &:focus {
&:focus-within {
background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png"); background-image: url("../../../../assets/icon/button_icon/btn_prev_thumb_foc.png");
} }
} }
&.rightBtn { &.rightBtn {
.position(@position: absolute, @top: 200px, @right: 18px); .position(@position: absolute, @top: 429px, @right: 18px);
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png"); background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_nor.png");
&:focus, &:focus {
&:focus-within {
background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png"); background-image: url("../../../../assets/icon/button_icon/btn_next_thumb_foc.png");
} }
} }
} }
&.isHorizontalWrap {
.arrow {
&.leftBtn {
.position(@position: absolute, @top: 189px, @left: 18px);
}
&.rightBtn {
.position(@position: absolute, @top: 189px, @right: 18px);
}
}
}
} }