586 lines
23 KiB
Vue
586 lines
23 KiB
Vue
<template>
|
||
<div class="land-detail-warp">
|
||
<common current-name="land">
|
||
<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>
|
||
</common>
|
||
</div>
|
||
</template>
|
||
<script setup name="ecommerce">
|
||
import common from './components/common.vue';
|
||
import banner from './components/banner.vue';
|
||
import signProcess from './components/signProcess.vue';
|
||
import backDivider from './components/backDivider.vue';
|
||
import { ref, reactive, onMounted, watch, computed } from 'vue';
|
||
|
||
let bannerList = reactive(['images/ecommerce/' + 'banner1.png', 'images/ecommerce/' + 'banner1.png']);
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.land-detail-warp {
|
||
width: 100%;
|
||
.land-detail-info {
|
||
overflow: hidden;
|
||
margin-bottom: 16px;
|
||
padding: 10px;
|
||
width: 100%;
|
||
border-radius: 16px;
|
||
background: $color-fff;
|
||
.top-title {
|
||
width: 100%;
|
||
text-align: left;
|
||
.father-title,
|
||
.current-title {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-weight: 700;
|
||
}
|
||
.father-title {
|
||
font-size: 18px;
|
||
}
|
||
.current-title {
|
||
position: relative;
|
||
margin-left: 8px;
|
||
padding: 0 8px;
|
||
font-size: 16px;
|
||
color: $color-main;
|
||
}
|
||
.current-title::before {
|
||
position: absolute;
|
||
top: 30%;
|
||
left: 0;
|
||
content: '.';
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
.top-info {
|
||
margin: 16px 0;
|
||
text-align: left;
|
||
::v-deep() {
|
||
.ecommerce-banner {
|
||
position: relative;
|
||
padding: 0 48px !important;
|
||
}
|
||
.el-carousel {
|
||
position: unset !important;
|
||
}
|
||
.el-carousel__arrow--left {
|
||
left: 0 !important;
|
||
}
|
||
.el-carousel__arrow--right {
|
||
right: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
.price {
|
||
position: relative;
|
||
margin: 16px 0;
|
||
padding: 0 16px;
|
||
font-size: 32px;
|
||
color: $color-main;
|
||
}
|
||
.price::before {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
font-size: 16px;
|
||
content: '￥';
|
||
transform: translateY(-50%);
|
||
}
|
||
.tag-list {
|
||
display: inline-flex;
|
||
justify-content: flex-start;
|
||
width: 100%;
|
||
color: $color-999;
|
||
gap: 10px;
|
||
.tag-item {
|
||
position: relative;
|
||
padding-left: 32px;
|
||
.iconfont {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0;
|
||
transform: translateY(-50%);
|
||
&.icon-see {
|
||
font-size: 24px;
|
||
}
|
||
&.icon-ci {
|
||
font-size: 20px;
|
||
}
|
||
&.icon-time {
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
|
||
font-size: 16px;
|
||
line-height: 32px;
|
||
}
|
||
}
|
||
.tips-list {
|
||
margin: 16px 0;
|
||
font-size: 16px;
|
||
line-height: 24px;
|
||
}
|
||
.addr-info {
|
||
font-size: 20px;
|
||
.iconfont {
|
||
display: inline-block;
|
||
vertical-align: middle;
|
||
font-size: 26px;
|
||
color: $color-666;
|
||
}
|
||
}
|
||
.top-btn {
|
||
.item-btn {
|
||
display: inline-block;
|
||
margin: 8px 24px 8px 0;
|
||
margin-top: 16px;
|
||
padding: 0 24px;
|
||
font-size: 20px;
|
||
border-radius: 12px;
|
||
color: $color-fff;
|
||
line-height: 42px;
|
||
&.sign {
|
||
background: $color-main;
|
||
}
|
||
&.reservation {
|
||
background: $color-warning;
|
||
}
|
||
}
|
||
}
|
||
.land-detail-content {
|
||
width: 100%;
|
||
text-align: left;
|
||
.detail-content {
|
||
.detail-content-item {
|
||
margin: 16px 0;
|
||
width: 100%;
|
||
}
|
||
.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;
|
||
padding-left: 16px;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
color: $color-333;
|
||
background-clip: text;
|
||
text-shadow: -1px 0 0 $color-main-table-header;
|
||
vertical-align: middle;
|
||
transform: skewX(-8deg);
|
||
letter-spacing: 2px;
|
||
font-style: oblique;
|
||
}
|
||
}
|
||
.detail-content-val {
|
||
padding-left: 16px;
|
||
width: calc(100% - 150px);
|
||
.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 {
|
||
max-width: 150px;
|
||
color: $color-666;
|
||
}
|
||
.val-val {
|
||
max-width: calc(100% - 100px);
|
||
text-align: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|