nsgk_mobile/src/views/sunVillage_info/list_cbfsq.vue

<template>
  <div class="home_wrapper">
    <div class="header_main" >
      {{this.$route.query.shStatus?'承包方审核':'承包方授权'}}
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <div class="list_main">
      <div class="titBox">
        <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>
        <p class="tit">承包方授权</p>
      </div>

      <van-tabs v-model="active" animated>
        <van-tab title="承包方">
          <van-field readonly v-model="cbfTypeName" label="承包方类型" placeholder="承包方类型" input-align="right" :border="false" />
          <van-field readonly v-model="form.cbfbm" label="承包方代码" placeholder="承包方代码" input-align="right" :border="false" />
          <van-cell title="承包方名称" style="color: #646566;">
            <div style="color:#000000; ">{{form.cbfmc}}</div>
          </van-cell>
          <van-field readonly v-model="zjlxName" label="承包方证件类型" placeholder="承包方证件类型" input-align="right" :border="false" />
          <van-field readonly v-model="form.cbfzjhm" label="承包方证件号码" placeholder="承包方证件号码" input-align="right" :border="false" />
          <van-field readonly v-model="form.lxdh" label="联系电话" placeholder="联系电话" input-align="right" :border="false" />
          <van-field readonly v-model="form.cbfcysl" label="承包方成员数量" placeholder="承包方成员数量" input-align="right" :border="false" />
          <van-field readonly v-model="form.yzbm" label="邮政编码" placeholder="	邮政编码" input-align="right" :border="false" />
          <van-field readonly v-model="form.cbfdcy" label="承包方调查员" placeholder="承包方调查员" input-align="right" :border="false" />
          <van-field readonly v-model="form.cbfdcrq" label="承包方调查日期" placeholder="承包方调查日期" input-align="right" :border="false" />
          <van-cell title="承包方调查记事" style="color: #646566;">
            <div style="color:#000000; ">{{form.cbfdcjs}}</div>
          </van-cell>
          <van-cell title="承包方调查签字" style="color: #646566;">
            <van-field style="padding: 0 0;" readonly input-align="right" :border="false" >
              <template #label>
                <img :src="'/api'+form.cbfdcqz" width="10%" alt="" v-if="form.cbfdcqz" >
              </template>
            </van-field>
          </van-cell>
          <van-cell title="公示记事" style="color: #646566;">
            <div style="color:#000000; ">{{form.gsjs}}</div>
          </van-cell>
          <van-field readonly v-model="form.gsjsr" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />
          <van-cell title="公示记事人签字" style="color: #646566;">
            <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >
              <template #label>
                <img :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >
              </template>
            </van-field>
          </van-cell>
          <van-field readonly v-model="form.gsjsrq" label="公示记事日期" placeholder="公示记事日期" input-align="right" :border="false" />
          <van-cell title="公示结果意见" style="color: #646566;">
            <div style="color:#000000; ">{{form.gsjgyj}}</div>
          </van-cell>
          <van-cell title="公示结果签字" style="color: #646566;">
            <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >
              <template #label>
                <img :src="'/api'+form.gsjgqz" width="10%" alt="" v-if="form.gsjgqz" >
              </template>
            </van-field>
          </van-cell>
          <van-field readonly v-model="form.gsjgqzrq" label="公示结果签字日期" placeholder="公示结果签字日期" input-align="right" :border="false" />
          <van-field readonly v-model="form.gsshr" label="公示审核人" placeholder="公示审核人" input-align="right" :border="false" />
          <van-field readonly v-model="form.gsshrq" label="公示审核日期" placeholder="公示审核日期" input-align="right" :border="false" />
          <van-cell title="公示审核意见" style="color: #646566;">
            <div style="color:#000000; ">{{form.gsshyj}}</div>
          </van-cell>
          <van-cell title="公示审核签字" style="color: #646566;">
            <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >
              <template #label>
                <img :src="'/api'+form.gsshqz" width="10%" alt="" v-if="form.gsshqz" >
              </template>
            </van-field>
          </van-cell>
        </van-tab>
        <van-tab title="家庭成员">
          <van-cell v-for="(item, index) in memberList" :key="item.id">
            <div class="member_item">
              <div class="item_left">
                <div class="item_left_tt">
                  <p class="name">
                    <img src="../../../static/images/contracted/family_icon_01.png" alt="">
                    {{ item.cyxm }}
                  </p>
                  <p>{{ item.yhzgx }}</p>
                  <p class="sex">
                    {{ item. cyxb }}
                    <img v-if="item.cyxb === '男'" src="../../../static/images/contracted/family_icon_man.png" alt="">
                    <img v-else-if="item.cyxb === '女'" src="../../../static/images/contracted/family_icon_wman.png" alt="">
                  </p>
                </div>
                <p class="id_card">
                  <img src="../../../static/images/contracted/family_icon_02.png" alt="">
                  {{ item.cyzjhm }}
                </p>
              </div>
              <p class="item_right">{{ item.sfgyr }}</p>
            </div>
          </van-cell>
        </van-tab>
        <van-tab title="承包合同">
          <van-field v-model="contractDetail.cbhtbm" label="承包合同代码：" placeholder="请输入承包合同代码" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.ycbhtbm" label="原承包合同代码：" placeholder="请输入原承包合同代码" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.fbfbm" label="发包方代码：" placeholder="请输入发包方代码" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.cbflx" label="承包方类型：" placeholder="请选择承包方类型" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.cbfbm" label="承包方代码：" placeholder="请输入承包方代码" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.cbfmc" label="承包方名称：" placeholder="请输入承包方名称" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.cbfs" label="承包方式：" placeholder="请选择承包方式" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.qdsj" label="签订时间：" placeholder="请选择签订时间" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.cbqxq" label="承包起始时间：" placeholder="请选择起始时间" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.cbqxz" label="承包结束时间：" placeholder="请选择结束时间" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.cbdkzs" label="承包地块数：" placeholder="请输入承包地块数" :border="false" input-align="right" readonly />
          <van-field v-model="contractDetail.htzmjm" label="合同面积(亩)：" placeholder="请输入合同面积(亩)" :border="false" input-align="right" readonly />
        </van-tab>
        <van-tab title="承包地块">
          <van-cell v-for="(item,index) in landList" :key="item.id">
            <div class="land_item" >
              <div class="item_tt">
                <p>{{ item.dkmc }}</p>
                <p>{{ item.dkbm }}</p>
              </div>
              <div class="item_type">
                <p>{{ item.htmjm }}亩</p>
                <!--            <p>{{ item.tdlylx }}</p>-->
                <p>{{ item.dldj }}</p>
                <p>{{ item.tdyt }}</p>
                <p>基本农田:{{ item.sfjbnt }}</p>
              </div>
              <div class="item_direction">
                <!--            <p>{{ item.zjrxm }}指界</p>-->
                <p>东:{{ item.dkdz }}</p>
                <p>西:{{ item. dkxz }}</p>
                <p>南:{{ item.dknz }}</p>
                <p>北:{{ item.dkbz }}</p>
              </div>
            </div>
          </van-cell>

        </van-tab>
      </van-tabs>
