diff --git a/src/assets/images/land/底部框架.png b/src/assets/images/basic/footerBG.png
similarity index 100%
rename from src/assets/images/land/底部框架.png
rename to src/assets/images/basic/footerBG.png
diff --git a/src/assets/images/land/图层 2.png b/src/assets/images/land/countCircleBG.png
similarity index 100%
rename from src/assets/images/land/图层 2.png
rename to src/assets/images/land/countCircleBG.png
diff --git a/src/assets/images/land/组 84.png b/src/assets/images/land/countTextBG.png
similarity index 100%
rename from src/assets/images/land/组 84.png
rename to src/assets/images/land/countTextBG.png
diff --git a/src/assets/images/land/副标题 - 副本.png b/src/assets/images/land/副标题 - 副本.png
deleted file mode 100644
index 0c7e113..0000000
Binary files a/src/assets/images/land/副标题 - 副本.png and /dev/null differ
diff --git a/src/components/centerMap.vue b/src/components/centerMap.vue
index 01ee33b..830228c 100644
--- a/src/components/centerMap.vue
+++ b/src/components/centerMap.vue
@@ -10,15 +10,15 @@
 import { isEmpty, getAssetsFile } from '@/utils';
 import { ref, reactive, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
-
+import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 const route = useRoute();
 
 var aspectScale = 0.8807505292367753;
 // var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
 // var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
 var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
+
 const isShow = ref(false);
-import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 let geoData = geoJsonData;
 let mapName = ref('ZJ' + route.name);
 const chartsData = reactive({
@@ -50,11 +50,12 @@ const chartsData = reactive({
     geo3D: {
       map: mapName.value,
       roam: true,
-      zoom: 1.2,
+      zoom: 1,
+      left: '30px',
       show: true,
       zlevel: -1, // 必须设置，
       viewControl: {
-        distance: 110,
+        distance: 115,
         alpha: 60,
         beta: 0,
         minBeta: -360,
@@ -97,7 +98,54 @@ const chartsData = reactive({
       },
     },
     series: [
-      // 闪烁散点图系列
+      {
+        type: 'map3D',
+        map: mapName.value,
+        zoom: 1,
+        left: '30px',
+        viewControl: {
+          distance: 115,
+          alpha: 60,
+          beta: 0,
+          minBeta: -360,
+          maxBeta: 720,
+          // 限制视角，使不能旋转缩放平移
+          // rotateSensitivity: 0,
+          // zoomSensitivity: 0,
+          // panSensitivity: 0,
+        },
+        itemStyle: {
+          // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
+          color: 'rgba(75,255,180,0.2)', // 地图板块的颜色
+          opacity: 1, // 图形的不透明度 [ default: 1 ]
+          borderWidth: 1.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
+          borderColor: '#4bffb4', // 图形描边的颜色。[ default: #333 ]
+        },
+        label: {
+          show: true,
+          distance: 0,
+          color: '#000',
+          padding: [6, 4, 2, 4],
+          borderRadius: 4,
+          backgroundColor: 'rgba(255,255,255,0.2)',
+          textStyle: {
+            fontSize: 12,
+            color: '#E87813', // 地图初始化区域字体颜色
+            borderWidth: 0,
+            borderColor: '#000',
+          },
+        },
+        emphasis: {
+          //高亮状态的效果
+          label: {
+            show: true,
+            color: '#fff',
+          },
+          itemStyle: {
+            color: 'rgba(75,255,180,0.3)', // 地图板块的颜色
+          },
+        },
+      },
     ],
   },
 });
@@ -106,12 +154,9 @@ const mapClick = (data) => {
   isShow.value = true;
   console.info('mapClick', data);
 };
-
-const infoHide = () => {
-  isShow.value = false;
-};
-
-onMounted(() => {});
+onMounted(() => {
+  console.info('iconUrl', iconUrl);
+});
 </script>
 <style lang="scss" scoped>
 div {
@@ -141,97 +186,5 @@ div {
     left: 50%;
     transform: translateX(-50%);
   }
-  .line_info {
-    position: fixed;
-    padding: 32px 10px 20px 20px;
-    left: 60px;
-    top: var(--top);
-    max-height: 74vh;
-    width: 400px;
-    color: #fff;
-    background-color: rgb(42 125 235 / 40%);
-    border-radius: 8px;
-    backdrop-filter: blur(4px);
-    z-index: 9999;
-    transition: all 0.8s cubic-bezier(0.58, 0.15, 0.4, 1.42);
-    .el-icon-close {
-      position: absolute;
-      right: 8px;
-      top: 8px;
-      cursor: pointer;
-      font-size: 16px;
-    }
-    > section {
-      padding-right: 10px;
-      height: 100%;
-      overflow-y: auto;
-      &::-webkit-scrollbar {
-        width: 6px;
-      }
-      &::-webkit-scrollbar-track {
-        background-color: #dddddd;
-        border-radius: 6px;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: #959191;
-        border-radius: 6px;
-      }
-      &::-webkit-scrollbar-thumb:hover {
-        background-color: #a0a0a0;
-      }
-      .info_box {
-        > div {
-          margin-bottom: 12px;
-          display: grid;
-          grid-template-columns: 40% 60%;
-          span {
-            &:last-child {
-              text-align: right;
-            }
-          }
-        }
-      }
-      .route_box {
-        padding: 0 34px;
-        > div {
-          position: relative;
-          padding-bottom: 16px;
-          &::after {
-            content: '';
-            position: absolute;
-            top: 12px;
-            left: -11px;
-            height: 100%;
-            border: 1px solid #fff;
-          }
-          &:last-child {
-            &::after {
-              display: none;
-            }
-          }
-          > div {
-            position: relative;
-            padding-left: 12px;
-          }
-          ._circle {
-            position: absolute;
-            top: 4px;
-            left: -16px;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: #fff;
-            box-shadow: 0 0 3px #fff;
-          }
-          ._name {
-            margin-bottom: 6px;
-            font-size: 20px;
-            font-weight: bold;
-            font-family: '黑体';
-          }
-        }
-      }
-    }
-  }
 }
 </style>
diff --git a/src/components/custom-scroll-title/index.vue b/src/components/custom-scroll-title/index.vue
index 13accac..6472b01 100644
--- a/src/components/custom-scroll-title/index.vue
+++ b/src/components/custom-scroll-title/index.vue
@@ -38,6 +38,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 onMounted(() => {
   handleWidth();
+  activeTitle.value = router.currentRoute.value.name;
 });
 // const emit = defineEmits(['changeTitle']);
 const props = defineProps({
@@ -91,12 +92,14 @@ watch(
 );
 function handleWidth() {
   let ld = document.querySelector('.left_titles_container');
-  let w = ld.clientWidth;
-  itemW.value = (w - 2 * gap.value) / 3;
-  titleContentW.value = itemW.value * leftTitles.value.length + leftTitles.value.length * gap.value;
-  if (props.titles.length > 3 && props.titles.length < 6) {
-    let l = 3 - (props.titles.length - 3);
-    right.value = l * itemW.value + (l - 1) * gap.value;
+  if (ld) {
+    let w = ld.clientWidth;
+    itemW.value = (w - 2 * gap.value) / 3;
+    titleContentW.value = itemW.value * leftTitles.value.length + leftTitles.value.length * gap.value;
+    if (props.titles.length > 3 && props.titles.length < 6) {
+      let l = 3 - (props.titles.length - 3);
+      right.value = l * itemW.value + (l - 1) * gap.value;
+    }
   }
 }
 function handleTitleBtn(t = -1) {
@@ -165,7 +168,7 @@ function handleTitleClick(val) {
     width: 30%;
     height: 100%;
     overflow: hidden;
-    line-height: 60px;
+    line-height: 90px;
     .title_content {
       position: absolute;
       top: 10px;
diff --git a/src/components/subTop.vue b/src/components/subTop.vue
index 8a4707e..715becb 100644
--- a/src/components/subTop.vue
+++ b/src/components/subTop.vue
@@ -7,7 +7,7 @@
       }"
       class="title-top-bg"
     ></div>
-    <span class="title-top-content" :style="{ 'text-align': 'left' }">{{ topTitle || '--' }}</span>
+    <span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
   </div>
 </template>
 <script setup>
diff --git a/src/layouts/index.vue b/src/layouts/index.vue
index 48b5ce3..1c35e7b 100644
--- a/src/layouts/index.vue
+++ b/src/layouts/index.vue
@@ -58,11 +58,14 @@ onMounted(() => {
   &-header {
     width: 100%;
     height: 60px;
-    margin-bottom: 60px;
+    // margin-bottom: 60px;
   }
   &-main {
     flex: 1;
     min-height: calc(100vh - 60px);
   }
+  .base-laytout-header {
+    height: 90px;
+  }
 }
 </style>
diff --git a/src/router/index.js b/src/router/index.js
index a776199..275def0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from 'vue-router';
 import Layout from '@/layouts/index.vue';
 
 import demoRouters from './modules/demo';
+import path from 'path-browserify';
+import v2 from './modules/v2';
 
 export const constantRoutes = [
   // {
@@ -20,60 +22,61 @@ export const constantRoutes = [
     path: '/',
     name: 'layout',
     component: Layout,
-    // redirect: '/home',
+    redirect: '/home',
     meta: { title: '首页', icon: 'House' },
-    children: [
-      {
-        path: '/home',
-        component: () => import('@/views/home/index.vue'),
-        name: 'home',
-        meta: { title: '首页', icon: 'House' },
-      },
-      {
-        path: '/land',
-        component: () => import('@/views/land/index.vue'),
-        name: 'land',
-        meta: { title: '土地资源', icon: 'House' },
-      },
-      {
-        path: '/inputs',
-        name: 'inputs',
-        component: () => import('@/views/inputs/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/entities',
-        name: 'entities',
-        component: () => import('@/views/entities/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/breed',
-        name: 'breed',
-        component: () => import('@/views/breed/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/plant',
-        name: 'plant',
-        component: () => import('@/views/plant/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/trace',
-        name: 'trace',
-        component: () => import('@/views/trace/index.vue'),
-        hidden: true,
-      },
-      {
-        path: '/early',
-        name: 'early',
-        component: () => import('@/views/early/index.vue'),
-        hidden: true,
-      },
-    ],
+    // children: [
+    //   {
+    //     path: '/home',
+    //     component: () => import('@/views/home/index.vue'),
+    //     name: 'home',
+    //     meta: { title: '首页', icon: 'House' },
+    //   },
+    //   {
+    //     path: '/land',
+    //     component: () => import('@/views/land/index.vue'),
+    //     name: 'land',
+    //     meta: { title: '土地资源', icon: 'House' },
+    //   },
+    //   {
+    //     path: '/inputs',
+    //     name: 'inputs',
+    //     component: () => import('@/views/inputs/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/entities',
+    //     name: 'entities',
+    //     component: () => import('@/views/entities/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/breed',
+    //     name: 'breed',
+    //     component: () => import('@/views/breed/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/plant',
+    //     name: 'plant',
+    //     component: () => import('@/views/plant/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/trace',
+    //     name: 'trace',
+    //     component: () => import('@/views/trace/index.vue'),
+    //     hidden: true,
+    //   },
+    //   {
+    //     path: '/early',
+    //     name: 'early',
+    //     component: () => import('@/views/early/index.vue'),
+    //     hidden: true,
+    //   },
+    // ],
   },
   ...demoRouters,
+  v2,
   {
     path: '/test',
     name: 'test',
diff --git a/src/router/modules/v2.js b/src/router/modules/v2.js
new file mode 100644
index 0000000..0e91c01
--- /dev/null
+++ b/src/router/modules/v2.js
@@ -0,0 +1,59 @@
+import Layout from '@/layouts/index.vue';
+
+export default {
+  path: '/v2',
+  name: 'layout',
+  component: Layout,
+  redirect: '/v2/home',
+  meta: { title: '首页', icon: 'House' },
+  children: [
+    {
+      path: 'home',
+      component: () => import('@/views/home/index.vue'),
+      name: 'home',
+      meta: { title: '首页', icon: 'House' },
+    },
+    {
+      path: 'land',
+      component: () => import('@/views/land/index.vue'),
+      name: 'land',
+      meta: { title: '土地资源', icon: 'House' },
+    },
+    {
+      path: 'inputs',
+      name: 'inputs',
+      component: () => import('@/views/inputs/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'entities',
+      name: 'entities',
+      component: () => import('@/views/entities/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'breed',
+      name: 'breed',
+      component: () => import('@/views/breed/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'plant',
+      name: 'plant',
+      component: () => import('@/views/plant/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'trace',
+      name: 'trace',
+      component: () => import('@/views/trace/index.vue'),
+      hidden: true,
+    },
+    {
+      path: 'early',
+      name: 'early',
+      component: () => import('@/views/early/index.vue'),
+      hidden: true,
+    },
+  ],
+};
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 198967e..015508b 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -10,6 +10,9 @@
   -moz-osx-font-smoothing: grayscale;
   background-color: #000;
 }
+* {
+  box-sizing: border-box;
+}
 .el-dialog__body {
   overflow: hidden auto;
   height: auto;
@@ -35,4 +38,26 @@
   -webkit-line-clamp: 2;
   line-height: 1.5;
   max-height: calc(1.5em * 2);
-}
\ No newline at end of file
+}
+._scroll {
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: #dddddd;
+    border-radius: 6px;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #959191;
+    border-radius: 6px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: #a0a0a0;
+  }
+}
+.w100 {
+  width: 100%;
+}
+.h100 {
+  height: 100%;
+}
diff --git a/src/views/land/components/LandAera.vue b/src/views/land/components/LandAera.vue
new file mode 100644
index 0000000..fc5bb42
--- /dev/null
+++ b/src/views/land/components/LandAera.vue
@@ -0,0 +1,135 @@
+<template>
+  <section class="land_area_all">
+    <section class="_left">
+      <section class="_circle"></section>
+      <section class="_text"></section>
+    </section>
+    <section class="_right _scroll">
+      <section v-for="(item, i) in list" :key="`right_${i}`" class="list_item w100" :class="[item.id == ac ? 'active' : '']">
+        <span class="_label">
+          <span class="_spot" :style="{ background: item.color }"></span>
+          {{ item.label }}
+        </span>
+        <span class="_value">{{ item.value }}</span>
+      </section>
+    </section>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+const props = defineProps({
+  data: {
+    type: Array,
+    default: () => {
+      return [
+        { value: 60.8, label: '望天田' },
+        { value: 60.6, label: '水浇地' },
+        { value: 58.9, label: '灌溉水田' },
+        { value: 56.1, label: '基地地' },
+        { value: 56.0, label: '果园' },
+        { value: 52.4, label: '草地' },
+        { value: 32.6, label: '林地' },
+        { value: 25.8, label: '育苗地' },
+        { value: 6.3, label: '观测用地' },
+        { value: 6.1, label: '监测用地' },
+      ];
+    },
+  },
+});
+const list = ref([]);
+const ac = ref(0);
+watch(
+  () => props.data,
+  () => {
+    list.value = props.data.map((v, i) => {
+      return {
+        id: i,
+        ...v,
+        color: randomColor(),
+      };
+    });
+    console.log('list', list.value);
+  },
+  {
+    immediate: true,
+  }
+);
+function randomColor() {
+  let obj = {
+    r: 0,
+    g: 0,
+    b: 0,
+  };
+  Object.keys(obj).forEach((key) => {
+    obj[key] = Math.floor(Math.random() * 256);
+  });
+  return `rgb(${obj.r},${obj.g},${obj.b})`;
+}
+</script>
+
+<style lang="scss" scoped>
+.land_area_all {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  height: 100%;
+  ._left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    ._circle {
+      width: 80%;
+      aspect-ratio: 1/1;
+      border-radius: 50%;
+      background: url('../../../assets/images/land/countCircleBG.png') no-repeat center center / cover;
+    }
+    ._text {
+      width: 100%;
+      height: 40px;
+      background: url('../../../assets/images/land/countTextBG.png') no-repeat center center / cover;
+      text-align: center;
+      line-height: 40px;
+    }
+  }
+  ._right {
+    height: 100%;
+    overflow-y: auto;
+    .list_item {
+      padding: 0 24px;
+      position: relative;
+      display: flex;
+      grid-template-columns: 60% 40%;
+      justify-content: space-between;
+      align-items: center;
+      height: 32px;
+      color: #fff;
+      .active {
+        background-color: rgba($color: #008f32, $alpha: 0.4);
+        box-shadow: 0 0 1px rgba($color: #008f32, $alpha: 08);
+        ._label,
+        ._value {
+          transform: scale(1.2);
+        }
+      }
+      ._label {
+        ._spot {
+          display: inline-block;
+          position: absolute;
+          left: 8px;
+          top: 50%;
+          transform: translateY(-25%);
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+        }
+      }
+      ._value {
+        text-align: right;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/land/index.vue b/src/views/land/index.vue
index 33dc092..4182329 100644
--- a/src/views/land/index.vue
+++ b/src/views/land/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-row style="width: 100%; height: 100%" class="data-home-index">
+  <el-row class="data-home-index">
     <el-col :span="6" class="left-charts">
       <div class="left-charts-item">
         <customBack top-title="耕地面积统计" :top-postion="'left'">
@@ -28,9 +28,9 @@
     </el-col>
     <el-col :span="6" class="right-charts">
       <div class="right-charts-item">
-        <customBack top-title="农用地数据统计" :top-postion="'right'">
+        <customBack top-title="全县耕地面积" :top-postion="'right'">
           <template #back>
-            <landuseCharts></landuseCharts>
+            <LandAera />
           </template>
         </customBack>
       </div>
@@ -59,9 +59,12 @@ import landareaCharts from './components/landareaCharts.vue';
 import landCirculation from './components/landCirculation.vue';
 import landPlan from './components/landPlan.vue';
 import landPatrol from './components/landPatrol.vue';
+import LandAera from './components/LandAera.vue';
 </script>
 <style lang="scss" scoped>
 .data-home-index {
+  width: 100%;
+  height: 100%;
   .left-charts {
     display: flex;
     justify-content: space-around;