<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 {
    width: 100%;
    margin-bottom: 16px;
    background: $color-fff;
    border-radius: 16px;
    overflow: hidden;
    padding: 10px;
    .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 {
        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%);
      }
    }

    .top-info {
      margin: 16px 0;
      text-align: left;
      ::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;
        }
      }
    }
    .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 {
        position: relative;
        padding-left: 32px;
        .iconfont {
          position: absolute;
          left: 0;
          top: 50%;
          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 {
      font-size: 16px;
      line-height: 24px;
      margin: 16px 0;
    }
    .addr-info {
      font-size: 20px;
      .iconfont {
        display: inline-block;
        vertical-align: middle;
        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;
        font-size: 20px;
        margin-top: 16px;
        &.sign {
          background: $color-main;
        }
        &.reservation {
          background: $color-warning;
        }
      }
    }

    .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);
            }
          }
        }
      }
    }
  }
}
</style>
