组件布局

src/components/pannel/index.html

@@ -0,0 +1,27 @@
+<div class="pannel" :style="style" :class="[bkClass]">
+  <div class="header_box">
+    <div class="top_line">
+      <div class="left_sign"></div>
+      <div class="right_sign"></div>
+    </div>
+    <div class="header row align_item_center">
+      <div v-if="title" class="title_bk row align_item_center">
+        <i class="icon"></i>
+        <p>{{title}}</p>
+      </div>
+      <div class="more">
+        <slot name="header"></slot>
+      </div>
+    </div>
+    <div class="light"></div>
+  </div>
+  <div class="body">
+    <div>
+      <slot></slot>
+    </div>
+    <div class="bottom_line">
+      <div class="left_sign"></div>
+      <div class="right_sign"></div>
+    </div>
+  </div>
+</div>

src/components/pannel/index.js

@@ -0,0 +1,42 @@
+export default {
+  props: {
+    // 定义标题
+    title: {
+      type: String,
+      default: '我是标题'
+    },
+    bkClass: {
+      type: String,
+      default: 'bk_normal'
+    },
+    // 定义跳转页面url
+    uri: {
+      type: String,
+      default: ''
+    },
+    // 定义组件高度
+    height: {
+      type: String,
+      default: '300'
+    },
+    // 定义组件高度
+    width: {
+      type: String,
+      default: '500'
+    }
+  },
+  computed: {
+    style: function () {
+      return {
+        height: this.height + 'px',
+        width: this.width + 'px'
+      };
+    }
+  },
+  data () {
+    return {
+    };
+  },
+  methods: {
+  }
+};

src/components/pannel/index.scss

