toid-client/src/views/index.vue

<template>
  <div >
    <div class="flex-container">
      <h2>欢迎进入传染病溯源预测系统</h2>
    </div>
    <div class="button-container">

      <el-button size="mini" plain @click="godata" >样本管理</el-button>
      <el-button size="mini" plain @click="godata2" >解读中心</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
    }
  },
  methods: {
    godata() {
      this.$router.push({
        path: '/sample/sampleInfo'
      });
    },
    godata2() {
      this.$router.push({
        path: '/read/sampleExperiment'
      });
    }
  }
}
</script>
<style scoped="scoped">
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh; /* 使容器高度占满整个视口 */
}
.button-container{
  display: flex;
  justify-content: center;
  margin-top:-35vh;
}
</style>