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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user