jiace-web/src/views/index.vue

<template>
  <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>

<script>
export default {
  name: 'home',
  data() {
    return {};
  },
  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;
  }
}
</style>