修复时间显示问题
This commit is contained in:
@@ -49,13 +49,20 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
color: #3C3C4399;
|
color: #3C3C4399;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-position {
|
.location-position {
|
||||||
max-width: 50%;
|
flex: 1;
|
||||||
|
min-width: 0; // 允许缩小
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
// 不使用 CSS 的省略号,由 JS 控制
|
||||||
|
}
|
||||||
|
|
||||||
|
.location-time-distance {
|
||||||
|
flex-shrink: 0; // 固定信息不压缩,始终显示
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.location-text {
|
.location-text {
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
import { View, Text, Image } from "@tarojs/components";
|
import { View, Text, Image } from "@tarojs/components";
|
||||||
import Taro from "@tarojs/taro";
|
import Taro from "@tarojs/taro";
|
||||||
|
import { useMemo } from "react";
|
||||||
import img from "../../config/images";
|
import img from "../../config/images";
|
||||||
import { ListCardProps } from "../../../types/list/types";
|
import { ListCardProps } from "../../../types/list/types";
|
||||||
import { formatGameTime, calculateDuration } from "@/utils/timeUtils";
|
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 = () => {
|
const renderImages = () => {
|
||||||
if (image_list?.length === 0) return null;
|
if (image_list?.length === 0) return null;
|
||||||
@@ -128,9 +182,9 @@ const ListCard: React.FC<ListCardProps> = ({
|
|||||||
{/* 地点,室内外,距离 */}
|
{/* 地点,室内外,距离 */}
|
||||||
|
|
||||||
<View className="location">
|
<View className="location">
|
||||||
{location && (
|
{displayLocation && (
|
||||||
<Text className="location-text location-position">
|
<Text className="location-text location-position">
|
||||||
{location}
|
{displayLocation}
|
||||||
</Text>
|
</Text>
|
||||||
)}
|
)}
|
||||||
<Text className="location-text location-time-distance">
|
<Text className="location-text location-time-distance">
|
||||||
|
|||||||
Reference in New Issue
Block a user