zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui-layout): correct flex text truncation issues

Browse Source 
Add min-w-0, w-full, and block classes to flex child elements and text nodes across various UI components to ensure text truncation works correctly. Remove outdated hardcoded card item width styles from global SCSS and replace them with inline responsive width classes where appropriate.
This commit is contained in:
duanshuwen
2026-07-25 19:17:13 +08:00
parent 04a7acc8b3
commit 7913db7a83
27 changed files with 82 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/SwipeCards/index.vue
View File

@@ -12,8 +12,8 @@
<!-- 底部：价格 + 购买按钮 --> <!-- 底部：价格 + 购买按钮 -->
<view class="card-footer p-[12px] flex justify-between items-center"> <view class="card-footer p-[12px] flex justify-between items-center">
<view class="border-box"> <view class="border-box min-w-0 flex-1">
<view class="text-[14px] font-[500] text-[#333333] truncate"> <view class="w-full text-[14px] font-[500] text-[#333333] truncate">
{{ card.commodityName }} {{ card.commodityName }}
</view> </view>
<view class="card-price-row text-[#333333]"> <view class="card-price-row text-[#333333]">
@@ -221,4 +221,4 @@ const placeOrderHandle = (item) => {
<style scoped lang="scss"> <style scoped lang="scss">
@import "./styles/index.scss"; @import "./styles/index.scss";
</style> </style>

8
src/pages-aigc/home/components/TemplateCard/index.vue
View File

@@ -11,11 +11,11 @@
<view class="template-media-shade" /> <view class="template-media-shade" />
</view> </view>
<view class="template-copy"> <view class="template-copy box-border w-full min-w-0">
<text class="template-badge">{{ template.templateTag }}</text> <text class="template-badge">{{ template.templateTag }}</text>
<text class="template-title truncate">{{ template.templateTitle || template.templateName }}</text> <text class="template-title block w-[178px] truncate">{{ template.templateTitle || template.templateName }}</text>
<text class="template-desc truncate">{{ template.templateSubTitle }}</text> <text class="template-desc block w-[178px] truncate">{{ template.templateSubTitle }}</text>
<text class="template-note truncate">{{ template.templateDescription }}</text> <text class="template-note block w-[172px] truncate">{{ template.templateDescription }}</text>
<button class="template-select" type="default" @tap.stop="emit('select')"> <button class="template-select" type="default" @tap.stop="emit('select')">
选这个模板 选这个模板
</button> </button>

8
src/pages-aigc/record/components/RecordCard/index.vue
View File

@@ -7,10 +7,10 @@
<text v-if="isGenerating" class="record-card-media-text">生成中</text> <text v-if="isGenerating" class="record-card-media-text">生成中</text>
</view> </view>
<view class="record-card-copy"> <view class="record-card-copy w-full min-w-0">
<text class="record-card-title truncate">{{ title }}</text> <text class="record-card-title block w-full truncate">{{ title }}</text>
<text class="record-card-time truncate">{{ record.createTime }}</text> <text class="record-card-time block w-full truncate">{{ record.createTime }}</text>
<text class="record-card-status truncate">{{ statusText }}</text> <text class="record-card-status block w-full truncate">{{ statusText }}</text>
</view> </view>
<view v-if="actionText" class="record-card-action"> <view v-if="actionText" class="record-card-action">

4
src/pages-booking/index.vue
View File

@@ -8,12 +8,12 @@
<view class="booking-content flex-1 p-[12px] overflow-hidden scroll-y"> <view class="booking-content flex-1 p-[12px] overflow-hidden scroll-y">
<!-- 预约内容 --> <!-- 预约内容 -->
<view class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]"> <view class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
<!-- 酒店类型入住离店日期部分 --> <!-- 酒店类型入住离店日期部分 -->
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true" <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true"
@click="navigateToDetail(orderData)" /> @click="navigateToDetail(orderData)" />
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate"> <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
{{ orderData.commodityName }} {{ orderData.commodityName }}
</view> </view>

8
src/pages-order/order/components/GoodsInfo/index.vue
View File

