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

---

项目背景：郑州院XX项目首页-工作台模块卡片点击可 快速进入对应页面

---

---

html

<div class="board-card"><el-cardv-for="(item, index) of cardList":key="index"class="board-card-li"><div @click="cardClick(item)"><div class="card-image"><img :src="item.img" alt="" class="image"></div><div class="card-content"><span>{{ item.title }}</span><p>{{ item.desc }}</p></div></div></el-card>
</div>

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%;}}