fix(more): more 영역 마진 수정

Nexters · Oct 27, 2021 · 5c37921 · 5c37921
1 parent adfa2d8
commit 5c37921
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 16 deletions.
diff --git a/pages/about.vue b/pages/about.vue
@@ -53,10 +53,13 @@
                 :href="item.href"
               />
             </div>
-            <div class="more">
+            <div
+              class="more"
+              :style="`${review.more || 'margin-bottom: 60px;'}`"
+            >
               <div
                 class="lead-more"
-                :style="`display: ${review.more ? 'flex' : 'none'}`"
+                :style="`display: ${review.more ? 'flex' : 'none'};`"
                 @click="onClickMore"
               >
                 <p>Lead more</p>
@@ -296,14 +299,13 @@ export default defineComponent({
     .review-row {
       display: flex;
       justify-content: center;
-      margin-bottom: 120px;
     }
     .reviews {
       display: flex;
       flex-direction: column;
       width: 1200px;
-      grid-gap: 32px;
       .cards {
+        margin-top: 48px;
         display: flex;
         flex-direction: row;
         box-sizing: border-box;
@@ -314,7 +316,7 @@ export default defineComponent({
         display: flex;
         flex-direction: column;
         align-items: center;
-        margin-bottom: 120px;
+        margin: 48px 0 120px 0;
         .lead-more {
           display: flex;
           justify-content: space-between;

diff --git a/pages/project/index.vue b/pages/project/index.vue
@@ -18,7 +18,7 @@
             :project="_project"
           />
         </div>
-        <div class="more">
+        <div class="more" :style="`${more || 'margin-bottom: 60px;'}`">
           <div
             class="lead-more"
             :style="`display: ${more ? 'flex' : 'none'}`"
@@ -171,9 +171,9 @@ body.scroll-hidden {
       }
     }
     .more {
-      height: 120px;
+      margin: 64px 0 120px 0;
       .lead-more {
-        margin: 24px auto 64px auto;
+        margin: 0 auto 0 auto;
         cursor: pointer;
         display: flex;
         justify-content: center;
@@ -235,9 +235,11 @@ body.scroll-hidden {
       }
     }
     .more {
-      height: 120px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 64px 0 120px 0;
       .lead-more {
-        margin: 24px auto 64px auto;
         cursor: pointer;
         display: flex;
         justify-content: center;
@@ -299,9 +301,11 @@ body.scroll-hidden {
       }
     }
     .more {
-      height: 120px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 64px 0 120px 0;
       .lead-more {
-        margin: 24px auto 64px auto;
         cursor: pointer;
         display: flex;
         justify-content: center;
@@ -363,9 +367,11 @@ body.scroll-hidden {
       }
     }
     .more {
-      height: 64px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 24px 0 60px 0;
       .lead-more {
-        margin: 24px auto 64px auto;
         cursor: pointer;
         display: flex;
         justify-content: center;
@@ -426,9 +432,11 @@ body.scroll-hidden {
       }
     }
     .more {
-      height: 64px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 24px 0 60px 0;
       .lead-more {
-        margin: 24px auto 64px auto;
         cursor: pointer;
         display: flex;
         justify-content: center;