feat 首页_业务服务整改

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,

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[]

src/views/home/cpns/HomeBusinessCards.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { BusinessType } from '@/types/api'
 import type { BusinessLine } from '@/types/business/home'
+import defaultCover from '@/assets/home/chahua.png'
 
 interface Props {
   lines: BusinessLine[]
@@ -9,6 +10,16 @@ interface Props {
 defineProps<Props>()
 
 const FALLBACK_ACTIVE: BusinessType[] = ['internet']
+
+function isImageUrl(value: string): boolean {
+  return /^(https?:)?\/\//i.test(value) || value.startsWith('/') || value.startsWith('data:')
+}
+
+function coverSrc(line: BusinessLine): string {
+  const remote = (line.cover || line.icon).trim()
+  if (remote && isImageUrl(remote)) return remote
+  return defaultCover
+}
 </script>
 
 <template>
@@ -25,6 +36,11 @@ const FALLBACK_ACTIVE: BusinessType[] = ['internet']
           'home-business__card--active': FALLBACK_ACTIVE.includes(line.id),
         }"
       >
+        <img
+          class="home-business__cover"
+          :src="coverSrc(line)"
+          :alt="line.name"
+        >
         <span class="home-business__check" aria-hidden="true" />
         <h4 class="home-business__name">
           {{ 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;