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

refactor(PoiDetailCard): clean up component styles

Browse Source 
convert all component styles from external SCSS to inline Tailwind utility classes, remove the unused stylesheet file, and update the disabled button's opacity class from is-disabled to opacity-55.
This commit is contained in:
duanshuwen
2026-05-29 20:49:04 +08:00
parent c0356a7915
commit b401be034e
2 changed files with 15 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/pages/home/components/PoiDetailCard/index.vue
View File

@@ -1,29 +1,32 @@
<template>
<div class="poi-detail-card bg-white rounded-[24px] overflow-hidden">
<div class="poi-detail-card__hero relative">
<div
class="bg-white rounded-[24px] overflow-hidden border border-[#0f172a]/[0.04] shadow-[0_10px_28px_rgba(15,23,42,0.04)]">
<div class="h-[206px] pt-[8px] px-[8px] relative">
<image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
<div class="poi-detail-card__badge flex items-center gap-4 text-[10px] font-bold">
<span class="poi-detail-card__badge-icon">⌖</span>
<div
class="absolute top-[18px] left-[22px] min-h-[30px] px-[12px] rounded-full text-[#059669] bg-white/90 backdrop-blur-[8px] flex items-center gap-4 text-[10px] font-bold">
<span class="text-[13px] leading-none">⌖</span>
<span>{{ data.badge?.text }}</span>
</div>
</div>
<div class="poi-detail-card__body">
<div class="poi-detail-card__title text-[#1e293b] font-size-24 font-bold">
<div class="pt-[18px] px-[26px] pb-[24px]">
<div class="leading-[32px] letter-spacing-0 text-[#1e293b] font-size-24 font-bold">
{{ data.title }}
</div>
<div class="poi-detail-card__tip flex items-center gap-10">
<div class="poi-detail-card__spark text-[#047857] text-[18px] font-bold">✦</div>
<div class="poi-detail-card__tip-text text-[#047857] text-[14px] font-bold">
<div
class="min-h-[46px] mt-[16px] px-[14px] border border-[#d1fae5] rounded-[12px] bg-gradient-to-r from-[#ecfdf5] to-[#f0fdf4]/[0.34] flex items-center gap-10">
<div class="leading-none text-[#047857] text-[18px] font-bold">✦</div>
<div class="flex-1 min-w-0 leading-[20px] text-[#047857] text-[14px] font-bold">
{{ data.tip?.text }}
</div>
</div>
<div
class="poi-detail-card__button flex items-center justify-center gap-8 text-white bg-0F172A text-[16px] font-bold"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="poi-detail-card__button-icon">↗</span>
class="h-[54px] mt-[16px] rounded-[14px] flex items-center justify-center gap-8 text-white bg-0F172A text-[16px] font-bold"
:class="{ 'opacity-55': disabled }" @click="handleAction">
<span class="text-[18px] leading-none">↗</span>
<span>{{ data.action?.text }}</span>
</div>
</div>
@@ -49,7 +52,3 @@ const handleAction = () => {
emit("action", props.data);
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

69
src/pages/home/components/PoiDetailCard/styles/index.scss
View File

@@ -1,69 +0,0 @@
.poi-detail-card {
border: 1px solid rgba(15, 23, 42, 0.04);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}
.poi-detail-card__hero {
height: 206px;
padding: 8px 8px 0;
}
.poi-detail-card__badge {
position: absolute;
top: 18px;
left: 22px;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
color: #059669;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(8px);
}
.poi-detail-card__badge-icon {
font-size: 13px;
line-height: 1;
}
.poi-detail-card__body {
padding: 18px 26px 24px;
}
.poi-detail-card__title {
line-height: 32px;
letter-spacing: 0;
}
.poi-detail-card__tip {
min-height: 46px;
margin-top: 16px;
padding: 0 14px;
border: 1px solid #d1fae5;
border-radius: 12px;
background: linear-gradient(90deg, #ecfdf5 0%, rgba(240, 253, 244, 0.34) 100%);
}
.poi-detail-card__spark {
line-height: 1;
}
.poi-detail-card__tip-text {
flex: 1;
min-width: 0;
line-height: 20px;
}
.poi-detail-card__button {
height: 54px;
margin-top: 16px;
border-radius: 14px;
}
.poi-detail-card__button.is-disabled {
opacity: 0.55;
}
.poi-detail-card__button-icon {
font-size: 18px;
line-height: 1;
}