Hooke / lls_program

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d1c883b3 1 parent 68e8d5dc

fix(样式): 修复排行榜卡片中文本溢出问题 

为排行榜卡片中的名称和标题添加文本溢出处理，包括设置最大宽度、溢出隐藏、省略号显示和多行文本截断，确保长文本在有限空间内正常显示
Inline Side-by-side
Showing 2 changed files with 62 additions and 2 deletions
1 <!-- 1 <!--
2 * @Date: 2025-01-09 00:00:00 2 * @Date: 2025-01-09 00:00:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-18 18:05:13 4 + * @LastEditTime: 2025-09-18 18:09:26
5 * @FilePath: /lls_program/src/components/RankingCard.vue 5 * @FilePath: /lls_program/src/components/RankingCard.vue
6 * @Description: 排行榜卡片组件 6 * @Description: 排行榜卡片组件
7 --> 7 -->
...@@ -578,6 +578,15 @@ defineExpose({ ...@@ -578,6 +578,15 @@ defineExpose({
578 font-weight: 600; 578 font-weight: 600;
579 margin-bottom: 6rpx; 579 margin-bottom: 6rpx;
580 text-align: center; 580 text-align: center;
581 + max-width: 120rpx;
582 + overflow: hidden;
583 + text-overflow: ellipsis;
584 + display: -webkit-box;
585 + -webkit-line-clamp: 2;
586 + -webkit-box-orient: vertical;
587 + white-space: normal;
588 + line-height: 1.2;
589 + max-height: 48rpx;
581 } 590 }
582 591
583 .leader-name { 592 .leader-name {
...@@ -585,6 +594,15 @@ defineExpose({ ...@@ -585,6 +594,15 @@ defineExpose({
585 font-size: 16rpx; 594 font-size: 16rpx;
586 margin-bottom: 12rpx; 595 margin-bottom: 12rpx;
587 text-align: center; 596 text-align: center;
597 + max-width: 120rpx;
598 + overflow: hidden;
599 + text-overflow: ellipsis;
600 + display: -webkit-box;
601 + -webkit-line-clamp: 2;
602 + -webkit-box-orient: vertical;
603 + white-space: normal;
604 + line-height: 1.2;
605 + max-height: 38rpx;
588 } 606 }
589 607
590 .rank-number { 608 .rank-number {
...@@ -722,11 +740,19 @@ defineExpose({ ...@@ -722,11 +740,19 @@ defineExpose({
722 font-weight: 600; 740 font-weight: 600;
723 color: #333; 741 color: #333;
724 margin-bottom: 6rpx; 742 margin-bottom: 6rpx;
743 + max-width: 200rpx;
744 + overflow: hidden;
745 + text-overflow: ellipsis;
746 + white-space: nowrap;
725 } 747 }
726 748
727 .my-leader-name { 749 .my-leader-name {
728 font-size: 20rpx; 750 font-size: 20rpx;
729 color: #666; 751 color: #666;
752 + max-width: 200rpx;
753 + overflow: hidden;
754 + text-overflow: ellipsis;
755 + white-space: nowrap;
730 } 756 }
731 } 757 }
732 } 758 }
......
1 <!-- 1 <!--
2 * @Date: 2025-09-01 13:07:52 2 * @Date: 2025-09-01 13:07:52
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-09-18 18:04:42 4 + * @LastEditTime: 2025-09-18 18:13:49
5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue 5 * @FilePath: /lls_program/src/pages/FamilyRank/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -581,6 +581,15 @@ onMounted(async () => { ...@@ -581,6 +581,15 @@ onMounted(async () => {
581 font-weight: 600; 581 font-weight: 600;
582 margin-bottom: 8rpx; 582 margin-bottom: 8rpx;
583 text-align: center; 583 text-align: center;
584 + max-width: 140rpx;
585 + overflow: hidden;
586 + text-overflow: ellipsis;
587 + display: -webkit-box;
588 + -webkit-line-clamp: 2;
589 + -webkit-box-orient: vertical;
590 + white-space: normal;
591 + line-height: 1.2;
592 + max-height: 58rpx;
584 } 593 }
585 594
586 .leader-name { 595 .leader-name {
...@@ -588,6 +597,15 @@ onMounted(async () => { ...@@ -588,6 +597,15 @@ onMounted(async () => {
588 font-size: 20rpx; 597 font-size: 20rpx;
589 margin-bottom: 16rpx; 598 margin-bottom: 16rpx;
590 text-align: center; 599 text-align: center;
600 + max-width: 140rpx;
601 + overflow: hidden;
602 + text-overflow: ellipsis;
603 + display: -webkit-box;
604 + -webkit-line-clamp: 2;
605 + -webkit-box-orient: vertical;
606 + white-space: normal;
607 + line-height: 1.2;
608 + max-height: 48rpx;
591 } 609 }
592 610
593 .rank-number { 611 .rank-number {
...@@ -732,11 +750,19 @@ onMounted(async () => { ...@@ -732,11 +750,19 @@ onMounted(async () => {
732 font-weight: 600; 750 font-weight: 600;
733 color: #333; 751 color: #333;
734 margin-bottom: 8rpx; 752 margin-bottom: 8rpx;
753 + max-width: 300rpx;
754 + overflow: hidden;
755 + text-overflow: ellipsis;
756 + white-space: nowrap;
735 } 757 }
736 758
737 .leader-name-small { 759 .leader-name-small {
738 font-size: 24rpx; 760 font-size: 24rpx;
739 color: #666; 761 color: #666;
762 + max-width: 300rpx;
763 + overflow: hidden;
764 + text-overflow: ellipsis;
765 + white-space: nowrap;
740 } 766 }
741 } 767 }
742 } 768 }
...@@ -843,11 +869,19 @@ onMounted(async () => { ...@@ -843,11 +869,19 @@ onMounted(async () => {
843 font-weight: 600; 869 font-weight: 600;
844 color: #333; 870 color: #333;
845 margin-bottom: 8rpx; 871 margin-bottom: 8rpx;
872 + max-width: 250rpx;
873 + overflow: hidden;
874 + text-overflow: ellipsis;
875 + white-space: nowrap;
846 } 876 }
847 877
848 .my-leader-name { 878 .my-leader-name {
849 font-size: 24rpx; 879 font-size: 24rpx;
850 color: #666; 880 color: #666;
881 + max-width: 250rpx;
882 + overflow: hidden;
883 + text-overflow: ellipsis;
884 + white-space: nowrap;
851 } 885 }
852 } 886 }
853 } 887 }
......