样式

src/App.vue

@@ -30,4 +30,5 @@ export default {
   display:flex;
 justify-content: flex-end;
 }
+
 </style>

src/assets/style/public-class.scss

@@ -65,3 +65,11 @@ $sizes: (0, 5, 10, 15, 20);
 .#{$prefix}-pr { padding-right: 20px !important; }
 .#{$prefix}-pb { padding-bottom: 20px !important; }
 .#{$prefix}-pl { padding-left: 20px !important; }
+
+//树形菜单
+.el-tree{
+  // background:#163d79 !important;
+}
+.el-tree-node{
+  background: #163d79;
+}

src/assets/style/theme/theme-base.scss

@@ -288,12 +288,15 @@
               top: 0px;
               right: 20px;
               bottom: 20px;
-              left: 20px;
+              left: 0px;
               display: flex;
               flex-direction: column;
               overflow: hidden;
               .d2-container-full__header {
-                padding: 20px;
+                // padding: 20px;
+                padding: 10px;
+                background: #004a93;
+                color:#fff;
               }
               .d2-container-full__body {
                 flex-grow: 1;
@@ -301,6 +304,7 @@
                 padding: 20px 20px;
                 overflow: auto;
                 position: relative;
+                background-color: #09163a;
               }
               .d2-container-full__footer {
                 padding: 20px;

src/assets/style/theme/theme.scss

@@ -302,11 +302,13 @@
           // [组件]
           // d2-container-full 填充型
           .d2-container-full {
-            border: $theme-container-border-outer;
+            // border: $theme-container-border-outer;
+            border:none;
             border-top: none;
             border-bottom: none;
             .d2-container-full__header {
-              border-bottom: $theme-container-border-inner;
+              // border-bottom: $theme-container-border-inner;
+              border-bottom: none;
               background: $theme-container-header-footer-background-color;
             }
             .d2-container-full__body {

src/components/d2-container/components/d2-container-full.vue

@@ -29,3 +29,7 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+
+  
+</style>

src/layout/header-aside/components/footer/index.vue

@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <div class="foot">Copyright &nbsp; © &nbsp; 紫光软件 All&nbsp;Rights&nbsp;Reserved</div>
+    </div>
+</template>
+<script>
+export default {
+    name:"Foot"
+}
+</script>
+<style lang="scss" scoped>
+    .foot{
+        height:30px;
+        line-height:30px;
+        text-align:center;
+        // z-index: 999;
+        background:#002049;
+        font-size:14px;
+        color:#fff;
+    }
+</style>

src/layout/header-aside/layout.vue

@@ -1,11 +1,20 @@
 <template>
-  <div class="d2-layout-header-aside-group" :style="styleLayoutMainGroup" :class="{grayMode: grayActive}">
+  <div
+    class="d2-layout-header-aside-group"
+    :style="styleLayoutMainGroup"
+    :class="{ grayMode: grayActive }"
+  >
     <!-- 半透明遮罩 -->
     <div class="d2-layout-header-aside-mask"></div>
     <!-- 主体内容 -->
     <div class="d2-layout-header-aside-content" flex="dir:top">
       <!-- 顶栏 -->
-      <div class="d2-theme-header" :style="{ opacity: this.searchActive ? 0.5 : 1 }" flex-box="0" flex>
+      <div
+        class="d2-theme-header"
+        :style="{ opacity: this.searchActive ? 0.5 : 1 }"
+        flex-box="0"
+        flex
+      >
         <!-- <router-link
           to="/index"
           :class="{'logo-group': true, 'logo-transition': asideTransition}"
@@ -14,18 +23,15 @@
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
         </router-link> -->
-        <div
-         class="imgFather"
-          
-          flex-box="0">
-          <img src="../../assets/images/logo.png" alt="">
+        <div class="imgFather" flex-box="0">
+          <img src="../../assets/images/logo.png" alt="" />
           <!-- <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`"> -->
         </div>
         <!-- <div class="toggle-aside-btn" @click="handleToggleAside" flex-box="0">
           <d2-icon name="bars"/>
         </div> -->
-        <d2-menu-header flex-box="1"/>
+        <d2-menu-header flex-box="1" />
         <!-- 顶栏右侧 -->
         <div class="d2-header-right" flex-box="0">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
@@ -36,7 +42,7 @@
           <d2-header-size/>
           <d2-header-locales/>
           <d2-header-color/> -->
-          <d2-header-user/>
+          <d2-header-user />
         </div>
       </div>
       <!-- 下面 主体 -->
@@ -57,12 +63,16 @@
           <!-- 搜索 -->
           <transition name="fade-scale">
             <div v-if="searchActive" class="d2-theme-container-main-layer" flex>
-              <d2-panel-search ref="panelSearch" @close="searchPanelClose"/>
+              <d2-panel-search ref="panelSearch" @close="searchPanelClose" />
             </div>
           </transition>
           <!-- 内容 -->
           <transition name="fade-scale">
-            <div v-if="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+            <div
+              v-if="!searchActive"
+              class="d2-theme-container-main-layer"
+              flex="dir:top"
+            >
               <!-- tab -->
               <!-- <div class="d2-theme-container-main-header" flex-box="0">
                 <d2-tabs/>
@@ -75,37 +85,41 @@
                   </keep-alive>
                 </transition>
               </div>
+               <Foot></Foot>
             </div>
           </transition>
+        
         </div>
+
+            
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import d2MenuSide from './components/menu-side'
-import d2MenuHeader from './components/menu-header'
-import d2Tabs from './components/tabs'
+import d2MenuSide from "./components/menu-side";
+import d2MenuHeader from "./components/menu-header";
+import d2Tabs from "./components/tabs";
+import Foot from "./components/footer";
 // import d2HeaderFullscreen from './components/header-fullscreen'
 // import d2HeaderLocales from './components/header-locales'
 // import d2HeaderSearch from './components/header-search'
 // import d2HeaderSize from './components/header-size'
 // import d2HeaderTheme from './components/header-theme'
-import d2HeaderUser from './components/header-user'
+import d2HeaderUser from "./components/header-user";
 // import d2HeaderLog from './components/header-log'
 // import d2HeaderColor from './components/header-color'
-import { mapState, mapGetters, mapActions } from 'vuex'
-import mixinSearch from './mixins/search'
+import { mapState, mapGetters, mapActions } from "vuex";
+import mixinSearch from "./mixins/search";
 export default {
-  name: 'd2-layout-header-aside',
-  mixins: [
-    mixinSearch
-  ],
+  name: "d2-layout-header-aside",
+  mixins: [mixinSearch],
   components: {
     d2MenuSide,
     d2MenuHeader,
     d2Tabs,
+    Foot,
     // d2HeaderFullscreen,
     // d2HeaderLocales,
     // d2HeaderSearch,
@@ -115,42 +129,44 @@ export default {
     // d2HeaderLog,
     // d2HeaderColor
   },
-  data () {
+  data() {
     return {
       // [侧边栏宽度] 正常状态
-      asideWidth: '200px',
+      asideWidth: "200px",
       // [侧边栏宽度] 折叠状态
-      asideWidthCollapse: '65px'
-    }
+      asideWidthCollapse: "65px",
+    };
   },
   computed: {
-    ...mapState('d2admin', {
-      keepAlive: state => state.page.keepAlive,
-      grayActive: state => state.gray.active,
-      transitionActive: state => state.transition.active,
-      asideCollapse: state => state.menu.asideCollapse,
-      asideTransition: state => state.menu.asideTransition
+    ...mapState("d2admin", {
+      keepAlive: (state) => state.page.keepAlive,
+      grayActive: (state) => state.gray.active,
+      transitionActive: (state) => state.transition.active,
+      asideCollapse: (state) => state.menu.asideCollapse,
+      asideTransition: (state) => state.menu.asideTransition,
     }),
-    ...mapGetters('d2admin', {
-      themeActiveSetting: 'theme/activeSetting'
+    ...mapGetters("d2admin", {
+      themeActiveSetting: "theme/activeSetting",
     }),
     /**
      * @description 用来实现带参路由的缓存
      */
-    routerViewKey () {
+    routerViewKey() {
       // 默认情况下 key 类似 __transition-n-/foo
       // 这里的字符串操作是为了最终 key 的格式和原来相同 类似 __transition-n-__stamp-time-/foo
-      const stamp = this.$route.meta[`__stamp-${this.$route.path}`] || ''
-      return `${stamp ? `__stamp-${stamp}-` : ''}${this.$route.path}`
+      const stamp = this.$route.meta[`__stamp-${this.$route.path}`] || "";
+      return `${stamp ? `__stamp-${stamp}-` : ""}${this.$route.path}`;
     },
     /**
      * @description 最外层容器的背景图片样式
      */
-    styleLayoutMainGroup () {
+    styleLayoutMainGroup() {
       return this.themeActiveSetting.backgroundImage
-        ? { backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')` }
-        : {}
-    }
+        ? {
+            backgroundImage: `url('${this.$baseUrl}${this.themeActiveSetting.backgroundImage}')`,
+          }
+        : {};
+    },
   },
   methods: {
     // ...mapActions('d2admin/menu', [
@@ -162,24 +178,24 @@ export default {
     // handleToggleAside () {
     //   this.asideCollapseToggle()
     // }
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss">
 // 注册主题
-@import '~@/assets/style/theme/register.scss';
+@import "~@/assets/style/theme/register.scss";
 //头部导航背景色
-.d2-theme-header{
-  background-image:url(../../assets/images/nav-bg.png)
+.d2-theme-header {
+  background-image: url(../../assets/images/nav-bg.png);
 }
 //整体内容背景色
-.d2-layout-header-aside-group{
-    background-image:url(../../assets/images/bg.png)
+.d2-layout-header-aside-group {
+  background-image: url(../../assets/images/bg.png);
 }
-.imgFather{
+.imgFather {
   display: flex;
   align-items: center;
-  padding-left: 10px;;
+  padding-left: 10px;
 }
 </style>

src/menu/index.js

@@ -44,7 +44,7 @@ export const menuHeader = supplementPath([
   },
   {
     title: '参数设置',
-    icon: 'folder-o',
+    icon: '',
     children: [
       { path: '/hardwareParame', title: '硬件参数' },
       { path: '/scanParame', title: '扫描参数' },

src/views/demo/dataQuery/index.vue

@@ -24,6 +24,9 @@
         <div class="right">
           <!-- <template slot="header">首页/数据查询</template> -->
           <div class="nav">首页/数据查询</div>
+          <div class="right_main">
+            <div class="right_title">数据查询</div>
+            <div class="right_table">
           <el-form :inline="true" :model="formInline" class="demo-form-inline">
             <el-form-item label="扫描时间">
               <el-date-picker
@@ -102,6 +105,8 @@
             :total="pagination.total"
           >
           </el-pagination>
+          </div>
+        </div>
         </div>
       </div>
     </d2-container>
@@ -259,18 +264,35 @@ export default {
   height: 100%;
   display: flex;
   .left {
-    width: 200px;
+    width: 250px;
     height: 100%;
-    border-right: 1px solid #ccc;
-    padding-right: 20px;
+   background: #163d79;
+  
   }
   .right {
     margin-left: 20px;
+    width:calc(100% - 250px);
     .nav {
-      margin: 10px 0 20px 0;
-      padding-bottom: 10px;
-      border-bottom: 1px solid #ccc;
+      padding: 10px 0 10px 10px;
+      color:#FFF;
+  
+      background: #004a93;
+    }
+    .right_main{
+      border:1px solid #0a3e6b;
+      background:#112f5d;
+      margin-top:10px;
+      .right_title{
+        color:#FFF;
+        border-bottom:1px solid #0a3e6b;
+        padding:10px;
+    }
+    .right_table{
+       padding:20px;
+    
+    }
     }
+   
   }
 }