农事服务模块部分页面细节样式调整优化
This commit is contained in:
parent
da255070ff
commit
727aee5b55
1
sub-operation-service/components.d.ts
vendored
1
sub-operation-service/components.d.ts
vendored
@ -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']
|
||||
|
@ -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) => {
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user