refactor: replace custom ellipsis classes with native utilities

delete unused ellipsis.scss partial and its import, update all components to use truncate and line-clamp-2 utilities

src/components/CreateServiceOrder/index.vue

@@ -49,7 +49,7 @@
         <view class="border-box left flex-full pr-[20px]">
           <view class="text-[12px] text-[#525866] leading-[20px] mb-[4px]">所在位置：{{ roomId }}</view>
           <view class="text-[12px] text-[#525866] leading-[20px] mb-[4px]">联系方式: {{ contactPhone }}</view>
-          <view class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">需求描述: {{ contactText }}</view>
+          <view class="text-[12px] text-[#525866] leading-[20px] line-clamp-2">需求描述: {{ contactText }}</view>
         </view>
 
         <image v-if="contentImgUrl" class="right rounded-[6px]" :src="contentImgUrl" mode="aspectFill" />

src/components/Feedback/index.vue

@@ -28,7 +28,7 @@
 
       <view v-else class="border-box left flex-full p-[12px]">
         <view class="text-[12px] text-[#525866] leading-[20px] mb-[4px]">联系方式: {{ contactPhone }}</view>
-        <view class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">意见内容: {{ contactText }}</view>
+        <view class="text-[12px] text-[#525866] leading-[20px] line-clamp-2">意见内容: {{ contactText }}</view>
       </view>
 
       <view class="footer-help flex flex-items-center pl-[12px] mb-[12px]">

src/components/SwipeCards/index.vue

@@ -13,7 +13,7 @@
         <!-- 底部：价格 + 购买按钮 -->
         <view class="card-footer p-[12px] flex flex-justify-between flex-items-center">
           <view class="border-box">
-            <view class="text-[14px] font-[500] text-[#333333] ellipsis-1">
+            <view class="text-[14px] font-[500] text-[#333333] truncate">
               {{ card.commodityName }}
             </view>
             <view class="card-price-row text-[#333333]">

src/pages-aigc/home/components/TemplateCard/index.vue

@@ -1,37 +1,21 @@
 <template>
-  <view
+  <view class="template-card" :class="{ 'is-active': active }">
-    class="template-card"
-    :class="{ 'is-active': active }"
-  >
     <view class="template-media">
       <view class="template-media-placeholder" />
       <image v-if="templatePosterUrl" class="template-image" :src="templatePosterUrl" mode="aspectFill" />
-      <video
+      <video v-if="templateVideoUrl && playing && !videoLoadFailed" class="template-video"
-        v-if="templateVideoUrl && playing && !videoLoadFailed"
+        :class="{ 'is-ready': videoReady }" :src="templateVideoUrl" autoplay muted loop :controls="false"
-        class="template-video"
+        :show-play-btn="false" :show-center-play-btn="false" :show-fullscreen-btn="false"
-        :class="{ 'is-ready': videoReady }"
+        :enable-progress-gesture="false" object-fit="cover" @play="handleVideoReady" @timeupdate="handleVideoReady"
-        :src="templateVideoUrl"
+        @error="handleVideoError" />
-        autoplay
-        muted
-        loop
-        :controls="false"
-        :show-play-btn="false"
-        :show-center-play-btn="false"
-        :show-fullscreen-btn="false"
-        :enable-progress-gesture="false"
-        object-fit="cover"
-        @play="handleVideoReady"
-        @timeupdate="handleVideoReady"
-        @error="handleVideoError"
-      />
       <view class="template-media-shade" />
     </view>
 
     <view class="template-copy">
       <text class="template-badge">{{ template.templateTag }}</text>
-      <text class="template-title ellipsis-1">{{ template.templateTitle || template.templateName }}</text>
+      <text class="template-title truncate">{{ template.templateTitle || template.templateName }}</text>
-      <text class="template-desc ellipsis-1">{{ template.templateSubTitle }}</text>
+      <text class="template-desc truncate">{{ template.templateSubTitle }}</text>
-      <text class="template-note ellipsis-1">{{ template.templateDescription }}</text>
+      <text class="template-note truncate">{{ template.templateDescription }}</text>
       <button class="template-select" type="default" @tap.stop="emit('select')">
         选这个模板
       </button>

