diff --git a/src/assets/home/chahua.png b/src/assets/home/chahua.png
new file mode 100644
index 0000000..60c5fce
Binary files /dev/null and b/src/assets/home/chahua.png differ
diff --git a/src/stores/modules/home.ts b/src/stores/modules/home.ts
index 03289aa..bb10bf4 100644
--- a/src/stores/modules/home.ts
+++ b/src/stores/modules/home.ts
@@ -71,6 +71,7 @@ function toBusinessLine(vo: ProjectSubmissionVo): BusinessLine {
desc: subtitle,
slogan: subtitle,
icon: vo.logoUrl ?? '',
+ cover: vo.coverUrl ?? '',
serviceContent,
contents,
serviceTypes,
@@ -99,6 +100,7 @@ function toBusinessLineFromInfo(info: ProjectSubmissionInfo): BusinessLine {
desc: subtitle,
slogan: subtitle,
icon: ps.logoUrl ?? '',
+ cover: ps.coverUrl ?? '',
serviceContent,
contents,
serviceTypes,
diff --git a/src/types/business/home.d.ts b/src/types/business/home.d.ts
index deaeb68..6361e65 100644
--- a/src/types/business/home.d.ts
+++ b/src/types/business/home.d.ts
@@ -35,6 +35,7 @@ export interface BusinessLine {
desc: string
slogan: string
icon: string
+ cover: string
serviceContent: string
contents: ServiceContentBlock[]
serviceTypes: ServiceType[]
diff --git a/src/views/home/cpns/HomeBusinessCards.vue b/src/views/home/cpns/HomeBusinessCards.vue
index b670653..88531f3 100644
--- a/src/views/home/cpns/HomeBusinessCards.vue
+++ b/src/views/home/cpns/HomeBusinessCards.vue
@@ -1,6 +1,7 @@
@@ -25,6 +36,11 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
'home-business__card--active': FALLBACK_ACTIVE.includes(line.id),
}"
>
+
{{ line.name }}
@@ -52,16 +68,16 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
}
&__grid {
- display: flex;
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
gap: @spacing-base;
}
&__card {
position: relative;
.flex(column, flex-start, flex-start);
- flex: 1 1 0;
min-width: 0;
- min-height: 160px;
+ min-height: 168px;
box-sizing: border-box;
padding: @spacing-lg;
overflow: hidden;
@@ -80,22 +96,32 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
}
}
+ &__cover {
+ display: block;
+ width: 72px;
+ height: 72px;
+ object-fit: contain;
+ flex-shrink: 0;
+ }
+
&__check {
position: absolute;
- top: 27px;
- right: 37px;
+ top: @spacing-base;
+ right: @spacing-base;
+ z-index: 1;
flex-shrink: 0;
- width: 31px;
- height: 31px;
+ width: 20px;
+ height: 20px;
border: 1px solid @home-ring;
border-radius: @radius-round;
+ background: @white;
&::after {
content: '';
position: absolute;
inset: 0;
- width: 21px;
- height: 21px;
+ width: 12px;
+ height: 12px;
margin: auto;
border-radius: @radius-round;
background: @white;
@@ -104,7 +130,8 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
}
&__name {
- margin: @spacing-xxl 0 0;
+ margin: @spacing-base 0 0;
+ padding-right: @spacing-xl;
font-size: @font-size-lg;
font-weight: 500;
line-height: 1.4;
@@ -113,6 +140,7 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
&__desc {
margin: @spacing-xs 0 0;
+ padding-right: @spacing-xl;
font-size: @font-size-sm;
font-weight: 400;
line-height: 1.5;