资源一张图基本布局

src/views/gis/business/main.scss

@@ -1,5 +1,6 @@
 .__gis-business-main_title {
-  line-height: 50px;
+  display: flex;
+  align-items: center;
   height: 50px;
   font-size: 18px;
   font-family: PingFang SC, PingFang SC;

src/views/gis/business/resources/index.vue

@@ -1,5 +1,25 @@
 <template>
-  资源一张图
+  <BusinessMainCom title="资源一张图">
+    <div class="resources">
+      <div class="__gis-business-main_title">
+        类型分布
+        <div class="area">
+          <CusFormColumn
+              labelWidth="50"
+              :span="24"
+              link="select"
+              label="区域:"
+              static
+              v-model:param="area"
+              :options="[]"
+          />
+        </div>
+      </div>
+      <FocusContentCom class="one">1</FocusContentCom>
+      <div class="__gis-business-main_title">全省TOP10</div>
+      <FocusContentCom class="two">2</FocusContentCom>
+    </div>
+  </BusinessMainCom>
 </template>
 
 <script lang="ts">
@@ -18,17 +38,24 @@ import {
 import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
+import BusinessMainCom from '../common/business-main.vue'
+import FocusContentCom from '../common/focus-content.vue'
 
 export default defineComponent({
   name: '',
-  components: {},
+  components: {
+    BusinessMainCom,
+    FocusContentCom,
+  },
   props: {},
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    const state = reactive({
+      area: ''
+    })
     onMounted(() => {
     })
     return {
@@ -39,4 +66,23 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@import "../main";
+.resources {
+  flex: 1;
+  padding: 0 12px 10px 12px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .area {
+    margin-left: auto;
+    height: 36px;
+    width: 200px;
+  }
+  .one {
+    height: 410px;
+  }
+  .two {
+    flex: 1;
+  }
+}
 </style>