| @@ -5522,6 +5522,33 @@ export const constantRoutes = [ | |||||
| }, | }, | ||||
| component: (resolve) => require(['@/views/contracted/village/contractor/contractWord'], resolve) | component: (resolve) => require(['@/views/contracted/village/contractor/contractWord'], resolve) | ||||
| }, | }, | ||||
| { | |||||
| path: '/contracted/village/contractorLand', | |||||
| name: 'contractedVillageContractorLand', | |||||
| meta: { | |||||
| title: '承包地', | |||||
| hidden: true, | |||||
| }, | |||||
| component: (resolve) => require(['@/views/contracted/village/contractor/contractorLand'], resolve) | |||||
| }, | |||||
| { | |||||
| path: '/contracted/village/contractorLandDetail', | |||||
| name: 'contractedVillageContractorLandDetail', | |||||
| meta: { | |||||
| title: '承包地', | |||||
| hidden: true, | |||||
| }, | |||||
| component: (resolve) => require(['@/views/contracted/village/contractor/contractorLandDetail'], resolve) | |||||
| }, | |||||
| { | |||||
| path: '/contracted/village/contractorLandMap', | |||||
| name: 'contractedVillageContractorLandMap', | |||||
| meta: { | |||||
| title: '承包地', | |||||
| hidden: true, | |||||
| }, | |||||
| component: (resolve) => require(['@/views/contracted/village/contractor/contractorLandMap'], resolve) | |||||
| }, | |||||
| ]; | ]; | ||||
| @@ -13,7 +13,7 @@ | |||||
| <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | ||||
| <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p> | <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p> | ||||
| <p class="active">承包合同</p> | <p class="active">承包合同</p> | ||||
| <p>承包地</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p> | |||||
| </div> | </div> | ||||
| <div class="list_main"> | <div class="list_main"> | ||||
| @@ -13,7 +13,7 @@ | |||||
| <p class="active">承包方</p> | <p class="active">承包方</p> | ||||
| <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p> | <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p> | ||||
| <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | ||||
| <p>承包地</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p> | |||||
| </div> | </div> | ||||
| <div class="list_main"> | <div class="list_main"> | ||||
| @@ -13,7 +13,7 @@ | |||||
| <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | ||||
| <p class="active">家庭成员</p> | <p class="active">家庭成员</p> | ||||
| <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | ||||
| <p>承包地</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p> | |||||
| </div> | </div> | ||||
| <div class="list_main"> | <div class="list_main"> | ||||
| @@ -13,7 +13,7 @@ | |||||
| <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | ||||
| <p class="active">家庭成员</p> | <p class="active">家庭成员</p> | ||||
| <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | ||||
| <p>承包地</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p> | |||||
| </div> | </div> | ||||
| <div class="list_main"> | <div class="list_main"> | ||||
| @@ -0,0 +1,343 @@ | |||||
| <template> | |||||
| <div class="app-container"> | |||||
| <van-nav-bar left-arrow fixed placeholder @click-left="$router.push({path:'/contracted/village/contractor'})" > | |||||
| <template #title> | |||||
| <div class="tb_main"> | |||||
| B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p> | |||||
| </div> | |||||
| </template> | |||||
| </van-nav-bar> | |||||
| <div class="tap_block"> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | |||||
| <p class="active">承包地</p> | |||||
| </div> | |||||
| <div class="function_main"> | |||||
| <div class="function_btn1" @click="goMap"> | |||||
| <p class="active">进入地图 <span class="sanjiao-right"></span></p> | |||||
| </div> | |||||
| <div class="function_btn2" @click="goDetail"> | |||||
| <p class="active"> + 新增</p> | |||||
| </div> | |||||
| </div> | |||||
| <div class="list_main"> | |||||
| <van-swipe-cell v-for="(item,index) in 10"> | |||||
| <div class="item" @click="goDetail"> | |||||
| <div class="item_tt"> | |||||
| <p>西湖地块名称名称名称</p> | |||||
| <p>371481199201011234</p> | |||||
| </div> | |||||
| <div class="item_type"> | |||||
| <p>3.5亩</p> | |||||
| <p>旱地</p> | |||||
| <p><span>2</span>等地</p> | |||||
| <p>种植业</p> | |||||
| <p>基本农田:是</p> | |||||
| </div> | |||||
| <div class="item_direction"> | |||||
| <p>张三指界</p> | |||||
| <p>东:张琪</p> | |||||
| <p>西:马六</p> | |||||
| <p>南:河流</p> | |||||
| <p>北:道路</p> | |||||
| </div> | |||||
| </div> | |||||
| <template #right> | |||||
| <div class="operation"> | |||||
| <!-- delete 删除 edit编辑 view查看 list榜单 --> | |||||
| <div class="opera_btn delete"> | |||||
| <p>取消<br/>承包</p> | |||||
| </div> | |||||
| <div class="opera_btn edit"> | |||||
| <p>转给<br/>他方</p> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| </van-swipe-cell> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Cookies from "js-cookie"; | |||||
| export default { | |||||
| name: "contractedVillageContractor", | |||||
| data() { | |||||
| return { | |||||
| loading:false, | |||||
| finished:true, | |||||
| value:'', | |||||
| showType:false, | |||||
| showZjType:false, | |||||
| typeOptions:[{ | |||||
| dictLabel:'类型1', | |||||
| dictValue:'1', | |||||
| }], | |||||
| zjTypeOptions:[{ | |||||
| dictLabel:'类型2', | |||||
| dictValue:'1', | |||||
| }], | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| }, | |||||
| methods: { | |||||
| getList(){ | |||||
| }, | |||||
| onSearch(){ | |||||
| }, | |||||
| onConfirmTypeOptions(){ | |||||
| }, | |||||
| onConfirmZjTypeOptions(){ | |||||
| }, | |||||
| goDetail(){ | |||||
| this.$router.push({path:'/contracted/village/contractorLandDetail'}); | |||||
| }, | |||||
| goMap(){ | |||||
| this.$router.push({path:'/contracted/village/contractorLandMap'}); | |||||
| } | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .app-container{ | |||||
| background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center; | |||||
| background-size: 100% 100%; | |||||
| height: 100vh; | |||||
| padding: 0 4vw; | |||||
| overflow: hidden; | |||||
| } | |||||
| /deep/ .van-nav-bar{ | |||||
| background: transparent; | |||||
| } | |||||
| /deep/ .van-nav-bar .van-icon{ | |||||
| color: #000000; | |||||
| } | |||||
| /deep/ .van-hairline--bottom::after{ | |||||
| border: none; | |||||
| } | |||||
| /deep/ .van-search__content{ | |||||
| background: rgba(255,255,255,.5); | |||||
| } | |||||
| /deep/ .van-search{ | |||||
| padding: 0; | |||||
| flex: 1; | |||||
| } | |||||
| /deep/ .van-ellipsis{ | |||||
| overflow: initial; | |||||
| } | |||||
| .function_main{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| margin-top: 2vh; | |||||
| .function_btn1{ | |||||
| background: rgba(255,255,255,.5); | |||||
| width: 25%; | |||||
| border-radius: 50PX; | |||||
| padding: 2PX; | |||||
| .active{ | |||||
| background-image: linear-gradient(to right,#ffdc93,#fc8708); | |||||
| color: #333333; | |||||
| border-radius: 50PX; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 5PX 0; | |||||
| } | |||||
| .sanjiao-right { | |||||
| display: inline-block; | |||||
| border-left: 8PX solid #000; | |||||
| border-left-color: initial; | |||||
| border-top: 5PX solid transparent; | |||||
| border-bottom: 5PX solid transparent; | |||||
| margin-left: 5PX; | |||||
| } | |||||
| } | |||||
| .function_btn2{ | |||||
| background: rgba(255,255,255,.5); | |||||
| width: 25%; | |||||
| border-radius: 50PX; | |||||
| margin-left: 10PX; | |||||
| padding: 2PX; | |||||
| .active{ | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| color: #333333; | |||||
| border-radius: 50PX; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| padding: 5PX 0; | |||||
| } | |||||
| } | |||||
| } | |||||
| .tb_main{ | |||||
| position: relative; | |||||
| p{ | |||||
| position: absolute; | |||||
| display: inline-block; | |||||
| margin-left: 10PX; | |||||
| } | |||||
| } | |||||
| .tb{ | |||||
| font-size: 12px; | |||||
| color: #ff8900; | |||||
| background: #daf6e7; | |||||
| border: 1px solid #d7be6e; | |||||
| padding: 2PX 8PX; | |||||
| border-radius: 50PX; | |||||
| margin-right: 5PX; | |||||
| } | |||||
| .tap_block{ | |||||
| width: 100%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| background: #ebfaf2; | |||||
| padding: 2PX 4PX; | |||||
| border-radius: 10PX; | |||||
| margin-top: 1vh; | |||||
| .active{ | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| box-shadow: 0 0 10PX #cccccc; | |||||
| color: #333333; | |||||
| } | |||||
| p{ | |||||
| width: 25%; | |||||
| text-align: center; | |||||
| padding: 5PX 0; | |||||
| border-radius: 10PX; | |||||
| color: #666666; | |||||
| } | |||||
| } | |||||
| .list_main{ | |||||
| margin-top: 2vh; | |||||
| text-align: center; | |||||
| height: 88vh; | |||||
| overflow-y: scroll; | |||||
| padding-bottom: 15vh; | |||||
| .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; | |||||
| } | |||||
| } | |||||
| .operation{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: right; | |||||
| text-align: center; | |||||
| background: #fff; | |||||
| box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); | |||||
| height: 100%; | |||||
| border-radius: 30px; | |||||
| margin-left: 2vw; | |||||
| overflow: hidden; | |||||
| .opera_btn{ | |||||
| height: 100%; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| color: #ffffff; | |||||
| padding: 0 5vw; | |||||
| &.delete{ | |||||
| background:#fb9627; | |||||
| } | |||||
| &.view{ | |||||
| background: #48e5a2; | |||||
| } | |||||
| &.edit{ | |||||
| background: #48e5a2; | |||||
| } | |||||
| &.list{ | |||||
| background: #fb9627; | |||||
| } | |||||
| } | |||||
| } | |||||
| .btn{ | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| box-shadow: 0 0 10PX #cccccc; | |||||
| padding: 10PX 0PX; | |||||
| border-radius: 50PX; | |||||
| display: inline-block; | |||||
| width: 40%; | |||||
| margin: 2vh auto 0; | |||||
| text-align: center; | |||||
| } | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,298 @@ | |||||
| <template> | |||||
| <div class="app-container"> | |||||
| <van-nav-bar left-arrow fixed placeholder @click-left="onClickLeft" > | |||||
| <template #title> | |||||
| <div class="tb_main"> | |||||
| B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p> | |||||
| </div> | |||||
| </template> | |||||
| </van-nav-bar> | |||||
| <div class="tap_block"> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | |||||
| <p class="active">承包地</p> | |||||
| </div> | |||||
| <div class="list_main"> | |||||
| <van-field v-model="value" label="地块代码:" placeholder="请输入地块代码" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="地块名称:" placeholder="请输入地块名称" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="土地利用类型:" | |||||
| placeholder="请选择土地利用类型" | |||||
| required | |||||
| :border="false" | |||||
| input-align="right" | |||||
| right-icon="arrow-down" | |||||
| label-width="auto" | |||||
| readonly | |||||
| clickable | |||||
| @click="showType = true" | |||||
| /> | |||||
| <van-popup v-model="showType" position="bottom"> | |||||
| <van-picker | |||||
| show-toolbar | |||||
| :columns="typeOptions" | |||||
| value-key="dictLabel" | |||||
| @confirm="onConfirmTypeOptions" | |||||
| @cancel="showType = false" | |||||
| /> | |||||
| </van-popup> | |||||
| <van-field v-model="value" label="地力等级:" | |||||
| placeholder="请选择地力等级" | |||||
| required | |||||
| :border="false" | |||||
| input-align="right" | |||||
| right-icon="arrow-down" | |||||
| label-width="auto" | |||||
| readonly | |||||
| clickable | |||||
| @click="showZjType = true" | |||||
| /> | |||||
| <van-popup v-model="showZjType" position="bottom"> | |||||
| <van-picker | |||||
| show-toolbar | |||||
| :columns="zjTypeOptions" | |||||
| value-key="dictLabel" | |||||
| @confirm="onConfirmZjTypeOptions" | |||||
| @cancel="showZjType = false" | |||||
| /> | |||||
| </van-popup> | |||||
| <van-field v-model="value" label="土地用途:" | |||||
| placeholder="请选择土地用途" | |||||
| required | |||||
| :border="false" | |||||
| input-align="right" | |||||
| right-icon="arrow-down" | |||||
| label-width="auto" | |||||
| readonly | |||||
| clickable | |||||
| @click="showTDYT = true" | |||||
| /> | |||||
| <van-popup v-model="showTDYT" position="bottom"> | |||||
| <van-picker | |||||
| show-toolbar | |||||
| :columns="TDYTOptions" | |||||
| value-key="dictLabel" | |||||
| @confirm="onConfirmTDYTOptions" | |||||
| @cancel="showTDYT = false" | |||||
| /> | |||||
| </van-popup> | |||||
| <van-field v-model="value" label="基本农用:" placeholder="请输入基本农用" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="实测面积(亩):" placeholder="请输入实测面积(亩)" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="指界:" placeholder="请输入指界" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="东面:" placeholder="请输入东面" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="西面:" placeholder="请输入西面" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="南面:" placeholder="请输入南面" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="北面:" placeholder="请输入北面" required :border="false" input-align="right" label-width="auto" /> | |||||
| <van-field v-model="value" label="备注:" placeholder="请输入备注" required :border="false" input-align="right" label-width="auto" /> | |||||
| <div class="mapBox"></div> | |||||
| <p class="btn">保存</p> | |||||
| </div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Cookies from "js-cookie"; | |||||
| export default { | |||||
| name: "contractedVillageContractor", | |||||
| data() { | |||||
| return { | |||||
| loading:false, | |||||
| finished:true, | |||||
| value:'', | |||||
| showType:false, | |||||
| showZjType:false, | |||||
| showTDYT:false, | |||||
| typeOptions:[{ | |||||
| dictLabel:'类型1', | |||||
| dictValue:'1', | |||||
| }], | |||||
| zjTypeOptions:[{ | |||||
| dictLabel:'类型2', | |||||
| dictValue:'1', | |||||
| }], | |||||
| TDYTOptions:[{ | |||||
| dictLabel:'类型2', | |||||
| dictValue:'1', | |||||
| }], | |||||
| radio:1, | |||||
| minDate: new Date(2020, 0, 1), | |||||
| maxDate: new Date(2025, 10, 1), | |||||
| currentDate: new Date(2021, 0, 17), | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| }, | |||||
| methods: { | |||||
| getList(){ | |||||
| }, | |||||
| onSearch(){ | |||||
| }, | |||||
| onConfirmTypeOptions(){ | |||||
| }, | |||||
| onConfirmZjTypeOptions(){ | |||||
| }, | |||||
| onConfirmTDYTOptions(){ | |||||
| }, | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .app-container{ | |||||
| background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center; | |||||
| background-size: 100% 100%; | |||||
| height: 100vh; | |||||
| padding: 0 4vw; | |||||
| overflow: hidden; | |||||
| } | |||||
| /deep/ .van-nav-bar{ | |||||
| background: transparent; | |||||
| } | |||||
| /deep/ .van-nav-bar .van-icon{ | |||||
| color: #000000; | |||||
| } | |||||
| /deep/ .van-hairline--bottom::after{ | |||||
| border: none; | |||||
| } | |||||
| /deep/ .van-search__content{ | |||||
| background: rgba(255,255,255,.5); | |||||
| } | |||||
| /deep/ .van-search{ | |||||
| padding: 0; | |||||
| flex: 1; | |||||
| } | |||||
| /deep/ .van-ellipsis{ | |||||
| overflow: initial; | |||||
| } | |||||
| .tb_main{ | |||||
| position: relative; | |||||
| p{ | |||||
| position: absolute; | |||||
| display: inline-block; | |||||
| margin-left: 10PX; | |||||
| } | |||||
| } | |||||
| .tb{ | |||||
| font-size: 12px; | |||||
| color: #ff8900; | |||||
| background: #daf6e7; | |||||
| border: 1px solid #d7be6e; | |||||
| padding: 2PX 8PX; | |||||
| border-radius: 50PX; | |||||
| margin-right: 5PX; | |||||
| } | |||||
| .tap_block{ | |||||
| width: 100%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| background: #ebfaf2; | |||||
| padding: 2PX 4PX; | |||||
| border-radius: 10PX; | |||||
| margin-top: 1vh; | |||||
| .active{ | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| box-shadow: 0 0 10PX #cccccc; | |||||
| color: #333333; | |||||
| } | |||||
| p{ | |||||
| width: 25%; | |||||
| text-align: center; | |||||
| padding: 5PX 0; | |||||
| border-radius: 10PX; | |||||
| color: #666666; | |||||
| } | |||||
| } | |||||
| .search_main{ | |||||
| display: flex; | |||||
| margin-top: 2vh; | |||||
| .search_btn{ | |||||
| background: rgba(255,255,255,.5); | |||||
| width: 25%; | |||||
| border-radius: 50PX; | |||||
| margin-left: 10PX; | |||||
| padding: 2PX; | |||||
| .active{ | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| color: #333333; | |||||
| border-radius: 50PX; | |||||
| display: flex; | |||||
| align-items: center; | |||||
| justify-content: center; | |||||
| height: 100%; | |||||
| } | |||||
| } | |||||
| } | |||||
| .second_tap{ | |||||
| display: flex; | |||||
| align-items: center; | |||||
| margin-top: 1vh; | |||||
| p{ | |||||
| background: #dbf1ea; | |||||
| border: 1px solid #cdcdcd; | |||||
| color: #5f5f5f; | |||||
| padding: 5PX 15PX; | |||||
| margin-right: 3vw; | |||||
| border-radius: 50PX; | |||||
| } | |||||
| .active{ | |||||
| background: #99eecb; | |||||
| border-color: #48e5a2; | |||||
| color: #333333; | |||||
| } | |||||
| } | |||||
| .list_main{ | |||||
| margin-top: 2vh; | |||||
| overflow-y: scroll; | |||||
| text-align: center; | |||||
| background: #ffffff; | |||||
| border-top-left-radius: 10PX; | |||||
| border-top-right-radius: 10PX; | |||||
| height: 88vh; | |||||
| .btn{ | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| box-shadow: 0 0 10PX #cccccc; | |||||
| padding: 10PX 0PX; | |||||
| border-radius: 50PX; | |||||
| display: inline-block; | |||||
| width: 40%; | |||||
| margin-top: 2vh; | |||||
| } | |||||
| } | |||||
| .mapBox{ | |||||
| width: 94%; | |||||
| height: 50vw; | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| border-radius: 10PX; | |||||
| margin: 2vh auto; | |||||
| } | |||||
| </style> | |||||
| @@ -0,0 +1,123 @@ | |||||
| <template> | |||||
| <div class="app-container"> | |||||
| <van-nav-bar left-arrow fixed placeholder @click-left="onClickLeft" > | |||||
| <template #title> | |||||
| <div class="tb_main"> | |||||
| B村<p><span class="tb">签字完成</span><span class="tb">异常挂起</span></p> | |||||
| </div> | |||||
| </template> | |||||
| </van-nav-bar> | |||||
| <div class="tap_block"> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p> | |||||
| <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p> | |||||
| <p class="active">承包地</p> | |||||
| </div> | |||||
| <div class="mapBox"></div> | |||||
| </div> | |||||
| </template> | |||||
| <script> | |||||
| import Cookies from "js-cookie"; | |||||
| export default { | |||||
| name: "contractedVillageContractor", | |||||
| data() { | |||||
| return { | |||||
| }; | |||||
| }, | |||||
| created() { | |||||
| }, | |||||
| methods: { | |||||
| }, | |||||
| }; | |||||
| </script> | |||||
| <style scoped lang="scss"> | |||||
| .app-container{ | |||||
| background: #fff url("../../../../../static/images/contracted/contracted_index_bg.png") no-repeat center; | |||||
| background-size: 100% 100%; | |||||
| height: 100vh; | |||||
| padding: 0 4vw; | |||||
| overflow: hidden; | |||||
| } | |||||
| /deep/ .van-nav-bar{ | |||||
| background: transparent; | |||||
| } | |||||
| /deep/ .van-nav-bar .van-icon{ | |||||
| color: #000000; | |||||
| } | |||||
| /deep/ .van-hairline--bottom::after{ | |||||
| border: none; | |||||
| } | |||||
| /deep/ .van-search__content{ | |||||
| background: rgba(255,255,255,.5); | |||||
| } | |||||
| /deep/ .van-search{ | |||||
| padding: 0; | |||||
| flex: 1; | |||||
| } | |||||
| /deep/ .van-ellipsis{ | |||||
| overflow: initial; | |||||
| } | |||||
| .tb_main{ | |||||
| position: relative; | |||||
| p{ | |||||
| position: absolute; | |||||
| display: inline-block; | |||||
| margin-left: 10PX; | |||||
| } | |||||
| } | |||||
| .tb{ | |||||
| font-size: 12px; | |||||
| color: #ff8900; | |||||
| background: #daf6e7; | |||||
| border: 1px solid #d7be6e; | |||||
| padding: 2PX 8PX; | |||||
| border-radius: 50PX; | |||||
| margin-right: 5PX; | |||||
| } | |||||
| .tap_block{ | |||||
| width: 100%; | |||||
| display: flex; | |||||
| justify-content: space-between; | |||||
| background: #ebfaf2; | |||||
| padding: 2PX 4PX; | |||||
| border-radius: 10PX; | |||||
| margin-top: 1vh; | |||||
| .active{ | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| box-shadow: 0 0 10PX #cccccc; | |||||
| color: #333333; | |||||
| } | |||||
| p{ | |||||
| width: 25%; | |||||
| text-align: center; | |||||
| padding: 5PX 0; | |||||
| border-radius: 10PX; | |||||
| color: #666666; | |||||
| } | |||||
| } | |||||
| .mapBox{ | |||||
| width: 100vw; | |||||
| height: 88vh; | |||||
| background-image: linear-gradient(to right,#c6fe8b,#48e5a2); | |||||
| margin: 2vh auto; | |||||
| transform: translateX(-4vw); | |||||
| } | |||||
| </style> | |||||