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

style: fix style utility class inconsistencies and correct CSS syntax

Browse Source 
Clean up style-related code across all components:
- Replace deprecated color-* classes with text-[color]/text-white equivalents
- Remove redundant border-box declarations and fix broken empty box-sizing rule
- Correct invalid rounded corner class syntax
- Standardize line-height to leading-[value] utilities
- Uniform margin and padding notation to [xxpx] format
This commit is contained in:
DEV_DSW
2026-05-29 09:28:37 +08:00
parent e52f916231
commit 051f7d1134
46 changed files with 167 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<template>
<div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-col px-16 pt-16 pb-12 border-box">
<div class="flex flex-col px-16 pt-16 pb-12 ">
<div v-if="tag" class="long-answer-tag">{{ tag }}</div>
<div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
<uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
@@ -19,7 +19,7 @@
</div>
<div v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-4"
@click="lookDetailAction">
<span class="text-[12px] font-400 theme-color-500 mr-4">查看完整{{ tag }}</span>
<span class="text-[12px] font-400 theme-color-500 mr-[4px]">查看完整{{ tag }}</span>
<uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
</div>

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

@@ -2,7 +2,7 @@
<!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-end） -->
<div class="chat-mine-row">
<div class="chat-mine bg-17294E">
<span class="font-size-15 color-white">{{ text }}</span>
<span class="font-size-15 text-white">{{ text }}</span>
<slot></slot>
</div>
</div>

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

@@ -8,7 +8,7 @@
<!-- ✅ 滚动区域 -->
<div class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-div="scrollIntodivId" scroll-with-animation
@scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
<div class="flex flex-col pt-12 px-12 pb-24 border-box gap-10">
<div class="flex flex-col pt-12 px-12 pb-24 gap-10">
<div v-if="headerSections.title || headerSections.tag" class="long-answer-header">
<div v-if="headerSections.title" class="long-answer-title">
{{ headerSections.title.contentValue }}

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

@@ -1,7 +1,7 @@
<template>
<div class="more-tips bg-white border-box">
<div class="more-tips bg-white ">
<div class="font-size-0 whitespace-nowrap scroll-x">
<div class="more-tips-item border-box inline-block mr-8" v-for="(item, index) in guideWords" :key="index">
<div class="more-tips-item inline-block mr-8" v-for="(item, index) in guideWords" :key="index">
<span :class="['font-500 text-[12px] text-center', `color-${index}`]" @click="sendReply(item)">
{{ item }}
</span>

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

@@ -1,8 +1,8 @@
v
<template>
<div class="welcome-content border-box p-12">
<div class="welcome-content p-[12px]">
<div class="wrap rounded-20">
<div class="flex flex-items-center flex-justify-between border-box pl-12 pr-12">
<div class="flex flex-items-center flex-justify-between pl-12 pr-12">
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />

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

@@ -28,7 +28,7 @@
</div>
<div
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A text-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="facility-location-card__button-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>

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

@@ -1,9 +1,9 @@
<template>
<div class="container w-full border-box border-ff overflow-hidden rounded-24 flex flex-col">
<div class="container w-full border-ff overflow-hidden rounded-24 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="content flex flex-col m-4 border-box rounded-24">
<div class="flex flex-col p-6 border-box flex-items-center justify-center">
<div class="content flex flex-col m-4 rounded-24">
<div class="flex flex-col p-6 flex-items-center justify-center">
<img class="w-full rounded-20" :src="props.toolCall.componentNameParams.background" mode="widthFix" />
<!-- 左上角标签 -->
@@ -14,14 +14,14 @@
<img class="g_title mt-20" :src="props.toolCall.componentNameParams.title" />
<span class="text-[14px] font-400 color-white my-12 text-center">
<span class="text-[14px] font-400 text-white my-12 text-center">
{{ props.toolCall.componentNameParams.description }}
</span>
<div class="w-full border-box px-12 pb-8 flex flex-row" @click="jumpClick">
<div class="btn-bg w-full border-box p-4 rounded-24 flex flex-row">
<div class="w-full px-12 pb-8 flex flex-row" @click="jumpClick">
<div class="btn-bg w-full p-4 rounded-24 flex flex-row">
<div
class="btn-bg-sub w-full border-box p-16 rounded-20 flex flex-row flex-items-center flex-justify-center color-white text-center font-size-18 font-800">
class="btn-bg-sub w-full p-16 rounded-20 flex flex-row flex-items-center flex-justify-center text-white text-center font-size-18 font-800">
{{ props.toolCall.componentNameParams.buttonName }}
</div>
</div>

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

