refactor(home-components): replace uni event bus & migrate tailwind styles

Replace all global `uni.$emit` invocations with the custom event emitter from @/utils/events.
Migrate component styles from separate SCSS files to inline Tailwind utility classes, and remove all unused SCSS style files.
This commit is contained in:
duanshuwen
2026-05-29 21:22:42 +08:00
parent b401be034e
commit ecb6e676b9
28 changed files with 468 additions and 972 deletions

View File

@@ -1,36 +1,38 @@
<template>
<div class="facility-location-card bg-white rounded-[24px] overflow-hidden w-full">
<img class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
<div
class="bg-white rounded-[24px] overflow-hidden w-full border border-[rgba(226,232,240,0.72)] shadow-[0_12px_30px_rgba(15,23,42,0.05)] box-border">
<img class="block w-full h-[184px]" :src="data.image" mode="aspectFill" />
<div class="facility-location-card__body px-24 pb-24">
<div class="facility-location-card__title-row flex items-center">
<div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-bold">
<div class="px-24 pb-24 pt-7 box-border">
<div class="flex items-center min-w-0">
<div
class="color-2563EB bg-EFF6FF text-[12px] font-bold h-[30px] mr-3 px-3 border border-[#bfdbfe] rounded-[10px] leading-[30px] whitespace-nowrap box-border">
{{ type.text }}
</div>
<div class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate">
<div class="text-[#1e293b] text-[18px] font-bold truncate min-w-0 leading-6">
{{ data.title }}
</div>
</div>
<div class="facility-location-card__distance flex items-center text-[#94A3B8] text-[14px] font-bold">
<span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
<div class="mt-2 flex items-center text-[#94A3B8] text-[14px] font-bold leading-[18px]">
<span class="mr-[5px] text-[15px] leading-[15px]">{{ distance.icon }}</span>
<span>{{ distance.text }}</span>
</div>
<div class="facility-location-card__location bg-[#f8fafc] rounded-[20px]">
<div class="facility-location-card__location-label flex items-center text-[#64748B] text-[13px] font-bold">
<span class="facility-location-card__location-dot">{{ location.icon }}</span>
<div class="mt-6 px-5 py-[18px] box-border bg-[#f8fafc] rounded-[20px]">
<div class="flex items-center text-[#64748B] text-[13px] font-bold leading-[18px]">
<span class="mr-2 text-[#ec4899] text-[14px] leading-[14px]">{{ location.icon }}</span>
<span>{{ location.label }}</span>
</div>
<div class="facility-location-card__location-text text-[#1e293b] text-[16px] font-bold">
<div class="mt-3 text-[#1e293b] text-[16px] font-bold leading-[22px]">
{{ location.text }}
</div>
</div>
<div
class="facility-location-card__button flex items-center justify-center bg-0F172A text-white text-[18px] font-bold"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="facility-location-card__button-icon">{{ action.icon }}</span>
class="mt-5 flex items-center justify-center bg-0F172A text-white text-[18px] font-bold h-[54px] rounded-[16px] active:opacity-[0.86]"
:class="{ 'opacity-[0.55]': disabled }" @click="handleAction">
<span class="mr-2 text-[19px] leading-[19px]">{{ action.icon }}</span>
<span>{{ action.text }}</span>
</div>
</div>
@@ -64,7 +66,3 @@ const handleAction = () => {
emit("select", props.data);
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>