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

refactor: replace flex-full with flex-1 and standardize scrollbar styles

Browse Source 
- replace all outdated flex-full utility classes with modern flex-1 across Vue components
- standardize scrollbar hiding by using scrollbar-none utility instead of verbose vendor prefixes
- update order detail page layout and scroll container styling
- add scrollbar-none usage guidelines to AGENTS.md documentation
This commit is contained in:
DEV_DSW
2026-05-29 10:07:20 +08:00
parent 2956287135
commit 0c23d7ccb5
31 changed files with 39 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@
<div class="min-w-0 flex-1" :class="{ 'pl-[4px]': !isSpeechRecognitionSupported }">
<textarea ref="textareaRef" v-if="!isVoiceMode" v-model="inputMessage" rows="1" maxlength="300"
:placeholder="placeholder"
class="block h-[22px] max-h-[92px] min-h-[22px] w-full resize-none overflow-x-hidden overflow-y-auto border-0 bg-transparent p-0 text-[14px] leading-[22px] text-[#333] outline-none appearance-none placeholder:text-[#A5AAB4] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
class="block h-[22px] max-h-[92px] min-h-[22px] w-full resize-none overflow-x-hidden overflow-y-auto border-0 bg-transparent p-0 text-[14px] leading-[22px] text-[#333] outline-none appearance-none placeholder:text-[#A5AAB4] scrollbar-none [&::-webkit-scrollbar]:hidden"
@input="adjustTextareaHeight" @focus="handleFocus" @blur="handleBlur" @touchstart="handleTouchStart"
@touchend="handleTouchEnd" />

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

@@ -6,7 +6,7 @@
</div>
<!-- ✅ 滚动区域 -->
<div class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-div="scrollIntodivId" scroll-with-animation
<div class="flex-1 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-[12px] px-12 pb-24 gap-10">
<div v-if="headerSections.title || headerSections.tag" class="long-answer-header">

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

@@ -1,6 +1,6 @@
<template>
<div
class="flex flex-row gap-x-[9px] ml-[12px] py-[8px] overflow-x-auto whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
class="flex flex-row gap-x-[9px] ml-[12px] py-[8px] overflow-x-auto whitespace-nowrap scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="border border-white bg-white/50 px-3 py-1 rounded-[50px] flex flex-row items-center"
v-for="(item, index) in itemList" :key="index" @click="sendReply(item)">
<div class="flex items-center justify-center">

2
src/pages/home/components/Discovery/components/FindTabs/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="w-full bg-transparent">
<div class="w-full overflow-x-auto [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
<div class="w-full overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
:scroll-left="scrollLeft" scroll-with-animation="true" @scroll="handleScroll">
<div class="flex items-end h-[50px] gap-4 flex-nowrap px-3">
<div v-for="(tab, idx) in tabs" :key="idx" :id="getTabId(idx)"

4
src/pages/home/components/Discovery/components/QuickQuestions/index.vue
View File

@@ -3,14 +3,14 @@
<ModuleTitle :title="themeName" />
<div
class="mt-1 mb-[6px] text-[0] overflow-x-auto whitespace-nowrap [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
class="mt-1 mb-[6px] text-[0] overflow-x-auto whitespace-nowrap scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<div class="min-w-[130px] max-w-[150px] bg-white inline-block rounded-[20px] mr-[10px]"
v-for="(item, index) in list" :key="index" @click="sendReply(item)">
<div class="flex flex-row justify-start p-[10px]">
<img class="w-[40px] h-[40px] shrink-0 rounded-[14px]" :src="createSvgIndex(index)" />
<div class="min-w-0 flex flex-col flex-full pl-[8px] py-[4px]">
<div class="min-w-0 flex flex-col flex-1 pl-[8px] py-[4px]">
<div class="w-full text-[12px] font-semibold text-[#171717] truncate">
{{ item.title }}
</div>

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

@@ -4,7 +4,7 @@
<FindTabs v-if="discoveryTabs.length" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
</div>
<div class="discovery-scroll flex-full" overflow-y @touchstart="emitScrollTouchStart" @touchmove="emitScrollTouch"
<div class="discovery-scroll flex-1" overflow-y @touchstart="emitScrollTouchStart" @touchmove="emitScrollTouch"
@scroll="emitScrollTouch">
<CardSwiper v-if="discoveryCards.length" :list="discoveryCards" @didSelectItem="handleCardClick" />

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