<!--      <van-field readonly v-model="form.fbfdcy" label="发包方调查员" placeholder="发包方调查员" input-align="right" :border="false" />-->
<!--      <van-field readonly v-model="form.fbfdcrq" label="发包方调查日期" placeholder="发包方调查日期" input-align="right" :border="false" />-->
<!--      <van-cell title="发包方调查记事" style="color: #646566;">-->
<!--        <div style="color:#000000; ">{{form.fbfdcjs}}</div>-->
<!--      </van-cell>-->
<!--      <van-cell title="发包方调查签字" style="color: #646566;">-->
<!--        <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >-->
<!--          <template #label>-->
<!--            <img :src="'/api'+form.fbfdcqz" width="10%" alt="" v-if="form.fbfdcqz" >-->
<!--          </template>-->
<!--        </van-field>-->
<!--      </van-cell>-->
<!--      <van-field readonly v-model="form.shyj" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />-->
<!--      <van-field readonly v-model="form.shrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />-->
<!--      <van-cell title="审核人签字" style="color: #646566;">-->
<!--        <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >-->
<!--          <template #label>-->
<!--            <img :src="'/api'+form.shrqz" width="10%" alt="" v-if="form.shrqz" >-->
<!--          </template>-->
<!--        </van-field>-->
<!--      </van-cell>-->
    </div>
    <div style="margin: 30px auto 0;width: 50%;">
      <van-button round block type="primary" v-if="showSignBtn" @click="openEsignPopup">
        公示结果签字
      </van-button>
      <van-button round block type="primary" v-if="showAuthBtn"  @click="cbfsq">
        授权
      </van-button>
    </div>
