Skip to content

Commit

Permalink
feat(about): tablet 화면 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcauto
mcauto committed Oct 4, 2021
1 parent fc45094 commit f3d1f9f
Show file tree
Hide file tree
Showing 4 changed files with 260 additions and 2 deletions.
35 changes: 35 additions & 0 deletions components/about/activity/card.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,41 @@ export default ActivityCard;
}
}
}
@include tablet {
.container {
border-radius: 16px;
width: 332px;
height: 324px;
background: black;
.contents {
display: flex;
flex-direction: column;
height: 100%;
.description {
white-space: pre-wrap;
padding: 32px;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 48px;
letter-spacing: -0.02em;
color: #ffffff;
}
.title {
margin-top: auto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 27px;
letter-spacing: -0.02em;
padding: 32px;
color: #ffffff;
}
}
}
}
@include mobile {
.container {
border-radius: 8px;
Expand Down
36 changes: 36 additions & 0 deletions components/about/info/card.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,42 @@ export default InfoCard;
}
}
}
@include tablet {
.container {
flex: 0 0 auto;
border-radius: 16px;
width: 368px;
height: 233px;
background: #f6f6f6;
.contents {
padding: 32px;
.title {
font-size: 24px;
line-height: 36px;
font-weight: bold;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.value {
font-style: normal;
font-weight: bold;
font-size: 60px;
line-height: 90px;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.description {
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 27px;
letter-spacing: -0.02em;
color: #777777;
}
}
}
}
@include mobile {
.container {
border-radius: 8px;
Expand Down
60 changes: 60 additions & 0 deletions components/about/review/card.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,4 +90,64 @@ export default ReviewCard;
}
}
}
@include tablet {
.container {
cursor: pointer;
border-radius: 16px;
width: 344.5px;
height: 192px;
background: #f6f6f6;
.contents {
padding: 24px;
height: calc(100% - 48px);
display: flex;
flex-direction: column;
.th {
display: flex;
align-items: center;
justify-content: center;
width: 49px;
height: 29px;
border-radius: 4px;
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 21px;
/* identical to box height, or 150% */
letter-spacing: -0.02em;
color: #5236ff;
}
.title {
width: 296.5px;
height: 72px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 36px;
letter-spacing: -0.02em;
color: #000000;
}
.author {
margin-top: auto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 27px;
letter-spacing: -0.02em;
color: #777777;
}
}
}
}
</style>
131 changes: 129 additions & 2 deletions pages/about.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
<div class="slogan">
<h1 class="slogan-text">{{ slogan }}</h1>
</div>
<div class="contents">
<!-- horizontal scroll -->
<div class="info-row">
<div class="information">
<h2 class="title">{{ info.title }}</h2>
<div class="cards">
Expand All @@ -18,6 +17,9 @@
/>
</div>
</div>
</div>
<div class="contents">
<!-- horizontal scroll -->
<div class="activities">
<h2 class="title">{{ act.title }}</h2>
<div class="cards">
Expand Down Expand Up @@ -165,7 +167,15 @@ export default defineComponent({
color: #000000;
}
.info-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 120px;
}
.information {
width: 1200px;
display: flex;
flex-direction: column;
gap: 48px;
Expand Down Expand Up @@ -222,4 +232,121 @@ export default defineComponent({
}
}
}
@include tablet {
.contents {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 120px;
width: 713px;
margin: 0 auto 0 auto;
}
.slogan {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 64px;
width: 100%;
height: 809px;
background: #f6f6f6;
margin-bottom: 120px;
.slogan-text {
white-space: pre-wrap;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 36px;
/* or 150% */
text-align: center;
letter-spacing: -0.02em;
/* text/sub */
color: #777777;
}
}
.title {
font-style: normal;
font-weight: bold;
font-size: 60px;
line-height: 90px;
letter-spacing: -0.02em;
white-space: pre-wrap;
color: #000000;
}
.info-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-bottom: 120px;
}
.information {
display: flex;
width: 713px;
flex-direction: column;
gap: 48px;
.cards {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
&::-webkit-scrollbar {
display: none;
}
display: flex;
flex-direction: row;
gap: 48px;
}
}
.activities {
display: flex;
flex-direction: column;
gap: 48px;
.cards {
display: flex;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: wrap;
gap: 48px;
}
}
.reviews {
display: flex;
flex-direction: column;
gap: 24px;
.cards {
display: flex;
flex-direction: row;
justify-content: space-between;
box-sizing: border-box;
flex-wrap: wrap;
gap: 24px;
}
.more {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 120px;
.lead-more {
display: flex;
justify-content: space-between;
align-items: center;
width: 155px;
height: 68px;
cursor: pointer;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 36px;
letter-spacing: -0.02em;
color: #777777;
}
}
}
}
</style>

0 comments on commit f3d1f9f

Please sign in to comment.