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:
@@ -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">
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -19,4 +19,3 @@
|
||||
@import "./white-space.scss";
|
||||
@import "./min-height.scss";
|
||||
@import "./min-width.scss";
|
||||
@import "./gap.scss";
|
||||
|
||||
Reference in New Issue
Block a user