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

refactor(home-components): migrate styles & fix color classes

Browse Source 
- Remove FaqHelpCard's external SCSS stylesheet and convert its styles to inline Tailwind utilities
- Fix invalid color utility classes in NoticeCard and LongTextGuideCard to use proper Tailwind text color syntax
- Swap deprecated uni-icons right with van-icon arrow-right in FaqHelpCard
This commit is contained in:
DEV_DSW
2026-05-29 16:29:55 +08:00
parent 255a7c0aa8
commit d955a56cb0
4 changed files with 16 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/pages/home/components/FaqHelpCard/index.vue
View File

@@ -1,23 +1,26 @@
<template>
<div class="faq-help-card bg-white rounded-[24px] w-full">
<div class="faq-help-card__header flex items-center">
<div class="faq-help-card__icon flex items-center justify-center rounded-full text-[16px] font-bold">
<div
class="bg-white rounded-[24px] w-full pt-8 px-8 pb-6 border border-slate-200/72 shadow-[0_12px_30px_rgba(15,23,42,0.05)]">
<div class="flex items-center">
<div
class="w-6 h-6 mr-2.5 border-2 border-emerald-500 text-emerald-500 leading-5 flex items-center justify-center rounded-full text-[16px] font-bold">
{{ data.icon }}
</div>
<div class="faq-help-card__title text-[#1e293b] font-size-20 font-bold">
<div class="leading-[26px] text-[#1e293b] font-size-20 font-bold">
{{ data.title }}
</div>
</div>
<div class="faq-help-card__divider"></div>
<div class="h-px mt-6 mb-4 bg-slate-100"></div>
<div class="faq-help-card__list">
<div v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex items-center"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<div class="faq-help-card__question color-475569 text-[18px] font-bold truncate flex-1">
<div v-for="item in questions" :key="item.id || item.text"
class="min-h-[42px] flex items-center active:opacity-86" :class="{ 'opacity-55': disabled }"
@click="handleSelect(item)">
<div class="min-w-0 leading-[24px] text-[#475569] text-[18px] font-bold truncate flex-1">
{{ item.text }}
</div>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
<van-icon name="arrow-right" size="16" color="#CBD5E1"></van-icon>
</div>
</div>
</div>
@@ -46,7 +49,3 @@ const handleSelect = (item) => {
emit("select", item);
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

54
src/pages/home/components/FaqHelpCard/styles/index.scss
View File

@@ -1,54 +0,0 @@
.faq-help-card {
padding: 34px 30px 26px;
border: 1px solid rgba(226, 232, 240, 0.72);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
box-sizing: border-box;
}
.faq-help-card__header {
min-width: 0;
}
.faq-help-card__icon {
width: 22px;
height: 22px;
margin-right: 10px;
border: 2px solid #10b981;
color: #10b981;
line-height: 18px;
box-sizing: border-box;
}
.faq-help-card__title {
line-height: 26px;
}
.faq-help-card__divider {
height: 1px;
margin: 24px 0 18px;
background: #f1f5f9;
}
.faq-help-card__item {
min-height: 42px;
}
.faq-help-card__item:active {
opacity: 0.86;
}
.faq-help-card__item.is-disabled {
opacity: 0.55;
}
.faq-help-card__question {
min-width: 0;
line-height: 24px;
}
.faq-help-card__arrow {
width: 22px;
margin-left: 16px;
text-align: right;
line-height: 24px;
}

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

@@ -36,7 +36,7 @@
<div class="long-text-guide-card__rich-body">
<div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
class="long-text-guide-card__paragraph 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">
@@ -60,7 +60,7 @@
</div>
<div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
class="long-text-guide-card__paragraph 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">

4
src/pages/home/components/NoticeCard/index.vue
View File

@@ -34,13 +34,13 @@
<div class="notice-card__detail-title text-[#1e293b] font-size-20 font-bold">
{{ detail.title }}
</div>
<div class="notice-card__time-pill flex items-center bg-[#f8fafc] color-475569 text-[13px] font-bold">
<div class="notice-card__time-pill flex items-center bg-[#f8fafc] text-[#475569] text-[13px] font-bold">
<span class="notice-card__time-icon">{{ detail.timeIcon }}</span>
<span>{{ detail.publishTime }}</span>
</div>
<div class="notice-card__divider"></div>
<div v-for="paragraph in paragraphs" :key="paragraph.id"
class="notice-card__paragraph color-475569 text-[14px] font-bold">
class="notice-card__paragraph text-[#475569] text-[14px] font-bold">
<span v-for="segment in paragraph.segments" :key="segment.text"
:class="{ 'notice-card__strong': segment.strong }">
{{ segment.text }}