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

refactor(home-components): migrate styles to tailwind and clean up legacy code

Browse Source 
Replace custom CSS utility classes with Tailwind arbitrary value classes (e.g. color-CBD5E1 → text-[#cbd5e1]). Remove unused standalone SCSS style files for three home components. Swap legacy uni-icons to van-icon for arrow icons in LongTextGuideCard, and fix event emitter usage in DiscoveryCradContentList to use the imported events utility.
This commit is contained in:
duanshuwen
2026-05-29 19:51:17 +08:00
parent b25071a92b
commit 86f8e9adec
10 changed files with 69 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,69 +1,73 @@
<template>
<div class="long-text-guide-card w-full">
<div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
<div v-for="item in cards" :key="item.id" class="long-text-guide-card__summary-card bg-white rounded-[24px] "
:class="{ 'is-disabled': disabled }" @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-bold" :class="`is-${item.badgeTone}`">
<div v-for="item in cards" :key="item.id"
class="min-h-[178px] mb-4 pt-[28px] px-[26px] pb-[22px] border border-slate-900/5 [box-shadow:0_12px_28px_rgba(15,23,42,0.04)] [transition:transform_0.15s_ease,opacity_0.15s_ease] bg-white rounded-[24px] active:scale-985"
:class="{ 'opacity-55': disabled }" @click="openDetail(item)">
<div
class="inline-flex items-center justify-center min-h-[26px] px-[10px] border border-transparent rounded-full leading-[18px] text-[12px] font-bold text-emerald-600 bg-emerald-50 border-emerald-200 border">
{{ item.badge }}
</div>
<div class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
<div class="mt-[18px] leading-[24px] text-[#1e293b] text-[18px] font-bold">
{{ item.title }}
</div>
<div class="long-text-guide-card__summary-text text-[#94A3B8] text-[14px] font-medium ellipsis-2">
<div class="mt-[10px] leading-[22px] text-[#94A3B8] text-[14px] font-medium ellipsis-2">
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex items-center justify-between">
<text class="color-CBD5E1 text-[12px] font-bold">{{ item.footer }}</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
<div class="mt-[24px] flex items-center justify-between">
<text class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</text>
<van-icon name="arrow-right" size="16" color="#CBD5E1"></van-icon>
</div>
</div>
</div>
<div v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] overflow-hidden">
<div class="long-text-guide-card__detail-header flex items-center border-b border-ink-200">
<div class="long-text-guide-card__back flex items-center justify-center rounded-full font-700"
<div v-else class="border border-slate-900/5 bg-white rounded-[24px] overflow-hidden">
<div class="min-h-[70px] py-0 pr-[18px] pl-5 flex items-center border-b border-ink-200">
<div
class="w-[34px] h-[34px] mr-3 text-slate-500 bg-[#f2f4f6] text-2xl leading-none flex items-center justify-center rounded-full font-700"
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
<van-icon name="arrow-left" size="16" color="#CBD5E1"></van-icon>
</div>
<div class="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold truncate">
<div class="flex-1 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
{{ activeItem.title }}
</div>
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold"
:class="`is-${activeItem.badgeTone}`">
<div
class="inline-flex items-center justify-center min-h-[26px] px-[10px] border border-transparent rounded-full leading-[18px] ml-[12px] text-[12px] font-bold text-emerald-600 bg-emerald-50 border-emerald-200 border">
{{ activeItem.badge }}
</div>
</div>
<div class="long-text-guide-card__rich-body">
<div class="pt-[24px] px-[22px] pb-[26px]">
<div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph text-[#475569] text-[15px] font-medium">
class="mb-[20px] leading-[30px] text-[#475569] text-[15px] font-medium">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
<span v-if="segment.highlight"
class="text-emerald-800 bg-emerald-50 px-[6px] py-[1px] rounded text-xs font-bold">
{{ segment.text }}
</span>
<span v-else>{{ segment.text }}</span>
</template>
</div>
<image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
:src="activeItem.image" mode="aspectFill" />
<img v-if="activeItem.image" class="h-[198px] mb-[24px] w-full rounded-14 block" :src="activeItem.image" />
<div class="long-text-guide-card__section-title text-[#1e293b] text-[16px] font-bold">
<div class="mb-[12px] leading-[22px] text-[#1e293b] text-[16px] font-bold">
{{ activeItem.sectionTitle }}
</div>
<div class="long-text-guide-card__tip-block bg-[#ecfdf5]">
<div class="mb-[22px] px-[18px] py-3 border-l-3 border-l-emerald-400 rounded-xl bg-[#ecfdf5]">
<div v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip text-[#047857] text-[14px] font-bold">
class="leading-[24px] text-[#047857] text-[14px] font-bold">
{{ index + 1 }} {{ tip }}
</div>
</div>
<div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph text-[#475569] text-[15px] font-medium">
class="mb-[20px] leading-[30px] text-[#475569] text-[15px] font-medium">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
<span v-if="segment.highlight"
class="text-emerald-800 bg-emerald-50 px-[6px] py-[1px] rounded text-xs font-bold">
{{ segment.text }}
</span>
<span v-else>{{ segment.text }}</span>
@@ -71,24 +75,24 @@
</div>
</div>
<div v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-bold">
<div v-if="activeItem.action?.type === 'map'" class="border-t border-slate-100 pt-4 px-5 pb-5">
<div class="mb-[10px] tracking-[0.6px] text-[#94A3B8] text-[11px] font-bold">
{{ activeItem.action.label }}
</div>
<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" />
<div class="long-text-guide-card__map-tag text-white font-size-10 font-bold">
<div class="border border-slate-100 rounded-[16px] overflow-hidden">
<div class="relative">
<img class="h-[138px] w-full block" :src="activeItem.action.image" />
<div
class="absolute left-[14px] bottom-[12px] px-[8px] py-[4px] rounded-full bg-[#0f172a]/[0.72] text-white text-[10px] font-bold">
{{ activeItem.action.tag }}
</div>
</div>
<div class="long-text-guide-card__map-bar flex items-center bg-white">
<div class="py-[14px] px-[16px] flex items-center bg-white">
<div class="flex-1">
<div class="text-[#1e293b] text-[15px] font-bold">{{ activeItem.action.title }}</div>
<div class="text-[#94A3B8] text-[12px] font-bold mt-2">{{ activeItem.action.subtitle }}</div>
</div>
<div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-bold"
<div class="py-[12px] px-[18px] rounded-[14px] text-white bg-0F172A text-[14px] font-bold"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</div>
@@ -96,15 +100,14 @@
</div>
</div>
<div v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
<div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-bold">
<div v-else-if="activeItem.action?.type === 'image'" class="border-t border-slate-100 pt-4 px-5 pb-5">
<div class="mb-[10px] tracking-[0.6px] text-[#94A3B8] text-[11px] font-bold">
{{ activeItem.action.label }}
</div>
<div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
<img class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<div class="min-h-[178px] overflow-hidden rounded-2xl bg-slate-50 relative" @click="handleAction(activeItem)">
<img class="h-[178px] w-full block" :src="activeItem.action.image" />
<div
class="long-text-guide-card__expand flex items-center justify-center rounded-full text-white text-[18px] font-bold">
class="absolute right-[14px] bottom-[14px] w-[38px] h-[38px] bg-[#0f172a]/[0.36] flex items-center justify-center rounded-full text-white text-[18px] font-bold">
↗
</div>
</div>
@@ -177,7 +180,3 @@ const getSegments = (paragraph) => {
return segments.length ? segments : [{ text, highlight: false }];
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

185
src/pages/home/components/LongTextGuideCard/styles/index.scss
View File

@@ -1,185 +0,0 @@
.long-text-guide-card__summary-card {
min-height: 178px;
margin-bottom: 16px;
padding: 28px 26px 22px;
border: 1px solid rgba(15, 23, 42, 0.04);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
transition: transform 0.15s ease, opacity 0.15s ease;
}
.long-text-guide-card__summary-card:active {
transform: scale(0.985);
}
.long-text-guide-card__summary-card.is-disabled {
opacity: 0.55;
}
.long-text-guide-card__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 26px;
padding: 0 10px;
border: 1px solid transparent;
border-radius: 999px;
line-height: 18px;
}
.long-text-guide-card__badge.is-amber {
color: #d97706;
background: #fffbeb;
border-color: #fde68a;
}
.long-text-guide-card__badge.is-green {
color: #059669;
background: #ecfdf5;
border-color: #a7f3d0;
}
.long-text-guide-card__badge.is-blue {
color: #2563eb;
background: #eff6ff;
border-color: #bfdbfe;
}
.long-text-guide-card__summary-title {
margin-top: 18px;
line-height: 24px;
}
.long-text-guide-card__summary-text {
margin-top: 10px;
line-height: 22px;
}
.long-text-guide-card__summary-footer {
margin-top: 24px;
}
.long-text-guide-card__arrow {
font-size: 26px;
line-height: 1;
}
.long-text-guide-card__detail-card {
border: 1px solid rgba(15, 23, 42, 0.04);
}
.long-text-guide-card__detail-header {
min-height: 70px;
padding: 0 18px 0 20px;
}
.long-text-guide-card__back {
width: 34px;
height: 34px;
margin-right: 12px;
color: #64748b;
background: #f2f4f6;
font-size: 24px;
line-height: 1;
}
.long-text-guide-card__detail-title {
flex: 1;
min-width: 0;
}
.long-text-guide-card__detail-badge {
margin-left: 12px;
}
.long-text-guide-card__rich-body {
padding: 24px 22px 26px;
}
.long-text-guide-card__paragraph {
margin-bottom: 20px;
line-height: 30px;
}
.long-text-guide-card__highlight {
color: #065f46;
background: #ecfdf5;
padding: 1px 6px;
border-radius: 4px;
}
.long-text-guide-card__main-image {
height: 198px;
margin-bottom: 24px;
}
.long-text-guide-card__section-title {
margin-bottom: 12px;
line-height: 22px;
}
.long-text-guide-card__tip-block {
margin-bottom: 22px;
padding: 12px 18px;
border-left: 3px solid #34d399;
border-radius: 12px;
}
.long-text-guide-card__tip {
line-height: 24px;
}
.long-text-guide-card__action-zone {
border-top: 1px solid #f1f5f9;
padding: 16px 20px 20px;
}
.long-text-guide-card__action-label {
margin-bottom: 10px;
letter-spacing: 0.6px;
}
.long-text-guide-card__map-card {
border: 1px solid #f1f5f9;
}
.long-text-guide-card__map-image {
height: 138px;
}
.long-text-guide-card__map-tag {
position: absolute;
left: 14px;
bottom: 12px;
padding: 4px 8px;
border-radius: 999px;
background: rgba(15, 23, 42, 0.72);
}
.long-text-guide-card__map-bar {
padding: 14px 16px;
}
.long-text-guide-card__nav-btn {
padding: 12px 18px;
border-radius: 14px;
}
.long-text-guide-card__photo-card {
min-height: 178px;
overflow: hidden;
border-radius: 16px;
background: #f8fafc;
}
.long-text-guide-card__photo-image {
height: 178px;
}
.long-text-guide-card__expand {
position: absolute;
right: 14px;
bottom: 14px;
width: 38px;
height: 38px;
background: rgba(15, 23, 42, 0.36);
}