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

22
src/pages/home/components/DiscoveryCradContentList/index.vue
View File

@@ -1,11 +1,12 @@
<template>
<div class="container">
<div>
<ModuleTitle :title="recommendTheme.themeName" />
<div class="container-scroll">
<div class="flex flex-row overflow-x-auto mt-1">
<div v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
<div class="mk-card-item" @click="sendReply(item)">
<img class="card-img" :src="item.coverPhoto" mode="widthFix"></img>
<span class="card-text">{{ item.topic }}</span>
<div class="flex flex-col items-start w-[188px] h-[154px] bg-white rounded-[10px] mr-2 relative"
@click="sendReply(item)">
<img class="w-[188px] h-[112px]" :src="item.coverPhoto">
<span class="p-3 text-center font-medium text-xs text-[#333]">{{ item.topic }}</span>
</div>
</div>
</div>
@@ -13,8 +14,9 @@
</template>
<script setup>
import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
import { defineProps } from "vue";
import { emitter } from '@/utils/events'
import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
import ModuleTitle from "@/components/ModuleTitle/index.vue";
const props = defineProps({
@@ -27,13 +29,9 @@ const props = defineProps({
const sendReply = (item) => {
if (item.userInputContentType && item.userInputContentType === '1') {
const commonItem = { type: item.userInputContent, title: item.topic }
uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
emitter.emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
return;
}
uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
emitter.emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
};
</script>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>

33
src/pages/home/components/DiscoveryCradContentList/styles/index.scss
View File

@@ -1,33 +0,0 @@
.container {
.container-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
margin-top: 4px;
.mk-card-item {
display: flex;
flex-direction: column;
align-items: start;
width: 188px;
height: 154px;
background-color: #fff;
border-radius: 10px;
margin-right: 8px;
position: relative;
.card-img {
width: 188px;
height: 112px;
}
.card-text {
padding: 12px;
text-align: center;
font-weight: 500;
font-size: 12px;
color: #333;
}
}
}
}

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

@@ -1,27 +1,30 @@
<template>
<div class="container w-full border-ff overflow-hidden rounded-[24px] flex flex-col">
<div
class="w-full border border-white overflow-hidden rounded-[24px] flex flex-col bg-white/20 [box-shadow:0_9px_34px_0_rgba(27,9,91,0.07)]">
<!-- 占位撑开 -->
<div class="w-full"></div>
<div class="content flex flex-col m-4 rounded-[24px]">
<div
class="relative bg-gradient-to-b from-[#e8fff1] to-[#0ccd58] rounded-3xl border border-white flex flex-col m-4 rounded-[24px]">
<div class="flex flex-col p-6 items-center justify-center">
<img class="w-full rounded-[20px]" :src="props.toolCall.componentNameParams.background" mode="widthFix" />
<!-- 左上角标签 -->
<div class="tag">
<div class="dot"></div>
<span class="tag-text">{{ props.toolCall.componentNameParams.superscript }}</span>
<div
class="absolute top-[20px] left-[20px] flex items-center px-[8px] py-[4px] rounded-[999rpx] [backdrop-filter:blur(6rpx)] bg-white/80 [box-shadow:inset_0_1px_2px_0_rgba(255,255,255,0.46)]">
<div class="inline-block w-[15px] h-[15px] rounded-full bg-[#0ccd58] mr-2"></div>
<span class="text-xs text-[#0ccd58] font-semibold">{{ props.toolCall.componentNameParams.superscript }}</span>
</div>
<img class="g_title mt-20" :src="props.toolCall.componentNameParams.title" />
<img class="w-[197px] h-[42px] mt-20" :src="props.toolCall.componentNameParams.title" />
<span class="text-[14px] font-normal text-white my-12 text-center">
<span class="text-[14px] font-normal text-white my-[12px] text-center">
{{ props.toolCall.componentNameParams.description }}
</span>
<div class="w-full px-12 pb-8 flex flex-row" @click="jumpClick">
<div class="btn-bg w-full p-4 rounded-[24px] flex flex-row">
<div class="bg-white/[0.32] border-[0.66px] border-white/[0.32] w-full p-4 rounded-[24px] flex flex-row">
<div
class="btn-bg-sub w-full p-[16px] rounded-[20px] flex flex-row items-center justify-center text-white text-center text-[18px] font-bold">
class="w-full p-[16px] rounded-[20px] flex flex-row items-center justify-center text-white text-center text-[18px] font-bold bg-[#0ccd58] [box-shadow:inset_0_0_41px_0_#f0f8f3,inset_0_0_15px_0_#e8fff1]">
{{ props.toolCall.componentNameParams.buttonName }}
</div>
</div>
@@ -68,7 +71,3 @@ const jumpClick = () => {
};
</script>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>

61
src/pages/home/components/GeneratorPhotoComponent/styles/index.scss
View File

@@ -1,61 +0,0 @@
.container {
background: rgba(255, 255, 255, 0.2);
box-shadow: 0px 9px 34px 0px rgba(27, 9, 91, 0.07);
}
.content {
background: linear-gradient(180deg, #e8fff1 0%, #0ccd58 100%);
border-radius: 24px 24px 24px 24px;
border: 1px solid #ffffff;
position: relative;
}
.g_title {
width: 197px;
height: 42px;
}
.btn-bg {
background: rgba(255, 255, 255, 0.32);
border: 0.66px solid rgba(255, 255, 255, 0.32);
}
.btn-bg-sub {
background: #0ccd58;
box-shadow:
inset 0px 0px 41px 0px #f0f8f3,
inset 0px 0px 15px 0px #e8fff1;
}
/* 左上角标签容器 */
.tag {
position: absolute;
top: 20px;
left: 20px;
display: flex;
align-items: center;
padding: 4px 8px;
border-radius: 999rpx;
backdrop-filter: blur(6rpx);
background: rgba(255, 255, 255, 0.79);
box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.46);
}
/* 小绿点 */
.dot {
width: 15px;
height: 15px;
border-radius: 50%;
background: #0ccd58;
margin-right: 8px;
}
/* 文字 */
.tag-text {
font-size: 12px;
color: #0ccd58;
font-weight: 600;
}

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);
}

2
src/pages/home/components/LongTextGuideCardPreview/index.vue
View File

@@ -15,7 +15,7 @@
{{ item.summary }}
</div>
<div class="long-text-guide-card__summary-footer flex items-center justify-between">
<span class="color-CBD5E1 text-[12px] font-bold">{{ item.footer }}</span>
<span class="text-[#cbd5e1] text-[12px] font-bold">{{ item.footer }}</span>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div>

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

@@ -2,7 +2,7 @@
<div class="poi-detail-card bg-white rounded-[24px] overflow-hidden">
<div class="poi-detail-card__hero 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 font-size-10 font-bold">
<div class="poi-detail-card__badge flex items-center gap-4 text-[10px] font-bold">
<span class="poi-detail-card__badge-icon">⌖</span>
<span>{{ data.badge?.text }}</span>
</div>

2
src/pages/home/components/SharedVisual/ActionRow.vue
View File

@@ -11,7 +11,7 @@
{{ subtitle }}
</div>
</div>
<div class="visual-action-row__arrow color-CBD5E1 font-700">›</div>
<div class="visual-action-row__arrow text-[#cbd5e1] font-700">›</div>
</div>
</template>

2
src/pages/home/components/SharedVisual/BadgePill.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="visual-badge flex items-center justify-center rounded-[5px] font-size-10 font-bold whitespace-nowrap"
<div class="visual-badge flex items-center justify-center rounded-[5px] text-[10px] font-bold whitespace-nowrap"
:class="toneClass">
<slot>{{ label }}</slot>
</div>