Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Web:7903feffdbff7d2ff282b2620456b54a9a72d49e
Branches Tags
Web:master
Web:dev
Web:修改登录-勿用
..
compare: Web:2f89a1178cc5cbb7d13a112ed908ec21981d6553
Branches Tags
Web:dev
Web:修改登录-勿用
Web:master

No commits in common. "7903feffdbff7d2ff282b2620456b54a9a72d49e" and "2f89a1178cc5cbb7d13a112ed908ec21981d6553" have entirely different histories.
7903feffdb ... 2f89a1178c

15 changed files with 268 additions and 281 deletions
Show Stats Expand all files Collapse all files

BIN
sub-operation-service/src/assets/images/njIcon/01.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 97 KiB

BIN
sub-operation-service/src/assets/images/njIcon/bsx.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.8 KiB

BIN
sub-operation-service/src/assets/images/njIcon/cs.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 975 B

BIN
sub-operation-service/src/assets/images/njIcon/fdj.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.2 KiB

BIN
sub-operation-service/src/assets/images/njIcon/js.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
sub-operation-service/src/assets/images/njIcon/lhq.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
sub-operation-service/src/assets/images/njIcon/lt.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
sub-operation-service/src/assets/images/njIcon/qq.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

BIN
sub-operation-service/src/assets/images/njIcon/qr.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 583 B

BIN
sub-operation-service/src/assets/images/njIcon/rz.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 568 B

BIN
sub-operation-service/src/assets/images/njIcon/sj.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 779 B

BIN
sub-operation-service/src/assets/images/njIcon/tx.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.5 KiB

BIN
sub-operation-service/src/assets/images/njIcon/xx.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 688 B

BIN
sub-operation-service/src/assets/images/njIcon/yyxt.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 KiB

549
sub-operation-service/src/views/farmingService/farmingConsult/agriculturalMachineryDel.vue
View File

