(vue)el-card区分背景图片、点击进入对应页面

(vue)el-card区分背景图片、点击进入对应页面

html

  
    

      

        
      

        {{ item.title }}
        
{{ item.desc }}
      
    
  

js

data() {
   return {
   	 //卡片数据
     cardList: [
       {
         id: 0,
         img: require('@/assets/images/dashboard/work-img1.png'),
         title: '数据服务',
         desc: '企业的...',
         path: '/data-server/data-import'
       },
       ... 
     ], 
 },
 methods: {
    // 工作台快捷卡片
    cardClick(item) {
      this.$router.push(item.path)
    },
}

css:

    // 我的工作台
    .board-card {
      width: 100%;
      height: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: nowrap;
      .board-card-li {
        width: 200px;
        height: 250px;
        border-radius: 5%;
        background-image: url('~@/assets/images/dashboard/workbenchesB.jpg');//初始蓝色背景
        background-size: 100% 100%;
        cursor: pointer;
        .card-image {
          height: 90px;
          display: flex;
          justify-content: center;
          align-items: center;
          .image{
          display: block;
          width: 80px;
          height: 80px;
          }
        }
        .card-content{
          height: 90px;
          text-align: center;
          margin: 20px auto;
          color: #fff;
          p{
            font-size: 12px;
            margin: 20px auto;
            text-align: left;
          }
        }
      }
      .board-card-li:hover{
        background-image: url('~@/assets/images/dashboard/workbenchesR.jpg');//鼠标移入红色背景
        background-size: 100% 100%;
      }
    }