农事服务模块部分页面细节样式调整优化

This commit is contained in:
郭永超 2025-07-21 15:24:24 +08:00
parent da255070ff
commit 727aee5b55
4 changed files with 173 additions and 138 deletions

View File

@ -12,6 +12,7 @@ declare module 'vue' {
BreadComp: typeof import('./src/components/breadComp.vue')['default']
CenterMap: typeof import('./src/components/centerMap.vue')['default']
CodeDialog: typeof import('./src/components/code-dialog/index.vue')['default']
copy: typeof import('./src/components/custom-scroll-title copy/index.vue')['default']
CostomImg: typeof import('./src/components/costomImg.vue')['default']
CustomBack: typeof import('./src/components/customBack.vue')['default']
CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']

View File

@ -18,7 +18,7 @@
<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" />
<el-cascader v-model="postArea" style="width: 300px" :props="props" :options="addressOptions" @change="handleChange" />
</div>
<div style="margin-left: 20px">
<el-input v-model="address" placeholder="输入详细位置" />
@ -38,47 +38,45 @@
<div style="margin-left: 20px">
<el-input v-model="price1" placeholder="最低价格/天" />
</div>
<div style="margin-left: 20px">~</div>
<div style="margin-left: 20px">
<div style="margin-left: 10px">~</div>
<div style="margin-left: 10px">
<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="../../../assets/images/1.png" alt="" width="200px" style="height: 200px" />
<!-- <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="../../../assets/images/1.png" 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; 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 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>
</el-card>
</div>
</div>
</template>
</common>
@ -93,6 +91,8 @@ import { useRouter } from 'vue-router';
import { informationList } from '@/apis/farmingService.js';
import options from '../../../assets/address.json';
import { ElMessage } from 'element-plus';
import { getRegion } from '@/apis/common';
const router = useRouter();
let postArea = ref('');
let address = ref('');
@ -101,8 +101,22 @@ let value3 = ref('');
let price1 = ref('');
let price2 = ref('');
const props = ref({
value: 'label',
label: 'areaName', //
value: 'areaCode', //
children: 'areaChildVOS', //
emitPath: true,
expandTrigger: 'hover',
});
//
const addressOptions = ref([]);
const getArea = async () => {
const res = await getRegion();
if (res.code === 200) {
addressOptions.value = res.data;
} else {
ElMessage.error(res.message);
}
};
/* --------------- data --------------- */
// #region
@ -163,6 +177,7 @@ const pagination = ref({
// #region
onMounted(() => {
// queryList();
getArea();
});
const extractText = (htmlText, maxChars = 80) => {

View File

@ -2,7 +2,7 @@
<div>
<common>
<template #main>
<div style="background-color: #fff; padding: 10px">
<div style="background-color: #fff; padding: 20px">
<div class="top">
<div class="top_hot">金牌</div>
<div class="top_impatient">急聘</div>
@ -56,27 +56,45 @@
</div>
<div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 20px; font-weight: bold">服务内容</div>
<div class="top_info">
<div style="display: flex; align-items: center">
<img style="width: 15px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">水稻品种选择与推荐</div>
</div>
<div style="margin-left: 300px">指导</div>
</div>
<div class="top_info">
<div style="display: flex; align-items: center">
<img style="width: 15px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">稻田管理与施肥</div>
</div>
<div style="margin-left: 325px">防治</div>
</div>
<div class="top_info">
<div style="display: flex; align-items: center">
<img style="width: 15px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">收割与储存建议</div>
</div>
<div style="margin-left: 295px">植物技术指导</div>
</div>
<el-row :gutter="20" style="margin-top: 20px">
<el-col :span="12" class="mb_16">
<div style="display: flex">
<img style="width: 16px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">水稻品种选择与推荐</div>
</div>
</el-col>
<el-col :span="12" class="mb_16">
<div style="display: flex">
<img style="width: 16px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">指导</div>
</div>
</el-col>
<el-col :span="12" class="mb_16">
<div style="display: flex">
<img style="width: 16px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">稻田管理与施肥</div>
</div>
</el-col>
<el-col :span="12" class="mb_16">
<div style="display: flex">
<img style="width: 16px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">防治</div>
</div>
</el-col>
<el-col :span="12" class="mb_16">
<div style="display: flex">
<img style="width: 16px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">收割与储存建议</div>
</div>
</el-col>
<el-col :span="12" class="mb_16">
<div style="display: flex">
<img style="width: 16px; border-radius: 100%" src="../../../assets/images/comfig.png" alt="" />
<div style="margin-left: 5px">植物技术指导</div>
</div>
</el-col>
</el-row>
</div>
<!-- <div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 15px; font-weight: bold">服务描述</div>
@ -261,28 +279,28 @@
</div>
<div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 20px; font-weight: bold">服务案例</div>
<div style="margin-top: 20px; display: flex; justify-content: space-evenly">
<div style="margin-top: 20px; display: flex; justify-content: space-between">
<div style="display: flex; flex-direction: column">
<img style="width: 270px; height: 150px" src="../../../assets/images/nj1.png" alt="" />
<img style="height: 150px" src="../../../assets/images/nj1.png" alt="" />
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
<div style="font-size: 16px; font-weight: bold">岳池县稻田增产案例</div>
<el-rate v-model="value1" />
<div style="font-size: 16px; font-weight: bold">丘北县稻田增产案例</div>
<el-rate v-model="value1" disabled />
<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/nj2.png" alt="" />
<img style="height: 150px" src="../../../assets/images/nj2.png" alt="" />
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
<div style="font-size: 16px; font-weight: bold">邻水县病虫害防治案例</div>
<el-rate v-model="value1" />
<div style="font-size: 16px; font-weight: bold">丘北县病虫害防治案例</div>
<el-rate v-model="value2" disabled />
<div style="font-size: 12px">有效防治水稻稻瘟病避免了农户的经济损失得到当地政府的认可</div>
</div>
</div>
<div style="display: flex; flex-direction: column">
<img style="width: 270px; height: 150px" src="../../../assets/images/nj3.png" alt="" />
<img style="height: 150px" src="../../../assets/images/nj3.png" alt="" />
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
<div style="font-size: 16px; font-weight: bold">邻水县稻田增产案例</div>
<el-rate v-model="value1" />
<div style="font-size: 16px; font-weight: bold">丘北县稻田增产案例</div>
<el-rate v-model="value1" disabled />
<div style="font-size: 12px">通过科学的种植管理帮助农户水稻增产20%获得农户一致好评</div>
</div>
</div>
@ -297,7 +315,7 @@
</div>
<div style="margin-left: 10px; text-align: left">
<div style="color: #000000; font-size: 16px">刘老板</div>
<el-rate v-model="value1" />
<el-rate v-model="value2" disabled />
<div>2025-03-10</div>
</div>
</div>
@ -312,7 +330,7 @@
</div>
<div style="margin-left: 10px; text-align: left">
<div style="color: #000000; font-size: 16px">王老板</div>
<el-rate v-model="value1" />
<el-rate v-model="value1" disabled />
<div>2025-03-10</div>
</div>
</div>
@ -379,7 +397,8 @@ import { getAssetsFile } from '@/utils/index.js';
import { useRouter } from 'vue-router';
import { informationList } from '@/apis/farmingService.js';
const router = useRouter();
let value1 = ref(5);
let value1 = ref(4);
let value2 = ref(5);
</script>
<style lang="scss" scoped>
@ -459,11 +478,7 @@ let value1 = ref(5);
color: #f59a23;
font-size: 20px;
}
.top_info {
display: flex;
margin-top: 10px;
div {
font-size: 16px;
}
.mb_16 {
margin-bottom: 16px;
}
</style>

View File

@ -20,46 +20,53 @@
<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="" />
<el-row :gutter="20">
<el-col :span="12" class="mb-16">
<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="margin-left: 10px; text-align: left">
<div style="color: #aaa">招聘人数</div>
<div class="top_num">30</div>
</el-col>
<el-col :span="12" class="mb-16">
<div style="display: flex">
<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-left: 300px">
<div>
<img style="width: 40px; border-radius: 100%" :src="getAssetsFile('images/farmingService/02.png')" alt="" />
</el-col>
<el-col :span="12">
<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="margin-left: 10px; text-align: left">
<div style="color: #aaa">工作天数</div>
<div class="top_num">45</div>
</el-col>
<el-col :span="12">
<div style="display: flex">
<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>
<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>
</el-col>
</el-row>
<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" />
@ -76,30 +83,26 @@
<img :src="getAssetsFile('images/farmingService/05.png')" alt="" draggable="false" />
<div class="page-title">工作要求</div>
</div>
<div class="top_info">
<div>
<el-icon color="#25bf82" size="16px"><SuccessFilled /></el-icon> 年龄要求20-25
</div>
<div style="margin-left: 300px">
<el-icon color="#25bf82" size="16px"><SuccessFilled /></el-icon> 性别要求不限
</div>
</div>
<div class="top_info">
<div>
<el-icon color="#25bf82" size="16px"><SuccessFilled /></el-icon> 经验要求1
</div>
<div style="margin-left: 328px">
<el-icon color="#25bf82" size="16px"><SuccessFilled /></el-icon> 技能要求会使用基本农具
</div>
</div>
<div class="top_info">
<div>
<el-icon color="#25bf82" size="16px"><SuccessFilled /></el-icon> 健康要求身体健康
</div>
<div style="margin-left: 295px">
<el-icon color="#25bf82" size="16px"><SuccessFilled /></el-icon> 其他要求能吃苦耐劳
</div>
</div>
<el-row :gutter="20">
<el-col :span="12" class="mb-16">
<el-icon class="work-icon" color="#25bf82" size="16px"><SuccessFilled /></el-icon> 年龄要求20-25
</el-col>
<el-col :span="12" class="mb-16">
<el-icon class="work-icon" color="#25bf82" size="16px"><SuccessFilled /></el-icon> 性别要求不限
</el-col>
<el-col :span="12" class="mb-16">
<el-icon class="work-icon" color="#25bf82" size="16px"><SuccessFilled /></el-icon> 经验要求1
</el-col>
<el-col :span="12" class="mb-16">
<el-icon class="work-icon" color="#25bf82" size="16px"><SuccessFilled /></el-icon> 技能要求会使用基本农具
</el-col>
<el-col :span="12" class="mb-16">
<el-icon class="work-icon" color="#25bf82" size="16px"><SuccessFilled /></el-icon> 健康要求身体健康
</el-col>
<el-col :span="12" class="mb-16">
<el-icon class="work-icon" color="#25bf82" size="16px"><SuccessFilled /></el-icon> 其他要求能吃苦耐劳
</el-col>
</el-row>
</div>
<!-- <div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 18px; font-weight: bold">服务描述</div>
@ -444,10 +447,11 @@ const router = useRouter();
color: #f59a23;
font-size: 20px;
}
.top_info {
font-size: 14px;
display: flex;
margin-top: 10px;
.mb-16 {
margin-bottom: 16px;
}
.work-icon {
vertical-align: bottom;
}
.liucheng {
width: 32px;