1
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user