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

style: clean up and standardize component styles

Browse Source 
Replace all instances of the non-standard `font-800` font weight class with Tailwind's native `font-bold` across multiple components for consistent styling.
Convert numeric spacing shorthand values (e.g. `mt-4`, `p-16`, `gap-16`) to explicit pixel-based Tailwind classes like `mt-[4px]` for clearer, more consistent spacing.
Refactor the RecommendationListCard component to remove its external SCSS stylesheet, replacing all old class definitions with inline Tailwind utility classes and removing the unused style import statement.
This commit is contained in:
DEV_DSW
2026-05-29 16:20:47 +08:00
parent 87c42145ad
commit 255a7c0aa8
14 changed files with 30 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/GoodDetail/index.vue
View File

@@ -17,7 +17,7 @@
{{ moduleItem.moduleTitle }} {{ moduleItem.moduleTitle }}
</span> </span>
</div> </div>
<span class="flex-1 text-[12px] text-ink-600 leading-[20px] mt-4"> <span class="flex-1 text-[12px] text-ink-600 leading-[20px] mt-[4px]">
{{ moduleItem.moduleContent }} {{ moduleItem.moduleContent }}
</span> </span>
</div> </div>

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

@@ -17,7 +17,7 @@
<span class="text-[12px] font-normal font-color-600">正在生成</span> <span class="text-[12px] font-normal font-color-600">正在生成</span>
<ChatLoading /> <ChatLoading />
</div> </div>
<div v-if="isOverflow" class="flex flex-row items-center justify-between mt-4" @click="lookDetailAction"> <div v-if="isOverflow" class="flex flex-row items-center justify-between mt-[4px]" @click="lookDetailAction">
<span class="text-[12px] font-normal text-[#2D91FF] mr-[4px]">查看完整{{ tag }}</span> <span class="text-[12px] font-normal text-[#2D91FF] mr-[4px]">查看完整{{ tag }}</span>
<uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons> <uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
</div> </div>

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

@@ -21,7 +21,7 @@
<div class="w-full px-12 pb-8 flex flex-row" @click="jumpClick"> <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="btn-bg w-full p-4 rounded-[24px] flex flex-row">
<div <div
class="btn-bg-sub w-full p-16 rounded-[20px] flex flex-row items-center justify-center text-white text-center text-[18px] font-800"> 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">
{{ props.toolCall.componentNameParams.buttonName }} {{ props.toolCall.componentNameParams.buttonName }}
</div> </div>
</div> </div>

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

@@ -13,7 +13,7 @@
{{ item.summary }} {{ item.summary }}
</div> </div>
<div class="long-text-guide-card__summary-footer flex items-center justify-between"> <div class="long-text-guide-card__summary-footer flex items-center justify-between">
<text class="color-CBD5E1 text-[12px] font-800">{{ item.footer }}</text> <text class="color-CBD5E1 text-[12px] font-bold">{{ item.footer }}</text>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons> <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
</div> </div>
</div> </div>
@@ -39,7 +39,7 @@
class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium"> class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)" <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"> :key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-800"> <span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
{{ segment.text }} {{ segment.text }}
</span> </span>
<span v-else>{{ segment.text }}</span> <span v-else>{{ segment.text }}</span>
@@ -54,7 +54,7 @@
</div> </div>
<div class="long-text-guide-card__tip-block bg-[#ecfdf5]"> <div class="long-text-guide-card__tip-block bg-[#ecfdf5]">
<div v-for="(tip, index) in activeItem.tips || []" :key="tip" <div v-for="(tip, index) in activeItem.tips || []" :key="tip"
class="long-text-guide-card__tip text-[#047857] text-[14px] font-800"> class="long-text-guide-card__tip text-[#047857] text-[14px] font-bold">
{{ index + 1 }} {{ tip }} {{ index + 1 }} {{ tip }}
</div> </div>
</div> </div>
@@ -63,7 +63,7 @@
class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium"> class="long-text-guide-card__paragraph color-475569 text-[15px] font-medium">
<template v-for="(segment, segmentIndex) in getSegments(paragraph)" <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
:key="`${paragraphIndex}-${segmentIndex}`"> :key="`${paragraphIndex}-${segmentIndex}`">
<span v-if="segment.highlight" class="long-text-guide-card__highlight font-800"> <span v-if="segment.highlight" class="long-text-guide-card__highlight font-bold">
{{ segment.text }} {{ segment.text }}
</span> </span>
<span v-else>{{ segment.text }}</span> <span v-else>{{ segment.text }}</span>
@@ -72,7 +72,7 @@
</div> </div>
<div v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone"> <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-800"> <div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-bold">
{{ activeItem.action.label }} {{ activeItem.action.label }}
</div> </div>
<div class="long-text-guide-card__map-card rounded-[16px] overflow-hidden"> <div class="long-text-guide-card__map-card rounded-[16px] overflow-hidden">
@@ -86,7 +86,7 @@
<div class="long-text-guide-card__map-bar flex items-center bg-white"> <div class="long-text-guide-card__map-bar flex items-center bg-white">
<div class="flex-1"> <div class="flex-1">
<div class="text-[#1e293b] text-[15px] font-bold">{{ activeItem.action.title }}</div> <div class="text-[#1e293b] text-[15px] font-bold">{{ activeItem.action.title }}</div>
<div class="text-[#94A3B8] text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div> <div class="text-[#94A3B8] text-[12px] font-bold mt-2">{{ activeItem.action.subtitle }}</div>
</div> </div>
<div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-bold" <div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-bold"
@click="handleAction(activeItem)"> @click="handleAction(activeItem)">
@@ -97,7 +97,7 @@
</div> </div>
<div v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone"> <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-800"> <div class="long-text-guide-card__action-label text-[#94A3B8] text-[11px] font-bold">
{{ activeItem.action.label }} {{ activeItem.action.label }}
</div> </div>
<div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)"> <div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">

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

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

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

