style: standardize design token classes and spacing units

Standardize styling across all components:
1. Replace legacy color utilities and hardcoded hex values with official design token classes
2. Update margin/padding/rounded corner values to use wrapped [px] syntax for consistency
3. Fix inconsistent line-height class names to use leading-[value] format
This commit is contained in:
DEV_DSW
2026-05-29 09:56:52 +08:00
parent 42f364809a
commit 2956287135
31 changed files with 108 additions and 104 deletions

View File

@@ -2,7 +2,7 @@
<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 ">
<div class="flex flex-col px-16 pt-16 pb-[12px] ">
<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" />

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 gap-10">
<div class="flex flex-col pt-[12px] 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 }}

View File

@@ -6,7 +6,7 @@ v
<SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
:frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
:displayWidth="spriteStyle.displayWidth" :fps="16" />
<div class="welcome-text text-[14px] font-medium font-family-misans-vf color-171717 leading-[24px]">
<div class="welcome-text text-[14px] font-medium font-family-misans-vf text-[#171717] leading-[24px]">
{{ welcomeContent }}
</div>
</div>

View File

@@ -2,7 +2,7 @@
<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 " @click="openDetail(item)">
<div class="flex flex-col px-16 pt-16 pb-[12px] " @click="openDetail(item)">
<div class="long-text-guide-card__badge text-[12px] font-900" :class="`is-${item.badgeTone}`">
{{ item.badge }}

View File

@@ -1,8 +1,8 @@
<template>
<van-popup ref="popup" position="bottom" v-model:show="show">
<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 text-[17px] color-000 font-medium ml-24">更多服务</div>
<div class="popup-content pt-[12px] pl-12 pr-12">
<div class="header flex flex-items-center pb-[12px]">
<div class="title flex-full text-center text-[17px] text-black font-medium ml-24">更多服务</div>
<van-icon name="cross" size="24" color="#CACFD8" @click="close" />
</div>
@@ -11,14 +11,14 @@
<div class="flex flex-items-center flex-justify-center">
<img v-if="item.icon" class="left" :src="item.icon" />
<div class="center flex-full">
<div class="text-[16px] color-000 leading-[24px] font-medium">
<div class="text-[16px] text-black leading-[24px] font-medium">
{{ item.title }}
</div>
<div class="text-[12px] color-A3A3A3 line-height-16">
<div class="text-[12px] color-A3A3A3 leading-[16px]">
{{ item.content }}
</div>
</div>
<div class="right text-[12px] text-white line-height-16" @click="handleClick(item)">
<div class="right text-[12px] text-white leading-[16px]" @click="handleClick(item)">
{{ item.btnText }}
</div>
</div>

View File

@@ -11,11 +11,11 @@
<img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
<div class="pt-16 px-12 pb-24 ">
<div class="color-171717 text-[16px] font-weight-600">{{ detailTitle }}</div>
<div class="text-[#171717] text-[16px] font-weight-600">{{ detailTitle }}</div>
<div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-[16px]">
<uni-icons type="clock" size="18" color="#5A6780" />
<span class="color-171717 text-[12px] font-weight-600 ml-8">发布时间{{ publishTime }}</span>
<span class="text-[#171717] text-[12px] font-weight-600 ml-8">发布时间{{ publishTime }}</span>
</div>
<div class="mt-[16px] mx-12 bg-gray w-full height-1"></div>

View File

@@ -14,7 +14,7 @@
</div>
<div class="p-[4px_8px_8px]">
<div class="text-[11px] text-[#99A0AE] truncate">
<div class="text-[11px] text-ink-400 truncate">
{{ item.topic }}
</div>
</div>

View File

@@ -16,7 +16,7 @@
<span>{{ item.distance }}</span>
</div>
<div
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 text-[12px] font-900"
class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-[12px] color-334155 text-[12px] font-900"
@click.stop="handleSelect(item)">
{{ getActionText(item) }}
</div>