@@ -1,9 +1,8 @@
<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-24 border-box" :class="{ 'is-disabled': disabled }"
@click="openDetail(item)">
<div v-for="item in cards" :key="item.id" class="long-text-guide-card__summary-card bg-white rounded-24 "
:class="{ 'is-disabled': disabled }" @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}
</div>
@@ -20,7 +19,7 @@
</div>
</div>
<div v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
<div v-else class="long-text-guide-card__detail-card bg-white rounded-24 overflow-hidden">
<div class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
<div class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
@click="closeDetail">
@@ -80,7 +79,7 @@
<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 color-white font-size-10 font-900">
<div class="long-text-guide-card__map-tag text-white font-size-10 font-900">
{{ activeItem.action.tag }}
</div>
</div>
@@ -89,7 +88,7 @@
<div class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</div>
<div class="color-94A3B8 text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
</div>
<div class="long-text-guide-card__nav-btn color-white bg-0F172A text-[14px] font-900"
<div class="long-text-guide-card__nav-btn text-white bg-0F172A text-[14px] font-900"
@click="handleAction(activeItem)">
{{ activeItem.action.buttonText }}
</div>
@@ -105,7 +104,7 @@
<img class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
mode="aspectFill" />
<div
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full text-white font-size-18 font-900">
↗
</div>
</div>

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

@@ -1,8 +1,8 @@
<template>
<div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-col px-16 pt-16 pb-12 border-box" @click="openDetail(item)">
<div class="flex flex-col px-16 pt-16 pb-12 " @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}

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

@@ -2,7 +2,7 @@
<div class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
<div class="map-navigation-card__media">
<img class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
<div class="map-navigation-card__badge flex flex-items-center color-white text-[12px] font-900">
<div class="map-navigation-card__badge flex flex-items-center text-white text-[12px] font-900">
<span class="map-navigation-card__badge-icon">{{ badge.icon }}</span>
<span>{{ badge.text }}</span>
</div>
@@ -18,7 +18,7 @@
</div>
</div>
<div
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A text-white font-size-18 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="map-navigation-card__button-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>

8
src/pages/home/components/MoreService/index.vue
View File

@@ -1,13 +1,13 @@
<template>
<van-popup ref="popup" position="bottom" v-model:show="show">
<div class="popup-content border-box pt-12 pl-12 pr-12">
<div class="popup-content pt-12 pl-12 pr-12">
<div class="header flex flex-items-center pb-12">
<div class="title flex-full text-center font-size-17 color-000 font-500 ml-24">更多服务</div>
<van-icon name="cross" size="24" color="#CACFD8" @click="close" />
</div>
<div class="list bg-white border-box pl-20 pr-20">
<div class="item border-box border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
<div class="list bg-white pl-20 pr-20">
<div class="item border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
<div class="flex flex-items-center flex-justify-center">
<img v-if="item.icon" class="left" :src="item.icon" />
<div class="center flex-full">
@@ -18,7 +18,7 @@
{{ item.content }}
</div>
</div>
<div class="right border-box text-[12px] color-white line-height-16" @click="handleClick(item)">
<div class="right text-[12px] text-white line-height-16" @click="handleClick(item)">
{{ item.btnText }}
</div>
</div>

8
src/pages/home/components/NoticeMessage/detail.vue
View File

