front/src/views/career/plan/compoents/UniversityStyle.vue

<template>
  <div>
    <!-- VR -->
    <div class="image-item">
      <div class="cover-image vr" >
          <div class="colleges-imgs-mask">
            <i class="iconfont icon-vr" style="font-size: 28px"></i>
          </div>
      </div>
      <p class="mt15 text-overflow-ellipsis f14 lh20">VR校园</p>
    </div>
    <!-- 视频 -->
    <div class="image-item">
      <div class="cover-image video" >
        <div class="colleges-imgs-mask">
          <i class="iconfont icon-bofang" style="font-size: 28px"></i>
        </div>
      </div>
      <p class="mt15 text-overflow-ellipsis f14 lh20">清华大学</p>
    </div>
<!--     图片列表-->
    <div class="image-item">
        <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00066675.jpeg" :preview-src-list="srcList"></el-image>
      <p class="mt15 text-overflow-ellipsis f14 lh20">校门</p>
    </div>
    <div class="image-item">
      <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00065517.jpeg" :preview-src-list="srcList"></el-image>
      <p class="mt15 text-overflow-ellipsis f14 lh20">中央主楼</p>
    </div>
    <div class="image-item">
      <el-image class="cover-image"  fit="fill" src="https://img1.youzy.cn/content/media/thumbs/p00065520.jpeg" :preview-src-list="srcList"></el-image>
      <p class="mt15 text-overflow-ellipsis f14 lh20">伟伦楼</p>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      srcList: [
        'https://img1.youzy.cn/content/media/thumbs/p00066675.jpeg',
        'https://img1.youzy.cn/content/media/thumbs/p00065517.jpeg',
        'https://img1.youzy.cn/content/media/thumbs/p00065520.jpeg'
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.image-item:nth-of-type(5n) {
  margin-right: 0;
}
.image-item{
  width: 217px;
  cursor: pointer;
  margin-right: 30px;
  margin-top: 20px;
  float: left;
  color: #333;
  .cover-image {
    width: 217px;
    height: 120px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 50%;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
  }
  .vr{
    background-image: url("http://toc.cn-bj.ufileos.com/media/files/20210414/9d02bb82.png");
  }
  .video {
    background-image: url("http://img1.youzy.cn/content/media/thumbs/p00176063.jpeg");
  }
  .colleges-imgs-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 217px;
    height: 120px;
    background: rgba(0,0,0,.5);
    color: #fff;
    text-align: center;
    line-height: 120px;
    border-radius: 4px;
    overflow: hidden;
  }
  &:hover{
      color: #42b983;
  }
}
</style>