App.vue 3.65 KB
<!--
 * @Author: jiangbotao
 * @Date: 2019-12-03 22:31:08
 * @LastEditors: jiangbotao
 * @LastEditTime: 2019-12-14 00:35:28
 * @FilePath: \superglobevue\src\App.vue
 -->
<template>
<a-layout id="components-layout-demo-top-side-2">
    <a-layout-header class="header">
      <a-icon type="compass" />&nbsp;&nbsp;温州项目VUE 3DMap示例(v10.0)
      <a-menu
        theme="dark"
        mode="horizontal"
        :defaultSelectedKeys="['2']"
        :style="{ lineHeight: '64px' }"
      >
      </a-menu>
    </a-layout-header>
    <a-layout>
      <a-layout-sider width="200" style="background: #fff">
        <a-menu
          mode="inline"
          :defaultSelectedKeys="['1']"
          :defaultOpenKeys="['sub1']"
          :style="{ height: '100%', borderRight: 0 }"
        >
          <a-sub-menu key="sub1">
            <span slot="title"><a-icon type="user" />3D展示</span>
            <a-menu-item key="1_1"><router-link :to="'/'">建筑物白模</router-link></a-menu-item>
            <a-menu-item key="1_2"><router-link :to="'/tdt'">天地图</router-link></a-menu-item>
            <a-menu-item key="1_3"><router-link :to="'/changeview'">固定视图</router-link></a-menu-item>
            <a-menu-item key="1_4"><router-link :to="'/split'">多视图展示</router-link></a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub2">
            <span slot="title"><a-icon type="laptop" />倾斜摄影</span>
            <a-menu-item key="2_1"><router-link :to="'/ms3m'">多模型图层</router-link></a-menu-item>
            <a-menu-item key="2_2"><router-link :to="'/s3m'">倾斜摄影数据</router-link></a-menu-item>
            <a-menu-item key="2_3"><router-link :to="'/s3m_single_box'">单体化查询1</router-link></a-menu-item>
            <a-menu-item key="2_4"><router-link :to="'/s3m_single'">单体化查询2</router-link></a-menu-item>
            <a-menu-item key="2_5"><router-link :to="'/hyp'">大场景图层淹没</router-link></a-menu-item>
          </a-sub-menu>
          <a-sub-menu key="sub3">
            <span slot="title"><a-icon type="notification" />空间分析与查询</span>
            <a-menu-item key="9"><router-link :to="'/fire'">火灾分析</router-link></a-menu-item>
            <a-menu-item key="10"><router-link :to="'/underground'">地面开挖</router-link></a-menu-item>
            <a-menu-item key="11"><router-link :to="'/ymo'">地形淹没分析</router-link></a-menu-item>
            <a-menu-item key="12"><router-link :to="'/spatial1'">空间点查询</router-link></a-menu-item>
            <a-menu-item key="13"><router-link :to="'/spatial2'">空间面查询</router-link></a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>
      <a-layout style="padding: 10px 10px 10px 10px">
        <a-layout-content :style="{ background: '#fff', padding: '12px', margin: 0, minHeight: '500px' }">
          <div id="app" style="position: relative; width:100%;">
            <router-view/>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </a-layout>
  <!-- <div id="app">
    <router-view/>
  </div> -->
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      collapsed: false,
    };
  },
}
</script>

<style lang="scss">
  .ant-layout-header {
    height: 64px;
    padding: 0 50px;
    line-height: 64px;
    background: #0b5296;
    color: white;
    font-size: 30px;
    border-bottom: 2px solid #bb5905;
  }
  .ant-layout {
    height: 100%;
  }
  #components-layout-demo-top-side-2 .logo {
    width: 120px;
    height: 31px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px 28px 16px 0;
    float: left;
  }
  #app{
    height: 100%;
  }
</style>