vue+element 做滑动出现遮罩层效果

<template>
  <div class="homeCom maxCom">
    <div class="content-djnr">
      <h3 class="content-title">
        医院对接内容
      </h3>
      <ul class="dj-item">
        <li
          v-for="(item, index) in djList"
          :key="index"
          @click="goDetail(index)"
          @mouseenter="changeMask(index)"
          @mouseleave="CurrentIndex = -1"
        >
          <div class="dj-title">
            <img :src="item.imgUrl" />
            <h5>{{ item.title }}</h5>
            <h5>{{ item.title2 }}</h5>
          </div>
          <div class="dj-text">
            <p>
              {{ item.text }}
            </p>
            <p>{{ item.text2 }}</p>
          </div>
          <transition name="el-zoom-in-center">
            <div class="coverage" v-if="index == CurrentIndex">
              <div class="text">
                <p>{{ index == 0 ? "查看详情" : "暂无开放" }}</p>
              </div>
            </div>
          </transition>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "homeCom",
  data() {
    return {
      CurrentIndex: -1,
      obj: this.$store.state.userInfo,
      djList: [
        {
          imgUrl: require("../../../assets/img/hyc.png"),
          title: "门诊挂号号源池服务接入",
          text:
            "分时段（半小时以内）、非急诊全预约号源池对接，可预约号源包括当日门诊挂号（含夜间门诊、周末门诊）、一周内专家挂号或一周以上的慢性病门诊挂号。已实现实名制的医院，患者可凭电子健康卡、电子社保卡或就诊卡提交预约订单。已实现在线支付挂号费的医院，患者可在预约号将挂号费在线支付给医院指定账户。与预约后就医提醒相关的医院门诊科室分布图、院内就医指引、诊前就医指导等。"
        },
        {
          imgUrl: require("../../../assets/img/fzfz.png"),
          title: "智能分诊/辅诊系统对接",
          text:
            "智能导诊系统：基于Ai系统，帮助患者根据症状导引至推荐科室和医生后，再进行预约挂号；智能预问诊+在线咨询系统：患者在提交预约订单后，可以通过Ai模拟的不同专科问诊模型，在线填报患者主诉并上传检验检查报告单，形成电子主诉报告单上传给医院和预约医生。医生团队还可以通过在线图文或视频方式，接受患者的诊前咨询，减少患者误诊率，节省面诊时间。"
        },
        {
          imgUrl: require("../../../assets/img/zxgh.png"),
          title: "在线支付挂号费系统对接",
          text:
            "用户提交预约挂号订单后，可以在线支付挂号费至医院指定的账号，在线支付过程由金融机构与医院合作完成，预约平台负责与医院进行对账系统连接。"
        },
        {
          imgUrl: require("../../../assets/img/khzb.png"),
          title: "绩效考核指标相关数据连接",
          text:
            "（1）预约诊疗率相关数据的采集与连接：需要采集医院的门诊挂号量等相关统计数据（脱敏）；",
          text2: "（2）预约后就诊时间间隔数据采集与连接：需要与医院候诊排队。"
        },
        {
          imgUrl: require("../../../assets/img/jcbb.png"),
          title: "检验检查报告查询与智能解读相关系统对接",
          text: "（1）医院检验检查报告接入平台，开放患者自助查询功能；",
          text2:
            "（2）医院可接入智能解读检验报告单系统，患者可查看报告单解读提示。"
        },
        {
          imgUrl: require("../../../assets/img/yy.png"),
          title: "复诊预约、医技预约、体检预约、转诊预约、",
          title2: "专病预约、多学科会诊预约等其他全预约服务项目对接",
          text:
            "平台与医院进一步合作，逐步实现就医全流程的非急诊全预约服务，进一步提供便民惠民服务。"
        }
      ]
    };
  },
  methods: {
    // 鼠标事件
    changeMask(val) {
      console.log(val);
      this.CurrentIndex = val;
    },
    // 去详情
    goDetail(index) {
      console.log(index);
      if (index == 0) {
        if (this.obj.userInfo) {
          this.$router.push({ path: "/linkList" });
        } else {
          this.$router.push({
            path: "/login",
            query: {
              redirect_url: "LinkList"
            }
          });
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.homeCom {
  min-height: calc(100vh - 344px);
  background: rgba(242, 246, 249, 1);
}

.content-footer-wrap {
  /* height: 415px; */
  background: #fff;
}
.content-footer {
  background: #fff;
}
.content-title {
  text-align: center;
  font-size: 38px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  padding: 49px 0;
}
.dj-item {
  display: flex;
  flex-wrap: wrap;
  width: 1180px;
  margin: 0 auto;
  margin-bottom: 35px;
  li {
    width: 560px;
    height: 340px;
    background: rgba(255, 255, 255, 1);
    margin: 15px 12px;
    cursor: pointer;
    position: relative;
    img {
      width: 69px;
      height: 69px;
      margin-bottom: 21px;
    }
    h5 {
      margin: 0 23px;
    }
    .dj-text {
      font-size: 14px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 22px;
      margin: 20px 23px;
    }
    .coverage {
      width: 560px;
      height: 100%;
      position: absolute;
      background: rgba(43, 42, 42, 0.6);
      left: 0;
      top: 0px;
      color: #fff;
      font-size: 32px;
      text-align: center;
      .text {
        padding: 50px;
        p {
          line-height: 7;
        }
      }
    }
  }
  .dj-title {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    font-size: 22px;
    font-weight: 400;
    color: rgba(3, 0, 46, 1);
    margin-top: 48px;
  }
}
.content-djlc {
  background: #fff;
}
.btn {
  text-align: center;
  padding: 70px 0 50px;
}
.connect-btn {
  width: 159px;
  height: 40px;
  background: rgba(46, 167, 224, 1);
  font-size: 18px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  cursor: pointer;
  outline: none;
  border: 0;
}
</style>