TGrid, TItemCard 제작 / SearchPanel style 수정 필요

2024-01-29 13:52:44 +09:00
parent e39e8230d0
commit 395c49ef17
8 changed files with 221 additions and 21 deletions
--- a/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
+++ b/com.twin.app.shoptime/src/components/TItemCard/TItemCard.module.less
@@ -0,0 +1,72 @@
+@import "../../style/CommonStyle.module.less";
+@import "../../style/utils.module.less";
+
+.container {
+  .size(@w: 324px, @h: 438px);
+  padding: 18px;
+  border-radius: 12px;
+  border: 1px solid @COLOR_GRAY02;
+  background-color: @COLOR_WHITE;
+
+  &:focus-within {
+    border: 4px solid @PRIMARY_COLOR_RED;
+    box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.5);
+  }
+
+  .imageContainer {
+    width: 288px;
+    height: 288px;
+    overflow: hidden;
+    position: relative;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+
+    .discountBanner {
+      position: absolute;
+      .flex();
+      width: 60px;
+      height: 60px;
+      bottom: 12px;
+      right: 12px;
+      background-color: @PRIMARY_COLOR_RED;
+      color: @COLOR_WHITE;
+      border-radius: 50%;
+      padding: 5px 10px;
+      font-size: 26px;
+    }
+  }
+
+  .descContainer {
+    .productName {
+      font-family: @baseFontBold;
+      font-size: 24px;
+      color: @COLOR_GRAY06;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-top: 14px;
+    }
+
+    .priceInfo {
+      margin: 9px 0 12px 0;
+      font-size: 30px;
+      font-family: @baseFontBold;
+      color: @PRIMARY_COLOR_RED;
+
+      .originalPrice {
+        font-family: @baseFont;
+        margin-left: 5px;
+        text-decoration: line-through;
+        color: @COLOR_GRAY04;
+        font-size: 18px;
+      }
+    }
+  }
+}