农事服务 - 劳务用工页面完善,样式调整,图片图标资源导入替换

This commit is contained in:
郭永超 2025-07-18 11:15:22 +08:00
parent 76332c0251
commit 98e29f6076
18 changed files with 131 additions and 77 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 888 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 835 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 861 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 102 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

@ -206,11 +206,11 @@ const changeChoose = (type, index) => {
};
const goDetail = (id) => {
ElMessage({
message: '功能正在维护中,请稍后点击',
type: 'warning',
});
// router.push('/sub-operation-service/farmService/consult/laborServicesDel?id=' + id);
// ElMessage({
// message: '',
// type: 'warning',
// });
router.push('/sub-operation-service/farmService/consult/laborServicesDel?id=' + id);
};
// #endregion
</script>
@ -227,7 +227,7 @@ const goDetail = (id) => {
.card-item {
display: flex;
justify-content: space-between;
margin: 20px 0;
margin: 5px 0 0 0;
text-align: left;
}
.choose {

View File

@ -2,71 +2,80 @@
<div>
<common>
<template #main>
<div style="background-color: #fff; padding: 10px">
<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 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 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>
<div class="top_price">150/</div>
<div class="top_updata">立即申请</div>
</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="" />
<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>30</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="../../../assets/images/carton.png" alt="" />
<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>45</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="../../../assets/images/carton.png" alt="" />
<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>2025-03-15至2025-04-28</div>
<div class="top_num">2025-03-15至2025-04-28</div>
</div>
</div>
<div style="display: flex; margin-left: 215px">
<div style="display: flex; margin-left: 170px">
<div>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<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>日结</div>
<div class="top_num">日结</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 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 style="font-size: 15px; font-weight: bold">工作要求</div>
<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>
@ -81,7 +90,7 @@
</div>
</div>
<!-- <div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 15px; font-weight: bold">服务描述</div>
<div style="font-size: 18px; font-weight: bold">服务描述</div>
<div style="line-height: 30px; font-size: 12px; color: #aaa; margin-top: 10px">
我们是一家专业从事农业种植的企业现因春耕生产需要诚招有经验的种植工人主要负责水稻玉米等农作物的种植工作
工作内容包括土地翻耕播种育苗移栽田间管理等要求身体健康能吃苦耐劳有相关种植经验者优先
@ -90,47 +99,40 @@
</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 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>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</div>
<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>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</div>
<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>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</div>
<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>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</div>
<div class="liucheng">5</div>
<div style="margin-left: 10px; text-align: left">
<div style="color: #000000">工资结算</div>
<div>按日结算工资工作结束后一次性结清</div>
@ -138,10 +140,13 @@
</div>
</div>
<div style="width: 50%">
<div style="font-size: 15px; font-weight: bold">联系信息</div>
<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="../../../assets/images/carton.png" alt="" />
<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>
@ -150,7 +155,7 @@
</div>
<div style="display: flex; margin-top: 20px">
<div>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<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>
@ -159,14 +164,14 @@
</div>
<div style="display: flex; margin-top: 20px">
<div>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<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
<!-- <div
style="
margin-top: 10px;
padding: 5px 20px;
@ -178,25 +183,31 @@
"
>
联系电话
</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>
<div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 15px; font-weight: bold">申请情况</div>
<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">申请进度</div>
<div style="font-size: 15px">已申请<text style="color: #497f43">12</text>还需<text style="color: #497f43">18</text></div>
<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-color: #e2e8f0; position: relative; margin-top: 10px">
<div style="background-color: #2e7d32; position: absolute; height: 8px; width: 40%; border-radius: 5px"></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>
@ -208,7 +219,7 @@
<div style="width: 25%; color: #9ea4a7">
<div style="display: flex">
<div>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<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>
@ -224,7 +235,7 @@
<div style="width: 25%; color: #9ea4a7">
<div style="display: flex">
<div>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<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>
@ -240,7 +251,7 @@
<div style="width: 25%; color: #9ea4a7">
<div style="display: flex">
<div>
<img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<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>
@ -254,20 +265,26 @@
</div>
</div>
<div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 15px; font-weight: bold">发布企业</div>
<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="../../../assets/images/carton.png" alt="" />
<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 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 style="color: #9292a1">专业从事农作物种植销售的农业企业</div>
<div style="margin-top: 5px; color: #9292a1">四川省广安市岳池县 成立于2018年</div>
</div>
</div>
</div>
@ -276,42 +293,42 @@
style="
width: 30%;
height: 80px;
background-color: #f9fafb;
background: rgba(37, 191, 130, 0.1);
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: 20px; color: #25bf82; font-weight: bold">12</div>
<div style="font-size: 15px">正在招聘</div>
</div>
<div
style="
width: 30%;
height: 80px;
background-color: #f9fafb;
background: rgba(37, 191, 130, 0.1);
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: 20px; color: #25bf82; font-weight: bold">56</div>
<div style="font-size: 15px">累计发布</div>
</div>
<div
style="
width: 30%;
height: 80px;
background-color: #f9fafb;
background: rgba(37, 191, 130, 0.1);
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: 20px; color: #25bf82; font-weight: bold">98%</div>
<div style="font-size: 15px">好评率</div>
</div>
</div>
@ -370,7 +387,11 @@ const router = useRouter();
color: #25bf82;
font-weight: bold;
}
.color-green {
color: #25bf82;
}
.top {
margin-top: 5px;
display: flex;
.top_hot {
background-color: #dcfce7;
@ -380,9 +401,9 @@ const router = useRouter();
}
.top_impatient {
margin-left: 10px;
background-color: #dbeafe;
background: rgba(255, 190, 77, 0.1);
border-radius: 10px;
color: #4886f0;
color: #ffbe4d;
padding: 2px 10px;
}
}
@ -391,7 +412,8 @@ const router = useRouter();
font-weight: bold;
}
.top_subtitle {
margin-top: 5px;
margin-top: 10px;
margin-bottom: 15px;
font-size: 12px;
color: #aaa;
}
@ -402,6 +424,9 @@ const router = useRouter();
border-radius: 30px;
margin-top: 10px;
}
.top_num {
font-size: 16px;
}
.top_price {
font-weight: bold;
color: #f59a23;
@ -414,4 +439,33 @@ const router = useRouter();
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>