ZhaoYang
1 month ago
20 changed files with 895 additions and 117 deletions
-
4app.json
-
9pages/home/home.js
-
2pages/home/home.wxml
-
2pages/home/home.wxss
-
BINpages/images/EZSx3exf4cjI.woff
-
BINpages/images/EZSx3exf4cjI.woff2
-
18pagesA/pages/expert/expert.js
-
10pagesA/pages/expert/expert.wxml
-
29pagesA/pages/expert/expert.wxss
-
BINpagesB/images/sou.png
-
BINpagesB/images/syts.png
-
66pagesB/pages/apple/apple.js
-
3pagesB/pages/apple/apple.json
-
2pagesB/pages/apple/apple.wxml
-
1pagesB/pages/apple/apple.wxss
-
258pagesB/pages/repository/repository.js
-
4pagesB/pages/repository/repository.json
-
149pagesB/pages/repository/repository.wxml
-
451pagesB/pages/repository/repository.wxss
-
4utils/font.wxss
|
After Width: 200 | Height: 200 | Size: 4.5 KiB |
|
After Width: 200 | Height: 200 | Size: 6.2 KiB |
@ -1,66 +0,0 @@ |
|||||
// pagesB/pages/apple/apple.js
|
|
||||
Page({ |
|
||||
|
|
||||
/** |
|
||||
* 页面的初始数据 |
|
||||
*/ |
|
||||
data: { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面加载 |
|
||||
*/ |
|
||||
onLoad(options) { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面初次渲染完成 |
|
||||
*/ |
|
||||
onReady() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面显示 |
|
||||
*/ |
|
||||
onShow() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面隐藏 |
|
||||
*/ |
|
||||
onHide() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 生命周期函数--监听页面卸载 |
|
||||
*/ |
|
||||
onUnload() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 页面相关事件处理函数--监听用户下拉动作 |
|
||||
*/ |
|
||||
onPullDownRefresh() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 页面上拉触底事件的处理函数 |
|
||||
*/ |
|
||||
onReachBottom() { |
|
||||
|
|
||||
}, |
|
||||
|
|
||||
/** |
|
||||
* 用户点击右上角分享 |
|
||||
*/ |
|
||||
onShareAppMessage() { |
|
||||
|
|
||||
} |
|
||||
}) |
|
||||
@ -1,3 +0,0 @@ |
|||||
{ |
|
||||
"usingComponents": {} |
|
||||
} |
|
||||
@ -1,2 +0,0 @@ |
|||||
<!--pagesB/pages/apple/apple.wxml--> |
|
||||
<text>pagesB/pages/apple/apple.wxml</text> |
|
||||
@ -1 +0,0 @@ |
|||||
/* pagesB/pages/apple/apple.wxss */ |
|
||||
@ -0,0 +1,258 @@ |
|||||
|
// 模拟知识库数据
|
||||
|
const knowledgeBase = [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
title: "猪瘟防治", |
||||
|
content: "猪瘟是由猪瘟病毒引起的高度接触性传染病。防治措施：1. 定期接种猪瘟疫苗 2. 加强饲养管理 3. 发现病猪立即隔离 4. 猪舍定期消毒", |
||||
|
category: "疾病防治", |
||||
|
tags: ["猪", "传染病", "疫苗"], |
||||
|
date: "2024-01-15" |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
title: "鸡新城疫预防", |
||||
|
content: "新城疫主要症状：呼吸困难、下痢、神经紊乱。预防：1. 接种新城疫疫苗 2. 加强鸡舍卫生 3. 严格控制人员进出 4. 定期检测抗体水平", |
||||
|
category: "疾病防治", |
||||
|
tags: ["鸡", "禽类", "病毒病"], |
||||
|
date: "2024-01-10" |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
title: "奶牛饲养管理", |
||||
|
content: "科学饲养要点：1. 合理搭配精粗饲料 2. 保证充足饮水 3. 定时定量饲喂 4. 保持牛舍清洁干燥 5. 定期进行健康检查", |
||||
|
category: "饲养管理", |
||||
|
tags: ["奶牛", "饲养", "管理"], |
||||
|
date: "2024-01-05" |
||||
|
}, |
||||
|
{ |
||||
|
id: 4, |
||||
|
title: "仔猪腹泻治疗", |
||||
|
content: "常见原因：细菌感染、病毒感染、饲养不当。治疗：1. 补充电解质 2. 使用抗生素（需兽医指导）3. 改善饲养环境 4. 加强母猪管理", |
||||
|
category: "疾病防治", |
||||
|
tags: ["猪", "腹泻", "治疗"], |
||||
|
date: "2024-01-08" |
||||
|
}, |
||||
|
{ |
||||
|
id: 5, |
||||
|
title: "羊的饲料配方", |
||||
|
content: "育肥羊饲料配方：玉米60%、豆粕20%、麦麸15%、预混料5%。注意事项：1. 逐渐换料 2. 保证粗纤维摄入 3. 添加适量食盐", |
||||
|
category: "饲养管理", |
||||
|
tags: ["羊", "饲料", "营养"], |
||||
|
date: "2024-01-12" |
||||
|
}, |
||||
|
{ |
||||
|
id: 6, |
||||
|
title: "犬细小病毒防治", |
||||
|
content: "症状：呕吐、腹泻、精神萎靡。防治：1. 定期接种疫苗 2. 发病早期使用血清 3. 补液治疗 4. 严格隔离病犬", |
||||
|
category: "疾病防治", |
||||
|
tags: ["犬", "宠物", "病毒"], |
||||
|
date: "2024-01-18" |
||||
|
}, |
||||
|
{ |
||||
|
id: 7, |
||||
|
title: "水产养殖水质管理", |
||||
|
content: "水质指标控制：1. pH值7.5-8.5 2. 溶解氧>5mg/L 3. 氨氮<0.2mg/L 4. 定期换水 5. 使用微生物制剂", |
||||
|
category: "饲养管理", |
||||
|
tags: ["水产", "水质", "管理"], |
||||
|
date: "2024-01-14" |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
Page({ |
||||
|
data: { |
||||
|
searchValue: '', |
||||
|
searchResults: [], |
||||
|
allKnowledge: knowledgeBase, |
||||
|
recentSearches: [], |
||||
|
isLoading: false, |
||||
|
activeCategory: '全部', |
||||
|
categories: ['全部', '疾病防治', '饲养管理'], |
||||
|
showTipsModal: false, |
||||
|
searchTimer: null // 搜索防抖定时器
|
||||
|
}, |
||||
|
|
||||
|
onLoad() { |
||||
|
// 初始显示所有知识
|
||||
|
this.setData({ |
||||
|
searchResults: this.data.allKnowledge |
||||
|
}); |
||||
|
|
||||
|
// 页面加载后显示提示弹框
|
||||
|
setTimeout(() => { |
||||
|
this.setData({ showTipsModal: true }); |
||||
|
}, 500); |
||||
|
}, |
||||
|
|
||||
|
onShow() { |
||||
|
const hasShownTips = wx.getStorageSync('hasShownTips'); |
||||
|
if (!hasShownTips) { |
||||
|
setTimeout(() => { |
||||
|
this.setData({ showTipsModal: true }); |
||||
|
wx.setStorageSync('hasShownTips', true); |
||||
|
}, 500); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 输入搜索关键词（自动搜索）
|
||||
|
onInputSearch(e) { |
||||
|
const value = e.detail.value; |
||||
|
this.setData({ |
||||
|
searchValue: value, |
||||
|
isLoading: true |
||||
|
}); |
||||
|
|
||||
|
// 清除之前的定时器
|
||||
|
if (this.data.searchTimer) { |
||||
|
clearTimeout(this.data.searchTimer); |
||||
|
} |
||||
|
|
||||
|
// 设置新的定时器（防抖处理）
|
||||
|
this.data.searchTimer = setTimeout(() => { |
||||
|
if (!value.trim()) { |
||||
|
// 如果搜索框为空，显示所有知识
|
||||
|
this.setData({ |
||||
|
searchResults: this.data.allKnowledge, |
||||
|
isLoading: false |
||||
|
}); |
||||
|
} else { |
||||
|
// 执行搜索
|
||||
|
this.performSearch(value.trim()); |
||||
|
} |
||||
|
}, 300); // 300ms防抖延迟
|
||||
|
}, |
||||
|
|
||||
|
// 执行搜索操作
|
||||
|
performSearch(keyword) { |
||||
|
const results = this.searchKnowledge(keyword); |
||||
|
this.setData({ |
||||
|
searchResults: results, |
||||
|
isLoading: false |
||||
|
}); |
||||
|
|
||||
|
// 如果没有搜索结果且有关键词，显示提示
|
||||
|
if (results.length === 0 && keyword) { |
||||
|
wx.showToast({ |
||||
|
title: '未找到相关结果', |
||||
|
icon: 'none', |
||||
|
duration: 2000 |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 手动搜索（点击搜索按钮或按回车）
|
||||
|
onSearch() { |
||||
|
const keyword = this.data.searchValue.trim(); |
||||
|
|
||||
|
if (!keyword) { |
||||
|
this.setData({ |
||||
|
searchResults: this.data.allKnowledge |
||||
|
}); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
this.setData({ isLoading: true }); |
||||
|
|
||||
|
// 清除定时器
|
||||
|
if (this.data.searchTimer) { |
||||
|
clearTimeout(this.data.searchTimer); |
||||
|
} |
||||
|
|
||||
|
// 立即执行搜索
|
||||
|
this.performSearch(keyword); |
||||
|
}, |
||||
|
|
||||
|
// 搜索知识库
|
||||
|
searchKnowledge(keyword) { |
||||
|
const lowerKeyword = keyword.toLowerCase(); |
||||
|
|
||||
|
return this.data.allKnowledge.filter(item => { |
||||
|
return item.title.toLowerCase().includes(lowerKeyword) || |
||||
|
item.content.toLowerCase().includes(lowerKeyword) || |
||||
|
item.tags.some(tag => tag.toLowerCase().includes(lowerKeyword)) || |
||||
|
item.category.toLowerCase().includes(lowerKeyword); |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 隐藏提示弹框
|
||||
|
hideTips() { |
||||
|
this.setData({ showTipsModal: false }); |
||||
|
}, |
||||
|
|
||||
|
// 阻止事件冒泡
|
||||
|
stopPropagation() { |
||||
|
return; |
||||
|
}, |
||||
|
|
||||
|
// 查看详情
|
||||
|
onViewDetail(e) { |
||||
|
const id = e.currentTarget.dataset.id; |
||||
|
const item = this.data.allKnowledge.find(item => item.id === id); |
||||
|
if (item) { |
||||
|
wx.showModal({ |
||||
|
title: item.title, |
||||
|
content: item.content, |
||||
|
showCancel: false, |
||||
|
confirmText: '知道了' |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 按分类筛选
|
||||
|
onFilterCategory(e) { |
||||
|
const category = e.currentTarget.dataset.category; |
||||
|
this.setData({ |
||||
|
activeCategory: category, |
||||
|
searchValue: '' // 清空搜索框
|
||||
|
}); |
||||
|
|
||||
|
if (category === '全部') { |
||||
|
this.setData({ |
||||
|
searchResults: this.data.allKnowledge |
||||
|
}); |
||||
|
} else { |
||||
|
const results = this.data.allKnowledge.filter(item => |
||||
|
item.category === category |
||||
|
); |
||||
|
this.setData({ |
||||
|
searchResults: results |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
// 清空搜索
|
||||
|
onClearSearch() { |
||||
|
this.setData({ |
||||
|
searchValue: '', |
||||
|
searchResults: this.data.allKnowledge, |
||||
|
activeCategory: '全部' |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
// 复制内容到剪贴板
|
||||
|
onCopyContent(e) { |
||||
|
const content = e.currentTarget.dataset.content; |
||||
|
wx.setClipboardData({ |
||||
|
data: content, |
||||
|
success: () => { |
||||
|
wx.showToast({ |
||||
|
title: '复制成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
onShareAppMessage() { |
||||
|
return { |
||||
|
title: '动物疾病防治与饲养管理知识库', |
||||
|
path: '/pages/search/index' |
||||
|
}; |
||||
|
}, |
||||
|
|
||||
|
onUnload() { |
||||
|
// 页面卸载时清除定时器
|
||||
|
if (this.data.searchTimer) { |
||||
|
clearTimeout(this.data.searchTimer); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,4 @@ |
|||||
|
{ |
||||
|
"navigationBarTitleText":"知识库", |
||||
|
"usingComponents": {} |
||||
|
} |
||||
@ -0,0 +1,149 @@ |
|||||
|
<view class="container_zsl"> |
||||
|
<!-- 搜索区域 --> |
||||
|
<view class="search-area"> |
||||
|
<view class="search-box"> |
||||
|
<view class="search-input-wrapper"> |
||||
|
<image src="/pagesB/images/sou.png" class="search-icon" /> |
||||
|
<input |
||||
|
class="search-input" |
||||
|
placeholder="请输入关键词搜索，如：猪瘟、饲养、疫苗..." |
||||
|
placeholder-class="placeholder" |
||||
|
value="{{searchValue}}" |
||||
|
bindinput="onInputSearch" |
||||
|
bindconfirm="onSearch" |
||||
|
/> |
||||
|
<icon |
||||
|
class="clear-icon" |
||||
|
type="clear" |
||||
|
size="16" |
||||
|
wx:if="{{searchValue}}" |
||||
|
bindtap="onClearSearch" |
||||
|
/> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 分类筛选 --> |
||||
|
<view class="category-filter"> |
||||
|
<view |
||||
|
class="category-item {{activeCategory === item ? 'active' : ''}}" |
||||
|
wx:for="{{categories}}" |
||||
|
wx:key="index" |
||||
|
data-category="{{item}}" |
||||
|
bindtap="onFilterCategory" |
||||
|
> |
||||
|
{{item}} |
||||
|
<view class="category-dot" wx:if="{{activeCategory === item}}"></view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 加载状态 --> |
||||
|
<view wx:if="{{isLoading}}" class="loading"> |
||||
|
<view class="spinner"> |
||||
|
<view class="spinner-item"></view> |
||||
|
<view class="spinner-item"></view> |
||||
|
<view class="spinner-item"></view> |
||||
|
</view> |
||||
|
<text class="loading-text">正在搜索...</text> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 搜索结果 --> |
||||
|
<scroll-view wx:else class="result-list" scroll-y enable-back-to-top> |
||||
|
<!-- 搜索结果列表 --> |
||||
|
<view wx:if="{{searchResults.length > 0}}"> |
||||
|
<view class="result-count"> |
||||
|
<text>找到 {{searchResults.length}} 条相关结果</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="knowledge-list"> |
||||
|
<view |
||||
|
class="knowledge-item" |
||||
|
wx:for="{{searchResults}}" |
||||
|
wx:key="id" |
||||
|
data-id="{{item.id}}" |
||||
|
bindtap="onViewDetail" |
||||
|
> |
||||
|
<view class="item-header"> |
||||
|
<view class="title-wrapper"> |
||||
|
<view class="item-title">{{item.title}}</view> |
||||
|
<view class="item-category">{{item.category}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="item-content">{{item.content}}</view> |
||||
|
<view class="item-footer"> |
||||
|
<view class="tags"> |
||||
|
<view class="tag" wx:for="{{item.tags}}" wx:key="*this"> |
||||
|
{{item}} |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="actions"> |
||||
|
<view class="date-info"> |
||||
|
<text class="date">{{item.date}}</text> |
||||
|
</view> |
||||
|
<view |
||||
|
class="copy-btn" |
||||
|
data-content="{{item.content}}" |
||||
|
bindtap="onCopyContent" |
||||
|
> |
||||
|
<text>复制</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 无结果 --> |
||||
|
<view class="empty-state" wx:if="{{searchValue && searchResults.length==0}}"> |
||||
|
<text class="empty-text">未找到"{{searchValue}}"的相关信息</text> |
||||
|
<view class="suggestions"> |
||||
|
<view class="suggestion-item"> |
||||
|
<view class="suggestion-dot"></view> |
||||
|
<text>检查关键词拼写</text> |
||||
|
</view> |
||||
|
<view class="suggestion-item"> |
||||
|
<view class="suggestion-dot"></view> |
||||
|
<text>尝试其他相关词汇</text> |
||||
|
</view> |
||||
|
<view class="suggestion-item"> |
||||
|
<view class="suggestion-dot"></view> |
||||
|
<text>咨询专业兽医</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 使用提示弹框 --> |
||||
|
<view wx:if="{{showTipsModal}}" class="modal-mask" bindtap="hideTips"> |
||||
|
<view class="modal-content" catchtap="stopPropagation"> |
||||
|
<view class="modal-header"> |
||||
|
<image src="/pagesB/images/syts.png" class="modal-icon" /> |
||||
|
<text class="modal-title">使用提示</text> |
||||
|
</view> |
||||
|
|
||||
|
<view class="modal-body"> |
||||
|
<view class="tip-item"> |
||||
|
<view class="tip-number">1</view> |
||||
|
<text class="tip-text">可以搜索疾病名称（如：猪瘟）</text> |
||||
|
</view> |
||||
|
<view class="tip-item"> |
||||
|
<view class="tip-number">2</view> |
||||
|
<text class="tip-text">可以搜索动物种类（如：鸡、牛）</text> |
||||
|
</view> |
||||
|
<view class="tip-item"> |
||||
|
<view class="tip-number">3</view> |
||||
|
<text class="tip-text">可以搜索症状（如：腹泻）</text> |
||||
|
</view> |
||||
|
<view class="tip-item"> |
||||
|
<view class="tip-number">4</view> |
||||
|
<text class="tip-text">可以搜索管理方法（如：饲料、消毒）</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="modal-footer"> |
||||
|
<button class="modal-confirm" bindtap="hideTips">我知道了</button> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
@ -0,0 +1,451 @@ |
|||||
|
/* 基础样式 */ |
||||
|
.container_zsl { |
||||
|
min-height: 100vh; |
||||
|
background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%); |
||||
|
padding: 0; |
||||
|
font-family: '思源宋体 Light' !important; |
||||
|
} |
||||
|
|
||||
|
/* 搜索区域 */ |
||||
|
.search-area { |
||||
|
background: #FFFFFF; |
||||
|
padding: 32rpx 32rpx 24rpx; |
||||
|
border-bottom-left-radius: 32rpx; |
||||
|
border-bottom-right-radius: 32rpx; |
||||
|
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04); |
||||
|
position: sticky; |
||||
|
top: 0; |
||||
|
z-index: 100; |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.search-input-wrapper { |
||||
|
flex: 1; |
||||
|
height: 80rpx; |
||||
|
background: #F8FAFC; |
||||
|
border-radius: 40rpx; |
||||
|
padding: 0 20rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border: 2rpx solid #E2E8F0; |
||||
|
transition: all 0.3s ease; |
||||
|
} |
||||
|
|
||||
|
.search-input-wrapper:focus-within { |
||||
|
border-color: #3B82F6; |
||||
|
box-shadow: 0 0 0 3rpx rgba(59, 130, 246, 0.1); |
||||
|
} |
||||
|
|
||||
|
.search-icon { |
||||
|
width: 45rpx; |
||||
|
height: 45rpx; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.search-input { |
||||
|
flex: 1; |
||||
|
height: 100%; |
||||
|
font-size: 28rpx; |
||||
|
color: #1E293B; |
||||
|
} |
||||
|
|
||||
|
.placeholder { |
||||
|
color: #94A3B8; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.clear-icon { |
||||
|
color: #94A3B8; |
||||
|
padding: 8rpx; |
||||
|
border-radius: 50%; |
||||
|
background: rgba(148, 163, 184, 0.1); |
||||
|
} |
||||
|
|
||||
|
/* 分类筛选 */ |
||||
|
.category-filter { |
||||
|
display: flex; |
||||
|
gap: 20rpx; |
||||
|
overflow-x: auto; |
||||
|
padding-bottom: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.category-filter::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.category-item { |
||||
|
padding: 16rpx 32rpx; |
||||
|
background: #F1F5F9; |
||||
|
border-radius: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #64748B; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
white-space: nowrap; |
||||
|
transition: all 0.3s ease; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.category-item.active { |
||||
|
background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); |
||||
|
color: #FFFFFF; |
||||
|
font-weight: 500; |
||||
|
box-shadow: 0 8rpx 20rpx rgba(59, 130, 246, 0.3); |
||||
|
} |
||||
|
|
||||
|
.category-dot { |
||||
|
width: 8rpx; |
||||
|
height: 8rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
margin-left: 8rpx; |
||||
|
} |
||||
|
|
||||
|
/* 加载状态 */ |
||||
|
.loading { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 120rpx 0; |
||||
|
} |
||||
|
|
||||
|
.spinner { |
||||
|
display: flex; |
||||
|
gap: 12rpx; |
||||
|
margin-bottom: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.spinner-item { |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
background: #3B82F6; |
||||
|
border-radius: 50%; |
||||
|
animation: bounce 1.4s infinite ease-in-out both; |
||||
|
} |
||||
|
|
||||
|
.spinner-item:nth-child(1) { |
||||
|
animation-delay: -0.32s; |
||||
|
} |
||||
|
|
||||
|
.spinner-item:nth-child(2) { |
||||
|
animation-delay: -0.16s; |
||||
|
} |
||||
|
|
||||
|
@keyframes bounce { |
||||
|
|
||||
|
0%, |
||||
|
80%, |
||||
|
100% { |
||||
|
transform: scale(0); |
||||
|
} |
||||
|
|
||||
|
40% { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.loading-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #64748B; |
||||
|
} |
||||
|
|
||||
|
/* 搜索结果 */ |
||||
|
.result-list { |
||||
|
height: calc(100vh - 240rpx); |
||||
|
} |
||||
|
|
||||
|
.result-count { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 32rpx 32rpx 24rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #475569; |
||||
|
} |
||||
|
|
||||
|
/* 知识列表 */ |
||||
|
.knowledge-list { |
||||
|
padding: 0 32rpx; |
||||
|
} |
||||
|
|
||||
|
.knowledge-item { |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 24rpx; |
||||
|
padding: 32rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06); |
||||
|
border: 1rpx solid rgba(226, 232, 240, 0.6); |
||||
|
} |
||||
|
|
||||
|
.item-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.title-wrapper { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.item-title { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #1E293B; |
||||
|
} |
||||
|
|
||||
|
.item-category { |
||||
|
padding: 8rpx 20rpx; |
||||
|
background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%); |
||||
|
color: #065F46; |
||||
|
font-size: 24rpx; |
||||
|
border-radius: 20rpx; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.item-content { |
||||
|
font-size: 28rpx; |
||||
|
color: #475569; |
||||
|
line-height: 1.6; |
||||
|
margin-bottom: 28rpx; |
||||
|
display: -webkit-box; |
||||
|
-webkit-box-orient: vertical; |
||||
|
-webkit-line-clamp: 3; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
/* 底部信息 */ |
||||
|
.item-footer { |
||||
|
border-top: 1rpx solid #F1F5F9; |
||||
|
padding-top: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.tags { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 12rpx; |
||||
|
margin-bottom: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.tag { |
||||
|
padding: 8rpx 20rpx; |
||||
|
background: #F1F5F9; |
||||
|
color: #475569; |
||||
|
font-size: 24rpx; |
||||
|
border-radius: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.actions { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.date-info { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.date { |
||||
|
font-size: 24rpx; |
||||
|
color: #94A3B8; |
||||
|
} |
||||
|
|
||||
|
.copy-btn { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 12rpx 24rpx; |
||||
|
background: #F8FAFC; |
||||
|
border-radius: 20rpx; |
||||
|
font-size: 26rpx; |
||||
|
color: #3B82F6; |
||||
|
border: 1rpx solid #E2E8F0; |
||||
|
transition: all 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.copy-btn:active { |
||||
|
background: #F1F5F9; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
/* 空状态 */ |
||||
|
.empty-state { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding: 80rpx 32rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.empty-text { |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #1E293B; |
||||
|
margin-bottom: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.suggestions { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 20rpx; |
||||
|
width: 100%; |
||||
|
max-width: 500rpx; |
||||
|
} |
||||
|
|
||||
|
.suggestion-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
padding: 24rpx; |
||||
|
background: #F8FAFC; |
||||
|
border-radius: 16rpx; |
||||
|
font-size: 28rpx; |
||||
|
color: #475569; |
||||
|
} |
||||
|
|
||||
|
.suggestion-dot { |
||||
|
width: 12rpx; |
||||
|
height: 12rpx; |
||||
|
background: #3B82F6; |
||||
|
border-radius: 50%; |
||||
|
margin-right: 16rpx; |
||||
|
} |
||||
|
|
||||
|
/* 弹框样式 */ |
||||
|
.modal-mask { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
background: rgba(15, 23, 42, 0.8); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
z-index: 1000; |
||||
|
backdrop-filter: blur(4rpx); |
||||
|
animation: fadeIn 0.3s ease-out; |
||||
|
font-family: '思源宋体 Light' !important; |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.modal-content { |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 32rpx; |
||||
|
width: 80%; |
||||
|
max-width: 600rpx; |
||||
|
overflow: hidden; |
||||
|
animation: slideUp 0.3s ease-out; |
||||
|
} |
||||
|
|
||||
|
@keyframes slideUp { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
transform: translateY(80rpx); |
||||
|
} |
||||
|
|
||||
|
to { |
||||
|
opacity: 1; |
||||
|
transform: translateY(0); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.modal-header { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
padding: 48rpx 0 40rpx; |
||||
|
background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%); |
||||
|
} |
||||
|
|
||||
|
.modal-icon { |
||||
|
width: 60rpx; |
||||
|
height: 60rpx; |
||||
|
margin-bottom: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.modal-title { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 600; |
||||
|
color: #0C4A6E; |
||||
|
} |
||||
|
|
||||
|
.modal-body { |
||||
|
padding: 40rpx 48rpx; |
||||
|
} |
||||
|
|
||||
|
.tip-item { |
||||
|
display: flex; |
||||
|
align-items: flex-start; |
||||
|
margin-bottom: 32rpx; |
||||
|
} |
||||
|
|
||||
|
.tip-item:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
|
||||
|
.tip-number { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); |
||||
|
color: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 24rpx; |
||||
|
font-weight: 600; |
||||
|
margin-right: 20rpx; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
|
||||
|
.tip-text { |
||||
|
font-size: 28rpx; |
||||
|
color: #334155; |
||||
|
line-height: 1.5; |
||||
|
padding-top: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.modal-footer { |
||||
|
padding: 0 48rpx 48rpx; |
||||
|
} |
||||
|
|
||||
|
.modal-confirm { |
||||
|
width: 100%; |
||||
|
height: 88rpx; |
||||
|
background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 100%); |
||||
|
color: #FFFFFF; |
||||
|
border-radius: 44rpx; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 88rpx; |
||||
|
border: none; |
||||
|
box-shadow: 0 8rpx 24rpx rgba(59, 130, 246, 0.3); |
||||
|
transition: transform 0.2s ease; |
||||
|
} |
||||
|
|
||||
|
.modal-confirm:active { |
||||
|
transform: scale(0.98); |
||||
|
} |
||||
|
|
||||
|
.modal-confirm::after { |
||||
|
border: none; |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue