472 lines
19 KiB
Vue
472 lines
19 KiB
Vue
<template>
|
||
<div>
|
||
<common>
|
||
<template #main>
|
||
<div style="background-color: #fff; padding: 10px 20px 20px 20px">
|
||
<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">
|
||
<div class="top_hot">热门</div>
|
||
<div class="top_impatient">急聘</div>
|
||
</div>
|
||
<div class="top_subtitle">
|
||
<el-icon><Location /></el-icon> 工作地点：云南省临沧市耿马新城村 <el-icon style="margin-left: 10px"><Postcard /></el-icon> 种植
|
||
<el-icon style="margin-left: 10px"><Tickets /></el-icon> 发布于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="getAssetsFile('images/farmingService/01.png')" alt="" />
|
||
</div>
|
||
<div style="margin-left: 10px; text-align: left">
|
||
<div style="color: #aaa">招聘人数</div>
|
||
<div class="top_num">30人</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; margin-left: 300px">
|
||
<div>
|
||
<img style="width: 40px; border-radius: 100%" :src="getAssetsFile('images/farmingService/02.png')" alt="" />
|
||
</div>
|
||
<div style="margin-left: 10px; text-align: left">
|
||
<div style="color: #aaa">工作天数</div>
|
||
<div class="top_num">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="getAssetsFile('images/farmingService/03.png')" alt="" />
|
||
</div>
|
||
<div style="margin-left: 10px; text-align: left">
|
||
<div style="color: #aaa">工作时间</div>
|
||
<div class="top_num">2025-03-15至2025-04-28</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; margin-left: 170px">
|
||
<div>
|
||
<img style="width: 40px; border-radius: 100%" :src="getAssetsFile('images/farmingService/04.png')" alt="" />
|
||
</div>
|
||
<div style="margin-left: 10px; text-align: left">
|
||
<div style="color: #aaa">结算方式</div>
|
||
<div class="top_num">日结</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/warehouseLogistics/product.png')" alt="" draggable="false" />
|
||
<div class="page-title">服务描述</div>
|
||
</div>
|
||
<div style="line-height: 30px; font-size: 14px; color: #000; margin-top: 10px">
|
||
我们是一家专业从事农业种植的企业，现因春耕生产需要，诚招有经验的种植工人，主要负责水稻、玉米等农作物的种植工作。
|
||
工作内容包括土地翻耕、播种、育苗、移栽、田间管理等，要求身体健康，能吃苦耐劳，有相关种植经验者优先。
|
||
我们提供食宿，工作环境良好，薪资待遇优厚，欢迎有兴趣的朋友加入我们的团队!
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/farmingService/05.png')" alt="" draggable="false" />
|
||
<div class="page-title">工作要求</div>
|
||
</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: 18px; 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 class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/farmingService/06.png')" alt="" draggable="false" />
|
||
<div class="page-title">服务流程</div>
|
||
</div>
|
||
<div style="display: flex; margin-top: 20px">
|
||
<div class="liucheng">1</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 class="liucheng">2</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 class="liucheng">3</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 class="liucheng">4</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 class="liucheng">5</div>
|
||
<div style="margin-left: 10px; text-align: left">
|
||
<div style="color: #000000">工资结算</div>
|
||
<div>按日结算工资，工作结束后一次性结清</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 50%">
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/farmingService/07.png')" alt="" draggable="false" />
|
||
<div class="page-title">联系信息</div>
|
||
</div>
|
||
<div style="display: flex; margin-top: 20px">
|
||
<div>
|
||
<img style="width: 40px; border-radius: 100%" :src="getAssetsFile('images/farmingService/01.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="getAssetsFile('images/farmingService/phone.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="getAssetsFile('images/farmingService/email.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 class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/farmingService/08.png')" alt="" draggable="false" />
|
||
<div class="page-title">服务照片</div>
|
||
</div>
|
||
<div style="margin-top: 20px; display: flex; gap: 20px">
|
||
<img style="flex: 1; height: 150px" :src="getAssetsFile('images/farmingService/11.png')" alt="" />
|
||
<img style="flex: 1; height: 150px" :src="getAssetsFile('images/farmingService/12.png')" alt="" />
|
||
<img style="flex: 1; height: 150px" :src="getAssetsFile('images/farmingService/13.png')" alt="" />
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%; text-align: left; margin-top: 20px">
|
||
<div class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/farmingService/09.png')" alt="" draggable="false" />
|
||
<div class="page-title">申请情况</div>
|
||
</div>
|
||
<div style="margin-top: 20px; width: 100%; display: flex; justify-content: space-between">
|
||
<div style="font-size: 15px">申请进度 <span class="color-green">36%</span></div>
|
||
<div style="font-size: 15px">已申请<text style="color: #25bf82"> 12 </text>人，还需<text style="color: #25bf82"> 18 </text>人</div>
|
||
</div>
|
||
<div style="width: 100%; height: 8px; background: rgba(37, 191, 130, 0.1); position: relative; margin-top: 10px">
|
||
<div style="background-color: #25bf82; 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="getAssetsFile('images/farmingService/man.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="getAssetsFile('images/farmingService/man.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="getAssetsFile('images/farmingService/man.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 class="warehouse-detail-title">
|
||
<img :src="getAssetsFile('images/farmingService/10.png')" alt="" draggable="false" />
|
||
<div class="page-title">发布企业</div>
|
||
</div>
|
||
<div style="display: flex; margin-top: 20px">
|
||
<div>
|
||
<img style="width: 60px; border-radius: 100%" :src="getAssetsFile('images/farmingService/man.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; font-size: 14px; margin: 5px 0">专业从事农作物种植、销售的农业企业</div>
|
||
<div style="font-size: 14px; color: #333">
|
||
<el-icon color="#25bf82"><Location /></el-icon> 四川省广安市岳池县
|
||
<el-icon color="#25bf82" style="margin-left: 5px"><Calendar /></el-icon> 成立于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: rgba(37, 191, 130, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
"
|
||
>
|
||
<div style="font-size: 20px; color: #25bf82; font-weight: bold">12</div>
|
||
<div style="font-size: 15px">正在招聘</div>
|
||
</div>
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
height: 80px;
|
||
background: rgba(37, 191, 130, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
"
|
||
>
|
||
<div style="font-size: 20px; color: #25bf82; font-weight: bold">56</div>
|
||
<div style="font-size: 15px">累计发布</div>
|
||
</div>
|
||
<div
|
||
style="
|
||
width: 30%;
|
||
height: 80px;
|
||
background: rgba(37, 191, 130, 0.1);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
"
|
||
>
|
||
<div style="font-size: 20px; color: #25bf82; 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;
|
||
}
|
||
.color-green {
|
||
color: #25bf82;
|
||
}
|
||
.top {
|
||
margin-top: 5px;
|
||
display: flex;
|
||
.top_hot {
|
||
background-color: #dcfce7;
|
||
border-radius: 10px;
|
||
color: #438c48;
|
||
padding: 2px 10px;
|
||
}
|
||
.top_impatient {
|
||
margin-left: 10px;
|
||
background: rgba(255, 190, 77, 0.1);
|
||
border-radius: 10px;
|
||
color: #ffbe4d;
|
||
padding: 2px 10px;
|
||
}
|
||
}
|
||
.top_title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
}
|
||
.top_subtitle {
|
||
margin-top: 10px;
|
||
margin-bottom: 15px;
|
||
font-size: 12px;
|
||
color: #aaa;
|
||
}
|
||
.top_updata {
|
||
padding: 8px 15px;
|
||
background-color: #25bf82;
|
||
color: #fff;
|
||
border-radius: 30px;
|
||
margin-top: 10px;
|
||
}
|
||
.top_num {
|
||
font-size: 16px;
|
||
}
|
||
.top_price {
|
||
font-weight: bold;
|
||
color: #f59a23;
|
||
font-size: 20px;
|
||
}
|
||
.top_info {
|
||
display: flex;
|
||
margin-top: 10px;
|
||
div {
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
.liucheng {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 32px;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
background-color: #25bf82;
|
||
}
|
||
.warehouse-detail-title {
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
margin: 20px 0 15px 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
img {
|
||
width: 28px;
|
||
}
|
||
.page-title {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
text-align: left;
|
||
margin-left: 10px;
|
||
}
|
||
}
|
||
</style>
|