refactor: remove gap.scss and inline gap classes

delete the standalone gap.scss utility file, remove its import from src/static/scss/index.scss, and update all component templates to replace predefined gap-* classes with inline gap-[px] notation
This commit is contained in:
duanshuwen
2026-07-24 16:54:46 +08:00
parent e174e3b726
commit 39b91a8d05
7 changed files with 8 additions and 44 deletions

View File

@@ -9,7 +9,7 @@
<scroll-view class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-view="scrollIntoViewId"
scroll-with-animation @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd"
@touchcancel="onTouchEnd">
<view class="flex flex-col pt-[12px] px-[16px] pb-[24px] gap-10">
<view class="flex flex-col pt-[12px] px-[16px] pb-[24px] gap-[10px]">
<template v-if="hasStructuredLongTextData">
<view v-if="headerSections.title || headerSections.tag" class="long-answer-header">
<view v-if="headerSections.title" class="long-answer-title">

View File

@@ -10,7 +10,7 @@
</view>
</view>
<view class="poi-compare-card__columns grid grid-cols-2 gap-16">
<view class="poi-compare-card__columns grid grid-cols-2 gap-[16px]">
<view v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<image class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
@@ -75,7 +75,7 @@
{{ detail.recommendTitle }}
</view>
<view class="poi-compare-card__tips">
<view v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
<view v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-[10px]">
<view class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
<view class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
{{ tip.text }}

View File

@@ -2,7 +2,7 @@
<view class="poi-detail-card bg-white rounded-24 overflow-hidden">
<view class="poi-detail-card__hero relative">
<image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
<view class="poi-detail-card__badge flex flex-items-center gap-4 font-size-10 font-900">
<view class="poi-detail-card__badge flex flex-items-center gap-[4px] font-size-10 font-900">
<text class="poi-detail-card__badge-icon"></text>
<text>{{ data.badge?.text }}</text>
</view>
@@ -13,7 +13,7 @@
{{ data.title }}
</view>
<view class="poi-detail-card__tip flex flex-items-center gap-10">
<view class="poi-detail-card__tip flex flex-items-center gap-[10px]">
<view class="poi-detail-card__spark color-047857 font-size-18 font-900"></view>
<view class="poi-detail-card__tip-text color-047857 font-size-14 font-800">
{{ data.tip?.text }}
@@ -21,7 +21,7 @@
</view>
<view
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-[8px] color-white bg-[#0f172a] font-size-16 font-900"
:class="{ 'is-disabled': disabled }" @click="handleAction">
<text class="poi-detail-card__button-icon"></text>
<text>{{ data.action?.text }}</text>

View File

@@ -11,7 +11,7 @@
{{ item.title }}
</view>
<view
class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
class="recommendation-list-card__distance flex flex-items-center gap-[4px] mt-4 color-94A3B8 font-size-12 font-800">
<text class="recommendation-list-card__pin"></text>
<text>{{ item.distance }}</text>
</view>

View File

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

View File

@@ -1,35 +0,0 @@
.gap-2 {
gap: 2px;
}
.gap-4 {
gap: 4px;
}
.gap-6 {
gap: 6px;
}
.gap-8 {
gap: 8px;
}
.gap-10 {
gap: 10px;
}
.gap-12 {
gap: 12px;
}
.gap-16 {
gap: 16px;
}
.gap-20 {
gap: 20px;
}
.gap-24 {
gap: 24px;
}

View File

@@ -19,4 +19,3 @@
@import "./white-space.scss";
@import "./min-height.scss";
@import "./min-width.scss";
@import "./gap.scss";