feat(about): mobile 화면 구현

Nexters · Oct 4, 2021 · 128ca46 · 128ca46
1 parent 2190a91
commit 128ca46
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 43 deletions.
diff --git a/components/about/activity/card.vue b/components/about/activity/card.vue
@@ -31,7 +31,7 @@ export default ActivityCard;
     border-radius: 16px;
     width: 576px;
     height: 324px;
-    background: black;
+    background: rgba(0, 0, 0, 0.5);
     .contents {
       padding: 32px;
       display: flex;
@@ -65,7 +65,7 @@ export default ActivityCard;
     border-radius: 16px;
     width: calc(50% - 24px);
     height: 324px;
-    background: black;
+    background: rgba(0, 0, 0, 0.5);
     .contents {
       padding: 32px;
       display: flex;
@@ -96,6 +96,34 @@ export default ActivityCard;
 @include mobile {
   .activity-container {
     border-radius: 8px;
+    width: 100%;
+    height: 184px;
+    background: rgba(0, 0, 0, 0.5);
+    .contents {
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      height: calc(100% - 48px);
+      .description {
+        white-space: pre-wrap;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 24px;
+        line-height: 36px;
+        letter-spacing: -0.02em;
+
+        color: #ffffff;
+      }
+      .title {
+        margin-top: auto;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 21px;
+        letter-spacing: -0.02em;
+        color: #ffffff;
+      }
+    }
   }
 }
 </style>
diff --git a/components/about/info/card.vue b/components/about/info/card.vue
@@ -99,13 +99,36 @@ export default InfoCard;
 }
 @include mobile {
   .info-container {
-    border-radius: 8px;
+    flex: 0 0 auto;
+    border-radius: 16px;
+    width: 240px;
+    height: 149px;
+    background: #f6f6f6;
     .contents {
-      padding: 16px;
+      padding: 24px;
       .title {
         font-size: 16px;
+        line-height: 24px;
         font-weight: bold;
-        margin-bottom: 8px;
+        margin-bottom: 4px;
+        letter-spacing: -0.02em;
+      }
+      .value {
+        font-style: normal;
+        font-weight: bold;
+        font-size: 32px;
+        line-height: 48px;
+        margin-bottom: 4px;
+        letter-spacing: -0.02em;
+      }
+      .description {
+        font-style: normal;
+        font-weight: normal;
+        font-size: 14px;
+        line-height: 21px;
+        letter-spacing: -0.02em;
+
+        color: #777777;
       }
     }
   }

diff --git a/components/about/review/card.vue b/components/about/review/card.vue
@@ -153,8 +153,7 @@ export default ReviewCard;
 @include mobile {
   .review-container {
     cursor: pointer;
-    border-radius: 16px;
-    flex-basis: 388px;
+    border-radius: 8px;
     width: 100%;
     height: 149px;
     background: #f6f6f6;
@@ -181,7 +180,7 @@ export default ReviewCard;
         color: #5236ff;
       }
       .title {
-        width: 340px;
+        width: 100%;
         height: 48px;
 
         overflow: hidden;

diff --git a/pages/about.vue b/pages/about.vue
@@ -132,7 +132,7 @@ export default defineComponent({
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      gap: 120px;
+      gap: 64px;
       width: 100%;
       margin: 0 auto 0 auto;
     }
@@ -376,11 +376,9 @@ export default defineComponent({
     .contents {
       display: flex;
       flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: 64px;
-      width: 792px;
+      width: calc(100% - 48px);
       margin: 0 auto 0 auto;
+      padding: 0 24px 0 24px;
     }
     .slogan {
       display: flex;
@@ -390,7 +388,7 @@ export default defineComponent({
       width: 100%;
       height: 484px;
       background: #f6f6f6;
-      margin-bottom: 120px;
+      margin-bottom: 64px;
       .slogan-text {
         white-space: pre-wrap;
         font-style: normal;
@@ -413,40 +411,40 @@ export default defineComponent({
 
       color: #000000;
     }
-    .info-row {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 64px;
-    }
-    .information {
-      display: flex;
-      width: 792px;
-      flex-direction: column;
-      gap: 48px;
-      .cards {
-        overflow-x: auto;
-        scrollbar-width: none;
-        -ms-overflow-style: none;
-        -webkit-overflow-scrolling: touch;
-        &::-webkit-scrollbar {
-          display: none;
-        }
+    .info-table {
+      padding-left: 24px;
+      .info-row {
         display: flex;
-        flex-direction: row;
-        gap: 48px;
+        flex-direction: column;
+        margin-bottom: 64px;
+        .information {
+          margin-top: 24px;
+          overflow-x: auto;
+          scrollbar-width: none;
+          -ms-overflow-style: none;
+          -webkit-overflow-scrolling: touch;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+          display: flex;
+          flex-direction: column;
+          .cards {
+            gap: 48px;
+            display: flex;
+            flex: 0 0 auto;
+          }
+        }
       }
     }
     .activities {
       display: flex;
       flex-direction: column;
       width: 100%;
-      gap: 48px;
+      gap: 24px;
       .cards {
         display: flex;
         flex-direction: column;
-        gap: 48px;
+        gap: 24px;
       }
     }
     .reviews {
@@ -464,20 +462,24 @@ export default defineComponent({
         display: flex;
         flex-direction: column;
         align-items: center;
-        margin-bottom: 120px;
+        margin-bottom: 72px;
         .lead-more {
           display: flex;
           justify-content: space-between;
           align-items: center;
-          width: 155px;
-          height: 68px;
+          width: 106px;
+          height: 40px;
           cursor: pointer;
           font-style: normal;
           font-weight: bold;
-          font-size: 24px;
-          line-height: 36px;
+          font-size: 16px;
+          line-height: 24px;
           letter-spacing: -0.02em;
           color: #777777;
+          img {
+            width: 13.33px;
+            height: 7.33px;
+          }
         }
       }
     }