218 lines
13 KiB
Vue
218 lines
13 KiB
Vue
<script setup>
|
|
import { ref } from 'vue';
|
|
import BlogBox from "../components/Blog_box.vue";
|
|
import {getRandomIMG} from "../utils/randomIMG.js";
|
|
|
|
const tags = ref([
|
|
{ name: '家猪饲养', active: false },
|
|
{ name: '猪舍管理', active: false },
|
|
{ name: '猪饲料配方', active: false },
|
|
{ name: '猪种选择', active: false },
|
|
{ name: '猪场建设', active: false },
|
|
{ name: '环境控制', active: false },
|
|
{ name: '疫病防控', active: false },
|
|
{ name: '生猪免疫', active: false },
|
|
{ name: '饲养技术', active: false },
|
|
{ name: '家猪繁育', active: false },
|
|
{ name: '猪瘟预防', active: false },
|
|
{ name: '生猪疫苗', active: false },
|
|
{ name: '屠宰加工', active: false },
|
|
{ name: '猪肉品质', active: false },
|
|
{ name: '养猪设备', active: false },
|
|
{ name: '自动喂料', active: false },
|
|
{ name: '猪粪处理', active: false },
|
|
{ name: '循环利用', active: false },
|
|
{ name: '生猪运输', active: false },
|
|
{ name: '养猪政策', active: false },
|
|
{ name: '生猪市场', active: false },
|
|
{ name: '风险控制', active: false },
|
|
{ name: '遗传改良', active: false },
|
|
{ name: '饲料添加剂', active: false },
|
|
{ name: '生长调控', active: false },
|
|
{ name: '消化率提升', active: false },
|
|
{ name: '高效养猪', active: false },
|
|
{ name: '猪场消毒', active: false },
|
|
{ name: '智能养猪', active: false },
|
|
{ name: '数据养猪', active: false },
|
|
{ name: '健康管理', active: false },
|
|
{ name: '繁殖管理', active: false },
|
|
{ name: '环境优化', active: false },
|
|
{ name: '供应链管理', active: false },
|
|
{ name: '抗生素替代', active: false },
|
|
{ name: '兽医服务', active: false },
|
|
{ name: '营养管理', active: false },
|
|
{ name: '通风系统', active: false },
|
|
{ name: '饲料采购', active: false },
|
|
{ name: '种植基地', active: false },
|
|
{ name: '畜牧业创新', active: false },
|
|
{ name: '经济效益', active: false },
|
|
{ name: '信息化管理', active: false },
|
|
{ name: '肉品追溯', active: false },
|
|
{ name: '生长周期', active: false },
|
|
{ name: '劳动管理', active: false },
|
|
{ name: '粪污利用', active: false },
|
|
{ name: '智慧畜牧', active: false },
|
|
{ name: '可持续发展', active: false },
|
|
{ name: '生态养猪', active: false }
|
|
]);
|
|
|
|
|
|
const searchQuery = ref('');
|
|
|
|
const blogs = ref([
|
|
{ title: '如何提升家猪的生长速度', author: '张强', image: getRandomIMG(Math.random()), creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'] },
|
|
{ title: '猪舍管理的最佳实践', author: '李梅', image: getRandomIMG(Math.random()), creatTime: '2025-02-11 16:45', tags: ['猪舍管理', '环境优化'] },
|
|
{ title: '选择优质猪种的重要性', author: '王涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-10 10:15', tags: ['猪种选择', '遗传改良'] },
|
|
{ title: '猪饲料配方调整技巧', author: '刘刚', image: getRandomIMG(Math.random()), creatTime: '2025-02-09 14:00', tags: ['猪饲料配方', '饲料添加剂'] },
|
|
{ title: '现代猪场建设的关键要素', author: '陈峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-08 09:50', tags: ['猪场建设', '智能养猪'] },
|
|
{ title: '如何有效控制养猪环境', author: '赵立', image: getRandomIMG(Math.random()), creatTime: '2025-02-07 11:30', tags: ['环境控制', '猪舍管理'] },
|
|
{ title: '猪免疫接种的最佳时机', author: '孙华', image: getRandomIMG(Math.random()), creatTime: '2025-02-06 13:00', tags: ['生猪免疫', '疫病防控'] },
|
|
{ title: '如何提高猪肉的品质', author: '周凯', image: getRandomIMG(Math.random()), creatTime: '2025-02-05 15:00', tags: ['猪肉品质', '屠宰加工'] },
|
|
{ title: '智能化养猪设备的应用', author: '杨峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-04 09:20', tags: ['养猪设备', '自动喂料'] },
|
|
{ title: '猪粪处理与资源回收的创新', author: '吴敏', image: getRandomIMG(Math.random()), creatTime: '2025-02-03 17:30', tags: ['猪粪处理', '循环利用'] },
|
|
{ title: '生猪疫苗的选用标准', author: '高雪', image: getRandomIMG(Math.random()), creatTime: '2025-02-02 11:00', tags: ['生猪疫苗', '疫病防控'] },
|
|
{ title: '如何建立高效的猪场管理体系', author: '张涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-01 13:30', tags: ['饲养技术', '风险控制'] },
|
|
{ title: '从猪场到市场的供应链管理', author: '李丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-31 16:40', tags: ['供应链管理', '生猪市场'] },
|
|
{ title: '抗生素替代技术的研究与应用', author: '周鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-30 10:50', tags: ['抗生素替代', '饲料添加剂'] },
|
|
{ title: '生态养猪：环境友好与可持续发展', author: '刘婧', image: getRandomIMG(Math.random()), creatTime: '2025-01-29 08:00', tags: ['生态养猪', '可持续发展'] },
|
|
{ title: '家猪繁殖管理的最佳方法', author: '陈光', image: getRandomIMG(Math.random()), creatTime: '2025-01-28 09:00', tags: ['家猪繁育', '繁殖管理'] },
|
|
{ title: '猪场智能化的未来趋势', author: '王慧', image: getRandomIMG(Math.random()), creatTime: '2025-01-27 14:10', tags: ['智能养猪', '智慧畜牧'] },
|
|
{ title: '优化猪肉品质的生产流程', author: '周华', image: getRandomIMG(Math.random()), creatTime: '2025-01-26 16:25', tags: ['猪肉品质', '生长周期'] },
|
|
{ title: '高效养猪的创新技术', author: '刘磊', image: getRandomIMG(Math.random()), creatTime: '2025-01-25 13:40', tags: ['高效养猪', '饲养技术'] },
|
|
{ title: '猪场管理的数字化转型', author: '张丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-24 12:10', tags: ['信息化管理', '数据养猪'] },
|
|
{ title: '猪肉产品追溯系统的建设', author: '李平', image: getRandomIMG(Math.random()), creatTime: '2025-01-23 15:30', tags: ['肉品追溯', '生猪免疫'] },
|
|
{ title: '如何减少猪场的疫病传播', author: '赵新', image: getRandomIMG(Math.random()), creatTime: '2025-01-22 17:00', tags: ['疫病防控', '猪舍管理'] },
|
|
{ title: '科学管理猪场劳动成本', author: '王萌', image: getRandomIMG(Math.random()), creatTime: '2025-01-21 11:15', tags: ['劳动管理', '经济效益'] },
|
|
{ title: '猪种改良与遗传优化的前景', author: '孙凯', image: getRandomIMG(Math.random()), creatTime: '2025-01-20 09:00', tags: ['遗传改良', '猪种选择'] },
|
|
{ title: '生猪运输过程中风险的防控', author: '杨华', image: getRandomIMG(Math.random()), creatTime: '2025-01-19 12:40', tags: ['生猪运输', '风险控制'] },
|
|
{ title: '猪场的环保与粪污利用技术', author: '王波', image: getRandomIMG(Math.random()), creatTime: '2025-01-18 14:10', tags: ['粪污利用', '生态养猪'] },
|
|
{ title: '智能化管理提升养猪效益', author: '赵雪', image: getRandomIMG(Math.random()), creatTime: '2025-01-17 13:30', tags: ['智能养猪', '高效养猪'] },
|
|
{ title: '家猪养殖中的生长调控策略', author: '陈婷', image: getRandomIMG(Math.random()), creatTime: '2025-01-16 10:30', tags: ['生长调控', '家猪饲养'] },
|
|
{ title: '如何高效利用猪饲料', author: '李伟', image: getRandomIMG(Math.random()), creatTime: '2025-01-15 09:10', tags: ['猪饲料配方', '饲料添加剂'] },
|
|
{ title: '猪场废水处理与资源再利用', author: '周丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-14 12:30', tags: ['猪粪处理', '循环利用'] },
|
|
{ title: '猪场防疫技术与管理措施', author: '王鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-13 14:50', tags: ['疫病防控', '生猪免疫'] },
|
|
{ title: '现代养猪业的科技创新', author: '刘辉', image: getRandomIMG(Math.random()), creatTime: '2025-01-12 16:00', tags: ['畜牧业创新', '智能养猪'] },
|
|
{ title: '新型猪肉加工技术解析', author: '高林', image: getRandomIMG(Math.random()), creatTime: '2025-01-11 11:20', tags: ['屠宰加工', '猪肉品质'] },
|
|
{ title: '猪场的健康管理体系建设', author: '陈杰', image: getRandomIMG(Math.random()), creatTime: '2025-01-10 08:40', tags: ['健康管理', '饲养技术'] },
|
|
{ title: '自动化养猪技术的优势分析', author: '李斌', image: getRandomIMG(Math.random()), creatTime: '2025-01-09 13:30', tags: ['养猪设备', '自动喂料'] },
|
|
{ title: '猪场食品安全与监管体系', author: '张文', image: getRandomIMG(Math.random()), creatTime: '2025-01-08 15:10', tags: ['生猪免疫', '肉品追溯'] },
|
|
{ title: '精准农业与家猪养殖的结合', author: '李龙', image: getRandomIMG(Math.random()), creatTime: '2025-01-07 09:50', tags: ['精准农业', '智能养猪'] },
|
|
{ title: '如何提高家猪的繁殖效率', author: '王丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-06 10:20', tags: ['家猪繁育', '繁殖管理'] },
|
|
{ title: '猪舍设计与环境调控技术', author: '孙瑶', image: getRandomIMG(Math.random()), creatTime: '2025-01-05 11:00', tags: ['猪舍管理', '环境控制'] },
|
|
{ title: '如何选择最合适的猪种进行养殖', author: '赵林', image: getRandomIMG(Math.random()), creatTime: '2025-01-04 14:00', tags: ['猪种选择', '遗传改良'] },
|
|
{ title: '猪场环境污染控制与治理技术', author: '周波', image: getRandomIMG(Math.random()), creatTime: '2025-01-03 16:30', tags: ['环境优化', '猪粪处理'] },
|
|
{ title: '猪肉市场分析与趋势预测', author: '王海', image: getRandomIMG(Math.random()), creatTime: '2025-01-02 10:50', tags: ['生猪市场', '经济效益'] },
|
|
{ title: '家猪养殖中的健康风险控制', author: '杨东', image: getRandomIMG(Math.random()), creatTime: '2025-01-01 09:30', tags: ['风险控制', '健康管理'] },
|
|
{ title: '家猪繁育管理的难点与对策', author: '李彬', image: getRandomIMG(Math.random()), creatTime: '2024-12-31 15:40', tags: ['家猪繁育', '繁殖管理'] },
|
|
{ title: '猪场生产效率的提升路径', author: '陈明', image: getRandomIMG(Math.random()), creatTime: '2024-12-30 13:00', tags: ['高效养猪', '饲养技术'] },
|
|
{ title: '猪场废物利用与绿色养殖', author: '周宇', image: getRandomIMG(Math.random()), creatTime: '2024-12-29 11:20', tags: ['循环利用', '生态养猪'] },
|
|
{ title: '生猪运输中的安全问题与防控', author: '王飞', image: getRandomIMG(Math.random()), creatTime: '2024-12-28 14:50', tags: ['生猪运输', '风险控制'] },
|
|
{ title: '家猪免疫管理的关键措施', author: '刘薇', image: getRandomIMG(Math.random()), creatTime: '2024-12-27 16:30', tags: ['生猪免疫', '疫病防控'] },
|
|
{ title: '如何使用智能设备提高养猪效率', author: '赵婷', image: getRandomIMG(Math.random()), creatTime: '2024-12-26 10:40', tags: ['智能养猪', '养猪设备'] },
|
|
{ title: '猪肉品质的影响因素分析', author: '张莉', image: getRandomIMG(Math.random()), creatTime: '2024-12-25 13:30', tags: ['猪肉品质', '生长周期'] },
|
|
{ title: '猪场管理中数据分析的应用', author: '李帅', image: getRandomIMG(Math.random()), creatTime: '2024-12-24 14:10', tags: ['数据养猪', '信息化管理'] },
|
|
{ title: '猪种选择对养殖效益的影响', author: '王月', image: getRandomIMG(Math.random()), creatTime: '2024-12-23 16:40', tags: ['猪种选择', '经济效益'] }
|
|
])
|
|
|
|
|
|
|
|
const toggleTag = (tag) => {
|
|
tag.active = !tag.active;
|
|
};
|
|
|
|
const filterBlogs = () => {
|
|
return blogs.value.filter(blog => {
|
|
const matchesTags = blog.tags.some(tag => tags.value.find(t => t.name === tag && t.active));
|
|
const matchesSearch = blog.title.toLowerCase().includes(searchQuery.value.toLowerCase());
|
|
return (matchesTags || tags.value.every(t => !t.active)) && matchesSearch;
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="container">
|
|
<div class="filters">
|
|
<div class="tags">
|
|
<span v-for="tag in tags" :key="tag.name" :class="{ active: tag.active }" @click="toggleTag(tag)">
|
|
{{ tag.name }}
|
|
</span>
|
|
</div>
|
|
<input type="text" v-model="searchQuery" placeholder="搜索博客..." class="search-bar" />
|
|
</div>
|
|
|
|
<div class="blogs">
|
|
<BlogBox v-for="blog in filterBlogs()" :key="blog.title" :blog="blog" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
height: calc(100vh - 100px);
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
//margin-top: 70px;
|
|
}
|
|
|
|
.filters {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
flex-wrap: wrap; /* 允许标签换行 */
|
|
gap: 10px;
|
|
justify-content: center; /* 使标签居中 */
|
|
}
|
|
|
|
.tags span {
|
|
cursor: pointer;
|
|
padding: 5px 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.tags span.active {
|
|
background-color: #007bff;
|
|
color: white;
|
|
}
|
|
|
|
.search-bar {
|
|
padding: 10px;
|
|
margin: 20px 0;
|
|
width: 50%;
|
|
border-radius: 10px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.blogs {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
.theme-light .tags span.active {
|
|
background-color: #ffb74d;
|
|
color: black;
|
|
}
|
|
|
|
.theme-light .search-bar {
|
|
border: 1px solid #ffb74d;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|