hookehuyr

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>
......@@ -17,6 +17,7 @@ const pages = [
'pages/product-detail/index',
'pages/category-list/index',
'pages/material-list/index',
'pages/week-hot-material/index',
'pages/signing/index',
'pages/mine/index',
'pages/plan/index',
......
......@@ -93,10 +93,10 @@
</view>
<!-- Hot Materials -->
<view v-if="hotMaterials.length > 0" class="bg-white rounded-[32rpx] shadow-sm p-[32rpx] mb-[48rpx]">
<view v-if="hotMaterials.length > 0" class="bg-white rounded-[32rpx] shadow-md p-[32rpx] mb-[48rpx]">
<view class="flex justify-between items-center mb-[24rpx]">
<text class="text-gray-900 text-[32rpx] font-bold">本周热门资料</text>
<view class="flex items-center text-blue-600" @tap="go('/pages/material-list/index')">
<view class="flex items-center text-blue-600" @tap="go('/pages/week-hot-material/index')">
<text class="text-[26rpx] mr-[4rpx]">查看更多</text>
<IconFont name="rectRight" size="12" />
</view>
......@@ -106,7 +106,7 @@
<view class="flex flex-col gap-[24rpx]">
<!-- Material Items -->
<view v-for="(item, index) in hotMaterials" :key="item.id || index"
class="flex flex-row bg-white rounded-[24rpx] p-[24rpx] border border-gray-50">
class="flex flex-row bg-white rounded-[24rpx] p-[24rpx] shadow-md border border-gray-50">
<!-- 左侧图标 -->
<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 @@
<!-- 内容区域 -->
<view class="flex-1 min-w-0">
<text class="text-[#1F2937] text-[30rpx] font-bold leading-[1.4] line-clamp-2 mb-[8rpx]">
<view class="text-[#1F2937] text-[30rpx] font-bold leading-[1.4] mb-[8rpx] line-clamp-2">
{{ item.title }}
</text>
</view>
<!-- 学习人数信息 -->
<view v-if="item.learners" class="flex items-center gap-[12rpx] mb-[16rpx]">
<view class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-orange-50 text-orange-600 text-[20rpx] font-medium rounded-[8rpx]">
<text>{{ item.learners }}</text>
</view>
<!-- 学习人数比例 -->
<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]">
<text>{{ item.readPeoplePercent }}%热度</text>
</view>
</view>
<!-- 文档类型和文件大小 -->
<view class="flex items-center gap-[12rpx] mb-[16rpx]">
<view class="inline-flex items-center justify-center px-[12rpx] py-[4rpx] bg-gray-100 text-gray-500 text-[20rpx] font-medium rounded-[8rpx]">
<text>{{ getDocumentLabel(item.fileName) }}</text>
</view>
<text class="text-[#9CA3AF] text-[22rpx]">{{ item.learners }}</text>
<!-- 学习人数比例 -->
<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]">
<text>{{ item.readPeoplePercent }}%热度</text>
<view v-if="item.fileSize" class="text-[#9CA3AF] text-[22rpx]">
{{ item.fileSize }}
</view>
</view>
......@@ -388,3 +397,15 @@ useShareAppMessage(() => {
};
});
</script>
<style lang="less">
/* 多行文本省略 */
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
</style>
......
......@@ -411,4 +411,14 @@ useReachBottom(() => {
:deep(.nut-tabs__content) {
display: none;
}
/* 多行文本省略 */
.line-clamp-2 {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
word-break: break-all;
}
</style>
......
/*
* @Date: 2026-02-05
* @Description: 本周热门资料页面配置
*/
export default {
navigationBarTitleText: '本周热门资料',
enablePullDownRefresh: true,
backgroundColor: '#F9FAFB',
navigationStyle: 'custom'
}
This diff is collapsed. Click to expand it.