修复时间显示问题

This commit is contained in:
张成
2025-11-10 00:05:49 +08:00
parent 649898e346
commit e7b8aab80c
2 changed files with 65 additions and 4 deletions

View File

@@ -49,13 +49,20 @@
font-size: 12px;
line-height: 18px;
color: #3C3C4399;
overflow: hidden;
}
.location-position {
max-width: 50%;
flex: 1;
min-width: 0; // 允许缩小
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
// 不使用 CSS 的省略号,由 JS 控制
}
.location-time-distance {
flex-shrink: 0; // 固定信息不压缩,始终显示
white-space: nowrap;
}
.location-text {

View File

@@ -1,5 +1,6 @@
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useMemo } from "react";
import img from "../../config/images";
import { ListCardProps } from "../../../types/list/types";
import { formatGameTime, calculateDuration } from "@/utils/timeUtils";
@@ -54,6 +55,59 @@ const ListCard: React.FC<ListCardProps> = ({
});
};
// 处理地点截断,确保固定信息始终显示
const displayLocation = useMemo(() => {
if (!location) return '';
// 获取屏幕宽度,用于计算实际容器宽度
const systemInfo = Taro.getSystemInfoSync();
const screenWidth = systemInfo.windowWidth || 375;
// 容器宽度 = 屏幕宽度 - 左右 padding - 图片区域宽度
const containerWidthPx = screenWidth - 130;
// 计算固定信息宽度
const extraInfo = `${court_type ? `${court_type}` : ''}${distance_km ? `${distance_km}km` : ''}`;
// 估算字符宽度(基于 12px 字体)
const getTextWidth = (text: string) => {
let width = 0;
for (let char of text) {
if (/[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char)) {
width += 12; // 中文字符 12px
} else {
width += 6; // 英文字符和数字 6px
}
}
return width;
};
const extraWidth = getTextWidth(extraInfo);
const locationWidth = getTextWidth(location);
// 可用宽度 = 容器宽度 - 固定信息宽度 - 省略号宽度18px
const availableWidth = containerWidthPx - extraWidth - 18;
// 如果地点宽度小于可用宽度,不需要截断
if (locationWidth <= availableWidth) {
return location;
}
// 需要截断地点
let maxChars = 0;
let currentWidth = 0;
for (let i = 0; i < location.length; i++) {
const char = location[i];
const charWidth = /[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]/.test(char) ? 12 : 6;
if (currentWidth + charWidth > availableWidth) {
break;
}
currentWidth += charWidth;
maxChars++;
}
return location.slice(0, maxChars) + '...';
}, [location, court_type, distance_km]);
// 根据图片数量决定展示样式
const renderImages = () => {
if (image_list?.length === 0) return null;
@@ -128,9 +182,9 @@ const ListCard: React.FC<ListCardProps> = ({
{/* 地点,室内外,距离 */}
<View className="location">
{location && (
{displayLocation && (
<Text className="location-text location-position">
{location}
{displayLocation}
</Text>
)}
<Text className="location-text location-time-distance">