This commit is contained in:
2025-08-13 15:40:19 +08:00
parent 479a246518
commit da67ef6214
10 changed files with 458 additions and 129 deletions
+79 -16
View File
@@ -1,24 +1,26 @@
<template>
<view class="knowledge-container">
<u-navbar title="宠物知识库" left-icon="arrow-left" @left-click="goBack"></u-navbar>
<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
<view class="search-container">
<u-search placeholder="搜索知识" v-model="searchKeyword" @search="searchKnowledge" @custom="searchKnowledge"></u-search>
</view>
<view class="category-tabs">
<u-tabs :list="categories" @click="switchCategory" :current="currentCategory"></u-tabs>
</view>
<scroll-view class="knowledge-list" scroll-y="true">
<u-card v-for="item in filteredKnowledge" :key="item.id" :margin="20" :padding="20" @click="viewDetail(item)">
<view v-for="item in filteredKnowledge" :key="item.id" class="knowledge-card" @click="viewDetail(item)">
<view class="knowledge-item">
<u-text :text="item.title" type="primary" size="16" bold></u-text>
<u-text :text="item.summary" type="info" size="14" margin="10rpx 0"></u-text>
<text class="knowledge-title">{{ item.title }}</text>
<text class="knowledge-summary">{{ item.summary }}</text>
<view class="knowledge-meta">
<u-tag :text="item.category" type="info" size="mini"></u-tag>
<u-text :text="item.readCount + '次阅读'" type="tips" size="12"></u-text>
<view class="category-tag">
<text class="tag-text">{{ item.category }}</text>
</view>
<text class="read-count">{{ item.readCount }}次阅读</text>
</view>
</view>
</u-card>
</view>
</scroll-view>
</view>
</template>
@@ -86,10 +88,6 @@ export default {
}
},
methods: {
goBack() {
uni.navigateBack()
},
switchCategory(item) {
this.currentCategory = item.index
},
@@ -109,25 +107,90 @@ export default {
<style lang="scss" scoped>
.knowledge-container {
background-color: #f8f9fa;
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh;
}
.search-container {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
padding: 20rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
}
.category-tabs {
background-color: white;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 30rpx;
border-radius: 24rpx;
padding: 20rpx 0;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
}
.knowledge-list {
height: calc(100vh - 300rpx);
padding: 0 30rpx;
}
.knowledge-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
margin: 20rpx 0;
border-radius: 24rpx;
padding: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
&:active {
transform: scale(0.98);
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
}
}
.knowledge-item {
.knowledge-title {
font-size: 32rpx;
font-weight: 600;
color: #FF8A80;
display: block;
margin-bottom: 16rpx;
}
.knowledge-summary {
font-size: 28rpx;
color: #666666;
line-height: 1.4;
display: block;
margin-bottom: 20rpx;
}
.knowledge-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20rpx;
.category-tag {
background: rgba(255, 138, 128, 0.1);
border: 2rpx solid rgba(255, 138, 128, 0.3);
border-radius: 16rpx;
padding: 8rpx 16rpx;
.tag-text {
font-size: 24rpx;
color: #FF8A80;
font-weight: 500;
}
}
.read-count {
font-size: 24rpx;
color: #999999;
}
}
}
</style>