Web/daimp-front
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
daimp-front/sub-operation-service/src/views/ecommerce/landDetail.vue

589 lines
23 KiB
Vue
Raw Normal View History

土地交易
2025-04-03 17:20:49 +08:00
<template>
<div class="land-detail-warp">
<common current-name="land">
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
<template #main>
<div class="land-detail-info">
<div class="top-title">
<div class="father-title">土地交易</div>
<div class="current-title">查看详情</div>
</div>
<div class="top-info">
<el-row :gutter="16">
<el-col :span="12">
<banner name="landdetail" :imglist="bannerList" indicator-pos="none" arrow="always" height="340px"> </banner>
</el-col>
<el-col :span="12" class="top-info-txt">
<h1 class="title">耿马县勐简乡100亩水浇地经营权出租</h1>
<div class="price">2000.0/年</div>
<div class="tag-list">
<div class="tag-item">
<div class="iconfont icon-see"></div>
888次
</div>
<div class="tag-item">
<div class="iconfont icon-ci"></div>
T88888888
</div>
<div class="tag-item">
<div class="iconfont icon-time"></div>
2025.01.01
</div>
</div>
<div class="tips-list">
<el-row :gutter="16">
<el-col :span="12">土地类型：耕地/水浇地</el-col>
<el-col :span="12">流转类型：经营权出租</el-col>
<el-col :span="12">流转年限：25年</el-col>
<el-col :span="12">土地面积：100亩</el-col>
</el-row>
</div>
<div class="addr-info">
<div class="iconfont icon-location"></div>
耿马县新城村蓝莓种植基地
</div>
<div class="top-btn">
<div class="item-btn sign">
<span>在线签约</span>
</div>
<div class="item-btn reservation">
<span>预约查看</span>
</div>
</div>
</el-col>
</el-row>
<signProcess></signProcess>
</div>
<div class="land-detail-content">
<backDivider title="土地详情"></backDivider>
<div class="detail-content">
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-voucher"></div>
<span class="key-txt">凭证</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="6" class="content-val-item">
<div class="val-label">全书类型：</div>
<div class="val-val txt-ellipsis clamp1">国有</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">权证类型：</div>
<div class="val-val txt-ellipsis clamp1">农地证</div>
</el-col>
<el-col :span="10" class="content-val-item">
<div class="val-label">权证有效期：</div>
<div class="val-val txt-ellipsis clamp1">2018年~2050年</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-landform"></div>
<span class="key-txt">地形地貌</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">地形坡度：</div>
<div class="val-val txt-ellipsis clamp1">>25°</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">海拔高度：</div>
<div class="val-val txt-ellipsis clamp1">500~1000m</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">方位：</div>
<div class="val-val txt-ellipsis clamp1">不限</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地貌：</div>
<div class="val-val txt-ellipsis clamp1">不详</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地块形状：</div>
<div class="val-val txt-ellipsis clamp1">大面积不规则</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">机械化工作：</div>
<div class="val-val txt-ellipsis clamp1">部分可以</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">平整程度：</div>
<div class="val-val txt-ellipsis clamp1">粗平</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">排水条件：</div>
<div class="val-val txt-ellipsis clamp1">充分满足</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">灌溉条件：</div>
<div class="val-val txt-ellipsis clamp1">充分满足</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-soil"></div>
<span class="key-txt">土壤土质</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">表层土壤质地：</div>
<div class="val-val txt-ellipsis clamp1">砂土</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤肥力：</div>
<div class="val-val txt-ellipsis clamp1">高</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">有效涂层厚度：</div>
<div class="val-val txt-ellipsis clamp1">60~100cm</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤盐渍化状况：</div>
<div class="val-val txt-ellipsis clamp1">无盐渍化</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤污辱状况：</div>
<div class="val-val txt-ellipsis clamp1">无污染</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤酸碱度：</div>
<div class="val-val txt-ellipsis clamp1">PH=7</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">土壤有机含量：</div>
<div class="val-val txt-ellipsis clamp1">20~30g/kg</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">距碍物层深度：</div>
<div class="val-val txt-ellipsis clamp1">>100cm</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地下水埋深：</div>
<div class="val-val txt-ellipsis clamp1">10~20m</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">植被群落覆盖度：</div>
<div class="val-val txt-ellipsis clamp1">50%~75%</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-climate"></div>
<span class="key-txt">气候降雨</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">气候类型：</div>
<div class="val-val txt-ellipsis clamp1">亚寒带针叶林气候</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">日照时长：</div>
<div class="val-val txt-ellipsis clamp1">3200~3300h/年</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">日照率：</div>
<div class="val-val txt-ellipsis clamp1">充分</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">年平气温：</div>
<div class="val-val txt-ellipsis clamp1">10~20℃</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">无霜期：</div>
<div class="val-val txt-ellipsis clamp1">200~250/天</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">降雨量：</div>
<div class="val-val txt-ellipsis clamp1">75~100mm</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">湿度：</div>
<div class="val-val txt-ellipsis clamp1">稍微湿润</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-car"></div>
<span class="key-txt">交通情况</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">道路情况：</div>
<div class="val-val txt-ellipsis clamp1">机耕道</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">机场：</div>
<div class="val-val txt-ellipsis clamp1">30~60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">高速公路：</div>
<div class="val-val txt-ellipsis clamp1">30~60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">港口：</div>
<div class="val-val txt-ellipsis clamp1">>60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">高铁：</div>
<div class="val-val txt-ellipsis clamp1">>60分钟</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">省级/州级公路：</div>
<div class="val-val txt-ellipsis clamp1">30~60min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">国道：</div>
<div class="val-val txt-ellipsis clamp1">10~30min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">县级公路：</div>
<div class="val-val txt-ellipsis clamp1">15min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">乡镇公路：</div>
<div class="val-val txt-ellipsis clamp1">15min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">村道/自建路：</div>
<div class="val-val txt-ellipsis clamp1">15min</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">公交：</div>
<div class="val-val txt-ellipsis clamp1">无</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-more"></div>
<span class="key-txt">其他配套</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">电力设施：</div>
<div class="val-val txt-ellipsis clamp1">有电源可牵线</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">供水设施：</div>
<div class="val-val txt-ellipsis clamp1">自然水</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">灌溉设施：</div>
<div class="val-val txt-ellipsis clamp1">人工</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">附属设施：</div>
<div class="val-val txt-ellipsis clamp1">晾晒场</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">场地平整：</div>
<div class="val-val txt-ellipsis clamp1">起伏小</div>
</el-col>
<el-col :span="10" class="content-val-item">
<div class="val-label">相关配套：</div>
<div class="val-val txt-ellipsis clamp1">农副产品批发市场</div>
</el-col>
</el-row>
</div>
</div>
<div class="detail-content-item">
<div class="detail-content-key">
<div class="iconfont icon-landoperate"></div>
<span class="key-txt">经营信息</span>
</div>
<div class="detail-content-val">
<el-row :gutter="16">
<el-col :span="8" class="content-val-item">
<div class="val-label">适合何种经营：</div>
<div class="val-val txt-ellipsis clamp1">种植作物</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">地块利用现状：</div>
<div class="val-val txt-ellipsis clamp1">种植</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">当地劳动力资源：</div>
<div class="val-val txt-ellipsis clamp1">一般</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">税收优惠：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">最低收购政策：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">农业补贴：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">牧业补贴：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
<el-col :span="8" class="content-val-item">
<div class="val-label">贷款补贴：</div>
<div class="val-val txt-ellipsis clamp1">未知</div>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
</template>
土地交易
2025-04-03 17:20:49 +08:00
</common>
</div>
</template>
<script setup name="ecommerce">
import common from './components/common.vue';
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
import banner from './components/banner.vue';
import signProcess from './components/signProcess.vue';
import backDivider from './components/backDivider.vue';
土地交易
2025-04-03 17:20:49 +08:00
import { ref, reactive, onMounted, watch, computed } from 'vue';
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
土地交易
2025-04-03 17:20:49 +08:00
</script>
<style lang="scss" scoped>
.land-detail-warp {
width: 100%;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
.land-detail-info {
土地交易
2025-04-03 17:20:49 +08:00
width: 100%;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
margin-bottom: 16px;
土地交易
2025-04-03 17:20:49 +08:00
background: $color-fff;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
border-radius: 16px;
overflow: hidden;
padding: 10px;
.top-title {
土地交易
2025-04-03 17:20:49 +08:00
width: 100%;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
text-align: left;
.father-title,
.current-title {
display: inline-block;
vertical-align: middle;
font-weight: 700;
土地交易
2025-04-03 17:20:49 +08:00
}
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
.father-title {
font-size: 18px;
土地交易
2025-04-03 17:20:49 +08:00
}
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
.current-title {
font-size: 16px;
color: $color-main;
position: relative;
padding: 0 8px;
margin-left: 8px;
}
.current-title::before {
content: '.';
position: absolute;
left: 0;
top: 30%;
transform: translateY(-50%);
土地交易
2025-04-03 17:20:49 +08:00
}
}
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
.top-info {
margin: 16px 0;
土地交易
2025-04-03 17:20:49 +08:00
text-align: left;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
::v-deep() {
.ecommerce-banner {
padding: 0 48px !important;
position: relative;
}
.el-carousel {
position: unset !important;
}
.el-carousel__arrow--left {
left: 0 !important;
}
.el-carousel__arrow--right {
right: 0 !important;
}
土地交易
2025-04-03 17:20:49 +08:00
}
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
}
.price {
color: $color-main;
font-size: 32px;
position: relative;
padding: 0 16px;
margin: 16px 0;
}
.price::before {
content: '￥';
font-size: 16px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.tag-list {
color: $color-999;
display: inline-flex;
width: 100%;
justify-content: flex-start;
gap: 10px;
.tag-item {
土地交易
2025-04-03 17:20:49 +08:00
position: relative;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
padding-left: 32px;
.iconfont {
土地交易
2025-04-03 17:20:49 +08:00
position: absolute;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
left: 0;
土地交易
2025-04-03 17:20:49 +08:00
top: 50%;
transform: translateY(-50%);
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
&.icon-see {
font-size: 24px;
}
&.icon-ci {
font-size: 20px;
}
&.icon-time {
font-size: 24px;
土地交易
2025-04-03 17:20:49 +08:00
}
}
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
font-size: 16px;
line-height: 32px;
土地交易
2025-04-03 17:20:49 +08:00
}
}
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
.tips-list {
土地交易
2025-04-03 17:20:49 +08:00
font-size: 16px;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
line-height: 24px;
margin: 16px 0;
}
.addr-info {
font-size: 20px;
.iconfont {
土地交易
2025-04-03 17:20:49 +08:00
display: inline-block;
vertical-align: middle;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
font-size: 26px;
color: $color-666;
}
}
.top-btn {
.item-btn {
margin: 8px 24px 8px 0;
display: inline-block;
line-height: 42px;
color: $color-fff;
padding: 0 24px;
border-radius: 12px;
土地交易
2025-04-03 17:20:49 +08:00
font-size: 20px;
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
margin-top: 16px;
&.sign {
background: $color-main;
}
&.reservation {
background: $color-warning;
}
土地交易
2025-04-03 17:20:49 +08:00
}
}
仓库地址更换-电商交易修改
2025-04-08 16:29:47 +08:00
.land-detail-content {
width: 100%;
text-align: left;
.detail-content {
.detail-content-item {
width: 100%;
margin: 16px 0;
}
.detail-content-key,
.detail-content-val {
display: inline-block;
vertical-align: top;
}
.detail-content-key {
width: 150px;
.iconfont {
display: inline-block;
vertical-align: middle;
color: $color-main;
&.icon-voucher {
font-size: 36px;
}
&.icon-landform {
font-size: 32px;
}
&.icon-soil {
font-size: 36px;
}
&.icon-climate {
font-size: 36px;
}
&.icon-car {
font-size: 38px;
}
&.icon-more {
font-size: 28px;
}
&.icon-landoperate {
font-size: 28px;
}
}
.key-txt {
display: inline-flex;
text-align: center;
vertical-align: middle;
font-size: 22px;
font-weight: bold;
transform: skewX(-8deg);
-webkit-background-clip: text;
color: $color-333;
letter-spacing: 2px;
text-shadow: -1px 0 0 $color-main-table-header;
font-style: oblique;
padding-left: 16px;
}
}
.detail-content-val {
width: calc(100% - 150px);
padding-left: 16px;
.content-val-item {
font-size: 16px;
font-weight: 400;
line-height: 32px;
.val-label,
.val-val {
display: -webkit-inline-box;
vertical-align: middle;
}
.val-label {
color: $color-666;
max-width: 150px;
}
.val-val {
text-align: right;
max-width: calc(100% - 100px);
}
}
}
}
土地交易
2025-04-03 17:20:49 +08:00
}
}
}
</style>
Reference in New Issue Copy Permalink