diff --git a/src/assets/scss/index.scss b/src/assets/scss/index.scss
index e2c7683fc0dfe1707c2790e1b23e00b369f31dcc..8a16d8bfc45c8bdf1a71262a2babd13a75b5d9be 100644
--- a/src/assets/scss/index.scss
+++ b/src/assets/scss/index.scss
@@ -13,7 +13,7 @@
     width: 100%;
     height: 100%;
     padding: 16px 16px 0 16px;
-    background-image: url("../assets/pageBg.png");
+    background-image: url("~@/assets/pageBg.png");
     background-size: cover;
     background-position: center center;
   }
diff --git a/src/views/bottomLeft.vue b/src/layouts/layout1/bottomLeft.vue
similarity index 100%
rename from src/views/bottomLeft.vue
rename to src/layouts/layout1/bottomLeft.vue
diff --git a/src/views/bottomRight.vue b/src/layouts/layout1/bottomRight.vue
similarity index 100%
rename from src/views/bottomRight.vue
rename to src/layouts/layout1/bottomRight.vue
diff --git a/src/views/center.vue b/src/layouts/layout1/center.vue
similarity index 100%
rename from src/views/center.vue
rename to src/layouts/layout1/center.vue
diff --git a/src/views/centerLeft1.vue b/src/layouts/layout1/centerLeft1.vue
similarity index 100%
rename from src/views/centerLeft1.vue
rename to src/layouts/layout1/centerLeft1.vue
diff --git a/src/views/centerLeft2.vue b/src/layouts/layout1/centerLeft2.vue
similarity index 100%
rename from src/views/centerLeft2.vue
rename to src/layouts/layout1/centerLeft2.vue
diff --git a/src/views/centerRight1.vue b/src/layouts/layout1/centerRight1.vue
similarity index 100%
rename from src/views/centerRight1.vue
rename to src/layouts/layout1/centerRight1.vue
diff --git a/src/views/centerRight2.vue b/src/layouts/layout1/centerRight2.vue
similarity index 100%
rename from src/views/centerRight2.vue
rename to src/layouts/layout1/centerRight2.vue
diff --git a/src/layouts/layout1/index.vue b/src/layouts/layout1/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a1c88b6bd23161a890c152d2af92445246b8943d
--- /dev/null
+++ b/src/layouts/layout1/index.vue
@@ -0,0 +1,152 @@
+<template>
+  <div id="index" ref="appRef">
+    <div class="bg">
+      <dv-loading v-if="loading">Loading...</dv-loading>
+      <div v-else class="host-body">
+        <div class="d-flex jc-center">
+          <dv-decoration-10 class="dv-dec-10" />
+          <div class="d-flex jc-center">
+            <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
+            <div class="title">
+              <span class="title-text">大数据可视化平台</span>
+              <dv-decoration-6
+                class="dv-dec-6"
+                :reverse="true"
+                :color="['#50e3c2', '#67a1e5']"
+              />
+            </div>
+            <dv-decoration-8
+              class="dv-dec-8"
+              :reverse="true"
+              :color="['#568aea', '#000000']"
+            />
+          </div>
+          <dv-decoration-10 class="dv-dec-10-s" />
+        </div>
+
+        <!-- 第二行 -->
+        <div class="d-flex jc-between px-2">
+          <div class="d-flex aside-width">
+            <div class="react-left ml-4 react-l-s">
+              <span class="react-before"></span>
+              <span class="text">数据分析1</span>
+            </div>
+            <div class="react-right ml-3">
+              <span class="text">数据分析2</span>
+            </div>
+          </div>
+          <div class="d-flex aside-width">
+            <div class="react-right bg-color-blue mr-3">
+              <span class="text fw-b">vue-big-screen</span>
+            </div>
+            <div class="react-right mr-4 react-l-s">
+              <span class="react-after"></span>
+              <span class="text"
+                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
+              >
+            </div>
+          </div>
+        </div>
+
+        <div class="body-box">
+          <!-- 第三行数据 -->
+          <div class="content-box">
+            <div>
+              <dv-border-box-12>
+                <centerLeft1 />
+              </dv-border-box-12>
+            </div>
+            <div>
+              <dv-border-box-12>
+                <centerLeft2 />
+              </dv-border-box-12>
+            </div>
+            <!-- 中间 -->
+            <div>
+              <center />
+            </div>
+            <!-- 中间 -->
+            <div>
+              <centerRight2 />
+            </div>
+            <div>
+              <dv-border-box-13>
+                <centerRight1 />
+              </dv-border-box-13>
+            </div>
+          </div>
+
+          <!-- 第四行数据 -->
+          <div class="bototm-box">
+            <dv-border-box-13>
+              <bottomLeft />
+            </dv-border-box-13>
+            <dv-border-box-12>
+              <bottomRight />
+            </dv-border-box-12>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import drawMixin from "@/utils/drawMixin";
+import { formatTime } from '@/utils/index.js'
+import centerLeft1 from './centerLeft1'
+import centerLeft2 from './centerLeft2'
+import centerRight1 from './centerRight1'
+import centerRight2 from './centerRight2'
+import center from './center'
+import bottomLeft from './bottomLeft'
+import bottomRight from './bottomRight'
+
+export default {
+  mixins: [ drawMixin ],
+  data() {
+    return {
+      timing: null,
+      loading: true,
+      dateDay: null,
+      dateYear: null,
+      dateWeek: null,
+      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
+    }
+  },
+  components: {
+    centerLeft1,
+    centerLeft2,
+    centerRight1,
+    centerRight2,
+    center,
+    bottomLeft,
+    bottomRight
+  },
+  mounted() {
+    this.timeFn()
+    this.cancelLoading()
+  },
+  beforeDestroy () {
+    clearInterval(this.timing)
+  },
+  methods: {
+    timeFn() {
+      this.timing = setInterval(() => {
+        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
+        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
+        this.dateWeek = this.weekday[new Date().getDay()]
+      }, 1000)
+    },
+    cancelLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 500)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+@import '@/assets/scss/index.scss';
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 47f8d54881c0b0c2645c89392f722b9658e13079..2813c583e3869069f057801bdaf49f81eca7a6b6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,7 +9,7 @@ const routes = [{
   component: () => import('../views/index.vue')
 }]
 const router = new VueRouter({
-  mode: "history",
+  // mode: "history",
   routes
 })
 
diff --git a/src/views/index.vue b/src/views/index.vue
index 1511b31145eddb396b1a34ec67c69034226699d1..a39827940c12e7eb8f1686582be3974556f2aade 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,152 +1,22 @@
 <template>
-  <div id="index" ref="appRef">
-    <div class="bg">
-      <dv-loading v-if="loading">Loading...</dv-loading>
-      <div v-else class="host-body">
-        <div class="d-flex jc-center">
-          <dv-decoration-10 class="dv-dec-10" />
-          <div class="d-flex jc-center">
-            <dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" />
-            <div class="title">
-              <span class="title-text">大数据可视化平台</span>
-              <dv-decoration-6
-                class="dv-dec-6"
-                :reverse="true"
-                :color="['#50e3c2', '#67a1e5']"
-              />
-            </div>
-            <dv-decoration-8
-              class="dv-dec-8"
-              :reverse="true"
-              :color="['#568aea', '#000000']"
-            />
-          </div>
-          <dv-decoration-10 class="dv-dec-10-s" />
-        </div>
-
-        <!-- 第二行 -->
-        <div class="d-flex jc-between px-2">
-          <div class="d-flex aside-width">
-            <div class="react-left ml-4 react-l-s">
-              <span class="react-before"></span>
-              <span class="text">数据分析1</span>
-            </div>
-            <div class="react-right ml-3">
-              <span class="text">数据分析2</span>
-            </div>
-          </div>
-          <div class="d-flex aside-width">
-            <div class="react-right bg-color-blue mr-3">
-              <span class="text fw-b">vue-big-screen</span>
-            </div>
-            <div class="react-right mr-4 react-l-s">
-              <span class="react-after"></span>
-              <span class="text"
-                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
-              >
-            </div>
-          </div>
-        </div>
-
-        <div class="body-box">
-          <!-- 第三行数据 -->
-          <div class="content-box">
-            <div>
-              <dv-border-box-12>
-                <centerLeft1 />
-              </dv-border-box-12>
-            </div>
-            <div>
-              <dv-border-box-12>
-                <centerLeft2 />
-              </dv-border-box-12>
-            </div>
-            <!-- 中间 -->
-            <div>
-              <center />
-            </div>
-            <!-- 中间 -->
-            <div>
-              <centerRight2 />
-            </div>
-            <div>
-              <dv-border-box-13>
-                <centerRight1 />
-              </dv-border-box-13>
-            </div>
-          </div>
-
-          <!-- 第四行数据 -->
-          <div class="bototm-box">
-            <dv-border-box-13>
-              <bottomLeft />
-            </dv-border-box-13>
-            <dv-border-box-12>
-              <bottomRight />
-            </dv-border-box-12>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<Layout1></Layout1>
 </template>
 
 <script>
-import drawMixin from "../utils/drawMixin";
-import { formatTime } from '../utils/index.js'
-import centerLeft1 from './centerLeft1'
-import centerLeft2 from './centerLeft2'
-import centerRight1 from './centerRight1'
-import centerRight2 from './centerRight2'
-import center from './center'
-import bottomLeft from './bottomLeft'
-import bottomRight from './bottomRight'
-
+import Layout1 from '@/layouts/layout1/index'
 export default {
-  mixins: [ drawMixin ],
-  data() {
-    return {
-      timing: null,
-      loading: true,
-      dateDay: null,
-      dateYear: null,
-      dateWeek: null,
-      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
-    }
-  },
-  components: {
-    centerLeft1,
-    centerLeft2,
-    centerRight1,
-    centerRight2,
-    center,
-    bottomLeft,
-    bottomRight
-  },
-  mounted() {
-    this.timeFn()
-    this.cancelLoading()
-  },
-  beforeDestroy () {
-    clearInterval(this.timing)
-  },
-  methods: {
-    timeFn() {
-      this.timing = setInterval(() => {
-        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
-        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
-        this.dateWeek = this.weekday[new Date().getDay()]
-      }, 1000)
-    },
-    cancelLoading() {
-      setTimeout(() => {
-        this.loading = false
-      }, 500)
-    }
-  }
+	name: 'BigScreenVueDatavIndex',
+	components: {
+		Layout1,
+	},
+	data() {
+		return {}
+	},
+
+	mounted() {},
+
+	methods: {},
 }
 </script>
 
-<style lang="scss">
-@import '../assets/scss/index.scss';
-</style>
+<style lang="scss" scoped></style>