feat(material): 完成本周热门资料功能并优化资料列表显示
新增功能: - 创建本周热门资料详情页面,复用资料列表样式 - 学习人数和热度标签统一显示样式 - 添加文件大小显示 样式优化: - 统一 tag 样式(padding、圆角、字体大小) - 加强卡片阴影效果(shadow-sm → shadow-md) - 添加多行文本省略样式支持(index、week-hot-material、knowledge-base) Bug 修复: - 修复收藏状态判断逻辑,支持布尔值 true - 移除学习人数标签中的火焰图标(避免重复) 页面路由: - 注册 week-hot-material 页面路由 - 首页"查看更多"链接指向新页面 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
5 changed files
with
51 additions
and
9 deletions
| ... | @@ -17,6 +17,7 @@ const pages = [ | ... | @@ -17,6 +17,7 @@ const pages = [ |
| 17 | 'pages/product-detail/index', | 17 | 'pages/product-detail/index', |
| 18 | 'pages/category-list/index', | 18 | 'pages/category-list/index', |
| 19 | 'pages/material-list/index', | 19 | 'pages/material-list/index', |
| 20 | + 'pages/week-hot-material/index', | ||
| 20 | 'pages/signing/index', | 21 | 'pages/signing/index', |
| 21 | 'pages/mine/index', | 22 | 'pages/mine/index', |
| 22 | 'pages/plan/index', | 23 | 'pages/plan/index', | ... | ... |
| ... | @@ -93,10 +93,10 @@ | ... | @@ -93,10 +93,10 @@ |
| 93 | </view> | 93 | </view> |
| 94 | 94 | ||
| 95 | <!-- Hot Materials --> | 95 | <!-- Hot Materials --> |
| 96 | - <view v-if="hotMaterials.length > 0" class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[48rpx]"> | 96 | + <view v-if="hotMaterials.length > 0" class="bg-white rounded-[32rpx] shadow-md p-[32rpx] mb-[48rpx]"> |
| 97 | <view class="flex justify-between items-center mb-[24rpx]"> | 97 | <view class="flex justify-between items-center mb-[24rpx]"> |
| 98 | <text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text> | 98 | <text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text> |
| 99 | - <view class="flex items-center text-blue-600" @tap="go('/pages/material-list/index')"> | 99 | + <view class="flex items-center text-blue-600" @tap="go('/pages/week-hot-material/index')"> |
| 100 | <text class="text-[26rpx] mr-[4rpx]">查看更多</text> | 100 | <text class="text-[26rpx] mr-[4rpx]">查看更多</text> |
| 101 | <IconFont name="rectRight" size="12" /> | 101 | <IconFont name="rectRight" size="12" /> |
| 102 | </view> | 102 | </view> |
| ... | @@ -106,7 +106,7 @@ | ... | @@ -106,7 +106,7 @@ |
| 106 | <view class="flex flex-col gap-[24rpx]"> | 106 | <view class="flex flex-col gap-[24rpx]"> |
| 107 | <!-- Material Items --> | 107 | <!-- Material Items --> |
| 108 | <view v-for="(item, index) in hotMaterials" :key="item.id || index" | 108 | <view v-for="(item, index) in hotMaterials" :key="item.id || index" |
| 109 | - class="flex flex-row bg-white rounded-[24rpx] p-[24rpx] border border-gray-50"> | 109 | + class="flex flex-row bg-white rounded-[24rpx] p-[24rpx] shadow-md border border-gray-50"> |
| 110 | 110 | ||
| 111 | <!-- 左侧图标 --> | 111 | <!-- 左侧图标 --> |
| 112 | <view class="w-[88rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-[20rpx] shadow-inner self-start"> | 112 | <view class="w-[88rpx] h-[88rpx] mr-[24rpx] flex-shrink-0 flex items-center justify-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-[20rpx] shadow-inner self-start"> |
| ... | @@ -115,17 +115,26 @@ | ... | @@ -115,17 +115,26 @@ |
| 115 | 115 | ||
| 116 | <!-- 内容区域 --> | 116 | <!-- 内容区域 --> |
| 117 | <view class="flex-1 min-w-0"> | 117 | <view class="flex-1 min-w-0"> |
| 118 | - <text class="text-[#1F2937] text-[30rpx] font-bold leading-[1.4] line-clamp-2 mb-[8rpx]"> | 118 | + <view class="text-[#1F2937] text-[30rpx] font-bold leading-[1.4] mb-[8rpx] line-clamp-2"> |
| 119 | {{ item.title }} | 119 | {{ item.title }} |
| 120 | - </text> | 120 | + </view> |
| 121 | + <!-- 学习人数信息 --> | ||
| 122 | + <view v-if="item.learners" class="flex items-center gap-[12rpx] mb-[16rpx]"> | ||
| 123 | + <view class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-orange-50 text-orange-600 text-[20rpx] font-medium rounded-[8rpx]"> | ||
| 124 | + <text>{{ item.learners }}</text> | ||
| 125 | + </view> | ||
| 126 | + <!-- 学习人数比例 --> | ||
| 127 | + <view v-if="item.readPeoplePercent !== undefined && item.readPeoplePercent !== null" class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-green-50 text-green-600 text-[20rpx] font-medium rounded-[8rpx]"> | ||
| 128 | + <text>{{ item.readPeoplePercent }}%热度</text> | ||
| 129 | + </view> | ||
| 130 | + </view> | ||
| 131 | + <!-- 文档类型和文件大小 --> | ||
| 121 | <view class="flex items-center gap-[12rpx] mb-[16rpx]"> | 132 | <view class="flex items-center gap-[12rpx] mb-[16rpx]"> |
| 122 | <view class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-gray-100 text-gray-500 text-[20rpx] font-medium rounded-[8rpx]"> | 133 | <view class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-gray-100 text-gray-500 text-[20rpx] font-medium rounded-[8rpx]"> |
| 123 | <text>{{ getDocumentLabel(item.fileName) }}</text> | 134 | <text>{{ getDocumentLabel(item.fileName) }}</text> |
| 124 | </view> | 135 | </view> |
| 125 | - <text class="text-[#9CA3AF] text-[22rpx]">{{ item.learners }}</text> | 136 | + <view v-if="item.fileSize" class="text-[#9CA3AF] text-[22rpx]"> |
| 126 | - <!-- 学习人数比例 --> | 137 | + {{ item.fileSize }} |
| 127 | - <view v-if="item.readPeoplePercent !== undefined && item.readPeoplePercent !== null" class="inline-flex items-center px-[8rpx] py-[2rpx] bg-green-50 text-green-600 text-[20rpx] font-medium rounded-[6rpx]"> | ||
| 128 | - <text>{{ item.readPeoplePercent }}%热度</text> | ||
| 129 | </view> | 138 | </view> |
| 130 | </view> | 139 | </view> |
| 131 | 140 | ||
| ... | @@ -388,3 +397,15 @@ useShareAppMessage(() => { | ... | @@ -388,3 +397,15 @@ useShareAppMessage(() => { |
| 388 | }; | 397 | }; |
| 389 | }); | 398 | }); |
| 390 | </script> | 399 | </script> |
| 400 | + | ||
| 401 | +<style lang="less"> | ||
| 402 | +/* 多行文本省略 */ | ||
| 403 | +.line-clamp-2 { | ||
| 404 | + display: -webkit-box; | ||
| 405 | + -webkit-box-orient: vertical; | ||
| 406 | + -webkit-line-clamp: 2; | ||
| 407 | + line-clamp: 2; | ||
| 408 | + overflow: hidden; | ||
| 409 | + word-break: break-all; | ||
| 410 | +} | ||
| 411 | +</style> | ... | ... |
| ... | @@ -411,4 +411,14 @@ useReachBottom(() => { | ... | @@ -411,4 +411,14 @@ useReachBottom(() => { |
| 411 | :deep(.nut-tabs__content) { | 411 | :deep(.nut-tabs__content) { |
| 412 | display: none; | 412 | display: none; |
| 413 | } | 413 | } |
| 414 | + | ||
| 415 | +/* 多行文本省略 */ | ||
| 416 | +.line-clamp-2 { | ||
| 417 | + display: -webkit-box; | ||
| 418 | + -webkit-box-orient: vertical; | ||
| 419 | + -webkit-line-clamp: 2; | ||
| 420 | + line-clamp: 2; | ||
| 421 | + overflow: hidden; | ||
| 422 | + word-break: break-all; | ||
| 423 | +} | ||
| 414 | </style> | 424 | </style> | ... | ... |
src/pages/week-hot-material/index.config.js
0 → 100644
src/pages/week-hot-material/index.vue
0 → 100644
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment