IDCDatasync-vue/src/views/dashboard/Analysis.vue

<template>
  <div class="analysisBG">
    <div class="buttonBG">
      <a-row :gutter="20">
        <a-col :span="4" class="clickbutton" @click="openlink('/#/task/index')">
          <div class="buttontext">任务管理</div> 
          <div class="buttonicon"><img src="~@/assets/img/任务管理.png"></div>
        </a-col>
        <a-col :span="4" class="clickbutton" @click="openlink('sjsxybs://test')">
          <div class="buttontext">数据筛选与报送</div> 
          <div class="buttonicon"><img src="~@/assets/img/数据接入.png"></div>
        </a-col>
        <a-col :span="4" class="clickbutton" @click="openlink('/#/datalink/dblink')">
          <div class="buttontext">数据接入</div> 
          <div class="buttonicon"><img src="~@/assets/img/数据导入.png"></div>
        </a-col>
        <a-col :span="4" class="clickbutton" @click="openlink('/#/data/statistics')">
          <div class="buttontext">数据统计</div> 
          <div class="buttonicon"><img src="~@/assets/img/数据统计.png"></div>
        </a-col>
        <a-col :span="4" class="clickbutton" @click="openlink('/#/isystem/user')">
          <div class="buttontext">系统管理</div> 
          <div class="buttonicon"><img src="~@/assets/img/系统管理.png"></div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Analysis',
  components: {},
  data() {
    return {
      
    }
  },
  mounted() {

  },
  created() {},
  methods: {
    openlink(url){
      window.location.href = url;
    },
  },
}
</script>

<style scoped>
.analysisBG {
  background-image: url('~@/assets/img/analysisBG.png');
  background-repeat: no-repeat;
  margin-left: -20px;
  width: 1920px;
  height: 930px;
}
.buttonBG{
  margin-top: 12px;
  margin-left: 30px;
  height: 900px;
  
}
.clickbutton {
  margin-top: 5%;
  background-image: url('~@/assets/img/buttonbg.png');
  background-repeat: no-repeat;
  background-position: center top;
  height: 447px;
  width: 366px;
  cursor: pointer;
}
.button:hover {
  background-color: #0056b3;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  transform: translateY(1px); 
}
.buttonicon {
  display: flex;
  justify-content: center; 
  align-items: center;    
  margin-top: 22%; 
}
.buttontext{
  margin-top: 16%;
  display: flex;
  justify-content: center; 
  align-items: center;
  font-size: 24px;
  color: white;    
  line-height: 1.8;
  letter-spacing: 5px;
}
</style>