@@ -40,7 +40,7 @@
</div> </div>
<div class="notice-card__divider"></div> <div class="notice-card__divider"></div>
<div v-for="paragraph in paragraphs" :key="paragraph.id" <div v-for="paragraph in paragraphs" :key="paragraph.id"
class="notice-card__paragraph color-475569 text-[14px] font-800"> class="notice-card__paragraph color-475569 text-[14px] font-bold">
<span v-for="segment in paragraph.segments" :key="segment.text" <span v-for="segment in paragraph.segments" :key="segment.text"
:class="{ 'notice-card__strong': segment.strong }"> :class="{ 'notice-card__strong': segment.strong }">
{{ segment.text }} {{ segment.text }}

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

@@ -3,7 +3,7 @@
<!-- 占位撑开 --> <!-- 占位撑开 -->
<div class="w-full"></div> <div class="w-full"></div>
<div class="flex items-center justify-between p-[12px] " @click="openMap"> <div class="flex items-center justify-between p-[12px] " @click="openMap">
<div class="rounded-[16px] p-16 bg-[#f0f8f3]"> <div class="rounded-[16px] p-[16px] bg-[#f0f8f3]">
<div class="w-32 h-32 rounded-full bg-white flex items-center justify-center"> <div class="w-32 h-32 rounded-full bg-white flex items-center justify-center">
<uni-icons type="location" size="16" color="#171717" /> <uni-icons type="location" size="16" color="#171717" />
</div> </div>

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

@@ -10,12 +10,12 @@
</div> </div>
</div> </div>
<div class="poi-compare-card__columns grid grid-cols-2 gap-16"> <div class="poi-compare-card__columns grid grid-cols-2 gap-[16px]">
<div v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place" <div v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)"> :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" /> <img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
<div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field"> <div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
<div class="poi-compare-card__field-label text-[#94A3B8] text-[12px] font-800"> <div class="poi-compare-card__field-label text-[#94A3B8] text-[12px] font-bold">
{{ field.label }} {{ field.label }}
</div> </div>
<div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold" <div v-if="field.tone" class="poi-compare-card__chip text-[12px] font-bold"

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

