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

<template>
  <div class="univerty" v-loading="loading">
    <!-- 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>-->
    <!--    &lt;!&ndash; 视频 &ndash;&gt;-->
    <!--    <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-wrap" v-if="senceList.length">
      <div class="image-item" v-for="item in senceList">
        <div v-if="item.type == 1" class="cover-image vr" @click="toVR(item.url)">
          <el-image class="cover-image" fit="fill" :src="item.coverUrl"  ></el-image>
          <p class="mt10 text-overflow-ellipsis f14 lh20">VR校园</p>
          <div class="colleges-imgs-mask">
            <i class="iconfont icon-vr" style="font-size: 28px"></i>
          </div>
        </div>
        <div v-if="item.type == 3">
          <el-image class="cover-image" fit="fill" :src="item.url" :preview-src-list="srcList"></el-image>
          <p class="mt10 text-overflow-ellipsis f14 lh20">{{ item.description }}</p>
        </div>

      </div>
    </div>

    <evaluation-empty class="mt20" v-else shadow title="暂无数据"></evaluation-empty>

  </div>
</template>

<script>

import { universitiesStyle } from '@/api/webApi/career-course'

export default {
  props: {
    code: {
      type: String || Number,
      default: ''
    }
  },
  created() {
    this.getUniversitiesStyle()
  },
  data() {
    return {
      senceList: [],
      loading: false
    }
  },
  computed: {
    srcList() {
      if (!this.senceList.length) return []
      return this.senceList.filter(item => {
          return item.type == 3
      }).map(item => {
        return item.url
      })
    }
  },
  methods: {
    getUniversitiesStyle() {
      this.loading = true
      universitiesStyle({ code: this.code }).then(res => {
        this.senceList = res.data
        console.log(res)
      })
        .finally(_ => {
          this.loading = false
        })
    },
    toVR(url) {
      window.open(url,"_blank");
    }
  }
}
</script>

<style scoped lang="scss">
.univerty {
  overflow: auto;
}

.image-item {
  width: 217px;
  cursor: pointer;
  margin-right: 28px;
  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;
  }

  .image-item:nth-of-type(5n) {
    margin-right: 0;
  }

  .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>