diff --git a/src/router/index.js b/src/router/index.js
index aa538564..3bb11c88 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5522,6 +5522,33 @@ export const constantRoutes = [
     },
     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)
+  },
 ];
 
 
diff --git a/src/views/contracted/village/contractor/contractWord.vue b/src/views/contracted/village/contractor/contractWord.vue
index 2f4b3279..255f0d24 100644
--- a/src/views/contracted/village/contractor/contractWord.vue
+++ b/src/views/contracted/village/contractor/contractWord.vue
@@ -13,7 +13,7 @@
       <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p>
       <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p>
       <p class="active">承包合同</p>
-      <p>承包地</p>
+      <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p>
     </div>
 
     <div class="list_main">
diff --git a/src/views/contracted/village/contractor/contractorDetail.vue b/src/views/contracted/village/contractor/contractorDetail.vue
index 606809f2..5ca4d98f 100644
--- a/src/views/contracted/village/contractor/contractorDetail.vue
+++ b/src/views/contracted/village/contractor/contractorDetail.vue
@@ -13,7 +13,7 @@
       <p class="active">承包方</p>
       <p @click="$router.push({path:'/contracted/village/contractorFamily'})">家庭成员</p>
       <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p>
-      <p>承包地</p>
+      <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p>
     </div>
 
     <div class="list_main">
diff --git a/src/views/contracted/village/contractor/contractorFamily.vue b/src/views/contracted/village/contractor/contractorFamily.vue
index 6265a8f1..925d479a 100644
--- a/src/views/contracted/village/contractor/contractorFamily.vue
+++ b/src/views/contracted/village/contractor/contractorFamily.vue
@@ -13,7 +13,7 @@
       <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p>
       <p class="active">家庭成员</p>
       <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p>
-      <p>承包地</p>
+      <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p>
     </div>
 
     <div class="list_main">
diff --git a/src/views/contracted/village/contractor/contractorFamilyDetail.vue b/src/views/contracted/village/contractor/contractorFamilyDetail.vue
index fd16f5f3..5b0dc2c8 100644
--- a/src/views/contracted/village/contractor/contractorFamilyDetail.vue
+++ b/src/views/contracted/village/contractor/contractorFamilyDetail.vue
@@ -13,7 +13,7 @@
       <p @click="$router.push({path:'/contracted/village/contractorDetail'})">承包方</p>
       <p class="active">家庭成员</p>
       <p @click="$router.push({path:'/contracted/village/contractorWord'})">承包合同</p>
-      <p>承包地</p>
+      <p @click="$router.push({path:'/contracted/village/contractorLand'})">承包地</p>
     </div>
 
     <div class="list_main">
diff --git a/src/views/contracted/village/contractor/contractorLand.vue b/src/views/contracted/village/contractor/contractorLand.vue
new file mode 100644
index 00000000..71c6e972
--- /dev/null
+++ b/src/views/contracted/village/contractor/contractorLand.vue
@@ -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>
diff --git a/src/views/contracted/village/contractor/contractorLandDetail.vue b/src/views/contracted/village/contractor/contractorLandDetail.vue
new file mode 100644
index 00000000..438dab15
--- /dev/null
+++ b/src/views/contracted/village/contractor/contractorLandDetail.vue
@@ -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>
diff --git a/src/views/contracted/village/contractor/contractorLandMap.vue b/src/views/contracted/village/contractor/contractorLandMap.vue
new file mode 100644
index 00000000..c549f3ba
--- /dev/null
+++ b/src/views/contracted/village/contractor/contractorLandMap.vue
@@ -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>