@@ -14,7 +14,7 @@
<div class="faq-help-card__list">
<div v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex flex-items-center"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<div class="faq-help-card__question color-475569 text-[18px] font-900 truncate flex-full">
<div class="faq-help-card__question color-475569 text-[18px] font-900 truncate flex-1">
{{ item.text }}
</div>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>

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

@@ -84,7 +84,7 @@
</div>
</div>
<div class="long-text-guide-card__map-bar flex flex-items-center bg-white">
<div class="flex-full">
<div class="flex-1">
<div class="color-1E293B text-[15px] font-900">{{ activeItem.action.title }}</div>
<div class="color-94A3B8 text-[12px] font-800 mt-2">{{ activeItem.action.subtitle }}</div>
</div>

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

@@ -9,7 +9,7 @@
</div>
<div class="map-navigation-card__content flex flex-items-center">
<div class="map-navigation-card__info flex-full">
<div class="map-navigation-card__info flex-1">
<div class="map-navigation-card__title color-1E293B text-[18px] font-900 truncate">
{{ data.title }}
</div>

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

@@ -2,7 +2,7 @@
<van-popup ref="popup" position="bottom" v-model:show="show">
<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>
<div class="title flex-1 text-center text-[17px] text-black font-medium ml-24">更多服务</div>
<van-icon name="cross" size="24" color="#CACFD8" @click="close" />
</div>
@@ -10,7 +10,7 @@
<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">
<div class="center flex-1">
<div class="text-[16px] text-black leading-[24px] font-medium">
{{ item.title }}
</div>

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

@@ -6,7 +6,7 @@
</div>
<!-- ✅ 滚动区域 -->
<div class="flex-full overflow-hidden" scroll-y>
<div class="flex-1 overflow-hidden" scroll-y>
<div class="pb-24 overflow-hidden">
<img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />

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

@@ -5,7 +5,7 @@
<div class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
{{ data.icon }}
</div>
<div class="poi-compare-card__title color-1E293B text-[18px] font-900 truncate flex-full">
<div class="poi-compare-card__title color-1E293B text-[18px] font-900 truncate flex-1">
{{ data.title }}
</div>
</div>
@@ -42,7 +42,7 @@
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
<div class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-1">
{{ detail.title }}
</div>
<div class="poi-compare-card__compare-label color-94A3B8 text-[12px] font-900">

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

@@ -4,7 +4,7 @@
class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
:class="{ 'is-disabled': disabled }" @click="openDetail">
<img class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
<div class="route-plan-card__body flex-full">
<div class="route-plan-card__body flex-1">
<div class="route-plan-card__title color-1E293B text-[18px] font-900 truncate">
{{ data.title }}
</div>
@@ -26,7 +26,7 @@
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="route-plan-card__detail-title color-1E293B text-[18px] font-900 truncate flex-full">
<div class="route-plan-card__detail-title color-1E293B text-[18px] font-900 truncate flex-1">
{{ data.title }}
</div>
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-900">
@@ -43,7 +43,7 @@
</div>
<div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
<img class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
<div class="route-plan-card__node-body flex-full">
<div class="route-plan-card__node-body flex-1">
<div class="route-plan-card__node-title color-1E293B text-[16px] font-900 truncate">
{{ node.title }}
</div>

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

@@ -6,7 +6,7 @@
:class="toneClass">
<slot name="icon">{{ icon }}</slot>
</div>
<div class="visual-action-row__body flex-full">
<div class="visual-action-row__body flex-1">
<div class="visual-action-row__title color-1E293B text-[14px] font-900 truncate">{{ title }}</div>
<div v-if="subtitle" class="visual-action-row__subtitle truncate">
{{ subtitle }}

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

@@ -5,7 +5,7 @@
@click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="visual-detail__title flex-full color-1E293B text-[14px] font-900 truncate">{{ title }}</div>
<div class="visual-detail__title flex-1 color-1E293B text-[14px] font-900 truncate">{{ title }}</div>
<BadgePill v-if="tag" :label="tag" :tone="tone" />
</div>
<slot />

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

@@ -1,8 +1,8 @@
<template>
<div class="flex w-full">
<div class="flex flex-col flex-full min-width-0 mr-[12px]">
<div class="flex flex-col flex-1 min-width-0 mr-[12px]">
<div class="flex flex-row items-center justify-between min-width-0">
<span class="flex-full min-width-0 text-[20px] font-semibold text-white truncate">
<span class="flex-1 min-width-0 text-[20px] font-semibold text-white truncate">
{{ mainPageDataModel.welcomeContent }}
</span>
<span class="shrink-0 text-[20px] font-semibold text-white mt-[4px]">