src/pages-aigc/record/components/RecordCard/index.vue

@@ -8,9 +8,9 @@
     </view>
 
     <view class="record-card-copy">
-      <text class="record-card-title ellipsis-1">{{ title }}</text>
+      <text class="record-card-title truncate">{{ title }}</text>
-      <text class="record-card-time ellipsis-1">{{ record.createTime }}</text>
+      <text class="record-card-time truncate">{{ record.createTime }}</text>
-      <text class="record-card-status ellipsis-1">{{ statusText }}</text>
+      <text class="record-card-status truncate">{{ statusText }}</text>
     </view>
 
     <view v-if="actionText" class="record-card-action">

src/pages-booking/index.vue

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

src/pages-order/order/components/GoodsInfo/index.vue

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

src/pages-order/order/components/OrderQrcode/index.vue

@@ -15,7 +15,7 @@
 
         <view class="flex w-full flex-row flex-items-center flex-justify-between py-[4px]">
           <view>
-            <view class="text-[16px] font-[500] text-[#000000] leading-[24px] ellipsis-1">
+            <view class="text-[16px] font-[500] text-[#000000] leading-[24px] truncate">
               {{ selectedVoucher.name }}
             </view>
           </view>

src/pages-quick/components/Card/index.vue

@@ -5,7 +5,7 @@
       <view class="text-[16px] leading-[24px] text-[#171717] mb-[4px]">
         {{ item.commodityName }}
       </view>
-      <view v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] ellipsis-1">
+      <view v-if="item.commodityFacility" class="text-[12px] leading-[16px] text-[#99a0ae] mb-[4px] truncate">
         {{ item.commodityFacility.join(" ") }}
       </view>
       <view class="text-[12px] leading-[18px] color-43669A">

src/pages-service/order/components/OrderCard/index.vue

@@ -13,7 +13,7 @@
       <view class="border-box left flex-full pr-[20px]">
         <view class="text-[12px] text-[#525866] leading-[20px] mb-[4px]">所在位置：{{ orderData.roomNo }}</view>
         <view class="text-[12px] text-[#525866] leading-[20px] mb-[4px]">联系方式: {{ orderData.userPhone }}</view>
-        <view class="text-[12px] text-[#525866] leading-[20px] ellipsis-2">需求描述: {{ orderData.content }}</view>
+        <view class="text-[12px] text-[#525866] leading-[20px] line-clamp-2">需求描述: {{ orderData.content }}</view>
       </view>
 
       <image v-if="orderData.contentImgUrl" class="right rounded-[6px]" :src="orderData.contentImgUrl"

src/pages/ChatMain/HomeWelcome/index.vue

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

src/pages/ChatModule/FacilityLocationCard/index.vue

@@ -7,7 +7,7 @@
         <view class="facility-location-card__badge text-[#2563eb] bg-[#eff6ff] text-[12px] font-bold">
           {{ type.text }}
         </view>
-        <view class="facility-location-card__title text-[#1e293b] text-[18px] font-bold ellipsis-1">
+        <view class="facility-location-card__title text-[#1e293b] text-[18px] font-bold truncate">
           {{ data.title }}
         </view>
       </view>

src/pages/ChatModule/FaqHelpCard/index.vue

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

src/pages/ChatModule/LongTextGuideCard/index.vue

@@ -10,7 +10,7 @@
         <view class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
           {{ item.title }}
         </view>
-        <view class="long-text-guide-card__summary-text text-[#94a3b8] text-[14px] font-[500] ellipsis-2">
+        <view class="long-text-guide-card__summary-text text-[#94a3b8] text-[14px] font-[500] line-clamp-2">
           {{ item.summary }}
         </view>
         <view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
@@ -26,7 +26,7 @@
           @click="closeDetail">
           <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
         </view>
