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

[SHOPTIME-3414] Coupon 제목에서 g, p 등의 글자가 잘려서 표시됨

Browse Source 
Changed files:
1. SingleOption.jsx
2. SingleOption.module.less

Detail note:
1. Modify HTML structure in the renderItem function
2. Modify "display", "height", "line-height"...etc properties
This commit is contained in:
younghoon100.park
2024-09-27 12:37:22 +09:00
parent 3e4bc9bf9a
commit 93b9d82f71
2 changed files with 57 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.jsx
View File

@@ -591,29 +591,34 @@ export default function SingleOption({
" off"
}
>
{shptmDcTpCd === "CPN00401" && (
<span className={css.couponLate}>{`${dcAmt}${currSign}`}</span>
)}
{shptmDcTpCd === "CPN00402" && (
<span className={css.couponLate}>{`${cpnDctrt}%`}</span>
)}
<div className={css.couponTopContents}>
{shptmDcTpCd === "CPN00401" && (
<span className={css.couponLate}>{`${dcAmt}${currSign}`}</span>
)}
{shptmDcTpCd === "CPN00402" && (
<span className={css.couponLate}>{`${cpnDctrt}%`}</span>
)}
<span className={css.title} aria-label={cpnTtl}>
{cpnTtl}
</span>
</div>
<div className={css.couponMiddleContents}>
<span>
{$L(
"Purchase over ${cpnAplyMinPurcAmt} (up to ${cpnAplyMaxDcAmt} off)"
)
.replace("{cpnAplyMinPurcAmt}", cpnAplyMinPurcAmt)
.replace("{cpnAplyMaxDcAmt}", cpnAplyMaxDcAmt)}
</span>
<span className={classNames(css.content, css.date)}>
{couponAplyStartDate}~{couponAplyEndDate}
</span>
</div>
<span className={css.title} aria-label={cpnTtl}>
{cpnTtl}
</span>
<span className={css.content}>
{$L(
"Purchase over ${cpnAplyMinPurcAmt} (up to ${cpnAplyMaxDcAmt} off)"
)
.replace("{cpnAplyMinPurcAmt}", cpnAplyMinPurcAmt)
.replace("{cpnAplyMaxDcAmt}", cpnAplyMaxDcAmt)}
</span>
<span className={classNames(css.content, css.date)}>
{couponAplyStartDate}~{couponAplyEndDate}
</span>
<div
className={classNames(
css.couponBtn,
css.couponBottomButton,
downloadCouponArr.length > 0 &&
downloadCouponArr.includes(cpnSno) &&
css.disable,

51
com.twin.app.shoptime/src/views/DetailPanel/SingleProduct/SingleOption.module.less
View File

@@ -267,7 +267,6 @@
}
}
.couponContainer {
.flex(@direction:column);
position: relative;
&:focus {
@@ -277,7 +276,7 @@
}
.couponItem {
.flex(@direction:column,@justifyCenter:space-between);
.flex(@direction: column, @justifyCenter: space-between);
.size(@w: 440px , @h: 320px);
text-align: center;
background: @COLOR_WHITE;
@@ -286,33 +285,47 @@
border-radius: 10px;
.border-solid(@size:1px,@color:@COLOR_GRAY02);
.couponLate {
font-weight: bold;
font-size: 36px;
color: @PRIMARY_COLOR_RED;
line-height: 42px;
.couponTopContents {
.couponLate {
font-weight: bold;
font-size: 36px;
color: @PRIMARY_COLOR_RED;
line-height: 1.1;
height: 40px;
}
.title {
font-weight: bold;
font-size: 36px;
line-height: 1.1;
color: @COLOR_GRAY07;
width: 400px;
height: 40px;
.elip(1);
}
}
.title {
font-weight: bold;
font-size: 36px;
line-height: 42px;
color: @COLOR_GRAY07;
margin-bottom: 25px;
width: 400px;
.elip(1);
}
.content {
.couponMiddleContents {
.flex(@direction: column, @justifyCenter: space-between);
font-weight: normal;
font-size: 24px;
color: @COLOR_GRAY03;
> span {
min-height: 30px;
&:nth-child(1) {
margin-bottom: 10px;
}
}
}
.couponBtn {
.couponBottomButton {
.flex();
.size(@w: 380px , @h: 60px);
border-radius: 6px;
background-color: #808080;
color: #fff;
margin-top: 18px;
z-index: 1;
font-weight: bold;