@ -3,312 +3,278 @@
<common> <common>
<template #main> <template #main>
<div style="background-color: #fff; padding: 10px"> <div style="background-color: #fff; padding: 10px">
<div style="display: flex; margin-top: 5px; justify-content: space-between; margin-bottom: 20px"> <div class="top">
<div style="width: 60%; display: flex; justify-content: center; align-content: center"> <div class="top_hot">金牌</div>
<div style="line-height: 300px; font-size: 30px; margin: 0 20px; cursor: pointer; color: #aaa"> <div class="top_impatient">急聘</div>
<el-icon><ArrowLeft /></el-icon> </div>
</div> <div style="display: flex; margin-top: 5px; justify-content: space-between">
<div style="text-align: left">
<div class="top_title">农业专业林老师</div>
<div class="top_subtitle">云南省临沧市耿马新城村 种植 发布于5天前</div>
</div>
<div>
<div class="top_price">220/天</div>
<div class="top_updata">立即申请</div>
</div>
</div>
<div style="display: flex">
<div style="display: flex">
<div> <div>
<img style="width: 300px; height: 300px" src="../../../assets/images/1.png" alt="" /> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</div> </div>
<div style="line-height: 300px; font-size: 30px; margin: 0 20px; cursor: pointer; color: #aaa"> <div style="margin-left: 10px; text-align: left">
<el-icon><ArrowRight /></el-icon> <div style="color: #aaa">服务年限</div>
<div>10年</div>
</div> </div>
</div> </div>
<div style="width: 40%; text-align: left; margin-right: 20px; margin-top: 10px"> <div style="display: flex; margin-left: 200px">
<h2>东风牌1204型拖拉机</h2> <div>
<p style="display: flex; font-size: 16px; color: #aaa"> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<span style="font-size: 20px"
><el-icon><Location /></el-icon
></span>
<span style="margin-right: 20px">临沧市·耿马县</span>
<span>拖拉机</span>
</p>
<div style="font-size: 16px; display: flex">
<div
style="
width: 110px;
padding: 5px 10px;
background: rgba(37, 191, 130, 0.1);
border: 1px solid rgba(37, 191, 130, 0.5);
border-radius: 8px;
margin-right: 10px;
"
>
<img style="width: 20px; height: 20px; margin: 0 5px" src="../../../assets/images/njIcon/qr.png" alt="" />
<span>可预约</span>
</div>
<div
style="
width: 110px;
padding: 5px 10px;
background: rgba(37, 191, 130, 0.1);
border: 1px solid rgba(37, 191, 130, 0.5);
border-radius: 8px;
"
>
<img style="width: 20px; height: 20px; margin: 0 5px" src="../../../assets/images/njIcon/rz.png" alt="" />
<span>可预约</span>
</div>
</div> </div>
<div style="margin-left: 10px; text-align: left">
<div style="font-size: 16px"> <div style="color: #aaa">完成订单</div>
<p style="color: #aaa">可用时间：</p> <div>128单</div>
<p style="display: flex; justify-content: space-between; width: 90%">
<span>春耕</span>
<span style="color: #25bf82">3月-5月</span>
</p>
<p style="display: flex; justify-content: space-between; width: 90%">
<span>夏收</span>
<span style="color: #25bf82">6月-8月</span>
</p>
<p style="display: flex; justify-content: space-between; width: 90%">
<span>收秋</span>
<span style="color: #25bf82">9月-11月</span>
</p>
<p style="display: flex; justify-content: space-between; width: 90%">
<span>冬耕</span>
<span style="color: #25bf82">12月-2月</span>
</p>
</div> </div>
</div>
<p style="display: flex; align-items: center; gap: 4px; color: #aaa; font-size: 16px"> <div style="display: flex; margin-left: 200px">
<el-icon><WarningFilled /></el-icon> <div>
<span>可预约时间以实际咨询为准</span> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</p> </div>
<div style="display: flex; justify-content: space-between; align-items: center; gap: 4px; width: 90%"> <div style="margin-left: 10px; text-align: left">
<div style="color: #aaa">平均评分</div>
<div>5.0</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">
本人从事水稻种植工作已有10年，拥有丰富的水稻种植经验，熟悉水稻从选种、育秧、移栽到收割的全过程。
擅长解决水稻种植过程中的各种病虫害问题，能够根据不同的土壤条件和气候特点，制定科学合理的种植方案。
可提供水稻种植技术指导、病虫害防治、田间管理等服务，保证水稻的产量和质量。
</div>
</div>
<div style="width: 100%; text-align: left; margin-top: 20px">
<div style="font-size: 15px; font-weight: bold">服务内容</div>
<div class="top_info">
<div>水稻品种选择与推荐</div>
<div style="margin-left: 300px">指导</div>
</div>
<div class="top_info">
<div>稻田管理与施肥</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: 15px; 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 style="font-size: 15px; font-weight: bold">服务流程</div>
<div style="display: flex; margin-top: 20px">
<div> <div>
<p style="color: #aaa; font-size: 16px">租用价格：</p> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<p style="color: #25bf82; font-size: 16px">1800 元/天</p>
</div> </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> <div>
<el-button type="primary" size="large" style="width: 120px">立即租用</el-button> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</div>
<div style="margin-left: 10px; text-align: left">
<div style="color: #000000">方案制定</div>
<div>根据您的需求和实际情况，制定详细的服务方案</div>
</div> </div>
</div> </div>
</div> <div style="display: flex; margin-top: 20px">
</div>
<!-- 农机信息 -->
<div style="margin-bottom: 10px">
<p style="display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: bold">
<img style="width: 33px; height: 33px" src="../../../assets/images/njIcon/xx.png" alt="" />
<span>农机信息</span>
</p>
<div style="overflow: hidden; margin-top: 10px">
<div style="width: 50%; float: left; text-align: left; display: flex; align-items: center; gap: 4px">
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/tx.png" alt="" />
<div> <div>
<p style="font-size: 16px; font-weight: bold"> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
东风农机集团有限公司 </div>
<span style="padding: 2px 4px; font-size: 12px; color: #fff; background: #25bf82; font-weight: lighter; border-radius: 5px" <div style="margin-left: 10px; text-align: left">
>厂家</span <div style="color: #000000">签订协议</div>
> <div>双方确认服务方案，签订服务协议</div>
</p>
<p style="font-size: 14px; color: #aaa">成立于1952年，专注农业机械生产60余年</p>
</div> </div>
</div> </div>
<div style="width: 50%; float: left; text-align: left; border-left: 2px solid #ccc; padding-left: 10px"> <div style="display: flex; margin-top: 20px">
<div style="display: flex; align-items: center; gap: 4px"> <div>
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/tx.png" alt="" /> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<div>
<p style="font-size: 16px; font-weight: bold">
东风农机集团有限公司
<span style="padding: 2px 4px; font-size: 12px; color: #fff; background: #ffbe4d; font-weight: lighter; border-radius: 5px"
>机主</span
>
</p>
<div style="display: flex">
<p style="display: flex; align-items: center; gap: 4px; color: #aaa; font-size: 16px; margin-right: 10px">
<img style="width: 18px; height: 18px" src="../../../assets/images/njIcon/rz.png" alt="" />
<span>认证机主</span>
</p>
<p style="display: flex; align-items: center; gap: 4px; color: #aaa; font-size: 16px">
<img style="width: 18px; height: 18px" src="../../../assets/images/njIcon/qr.png" alt="" />
<span>入驻平台3年</span>
</p>
</div>
</div>
</div> </div>
<div style="display: flex; align-items: center; justify-content: space-around; gap: 4px; margin-top: 10px"> <div style="margin-left: 10px; text-align: left">
<div style="text-align: center; width: 30%; background: #f5f5f5; border-radius: 8px; padding: 10px 0"> <div style="color: #000000">服务实施</div>
<p style="color: #25bf82; font-size: 20px; font-weight: bold">126</p> <div>按照协议约定的时间和内容，提供专业的种植服务</div>
<p style="font-size: 14px">服务次数</p> </div>
</div> </div>
<div style="text-align: center; width: 30%; background: #f5f5f5; border-radius: 8px; padding: 10px 0"> <div style="display: flex; margin-top: 20px">
<p style="color: #25bf82; font-size: 20px; font-weight: bold">98%</p> <div>
<p style="font-size: 14px">好评率</p> <img style="width: 40px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
</div> </div>
<div style="text-align: center; width: 30%; background: #f5f5f5; border-radius: 8px; padding: 10px 0"> <div style="margin-left: 10px; text-align: left">
<p style="color: #25bf82; font-size: 20px; font-weight: bold">24h</p> <div style="color: #000000">验收评价</div>
<p style="font-size: 14px">响应时间</p> <div>服务完成后，进行验收并提供服务评价</div>
</div> </div>
</div>
</div>
<!-- <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>
<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="../../../assets/images/carton.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="../../../assets/images/carton.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 style="font-size: 15px; font-weight: bold">服务案例</div>
<div style="margin-top: 20px; display: flex; justify-content: space-evenly">
<div style="display: flex; flex-direction: column">
<img style="width: 270px; height: 150px" src="../../../assets/images/carton.png" alt="" />
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
<div style="font-size: 15px; font-weight: bold">岳池县稻田增产案例</div>
<el-rate v-model="value1" />
<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/carton.png" alt="" />
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
<div style="font-size: 15px; font-weight: bold">邻水县病虫害防治案例</div>
<el-rate v-model="value1" />
<div style="font-size: 12px">有效防治水稻稻瘟病，避免了农户的经济损失，得到当地政府的认可。</div>
</div>
</div>
<div style="display: flex; flex-direction: column">
<img style="width: 270px; height: 150px" src="../../../assets/images/carton.png" alt="" />
<div style="border: 1px solid #eee; border-top: none; width: 280px; padding: 10px">
<div style="font-size: 15px; font-weight: bold">邻水县稻田增产案例</div>
<el-rate v-model="value1" />
<div style="font-size: 12px">通过科学的种植管理，帮助农户水稻增产20%，获得农户一致好评。</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 产品介绍 --> <div style="width: 100%; text-align: left; margin-top: 20px">
<div style="margin-bottom: 10px"> <div style="font-size: 15px; font-weight: bold">客户评价</div>
<p style="display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: bold; margin-bottom: 5px"> <div style="width: 100%; color: #9ea4a7; margin-top: 20px; border: 1px solid #eee; padding: 10px; border-radius: 10px">
<img style="width: 33px; height: 33px" src="../../../assets/images/njIcon/js.png" alt="" /> <div style="display: flex; align-items: center">
<span>产品介绍</span> <div>
</p> <img style="width: 50px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<p style="font-size: 16px; text-align: left"> </div>
东风牌1204型拖拉机是一款高性能、可靠性强的农业机械，适用于各种农田作业。该机型采用先进的涡轮增压柴油发动机，动力强劲，油耗低，可满足不同作业需求。配备先进的液压系统和悬挂装置，可轻松应对深耕、浅耕、播种、收割等多种作业。驾驶舱采用人体工程学设计，操作舒适，视野开阔，有效降低驾驶员疲劳。该机型还具备良好的通过性和适应性，可在不同地形和气候条件下高效作业，是现代农业生产的理想选择。 <div style="margin-left: 10px; text-align: left">
</p> <div style="color: #000000">刘老板</div>
</div> <el-rate v-model="value1" />
<!-- 产品参数 --> <div>2025-03-10</div>
<div style="margin-bottom: 10px"> </div>
<p style="display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: bold; margin-bottom: 5px">
<img style="width: 33px; height: 33px" src="../../../assets/images/njIcon/cs.png" alt="" />
<span>产品参数</span>
</p>
<div style="display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px">
<div style="font-family: Arial, sans-serif; line-height: 1.6; max-width: 400px; margin-right: 300px">
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">整机类型：</span>
<span>轮式拖拉机</span>
</p>
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">驱动方式：</span>
<span>四轮驱动</span>
</p>
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">轴距：</span>
<span>2250mm</span>
</p>
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">液压输出：</span>
<span>3组</span>
</p>
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">燃油箱容积：</span>
<span>120L</span>
</p>
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">整机重量：</span>
<span>3800kg</span>
</p>
</div> </div>
<div style="margin-top: 10px">
<div style="font-family: Arial, sans-serif; line-height: 1.6; max-width: 400px"> 水稻种植技术非常专业，帮我解决了多年的水稻产量低问题，今年产量比去年增加了20%，非常感谢!服务态度也 很好，有问必答，非常耐心。
<p style="margin: 8px 0; padding: 4px; text-align: left"> </div>
<span style="font-weight: bold; display: inline-block; width: 100px">发动机功率：</span> </div>
<span>120马力</span> <div style="width: 100%; color: #9ea4a7; margin-top: 20px; border: 1px solid #eee; padding: 10px; border-radius: 10px">
</p> <div style="display: flex; align-items: center">
<p style="margin: 8px 0; padding: 4px; text-align: left"> <div>
<span style="font-weight: bold; display: inline-block; width: 100px">变速箱：</span> <img style="width: 50px; border-radius: 100%" src="../../../assets/images/carton.png" alt="" />
<span>12F+12R档</span> </div>
</p> <div style="margin-left: 10px; text-align: left">
<p style="margin: 8px 0; padding: 4px; text-align: left"> <div style="color: #000000">王老板</div>
<span style="font-weight: bold; display: inline-block; width: 100px">轮胎规格：</span> <el-rate v-model="value1" />
<span>前轮11.2-24，后轮16.9-34</span> <div>2025-03-10</div>
</p> </div>
<p style="margin: 8px 0; padding: 4px; text-align: left"> </div>
<span style="font-weight: bold; display: inline-block; width: 100px">提升力：</span> <div style="margin-top: 10px">
<span>>3600kg</span> 水稻病虫害的防治非常有经验，去年我的稻田受到稻瘟病的困扰，损失惨重。今年请张师傅来指导，及时采取了防
</p> 治措施，稻田没有再出现病害，效果非常好。
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">外形尺寸：</span>
<span>4580x2150x2750mm</span>
</p>
<p style="margin: 8px 0; padding: 4px; text-align: left">
<span style="font-weight: bold; display: inline-block; width: 100px">生产年份：</span>
<span>2023年</span>
</p>
</div> </div>
</div> </div>
</div> </div>
<!-- 核心配件 --> <div style="display: flex; width: 100%; justify-content: space-between; margin-top: 20px">
<div style="margin-bottom: 10px">
<p style="display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: bold; margin-bottom: 5px">
<img style="width: 33px; height: 33px" src="../../../assets/images/njIcon/js.png" alt="" />
<span>核心配件</span>
</p>
<div style="display: flex; flex-wrap: wrap; /* 允许换行 */ gap: 4px; /* 元素间距 */ justify-content: space-around; /* 左对齐 */">
<!-- 每行最多 3 个 div，每个占 32% 宽度（留出 gap 空间） -->
<div style="width: 30%; text-align: center; background: #f5f5f5; border-radius: 5px; padding: 10px 0; margin-bottom: 10px">
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/fdj.png" alt="" />
<p style="margin: 5px 0; font-size: 16px">发动机</p>
<p style="color: #aaa; font-size: 14px">玉柴YC6J125-T300</p>
</div>
<div style="width: 30%; text-align: center; background: #f5f5f5; border-radius: 5px; padding: 10px 0; margin-bottom: 10px">
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/bsx.png" alt="" />
<p style="margin: 5px 0; font-size: 16px">变速箱</p>
<p style="color: #aaa; font-size: 14px">全同步器换挡</p>
</div>
<div style="width: 30%; text-align: center; background: #f5f5f5; border-radius: 5px; padding: 10px 0; margin-bottom: 10px">
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/lhq.png" alt="" />
<p style="margin: 5px 0; font-size: 16px">离合器</p>
<p style="color: #aaa; font-size: 14px">双作用离合器</p>
</div>
<div style="width: 30%; text-align: center; background: #f5f5f5; border-radius: 5px; padding: 10px 0; margin-bottom: 10px">
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/qq.png" alt="" />
<p style="margin: 5px 0; font-size: 16px">前桥</p>
<p style="color: #aaa; font-size: 14px">加强型前驱动桥</p>
</div>
<div style="width: 30%; text-align: center; background: #f5f5f5; border-radius: 5px; padding: 10px 0; margin-bottom: 10px">
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/lt.png" alt="" />
<p style="margin: 5px 0; font-size: 16px">轮胎</p>
<p style="color: #aaa; font-size: 14px">高花耐磨农业胎</p>
</div>
<div style="width: 30%; text-align: center; background: #f5f5f5; border-radius: 5px; padding: 10px 0; margin-bottom: 10px">
<img style="width: 60px; height: 60px" src="../../../assets/images/njIcon/yyxt.png" alt="" />
<p style="margin: 5px 0; font-size: 16px">液压系统</p>
<p style="color: #aaa; font-size: 14px">负荷传感系统</p>
</div>
</div>
</div>
</div>
<!-- 其他农机 -->
<div style="margin: 10px 0">
<p style="display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: bold; margin-bottom: 5px">
<!-- <img style="width: 33px; height: 33px" src="../../../assets/images/njIcon/js.png" alt="" /> -->
<span>其他农机</span>
</p>
<div style="display: flex; flex-wrap: wrap; /* 允许换行 */ gap: 4px; /* 元素间距 */ justify-content: space-around; /* 左对齐 */">
<!-- 每行最多 3 个 div，每个占 32% 宽度（留出 gap 空间） -->
<div <div
v-for="item in 3" style="
:key="item" width: 30%;
style="width: 30%; text-align: left; background: #fff; border-radius: 5px; padding: 10px 20px; margin-bottom: 10px" height: 80px;
background-color: #f9fafb;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
"
> >
<img style="width: 200px; height: 200px" src="../../../assets/images/njIcon/01.png" alt="" /> <div style="font-size: 20px; color: #2e7d32; font-weight: bold">12</div>
<p style="font-size: 16px">约翰迪尔 9B 播种机</p> <div style="font-size: 15px">正在招聘</div>
<p style="display: flex; font-size: 14px; color: #aaa"> </div>
<span style="font-size: 16px" <div
><el-icon><Location /></el-icon style="
></span> width: 30%;
<span style="margin-right: 20px">临沧市·耿马县</span> height: 80px;
<span>拖拉机</span> background-color: #f9fafb;
</p> display: flex;
<div style="font-size: 14px; display: flex; justify-content: space-between"> flex-direction: column;
<p><span style="color: #25bf82">1200</span><span style="color: #aaa">元/天</span></p> align-items: center;
<p> justify-content: center;
<span style="display: flex; align-items: center; gap: 4px; font-size: 14px; margin-bottom: 5px"> "
<img style="width: 16px; height: 16px" src="../../../assets/images/njIcon/sj.png" alt="" /> >
<span style="color: #aaa">可用时间：</span> <div style="font-size: 20px; color: #2e7d32; font-weight: bold">56</div>
<span>全年</span> <div style="font-size: 15px">累计发布</div>
</span> </div>
</p> <div
</div> style="
<div style="display: flex; justify-content: space-between"> width: 30%;
<div style="text-align: left; display: flex; align-items: center; gap: 4px"> height: 80px;
<img style="width: 40px; height: 40px" src="../../../assets/images/njIcon/tx.png" alt="" /> background-color: #f9fafb;
<div style="font-size: 14px">李师傅</div> display: flex;
</div> flex-direction: column;
<span align-items: center;
style=" justify-content: center;
width: 112px; "
height: 40px; >
background: #25bf82; <div style="font-size: 20px; color: #2e7d32; font-weight: bold">98%</div>
border-radius: 8px; <div style="font-size: 15px">好评率</div>
color: #fff;
font-size: 18px;
text-align: center;
line-height: 40px;
"
>立即预约</span
>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -383,6 +349,27 @@ let value1 = ref(5);
padding: 2px 10px; padding: 2px 10px;
} }
} }
.top_title {
font-size: 20px;
font-weight: bold;
}
.top_subtitle {
margin-top: 5px;
font-size: 12px;
color: #aaa;
}
.top_updata {
padding: 8px 15px;
background-color: #25bf82;
color: #fff;
border-radius: 30px;
margin-top: 10px;
}
.top_price {
font-weight: bold;
color: #f59a23;
font-size: 20px;
}
.top_info { .top_info {
display: flex; display: flex;
margin-top: 10px; margin-top: 10px;