修改农事服务
This commit is contained in:
parent
b7d7a01ad9
commit
bfc0ca51f2
BIN
sub-operation-service/src/assets/images/1.png
Normal file
BIN
sub-operation-service/src/assets/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
sub-operation-service/src/assets/images/2.png
Normal file
BIN
sub-operation-service/src/assets/images/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
sub-operation-service/src/assets/images/3.png
Normal file
BIN
sub-operation-service/src/assets/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
BIN
sub-operation-service/src/assets/images/gr.jpg
Normal file
BIN
sub-operation-service/src/assets/images/gr.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
sub-operation-service/src/assets/images/zj.png
Normal file
BIN
sub-operation-service/src/assets/images/zj.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 714 KiB |
@ -200,48 +200,79 @@ export const constantRoutes = [
|
||||
path: '/sub-operation-service/farmService',
|
||||
component: Layout,
|
||||
name: 'farmService',
|
||||
redirect: '/sub-operation-service/farmService/consult/policy',
|
||||
redirect: '/sub-operation-service/farmService/consult/laborServices',
|
||||
meta: { title: '农事服务' },
|
||||
children: [
|
||||
{
|
||||
path: 'consult',
|
||||
component: Views,
|
||||
redirect: '/sub-operation-service/farmService/consult/policy',
|
||||
redirect: '/sub-operation-service/farmService/consult/laborServices',
|
||||
name: 'farmServiceMain',
|
||||
meta: { title: '农事咨询' },
|
||||
meta: { title: '农事' },
|
||||
children: [
|
||||
// {
|
||||
// path: 'policy',
|
||||
// component: Views,
|
||||
// name: 'farmPolicys',
|
||||
// meta: { title: '劳务用工' },
|
||||
// children: [
|
||||
// {
|
||||
// path: '',
|
||||
// component: () => import('@/views/farmingService/farmingConsult/index.vue'),
|
||||
// name: 'farmPolicy',
|
||||
// meta: { title: '农业政策', hideInBread: true },
|
||||
// },
|
||||
// {
|
||||
// path: 'detail',
|
||||
// component: () => import('@/views/farmingService/farmingConsult/policyDetail.vue'),
|
||||
// name: 'farmPolicyDetail',
|
||||
// meta: { title: '农业政策详情' },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
path: 'policy',
|
||||
component: Views,
|
||||
name: 'farmPolicys',
|
||||
meta: { title: '农业政策' },
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
component: () => import('@/views/farmingService/farmingConsult/index.vue'),
|
||||
name: 'farmPolicy',
|
||||
meta: { title: '农业政策', hideInBread: true },
|
||||
},
|
||||
{
|
||||
path: 'detail',
|
||||
component: () => import('@/views/farmingService/farmingConsult/policyDetail.vue'),
|
||||
name: 'farmPolicyDetail',
|
||||
meta: { title: '农业政策详情' },
|
||||
},
|
||||
],
|
||||
path: 'laborServices',
|
||||
component: () => import('@/views/farmingService/farmingConsult/laborServices.vue'),
|
||||
// component: Views,
|
||||
name: 'laborServices',
|
||||
meta: { title: '劳务用工' },
|
||||
},
|
||||
{
|
||||
path: 'technology',
|
||||
component: () => import('@/views/farmingService/farmingConsult/farmingTec.vue'),
|
||||
name: 'farmTechnology',
|
||||
meta: { title: '农事技术' },
|
||||
path: 'laborServicesDel',
|
||||
component: () => import('@/views/farmingService/farmingConsult/laborServicesDel.vue'),
|
||||
name: 'laborServicesDel',
|
||||
meta: { title: '劳务用工详情页' },
|
||||
},
|
||||
{
|
||||
path: 'situation',
|
||||
component: () => import('@/views/farmingService/farmingConsult/situation.vue'),
|
||||
name: 'farmSituation',
|
||||
meta: { title: '市场行情' },
|
||||
path: 'agriculturalMachinery',
|
||||
component: () => import('@/views/farmingService/farmingConsult/agriculturalMachinery.vue'),
|
||||
name: 'agriculturalMachinery',
|
||||
meta: { title: '农机服务' },
|
||||
},
|
||||
{
|
||||
path: 'agriculturalTechnology',
|
||||
component: () => import('@/views/farmingService/farmingConsult/agriculturalTechnology.vue'),
|
||||
name: 'agriculturalTechnology',
|
||||
meta: { title: '农技服务' },
|
||||
},
|
||||
{
|
||||
path: 'agriculturalTechnologyDel',
|
||||
component: () => import('@/views/farmingService/farmingConsult/agriculturalTechnologyDel.vue'),
|
||||
name: 'agriculturalTechnologyDel',
|
||||
meta: { title: '农技服务详情页' },
|
||||
},
|
||||
// {
|
||||
// path: 'technology',
|
||||
// component: () => import('@/views/farmingService/farmingConsult/farmingTec.vue'),
|
||||
// name: 'farmTechnology',
|
||||
// meta: { title: '农事技术' },
|
||||
// },
|
||||
// {
|
||||
// path: 'situation',
|
||||
// component: () => import('@/views/farmingService/farmingConsult/situation.vue'),
|
||||
// name: 'farmSituation',
|
||||
// meta: { title: '市场行情' },
|
||||
// },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
@ -49,29 +49,29 @@ const router = useRouter();
|
||||
const leftMenu = reactive([
|
||||
{
|
||||
name: 'inspection',
|
||||
title: '农事资讯',
|
||||
title: '农事',
|
||||
icon: 'menu1.png',
|
||||
path: '',
|
||||
isOpen: false,
|
||||
children: [
|
||||
{
|
||||
name: 'farmPolicy',
|
||||
title: '农业政策资讯',
|
||||
name: 'laborServices',
|
||||
title: '劳务用工',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/farmService/consult/policy',
|
||||
path: '/sub-operation-service/farmService/consult/laborServices',
|
||||
},
|
||||
{
|
||||
name: 'agriculturalMachinery',
|
||||
title: '农机服务',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/farmService/consult/agriculturalMachinery',
|
||||
},
|
||||
{
|
||||
name: 'agriculturalTechnology',
|
||||
title: '农技服务',
|
||||
icon: 'menu1.png',
|
||||
path: '/sub-operation-service/farmService/consult/agriculturalTechnology',
|
||||
},
|
||||
// {
|
||||
// name: 'farmTechnology',
|
||||
// title: '农事技术',
|
||||
// icon: 'menu1.png',
|
||||
// path: '/sub-operation-service/farmService/consult/technology',
|
||||
// },
|
||||
// {
|
||||
// name: 'farmSituation',
|
||||
// title: '市场行情',
|
||||
// icon: 'menu1.png',
|
||||
// path: '/sub-operation-service/farmService/consult/situation',
|
||||
// },
|
||||
],
|
||||
},
|
||||
// {
|
||||
|
||||
@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card style="border-radius: 16px">
|
||||
<div class="choose">
|
||||
<div class="searchType">整机类型</div>
|
||||
<div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">全部</div>
|
||||
<div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">收割机</div>
|
||||
<div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">插秧机</div>
|
||||
<div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">播种机</div>
|
||||
<div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">烘干机</div>
|
||||
<div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">喷雾机</div>
|
||||
<div :class="{ active: chooseMoney === 6 }" class="chooseItem" @click="changeChoose('money', 6)">饲料机</div>
|
||||
<div :class="{ active: chooseMoney === 7 }" class="chooseItem" @click="changeChoose('money', 7)">拖拉机</div>
|
||||
<div :class="{ active: chooseMoney === 8 }" class="chooseItem" @click="changeChoose('money', 8)">其他</div>
|
||||
</div>
|
||||
<div style="align-items: center" class="choose">
|
||||
<div class="searchType">地理位置</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-cascader v-model="postArea" style="width: 100%" :props="props" :options="options" @change="handleChange" />
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-input v-model="address" placeholder="输入详细位置" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="align-items: center" class="choose">
|
||||
<div class="searchType">用车时间</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-date-picker v-model="value2" type="date" placeholder="开始日期" :size="size" />
|
||||
</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-date-picker v-model="value3" type="date" placeholder="结束日期" :size="size" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="align-items: center" class="choose">
|
||||
<div class="searchType">用车时间</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-input v-model="price1" placeholder="最低价格/天" />
|
||||
</div>
|
||||
<div style="margin-left: 20px">~</div>
|
||||
<div style="margin-left: 20px">
|
||||
<el-input v-model="price2" placeholder="最高价格/天" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<div style="margin-top: 20px">
|
||||
<el-card shadow="hover" style="border-radius: 16px; margin-top: 10px; background-color: #f5f5f5">
|
||||
<!-- <h2 style="text-align: left">农业政策</h2> -->
|
||||
<div style="width: 100%">
|
||||
<div v-for="(item, index) in tableData" :key="index" class="card-item">
|
||||
<div style="width: 100%; display: flex; align-items: center; justify-content: center">
|
||||
<img :src="item.imgPath" alt="" width="200px" style="height: 200px" />
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 0 20px">
|
||||
<div>
|
||||
<div style="font-size: 16px; font-weight: bold; margin-top: 5px">{{ item.title }}</div>
|
||||
<div style="font-size: 14px; margin-top: 5px">
|
||||
{{ item.subtext }}
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-top: 5px">
|
||||
<div style="font-size: 12px">
|
||||
<text style="color: #25bf82; font-size: 15px; font-weight: bold">{{ item.price }}</text
|
||||
>元/天
|
||||
</div>
|
||||
<div style="font-size: 12px">可用时间：{{ item.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; justify-content: space-between; margin-top: 5px">
|
||||
<div style="display: flex; align-items: center">
|
||||
<img style="width: 20px; height: 20px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
<div style="margin-left: 5px">{{ item.name }}</div>
|
||||
</div>
|
||||
<el-button style="height: 30px; background-color: #25bf82; color: #ffffff; border-radius: 16px" @click="goDetail(item.id)"
|
||||
>立即预约</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { informationList } from '@/apis/farmingService.js';
|
||||
import options from '../../../assets/address.json';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const router = useRouter();
|
||||
let postArea = ref('');
|
||||
let address = ref('');
|
||||
let value2 = ref('');
|
||||
let value3 = ref('');
|
||||
let price1 = ref('');
|
||||
let price2 = ref('');
|
||||
const props = ref({
|
||||
value: 'label',
|
||||
});
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '东风牌 1204 型拖拉机',
|
||||
subtext: '拖拉机·广安市岳池县',
|
||||
price: '1800',
|
||||
time: '全年',
|
||||
name: '王师傅',
|
||||
imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/1.png',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '久保田 4LZ-5A1 收割机',
|
||||
subtext: '收割机·广安市武胜县',
|
||||
price: '2500',
|
||||
time: '7-9月',
|
||||
name: '李师傅',
|
||||
imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/2.png',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '洋马 VP6D 高速插秧机',
|
||||
subtext: '插秧机·广安市邻水县',
|
||||
price: '1600',
|
||||
time: '4-5月',
|
||||
name: 'w王师傅',
|
||||
imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/3.png',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: '约翰迪尔 9B 播种机',
|
||||
subtext: '播种机·广安市广安区',
|
||||
price: '1200',
|
||||
time: '3-4月',
|
||||
name: '赵师傅',
|
||||
imgPath: 'http://localhost:9526/sub-operation-service/src/assets/images/2.png',
|
||||
},
|
||||
]);
|
||||
const chooseMoney = ref(0);
|
||||
const chooseDate = ref(0);
|
||||
const chooseWay = ref(0);
|
||||
const chooseUse = ref(0);
|
||||
const chooseType = ref(0);
|
||||
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
onMounted(() => {
|
||||
// queryList();
|
||||
});
|
||||
|
||||
const extractText = (htmlText, maxChars = 80) => {
|
||||
// 去除 HTML 标签
|
||||
const cleanText = htmlText.replace(/<[^>]+>/g, '');
|
||||
// 去除多余空格和换行
|
||||
const trimmedText = cleanText.replace(/\s+/g, ' ').trim();
|
||||
// 取前 20 个字
|
||||
return trimmedText.substring(0, maxChars);
|
||||
};
|
||||
|
||||
const queryList = () => {
|
||||
informationList({ current: pagination.value.page, size: pagination.value.size }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.records;
|
||||
for (let i in res.data.records) {
|
||||
tableData.value[i].content = extractText(res.data.records[i].content);
|
||||
if (tableData.value[i].content.length > 80) {
|
||||
tableData.value[i].content += '...';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const changeChoose = (type, index) => {
|
||||
switch (type) {
|
||||
case 'money':
|
||||
chooseMoney.value = index;
|
||||
break;
|
||||
case 'date':
|
||||
chooseDate.value = index;
|
||||
break;
|
||||
case 'way':
|
||||
chooseWay.value = index;
|
||||
break;
|
||||
case 'use':
|
||||
chooseUse.value = index;
|
||||
break;
|
||||
case 'type':
|
||||
chooseType.value = index;
|
||||
break;
|
||||
}
|
||||
// getList();
|
||||
};
|
||||
|
||||
const goDetail = (id) => {
|
||||
ElMessage({
|
||||
message: '功能正在维护中，请稍后点击',
|
||||
type: 'warning',
|
||||
});
|
||||
// router.push('/sub-operation-service/farmService/consult/laborServicesDel?id=' + id);
|
||||
};
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.framing_service_content {
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
width: 1200px;
|
||||
min-height: 600px;
|
||||
border: 1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card-item {
|
||||
border-radius: 10px;
|
||||
padding: 10px 0;
|
||||
background-color: #fff;
|
||||
float: left;
|
||||
width: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.choose {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.searchType {
|
||||
color: #999999;
|
||||
}
|
||||
.chooseAll {
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chooseItem {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card style="border-radius: 16px">
|
||||
<div class="choose">
|
||||
<div class="searchType">分类</div>
|
||||
<div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">离畜养殖</div>
|
||||
<div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">水果种植</div>
|
||||
<div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">粮油作物种植</div>
|
||||
<div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">苗木花草种植</div>
|
||||
<div :class="{ active: chooseMoney === 4 }" class="chooseItem" @click="changeChoose('money', 4)">经济作物种植</div>
|
||||
<div :class="{ active: chooseMoney === 5 }" class="chooseItem" @click="changeChoose('money', 5)">蔬菜种植</div>
|
||||
<!-- <div :class="{ active: chooseMoney === 6 }" class="chooseItem" @click="changeChoose('money', 6)">中药材种植</div>
|
||||
<div :class="{ active: chooseMoney === 7 }" class="chooseItem" @click="changeChoose('money', 7)">水产养殖</div>
|
||||
<div :class="{ active: chooseMoney === 8 }" class="chooseItem" @click="changeChoose('money', 8)">其他养殖</div> -->
|
||||
</div>
|
||||
<div class="choose">
|
||||
<div class="searchType">排序方式</div>
|
||||
<div :class="{ active: chooseDate === 0 }" class="chooseAll" @click="changeChoose('date', 0)">咨询量从高到低</div>
|
||||
<div :class="{ active: chooseDate === 1 }" class="chooseItem" @click="changeChoose('date', 1)">回复量从高到低</div>
|
||||
<div :class="{ active: chooseDate === 2 }" class="chooseItem" @click="changeChoose('date', 2)">有用量从高到低</div>
|
||||
</div>
|
||||
<!-- <div class="choose">
|
||||
<div class="searchType">农产加工劳务用工</div>
|
||||
<div :class="{ active: chooseWay === 0 }" class="chooseAll" @click="changeChoose('way', 0)">清洗分拣用工</div>
|
||||
<div :class="{ active: chooseWay === 1 }" class="chooseItem" @click="changeChoose('way', 1)">简单包装用工</div>
|
||||
<div :class="{ active: chooseWay === 2 }" class="chooseItem" @click="changeChoose('way', 2)">食品加工用工</div>
|
||||
</div> -->
|
||||
<!-- <div class="choose">
|
||||
<div class="searchType">消费主体</div>
|
||||
<div :class="{ active: chooseUse === 0 }" class="chooseAll" @click="changeChoose('use', 0)">不限</div>
|
||||
<div :class="{ active: chooseUse === 1 }" class="chooseItem" @click="changeChoose('use', 1)">种植</div>
|
||||
<div :class="{ active: chooseUse === 2 }" class="chooseItem" @click="changeChoose('use', 2)">养殖</div>
|
||||
<div :class="{ active: chooseUse === 3 }" class="chooseItem" @click="changeChoose('use', 3)">加工</div>
|
||||
<div :class="{ active: chooseUse === 4 }" class="chooseItem" @click="changeChoose('use', 4)">仓储</div>
|
||||
<div :class="{ active: chooseUse === 5 }" class="chooseItem" @click="changeChoose('use', 5)">流通</div>
|
||||
</div>
|
||||
<div class="choose">
|
||||
<div class="searchType">产品类型</div>
|
||||
<div :class="{ active: chooseType === 0 }" class="chooseAll" @click="changeChoose('type', 0)">不限</div>
|
||||
<div :class="{ active: chooseType === 1 }" class="chooseItem" @click="changeChoose('type', 1)">线上审批</div>
|
||||
<div :class="{ active: chooseType === 2 }" class="chooseItem" @click="changeChoose('type', 2)">线下审批</div>
|
||||
<div :class="{ active: chooseType === 3 }" class="chooseItem" @click="changeChoose('type', 3)">秒批秒贷</div>
|
||||
</div> -->
|
||||
<!--
|
||||
<div style="margin-top: 20px; display: flex; justify-content: space-between; font-size: 18px">
|
||||
<div>
|
||||
共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
|
||||
</div>
|
||||
<div class="sort" @click="sortFunction(0)">线下审批<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
<div class="sort" @click="sortFunction(1)">贷款额度<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
<div class="sort" @click="sortFunction(2)">贷款利率<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
<div class="sort" @click="sortFunction(3)">贷款期限<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
</div> -->
|
||||
</el-card>
|
||||
<div style="margin-top: 20px">
|
||||
<el-card v-for="(item, index) in tableData" :key="index" shadow="hover" style="border-radius: 16px; margin-top: 10px">
|
||||
<!-- <h2 style="text-align: left">农业政策</h2> -->
|
||||
<div class="card-item">
|
||||
<div style="width: 220px; background-color: white">
|
||||
<img src="../../../assets/images/zj.png" alt="" width="200px" style="height: 200px" />
|
||||
</div>
|
||||
<div style="width: 75%; display: flex; flex-direction: column; justify-content: space-between">
|
||||
<div>
|
||||
<div style="font-size: 18px">{{ item.title }}</div>
|
||||
<div style="font-size: 14px; margin-top: 10px">
|
||||
{{ item.subtext }}
|
||||
</div>
|
||||
<div style="font-size: 14px; margin-top: 10px; color: #eaa04a">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
<div style="font-size: 14px; margin-top: 10px">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div
|
||||
v-for="(items, indexs) in item.list"
|
||||
:key="indexs"
|
||||
style="font-size: 14px; border: 1px solid #bbb; border-radius: 10px; padding: 2px 10px; margin-right: 10px; color: #eaa04a"
|
||||
>
|
||||
{{ items.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 14px; margin-top: 10px">
|
||||
{{ item.range }}
|
||||
</div>
|
||||
<!-- <div style="display: flex; width: 100%; margin-top: 10px">
|
||||
<div style="margin-right: 150px; font-size: 20px; color: red">￥150/天</div>
|
||||
<div style="font-size: 14px">云南省临沧市耿马县新城村</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; justify-content: end">
|
||||
<el-button style="height: 30px; background-color: #25bf82; color: #ffffff; border-radius: 16px" @click="goDetail(item.id)"
|
||||
>查看</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { informationList } from '@/apis/farmingService.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const router = useRouter();
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '农业专业林老师',
|
||||
subtext: '可咨询时间：9:00-18:00',
|
||||
time: '服务次数：8364 明星专家',
|
||||
list: [{ title: '已通过企业认证' }, { title: '信用等级:优' }],
|
||||
range: '专业范围：粮食、蔬菜、果树、食用菌平菇优质高产绿色标准化生产技术，病虫害综合防治技术。',
|
||||
// desc: '制度关乎根本、稳定和长远，全面推进乡村振兴事关国泰民安。以农业农村现代化推进农业强国建设，尤其需要重视农村制度建设。党的二十届三中全会作出“完善强农惠农富农支持制度”的决策部署。',
|
||||
imgPath: 'images/mockPic/nyzc0.png',
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// title: '高级农艺师麦老师',
|
||||
// subtext: '可咨询时间：9:00-18:00',
|
||||
// time: '服务次数：5641 明星专家',
|
||||
// list: [{ title: '已通过企业认证' }, { title: '信用等级:优' }],
|
||||
// range: '专业范围：白菜、西红柿、丝瓜、南瓜、苦瓜、西瓜、辣椒、水果、花卉等园艺作物的栽培技术。',
|
||||
// // desc: '制度关乎根本、稳定和长远，全面推进乡村振兴事关国泰民安。以农业农村现代化推进农业强国建设，尤其需要重视农村制度建设。党的二十届三中全会作出“完善强农惠农富农支持制度”的决策部署。',
|
||||
// imgPath: 'images/mockPic/nyzc0.png',
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// title: '农民日报仲农平文章：一号文件里的“三农”脉动',
|
||||
// desc: '自党的十九大提出乡村振兴战略后，2018年中央一号文件对该战略进行了顶层设计，将其作为新时代“三农”工作的总抓手，绘制出一幅扎实的蓝图。',
|
||||
// imgPath: 'images/mockPic/nyzc2.png',
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// title: '近年来，三农问题一直是国家关注的焦点。在新的历史时期，我们必须坚持农业农村优先发展的战略，加快推进乡村振兴，建设美好新农村。',
|
||||
// desc: '首先，我们要深入推进农业现代化。传统农业已经无法满足现代社会的需求，我们必须引进新技术、新品种、新模式，提高农业生产效率和质量。',
|
||||
// imgPath: 'images/mockPic/nyzc3.png',
|
||||
// },
|
||||
]);
|
||||
const chooseMoney = ref(0);
|
||||
const chooseDate = ref(0);
|
||||
const chooseWay = ref(0);
|
||||
const chooseUse = ref(0);
|
||||
const chooseType = ref(0);
|
||||
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
onMounted(() => {
|
||||
// queryList();
|
||||
});
|
||||
|
||||
const extractText = (htmlText, maxChars = 80) => {
|
||||
// 去除 HTML 标签
|
||||
const cleanText = htmlText.replace(/<[^>]+>/g, '');
|
||||
// 去除多余空格和换行
|
||||
const trimmedText = cleanText.replace(/\s+/g, ' ').trim();
|
||||
// 取前 20 个字
|
||||
return trimmedText.substring(0, maxChars);
|
||||
};
|
||||
|
||||
const queryList = () => {
|
||||
informationList({ current: pagination.value.page, size: pagination.value.size }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.records;
|
||||
for (let i in res.data.records) {
|
||||
tableData.value[i].content = extractText(res.data.records[i].content);
|
||||
if (tableData.value[i].content.length > 80) {
|
||||
tableData.value[i].content += '...';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const changeChoose = (type, index) => {
|
||||
switch (type) {
|
||||
case 'money':
|
||||
chooseMoney.value = index;
|
||||
break;
|
||||
case 'date':
|
||||
chooseDate.value = index;
|
||||
break;
|
||||
case 'way':
|
||||
chooseWay.value = index;
|
||||
break;
|
||||
case 'use':
|
||||
chooseUse.value = index;
|
||||
break;
|
||||
case 'type':
|
||||
chooseType.value = index;
|
||||
break;
|
||||
}
|
||||
// getList();
|
||||
};
|
||||
|
||||
const goDetail = (id) => {
|
||||
ElMessage({
|
||||
message: '功能正在维护中，请稍后点击',
|
||||
type: 'warning',
|
||||
});
|
||||
// router.push('/sub-operation-service/farmService/consult/agriculturalTechnologyDel?id=' + id);
|
||||
};
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.framing_service_content {
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
width: 1200px;
|
||||
min-height: 600px;
|
||||
border: 1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
.choose {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.searchType {
|
||||
color: #999999;
|
||||
}
|
||||
.chooseAll {
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chooseItem {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,380 @@
|
||||
<template>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<div style="background-color: #fff; padding: 10px">
|
||||
<div class="top">
|
||||
<div class="top_hot">金牌</div>
|
||||
<div class="top_impatient">急聘</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 5px; justify-content: space-between">
|
||||
<div style="text-align: left">
|
||||
<div class="top_title">农业专业林老师</div>
|
||||
<div class="top_subtitle">云南省临沧市耿马新城村 种植 发布于5天前</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="top_price">220/天</div>
|
||||
<div class="top_updata">立即申请</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">服务年限</div>
|
||||
<div>10年</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-left: 200px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">完成订单</div>
|
||||
<div>128单</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-left: 200px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">平均评分</div>
|
||||
<div>5.0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">技能描述</div>
|
||||
<div style="line-height: 30px; font-size: 12px; color: #aaa; margin-top: 10px">
|
||||
本人从事水稻种植工作已有10年，拥有丰富的水稻种植经验，熟悉水稻从选种、育秧、移栽到收割的全过程。
|
||||
擅长解决水稻种植过程中的各种病虫害问题，能够根据不同的土壤条件和气候特点，制定科学合理的种植方案。
|
||||
可提供水稻种植技术指导、病虫害防治、田间管理等服务，保证水稻的产量和质量。
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">服务内容</div>
|
||||
<div class="top_info">
|
||||
<div>水稻品种选择与推荐</div>
|
||||
<div style="margin-left: 300px">指导</div>
|
||||
</div>
|
||||
<div class="top_info">
|
||||
<div>稻田管理与施肥</div>
|
||||
<div style="margin-left: 325px">防治</div>
|
||||
</div>
|
||||
<div class="top_info">
|
||||
<div>收割与储存建议</div>
|
||||
<div style="margin-left: 295px">植物技术指导</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">服务描述</div>
|
||||
<div style="line-height: 30px; font-size: 12px; color: #aaa; margin-top: 10px">
|
||||
我们是一家专业从事农业种植的企业，现因春耕生产需要，诚招有经验的种植工人，主要负责水稻、玉米等农作物的种植工作。
|
||||
工作内容包括土地翻耕、播种、育苗、移栽、田间管理等，要求身体健康，能吃苦耐劳，有相关种植经验者优先。
|
||||
我们提供食宿，工作环境良好，薪资待遇优厚，欢迎有兴趣的朋友加入我们的团队!
|
||||
</div>
|
||||
</div> -->
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px; display: flex">
|
||||
<div style="width: 50%">
|
||||
<div style="font-size: 15px; font-weight: bold">服务流程</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">需求沟通</div>
|
||||
<div>详细了解您的种植需求和田间情况</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">方案制定</div>
|
||||
<div>根据您的需求和实际情况，制定详细的服务方案</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">签订协议</div>
|
||||
<div>双方确认服务方案，签订服务协议</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">服务实施</div>
|
||||
<div>按照协议约定的时间和内容，提供专业的种植服务</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">验收评价</div>
|
||||
<div>服务完成后，进行验收并提供服务评价</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="width: 50%">
|
||||
<div style="font-size: 15px; font-weight: bold">联系信息</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">联系人</div>
|
||||
<div>王经理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">联系电话</div>
|
||||
<div>138****5678</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">邮箱</div>
|
||||
<div>wang@nongye.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 10px;
|
||||
padding: 5px 20px;
|
||||
background-color: #ff9800;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
"
|
||||
>
|
||||
联系电话
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">服务案例</div>
|
||||
<div style="margin-top: 20px; display: flex; justify-content: space-evenly">
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<img style="width: 270px; height: 150px" src="../../../assets/images/carton.png" alt="" />
|
||||
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
|
||||
<div style="font-size: 15px; font-weight: bold">岳池县稻田增产案例</div>
|
||||
<el-rate v-model="value1" />
|
||||
<div style="font-size: 12px">通过科学的种植管理，帮助农户水稻增产20%，获得农户一致好评。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<img style="width: 270px; height: 150px" src="../../../assets/images/carton.png" alt="" />
|
||||
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
|
||||
<div style="font-size: 15px; font-weight: bold">邻水县病虫害防治案例</div>
|
||||
<el-rate v-model="value1" />
|
||||
<div style="font-size: 12px">有效防治水稻稻瘟病，避免了农户的经济损失，得到当地政府的认可。</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column">
|
||||
<img style="width: 270px; height: 150px" src="../../../assets/images/carton.png" alt="" />
|
||||
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
|
||||
<div style="font-size: 15px; font-weight: bold">邻水县稻田增产案例</div>
|
||||
<el-rate v-model="value1" />
|
||||
<div style="font-size: 12px">通过科学的种植管理，帮助农户水稻增产20%，获得农户一致好评。</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">客户评价</div>
|
||||
<div style="width: 100%; color: #9ea4a7; margin-top: 20px; border: 1px solid #eee; padding: 10px; border-radius: 10px">
|
||||
<div style="display: flex; align-items: center">
|
||||
<div>
|
||||
<img style="width: 50px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">刘老板</div>
|
||||
<el-rate v-model="value1" />
|
||||
<div>2025-03-10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
水稻种植技术非常专业，帮我解决了多年的水稻产量低问题，今年产量比去年增加了20%，非常感谢!服务态度也 很好，有问必答，非常耐心。
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; color: #9ea4a7; margin-top: 20px; border: 1px solid #eee; padding: 10px; border-radius: 10px">
|
||||
<div style="display: flex; align-items: center">
|
||||
<div>
|
||||
<img style="width: 50px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">王老板</div>
|
||||
<el-rate v-model="value1" />
|
||||
<div>2025-03-10</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
水稻病虫害的防治非常有经验，去年我的稻田受到稻瘟病的困扰，损失惨重。今年请张师傅来指导，及时采取了防
|
||||
治措施，稻田没有再出现病害，效果非常好。
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; width: 100%; justify-content: space-between; margin-top: 20px">
|
||||
<div
|
||||
style="
|
||||
width: 30%;
|
||||
height: 80px;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 20px; color: #2e7d32; font-weight: bold">12</div>
|
||||
<div style="font-size: 15px">正在招聘</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 30%;
|
||||
height: 80px;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 20px; color: #2e7d32; font-weight: bold">56</div>
|
||||
<div style="font-size: 15px">累计发布</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 30%;
|
||||
height: 80px;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 20px; color: #2e7d32; font-weight: bold">98%</div>
|
||||
<div style="font-size: 15px">好评率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { informationList } from '@/apis/farmingService.js';
|
||||
const router = useRouter();
|
||||
let value1 = ref(5);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.framing_service_content {
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
width: 1200px;
|
||||
min-height: 600px;
|
||||
border: 1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
.choose {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.searchType {
|
||||
color: #999999;
|
||||
}
|
||||
.chooseAll {
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chooseItem {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
.top_hot {
|
||||
background-color: #dcfce7;
|
||||
border-radius: 10px;
|
||||
color: #438c48;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
.top_impatient {
|
||||
margin-left: 10px;
|
||||
background-color: #dbeafe;
|
||||
border-radius: 10px;
|
||||
color: #4886f0;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
}
|
||||
.top_title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top_subtitle {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
.top_updata {
|
||||
padding: 8px 15px;
|
||||
background-color: #25bf82;
|
||||
color: #fff;
|
||||
border-radius: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.top_price {
|
||||
font-weight: bold;
|
||||
color: #f59a23;
|
||||
font-size: 20px;
|
||||
}
|
||||
.top_info {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
div {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,258 @@
|
||||
<template>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<el-card style="border-radius: 16px">
|
||||
<div class="choose">
|
||||
<div class="searchType">种植劳务用工</div>
|
||||
<div :class="{ active: chooseMoney === 0 }" class="chooseAll" @click="changeChoose('money', 0)">耕地整地用工</div>
|
||||
<div :class="{ active: chooseMoney === 1 }" class="chooseItem" @click="changeChoose('money', 1)">播种育苗用工</div>
|
||||
<div :class="{ active: chooseMoney === 2 }" class="chooseItem" @click="changeChoose('money', 2)">田间管理用工</div>
|
||||
<div :class="{ active: chooseMoney === 3 }" class="chooseItem" @click="changeChoose('money', 3)">收货采摘用工</div>
|
||||
</div>
|
||||
<div class="choose">
|
||||
<div class="searchType">养殖劳务用工</div>
|
||||
<div :class="{ active: chooseDate === 0 }" class="chooseAll" @click="changeChoose('date', 0)">饲养管理用工</div>
|
||||
<div :class="{ active: chooseDate === 1 }" class="chooseItem" @click="changeChoose('date', 1)">疫病防治用工</div>
|
||||
<div :class="{ active: chooseDate === 2 }" class="chooseItem" @click="changeChoose('date', 2)">池塘养殖用工</div>
|
||||
<div :class="{ active: chooseDate === 3 }" class="chooseItem" @click="changeChoose('date', 3)">网箱养殖用工</div>
|
||||
</div>
|
||||
<div class="choose">
|
||||
<div class="searchType">农产加工劳务用工</div>
|
||||
<div :class="{ active: chooseWay === 0 }" class="chooseAll" @click="changeChoose('way', 0)">清洗分拣用工</div>
|
||||
<div :class="{ active: chooseWay === 1 }" class="chooseItem" @click="changeChoose('way', 1)">简单包装用工</div>
|
||||
<div :class="{ active: chooseWay === 2 }" class="chooseItem" @click="changeChoose('way', 2)">食品加工用工</div>
|
||||
</div>
|
||||
<!-- <div class="choose">
|
||||
<div class="searchType">消费主体</div>
|
||||
<div :class="{ active: chooseUse === 0 }" class="chooseAll" @click="changeChoose('use', 0)">不限</div>
|
||||
<div :class="{ active: chooseUse === 1 }" class="chooseItem" @click="changeChoose('use', 1)">种植</div>
|
||||
<div :class="{ active: chooseUse === 2 }" class="chooseItem" @click="changeChoose('use', 2)">养殖</div>
|
||||
<div :class="{ active: chooseUse === 3 }" class="chooseItem" @click="changeChoose('use', 3)">加工</div>
|
||||
<div :class="{ active: chooseUse === 4 }" class="chooseItem" @click="changeChoose('use', 4)">仓储</div>
|
||||
<div :class="{ active: chooseUse === 5 }" class="chooseItem" @click="changeChoose('use', 5)">流通</div>
|
||||
</div>
|
||||
<div class="choose">
|
||||
<div class="searchType">产品类型</div>
|
||||
<div :class="{ active: chooseType === 0 }" class="chooseAll" @click="changeChoose('type', 0)">不限</div>
|
||||
<div :class="{ active: chooseType === 1 }" class="chooseItem" @click="changeChoose('type', 1)">线上审批</div>
|
||||
<div :class="{ active: chooseType === 2 }" class="chooseItem" @click="changeChoose('type', 2)">线下审批</div>
|
||||
<div :class="{ active: chooseType === 3 }" class="chooseItem" @click="changeChoose('type', 3)">秒批秒贷</div>
|
||||
</div> -->
|
||||
<!--
|
||||
<div style="margin-top: 20px; display: flex; justify-content: space-between; font-size: 18px">
|
||||
<div>
|
||||
共匹配到 <span style="color: #25bf82">{{ pagination.total }}</span> 个结果
|
||||
</div>
|
||||
<div class="sort" @click="sortFunction(0)">线下审批<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
<div class="sort" @click="sortFunction(1)">贷款额度<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
<div class="sort" @click="sortFunction(2)">贷款利率<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
<div class="sort" @click="sortFunction(3)">贷款期限<img :src="getAssetsFile('images/finance/default.png')" alt="" /></div>
|
||||
</div> -->
|
||||
</el-card>
|
||||
<div style="margin-top: 20px">
|
||||
<el-card v-for="(item, index) in tableData" :key="index" shadow="hover" style="border-radius: 16px; margin-top: 10px">
|
||||
<!-- <h2 style="text-align: left">农业政策</h2> -->
|
||||
<div class="card-item">
|
||||
<div style="width: 220px; background-color: white">
|
||||
<img src="../../../assets/images/gr.jpg" alt="" width="200px" />
|
||||
</div>
|
||||
<div style="width: 75%; display: flex; flex-direction: column; justify-content: space-between">
|
||||
<div>
|
||||
<div style="font-size: 18px">{{ item.title }}</div>
|
||||
<div style="font-size: 14px; margin-top: 10px">
|
||||
{{ item.subtext }}
|
||||
</div>
|
||||
<div style="font-size: 14px; margin-top: 10px">
|
||||
{{ item.time }}
|
||||
</div>
|
||||
<div style="font-size: 14px; margin-top: 10px">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div
|
||||
v-for="(items, indexs) in item.list"
|
||||
:key="indexs"
|
||||
style="font-size: 14px; border: 1px solid #bbb; border-radius: 10px; padding: 2px 10px; margin-right: 10px; color: #eaa04a"
|
||||
>
|
||||
{{ items.title }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; width: 100%; margin-top: 10px">
|
||||
<div style="margin-right: 150px; font-size: 20px; color: red">￥150/天</div>
|
||||
<div style="font-size: 14px">云南省临沧市耿马县新城村</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; justify-content: end">
|
||||
<el-button style="height: 30px; background-color: #25bf82; color: #ffffff; border-radius: 16px" @click="goDetail(item.id)"
|
||||
>查看</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { informationList } from '@/apis/farmingService.js';
|
||||
import { ElMessage } from 'element-plus';
|
||||
const router = useRouter();
|
||||
|
||||
/* --------------- data --------------- */
|
||||
// #region
|
||||
|
||||
const tableData = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '耿马县新城村诚信合作社招17名分拣工',
|
||||
subtext: '无需经验，只要做蔬菜分拣和包装。',
|
||||
time: '开工时间:2024-10-24 8:30',
|
||||
list: [{ title: '已通过企业认证' }, { title: '信用等级:优' }],
|
||||
// desc: '制度关乎根本、稳定和长远，全面推进乡村振兴事关国泰民安。以农业农村现代化推进农业强国建设，尤其需要重视农村制度建设。党的二十届三中全会作出“完善强农惠农富农支持制度”的决策部署。',
|
||||
imgPath: 'images/mockPic/nyzc0.png',
|
||||
},
|
||||
// {
|
||||
// id: 2,
|
||||
// title: '招20名采摘工',
|
||||
// subtext: '采摘蓝莓',
|
||||
// time: '开工时间:2024-10-24 8:30',
|
||||
// list: [{ title: '已通过企业认证' }, { title: '信用等级:优' }],
|
||||
// // desc: '制度关乎根本、稳定和长远，全面推进乡村振兴事关国泰民安。以农业农村现代化推进农业强国建设，尤其需要重视农村制度建设。党的二十届三中全会作出“完善强农惠农富农支持制度”的决策部署。',
|
||||
// imgPath: 'images/mockPic/nyzc0.png',
|
||||
// },
|
||||
// {
|
||||
// id: 2,
|
||||
// title: '农民日报仲农平文章：一号文件里的“三农”脉动',
|
||||
// desc: '自党的十九大提出乡村振兴战略后，2018年中央一号文件对该战略进行了顶层设计，将其作为新时代“三农”工作的总抓手，绘制出一幅扎实的蓝图。',
|
||||
// imgPath: 'images/mockPic/nyzc2.png',
|
||||
// },
|
||||
// {
|
||||
// id: 3,
|
||||
// title: '近年来，三农问题一直是国家关注的焦点。在新的历史时期，我们必须坚持农业农村优先发展的战略，加快推进乡村振兴，建设美好新农村。',
|
||||
// desc: '首先，我们要深入推进农业现代化。传统农业已经无法满足现代社会的需求，我们必须引进新技术、新品种、新模式，提高农业生产效率和质量。',
|
||||
// imgPath: 'images/mockPic/nyzc3.png',
|
||||
// },
|
||||
]);
|
||||
const chooseMoney = ref(0);
|
||||
const chooseDate = ref(0);
|
||||
const chooseWay = ref(0);
|
||||
const chooseUse = ref(0);
|
||||
const chooseType = ref(0);
|
||||
|
||||
const pagination = ref({
|
||||
total: 0,
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
// #endregion
|
||||
|
||||
/* --------------- methods --------------- */
|
||||
// #region
|
||||
onMounted(() => {
|
||||
// queryList();
|
||||
});
|
||||
|
||||
const extractText = (htmlText, maxChars = 80) => {
|
||||
// 去除 HTML 标签
|
||||
const cleanText = htmlText.replace(/<[^>]+>/g, '');
|
||||
// 去除多余空格和换行
|
||||
const trimmedText = cleanText.replace(/\s+/g, ' ').trim();
|
||||
// 取前 20 个字
|
||||
return trimmedText.substring(0, maxChars);
|
||||
};
|
||||
|
||||
const queryList = () => {
|
||||
informationList({ current: pagination.value.page, size: pagination.value.size }).then((res) => {
|
||||
if (res.code === 200) {
|
||||
tableData.value = res.data.records;
|
||||
for (let i in res.data.records) {
|
||||
tableData.value[i].content = extractText(res.data.records[i].content);
|
||||
if (tableData.value[i].content.length > 80) {
|
||||
tableData.value[i].content += '...';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const changeChoose = (type, index) => {
|
||||
switch (type) {
|
||||
case 'money':
|
||||
chooseMoney.value = index;
|
||||
break;
|
||||
case 'date':
|
||||
chooseDate.value = index;
|
||||
break;
|
||||
case 'way':
|
||||
chooseWay.value = index;
|
||||
break;
|
||||
case 'use':
|
||||
chooseUse.value = index;
|
||||
break;
|
||||
case 'type':
|
||||
chooseType.value = index;
|
||||
break;
|
||||
}
|
||||
// getList();
|
||||
};
|
||||
|
||||
const goDetail = (id) => {
|
||||
ElMessage({
|
||||
message: '功能正在维护中，请稍后点击',
|
||||
type: 'warning',
|
||||
});
|
||||
// router.push('/sub-operation-service/farmService/consult/laborServicesDel?id=' + id);
|
||||
};
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.framing_service_content {
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
width: 1200px;
|
||||
min-height: 600px;
|
||||
border: 1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
.choose {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.searchType {
|
||||
color: #999999;
|
||||
}
|
||||
.chooseAll {
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chooseItem {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,417 @@
|
||||
<template>
|
||||
<div>
|
||||
<common>
|
||||
<template #main>
|
||||
<div style="background-color: #fff; padding: 10px">
|
||||
<div class="top">
|
||||
<div class="top_hot">热门</div>
|
||||
<div class="top_impatient">急聘</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 5px; justify-content: space-between">
|
||||
<div style="text-align: left">
|
||||
<div class="top_title">耿马县新城村诚信合作社招17名分拣工</div>
|
||||
<div class="top_subtitle">云南省临沧市耿马新城村 种植鲉 发布于3天前</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="top_price">150/天</div>
|
||||
<div class="top_updata">立即申请</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex">
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">招聘人数</div>
|
||||
<div>30人</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-left: 300px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">工作天数</div>
|
||||
<div>45天</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">工作时间</div>
|
||||
<div>2025-03-15至2025-04-28</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-left: 215px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">结算方式</div>
|
||||
<div>日结</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">服务描述</div>
|
||||
<div style="line-height: 30px; font-size: 12px; color: #aaa; margin-top: 10px">
|
||||
我们是一家专业从事农业种植的企业，现因春耕生产需要，诚招有经验的种植工人，主要负责水稻、玉米等农作物的种植工作。
|
||||
工作内容包括土地翻耕、播种、育苗、移栽、田间管理等，要求身体健康，能吃苦耐劳，有相关种植经验者优先。
|
||||
我们提供食宿，工作环境良好，薪资待遇优厚，欢迎有兴趣的朋友加入我们的团队!
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">工作要求</div>
|
||||
<div class="top_info">
|
||||
<div>年龄要求：20-25岁</div>
|
||||
<div style="margin-left: 300px">性别要求：不限</div>
|
||||
</div>
|
||||
<div class="top_info">
|
||||
<div>经验要求：1年</div>
|
||||
<div style="margin-left: 325px">技能要求：会使用基本农具</div>
|
||||
</div>
|
||||
<div class="top_info">
|
||||
<div>健康要求：身体健康</div>
|
||||
<div style="margin-left: 295px">其他要求：能吃苦耐劳</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">服务描述</div>
|
||||
<div style="line-height: 30px; font-size: 12px; color: #aaa; margin-top: 10px">
|
||||
我们是一家专业从事农业种植的企业，现因春耕生产需要，诚招有经验的种植工人，主要负责水稻、玉米等农作物的种植工作。
|
||||
工作内容包括土地翻耕、播种、育苗、移栽、田间管理等，要求身体健康，能吃苦耐劳，有相关种植经验者优先。
|
||||
我们提供食宿，工作环境良好，薪资待遇优厚，欢迎有兴趣的朋友加入我们的团队!
|
||||
</div>
|
||||
</div> -->
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px; display: flex">
|
||||
<div style="width: 50%">
|
||||
<div style="font-size: 15px; font-weight: bold">服务流程</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">报名申请</div>
|
||||
<div>在线提交申请或者电话联系我们</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">面试筛选</div>
|
||||
<div>我们将在24小时内与您联系，安排面试</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">协议签订</div>
|
||||
<div>面试通过后，签订劳务协议</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">上岗工作</div>
|
||||
<div>按约定时间上岗，开始工作</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">工资结算</div>
|
||||
<div>按日结算工资，工作结束后一次性结清</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50%">
|
||||
<div style="font-size: 15px; font-weight: bold">联系信息</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">联系人</div>
|
||||
<div>王经理</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">联系电话</div>
|
||||
<div>138****5678</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #aaa">邮箱</div>
|
||||
<div>wang@nongye.com</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
margin-top: 10px;
|
||||
padding: 5px 20px;
|
||||
background-color: #ff9800;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
"
|
||||
>
|
||||
联系电话
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">服务照片</div>
|
||||
<div style="margin-top: 20px">
|
||||
<img style="width: 280px; height: 150px" src="../../../assets/images/carton.png" alt="" />
|
||||
<img style="width: 280px; height: 150px; margin-left: 10px" src="../../../assets/images/carton.png" alt="" />
|
||||
<img style="width: 280px; height: 150px; margin-left: 10px" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">申请情况</div>
|
||||
<div style="margin-top: 20px; width: 100%; display: flex; justify-content: space-between">
|
||||
<div style="font-size: 15px">申请进度</div>
|
||||
<div style="font-size: 15px">已申请<text style="color: #497f43">12</text>人，还需<text style="color: #497f43">18</text>人</div>
|
||||
</div>
|
||||
<div style="width: 100%; height: 8px; background-color: #e2e8f0; position: relative; margin-top: 10px">
|
||||
<div style="background-color: #2e7d32; position: absolute; height: 8px; width: 40%; border-radius: 5px"></div>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; margin-top: 20px; background-color: #f9fafb; padding: 15px 10px">
|
||||
<div style="width: 25%; color: #9ea4a7">申请人</div>
|
||||
<div style="width: 25%; color: #9ea4a7">经验</div>
|
||||
<div style="width: 25%; color: #9ea4a7">申请时间</div>
|
||||
<div style="width: 25%; color: #9ea4a7">状态</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px; width: 100%; display: flex; padding: 0 10px">
|
||||
<div style="width: 25%; color: #9ea4a7">
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">李师傅</div>
|
||||
<div>5年经验</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 25%; color: #9ea4a7">水稻种植</div>
|
||||
<div style="width: 25%; color: #9ea4a7">2025-03-10 10:23</div>
|
||||
<div style="width: 25%; color: #9ea4a7">已录用</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px; width: 100%; display: flex; padding: 0 10px">
|
||||
<div style="width: 25%; color: #9ea4a7">
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">张师傅</div>
|
||||
<div>3年经验</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 25%; color: #9ea4a7">玉米种植</div>
|
||||
<div style="width: 25%; color: #9ea4a7">2025-03-11 09:45</div>
|
||||
<div style="width: 25%; color: #9ea4a7">已录用</div>
|
||||
</div>
|
||||
<div style="margin-top: 10px; width: 100%; display: flex; padding: 0 10px">
|
||||
<div style="width: 25%; color: #9ea4a7">
|
||||
<div style="display: flex">
|
||||
<div>
|
||||
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="color: #000000">王师傅</div>
|
||||
<div>2年经验</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 25%; color: #9ea4a7">蔬菜种植</div>
|
||||
<div style="width: 25%; color: #9ea4a7">2025-03-12 14:12</div>
|
||||
<div style="width: 25%; color: #9ea4a7">已录用</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||||
<div style="font-size: 15px; font-weight: bold">发布企业</div>
|
||||
<div style="display: flex; margin-top: 20px">
|
||||
<div>
|
||||
<img style="width: 60px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
|
||||
</div>
|
||||
<div style="margin-left: 10px; text-align: left">
|
||||
<div style="display: flex">
|
||||
<div style="color: #000000; font-size: 20px; font-weight: bold">绿丰农业科技有限公司</div>
|
||||
<div style="margin-left: 10px; padding: 0px 5px; background-color: #dbeafe; color: #4886f0; border-radius: 10px; line-height: 25px">
|
||||
已认证
|
||||
</div>
|
||||
</div>
|
||||
<div style="color: #9292a1">专业从事农作物种植、销售的农业企业</div>
|
||||
<div style="margin-top: 5px; color: #9292a1">四川省广安市岳池县 成立于2018年</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; width: 100%; justify-content: space-between; margin-top: 20px">
|
||||
<div
|
||||
style="
|
||||
width: 30%;
|
||||
height: 80px;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 20px; color: #2e7d32; font-weight: bold">12</div>
|
||||
<div style="font-size: 15px">正在招聘</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 30%;
|
||||
height: 80px;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 20px; color: #2e7d32; font-weight: bold">56</div>
|
||||
<div style="font-size: 15px">累计发布</div>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
width: 30%;
|
||||
height: 80px;
|
||||
background-color: #f9fafb;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
>
|
||||
<div style="font-size: 20px; color: #2e7d32; font-weight: bold">98%</div>
|
||||
<div style="font-size: 15px">好评率</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</common>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue';
|
||||
import common from '../components/common.vue';
|
||||
import { getAssetsFile } from '@/utils/index.js';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { informationList } from '@/apis/farmingService.js';
|
||||
const router = useRouter();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.framing_service_content {
|
||||
margin: 0 auto;
|
||||
padding: 0 32px;
|
||||
width: 1200px;
|
||||
min-height: 600px;
|
||||
border: 1px solid skyblue;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.card-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 20px 0;
|
||||
text-align: left;
|
||||
}
|
||||
.choose {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.searchType {
|
||||
color: #999999;
|
||||
}
|
||||
.chooseAll {
|
||||
margin: 0 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.chooseItem {
|
||||
cursor: pointer;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: #25bf82;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top {
|
||||
display: flex;
|
||||
.top_hot {
|
||||
background-color: #dcfce7;
|
||||
border-radius: 10px;
|
||||
color: #438c48;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
.top_impatient {
|
||||
margin-left: 10px;
|
||||
background-color: #dbeafe;
|
||||
border-radius: 10px;
|
||||
color: #4886f0;
|
||||
padding: 2px 10px;
|
||||
}
|
||||
}
|
||||
.top_title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.top_subtitle {
|
||||
margin-top: 5px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
.top_updata {
|
||||
padding: 8px 15px;
|
||||
background-color: #25bf82;
|
||||
color: #fff;
|
||||
border-radius: 30px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.top_price {
|
||||
font-weight: bold;
|
||||
color: #f59a23;
|
||||
font-size: 20px;
|
||||
}
|
||||
.top_info {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
div {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user