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

style: replace ellipsis-1 with truncate

Browse Source 
update all single-line text truncation usages across components from the custom ellipsis-1 class to Tailwind's native truncate utility for consistent styling
This commit is contained in:
DEV_DSW
2026-05-29 09:50:09 +08:00
parent a131531a81
commit 42f364809a
12 changed files with 19 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,7 +13,7 @@
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true"
@click="navigateToDetail(orderData)" />
<div class="text-[16px] font-medium color-000 leading-[24px] ellipsis-1">
<div class="text-[16px] font-medium color-000 leading-[24px] truncate">
{{ orderData.commodityName }}
</div>

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

@@ -7,7 +7,7 @@
<div class="facility-location-card__badge color-2563EB bg-EFF6FF text-[12px] font-900">
{{ type.text }}
</div>
<div class="facility-location-card__title color-1E293B text-[18px] font-900 ellipsis-1">
<div class="facility-location-card__title color-1E293B text-[18px] font-900 truncate">
{{ data.title }}
</div>
</div>

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 ellipsis-1 flex-full">
<div class="faq-help-card__question color-475569 text-[18px] font-900 truncate flex-full">
{{ item.text }}
</div>
<uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>

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

@@ -25,7 +25,7 @@
@click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</div>
<div class="long-text-guide-card__detail-title color-1E293B text-[18px] font-900 ellipsis-1">
<div class="long-text-guide-card__detail-title color-1E293B text-[18px] font-900 truncate">
{{ activeItem.title }}
</div>
<div class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-900"

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

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

2
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 ellipsis-1 flex-full">
<div class="poi-compare-card__title color-1E293B text-[18px] font-900 truncate flex-full">
{{ data.title }}
</div>
</div>

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

@@ -7,7 +7,7 @@
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<img class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
<div class="recommendation-list-card__body p-16">
<div class="recommendation-list-card__name color-1E293B text-[18px] font-900 ellipsis-1">
<div class="recommendation-list-card__name color-1E293B text-[18px] font-900 truncate">
{{ item.title }}
</div>
<div

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

@@ -5,7 +5,7 @@
: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__title color-1E293B text-[18px] font-900 ellipsis-1">
<div class="route-plan-card__title color-1E293B text-[18px] font-900 truncate">
{{ data.title }}
</div>
<div class="route-plan-card__tags flex flex-items-center">
@@ -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 ellipsis-1 flex-full">
<div class="route-plan-card__detail-title color-1E293B text-[18px] font-900 truncate flex-full">
{{ data.title }}
</div>
<div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 text-[12px] font-900">
@@ -44,10 +44,10 @@
<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-title color-1E293B text-[16px] font-900 ellipsis-1">
<div class="route-plan-card__node-title color-1E293B text-[16px] font-900 truncate">
{{ node.title }}
</div>
<div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 ellipsis-1">
<div class="route-plan-card__node-desc color-94A3B8 text-[12px] font-800 truncate">
{{ node.description }}
</div>
<div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB text-[12px] font-900">

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

@@ -10,10 +10,10 @@
</div>
<div v-if="hasCaption" class="scenic-image-card__caption">
<div v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-900 ellipsis-1">
<div v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-900 truncate">
{{ caption.title }}
</div>
<div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-900 ellipsis-1">
<div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-900 truncate">
{{ caption.subtitle }}
</div>
</div>

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

@@ -7,8 +7,8 @@
<slot name="icon">{{ icon }}</slot>
</div>
<div class="visual-action-row__body flex-full">
<div class="visual-action-row__title color-1E293B text-[14px] font-900 ellipsis-1">{{ title }}</div>
<div v-if="subtitle" class="visual-action-row__subtitle ellipsis-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 }}
</div>
</div>

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 ellipsis-1">{{ title }}</div>
<div class="visual-detail__title flex-full color-1E293B text-[14px] font-900 truncate">{{ title }}</div>
<BadgePill v-if="tag" :label="tag" :tone="tone" />
</div>
<slot />

4
src/pages/order/order/components/GoodsInfo/index.vue
View File

@@ -3,7 +3,7 @@
<!-- 酒店类型入住离店日期部分 -->
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
<div class="text-[16px] font-medium color-000 leading-[24px] ellipsis-1">
<div class="text-[16px] font-medium color-000 leading-[24px] truncate">
{{ orderData.commodityName }}
</div>
@@ -21,7 +21,7 @@
</div>
<div v-if="orderType != 0" class=" bg-white p-[12px] rounded-[12px] mb-12">
<div class="text-[16px] font-medium color-000 leading-[24px] ellipsis-1 mb-8">
<div class="text-[16px] font-medium color-000 leading-[24px] truncate mb-8">
{{ orderData.commodityName }}
</div>