@@ -1,9 +1,9 @@
<template> <template>
<view v-if="orderType == 0" class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]"> <view v-if="orderType == 0" class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
<!-- 酒店类型入住离店日期部分 --> <!-- 酒店类型入住离店日期部分 -->
<DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" /> <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" />
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate"> <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
{{ orderData.commodityName }} {{ orderData.commodityName }}
</view> </view>
@@ -20,8 +20,8 @@
</view> </view>
</view> </view>
<view v-if="orderType != 0" class="border-box bg-white p-[12px] rounded-[12px] mb-[12px]"> <view v-if="orderType != 0" class="border-box w-full min-w-0 bg-white p-[12px] rounded-[12px] mb-[12px]">
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate mb-[8px]"> <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate mb-[8px]">
{{ orderData.commodityName }} {{ orderData.commodityName }}
</view> </view>

4
src/pages-order/order/components/OrderQrcode/index.vue
View File

@@ -13,8 +13,8 @@
<view class="bg-white rounded-[12px] flex flex-col items-center justify-center p-[12px] mb-[12px] mx-[12px]"> <view class="bg-white rounded-[12px] flex flex-col items-center justify-center p-[12px] mb-[12px] mx-[12px]">
<view class="flex w-full flex-row items-center justify-between py-[4px]"> <view class="flex w-full flex-row items-center justify-between py-[4px]">
<view> <view class="min-w-0 flex-1">
<view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate"> <view class="w-full text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
{{ selectedVoucher.name }} {{ selectedVoucher.name }}
</view> </view>
</view> </view>

4
src/pages-quick/components/Card/index.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<view class="card bg-white p-[8px] rounded-[12px] flex flex-items-start m-[12px]" @click.stop="handleClick(item)"> <view class="card bg-white p-[8px] rounded-[12px] flex flex-items-start m-[12px]" @click.stop="handleClick(item)">
<image class="left rounded-[10px]" :src="item.commodityPhoto" mode="aspectFill" /> <image class="left rounded-[10px]" :src="item.commodityPhoto" mode="aspectFill" />
<view class="right flex-1 pl-[12px]"> <view class="right min-w-0 flex-1 pl-[12px]">
<view class="text-[16px] leading-[24px] text-[#171717] mb-[4px]"> <view class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
{{ item.commodityName }} {{ item.commodityName }}
</view> </view>
<view v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] truncate"> <view v-if="item.commodityFacility" class="w-full text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] truncate">
{{ item.commodityFacility.join(" ") }} {{ item.commodityFacility.join(" ") }}
</view> </view>
<view class="text-[12px] leading-[18px] color-43669A"> <view class="text-[12px] leading-[18px] color-43669A">

4
src/pages/ChatMain/HomeWelcome/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<view class="home-welcome-panel"> <view class="home-welcome-panel">
<view class="home-welcome-header"> <view class="home-welcome-header w-full min-w-0">
<text class="home-welcome-title truncate"> <text class="home-welcome-title block w-0 min-w-0 truncate">
{{ props.mainPageDataModel.welcomeContent || "小七欢迎你～" }} {{ props.mainPageDataModel.welcomeContent || "小七欢迎你～" }}
</text> </text>
<text v-if="weatherText" class="home-welcome-weather"> <text v-if="weatherText" class="home-welcome-weather">

4
src/pages/ChatModule/FacilityLocationCard/index.vue
View File

@@ -3,11 +3,11 @@
<image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" /> <image class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
<view class="facility-location-card__body px-[24px] pb-[24px]"> <view class="facility-location-card__body px-[24px] pb-[24px]">
<view class="facility-location-card__title-row flex items-center"> <view class="facility-location-card__title-row flex w-full min-w-0 items-center">
<view class="facility-location-card__badge text-[#2563eb] bg-[#eff6ff] text-[12px] font-bold"> <view class="facility-location-card__badge text-[#2563eb] bg-[#eff6ff] text-[12px] font-bold">
{{ type.text }} {{ type.text }}
</view> </view>
<view class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate"> <view class="facility-location-card__title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }} {{ data.title }}
</view> </view>
</view> </view>

4
src/pages/ChatModule/FaqHelpCard/index.vue
View File

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

4
src/pages/ChatModule/LongTextGuideCard/index.vue
View File

