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

sub-operation-service/src/views/farmingService/farmingConsult/laborServices.vue

@@ -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 {

sub-operation-service/src/views/farmingService/farmingConsult/laborServicesDel.vue

@@ -2,71 +2,80 @@
   <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="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_subtitle">云南省临沧市耿马新城村 种植鲉 发布于3天前</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>
               <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 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>
-                  <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
-                </div>
+                <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>
           <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 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 style="font-size: 15px; font-weight: bold">申请情况</div>
+            <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>
+                <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>