-        <view class="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold ellipsis-1">
+        <view class="long-text-guide-card__detail-title text-[#1e293b] text-[18px] font-bold truncate">
           {{ activeItem.title }}
         </view>
         <view class="long-text-guide-card__badge long-text-guide-card__detail-badge text-[12px] font-bold"

src/pages/ChatModule/LongTextGuideCardPreview/index.vue

@@ -11,7 +11,7 @@
       <view class="long-text-guide-card__summary-title text-[#1e293b] text-[18px] font-bold">
         {{ item.title }}
       </view>
-      <view class="long-text-guide-card__summary-text text-[#94a3b8] text-[14px] font-[500] ellipsis-2">
+      <view class="long-text-guide-card__summary-text text-[#94a3b8] text-[14px] font-[500] line-clamp-2">
         {{ item.summary }}
       </view>
       <view class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">

src/pages/ChatModule/MapNavigationCard/index.vue

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

src/pages/ChatModule/PoiCompareCard/index.vue

@@ -5,7 +5,7 @@
         <view class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
           {{ data.icon }}
         </view>
-        <view class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold ellipsis-1 flex-full">
+        <view class="poi-compare-card__title text-[#1e293b] text-[18px] font-bold truncate flex-full">
           {{ data.title }}
         </view>
       </view>

src/pages/ChatModule/RecommendPostsList/index.vue

@@ -12,7 +12,7 @@
         </view>
 
         <view class="card-text border-box">
-          <view class="text-[11px] text-[#99a0ae] ellipsis-1">
+          <view class="text-[11px] text-[#99a0ae] truncate">
             {{ item.topic }}
           </view>
         </view>

src/pages/ChatModule/RecommendationListCard/index.vue

@@ -7,7 +7,7 @@
         :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
         <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__name text-[#1e293b] text-[18px] font-bold ellipsis-1">
+          <view class="recommendation-list-card__name text-[#1e293b] text-[18px] font-bold truncate">
             {{ item.title }}
           </view>
           <view

src/pages/ChatModule/RoutePlanCard/index.vue

@@ -5,7 +5,7 @@
       :class="{ 'is-disabled': disabled }" @click="openDetail">
       <image class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
       <view class="route-plan-card__body flex-full">
-        <view class="route-plan-card__title text-[#1e293b] text-[18px] font-bold ellipsis-1">
+        <view class="route-plan-card__title text-[#1e293b] text-[18px] font-bold truncate">
           {{ data.title }}
         </view>
         <view 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>
         </view>
-        <view class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold ellipsis-1 flex-full">
+        <view class="route-plan-card__detail-title text-[#1e293b] text-[18px] font-bold truncate flex-full">
           {{ data.title }}
         </view>
         <view class="route-plan-card__detail-badge text-[#047857] bg-[#ecfdf5] text-[12px] font-bold">
@@ -44,10 +44,10 @@
             <view class="route-plan-card__node bg-white rounded-[20px] flex flex-items-center">
               <image class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
               <view class="route-plan-card__node-body flex-full">
-                <view class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold ellipsis-1">
+                <view class="route-plan-card__node-title text-[#1e293b] text-[16px] font-bold truncate">
                   {{ node.title }}
                 </view>
-                <view class="route-plan-card__node-desc text-[#94a3b8] text-[12px] font-bold ellipsis-1">
+                <view class="route-plan-card__node-desc text-[#94a3b8] text-[12px] font-bold truncate">
                   {{ node.description }}
                 </view>
                 <view v-if="node.tag"

src/pages/ChatModule/ScenicImageCard/index.vue

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

src/pages/ChatModule/SharedVisual/ActionRow.vue

@@ -7,8 +7,8 @@
       <slot name="icon">{{ icon }}</slot>
     </view>
     <view class="visual-action-row__body flex-full">
-      <view class="visual-action-row__title text-[#1e293b] text-[14px] font-bold ellipsis-1">{{ title }}</view>
+      <view class="visual-action-row__title text-[#1e293b] text-[14px] font-bold truncate">{{ title }}</view>
-      <view v-if="subtitle" class="visual-action-row__subtitle ellipsis-1">
+      <view v-if="subtitle" class="visual-action-row__subtitle truncate">
         {{ subtitle }}
       </view>
     </view>

src/pages/ChatModule/SharedVisual/DetailShell.vue

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

src/pages/Discovery/components/CardSwiper/index.vue

@@ -1,27 +1,14 @@
 <template>
-  <view
+  <view class="card-swiper" :class="{ 'is-single': props.list.length <= 1 }" @touchstart="handleTouchStart"
-    class="card-swiper"
+    @touchmove.stop.prevent="handleTouchMove" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel">
-    :class="{ 'is-single': props.list.length <= 1 }"
-    @touchstart="handleTouchStart"
-    @touchmove.stop.prevent="handleTouchMove"
-    @touchend="handleTouchEnd"
-    @touchcancel="handleTouchCancel"
-  >
     <view class="swiper-stage">
-      <view
+      <view v-for="slot in renderSlots" :key="slot.key" class="swiper-card" :class="[
-        v-for="slot in renderSlots"
+        `is-${slot.role}`,
-        :key="slot.key"
+        {
-        class="swiper-card"
+          'is-current': slot.role === 'current',
-        :class="[
+          'is-fill-fade': slot.key === fillFadeKey,
-          `is-${slot.role}`,
+        },
-          {
+      ]" :style="slot.style" @tap="handleCardTap(slot)">
-            'is-current': slot.role === 'current',
-            'is-fill-fade': slot.key === fillFadeKey,
-          },
-        ]"
-        :style="slot.style"
-        @tap="handleCardTap(slot)"
-      >
         <view class="card-shell">
           <view class="card-media">
             <image class="card-image" :src="slot.item.coverImage" mode="aspectFill" />
