From f607bfa181a701b9451c451bfc3ea198ac7439e4 Mon Sep 17 00:00:00 2001
From: yuzongping <835949940@qq.com>
Date: Thu, 5 Jun 2025 14:57:39 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/pannel/icon.png                | Bin 0 -> 298 bytes
 src/components/pannel/index.html              |  27 ++++
 src/components/pannel/index.js                |  42 ++++++
 src/components/pannel/index.scss              | 131 ++++++++++++++++++
 src/components/pannel/index.vue               |   3 +
 src/components/pannel/light.png               | Bin 0 -> 2781 bytes
 src/style/_base.scss                          |  21 +++
 src/style/layout.scss                         |   8 +-
 .../layer/comps/left/bottom/1/index.html      |   3 +
 src/views/layer/comps/left/bottom/1/index.js  |  17 +++
 .../layer/comps/left/bottom/1/index.scss      |   0
 src/views/layer/comps/left/bottom/1/index.vue |   4 +
 .../layer/comps/left/bottom/2/index.html      |   4 +
 src/views/layer/comps/left/bottom/2/index.js  |  17 +++
 .../layer/comps/left/bottom/2/index.scss      |   0
 src/views/layer/comps/left/bottom/2/index.vue |   4 +
 .../layer/comps/left/middle/1/index.html      |   3 +
 src/views/layer/comps/left/middle/1/index.js  |  17 +++
 .../layer/comps/left/middle/1/index.scss      |   0
 src/views/layer/comps/left/middle/1/index.vue |   4 +
 .../layer/comps/left/middle/2/index.html      |   4 +
 src/views/layer/comps/left/middle/2/index.js  |  17 +++
 .../layer/comps/left/middle/2/index.scss      |   0
 src/views/layer/comps/left/middle/2/index.vue |   4 +
 src/views/layer/comps/left/top/1/index.html   |   3 +
 src/views/layer/comps/left/top/1/index.js     |  17 +++
 src/views/layer/comps/left/top/1/index.scss   |   0
 src/views/layer/comps/left/top/1/index.vue    |   4 +
 src/views/layer/comps/left/top/2/index.html   |   4 +
 src/views/layer/comps/left/top/2/index.js     |  17 +++
 src/views/layer/comps/left/top/2/index.scss   |   0
 src/views/layer/comps/left/top/2/index.vue    |   4 +
 .../layer/comps/right/bottom/1/index.html     |   3 +
 src/views/layer/comps/right/bottom/1/index.js |  17 +++
 .../layer/comps/right/bottom/1/index.scss     |   0
 .../layer/comps/right/bottom/1/index.vue      |   4 +
 .../layer/comps/right/bottom/2/index.html     |   4 +
 src/views/layer/comps/right/bottom/2/index.js |  17 +++
 .../layer/comps/right/bottom/2/index.scss     |   0
 .../layer/comps/right/bottom/2/index.vue      |   4 +
 .../layer/comps/right/middle/1/index.html     |   3 +
 src/views/layer/comps/right/middle/1/index.js |  17 +++
 .../layer/comps/right/middle/1/index.scss     |   0
 .../layer/comps/right/middle/1/index.vue      |   4 +
 .../layer/comps/right/middle/2/index.html     |   4 +
 src/views/layer/comps/right/middle/2/index.js |  17 +++
 .../layer/comps/right/middle/2/index.scss     |   0
 .../layer/comps/right/middle/2/index.vue      |   4 +
 src/views/layer/comps/right/top/1/index.html  |   3 +
 src/views/layer/comps/right/top/1/index.js    |  17 +++
 src/views/layer/comps/right/top/1/index.scss  |   0
 src/views/layer/comps/right/top/1/index.vue   |   4 +
 src/views/layer/comps/right/top/2/index.html  |   4 +
 src/views/layer/comps/right/top/2/index.js    |  17 +++
 src/views/layer/comps/right/top/2/index.scss  |   0
 src/views/layer/comps/right/top/2/index.vue   |   4 +
 src/views/layer/data.js                       |  26 ++++
 src/views/layer/index.html                    |  11 +-
 src/views/layer/index.js                      |  22 +++
 59 files changed, 581 insertions(+), 4 deletions(-)
 create mode 100644 src/components/pannel/icon.png
 create mode 100644 src/components/pannel/index.html
 create mode 100644 src/components/pannel/index.js
 create mode 100644 src/components/pannel/index.scss
 create mode 100644 src/components/pannel/index.vue
 create mode 100644 src/components/pannel/light.png
 create mode 100644 src/views/layer/comps/left/bottom/1/index.html
 create mode 100644 src/views/layer/comps/left/bottom/1/index.js
 create mode 100644 src/views/layer/comps/left/bottom/1/index.scss
 create mode 100644 src/views/layer/comps/left/bottom/1/index.vue
 create mode 100644 src/views/layer/comps/left/bottom/2/index.html
 create mode 100644 src/views/layer/comps/left/bottom/2/index.js
 create mode 100644 src/views/layer/comps/left/bottom/2/index.scss
 create mode 100644 src/views/layer/comps/left/bottom/2/index.vue
 create mode 100644 src/views/layer/comps/left/middle/1/index.html
 create mode 100644 src/views/layer/comps/left/middle/1/index.js
 create mode 100644 src/views/layer/comps/left/middle/1/index.scss
 create mode 100644 src/views/layer/comps/left/middle/1/index.vue
 create mode 100644 src/views/layer/comps/left/middle/2/index.html
 create mode 100644 src/views/layer/comps/left/middle/2/index.js
 create mode 100644 src/views/layer/comps/left/middle/2/index.scss
 create mode 100644 src/views/layer/comps/left/middle/2/index.vue
 create mode 100644 src/views/layer/comps/left/top/1/index.html
 create mode 100644 src/views/layer/comps/left/top/1/index.js
 create mode 100644 src/views/layer/comps/left/top/1/index.scss
 create mode 100644 src/views/layer/comps/left/top/1/index.vue
 create mode 100644 src/views/layer/comps/left/top/2/index.html
 create mode 100644 src/views/layer/comps/left/top/2/index.js
 create mode 100644 src/views/layer/comps/left/top/2/index.scss
 create mode 100644 src/views/layer/comps/left/top/2/index.vue
 create mode 100644 src/views/layer/comps/right/bottom/1/index.html
 create mode 100644 src/views/layer/comps/right/bottom/1/index.js
 create mode 100644 src/views/layer/comps/right/bottom/1/index.scss
 create mode 100644 src/views/layer/comps/right/bottom/1/index.vue
 create mode 100644 src/views/layer/comps/right/bottom/2/index.html
 create mode 100644 src/views/layer/comps/right/bottom/2/index.js
 create mode 100644 src/views/layer/comps/right/bottom/2/index.scss
 create mode 100644 src/views/layer/comps/right/bottom/2/index.vue
 create mode 100644 src/views/layer/comps/right/middle/1/index.html
 create mode 100644 src/views/layer/comps/right/middle/1/index.js
 create mode 100644 src/views/layer/comps/right/middle/1/index.scss
 create mode 100644 src/views/layer/comps/right/middle/1/index.vue
 create mode 100644 src/views/layer/comps/right/middle/2/index.html
 create mode 100644 src/views/layer/comps/right/middle/2/index.js
 create mode 100644 src/views/layer/comps/right/middle/2/index.scss
 create mode 100644 src/views/layer/comps/right/middle/2/index.vue
 create mode 100644 src/views/layer/comps/right/top/1/index.html
 create mode 100644 src/views/layer/comps/right/top/1/index.js
 create mode 100644 src/views/layer/comps/right/top/1/index.scss
 create mode 100644 src/views/layer/comps/right/top/1/index.vue
 create mode 100644 src/views/layer/comps/right/top/2/index.html
 create mode 100644 src/views/layer/comps/right/top/2/index.js
 create mode 100644 src/views/layer/comps/right/top/2/index.scss
 create mode 100644 src/views/layer/comps/right/top/2/index.vue
 create mode 100644 src/views/layer/data.js