@@ -7,10 +7,10 @@
<!-- ✅ 滚动区域 -->
<div class="flex-full overflow-hidden" scroll-y>
<div class="pb-24 border-box overflow-hidden">
<div class="pb-24 overflow-hidden">
<img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
<div class="pt-16 px-12 pb-24 border-box">
<div class="pt-16 px-12 pb-24 ">
<div class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</div>
<div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
@@ -20,7 +20,7 @@
<div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>
<div class="mt-[16px] color-666 text-[14px] line-height-20">{{ noticeContent }}</div>
<div class="mt-[16px] color-666 text-[14px] leading-[20px]">{{ noticeContent }}</div>
</div>
</div>
</div>
@@ -70,6 +70,6 @@ const noticeContent = computed(() => {
background: linear-gradient(180deg, #f4f7fb 0%, #e9eef6 100%);
border: 1px solid #d6dde8;
border-radius: 14px;
box-sizing: border-box;
box-sizing: ;
}
</style>

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

@@ -101,7 +101,7 @@ const clickItem = (item) => {
border: 1px solid #C7D2FE;
width: fit-content;
max-width: 100%;
box-sizing: border-box;
box-sizing: ;
}
.noMessage-text {

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

@@ -1,8 +1,8 @@
<template>
<div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
<div class="w-full bg-white border-ff overflow-hidden rounded-20 flex flex-col">
<!-- 占位撑开 -->
<div class="w-vw"></div>
<div class="flex flex-items-center flex-justify-between p-12 border-box" @click="openMap">
<div class="flex flex-items-center flex-justify-between p-[12px] " @click="openMap">
<div class="rounded-16 p-16 bg-theme-color-50">
<div class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
<uni-icons type="location" size="16" color="#171717" />

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

@@ -30,7 +30,7 @@
</div>
<div
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A text-white font-size-15 font-900"
:class="{ 'is-disabled': disabled }" @click="openDetail">
{{ data.detailButtonText }}
</div>
@@ -86,7 +86,7 @@
<div class="poi-compare-card__actions grid grid-cols-2 gap-14">
<div v-for="action in detail.actions" :key="action.id || action.text"
class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
:class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A text-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
@click="handleAction(action)">
<span class="poi-compare-card__action-icon">{{ action.icon }}</span>
<span>{{ action.text }}</span>

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

@@ -1,5 +1,5 @@
<template>
<div class="poi-detail-card bg-white rounded-24 border-box overflow-hidden">
<div class="poi-detail-card bg-white rounded-24 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 flex-items-center gap-4 font-size-10 font-900">
@@ -21,7 +21,7 @@
</div>
<div
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-0F172A font-size-16 font-900"
class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 text-white bg-0F172A font-size-16 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<span class="poi-detail-card__button-icon">↗</span>
<span>{{ data.action?.text }}</span>

6
src/pages/home/components/ScenicImageCard/index.vue
View File

@@ -4,16 +4,16 @@
<img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />
<div
class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900"
class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full text-white font-size-18 font-900"
@click.stop="handleAction">
{{ action.icon }}
</div>
<div v-if="hasCaption" class="scenic-image-card__caption">
<div v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
<div v-if="caption.title" class="scenic-image-card__title text-white font-size-18 font-900 ellipsis-1">
{{ caption.title }}
</div>
<div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white text-[14px] font-900 ellipsis-1">
<div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-900 ellipsis-1">
{{ caption.subtitle }}
</div>
</div>

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

@@ -1,5 +1,5 @@
<template>
<div class="visual-action-row flex flex-items-center gap-12 p-12 bg-white rounded-18 border-box"
<div class="visual-action-row flex flex-items-center gap-[12px] p-[12px] bg-white rounded-18 "
:class="{ 'is-disabled': disabled }" @click="handleClick">
<div
class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 font-size-18 font-900"

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

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

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

@@ -1,5 +1,5 @@
<template>
<div class="visual-card-shell w-full bg-white border-F1F5F9 rounded-24 border-box overflow-hidden"
<div class="visual-card-shell w-full bg-white border-F1F5F9 rounded-24 overflow-hidden"
:class="[{ 'is-pressable': pressable, 'is-disabled': disabled }, variantClass]" @click="handleClick">
<slot />
</div>

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

@@ -1,6 +1,6 @@
<template>
<CardShell variant="detail">
<div class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
<div class="visual-detail__header flex flex-items-center px-16 border-bottom-F1F5F9">
<div class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center"
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>