guarp/cyber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

测试

Browse Source
This commit is contained in:
Guarp 2025-02-15 18:06:26 +08:00
parent 86919685d9
commit cd7bcfa1f7
9 changed files with 150 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/components/Examples_box.vue
View File

@ -6,7 +6,7 @@ defineProps({
<template> <template>
<router-link :to="'/examples/' + example.id"> <router-link :to="'/examples/' + example.id">
<div class="example-box" :class="{ 'no-image': !example.image }"> <div class="example-box" :class="{ 'no-image': !example.image, 'revise': false }">
<img v-if="example.image" :src="example.image" alt="Example image" class="example-image" /> <img v-if="example.image" :src="example.image" alt="Example image" class="example-image" />
<div class="example-details"> <div class="example-details">
<h3>{{ example.name }}</h3> <h3>{{ example.name }}</h3>
@ -22,6 +22,7 @@ defineProps({
<style scoped> <style scoped>
/* 基础布局 */ /* 基础布局 */
.example-box { .example-box {
height: 200px;
display: flex; display: flex;
gap: 20px; gap: 20px;
border-radius: 12px; border-radius: 12px;
@ -30,12 +31,15 @@ defineProps({
overflow: hidden; overflow: hidden;
position: relative; position: relative;
min-height: 180px; min-height: 180px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}
.example-box.revise {
flex-direction: row-reverse;
} }
/* 有图片时的布局 */ /* 有图片时的布局 */
.example-image { .example-image {
width: 240px; width: 240px;
height: 180px;
border-radius: 8px; border-radius: 8px;
object-fit: cover; object-fit: cover;
transform-origin: center; transform-origin: center;
@ -58,27 +62,27 @@ defineProps({
justify-content: space-between; justify-content: space-between;
} }
/* 鼠标悬停动画 */ /* 鼠标悬停动画 */
.example-box:hover { .example-box:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: 0 12px 12px rgba(0, 0, 0, 0.3);
} }
.example-box:hover .example-image { .example-box:hover .example-image {
transform: scale(1.08); transform: scale(1.08);
} }
.example-box:hover h3 {
transform: translateX(8px);
}
/* 文字动画 */
h3 { h3 {
width: 200px;
font-size: 1.4rem; font-size: 1.4rem;
margin-bottom: 8px; margin-bottom: 8px;
transition: transform 0.3s ease;
} }
.author { .author {
margin: 5px 0;
opacity: 0.8; opacity: 0.8;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
@ -139,17 +143,10 @@ h3 {
color: #856404; color: #856404;
} }
/* 无图片时的特殊样式 */
.example-box.no-image {
padding: 30px;
}
.example-box.no-image .example-details { .example-box.no-image .example-details {
gap: 15px; gap: 15px;
} align-items: center;
.example-box.no-image:hover h3 {
transform: scale(1.3);
} }

8
src/components/Projects_projectBox.vue
View File

@ -1,4 +1,6 @@
<script setup> <script setup>
import {setRandomBGCL} from "../utils/randomBGCL.js";
defineProps({ defineProps({
project: Object, project: Object,
}); });
@ -19,8 +21,9 @@ const getStatusColor = (status) => {
<template> <template>
<router-link :to="'/projects/' + project.id"> <router-link :to="'/projects/' + project.id">
<div class="project-box" :style="{ borderColor: getStatusColor(project.status) }"> <div class="project-box" :style="{ borderColor: getStatusColor(project.status),
<img :src="project.image" alt="Project image" class="project-image" /> background: setRandomBGCL(project.name), flexDirection: project.image ? 'column' : 'column-reverse' }">
<img v-if="project.image" :src="project.image" alt="Project image" class="project-image" />
<div class="project-details"> <div class="project-details">
<h3>{{ project.name }}</h3> <h3>{{ project.name }}</h3>
<p class="author">{{ project.author.join("、") }}</p> <p class="author">{{ project.author.join("、") }}</p>
@ -36,6 +39,7 @@ const getStatusColor = (status) => {
<style scoped> <style scoped>
.project-box { .project-box {
width: 350px; /* 增大盒子宽度 */ width: 350px; /* 增大盒子宽度 */
height: 315px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;

11
src/components/Tools_box.vue
View File

@ -1,5 +1,6 @@
<script setup> <script setup>
import { ref } from 'vue'; import {ref} from 'vue';
import {setRandomBGCL} from "../utils/randomBGCL.js";
const props = defineProps({ const props = defineProps({
tool: Object tool: Object
@ -9,6 +10,8 @@ const imageURL = (r1, r2) => {
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`; return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`;
}; };
const hover = ref(false); const hover = ref(false);
</script> </script>
@ -18,8 +21,8 @@ const hover = ref(false);
@mouseover="hover = true" @mouseover="hover = true"
@mouseleave="hover = false" @mouseleave="hover = false"
> >
<div class="image-container"> <div class="image-container" :style="{background: setRandomBGCL(tool.title)}">
<img :src="tool.image" :alt="tool.title" /> <img v-if="tool.image" :src="tool.image" :alt="tool.title"/>
</div> </div>
<div class="text"><h3>{{ tool.title }}</h3> <div class="text"><h3>{{ tool.title }}</h3>
<p>{{ tool.description }}</p></div> <p>{{ tool.description }}</p></div>
@ -50,10 +53,12 @@ const hover = ref(false);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
transform: translateY(-10px); transform: translateY(-10px);
} }
.image-container { .image-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.image-container img { .image-container img {
width: 100%; width: 100%;
height: 100%; height: 100%;

108
src/pages/Blog_home.vue
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import BlogBox from "../components/Blog_box.vue"; import BlogBox from "../components/Blog_box.vue";
import {getRandomIMG} from "../utils/randomIMG.js";
const tags = ref([ const tags = ref([
{ name: '家猪饲养', active: false }, { name: '家猪饲养', active: false },
@ -58,62 +59,59 @@ const tags = ref([
const searchQuery = ref(''); const searchQuery = ref('');
const imageURL = (r1, r2) => {
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`
}
const blogs = ref([ const blogs = ref([
{ title: '如何提升家猪的生长速度', author: '张强', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'] }, { title: '如何提升家猪的生长速度', author: '张强', image: getRandomIMG(Math.random()), creatTime: '2025-02-12 08:30', tags: ['家猪饲养', '生长调控'] },
{ title: '猪舍管理的最佳实践', author: '李梅', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-11 16:45', tags: ['猪舍管理', '环境优化'] }, { title: '猪舍管理的最佳实践', author: '李梅', image: getRandomIMG(Math.random()), creatTime: '2025-02-11 16:45', tags: ['猪舍管理', '环境优化'] },
{ title: '选择优质猪种的重要性', author: '王涛', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-10 10:15', tags: ['猪种选择', '遗传改良'] }, { title: '选择优质猪种的重要性', author: '王涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-10 10:15', tags: ['猪种选择', '遗传改良'] },
{ title: '猪饲料配方调整技巧', author: '刘刚', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-09 14:00', tags: ['猪饲料配方', '饲料添加剂'] }, { title: '猪饲料配方调整技巧', author: '刘刚', image: getRandomIMG(Math.random()), creatTime: '2025-02-09 14:00', tags: ['猪饲料配方', '饲料添加剂'] },
{ title: '现代猪场建设的关键要素', author: '陈峰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-08 09:50', tags: ['猪场建设', '智能养猪'] }, { title: '现代猪场建设的关键要素', author: '陈峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-08 09:50', tags: ['猪场建设', '智能养猪'] },
{ title: '如何有效控制养猪环境', author: '赵立', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-07 11:30', tags: ['环境控制', '猪舍管理'] }, { title: '如何有效控制养猪环境', author: '赵立', image: getRandomIMG(Math.random()), creatTime: '2025-02-07 11:30', tags: ['环境控制', '猪舍管理'] },
{ title: '猪免疫接种的最佳时机', author: '孙华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-06 13:00', tags: ['生猪免疫', '疫病防控'] }, { title: '猪免疫接种的最佳时机', author: '孙华', image: getRandomIMG(Math.random()), creatTime: '2025-02-06 13:00', tags: ['生猪免疫', '疫病防控'] },
{ title: '如何提高猪肉的品质', author: '周凯', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-05 15:00', tags: ['猪肉品质', '屠宰加工'] }, { title: '如何提高猪肉的品质', author: '周凯', image: getRandomIMG(Math.random()), creatTime: '2025-02-05 15:00', tags: ['猪肉品质', '屠宰加工'] },
{ title: '智能化养猪设备的应用', author: '杨峰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-04 09:20', tags: ['养猪设备', '自动喂料'] }, { title: '智能化养猪设备的应用', author: '杨峰', image: getRandomIMG(Math.random()), creatTime: '2025-02-04 09:20', tags: ['养猪设备', '自动喂料'] },
{ title: '猪粪处理与资源回收的创新', author: '吴敏', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-03 17:30', tags: ['猪粪处理', '循环利用'] }, { title: '猪粪处理与资源回收的创新', author: '吴敏', image: getRandomIMG(Math.random()), creatTime: '2025-02-03 17:30', tags: ['猪粪处理', '循环利用'] },
{ title: '生猪疫苗的选用标准', author: '高雪', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-02 11:00', tags: ['生猪疫苗', '疫病防控'] }, { title: '生猪疫苗的选用标准', author: '高雪', image: getRandomIMG(Math.random()), creatTime: '2025-02-02 11:00', tags: ['生猪疫苗', '疫病防控'] },
{ title: '如何建立高效的猪场管理体系', author: '张涛', image: imageURL(Math.random(),Math.random()), creatTime: '2025-02-01 13:30', tags: ['饲养技术', '风险控制'] }, { title: '如何建立高效的猪场管理体系', author: '张涛', image: getRandomIMG(Math.random()), creatTime: '2025-02-01 13:30', tags: ['饲养技术', '风险控制'] },
{ title: '从猪场到市场的供应链管理', author: '李丹', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-31 16:40', tags: ['供应链管理', '生猪市场'] }, { title: '从猪场到市场的供应链管理', author: '李丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-31 16:40', tags: ['供应链管理', '生猪市场'] },
{ title: '抗生素替代技术的研究与应用', author: '周鑫', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-30 10:50', tags: ['抗生素替代', '饲料添加剂'] }, { title: '抗生素替代技术的研究与应用', author: '周鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-30 10:50', tags: ['抗生素替代', '饲料添加剂'] },
{ title: '生态养猪：环境友好与可持续发展', author: '刘婧', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-29 08:00', tags: ['生态养猪', '可持续发展'] }, { title: '生态养猪：环境友好与可持续发展', author: '刘婧', image: getRandomIMG(Math.random()), creatTime: '2025-01-29 08:00', tags: ['生态养猪', '可持续发展'] },
{ title: '家猪繁殖管理的最佳方法', author: '陈光', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-28 09:00', tags: ['家猪繁育', '繁殖管理'] }, { title: '家猪繁殖管理的最佳方法', author: '陈光', image: getRandomIMG(Math.random()), creatTime: '2025-01-28 09:00', tags: ['家猪繁育', '繁殖管理'] },
{ title: '猪场智能化的未来趋势', author: '王慧', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-27 14:10', tags: ['智能养猪', '智慧畜牧'] }, { title: '猪场智能化的未来趋势', author: '王慧', image: getRandomIMG(Math.random()), creatTime: '2025-01-27 14:10', tags: ['智能养猪', '智慧畜牧'] },
{ title: '优化猪肉品质的生产流程', author: '周华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-26 16:25', tags: ['猪肉品质', '生长周期'] }, { title: '优化猪肉品质的生产流程', author: '周华', image: getRandomIMG(Math.random()), creatTime: '2025-01-26 16:25', tags: ['猪肉品质', '生长周期'] },
{ title: '高效养猪的创新技术', author: '刘磊', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-25 13:40', tags: ['高效养猪', '饲养技术'] }, { title: '高效养猪的创新技术', author: '刘磊', image: getRandomIMG(Math.random()), creatTime: '2025-01-25 13:40', tags: ['高效养猪', '饲养技术'] },
{ title: '猪场管理的数字化转型', author: '张丽', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-24 12:10', tags: ['信息化管理', '数据养猪'] }, { title: '猪场管理的数字化转型', author: '张丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-24 12:10', tags: ['信息化管理', '数据养猪'] },
{ title: '猪肉产品追溯系统的建设', author: '李平', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-23 15:30', tags: ['肉品追溯', '生猪免疫'] }, { title: '猪肉产品追溯系统的建设', author: '李平', image: getRandomIMG(Math.random()), creatTime: '2025-01-23 15:30', tags: ['肉品追溯', '生猪免疫'] },
{ title: '如何减少猪场的疫病传播', author: '赵新', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-22 17:00', tags: ['疫病防控', '猪舍管理'] }, { title: '如何减少猪场的疫病传播', author: '赵新', image: getRandomIMG(Math.random()), creatTime: '2025-01-22 17:00', tags: ['疫病防控', '猪舍管理'] },
{ title: '科学管理猪场劳动成本', author: '王萌', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-21 11:15', tags: ['劳动管理', '经济效益'] }, { title: '科学管理猪场劳动成本', author: '王萌', image: getRandomIMG(Math.random()), creatTime: '2025-01-21 11:15', tags: ['劳动管理', '经济效益'] },
{ title: '猪种改良与遗传优化的前景', author: '孙凯', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-20 09:00', tags: ['遗传改良', '猪种选择'] }, { title: '猪种改良与遗传优化的前景', author: '孙凯', image: getRandomIMG(Math.random()), creatTime: '2025-01-20 09:00', tags: ['遗传改良', '猪种选择'] },
{ title: '生猪运输过程中风险的防控', author: '杨华', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-19 12:40', tags: ['生猪运输', '风险控制'] }, { title: '生猪运输过程中风险的防控', author: '杨华', image: getRandomIMG(Math.random()), creatTime: '2025-01-19 12:40', tags: ['生猪运输', '风险控制'] },
{ title: '猪场的环保与粪污利用技术', author: '王波', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-18 14:10', tags: ['粪污利用', '生态养猪'] }, { title: '猪场的环保与粪污利用技术', author: '王波', image: getRandomIMG(Math.random()), creatTime: '2025-01-18 14:10', tags: ['粪污利用', '生态养猪'] },
{ title: '智能化管理提升养猪效益', author: '赵雪', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-17 13:30', tags: ['智能养猪', '高效养猪'] }, { title: '智能化管理提升养猪效益', author: '赵雪', image: getRandomIMG(Math.random()), creatTime: '2025-01-17 13:30', tags: ['智能养猪', '高效养猪'] },
{ title: '家猪养殖中的生长调控策略', author: '陈婷', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-16 10:30', tags: ['生长调控', '家猪饲养'] }, { title: '家猪养殖中的生长调控策略', author: '陈婷', image: getRandomIMG(Math.random()), creatTime: '2025-01-16 10:30', tags: ['生长调控', '家猪饲养'] },
{ title: '如何高效利用猪饲料', author: '李伟', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-15 09:10', tags: ['猪饲料配方', '饲料添加剂'] }, { title: '如何高效利用猪饲料', author: '李伟', image: getRandomIMG(Math.random()), creatTime: '2025-01-15 09:10', tags: ['猪饲料配方', '饲料添加剂'] },
{ title: '猪场废水处理与资源再利用', author: '周丹', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-14 12:30', tags: ['猪粪处理', '循环利用'] }, { title: '猪场废水处理与资源再利用', author: '周丹', image: getRandomIMG(Math.random()), creatTime: '2025-01-14 12:30', tags: ['猪粪处理', '循环利用'] },
{ title: '猪场防疫技术与管理措施', author: '王鑫', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-13 14:50', tags: ['疫病防控', '生猪免疫'] }, { title: '猪场防疫技术与管理措施', author: '王鑫', image: getRandomIMG(Math.random()), creatTime: '2025-01-13 14:50', tags: ['疫病防控', '生猪免疫'] },
{ title: '现代养猪业的科技创新', author: '刘辉', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-12 16:00', tags: ['畜牧业创新', '智能养猪'] }, { title: '现代养猪业的科技创新', author: '刘辉', image: getRandomIMG(Math.random()), creatTime: '2025-01-12 16:00', tags: ['畜牧业创新', '智能养猪'] },
{ title: '新型猪肉加工技术解析', author: '高林', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-11 11:20', tags: ['屠宰加工', '猪肉品质'] }, { title: '新型猪肉加工技术解析', author: '高林', image: getRandomIMG(Math.random()), creatTime: '2025-01-11 11:20', tags: ['屠宰加工', '猪肉品质'] },
{ title: '猪场的健康管理体系建设', author: '陈杰', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-10 08:40', tags: ['健康管理', '饲养技术'] }, { title: '猪场的健康管理体系建设', author: '陈杰', image: getRandomIMG(Math.random()), creatTime: '2025-01-10 08:40', tags: ['健康管理', '饲养技术'] },
{ title: '自动化养猪技术的优势分析', author: '李斌', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-09 13:30', tags: ['养猪设备', '自动喂料'] }, { title: '自动化养猪技术的优势分析', author: '李斌', image: getRandomIMG(Math.random()), creatTime: '2025-01-09 13:30', tags: ['养猪设备', '自动喂料'] },
{ title: '猪场食品安全与监管体系', author: '张文', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-08 15:10', tags: ['生猪免疫', '肉品追溯'] }, { title: '猪场食品安全与监管体系', author: '张文', image: getRandomIMG(Math.random()), creatTime: '2025-01-08 15:10', tags: ['生猪免疫', '肉品追溯'] },
{ title: '精准农业与家猪养殖的结合', author: '李龙', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-07 09:50', tags: ['精准农业', '智能养猪'] }, { title: '精准农业与家猪养殖的结合', author: '李龙', image: getRandomIMG(Math.random()), creatTime: '2025-01-07 09:50', tags: ['精准农业', '智能养猪'] },
{ title: '如何提高家猪的繁殖效率', author: '王丽', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-06 10:20', tags: ['家猪繁育', '繁殖管理'] }, { title: '如何提高家猪的繁殖效率', author: '王丽', image: getRandomIMG(Math.random()), creatTime: '2025-01-06 10:20', tags: ['家猪繁育', '繁殖管理'] },
{ title: '猪舍设计与环境调控技术', author: '孙瑶', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-05 11:00', tags: ['猪舍管理', '环境控制'] }, { title: '猪舍设计与环境调控技术', author: '孙瑶', image: getRandomIMG(Math.random()), creatTime: '2025-01-05 11:00', tags: ['猪舍管理', '环境控制'] },
{ title: '如何选择最合适的猪种进行养殖', author: '赵林', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-04 14:00', tags: ['猪种选择', '遗传改良'] }, { title: '如何选择最合适的猪种进行养殖', author: '赵林', image: getRandomIMG(Math.random()), creatTime: '2025-01-04 14:00', tags: ['猪种选择', '遗传改良'] },
{ title: '猪场环境污染控制与治理技术', author: '周波', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-03 16:30', tags: ['环境优化', '猪粪处理'] }, { title: '猪场环境污染控制与治理技术', author: '周波', image: getRandomIMG(Math.random()), creatTime: '2025-01-03 16:30', tags: ['环境优化', '猪粪处理'] },
{ title: '猪肉市场分析与趋势预测', author: '王海', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-02 10:50', tags: ['生猪市场', '经济效益'] }, { title: '猪肉市场分析与趋势预测', author: '王海', image: getRandomIMG(Math.random()), creatTime: '2025-01-02 10:50', tags: ['生猪市场', '经济效益'] },
{ title: '家猪养殖中的健康风险控制', author: '杨东', image: imageURL(Math.random(),Math.random()), creatTime: '2025-01-01 09:30', tags: ['风险控制', '健康管理'] }, { title: '家猪养殖中的健康风险控制', author: '杨东', image: getRandomIMG(Math.random()), creatTime: '2025-01-01 09:30', tags: ['风险控制', '健康管理'] },
{ title: '家猪繁育管理的难点与对策', author: '李彬', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-31 15:40', tags: ['家猪繁育', '繁殖管理'] }, { title: '家猪繁育管理的难点与对策', author: '李彬', image: getRandomIMG(Math.random()), creatTime: '2024-12-31 15:40', tags: ['家猪繁育', '繁殖管理'] },
{ title: '猪场生产效率的提升路径', author: '陈明', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-30 13:00', tags: ['高效养猪', '饲养技术'] }, { title: '猪场生产效率的提升路径', author: '陈明', image: getRandomIMG(Math.random()), creatTime: '2024-12-30 13:00', tags: ['高效养猪', '饲养技术'] },
{ title: '猪场废物利用与绿色养殖', author: '周宇', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-29 11:20', tags: ['循环利用', '生态养猪'] }, { title: '猪场废物利用与绿色养殖', author: '周宇', image: getRandomIMG(Math.random()), creatTime: '2024-12-29 11:20', tags: ['循环利用', '生态养猪'] },
{ title: '生猪运输中的安全问题与防控', author: '王飞', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-28 14:50', tags: ['生猪运输', '风险控制'] }, { title: '生猪运输中的安全问题与防控', author: '王飞', image: getRandomIMG(Math.random()), creatTime: '2024-12-28 14:50', tags: ['生猪运输', '风险控制'] },
{ title: '家猪免疫管理的关键措施', author: '刘薇', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-27 16:30', tags: ['生猪免疫', '疫病防控'] }, { title: '家猪免疫管理的关键措施', author: '刘薇', image: getRandomIMG(Math.random()), creatTime: '2024-12-27 16:30', tags: ['生猪免疫', '疫病防控'] },
{ title: '如何使用智能设备提高养猪效率', author: '赵婷', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-26 10:40', tags: ['智能养猪', '养猪设备'] }, { title: '如何使用智能设备提高养猪效率', author: '赵婷', image: getRandomIMG(Math.random()), creatTime: '2024-12-26 10:40', tags: ['智能养猪', '养猪设备'] },
{ title: '猪肉品质的影响因素分析', author: '张莉', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-25 13:30', tags: ['猪肉品质', '生长周期'] }, { title: '猪肉品质的影响因素分析', author: '张莉', image: getRandomIMG(Math.random()), creatTime: '2024-12-25 13:30', tags: ['猪肉品质', '生长周期'] },
{ title: '猪场管理中数据分析的应用', author: '李帅', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-24 14:10', tags: ['数据养猪', '信息化管理'] }, { title: '猪场管理中数据分析的应用', author: '李帅', image: getRandomIMG(Math.random()), creatTime: '2024-12-24 14:10', tags: ['数据养猪', '信息化管理'] },
{ title: '猪种选择对养殖效益的影响', author: '王月', image: imageURL(Math.random(),Math.random()), creatTime: '2024-12-23 16:40', tags: ['猪种选择', '经济效益'] } { title: '猪种选择对养殖效益的影响', author: '王月', image: getRandomIMG(Math.random()), creatTime: '2024-12-23 16:40', tags: ['猪种选择', '经济效益'] }
]) ])

15
src/pages/Examples_home.vue
View File

@ -1,25 +1,18 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import Examples_box from '../components/Examples_box.vue' import Examples_box from '../components/Examples_box.vue'
import {getRandomIMG} from "../utils/randomIMG.js";
// 搜索输入
const searchQuery = ref('') const searchQuery = ref('')
// 用于生成随机图片尺寸
const imageURL = (r1, r2) => {
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`
}
// 示例项目数据
const examples = ref([ const examples = ref([
{ {
id: 1, id: 1,
name: '智能养殖系统', name: '留言板',
author: ["张三", "李四"], author: ["张三", "李四"],
image: imageURL(Math.random(), Math.random()), image: getRandomIMG(Math.random(), 0),
status: '进行中',
tags: ['智能养殖', '数据分析', '物联网'] tags: ['智能养殖', '数据分析', '物联网']
} },
]); ]);

8
src/pages/Projects_home.vue
View File

@ -16,7 +16,7 @@ const projects = ref([
id: 1, id: 1,
name: '智能养殖系统', name: '智能养殖系统',
author: ["张三", "李四"], author: ["张三", "李四"],
image: imageURL(Math.random(), Math.random()), image: null,
status: '进行中', status: '进行中',
tags: ['智能养殖', '自动喂养', '数据分析', '物联网'] tags: ['智能养殖', '自动喂养', '数据分析', '物联网']
}, },
@ -24,7 +24,7 @@ const projects = ref([
id: 2, id: 2,
name: '绿色生态猪场', name: '绿色生态猪场',
author: ["王五", "赵六"], author: ["王五", "赵六"],
image: imageURL(Math.random(), Math.random()), image: null,
status: '已完成', status: '已完成',
tags: ['环保', '生态养殖', '有机饲料', '循环利用'] tags: ['环保', '生态养殖', '有机饲料', '循环利用']
}, },
@ -32,7 +32,7 @@ const projects = ref([
id: 3, id: 3,
name: '基因优化猪种', name: '基因优化猪种',
author: ["刘七", "杨八"], author: ["刘七", "杨八"],
image: imageURL(Math.random(), Math.random()), image: null,
status: '待定', status: '待定',
tags: ['基因研究', '猪种改良', '优质肉类', '育种技术'] tags: ['基因研究', '猪种改良', '优质肉类', '育种技术']
}, },
@ -40,7 +40,7 @@ const projects = ref([
id: 4, id: 4,
name: '猪肉生产透明化', name: '猪肉生产透明化',
author: ["孙九", "钱十"], author: ["孙九", "钱十"],
image: imageURL(Math.random(), Math.random()), image: null,
status: '暂停', status: '暂停',
tags: ['透明供应链', '动物福利', '溯源技术', '肉品安全'] tags: ['透明供应链', '动物福利', '溯源技术', '肉品安全']
}, },

44
src/pages/Tools_home.vue
View File

@ -1,6 +1,7 @@
<script setup> <script setup>
import { ref } from 'vue'; import { ref } from 'vue';
import ToolsBox from "../components/Tools_box.vue"; import ToolsBox from "../components/Tools_box.vue";
import {getRandomIMG} from "../utils/randomIMG.js";
const categories = ref([ const categories = ref([
{ name: '家猪饲养', active: false }, { name: '家猪饲养', active: false },
@ -17,31 +18,28 @@ const categories = ref([
const searchQuery = ref(''); const searchQuery = ref('');
const imageURL = (r1, r2) => {
return `https://picsum.photos/${220 + Math.floor(r1 * 500)}/${220 + Math.floor(r2 * 500)}`;
};
const tools = ref([ const tools = ref([
{ title: '猪饲料配方推荐', description: '根据不同阶段推荐饲料配方', image: imageURL(Math.random(), Math.random()), category: '家猪饲养' }, { title: '猪饲料配方推荐', description: '根据不同阶段推荐饲料配方', image: getRandomIMG(Math.random()), category: '家猪饲养' },
{ title: '猪舍监测工具', description: '帮助管理猪舍环境参数的工具', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' }, { title: '猪舍监测工具', description: '帮助管理猪舍环境参数的工具', image: getRandomIMG(Math.random()), category: '猪舍管理' },
{ title: '优质猪种推荐', description: '提供猪种选择与建议', image: imageURL(Math.random(), Math.random()), category: '猪种选择' }, { title: '优质猪种推荐', description: '提供猪种选择与建议', image: getRandomIMG(Math.random()), category: '猪种选择' },
{ title: '猪群健康监测', description: '实时监控猪群健康状态', image: imageURL(Math.random(), Math.random()), category: '健康管理' }, { title: '猪群健康监测', description: '实时监控猪群健康状态', image: getRandomIMG(Math.random()), category: '健康管理' },
{ title: '猪肉价格分析', description: '提供最新猪肉市场价格数据', image: imageURL(Math.random(), Math.random()), category: '市场分析' }, { title: '猪肉价格分析', description: '提供最新猪肉市场价格数据', image: getRandomIMG(Math.random()), category: '市场分析' },
{ title: '饲料成本优化', description: '根据不同饲料成本进行优化建议', image: imageURL(Math.random(), Math.random()), category: '饲料管理' }, { title: '饲料成本优化', description: '根据不同饲料成本进行优化建议', image: getRandomIMG(Math.random()), category: '饲料管理' },
{ title: '猪舍通风系统', description: '推荐最佳猪舍通风方案', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' }, { title: '猪舍通风系统', description: '推荐最佳猪舍通风方案', image: getRandomIMG(Math.random()), category: '猪舍管理' },
{ title: '疾病预防与疫苗', description: '帮助制定猪群疫苗接种计划', image: imageURL(Math.random(), Math.random()), category: '健康管理' }, { title: '疾病预防与疫苗', description: '帮助制定猪群疫苗接种计划', image: getRandomIMG(Math.random()), category: '健康管理' },
{ title: '生猪生长监控', description: '追踪生猪的生长情况与速度', image: imageURL(Math.random(), Math.random()), category: '生产管理' }, { title: '生猪生长监控', description: '追踪生猪的生长情况与速度', image: getRandomIMG(Math.random()), category: '生产管理' },
{ title: '猪只体重跟踪', description: '监控猪只体重的变化情况', image: imageURL(Math.random(), Math.random()), category: '生产管理' }, { title: '猪只体重跟踪', description: '监控猪只体重的变化情况', image: getRandomIMG(Math.random()), category: '生产管理' },
{ title: '清洁与消毒工具', description: '提供猪舍清洁和消毒方法建议', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' }, { title: '清洁与消毒工具', description: '提供猪舍清洁和消毒方法建议', image: getRandomIMG(Math.random()), category: '猪舍管理' },
{ title: '温湿度调控系统', description: '帮助调控猪舍内温湿度的系统', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' }, { title: '温湿度调控系统', description: '帮助调控猪舍内温湿度的系统', image: getRandomIMG(Math.random()), category: '猪舍管理' },
{ title: '猪只运动量跟踪', description: '监控猪只的运动量与活动情况', image: imageURL(Math.random(), Math.random()), category: '健康管理' }, { title: '猪只运动量跟踪', description: '监控猪只的运动量与活动情况', image: getRandomIMG(Math.random()), category: '健康管理' },
{ title: '猪舍智能喂养', description: '智能化猪舍喂养系统，减少人工干预', image: imageURL(Math.random(), Math.random()), category: '智能农业' }, { title: '猪舍智能喂养', description: '智能化猪舍喂养系统，减少人工干预', image: getRandomIMG(Math.random()), category: '智能农业' },
{ title: '生猪屠宰信息', description: '实时追踪生猪屠宰信息和数据', image: imageURL(Math.random(), Math.random()), category: '生产管理' }, { title: '生猪屠宰信息', description: '实时追踪生猪屠宰信息和数据', image: getRandomIMG(Math.random()), category: '生产管理' },
{ title: '饲料成分分析', description: '分析饲料中的各种营养成分', image: imageURL(Math.random(), Math.random()), category: '饲料管理' }, { title: '饲料成分分析', description: '分析饲料中的各种营养成分', image: getRandomIMG(Math.random()), category: '饲料管理' },
{ title: '猪只健康评估', description: '帮助评估猪只健康状况的工具', image: imageURL(Math.random(), Math.random()), category: '健康管理' }, { title: '猪只健康评估', description: '帮助评估猪只健康状况的工具', image: getRandomIMG(Math.random()), category: '健康管理' },
{ title: '猪舍自动清理', description: '自动清理猪舍的工具', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' }, { title: '猪舍自动清理', description: '自动清理猪舍的工具', image: getRandomIMG(Math.random()), category: '猪舍管理' },
{ title: '猪群繁殖优化', description: '优化猪群繁殖效率的工具', image: imageURL(Math.random(), Math.random()), category: '繁殖管理' }, { title: '猪群繁殖优化', description: '优化猪群繁殖效率的工具', image: getRandomIMG(Math.random()), category: '繁殖管理' },
{ title: '空气质量监测', description: '监测猪舍空气质量，提供改善建议', image: imageURL(Math.random(), Math.random()), category: '猪舍管理' }, { title: '空气质量监测', description: '监测猪舍空气质量，提供改善建议', image: getRandomIMG(Math.random()), category: '猪舍管理' },
]); ]);

22
src/utils/randomBGCL.js Normal file
View File

@ -0,0 +1,22 @@
import store from "../store/index.js";
export function setRandomBGCL(str) {
let r = Math.floor(Math.random() * 55);
let g = Math.floor(Math.random() * 55);
let b = Math.floor(Math.random() * 55);
if (str) {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash); // 计算哈希值
}
// 通过哈希值生成 RGB，保证颜色在浅色范围
r = ((hash >> 16) & 0xFF) * 0.2;
g = ((hash >> 8) & 0xFF) * 0.2;
b = (hash & 0xFF) * 0.2;
}
if (store.getters.currentTheme === 'dark') {
return `rgb(${r}, ${g}, ${b})`
}
return `rgb(${r + 200}, ${g + 200}, ${b + 200})`
}

20
src/utils/randomIMG.js Normal file
View File

@ -0,0 +1,20 @@
export function getRandomIMG(seed, category) {
let url;
const urls = [
// `https://www.loliapi.com/acg`,
`https://picsum.photos/300/300`,
`https://loremflickr.com/300/300`,
`https://imgapi.xl0408.top/index.php`,
// `https://t.alcy.cc/ysz`,
// `https://t.alcy.cc/moe`,
// `https://t.alcy.cc/pc`,
// `https://t.alcy.cc/ycy`
]
if (category !== undefined) {
url = urls[category];
} else {
url = urls[Math.round(Math.random() * (urls.length - 1))];
}
return url + `?p=${Math.floor(seed * 10000)}`
}