@@ -21,12 +21,12 @@
</view> </view>
<view v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] overflow-hidden"> <view v-else class="long-text-guide-card__detail-card bg-white rounded-[24px] overflow-hidden">
<view class="long-text-guide-card__detail-header flex items-center border-bottom-F1F5F9"> <view class="long-text-guide-card__detail-header box-border flex w-full min-w-0 items-center border-bottom-F1F5F9">
<view class="long-text-guide-card__back flex items-center justify-center rounded-full font-bold" <view class="long-text-guide-card__back flex items-center justify-center rounded-full font-bold"
@click="closeDetail"> @click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons> <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view> </view>
<view class="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold truncate"> <view class="long-text-guide-card__detail-title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate">
{{ activeItem.title }} {{ activeItem.title }}
</view> </view>
<view class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold" <view class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold"

6
src/pages/ChatModule/MapNavigationCard/index.vue
View File

@@ -9,11 +9,11 @@
</view> </view>
<view class="map-navigation-card__content flex items-center"> <view class="map-navigation-card__content flex items-center">
<view class="map-navigation-card__info flex-1"> <view class="map-navigation-card__info min-w-0 flex-1">
<view class="map-navigation-card__title text-[#1e293b] text-[18px] font-bold truncate"> <view class="map-navigation-card__title w-full text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }} {{ data.title }}
</view> </view>
<view class="map-navigation-card__distance text-[#94a3b8] text-[14px] font-bold truncate"> <view class="map-navigation-card__distance w-full text-[#94a3b8] text-[14px] font-bold truncate">
{{ data.distance }} {{ data.distance }}
</view> </view>
</view> </view>

4
src/pages/ChatModule/PoiCompareCard/index.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<view class="poi-compare-card w-full"> <view class="poi-compare-card w-full">
<view v-if="!isDetail" class="poi-compare-card__overview bg-white rounded-[24px] overflow-hidden"> <view v-if="!isDetail" class="poi-compare-card__overview bg-white rounded-[24px] overflow-hidden">
<view class="poi-compare-card__head flex items-center"> <view class="poi-compare-card__head flex w-full min-w-0 items-center">
<view class="poi-compare-card__mark flex items-center justify-center rounded-full shrink-0"> <view class="poi-compare-card__mark flex items-center justify-center rounded-full shrink-0">
{{ data.icon }} {{ data.icon }}
</view> </view>
<view class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-1"> <view class="poi-compare-card__title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate flex-1">
{{ data.title }} {{ data.title }}
</view> </view>
</view> </view>

4
src/pages/ChatModule/RecommendPostsList/index.vue
View File

@@ -11,8 +11,8 @@
<view class="shadow absolute rounded-[16px]"></view> <view class="shadow absolute rounded-[16px]"></view>
</view> </view>
<view class="card-text border-box"> <view class="card-text border-box w-full min-w-0">
<view class="text-[11px] text-[#99a0ae] truncate"> <view class="w-full text-[11px] text-[#99a0ae] truncate">
{{ item.topic }} {{ item.topic }}
</view> </view>
</view> </view>

4
src/pages/ChatModule/RecommendationListCard/index.vue
View File

@@ -6,8 +6,8 @@
class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden" class="recommendation-list-card__item inline-block bg-white rounded-[20px] overflow-hidden"
:class="{ 'is-disabled': disabled }" @click="handleSelect(item)"> :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
<image class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" /> <image class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
<view class="recommendation-list-card__body p-[16px]"> <view class="recommendation-list-card__body box-border w-full min-w-0 p-[16px]">
<view class="recommendation-list-card__name text-[#1e293b] text-[18px] font-bold truncate"> <view class="recommendation-list-card__name w-full text-[#1e293b] text-[18px] font-bold truncate">
{{ item.title }} {{ item.title }}
</view> </view>
<view <view

14
src/pages/ChatModule/RoutePlanCard/index.vue
View File

