首页初始化

src/views/index.vue

@@ -1,6 +1,25 @@
 <template>
-  <div class="dashboard-editor-container">
-    home
+  <div class="index_page">
+    <el-container>
+      <div class="img_box">
+        <img src="@/assets/image/toubu.png" alt="" />
+      </div>
+      <!-- 整体宽度 -->
+      <div class="content">
+        <!-- 头部 -->
+        <div class="header">
+          <div class="login">
+            <el-button type="text" @click="aaa">登录</el-button>
+            <i class="mark">|</i>
+            <el-button type="text" @click="aaa">注册</el-button>
+          </div>
+        </div>
+      </div>
+      <!-- <el-footer>
+        <el-button >登录</el-button>
+        <el-button v-for="item in 30" :key="item">注册</el-button>
+      </el-footer> -->
+    </el-container>
   </div>
 </template>
 
@@ -10,11 +29,45 @@ export default {
   data() {
     return {};
   },
-  methods: {}
+  methods: {
+    aaa() {
+      this.$router.push({ path: '/login' });
+    }
+  }
 };
 </script>
 
 <style lang="scss" scoped>
+.index_page {
+  padding-top: 200px;
+  .img_box {
+    width: 100%;
+    height: 750px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  .header {
+    height: 206px;
+    background-image: url(../assets/image/01.png);
+    .login {
+      text-align: right;
+      padding-right: 100px;
+      .el-button {
+        font-size: 16px;
+        color: #4097e7;
+      }
+      .mark {
+        width: 1px;
+        color: #dcdcdc;
+        margin: 0 14px;
+      }
+    }
+  }
+}
+
 @media (max-width: 1024px) {
   .chart-wrapper {
     padding: 8px;