feat：修改木牌样式

src/assets/less/index.less

@@ -23,6 +23,12 @@
   font-display: swap;
 }
 
+@font-face {
+  font-family: SmileySans;
+  src: url('@/assets/font/SmileySans-Oblique-2.ttf') format('truetype');
+  font-display: swap;
+}
+
 * {
   user-select: none;
   -webkit-tap-highlight-color: transparent;

src/views/home/components/IndicatorHome.vue

@@ -238,11 +238,11 @@ onUnmounted(() => {
 
       .indicator {
         position: absolute;
-        bottom: -6rem;
-        height: 2.6rem;
+        bottom: -9rem;
+        height: 2.5rem;
         width: 26rem;
         background: #fff;
-        border-radius: 5rem;
+        border-radius: 2rem;
       }
     }
 

src/views/my-guard/components/GuardInfoBoard.vue

@@ -13,7 +13,7 @@
     <div class="info-cards" :style="{ '--card-border-bg': `url(${borderBgImg})` }">
       <div v-for="(card, index) in cards" :key="index" class="info-card">
         <template v-if="index === 3">
-          <img class="badge-icon" :src="badgeIcon" alt="" />
+          <img class="badge-icon" :src="resolvedBadgeIcon" alt="" />
           <span class="badge-label">{{ card.bottom }}</span>
         </template>
         <template v-else>
@@ -26,16 +26,18 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { Icon } from '@iconify/vue'
 import boardImg from '@/assets/img/guard/board.png'
 import borderBgImg from '@/assets/img/guard/border-bg.png'
+import level1Img from '@/assets/img/guard/level-1.png'
 
 export type GuardInfoCard = {
   top?: string
   bottom: string
 }
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     title?: string
     subtitle?: string
@@ -45,7 +47,6 @@ withDefaults(
   {
     title: '【茜茜荔荔】',
     subtitle: '用户昵称 2025.06.22',
-    badgeIcon: '',
     cards: () => [
       { top: '2025.05.16', bottom: '从化荔博园' },
       { top: '16年老树', bottom: '妃子笑荔枝' },
@@ -55,6 +56,8 @@ withDefaults(
   },
 )
 
+const resolvedBadgeIcon = computed(() => props.badgeIcon || level1Img)
+
 const emit = defineEmits<{ edit: [] }>()
 
 function onEdit() {
@@ -131,12 +134,13 @@ function onEdit() {
     bottom: calc(var(--footer-bottom-offset) + var(--footer-height) + 10rem);
     z-index: 2;
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 4rem;
+
     .info-card {
-      min-height: 58rem;
-      padding: 8rem 4rem;
-      box-sizing: border-box;
+      min-width: 0;
+      width: 100%;
+      height: 58rem;
       background: var(--card-border-bg) no-repeat center / 100% 100%;
       display: flex;
       flex-direction: column;
@@ -144,32 +148,32 @@ function onEdit() {
       justify-content: center;
       text-align: center;
       color: #fff;
-    
+
       .card-top {
-        font-size: 11rem;
-        font-weight: 600;
-        line-height: 1.3;
-        margin-bottom: 4rem;
+        width: 100%;
+        font-family: SmileySans, sans-serif;
+        font-size: 16rem;
+        margin-bottom: 3rem;
       }
-    
+
       .card-bottom {
+        width: 100%;
+        font-family: SmileySans, sans-serif;
         font-size: 10rem;
-        line-height: 1.35;
-        opacity: 0.92;
       }
-    
+
       .badge-icon {
-        width: 28rem;
-        height: 28rem;
+        width: 24rem;
+        height: 31rem;
         object-fit: contain;
-        margin-bottom: 4rem;
+        margin-bottom: 2rem;
       }
-    
+
       .badge-label {
-        font-size: 11rem;
+        width: 100%;
+        font-size: 10rem;
         font-weight: 600;
-        color: #ffb400;
-        line-height: 1.3;
+        color: #ffd2a7;
       }
     }
   }