@@ -31,19 +18,15 @@
             <view v-if="slot.item.tag" class="card-tag">
               {{ slot.item.tag }}
             </view>
-            <view class="card-title ellipsis-1">
+            <view class="card-title truncate">
               {{ slot.item.title }}
             </view>
-            <view v-if="slot.item.subTitle" class="card-desc ellipsis-1">
+            <view v-if="slot.item.subTitle" class="card-desc truncate">
               {{ slot.item.subTitle }}
             </view>
           </view>
 
-          <view
+          <view v-if="canSwipe" class="card-mask" :style="getMaskStyle(slot.role)" />
-            v-if="canSwipe"
-            class="card-mask"
-            :style="getMaskStyle(slot.role)"
-          />
         </view>
       </view>
     </view>

src/pages/Discovery/components/DiscoveryAudioToolCard/index.vue

@@ -1,17 +1,7 @@
 <template>
-  <view
+  <view class="discovery-audio-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
-    class="discovery-audio-tool-card"
-    hover-class="is-pressed"
-    hover-stay-time="80"
-    @tap="handleSelect"
-  >
     <view class="audio-visual">
-      <image
+      <image v-if="normalizedItem.coverImage" class="audio-cover" :src="normalizedItem.coverImage" mode="aspectFill" />
-        v-if="normalizedItem.coverImage"
-        class="audio-cover"
-        :src="normalizedItem.coverImage"
-        mode="aspectFill"
-      />
       <view v-else class="audio-cover audio-cover-fallback" />
       <view class="audio-play">
         <view class="audio-play-triangle" />
@@ -19,17 +9,14 @@
     </view>
 
     <view class="audio-content">
-      <text class="audio-title ellipsis-1">{{ normalizedItem.title }}</text>
+      <text class="audio-title truncate">{{ normalizedItem.title }}</text>
-      <text class="audio-subtitle ellipsis-1">{{ normalizedItem.subTitle }}</text>
+      <text class="audio-subtitle truncate">{{ normalizedItem.subTitle }}</text>
 
       <view class="audio-progress-row">
         <view class="audio-progress-track">
