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/components/CreateServiceOrder/index.vue
View File

@@ -44,7 +44,7 @@
</div>
<div v-else class=" card-content flex flex-items-center p-[12px]">
<div class=" left flex-full pr-20">
<div class=" left flex-1 pr-20">
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
所在位置：{{ roomId }}
</div>

2
src/components/DetailPopup/index.vue
View File

@@ -2,7 +2,7 @@
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-F5F7FA ">
<div class=" flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
<div class="flex-full text-[16px] text-[#171717] leading-[24px] text-center">
<div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
明细详情
</div>
<!-- 关闭按钮 -->

2
src/components/Feedback/index.vue
View File

@@ -25,7 +25,7 @@
</div>
</div>
<div v-else class=" left flex-full p-[12px]">
<div v-else class=" left flex-1 p-[12px]">
<div class="text-[12px] text-ink-600 leading-[20px] mb-4">
联系方式: {{ contactPhone }}
</div>

2
src/components/GoodDetail/index.vue
View File

@@ -17,7 +17,7 @@
{{ moduleItem.moduleTitle }}
</span>
</div>
<span class="flex-full text-[12px] text-ink-600 leading-[20px] mt-4">
<span class="flex-1 text-[12px] text-ink-600 leading-[20px] mt-4">
{{ moduleItem.moduleContent }}
</span>
</div>

2
src/components/RefundPopup/index.vue
View File

@@ -2,7 +2,7 @@
<uni-popup ref="popupRef" type="bottom" :safe-area="false" @maskClick="handleClose">
<div class="refund-popup bg-F5F7FA ">
<div class=" flex flex-items-center justify-between pt-[12px] pb-[12px] relative">
<div class="flex-full text-[16px] text-[#171717] leading-[24px] text-center">
<div class="flex-1 text-[16px] text-[#171717] leading-[24px] text-center">
取消政策
</div>
<!-- 关闭按钮 -->

2
src/pages/booking/components/ConactSection/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<!-- 选择数量 -->
<div class=" bg-white p-[12px] rounded-[12px] flex flex-items-center mb-[12px]">
<div class="flex-full">
<div class="flex-1">
<div class="text-[16px] font-medium text-black leading-[24px]">选择数量</div>
<div class="text-[12px] color-A3A3A3 leading-[16px]">请选择套餐数量</div>
</div>

2
src/pages/booking/components/UserSection/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
<div class="flex flex-items-center p-[12px] border-bottom">
<div class="text-[16px] font-medium text-black leading-[24px] flex-full">
<div class="text-[16px] font-medium text-black leading-[24px] flex-1">
入住信息
</div>
<div class="right">

2
src/pages/booking/index.vue
View File

@@ -6,7 +6,7 @@
</template>
</TopNavBar>
<div class="booking-content flex-full p-[12px] overflow-hidden scroll-y">
<div class="booking-content flex-1 p-[12px] overflow-hidden scroll-y">
<!-- 预约内容 -->
<div class=" bg-white p-[12px] rounded-[12px] mb-[12px]">
<!-- 酒店类型入住离店日期部分 -->

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]">

2
src/pages/order/order/components/FooterSection/index.vue
View File

@@ -6,7 +6,7 @@
申请退款
</button>
<button :class="[
'right border-none rounded-10 flex flex-full flex-items-center flex-justify-center text-[14px] font-medium bg-theme-color-500',
'right border-none rounded-10 flex flex-1 flex-items-center flex-justify-center text-[14px] font-medium bg-theme-color-500',
{
'text-[#ff3d60]': statusCode === '0',
'text-white': ['1', '2', '3', '4', '5', '6'].includes(statusCode),

2
src/pages/order/order/components/OrderCard/InfoRow.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="info-row flex items-center mt-8">
<span class="label text-[12px] text-ink-400">{{ label }}：</span>
<span class="value flex-full text-[12px] text-ink-400">{{ value }}</span>
<span class="value flex-1 text-[12px] text-ink-400">{{ value }}</span>
</div>
</template>

2
src/pages/order/order/components/OrderCard/OrderCardContent.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="card-content pt-[12px]">
<div class="flex items-center justify-between">
<div class="left flex-full text-[14px] leading-[20px] text-[#171717] mr-12">
<div class="left flex-1 text-[14px] leading-[20px] text-[#171717] mr-12">
{{ orderData.commodityName }}
</div>
<div :class="[

2
src/pages/order/order/components/OrderCard/index.vue
View File

@@ -4,7 +4,7 @@
@click.stop="handleCardClick">
<!-- 卡片头部 -->
<div class="card-header flex items-center">
<div class="flex items-center flex-full">
<div class="flex items-center flex-1">
<img class="w-[20px] h-[20px] mr-[4px]" :src="getStatusIcon()" />
<div class="order-title text-[14px] leading-[20px] text-ink-600">
{{ getOrderTypeName() }}

9
src/pages/order/order/detail.vue
View File

@@ -1,8 +1,9 @@
<template>
<div class="order-detail-page flex flex-col h-screen">
<div class="flex flex-col h-screen">
<TopNavBar titleAlign="center" :background="$theme - color - 100" title="订单详情" />
<div class="order-detail-wrapper flex-full overflow-hidden scroll-y">
<div
class="bg-linear-[180deg,#e8fff1_0%,#f5f7fa_100%] px-3 pb-10 flex-1 overflow-y-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
<OrderStatusInfo :orderData="orderData" />
<VoucherList v-if="orderData.orderType != 0 && orderData.orderStatus === '2'" :orderData="orderData"
@@ -114,7 +115,3 @@ const handlePaySuccess = ({ orderId }) => {
// eventChannel.on("refreshOrderList");
// });
</script>
<style lang="scss" scoped>
@import "./styles/detail.scss";
</style>

2
src/pages/quick/components/Card/index.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="bg-white p-[8px] rounded-[12px] flex items-start m-[12px]" @click.stop="handleClick(item)">
<img class="w-[80px] h-[80px] rounded-[10px]" :src="item.commodityPhoto" />
<div class="max-w-[259px] flex-full pl-[12px]">
<div class="max-w-[259px] flex-1 pl-[12px]">
<div class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
{{ item.commodityName }}
</div>