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