diff --git a/src/components/pannel/icon.png b/src/components/pannel/icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..aee23d05b047a5f4ddcb5e5108c69892c13b17ec
GIT binary patch
literal 298
zcmV+_0oDGAP)<h;3K|Lk000e1NJLTq000R9000RH1^@s6;E@Ip00001b5ch_0Itp)
z=>Px#<Vi$9R47wbkULHTK@dc%W_BX*uEYfh9P_z_k3m4fB@ib-1V~t9WX=gl2=E19
zBgie`5Fr^O%RAds)+|~Bot64^b#)VcNktXo5y>)1-!X*wik#;*J4PDpHqEGT?jWmv
z&dAx9_Y;;eUVuC&;03fGXOyOt-ZR_+Q&wg*q~q<{Y(++-G<LwJk<Tp6#+1(fLR|vj
z-br<m9=Nk!AA0X=0`8w1FoE>8D2l5tc-gjh1WvYx0u7~010I(lJpDk@9?f0=>}Q>T
wTX}!IBwv4D0HBhFGP^-aABzx9L9Tk|4QK3R<-`TM_5c6?07*qoM6N<$f_CzC@c;k-

literal 0
HcmV?d00001

diff --git a/src/components/pannel/index.html b/src/components/pannel/index.html
new file mode 100644
index 0000000..a9ee2d9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/pannel/index.js b/src/components/pannel/index.js
new file mode 100644
index 0000000..1e1e919
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/components/pannel/index.scss b/src/components/pannel/index.scss
new file mode 100644
index 0000000..69217ee
--- /dev/null
+++ b/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);
+    /* 样式 */
+  }
+}
\ No newline at end of file
diff --git a/src/components/pannel/index.vue b/src/components/pannel/index.vue
new file mode 100644
index 0000000..5ca257a
--- /dev/null
+++ b/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>
diff --git a/src/components/pannel/light.png b/src/components/pannel/light.png
new file mode 100644
index 0000000000000000000000000000000000000000..713895261e845f1749af4b06ff3d02d5b5efa5d8
GIT binary patch
literal 2781
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

literal 0
HcmV?d00001

diff --git a/src/style/_base.scss b/src/style/_base.scss
index 40eafb0..1c9ec78 100644
--- a/src/style/_base.scss
+++ b/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;
diff --git a/src/style/layout.scss b/src/style/layout.scss
index de6df94..1f1fbe9 100644
--- a/src/style/layout.scss
+++ b/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;
-}
-
+}
\ No newline at end of file
diff --git a/src/views/layer/comps/left/bottom/1/index.html b/src/views/layer/comps/left/bottom/1/index.html
new file mode 100644
index 0000000..d3e7f93
--- /dev/null
+++ b/src/views/layer/comps/left/bottom/1/index.html
@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/left/bottom/1/index.js b/src/views/layer/comps/left/bottom/1/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/left/bottom/1/index.scss b/src/views/layer/comps/left/bottom/1/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/left/bottom/1/index.vue b/src/views/layer/comps/left/bottom/1/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/left/bottom/2/index.html b/src/views/layer/comps/left/bottom/2/index.html
new file mode 100644
index 0000000..768c279
--- /dev/null
+++ b/src/views/layer/comps/left/bottom/2/index.html
@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/left/bottom/2/index.js b/src/views/layer/comps/left/bottom/2/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/left/bottom/2/index.scss b/src/views/layer/comps/left/bottom/2/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/left/bottom/2/index.vue b/src/views/layer/comps/left/bottom/2/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/left/middle/1/index.html b/src/views/layer/comps/left/middle/1/index.html
new file mode 100644
index 0000000..d3e7f93
--- /dev/null
+++ b/src/views/layer/comps/left/middle/1/index.html
@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/left/middle/1/index.js b/src/views/layer/comps/left/middle/1/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/left/middle/1/index.scss b/src/views/layer/comps/left/middle/1/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/left/middle/1/index.vue b/src/views/layer/comps/left/middle/1/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/left/middle/2/index.html b/src/views/layer/comps/left/middle/2/index.html
new file mode 100644
index 0000000..768c279
--- /dev/null
+++ b/src/views/layer/comps/left/middle/2/index.html
@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/left/middle/2/index.js b/src/views/layer/comps/left/middle/2/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/left/middle/2/index.scss b/src/views/layer/comps/left/middle/2/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/left/middle/2/index.vue b/src/views/layer/comps/left/middle/2/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/left/top/1/index.html b/src/views/layer/comps/left/top/1/index.html
new file mode 100644
index 0000000..d3e7f93
--- /dev/null
+++ b/src/views/layer/comps/left/top/1/index.html
@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/left/top/1/index.js b/src/views/layer/comps/left/top/1/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/left/top/1/index.scss b/src/views/layer/comps/left/top/1/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/left/top/1/index.vue b/src/views/layer/comps/left/top/1/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/left/top/2/index.html b/src/views/layer/comps/left/top/2/index.html
new file mode 100644
index 0000000..768c279
--- /dev/null
+++ b/src/views/layer/comps/left/top/2/index.html
@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/left/top/2/index.js b/src/views/layer/comps/left/top/2/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/left/top/2/index.scss b/src/views/layer/comps/left/top/2/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/left/top/2/index.vue b/src/views/layer/comps/left/top/2/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/right/bottom/1/index.html b/src/views/layer/comps/right/bottom/1/index.html
new file mode 100644
index 0000000..d3e7f93
--- /dev/null
+++ b/src/views/layer/comps/right/bottom/1/index.html
@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/right/bottom/1/index.js b/src/views/layer/comps/right/bottom/1/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/right/bottom/1/index.scss b/src/views/layer/comps/right/bottom/1/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/right/bottom/1/index.vue b/src/views/layer/comps/right/bottom/1/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/right/bottom/2/index.html b/src/views/layer/comps/right/bottom/2/index.html
new file mode 100644
index 0000000..768c279
--- /dev/null
+++ b/src/views/layer/comps/right/bottom/2/index.html
@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/right/bottom/2/index.js b/src/views/layer/comps/right/bottom/2/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/right/bottom/2/index.scss b/src/views/layer/comps/right/bottom/2/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/right/bottom/2/index.vue b/src/views/layer/comps/right/bottom/2/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/right/middle/1/index.html b/src/views/layer/comps/right/middle/1/index.html
new file mode 100644
index 0000000..d3e7f93
--- /dev/null
+++ b/src/views/layer/comps/right/middle/1/index.html
@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/right/middle/1/index.js b/src/views/layer/comps/right/middle/1/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/right/middle/1/index.scss b/src/views/layer/comps/right/middle/1/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/right/middle/1/index.vue b/src/views/layer/comps/right/middle/1/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/right/middle/2/index.html b/src/views/layer/comps/right/middle/2/index.html
new file mode 100644
index 0000000..768c279
--- /dev/null
+++ b/src/views/layer/comps/right/middle/2/index.html
@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/right/middle/2/index.js b/src/views/layer/comps/right/middle/2/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/right/middle/2/index.scss b/src/views/layer/comps/right/middle/2/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/right/middle/2/index.vue b/src/views/layer/comps/right/middle/2/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/right/top/1/index.html b/src/views/layer/comps/right/top/1/index.html
new file mode 100644
index 0000000..d3e7f93
--- /dev/null
+++ b/src/views/layer/comps/right/top/1/index.html
@@ -0,0 +1,3 @@
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/right/top/1/index.js b/src/views/layer/comps/right/top/1/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/right/top/1/index.scss b/src/views/layer/comps/right/top/1/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/right/top/1/index.vue b/src/views/layer/comps/right/top/1/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/comps/right/top/2/index.html b/src/views/layer/comps/right/top/2/index.html
new file mode 100644
index 0000000..768c279
--- /dev/null
+++ b/src/views/layer/comps/right/top/2/index.html
@@ -0,0 +1,4 @@
+
+<Pannel>
+  
+</Pannel>
\ No newline at end of file
diff --git a/src/views/layer/comps/right/top/2/index.js b/src/views/layer/comps/right/top/2/index.js
new file mode 100644
index 0000000..d3863a7
--- /dev/null
+++ b/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: {
+  }
+};
diff --git a/src/views/layer/comps/right/top/2/index.scss b/src/views/layer/comps/right/top/2/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/views/layer/comps/right/top/2/index.vue b/src/views/layer/comps/right/top/2/index.vue
new file mode 100644
index 0000000..5ac9224
--- /dev/null
+++ b/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>
diff --git a/src/views/layer/data.js b/src/views/layer/data.js
new file mode 100644
index 0000000..e39c9a5
--- /dev/null
+++ b/src/views/layer/data.js
@@ -0,0 +1,26 @@
+export const comps = {
+  '1': {
+    'left': [
+      'Left11',
+      'Left21',
+      'Left31',
+    ],
+    'right': [
+      'Right11',
+      'Right21',
+      'Right31',
+    ]
+  },
+  '2': {
+    'left': [
+      '',
+      '',
+      ''
+    ],
+    'right': [
+      '',
+      '',
+      ''
+    ]
+  }
+}
\ No newline at end of file
diff --git a/src/views/layer/index.html b/src/views/layer/index.html
index 0b71692..5ade84f 100644
--- a/src/views/layer/index.html
+++ b/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>
diff --git a/src/views/layer/index.js b/src/views/layer/index.js
index 513ad4a..684cba7 100644
--- a/src/views/layer/index.js
+++ b/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 () {