<!--    <img class="bottomImg" v-if="sqbutShow && cbfsqShow" src="../../assets/images/sunVillage_info/cbfwsq.png" alt=""  />-->
<!--    <img class="bottomImg" v-if="sqbutShow && cbfshShow" src="../../assets/images/sunVillage_info/cbfwsh.png" alt=""  />-->
    <img class="bottomImg" src="../../assets/images/sunVillage_info/contractor_authorized.png" alt="" v-if="showAuthPic" />


    <van-popup v-model="showEsignPopup" closeable position="right" :style="{ height: '100%' }" >
      <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">
        <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">
          <vue-esign
            ref="esign"
            class="mySign"
            :width="500"
            :height="height"
            :isCrop="signature.isCrop"
            :lineWidth="signature.lineWidth"
            :lineColor="signature.lineColor"
            :bgColor.sync="signature.bgColor"
          />
        </div>
        <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">
        <div class="signature-footer">
          <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>
          <van-button @click="handleReset" class="clearBtn" type="info" plain  size="small">清空画板</van-button>
        </div>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
  import { getCbfList,getCbfById,eqbEmpower, listFamilyMember, getContractByCode, listContractedLand } from "@/api/sunVillage_info/sysCbf";
  import { updateGsjgSign } from "@/api/sunVillage_info/fixedAssets";
  import FieldSelect from "@/components/form/FieldSelect";
  import vueEsign from "vue-esign";
  import Cookies from "js-cookie";
  import $ from "jquery";
  export default {
    name: "certificateList",
    components: {FieldSelect, vueEsign},
    data() {
      return {
        form:{},
        showForm2:false,
        showesign:false,
        sqbutShow:true,
        cbfsqShow:false,
        cbfshShow:false,
        sysFarmer:null,
        zjlxName:"",
        cbfTypeName:"",
        surveyStatusName:"",
        isDepositName:"",
        options: {
          cert_type: [],
        },
        //电子签名
        signature: {
          lineWidth: 6, // 画笔的线条粗细
          lineColor: "#000000", // 画笔的颜色
          bgColor: "", // 画布的背景颜色
          resultImg: "", // 最终画布生成的base64图片
          isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
        },
        showSignBtn: false,       // 是否显示公示结果签字按钮
        showAuthBtn: false,       // 是否显示授权按钮
        showAuthPic: false,       // 是否显示授权图片
        active: 0,                // 控制 van-tabs 的标签
        showEsignPopup: false,    // 是否显示签字板
        height: null,
        memberList: [],           // 承包方家庭成员信息
        contractDetail: {},       // 承包合同信息
        landList: [],             // 承包地块列表
      };
    },
    created() {
      this.height = window.screen.height * 1.28 - 20;
      if(this.$route.query.sqStatus){
        getCbfById(this.$route.query.id).then(response => {
          this.form = response.data;
          if(this.form.accountId != null && this.form.accountId !== ""){
            this.sqbutShow = false;
          }else{
            this.cbfsqShow = true;
            this.sqbutShow = true;
          }
          this.getDictValue();
        });

      }else if(this.$route.query.shStatus){
        getCbfById(this.$route.query.id).then(response => {
          this.form = response.data;
          if(this.form.gsshqz != null && this.form.gsshqz !== ""){
            this.sqbutShow = false;
          }else{
            this.cbfshShow = true;
            this.sqbutShow = true;
          }
          this.getDictValue();
        });
      }else{
       this.sysFarmer = JSON.parse(Cookies.get('user'));
        this.getSysCfb();
      }
    },
    methods: {
      InitOptions() {
        for(let k in this.options)
        {
          this.getDicts(k).then((resp) => this.options[k] = resp.data);
        }
      },
      /*承包方授权*/
      cbfsq(){
        eqbEmpower(this.form).then(response => {
          if(response.code === 200 ){
            // this.sqbutShow = false;
            this.$notify({type: 'success', message: '授权成功'});
            this.showSignBtn = false;
            this.showAuthBtn = false;
            this.showAuthPic = true;
          }
        });
      },
      getSysCfb(){
        getCbfList({deptId:this.sysFarmer.deptId,cbfzjhm:this.sysFarmer.idcard}).then(response => {
          // this.sqbutShow = true;
          if(response.rows.length > 0){
            this.form = response.rows[0];
            if (!this.form.gsjgqz) {
              this.showSignBtn = true;
              this.showAuthBtn = false;
              this.showAuthPic = false;
            } else if (!this.form.accountId) {
              this.showSignBtn = false;
              this.showAuthBtn = true;
              this.showAuthPic = false;
            } else {
              this.showSignBtn = false;
              this.showAuthBtn = false;
              this.showAuthPic = true;
            }
            /* if(this.form.accountId != null && this.form.accountId !== ""){
              this.sqbutShow = false;
            }else{
              this.sqbutShow = true;
            } */
            this.getDictValue();
            this.getFamilyMemberList(this.form.cbfbm);
            this.getContractDetail(this.form.cbfbm);
            this.getContractedLandList(this.form.cbfbm);
          }
        });
      },
      getDictValue(){
        let _this = this;
        this.getDicts("cert_type").then(response => {
          response.data.forEach(function (item) {
            if (item.dictValue ===  _this.form.cbfzjlx) {
              _this.zjlxName = item.dictLabel;
            }
          })
        });
        this.getDicts("cbf_type").then(response => {
          response.data.forEach(function (item) {
            if (item.dictValue ===  _this.form.cbflx) {
              _this.cbfTypeName = item.dictLabel;
            }
          })
        });
        this.getDicts("confirmed_survey_status").then(response => {
          response.data.forEach(function (item) {
            if (item.dictValue ===  _this.form.surveyStatus) {
              _this.surveyStatusName = item.dictLabel;
            }
          })
        });
        this.getDicts("sys_yes_no").then(response => {
          response.data.forEach(function (item) {
            if (item.dictValue ===  _this.form.isDeposit) {
              _this.isDepositName = item.dictLabel;
            }
          })
        });
      },
      getFamilyMemberList(cbfbm) {
        listFamilyMember({cbfbm: cbfbm, translate_dict: 1}).then(response => {
          this.memberList = response.rows;
        });
      },
      getContractDetail(cbfbm) {
        getContractByCode({cbfbm: cbfbm, translate_dict: 1}).then(response => {
          this.contractDetail = response.data;
        });
      },
      getContractedLandList(cbfbm) {
        listContractedLand({cbfbm: cbfbm, translate_dict: 1}).then(response => {
          this.landList = response.rows;
        });
      },
      openEsignPopup() {
        if (!this.form.cbfbm) {
          this.$toast({
            icon: 'fail',
            message: '承包方编码不存在',
            duration: '1000'
          })
          return;
        }
        this.showEsignPopup = true;
        this.$nextTick(() => {
          this.handleReset();
        });
      },
      canvasTTdown() {
        $('#canvasTT').css('display', 'none');
      },
      handleReset() {
        this.$refs.esign.reset();
        $('#canvasTT').css('display', 'block')
      },
      handleGenerate(){
        this.$refs.esign
          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
          .then((res) => {
            this.signature.resultImg = res;
            let wj = this.dataURLtoBlob(res);
            let param = new FormData();  // 创建form对象
            param.append('file', wj);  // 通过append向form对象添加数据
            param.append('cbfbm', this.form.cbfbm);
            updateGsjgSign(param).then(response => {
              this.$notify({type: 'success', message: '签字成功'});
              this.showEsignPopup = false;
              this.getSysCfb();
            });

          })
          .catch((err) => {
            // 画布没有签字时会执行这里提示一下
            this.$toast.fail('请签名后再保存签字');
          });
      },
      dataURLtoBlob(dataurl, filename = 'file') {
        let arr = dataurl.split(',')
        let mime = arr[0].match(/:(.*?);/)[1]
        let suffix = mime.split('/')[1]
        let bstr = atob(arr[1])
        let n = bstr.length
        let u8arr = new Uint8Array(n)
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n)
        }
        return new File([u8arr], `${filename}.${suffix}`, {
          type: mime
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  /deep/ .van-button--primary{
    background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;
    background-size: 100% 100%;
    border: none;
  }
  .van-cell::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0.426667rem;
    bottom: 0;
    left: 0.426667rem;
    border:none;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
  .signature-footer {
    transform: rotate(90deg);
    width: auto;
    position: absolute;
    top: 50%;
    left: 0px;

  }
  .home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
  .header_main {
    height: 116px;
    background: url('../../assets/images/sunVillage_info/list_head_green.png') no-repeat;
    background-size: 100% 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 36px;
    line-height: 116px;
    text-align: center;
    color: #fff;
    position: relative;

  .return_btn {
    width: 24px;
    height: 43.2px;
    background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
    background-size: 20px 36px;
    position: absolute;
    left: 38px;
    top: 36px;
  }
  }
  .release_head{
    height: 90px;
    padding:0 23px;
    display: flex;
    align-items: center;
    font-size: 26px;
    color: #929292;
  .people{
    flex: 1;
    display: flex;
    align-items: center;
  .icon{
    width: 24px;
    height: 21px;
    background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
    background-size: 100% 100%;
    display: block;
    margin-right: 8px;
  }
  }
  .time{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content:flex-end;
  .icon{
    width: 25px;
    height: 25px;
    background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
    background-size: 100% 100%;
    display: block;
    margin-right: 8px;
  }
  }
  }
  .release_conetnt{
    padding:0 22px;
    font-size: 32px;
    color: #252525;
    line-height: 44px;
  img{
    max-width: 100%;
    margin-bottom: 16px;
  }
  p{
    margin-bottom: 16px;
  }
  }
  .list_main{
    padding:25px;
    background: #ffffff;
    width: 94%;
    margin: 25px auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
  }
  .subForm{
    padding:25px;
    background-image: linear-gradient(#2884ec,#68b2ee);
    width: 94%;
    margin: 50PX auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    position: relative;
    padding-top: 10vw;
  img{
    position: absolute;
    left: 50%;
    width: 15vw;
    transform: translate(-50%,calc(-50% - 10vw));
    border: 5PX solid #e9e9e9;
    border-radius: 100%;
  }
  /deep/ .van-field__label{
    /*padding-left: 10PX;*/
    width: auto;
    display: flex;
    align-items: start;
    color: #ffffff;
    margin-right: 6vw;
  }
  /deep/ .van-cell{
    background-color: transparent;
  }
  .textarea{
  /deep/ .van-field__value{
    background-color: #ffffff;
    border-radius: 10PX;
  }
  /deep/ .van-field__control{
    padding: 12PX;
    color: #666666;
  }
  }
  /deep/ .van-field__value{
    background-color: transparent;
    border-radius: 10PX;
  }
  /deep/ .van-field__control{
    padding: 0PX;
    color: #ffffff;
  }
  /deep/ .van-cell--required::before{
    left: 60PX;
  }
  }
  .subForm2{
    padding:25px;
    background:#ffffff;
    width: 94%;
    margin: 50PX auto 0;
    border-radius: 15PX;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    position: relative;
    padding-top: 10vw;
  .topImg{
    position: absolute;
    left: 50%;
    width: 15vw;
    transform: translate(-50%,calc(-50% - 10vw));
    border: 5PX solid #e9e9e9;
    border-radius: 100%;
  }
  }
  .titBox{
    display: flex;
    align-items: center;
  }
  .tit{
    font-size: 36px;
    font-weight: bold;
  }
  /deep/ .van-cell{
    padding-left: 0!important;
    padding-right: 0!important;
    padding-bottom: 0!important;
  }
  /deep/ .van-field__label{
    /*padding-left: 10PX;*/
    width: auto;
    display: flex;
    align-items: center;
  }
  /deep/ .van-cell--required::before{
    left: 85PX;
  }
  }
  .bottomImg{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50vw;
    transform: translate(-50%,10%);
  }
  .signature-box {
    border: 1px dashed #666;
    margin: 2px 20px;
    height: 100%;
    /*canvas{*/
    /*  height: 100%!important;*/
    /*}*/
  }
  .signature-footer {
    transform: rotate(90deg);
    width: auto;
    position: absolute;
    top: 50%;
    left: 0PX;

    .clearBtn {
      margin-left: 15px;
    }
  }
  .member_item{
    border-radius: 30px;
    background: #fff;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    padding:25px 32px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item_left{
      flex: 1;
      .item_left_tt{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 14PX;
        .name{
          display: flex;
          align-items: center;
          font-size: 16PX;
          img{
            width: 5vw;
            margin-right: 2vw;
          }
        }
        .sex{
          display: flex;
          align-items: center;
          img{
            width: 3vw;
            margin-left: 1vw;
          }
        }
      }
      .id_card{
        display: flex;
        align-items: center;
        font-size: 14PX;
        margin-top: 1vh;
        img{
          width: 5vw;
          margin-right: 2vw;
        }
      }
    }
    .item_right{
      margin-left: 15vw;
      padding: 2PX 15PX;
      background: #d0f4e5;
      color: #2ecb8a;
      border: 1px solid #8be3be;
      border-radius: 30PX;
    }
  }
  .land_item{
    border-radius: 30px;
    background: #fff;
    box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    padding:25px 32px;
    margin-bottom: 20px;
    font-size: 14PX;
    .item_tt{
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:first-child{
        font-size: 16PX;
        color: #333333;
      }
      p:last-child{
        color: #44e4a3;
      }
    }
    .item_type{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#5f5f5f;
      margin-top: 1vh;
      p:nth-child(1){
        color: #fb9627;
        border: 1px solid #fb9627;
        padding: 0 10PX;
        border-radius: 50PX;
      }
      span{
        color: #ffffff;
        background: #fb9627;
        border-radius: 100%;
        display: inline-block;
        width: 15PX;
        height: 15PX;
        line-height: 15PX;
        font-size: 12PX;
        margin-right: 5PX;
      }
    }
    .item_direction{
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#5f5f5f;
      margin-top: 1vh;
    }
  }
</style>