konggang-dingtalkH5/code/src/views/Home.vue

<template>
  <div class="home">
    <!--<img alt="Vue logo" src="../assets/logo.png">-->
    <!--<HelloWorld msg="Welcome to Your Vue.js App"/>-->
    <div class="home-box" v-for="(item,index) in pageModelList" :key="index" @click="goDetail(item.path)">
            <div class="home-left">
                <div class="home-title-font">{{item.title}}</div>
                <div class="home-bottom-font">点击进入</div>
            </div>
            <div class="img-box">
              <img :src="item.img" alt="">
            </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    // HelloWorld
  },
  data(){
    return {
      pageModelList:[
        {
          title:'企业信息统计',
          path:'/company',
          img:require('../assets/default.png')
        },
        {
          title:'咨询诉求统计',
          path:'/consult',
          img:require('../assets/default.png')
        },
        {
          title:'园区信息统计',
          path:'/park',
          img:require('../assets/default.png')
        }
      ]
    }
  },
  methods:{
     goDetail(path){
        this.$router.push(path)
     }
  }
}
</script>

<style>
  .home {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-color: #F1F4F9;
  }

  .home-box {
    width: 80%;
    border-radius: 15px;
    background-color: #3E93FC;
    display: flex;
    justify-content: space-around;
    height: 21%;
    margin: 20px 0 20px 0;
    padding: 18px;
    color: #fff;
  }
  .home-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
   .home-title-font {
     font-size: 22px;
     font-weight: bold;
   }
   .home-bottom-font {
     background-color: #fff;
     color: #999DAB;
     font-size: 14px;
     width: 49%;
     border-radius: 5px;
     padding: 2px;
   }
  .img-box {
    width: 50%;
    height: 100%;
  }
  .img-box img {
    width: 100%;
    height: 100%;
    margin-top: 10px;
  }

</style>