@@ -15,7 +15,7 @@
<div class="poi-detail-card__tip flex items-center gap-10"> <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__spark text-[#047857] text-[18px] font-bold">✦</div>
<div class="poi-detail-card__tip-text text-[#047857] text-[14px] font-800"> <div class="poi-detail-card__tip-text text-[#047857] text-[14px] font-bold">
{{ data.tip?.text }} {{ data.tip?.text }}
</div> </div>
</div> </div>

27
src/pages/home/components/RecommendationListCard/index.vue
View File

@@ -1,22 +1,21 @@
<template> <template>
<div class="recommendation-list-card w-full"> <div class="pt-[4px] pb-[8px] w-full">
<div class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full" scroll-x :show-scrollbar="false" <div
enhanced> class="pb-[2px] overflow-x-auto whitespace-nowrap w-full scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div v-for="item in items" :key="item.id || item.title" <div v-for="item in items" :key="item.id || item.title"
class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden" class="w-[200px] mr-3.5 align-top border border-slate-100 shadow-[0_8px_22px_rgba(15,23,42,0.06)] inline-block bg-white rounded-[20px] overflow-hidden active:opacity-86"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)"> :class="{ 'opacity-55': disabled }" @click="handleSelect(item)">
<img class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" /> <img class="h-[110px] block w-full" :src="item.image" />
<div class="recommendation-list-card__body p-16"> <div class="p-[16px]">
<div class="recommendation-list-card__name text-[#1e293b] text-[18px] font-bold truncate"> <div class="leading-[22px] text-[#1e293b] text-[18px] font-bold truncate">
{{ item.title }} {{ item.title }}
</div> </div>
<div <div class="leading-[16px] flex items-center gap-[4px] mt-[4px] text-[#94A3B8] text-[12px] font-bold">
class="recommendation-list-card__distance flex items-center gap-4 mt-4 text-[#94A3B8] text-[12px] font-800"> <span class="text-[13px] leading-[13px]">⌖</span>
<span class="recommendation-list-card__pin">⌖</span>
<span>{{ item.distance }}</span> <span>{{ item.distance }}</span>
</div> </div>
<div <div
class="recommendation-list-card__button flex items-center justify-center mt-[12px] text-[#334155] text-[12px] font-bold" class="h-9 border border-gray-200 rounded-lg bg-slate-50 flex items-center justify-center mt-[12px] text-[#334155] text-[12px] font-bold"
@click.stop="handleSelect(item)"> @click.stop="handleSelect(item)">
{{ getActionText(item) }} {{ getActionText(item) }}
</div> </div>
@@ -53,7 +52,3 @@ const handleSelect = (item) => {
emit("select", item); emit("select", item);
}; };
</script> </script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

53
src/pages/home/components/RecommendationListCard/styles/index.scss
View File

@@ -1,53 +0,0 @@
.recommendation-list-card {
padding: 4px 0 8px;
}
.recommendation-list-card__scroll {
padding-bottom: 2px;
}
.recommendation-list-card__item {
width: 200px;
margin-right: 14px;
vertical-align: top;
border: 1px solid #f1f5f9;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
box-sizing: border-box;
}
.recommendation-list-card__item:active {
opacity: 0.86;
}
.recommendation-list-card__item.is-disabled {
opacity: 0.55;
}
.recommendation-list-card__image {
height: 110px;
}
.recommendation-list-card__body {
box-sizing: border-box;
}
.recommendation-list-card__name {
line-height: 22px;
}
.recommendation-list-card__distance {
line-height: 16px;
}
.recommendation-list-card__pin {
font-size: 13px;
line-height: 13px;
}
.recommendation-list-card__button {
height: 36px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #f8fafc;
box-sizing: border-box;
}

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

@@ -52,7 +52,7 @@
<div class="leading-[22px] text-[#1e293b] text-[16px] font-bold truncate"> <div class="leading-[22px] text-[#1e293b] text-[16px] font-bold truncate">
{{ node.title }} {{ node.title }}
</div> </div>
<div class="mt-[4px] leading-[18px] text-[#94A3B8] text-[12px] font-800 truncate"> <div class="mt-[4px] leading-[18px] text-[#94A3B8] text-[12px] font-bold truncate">
{{ node.description }} {{ node.description }}
</div> </div>
<div v-if="node.tag" <div v-if="node.tag"

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

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

2
src/pages/order/order/components/AmtSection/index.vue
View File

@@ -10,7 +10,7 @@
</span> </span>
</div> </div>
</div> </div>
<div v-if="orderData.orderStatus === '0'" class="text-[11px] text-ink-400 mt-4"> <div v-if="orderData.orderStatus === '0'" class="text-[11px] text-ink-400 mt-[4px]">
超时后，订单将自动取消 超时后，订单将自动取消
</div> </div>
<div v-if="['1', '2'].includes(orderData.orderStatus)" <div v-if="['1', '2'].includes(orderData.orderStatus)"