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

最新推荐文章于 2024-08-26 15:10:48 发布

nyf_unknown

最新推荐文章于 2024-08-26 15:10:48 发布

阅读量704

点赞数 3

分类专栏： VUE 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/qq_44754635/article/details/136908280

版权

VUE 专栏收录该内容

191 篇文章 2 订阅

订阅专栏

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

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

在这里插入图片描述

html

<div class="board-card">
  <el-card
    v-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>

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