zhangzl
/
nsgk_mobile
2
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
移动端
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1754 커밋
7 브랜치
80 MiB
 
 
트리: d26a641824
브랜치 태그
${ item.name }
${ searchTerm } 브랜치 생성
from 'd26a641824'
${ noResults }
nsgk_mobile/src/views/sunVillage_info/list_cbfsq.vue

760 lines
27 KiB
Raw Blame 히스토리 

  1. <template>

  2.   <div class="home_wrapper">

  3.     <div class="header_main" >

  4.       {{this.$route.query.shStatus?'承包方审核':'承包方授权'}}

  5.       <div class="return_btn" @click="onClickLeft"></div>

  6.     </div>

  7.     <div class="list_main">

  8.       <div class="titBox">

  9.         <img src="../../assets/images/sunVillage_info/list_employer_process_icon_02.png" style="width:22PX;height:22PX;margin-right: 10px;"/>

  10.         <p class="tit">承包方授权</p>

  11.       </div>

  12. 

  13.       <van-tabs v-model="active" animated>

  14.         <van-tab title="承包方">

  15.           <van-field readonly v-model="cbfTypeName" label="承包方类型" placeholder="承包方类型" input-align="right" :border="false" />

  16.           <van-field readonly v-model="form.cbfbm" label="承包方代码" placeholder="承包方代码" input-align="right" :border="false" />

  17.           <van-cell title="承包方名称" style="color: #646566;">

  18.             <div style="color:#000000; ">{{form.cbfmc}}</div>

  19.           </van-cell>

  20.           <van-field readonly v-model="zjlxName" label="承包方证件类型" placeholder="承包方证件类型" input-align="right" :border="false" />

  21.           <van-field readonly v-model="form.cbfzjhm" label="承包方证件号码" placeholder="承包方证件号码" input-align="right" :border="false" />

  22.           <van-field readonly v-model="form.lxdh" label="联系电话" placeholder="联系电话" input-align="right" :border="false" />

  23.           <van-field readonly v-model="form.cbfcysl" label="承包方成员数量" placeholder="承包方成员数量" input-align="right" :border="false" />

  24.           <van-field readonly v-model="form.yzbm" label="邮政编码" placeholder="	邮政编码" input-align="right" :border="false" />

  25.           <van-field readonly v-model="form.cbfdcy" label="承包方调查员" placeholder="承包方调查员" input-align="right" :border="false" />

  26.           <van-field readonly v-model="form.cbfdcrq" label="承包方调查日期" placeholder="承包方调查日期" input-align="right" :border="false" />

  27.           <van-cell title="承包方调查记事" style="color: #646566;">

  28.             <div style="color:#000000; ">{{form.cbfdcjs}}</div>

  29.           </van-cell>

  30.           <van-cell title="承包方调查签字" style="color: #646566;">

  31.             <van-field style="padding: 0 0;" readonly input-align="right" :border="false" >

  32.               <template #label>

  33.                 <img :src="'/api'+form.cbfdcqz" width="10%" alt="" v-if="form.cbfdcqz" >

  34.               </template>

  35.             </van-field>

  36.           </van-cell>

  37.           <van-cell title="公示记事" style="color: #646566;">

  38.             <div style="color:#000000; ">{{form.gsjs}}</div>

  39.           </van-cell>

  40.           <van-field readonly v-model="form.gsjsr" label="公示记事人" placeholder="公示记事人" input-align="right" :border="false" />

  41.           <van-cell title="公示记事人签字" style="color: #646566;">

  42.             <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >

  43.               <template #label>

  44.                 <img :src="'/api'+form.gsjsrqz" width="10%" alt="" v-if="form.gsjsrqz" >

  45.               </template>

  46.             </van-field>

  47.           </van-cell>

  48.           <van-field readonly v-model="form.gsjsrq" label="公示记事日期" placeholder="公示记事日期" input-align="right" :border="false" />

  49.           <van-cell title="公示结果意见" style="color: #646566;">

  50.             <div style="color:#000000; ">{{form.gsjgyj}}</div>

  51.           </van-cell>

  52.           <van-cell title="公示结果签字" style="color: #646566;">

  53.             <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >

  54.               <template #label>

  55.                 <img :src="'/api'+form.gsjgqz" width="10%" alt="" v-if="form.gsjgqz" >

  56.               </template>

  57.             </van-field>

  58.           </van-cell>

  59.           <van-field readonly v-model="form.gsjgqzrq" label="公示结果签字日期" placeholder="公示结果签字日期" input-align="right" :border="false" />

  60.           <van-field readonly v-model="form.gsshr" label="公示审核人" placeholder="公示审核人" input-align="right" :border="false" />

  61.           <van-field readonly v-model="form.gsshrq" label="公示审核日期" placeholder="公示审核日期" input-align="right" :border="false" />

  62.           <van-cell title="公示审核意见" style="color: #646566;">

  63.             <div style="color:#000000; ">{{form.gsshyj}}</div>

  64.           </van-cell>

  65.           <van-cell title="公示审核签字" style="color: #646566;">

  66.             <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >

  67.               <template #label>

  68.                 <img :src="'/api'+form.gsshqz" width="10%" alt="" v-if="form.gsshqz" >

  69.               </template>

  70.             </van-field>

  71.           </van-cell>

  72.         </van-tab>

  73.         <van-tab title="家庭成员">

  74.           <van-cell v-for="(item, index) in memberList" :key="item.id">

  75.             <div class="member_item">

  76.               <div class="item_left">

  77.                 <div class="item_left_tt">

  78.                   <p class="name">

  79.                     <img src="../../../static/images/contracted/family_icon_01.png" alt="">

  80.                     {{ item.cyxm }}

  81.                   </p>

  82.                   <p>{{ item.yhzgx }}</p>

  83.                   <p class="sex">

  84.                     {{ item. cyxb }}

  85.                     <img v-if="item.cyxb === '男'" src="../../../static/images/contracted/family_icon_man.png" alt="">

  86.                     <img v-else-if="item.cyxb === '女'" src="../../../static/images/contracted/family_icon_wman.png" alt="">

  87.                   </p>

  88.                 </div>

  89.                 <p class="id_card">

  90.                   <img src="../../../static/images/contracted/family_icon_02.png" alt="">

  91.                   {{ item.cyzjhm }}

  92.                 </p>

  93.               </div>

  94.               <p class="item_right">{{ item.sfgyr }}</p>

  95.             </div>

  96.           </van-cell>

  97.         </van-tab>

  98.         <van-tab title="承包合同">

  99.           <van-field v-model="contractDetail.cbhtbm" label="承包合同代码：" placeholder="请输入承包合同代码" :border="false" input-align="right" readonly />

  100.           <van-field v-model="contractDetail.ycbhtbm" label="原承包合同代码：" placeholder="请输入原承包合同代码" :border="false" input-align="right" readonly />

  101.           <van-field v-model="contractDetail.fbfbm" label="发包方代码：" placeholder="请输入发包方代码" :border="false" input-align="right" readonly />

  102.           <van-field v-model="contractDetail.cbflx" label="承包方类型：" placeholder="请选择承包方类型" :border="false" input-align="right" readonly />

  103.           <van-field v-model="contractDetail.cbfbm" label="承包方代码：" placeholder="请输入承包方代码" :border="false" input-align="right" readonly />

  104.           <van-field v-model="contractDetail.cbfmc" label="承包方名称：" placeholder="请输入承包方名称" :border="false" input-align="right" readonly />

  105.           <van-field v-model="contractDetail.cbfs" label="承包方式：" placeholder="请选择承包方式" :border="false" input-align="right" readonly />

  106.           <van-field v-model="contractDetail.qdsj" label="签订时间：" placeholder="请选择签订时间" :border="false" input-align="right" readonly />

  107.           <van-field v-model="contractDetail.cbqxq" label="承包起始时间：" placeholder="请选择起始时间" :border="false" input-align="right" readonly />

  108.           <van-field v-model="contractDetail.cbqxz" label="承包结束时间：" placeholder="请选择结束时间" :border="false" input-align="right" readonly />

  109.           <van-field v-model="contractDetail.cbdkzs" label="承包地块数：" placeholder="请输入承包地块数" :border="false" input-align="right" readonly />

  110.           <van-field v-model="contractDetail.htzmjm" label="合同面积(亩)：" placeholder="请输入合同面积(亩)" :border="false" input-align="right" readonly />

  111.         </van-tab>

  112.         <van-tab title="承包地块">

  113.           <van-cell v-for="(item,index) in landList" :key="item.id">

  114.             <div class="land_item" >

  115.               <div class="item_tt">

  116.                 <p>{{ item.dkmc }}</p>

  117.                 <p>{{ item.dkbm }}</p>

  118.               </div>

  119.               <div class="item_type">

  120.                 <p>{{ item.htmjm }}亩</p>

  121.                 <!--            <p>{{ item.tdlylx }}</p>-->

  122.                 <p>{{ item.dldj }}</p>

  123.                 <p>{{ item.tdyt }}</p>

  124.                 <p>基本农田:{{ item.sfjbnt }}</p>

  125.               </div>

  126.               <div class="item_direction">

  127.                 <!--            <p>{{ item.zjrxm }}指界</p>-->

  128.                 <p>东:{{ item.dkdz }}</p>

  129.                 <p>西:{{ item. dkxz }}</p>

  130.                 <p>南:{{ item.dknz }}</p>

  131.                 <p>北:{{ item.dkbz }}</p>

  132.               </div>

  133.             </div>

  134.           </van-cell>

  135. 

  136.         </van-tab>

  137.       </van-tabs>

  138. <!--      <van-field readonly v-model="form.fbfdcy" label="发包方调查员" placeholder="发包方调查员" input-align="right" :border="false" />-->

  139. <!--      <van-field readonly v-model="form.fbfdcrq" label="发包方调查日期" placeholder="发包方调查日期" input-align="right" :border="false" />-->

  140. <!--      <van-cell title="发包方调查记事" style="color: #646566;">-->

  141. <!--        <div style="color:#000000; ">{{form.fbfdcjs}}</div>-->

  142. <!--      </van-cell>-->

  143. <!--      <van-cell title="发包方调查签字" style="color: #646566;">-->

  144. <!--        <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >-->

  145. <!--          <template #label>-->

  146. <!--            <img :src="'/api'+form.fbfdcqz" width="10%" alt="" v-if="form.fbfdcqz" >-->

  147. <!--          </template>-->

  148. <!--        </van-field>-->

  149. <!--      </van-cell>-->

  150. <!--      <van-field readonly v-model="form.shyj" label="审核意见" placeholder="审核意见" input-align="right" :border="false" />-->

  151. <!--      <van-field readonly v-model="form.shrq" label="审核日期" placeholder="审核日期" input-align="right" :border="false" />-->

  152. <!--      <van-cell title="审核人签字" style="color: #646566;">-->

  153. <!--        <van-field style="padding: 0 0;" readonly  input-align="right" :border="false" >-->

  154. <!--          <template #label>-->

  155. <!--            <img :src="'/api'+form.shrqz" width="10%" alt="" v-if="form.shrqz" >-->

  156. <!--          </template>-->

  157. <!--        </van-field>-->

  158. <!--      </van-cell>-->

  159.     </div>

  160.     <div style="margin: 30px auto 0;width: 50%;">

  161.       <van-button round block type="primary" v-if="showSignBtn" @click="openEsignPopup">

  162.         公示结果签字

  163.       </van-button>

  164.       <van-button round block type="primary" v-if="showAuthBtn"  @click="cbfsq">

  165.         授权

  166.       </van-button>

  167.     </div>

  168. <!--    <img class="bottomImg" v-if="sqbutShow && cbfsqShow" src="../../assets/images/sunVillage_info/cbfwsq.png" alt=""  />-->

  169. <!--    <img class="bottomImg" v-if="sqbutShow && cbfshShow" src="../../assets/images/sunVillage_info/cbfwsh.png" alt=""  />-->

  170.     <img class="bottomImg" src="../../assets/images/sunVillage_info/contractor_authorized.png" alt="" v-if="showAuthPic" />

  171. 

  172. 

  173.     <van-popup v-model="showEsignPopup" closeable position="right" :style="{ height: '100%' }" >

  174.       <van-cell-group style="width: 100%;height:100%;overflow: hidden;padding-top: 10px;padding-bottom: 10px;">

  175.         <div class="signature-box" @mousedown="canvasTTdown" @touchstart="canvasTTdown">

  176.           <vue-esign

  177.             ref="esign"

  178.             class="mySign"

  179.             :width="500"

  180.             :height="height"

  181.             :isCrop="signature.isCrop"

  182.             :lineWidth="signature.lineWidth"

  183.             :lineColor="signature.lineColor"

  184.             :bgColor.sync="signature.bgColor"

  185.           />

  186.         </div>

  187.         <img src="../../assets/images/sunVillage_info/signature_icon_10.png" id="canvasTT" style="position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)" alt="">

  188.         <div class="signature-footer">

  189.           <van-button @click="handleGenerate" type="info" size="small">保存签字</van-button>

  190.           <van-button @click="handleReset" class="clearBtn" type="info" plain  size="small">清空画板</van-button>

  191.         </div>

  192.       </van-cell-group>

  193.     </van-popup>

  194.   </div>

  195. </template>

  196. 

  197. <script>

  198.   import { getCbfList,getCbfById,eqbEmpower, listFamilyMember, getContractByCode, listContractedLand } from "@/api/sunVillage_info/sysCbf";

  199.   import { updateGsjgSign } from "@/api/sunVillage_info/fixedAssets";

  200.   import FieldSelect from "@/components/form/FieldSelect";

  201.   import vueEsign from "vue-esign";

  202.   import Cookies from "js-cookie";

  203.   import $ from "jquery";

  204.   export default {

  205.     name: "certificateList",

  206.     components: {FieldSelect, vueEsign},

  207.     data() {

  208.       return {

  209.         form:{},

  210.         showForm2:false,

  211.         showesign:false,

  212.         sqbutShow:true,

  213.         cbfsqShow:false,

  214.         cbfshShow:false,

  215.         sysFarmer:null,

  216.         zjlxName:"",

  217.         cbfTypeName:"",

  218.         surveyStatusName:"",

  219.         isDepositName:"",

  220.         options: {

  221.           cert_type: [],

  222.         },

  223.         //电子签名

  224.         signature: {

  225.           lineWidth: 6, // 画笔的线条粗细

  226.           lineColor: "#000000", // 画笔的颜色

  227.           bgColor: "", // 画布的背景颜色

  228.           resultImg: "", // 最终画布生成的base64图片

  229.           isCrop: false, // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分

  230.         },

  231.         showSignBtn: false,       // 是否显示公示结果签字按钮

  232.         showAuthBtn: false,       // 是否显示授权按钮

  233.         showAuthPic: false,       // 是否显示授权图片

  234.         active: 0,                // 控制 van-tabs 的标签

  235.         showEsignPopup: false,    // 是否显示签字板

  236.         height: null,

  237.         memberList: [],           // 承包方家庭成员信息

  238.         contractDetail: {},       // 承包合同信息

  239.         landList: [],             // 承包地块列表

  240.       };

  241.     },

  242.     created() {

  243.       this.height = window.screen.height * 1.28 - 20;

  244.       if(this.$route.query.sqStatus){

  245.         getCbfById(this.$route.query.id).then(response => {

  246.           this.form = response.data;

  247.           if(this.form.accountId != null && this.form.accountId !== ""){

  248.             this.sqbutShow = false;

  249.           }else{

  250.             this.cbfsqShow = true;

  251.             this.sqbutShow = true;

  252.           }

  253.           this.getDictValue();

  254.         });

  255. 

  256.       }else if(this.$route.query.shStatus){

  257.         getCbfById(this.$route.query.id).then(response => {

  258.           this.form = response.data;

  259.           if(this.form.gsshqz != null && this.form.gsshqz !== ""){

  260.             this.sqbutShow = false;

  261.           }else{

  262.             this.cbfshShow = true;

  263.             this.sqbutShow = true;

  264.           }

  265.           this.getDictValue();

  266.         });

  267.       }else{

  268.        this.sysFarmer = JSON.parse(Cookies.get('user'));

  269.         this.getSysCfb();

  270.       }

  271.     },

  272.     methods: {

  273.       InitOptions() {

  274.         for(let k in this.options)

  275.         {

  276.           this.getDicts(k).then((resp) => this.options[k] = resp.data);

  277.         }

  278.       },

  279.       /*承包方授权*/

  280.       cbfsq(){

  281.         eqbEmpower(this.form).then(response => {

  282.           if(response.code === 200 ){

  283.             // this.sqbutShow = false;

  284.             this.$notify({type: 'success', message: '授权成功'});

  285.             this.showSignBtn = false;

  286.             this.showAuthBtn = false;

  287.             this.showAuthPic = true;

  288.           }

  289.         });

  290.       },

  291.       getSysCfb(){

  292.         getCbfList({deptId:this.sysFarmer.deptId,cbfzjhm:this.sysFarmer.idcard}).then(response => {

  293.           // this.sqbutShow = true;

  294.           if(response.rows.length > 0){

  295.             this.form = response.rows[0];

  296.             if (!this.form.gsjgqz) {

  297.               this.showSignBtn = true;

  298.               this.showAuthBtn = false;

  299.               this.showAuthPic = false;

  300.             } else if (!this.form.accountId) {

  301.               this.showSignBtn = false;

  302.               this.showAuthBtn = true;

  303.               this.showAuthPic = false;

  304.             } else {

  305.               this.showSignBtn = false;

  306.               this.showAuthBtn = false;

  307.               this.showAuthPic = true;

  308.             }

  309.             /* if(this.form.accountId != null && this.form.accountId !== ""){

  310.               this.sqbutShow = false;

  311.             }else{

  312.               this.sqbutShow = true;

  313.             } */

  314.             this.getDictValue();

  315.             this.getFamilyMemberList(this.form.cbfbm);

  316.             this.getContractDetail(this.form.cbfbm);

  317.             this.getContractedLandList(this.form.cbfbm);

  318.           }

  319.         });

  320.       },

  321.       getDictValue(){

  322.         let _this = this;

  323.         this.getDicts("cert_type").then(response => {

  324.           response.data.forEach(function (item) {

  325.             if (item.dictValue ===  _this.form.cbfzjlx) {

  326.               _this.zjlxName = item.dictLabel;

  327.             }

  328.           })

  329.         });

  330.         this.getDicts("cbf_type").then(response => {

  331.           response.data.forEach(function (item) {

  332.             if (item.dictValue ===  _this.form.cbflx) {

  333.               _this.cbfTypeName = item.dictLabel;

  334.             }

  335.           })

  336.         });

  337.         this.getDicts("confirmed_survey_status").then(response => {

  338.           response.data.forEach(function (item) {

  339.             if (item.dictValue ===  _this.form.surveyStatus) {

  340.               _this.surveyStatusName = item.dictLabel;

  341.             }

  342.           })

  343.         });

  344.         this.getDicts("sys_yes_no").then(response => {

  345.           response.data.forEach(function (item) {

  346.             if (item.dictValue ===  _this.form.isDeposit) {

  347.               _this.isDepositName = item.dictLabel;

  348.             }

  349.           })

  350.         });

  351.       },

  352.       getFamilyMemberList(cbfbm) {

  353.         listFamilyMember({cbfbm: cbfbm, translate_dict: 1}).then(response => {

  354.           this.memberList = response.rows;

  355.         });

  356.       },

  357.       getContractDetail(cbfbm) {

  358.         getContractByCode({cbfbm: cbfbm, translate_dict: 1}).then(response => {

  359.           this.contractDetail = response.data;

  360.         });

  361.       },

  362.       getContractedLandList(cbfbm) {

  363.         listContractedLand({cbfbm: cbfbm, translate_dict: 1}).then(response => {

  364.           this.landList = response.rows;

  365.         });

  366.       },

  367.       openEsignPopup() {

  368.         if (!this.form.cbfbm) {

  369.           this.$toast({

  370.             icon: 'fail',

  371.             message: '承包方编码不存在',

  372.             duration: '1000'

  373.           })

  374.           return;

  375.         }

  376.         this.showEsignPopup = true;

  377.         this.$nextTick(() => {

  378.           this.handleReset();

  379.         });

  380.       },

  381.       canvasTTdown() {

  382.         $('#canvasTT').css('display', 'none');

  383.       },

  384.       handleReset() {

  385.         this.$refs.esign.reset();

  386.         $('#canvasTT').css('display', 'block')

  387.       },

  388.       handleGenerate(){

  389.         this.$refs.esign

  390.           .generate() // 使用生成器调用把签字的图片转换成为base64图片格式

  391.           .then((res) => {

  392.             this.signature.resultImg = res;

  393.             let wj = this.dataURLtoBlob(res);

  394.             let param = new FormData();  // 创建form对象

  395.             param.append('file', wj);  // 通过append向form对象添加数据

  396.             param.append('cbfbm', this.form.cbfbm);

  397.             updateGsjgSign(param).then(response => {

  398.               this.$notify({type: 'success', message: '签字成功'});

  399.               this.showEsignPopup = false;

  400.               this.getSysCfb();

  401.             });

  402. 

  403.           })

  404.           .catch((err) => {

  405.             // 画布没有签字时会执行这里提示一下

  406.             this.$toast.fail('请签名后再保存签字');

  407.           });

  408.       },

  409.       dataURLtoBlob(dataurl, filename = 'file') {

  410.         let arr = dataurl.split(',')

  411.         let mime = arr[0].match(/:(.*?);/)[1]

  412.         let suffix = mime.split('/')[1]

  413.         let bstr = atob(arr[1])

  414.         let n = bstr.length

  415.         let u8arr = new Uint8Array(n)

  416.         while (n--) {

  417.           u8arr[n] = bstr.charCodeAt(n)

  418.         }

  419.         return new File([u8arr], `${filename}.${suffix}`, {

  420.           type: mime

  421.         })

  422.       },

  423.     },

  424.   }

  425. </script>

  426. 

  427. <style scoped lang="scss">

  428.   /deep/ .van-button--primary{

  429.     background: url("../../assets/images/sunVillage_info/btn_bg.png") no-repeat;

  430.     background-size: 100% 100%;

  431.     border: none;

  432.   }

  433.   .van-cell::after {

  434.     position: absolute;

  435.     box-sizing: border-box;

  436.     content: ' ';

  437.     pointer-events: none;

  438.     right: 0.426667rem;

  439.     bottom: 0;

  440.     left: 0.426667rem;

  441.     border:none;

  442.     -webkit-transform: scaleY(.5);

  443.     transform: scaleY(.5);

  444.   }

  445.   .signature-footer {

  446.     transform: rotate(90deg);

  447.     width: auto;

  448.     position: absolute;

  449.     top: 50%;

  450.     left: 0px;

  451. 

  452.   }

  453.   .home_wrapper{

  454.     background: #e9e9e9;

  455.     min-height: 100vh;

  456.     width: 100vw;

  457.   .header_main {

  458.     height: 116px;

  459.     background: url('../../assets/images/sunVillage_info/list_head_green.png') no-repeat;

  460.     background-size: 100% 100%;

  461.     position: fixed;

  462.     top: 0;

  463.     left: 0;

  464.     width: 100%;

  465.     font-size: 36px;

  466.     line-height: 116px;

  467.     text-align: center;

  468.     color: #fff;

  469.     position: relative;

  470. 

  471.   .return_btn {

  472.     width: 24px;

  473.     height: 43.2px;

  474.     background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;

  475.     background-size: 20px 36px;

  476.     position: absolute;

  477.     left: 38px;

  478.     top: 36px;

  479.   }

  480.   }

  481.   .release_head{

  482.     height: 90px;

  483.     padding:0 23px;

  484.     display: flex;

  485.     align-items: center;

  486.     font-size: 26px;

  487.     color: #929292;

  488.   .people{

  489.     flex: 1;

  490.     display: flex;

  491.     align-items: center;

  492.   .icon{

  493.     width: 24px;

  494.     height: 21px;

  495.     background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;

  496.     background-size: 100% 100%;

  497.     display: block;

  498.     margin-right: 8px;

  499.   }

  500.   }

  501.   .time{

  502.     flex: 1;

  503.     display: flex;

  504.     align-items: center;

  505.     justify-content:flex-end;

  506.   .icon{

  507.     width: 25px;

  508.     height: 25px;

  509.     background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;

  510.     background-size: 100% 100%;

  511.     display: block;

  512.     margin-right: 8px;

  513.   }

  514.   }

  515.   }

  516.   .release_conetnt{

  517.     padding:0 22px;

  518.     font-size: 32px;

  519.     color: #252525;

  520.     line-height: 44px;

  521.   img{

  522.     max-width: 100%;

  523.     margin-bottom: 16px;

  524.   }

  525.   p{

  526.     margin-bottom: 16px;

  527.   }

  528.   }

  529.   .list_main{

  530.     padding:25px;

  531.     background: #ffffff;

  532.     width: 94%;

  533.     margin: 25px auto 0;

  534.     border-radius: 15PX;

  535.     box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  536.   }

  537.   .subForm{

  538.     padding:25px;

  539.     background-image: linear-gradient(#2884ec,#68b2ee);

  540.     width: 94%;

  541.     margin: 50PX auto 0;

  542.     border-radius: 15PX;

  543.     box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  544.     position: relative;

  545.     padding-top: 10vw;

  546.   img{

  547.     position: absolute;

  548.     left: 50%;

  549.     width: 15vw;

  550.     transform: translate(-50%,calc(-50% - 10vw));

  551.     border: 5PX solid #e9e9e9;

  552.     border-radius: 100%;

  553.   }

  554.   /deep/ .van-field__label{

  555.     /*padding-left: 10PX;*/

  556.     width: auto;

  557.     display: flex;

  558.     align-items: start;

  559.     color: #ffffff;

  560.     margin-right: 6vw;

  561.   }

  562.   /deep/ .van-cell{

  563.     background-color: transparent;

  564.   }

  565.   .textarea{

  566.   /deep/ .van-field__value{

  567.     background-color: #ffffff;

  568.     border-radius: 10PX;

  569.   }

  570.   /deep/ .van-field__control{

  571.     padding: 12PX;

  572.     color: #666666;

  573.   }

  574.   }

  575.   /deep/ .van-field__value{

  576.     background-color: transparent;

  577.     border-radius: 10PX;

  578.   }

  579.   /deep/ .van-field__control{

  580.     padding: 0PX;

  581.     color: #ffffff;

  582.   }

  583.   /deep/ .van-cell--required::before{

  584.     left: 60PX;

  585.   }

  586.   }

  587.   .subForm2{

  588.     padding:25px;

  589.     background:#ffffff;

  590.     width: 94%;

  591.     margin: 50PX auto 0;

  592.     border-radius: 15PX;

  593.     box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  594.     position: relative;

  595.     padding-top: 10vw;

  596.   .topImg{

  597.     position: absolute;

  598.     left: 50%;

  599.     width: 15vw;

  600.     transform: translate(-50%,calc(-50% - 10vw));

  601.     border: 5PX solid #e9e9e9;

  602.     border-radius: 100%;

  603.   }

  604.   }

  605.   .titBox{

  606.     display: flex;

  607.     align-items: center;

  608.   }

  609.   .tit{

  610.     font-size: 36px;

  611.     font-weight: bold;

  612.   }

  613.   /deep/ .van-cell{

  614.     padding-left: 0!important;

  615.     padding-right: 0!important;

  616.     padding-bottom: 0!important;

  617.   }

  618.   /deep/ .van-field__label{

  619.     /*padding-left: 10PX;*/

  620.     width: auto;

  621.     display: flex;

  622.     align-items: center;

  623.   }

  624.   /deep/ .van-cell--required::before{

  625.     left: 85PX;

  626.   }

  627.   }

  628.   .bottomImg{

  629.     position: absolute;

  630.     left: 50%;

  631.     top: 50%;

  632.     width: 50vw;

  633.     transform: translate(-50%,10%);

  634.   }

  635.   .signature-box {

  636.     border: 1px dashed #666;

  637.     margin: 2px 20px;

  638.     height: 100%;

  639.     /*canvas{*/

  640.     /*  height: 100%!important;*/

  641.     /*}*/

  642.   }

  643.   .signature-footer {

  644.     transform: rotate(90deg);

  645.     width: auto;

  646.     position: absolute;

  647.     top: 50%;

  648.     left: 0PX;

  649. 

  650.     .clearBtn {

  651.       margin-left: 15px;

  652.     }

  653.   }

  654.   .member_item{

  655.     border-radius: 30px;

  656.     background: #fff;

  657.     box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  658.     padding:25px 32px;

  659.     margin-bottom: 20px;

  660.     display: flex;

  661.     align-items: center;

  662.     justify-content: space-between;

  663.     .item_left{

  664.       flex: 1;

  665.       .item_left_tt{

  666.         display: flex;

  667.         justify-content: space-between;

  668.         align-items: center;

  669.         font-size: 14PX;

  670.         .name{

  671.           display: flex;

  672.           align-items: center;

  673.           font-size: 16PX;

  674.           img{

  675.             width: 5vw;

  676.             margin-right: 2vw;

  677.           }

  678.         }

  679.         .sex{

  680.           display: flex;

  681.           align-items: center;

  682.           img{

  683.             width: 3vw;

  684.             margin-left: 1vw;

  685.           }

  686.         }

  687.       }

  688.       .id_card{

  689.         display: flex;

  690.         align-items: center;

  691.         font-size: 14PX;

  692.         margin-top: 1vh;

  693.         img{

  694.           width: 5vw;

  695.           margin-right: 2vw;

  696.         }

  697.       }

  698.     }

  699.     .item_right{

  700.       margin-left: 15vw;

  701.       padding: 2PX 15PX;

  702.       background: #d0f4e5;

  703.       color: #2ecb8a;

  704.       border: 1px solid #8be3be;

  705.       border-radius: 30PX;

  706.     }

  707.   }

  708.   .land_item{

  709.     border-radius: 30px;

  710.     background: #fff;

  711.     box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);

  712.     padding:25px 32px;

  713.     margin-bottom: 20px;

  714.     font-size: 14PX;

  715.     .item_tt{

  716.       display: flex;

  717.       justify-content: space-between;

  718.       align-items: center;

  719.       p:first-child{

  720.         font-size: 16PX;

  721.         color: #333333;

  722.       }

  723.       p:last-child{

  724.         color: #44e4a3;

  725.       }

  726.     }

  727.     .item_type{

  728.       display: flex;

  729.       justify-content: space-between;

  730.       align-items: center;

  731.       color:#5f5f5f;

  732.       margin-top: 1vh;

  733.       p:nth-child(1){

  734.         color: #fb9627;

  735.         border: 1px solid #fb9627;

  736.         padding: 0 10PX;

  737.         border-radius: 50PX;

  738.       }

  739.       span{

  740.         color: #ffffff;

  741.         background: #fb9627;

  742.         border-radius: 100%;

  743.         display: inline-block;

  744.         width: 15PX;

  745.         height: 15PX;

  746.         line-height: 15PX;

  747.         font-size: 12PX;

  748.         margin-right: 5PX;

  749.       }

  750.     }

  751.     .item_direction{

  752.       display: flex;

  753.       justify-content: space-between;

  754.       align-items: center;

  755.       color:#5f5f5f;

  756.       margin-top: 1vh;

  757.     }

  758.   }

  759. </style>