[홈패널] 랜돔 수정 / LIVE, 투데이즈딜, 이미지 배너 컴포넌트 제커

com.twin.app.shoptime/src/views/HomePanel/HomeBanner/RandomUnit.module.less

@@ -0,0 +1,129 @@
+@import "../../../style/CommonStyle.module.less";
+@import "../../../style/utils.module.less";
+
+.rollingWrap {
+  position: relative;
+  .itemBox {
+    .size(@w: 486px, @h: 858px);
+    position: relative;
+    text-align: center;
+    .textBox {
+      .size(@w: 100%, @h: 80px);
+      .elip(@clamp:2);
+      font-weight: bold;
+      font-size: 30px;
+      color: @COLOR_GRAY06;
+      line-height: 1.27;
+      margin-bottom: 6px;
+    }
+
+    .accBox {
+      .size(@w: 100%, @h: 50px);
+      font-weight: bold;
+      font-size: 42px;
+      color: @PRIMARY_COLOR_RED;
+      line-height: 1.14;
+    }
+    .saleAccBox {
+      font-weight: normal;
+      font-size: 24px;
+      color: @COLOR_GRAY04;
+      vertical-align: middle;
+      text-decoration: line-through;
+      margin-left: 9px;
+      width: 100%;
+    }
+    .itemImgBox {
+      > img {
+        .size(@w: 354px, @h: 354px);
+      }
+    }
+    .brandIcon {
+      overflow: hidden;
+      position: absolute;
+      right: 30px;
+      bottom: 30px;
+    }
+    .liveIcon {
+      z-index: 2;
+      position: absolute;
+      left: 18px;
+      top: 18px;
+    }
+    .imgBanner {
+      > img {
+        border-radius: 12px;
+        .size(@w: 486px, @h: 858px);
+      }
+    }
+    &.isHorizontal {
+      .size(@w: 744px, @h: 420px);
+      .imgBanner {
+        > img {
+          .size(@w: 744px, @h: 420px);
+        }
+      }
+    }
+    &.todaysDeals {
+      background-image: url(../../../../assets/images/img_home_banner_td_ver.png);
+      background-size: 486px 858px;
+      background-position: left top;
+      border-radius: 12px;
+      padding: 268px 36px 0;
+      img {
+        width: 100%;
+        object-fit: contain;
+      }
+
+      &.isHorizontal {
+        background-image: url(../../../../assets/images/img_home_banner_td_hor.png);
+        background-size: 744px 420px;
+        background-position: center center;
+        display: flex;
+        padding: 0 30px 0 0;
+        > div {
+          flex: none;
+        }
+        .textBox {
+          .size(@w: 294px, @h: 80px);
+          margin: 234px 0 5px 50px;
+          text-align: left;
+        }
+        .accBox {
+          .size(@w: 320px, @h: 50px);
+          margin-left: 50px;
+          text-align: left;
+        }
+        .saleAccBox {
+          color: #767676;
+          display: block;
+          text-align: left;
+          margin: 5px 0 0 55px;
+        }
+
+        .itemImgBox {
+          margin: 47px 0 0 8px;
+          > img {
+            .size(@w: 324px, @h: 324px);
+          }
+        }
+      }
+    }
+    &:focus {
+      &::after {
+        .focused(@boxShadow:22px, @borderRadius: 12px);
+      }
+    }
+  }
+
+  &.isHorizontalWrap {
+    .arrow {
+      &.leftBtn {
+        .position(@position: absolute, @top: 189px, @left: 18px);
+      }
+      &.rightBtn {
+        .position(@position: absolute, @top: 189px, @right: 18px);
+      }
+    }
+  }
+}