@@ -4,8 +4,8 @@
class="route-plan-card__summary flex items-center bg-white rounded-[24px] overflow-hidden w-full" class="route-plan-card__summary flex items-center bg-white rounded-[24px] overflow-hidden w-full"
:class="{ 'is-disabled': disabled }" @click="openDetail"> :class="{ 'is-disabled': disabled }" @click="openDetail">
<image class="route-plan-card__cover block shrink-0" :src="data.image" mode="aspectFill" /> <image class="route-plan-card__cover block shrink-0" :src="data.image" mode="aspectFill" />
<view class="route-plan-card__body flex-1"> <view class="route-plan-card__body min-w-0 flex-1">
<view class="route-plan-card__title text-[#1e293b] text-[18px] font-bold truncate"> <view class="route-plan-card__title w-full text-[#1e293b] text-[18px] font-bold truncate">
{{ data.title }} {{ data.title }}
</view> </view>
<view class="route-plan-card__tags flex items-center"> <view class="route-plan-card__tags flex items-center">
@@ -21,11 +21,11 @@
</view> </view>
<view v-else class="route-plan-card__detail bg-white rounded-[24px] overflow-hidden w-full"> <view v-else class="route-plan-card__detail bg-white rounded-[24px] overflow-hidden w-full">
<view class="route-plan-card__detail-head flex items-center"> <view class="route-plan-card__detail-head flex w-full min-w-0 items-center">
<view class="route-plan-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail"> <view class="route-plan-card__back flex items-center justify-center rounded-full shrink-0" @click="closeDetail">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons> <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view> </view>
<view class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold truncate flex-1"> <view class="route-plan-card__detail-title w-0 min-w-0 text-[#1e293b] text-[18px] font-bold truncate flex-1">
{{ data.title }} {{ data.title }}
</view> </view>
<view class="route-plan-card__detail-badge text-[#047857] bg-[#ecfdf5] text-[12px] font-bold"> <view class="route-plan-card__detail-badge text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
@@ -42,11 +42,11 @@
</view> </view>
<view class="route-plan-card__node bg-white rounded-[20px] flex items-center"> <view class="route-plan-card__node bg-white rounded-[20px] flex items-center">
<image class="route-plan-card__node-image block shrink-0" :src="node.image" mode="aspectFill" /> <image class="route-plan-card__node-image block shrink-0" :src="node.image" mode="aspectFill" />
<view class="route-plan-card__node-body flex-1"> <view class="route-plan-card__node-body min-w-0 flex-1">
<view class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold truncate"> <view class="route-plan-card__node-title w-full text-[#1e293b] text-[16px] font-bold truncate">
{{ node.title }} {{ node.title }}
</view> </view>
<view class="route-plan-card__node-desc text-[#94a3b8] text-[12px] font-bold truncate"> <view class="route-plan-card__node-desc w-full text-[#94a3b8] text-[12px] font-bold truncate">
{{ node.description }} {{ node.description }}
</view> </view>
<view v-if="node.tag" <view v-if="node.tag"

6
src/pages/ChatModule/ScenicImageCard/index.vue
View File

@@ -9,11 +9,11 @@
{{ action.icon }} {{ action.icon }}
</view> </view>
<view v-if="hasCaption" class="scenic-image-card__caption"> <view v-if="hasCaption" class="scenic-image-card__caption box-border w-full min-w-0">
<view v-if="caption.title" class="scenic-image-card__title text-white text-[18px] font-bold truncate"> <view v-if="caption.title" class="scenic-image-card__title w-full text-white text-[18px] font-bold truncate">
{{ caption.title }} {{ caption.title }}
</view> </view>
<view v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-bold truncate"> <view v-if="caption.subtitle" class="scenic-image-card__subtitle w-full text-white text-[14px] font-bold truncate">
{{ caption.subtitle }} {{ caption.subtitle }}
</view> </view>
</view> </view>

6
src/pages/ChatModule/SharedVisual/ActionRow.vue
View File

@@ -6,9 +6,9 @@
:class="toneClass"> :class="toneClass">
<slot name="icon">{{ icon }}</slot> <slot name="icon">{{ icon }}</slot>
</view> </view>
<view class="visual-action-row__body flex-1"> <view class="visual-action-row__body min-w-0 flex-1">
<view class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view> <view class="visual-action-row__title w-full text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
<view v-if="subtitle" class="visual-action-row__subtitle truncate"> <view v-if="subtitle" class="visual-action-row__subtitle w-full truncate">
{{ subtitle }} {{ subtitle }}
</view> </view>
</view> </view>

4
src/pages/ChatModule/SharedVisual/DetailShell.vue
View File

@@ -1,11 +1,11 @@
<template> <template>
<CardShell variant="detail"> <CardShell variant="detail">
<view class="visual-detail__header flex items-center px-[16px] border-bottom-F1F5F9"> <view class="visual-detail__header box-border flex w-full min-w-0 items-center px-[16px] border-bottom-F1F5F9">
<view class="visual-detail__back mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center" <view class="visual-detail__back mr-[8px] rounded-full bg-[#f8fafc] text-[#334155] font-bold text-center"
@click="$emit('back')"> @click="$emit('back')">
<uni-icons type="left" size="16" color="#CBD5E1"></uni-icons> <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
</view> </view>
<view class="visual-detail__title flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view> <view class="visual-detail__title w-0 min-w-0 flex-1 text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
<BadgePill v-if="tag" :label="tag" :tone="tone" /> <BadgePill v-if="tag" :label="tag" :tone="tone" />
</view> </view>
<slot /> <slot />

6
src/pages/Discovery/components/CardSwiper/index.vue
View File

@@ -14,14 +14,14 @@
<image class="card-image" :src="slot.item.coverImage" mode="aspectFill" /> <image class="card-image" :src="slot.item.coverImage" mode="aspectFill" />
</view> </view>
<view class="card-body"> <view class="card-body box-border w-full min-w-0">
<view v-if="slot.item.tag" class="card-tag"> <view v-if="slot.item.tag" class="card-tag">
{{ slot.item.tag }} {{ slot.item.tag }}
</view> </view>
<view class="card-title truncate"> <view class="card-title w-full truncate">
{{ slot.item.title }} {{ slot.item.title }}
</view> </view>
<view v-if="slot.item.subTitle" class="card-desc truncate"> <view v-if="slot.item.subTitle" class="card-desc w-full truncate">
{{ slot.item.subTitle }} {{ slot.item.subTitle }}
</view> </view>
</view> </view>

10
src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue
View File

@@ -8,15 +8,15 @@
</view> </view>
</view> </view>
<view class="audio-content"> <view class="audio-content min-w-0 flex-1">
<text class="audio-title truncate">{{ normalizedItem.title }}</text> <text class="audio-title block w-full truncate">{{ normalizedItem.title }}</text>
<text class="audio-subtitle truncate">{{ normalizedItem.subTitle }}</text> <text class="audio-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
<view class="audio-progress-row"> <view class="audio-progress-row w-full min-w-0">
<view class="audio-progress-track"> <view class="audio-progress-track">
<view class="audio-progress-fill" :style="{ width: `${normalizedItem.progress}%` }" /> <view class="audio-progress-fill" :style="{ width: `${normalizedItem.progress}%` }" />
</view> </view>
<text class="audio-time truncate"> <text class="audio-time block w-[90px] truncate">
{{ normalizedItem.currentTime }} / {{ normalizedItem.duration }} {{ normalizedItem.currentTime }} / {{ normalizedItem.duration }}
</text> </text>
</view> </view>

6
src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue
View File

@@ -16,9 +16,9 @@
</view> </view>
</view> </view>
<view class="guide-map-content"> <view class="guide-map-content min-w-0 flex-1">
<text class="guide-map-title truncate">{{ normalizedItem.title }}</text> <text class="guide-map-title block w-full truncate">{{ normalizedItem.title }}</text>
<text class="guide-map-subtitle truncate">{{ normalizedItem.subTitle }}</text> <text class="guide-map-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
</view> </view>
</view> </view>
</template> </template>

14
src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<view class="discovery-photo-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect"> <view class="discovery-photo-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
<view class="photo-visual"> <view class="photo-visual w-[88px] min-w-0">
<view class="camera-illustration"> <view class="camera-illustration">
<view class="camera-top" /> <view class="camera-top" />
<view class="camera-flash" /> <view class="camera-flash" />
@@ -12,21 +12,21 @@
<view class="camera-dot is-small" /> <view class="camera-dot is-small" />
</view> </view>
</view> </view>
<text class="photo-badge truncate">{{ normalizedItem.badge }}</text> <text class="photo-badge w-[calc(100%_-_18px)] truncate">{{ normalizedItem.badge }}</text>
</view> </view>
<view class="photo-content"> <view class="photo-content min-w-0 flex-1">
<text class="photo-title truncate">{{ normalizedItem.title }}</text> <text class="photo-title block w-full truncate">{{ normalizedItem.title }}</text>
<text class="photo-subtitle truncate">{{ normalizedItem.subTitle }}</text> <text class="photo-subtitle block w-full truncate">{{ normalizedItem.subTitle }}</text>
<view class="photo-options"> <view class="photo-options">
<view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option" <view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option min-w-0 flex-1"
hover-class="is-option-pressed" hover-stay-time="80" @tap.stop="handleOptionSelect(option, index)"> hover-class="is-option-pressed" hover-stay-time="80" @tap.stop="handleOptionSelect(option, index)">
<view class="photo-option-thumb"> <view class="photo-option-thumb">
<image v-if="option.coverImage" class="photo-option-image" :src="option.coverImage" mode="aspectFill" /> <image v-if="option.coverImage" class="photo-option-image" :src="option.coverImage" mode="aspectFill" />
<view v-else class="photo-option-placeholder" :class="`is-${index}`" /> <view v-else class="photo-option-placeholder" :class="`is-${index}`" />
</view> </view>
<text class="photo-option-label truncate">{{ option.label }}</text> <text class="photo-option-label block w-[76px] truncate">{{ option.label }}</text>
</view> </view>
</view> </view>
</view> </view>

8
src/pages/Discovery/components/ExploreCards/index.vue
View File

@@ -9,10 +9,10 @@
<view class="explore-card-gradient" /> <view class="explore-card-gradient" />
<view class="explore-card-content"> <view class="explore-card-content box-border w-full min-w-0">
<text class="explore-card-tag truncate">{{ item.tag }}</text> <text class="explore-card-tag block w-full truncate">{{ item.tag }}</text>
<text class="explore-card-title truncate">{{ item.title }}</text> <text class="explore-card-title block w-full truncate">{{ item.title }}</text>
<text v-if="item.subTitle" class="explore-card-desc truncate"> <text v-if="item.subTitle" class="explore-card-desc block w-full truncate">
{{ item.subTitle }} {{ item.subTitle }}
</text> </text>
</view> </view>

6
src/pages/Discovery/components/HeritageQuickPrompts/index.vue
View File

@@ -4,9 +4,9 @@
<view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="prompt-card" <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="prompt-card"
hover-class="is-pressed" hover-stay-time="80" @tap="handleTap(item.raw, index)"> hover-class="is-pressed" hover-stay-time="80" @tap="handleTap(item.raw, index)">
<view class="prompt-mark" /> <view class="prompt-mark" />
<view class="prompt-copy"> <view class="prompt-copy min-w-0 flex-1">
<text class="prompt-title truncate">{{ item.title }}</text> <text class="prompt-title block w-full truncate">{{ item.title }}</text>
<text class="prompt-desc truncate">{{ item.subTitle }}</text> <text class="prompt-desc block w-full truncate">{{ item.subTitle }}</text>
</view> </view>
</view> </view>
</view> </view>

8
src/pages/Discovery/components/QuickQuestions/index.vue
View File

@@ -2,13 +2,13 @@
<view class="container pl-[12px]"> <view class="container pl-[12px]">
<view class="container-scroll text-[0px] overflow-x-auto whitespace-nowrap"> <view class="container-scroll text-[0px] overflow-x-auto whitespace-nowrap">
<view class="card-item bg-white inline-block rounded-[20px] mr-[10px]" v-for="(item, index) in list" :key="index" <view class="card-item inline-block w-[150px] mr-[10px] rounded-[20px] bg-white" v-for="(item, index) in list"
@click="sendReply(item)"> :key="index" @click="sendReply(item)">
<view class="flex flex-row justify-start p-[10px]"> <view class="box-border flex w-full min-w-0 flex-row justify-start overflow-hidden p-[10px]">
<image class="card-img shrink-0 rounded-[14px]" :src="createSvgIndex(index)" /> <image class="card-img shrink-0 rounded-[14px]" :src="createSvgIndex(index)" />
<view class=" flex flex-col flex-1 pl-[8px] py-[4px]"> <view class="flex w-0 min-w-0 flex-1 flex-col overflow-hidden pl-[8px] py-[4px]">
<view class="w-full text-[12px] font-[600] text-[#171717] truncate"> <view class="w-full text-[12px] font-[600] text-[#171717] truncate">
{{ item.title }} {{ item.title }}
</view> </view>

5
src/pages/Discovery/components/QuickQuestions/styles/index.scss
View File

@@ -2,11 +2,6 @@
} }
.card-item {
min-width: 130px;
max-width: 150px;
}
.card-img { .card-img {
height: 40px; height: 40px;
width: 40px; width: 40px;