style(home-components): update tailwind classes and clean up code

- replace legacy tailwind shorthand classes with modern bracket notation
- remove unused CSS styles and imports from SharedVisual components
- remove unused `mode` prop from MediaFrame.vue
- fix trailing newline in shared stylesheet

src/pages/home/components/LongTextGuideCard/index.vue

@@ -75,7 +75,7 @@
         <div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
           {{ activeItem.action.label }}
         </div>
-        <div class="long-text-guide-card__map-card rounded-16 overflow-hidden">
+        <div class="long-text-guide-card__map-card rounded-[16px] overflow-hidden">
           <div class="long-text-guide-card__map-image-wrap relative">
             <img class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
               mode="aspectFill" />

src/pages/home/components/OpenMapComponent/index.vue

@@ -3,7 +3,7 @@
         <!-- 占位撑开 -->
         <div class="w-vw"></div>
         <div class="flex flex-items-center flex-justify-between p-[12px] " @click="openMap">
-            <div class="rounded-16 p-16 bg-theme-color-50">
+            <div class="rounded-[16px] p-16 bg-theme-color-50">
                 <div class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
                     <uni-icons type="location" size="16" color="#171717" />
                 </div>

src/pages/home/components/RoutePlanCard/index.vue

@@ -108,7 +108,7 @@ const tips = computed(() => detail.value.tips || []);
 
 const getTagClass = (tone) => {
   if (tone === "green") return "color-047857 bg-ECFDF5";
-  return "color-64748B bg-F1F5F9";
+  return "color-64748B bg-[#f1f5f9]";
 };
 
 const openDetail = () => {

src/pages/home/components/SharedVisual/MediaFrame.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="visual-media relative w-full overflow-hidden bg-F1F5F9" :class="{ 'rounded-16': rounded }">
-    <img v-if="src" class="visual-media__image block w-full h-full" :src="src" :mode="mode" />
-    <div v-else class="visual-media__empty block w-full h-full"></div>
+  <div class="relative w-full overflow-hidden bg-[#f1f5f9]" :class="{ 'rounded-[16px]': rounded }">
+    <img v-if="src" class="block w-full h-full" :src="src" />
+    <div v-else class="min-h-[96px] bg-linear-[135deg,#f8fafc_0%,#e2e8f0_100%] block w-full h-full"></div>
     <slot />
   </div>
 </template>
@@ -12,17 +12,9 @@ defineProps({
     type: String,
     default: "",
   },
-  mode: {
-    type: String,
-    default: "aspectFill",
-  },
   rounded: {
     type: Boolean,
     default: true,
   },
 });
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>

src/pages/home/components/SharedVisual/styles/index.scss

@@ -62,18 +62,6 @@
   background: #f5f3ff;
 }
 
-.visual-media {
-}
-
-.visual-media__image,
-.visual-media__empty {
-}
-
-.visual-media__empty {
-  min-height: 96px;
-  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
-}
-
 .visual-detail__header {
   min-height: 48px;
 }
@@ -89,11 +77,9 @@
   min-width: 0;
 }
 
-.visual-action-row {
-}
+.visual-action-row {}
 
-.visual-action-row__icon {
-}
+.visual-action-row__icon {}
 
 .visual-action-row__icon--green {
   color: #047857;
@@ -119,8 +105,7 @@
   min-width: 0;
 }
 
-.visual-action-row__title {
-}
+.visual-action-row__title {}
 
 .visual-action-row__subtitle {
   margin-top: 4px;
@@ -131,4 +116,4 @@
 
 .visual-action-row__arrow {
   font-size: 24px;
-}
+}