@@ -0,0 +1,131 @@
+.pannel {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  // 頭部區域
+  .header_box {
+    position: relative;
+    height: 35px;
+    overflow: visible !important;
+
+    .top_line {
+      display: flex;
+      justify-content: space-between;
+      background-color: rgba(22, 60, 114, 1);
+      width: 100%;
+      height: 2px;
+
+      .left_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+
+      .right_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+    }
+
+    .header {
+      margin-top: 2px;
+      height: 32px;
+      background: rgba(8, 33, 71, 1);
+
+      .title_bk {
+        font-style: italic;
+        font-weight: 600;
+        height: 50px;
+        margin-left: 20px;
+        line-height: 32px;
+        text-align: center;
+
+        .icon {
+          display: block;
+          background: url('./icon.png');
+          background-size: 100% 100%;
+          width: 18px;
+          height: 18px;
+        }
+      }
+
+      .more {
+        margin-right: 20px;
+      }
+    }
+
+    .light {
+      position: absolute;
+      bottom: -15px;
+      left: 30px;
+      background: url('./light.png');
+      background-size: 100% 100%;
+      width: 280px;
+      height: 30px;
+      animation: lightmove 4s infinite;
+    }
+  }
+
+  // 内容区域
+  .body {
+    margin: 2px;
+    padding: 10px;
+    width: 100%;
+    position: relative;
+    flex: 1;
+    background-color: rgba(11, 28, 58, 1);
+
+    .bottom_line {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      justify-content: space-between;
+      background-color: rgba(22, 60, 114, 1);
+      width: 100%;
+      height: 2px;
+
+      .left_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+
+      .right_sign {
+        height: 2px;
+        width: 13px;
+        background-color: rgba(53, 143, 255, 1);
+      }
+    }
+
+    div {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+@keyframes lightmove {
+
+  /* 动画关键帧 */
+  0% {
+    opacity: 1;
+    transform: translateX(0px);
+    /* 样式 */
+  }
+
+  50% {
+    opacity: 0.2;
+    transform: translateX(170px);
+  }
+
+  /* 。。。 */
+  100% {
+    opacity: 1;
+    transform: translateX(0px);
+    /* 样式 */
+  }
+}

src/components/pannel/index.vue

@@ -0,0 +1,3 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped></style>

src/style/_base.scss

@@ -18,6 +18,27 @@ body {
   overflow-y: auto;
 }
 
+.page {
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+  border: 1px solid red;
+
+  .left {
+    position: absolute;
+    left: 20px;
+    top: 100px;
+    bottom: 20px;
+  }
+
+  .right {
+    position: absolute;
+    right: 20px;
+    top: 100px;
+    bottom: 20px;
+  }
+}
+
 .scrollbar::-webkit-scrollbar {
   width: 0;
   height: 0;

src/style/layout.scss

@@ -5,6 +5,11 @@
 .col {
   display: flex;
   flex-direction: column;
+
+}
+
+.space_between {
+  justify-content: space-between;
 }
 
 .flex_1 {
@@ -13,5 +18,4 @@
 
 .align_item_center {
   align-items: center;
-}
-
+}

src/views/layer/comps/left/bottom/1/index.html

@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/left/bottom/1/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/left/bottom/1/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/left/bottom/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/left/bottom/2/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/left/bottom/2/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/left/middle/1/index.html

@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/left/middle/1/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/left/middle/1/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/left/middle/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/left/middle/2/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/left/middle/2/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/left/top/1/index.html

@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/left/top/1/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/left/top/1/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/left/top/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/left/top/2/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/left/top/2/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/right/bottom/1/index.html

@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/right/bottom/1/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/right/bottom/1/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/right/bottom/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/right/bottom/2/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/right/bottom/2/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/right/middle/1/index.html

@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/right/middle/1/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/right/middle/1/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/right/middle/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/right/middle/2/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/right/middle/2/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/right/top/1/index.html

@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/right/top/1/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/right/top/1/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/comps/right/top/2/index.html

@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>

src/views/layer/comps/right/top/2/index.js

@@ -0,0 +1,17 @@
+import Pannel from '@/components/pannel/index.vue';
+
+export default {
+  components: {
+    Pannel
+  },
+  data () {
+    return {
+    };
+  },
+  created () {
+  },
+  mounted () {
+  },
+  methods: {
+  }
+};

src/views/layer/comps/right/top/2/index.vue

@@ -0,0 +1,4 @@
+<template src='./index.html'/>
+<script lang='js' src='./index.js'></script>
+<style lang='scss' src='./index.scss' scoped>
+</style>

src/views/layer/data.js

@@ -0,0 +1,26 @@
+export const comps = {
+  '1': {
+    'left': [
+      'Left11',
+      'Left21',
+      'Left31',
+    ],
+    'right': [
+      'Right11',
+      'Right21',
+      'Right31',
+    ]
+  },
+  '2': {
+    'left': [
+      '',
+      '',
+      ''
+    ],
+    'right': [
+      '',
+      '',
+      ''
+    ]
+  }
+}

src/views/layer/index.html

@@ -1,3 +1,10 @@
-<div class="">
-  项目初始化
+<div class="page">
+  <!-- 项目初始化 -->
+  <div class="left col space_between">
+    <!-- <Left11></Left11> -->
+    <component :is="item" v-for="(item, index) in currentComp.left" :key="index"></component>
+  </div>
+  <div class="right col space_between">
+    <component :is="item" v-for="(item, index) in currentComp.right" :key="index"></component>
+  </div>
 </div>

src/views/layer/index.js

@@ -1,10 +1,32 @@
+import Left11 from './comps/left/top/1/index.vue';
+import Left21 from './comps/left/middle/1/index.vue';
+import Left31 from './comps/left/bottom/1/index.vue';
+import Right11 from './comps/right/top/1/index.vue';
+import Right21 from './comps/right/middle/1/index.vue';
+import Right31 from './comps/right/bottom/1/index.vue';
+
+
+import { comps } from './data.js'
 export default {
   components: {
+    Left11,
+    Left21,
+    Left31,
+    Right11,
+    Right21,
+    Right31
   },
   data () {
     return {
+      tab: '1',
+      comps
     };
   },
+  computed: {
+    currentComp: function () {
+      return this.comps[this.tab]
+    }
+  },
   created () {
   },
   mounted () {