-          <view
+          <view class="audio-progress-fill" :style="{ width: `${normalizedItem.progress}%` }" />
-            class="audio-progress-fill"
-            :style="{ width: `${normalizedItem.progress}%` }"
-          />
         </view>
-        <text class="audio-time ellipsis-1">
+        <text class="audio-time truncate">
           {{ normalizedItem.currentTime }} / {{ normalizedItem.duration }}
         </text>
       </view>

src/pages/Discovery/components/DiscoveryGuideMapToolCard/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <view
+  <view class="discovery-guide-map-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
-    class="discovery-guide-map-tool-card"
-    hover-class="is-pressed"
-    hover-stay-time="80"
-    @tap="handleSelect"
-  >
     <view class="guide-map-visual">
       <view class="guidepost-illustration">
         <view class="guidepost-sign is-pink">
@@ -22,8 +17,8 @@
     </view>
 
     <view class="guide-map-content">
-      <text class="guide-map-title ellipsis-1">{{ normalizedItem.title }}</text>
+      <text class="guide-map-title truncate">{{ normalizedItem.title }}</text>
-      <text class="guide-map-subtitle ellipsis-1">{{ normalizedItem.subTitle }}</text>
+      <text class="guide-map-subtitle truncate">{{ normalizedItem.subTitle }}</text>
     </view>
   </view>
 </template>

src/pages/Discovery/components/DiscoveryPhotoToolCard/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <view
+  <view class="discovery-photo-tool-card" hover-class="is-pressed" hover-stay-time="80" @tap="handleSelect">
-    class="discovery-photo-tool-card"
-    hover-class="is-pressed"
-    hover-stay-time="80"
-    @tap="handleSelect"
-  >
     <view class="photo-visual">
       <view class="camera-illustration">
         <view class="camera-top" />
@@ -17,36 +12,21 @@
           <view class="camera-dot is-small" />
         </view>
       </view>
-      <text class="photo-badge ellipsis-1">{{ normalizedItem.badge }}</text>
+      <text class="photo-badge truncate">{{ normalizedItem.badge }}</text>
     </view>
 
     <view class="photo-content">
-      <text class="photo-title ellipsis-1">{{ normalizedItem.title }}</text>
+      <text class="photo-title truncate">{{ normalizedItem.title }}</text>
-      <text class="photo-subtitle ellipsis-1">{{ normalizedItem.subTitle }}</text>
+      <text class="photo-subtitle truncate">{{ normalizedItem.subTitle }}</text>
 
       <view class="photo-options">
-        <view
+        <view v-for="(option, index) in normalizedItem.options" :key="getOptionKey(option, index)" class="photo-option"
-          v-for="(option, index) in normalizedItem.options"
+          hover-class="is-option-pressed" hover-stay-time="80" @tap.stop="handleOptionSelect(option, index)">
-          :key="getOptionKey(option, index)"
-          class="photo-option"
-          hover-class="is-option-pressed"
-          hover-stay-time="80"
-          @tap.stop="handleOptionSelect(option, index)"
-        >
           <view class="photo-option-thumb">
-            <image
+            <image v-if="option.coverImage" class="photo-option-image" :src="option.coverImage" mode="aspectFill" />
-              v-if="option.coverImage"
+            <view v-else class="photo-option-placeholder" :class="`is-${index}`" />
-              class="photo-option-image"
-              :src="option.coverImage"
-              mode="aspectFill"
-            />
-            <view
-              v-else
-              class="photo-option-placeholder"
-              :class="`is-${index}`"
-            />
           </view>
-          <text class="photo-option-label ellipsis-1">{{ option.label }}</text>
+          <text class="photo-option-label truncate">{{ option.label }}</text>
         </view>
       </view>
     </view>

src/pages/Discovery/components/ExploreCards/index.vue

@@ -1,33 +1,18 @@
 <template>
   <view class="explore-cards">
