duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
DEV_DSW
2026-05-29 10:14:06 +08:00
parent 0c23d7ccb5
commit 6e227ff441
5 changed files with 10 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/home/components/LongTextGuideCard/index.vue
View File

@@ -75,7 +75,7 @@
<div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800"> <div class="long-text-guide-card__action-label color-94A3B8 text-[11px] font-800">
{{ activeItem.action.label }} {{ activeItem.action.label }}
</div> </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"> <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" <img class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
mode="aspectFill" /> mode="aspectFill" />

2
src/pages/home/components/OpenMapComponent/index.vue
View File

@@ -3,7 +3,7 @@
<!-- 占位撑开 --> <!-- 占位撑开 -->
<div class="w-vw"></div> <div class="w-vw"></div>
<div class="flex flex-items-center flex-justify-between p-[12px] " @click="openMap"> <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"> <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" /> <uni-icons type="location" size="16" color="#171717" />
</div> </div>

2
src/pages/home/components/RoutePlanCard/index.vue
View File

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

14
src/pages/home/components/SharedVisual/MediaFrame.vue
View File

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

23
src/pages/home/components/SharedVisual/styles/index.scss
View File

@@ -62,18 +62,6 @@
background: #f5f3ff; 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 { .visual-detail__header {
min-height: 48px; min-height: 48px;
} }
@@ -89,11 +77,9 @@
min-width: 0; min-width: 0;
} }
.visual-action-row { .visual-action-row {}
}
.visual-action-row__icon { .visual-action-row__icon {}
}
.visual-action-row__icon--green { .visual-action-row__icon--green {
color: #047857; color: #047857;
@@ -119,8 +105,7 @@
min-width: 0; min-width: 0;
} }
.visual-action-row__title { .visual-action-row__title {}
}
.visual-action-row__subtitle { .visual-action-row__subtitle {
margin-top: 4px; margin-top: 4px;
@@ -131,4 +116,4 @@
.visual-action-row__arrow { .visual-action-row__arrow {
font-size: 24px; font-size: 24px;
} }