-    <scroll-view
+    <scroll-view class="explore-scroll" scroll-x show-scrollbar="false">
-      class="explore-scroll"
-      scroll-x
-      show-scrollbar="false"
-    >
       <view class="explore-track">
-        <view
+        <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="explore-card"
-          v-for="(item, index) in normalizedList"
+          :class="`is-${item.tone}`" hover-class="is-pressed" hover-stay-time="80"
-          :key="getItemKey(item, index)"
+          @tap="handleCardTap(item.raw, index)">
-          class="explore-card"
+          <image v-if="item.coverImage" class="explore-card-image" :src="item.coverImage" mode="aspectFill" />
-          :class="`is-${item.tone}`"
-          hover-class="is-pressed"
-          hover-stay-time="80"
-          @tap="handleCardTap(item.raw, index)"
-        >
-          <image
-            v-if="item.coverImage"
-            class="explore-card-image"
-            :src="item.coverImage"
-            mode="aspectFill"
-          />
 
           <view class="explore-card-gradient" />
 
           <view class="explore-card-content">
-            <text class="explore-card-tag ellipsis-1">{{ item.tag }}</text>
+            <text class="explore-card-tag truncate">{{ item.tag }}</text>
-            <text class="explore-card-title ellipsis-1">{{ item.title }}</text>
+            <text class="explore-card-title truncate">{{ item.title }}</text>
-            <text v-if="item.subTitle" class="explore-card-desc ellipsis-1">
+            <text v-if="item.subTitle" class="explore-card-desc truncate">
               {{ item.subTitle }}
             </text>
           </view>

src/pages/Discovery/components/HeritageQuickPrompts/index.vue

@@ -1,22 +1,12 @@
 <template>
-  <scroll-view
+  <scroll-view class="prompt-strip" scroll-x show-scrollbar="false">
-    class="prompt-strip"
-    scroll-x
-    show-scrollbar="false"
-  >
     <view class="prompt-track">
-      <view
+      <view v-for="(item, index) in normalizedList" :key="getItemKey(item, index)" class="prompt-card"
-        v-for="(item, index) in normalizedList"
+        hover-class="is-pressed" hover-stay-time="80" @tap="handleTap(item.raw, index)">
-        :key="getItemKey(item, index)"
-        class="prompt-card"
-        hover-class="is-pressed"
-        hover-stay-time="80"
-        @tap="handleTap(item.raw, index)"
-      >
         <view class="prompt-mark" />
         <view class="prompt-copy">
-          <text class="prompt-title ellipsis-1">{{ item.title }}</text>
+          <text class="prompt-title truncate">{{ item.title }}</text>
-          <text class="prompt-desc ellipsis-1">{{ item.subTitle }}</text>
+          <text class="prompt-desc truncate">{{ item.subTitle }}</text>
         </view>
       </view>
     </view>

src/pages/Discovery/components/QuickQuestions/index.vue

@@ -9,10 +9,10 @@
           <image class="card-img flex-shrink-0 rounded-[14px]" :src="createSvgIndex(index)" />
 
           <view class="min-width-0 flex flex-col flex-full pl-[8px] py-[4px]">
-            <view class="w-full text-[12px] font-[600] text-[#171717] ellipsis-1">
+            <view class="w-full text-[12px] font-[600] text-[#171717] truncate">
               {{ item.title }}
             </view>
-            <view class="w-full text-[9px] text-[#94a3b8] ellipsis-1">
+            <view class="w-full text-[9px] text-[#94a3b8] truncate">
               {{ item.subTitle }}
             </view>
           </view>

src/static/scss/ellipsis.scss

@@ -1,20 +0,0 @@
-// 省略号
-.ellipsis-1 {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ellipsis-2 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-.ellipsis-3 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-  overflow: hidden;
-}

src/static/scss/index.scss

@@ -3,7 +3,6 @@
 @import "./flex.scss";
 @import "./height.scss";
 @import "./font-family.scss";
-@import "./ellipsis.scss";
 @import "./overflow.scss";
 @import "./scroll.scss";
 @import "./width.scss";