GCLS_Page_TC/src/components/teacher-dev/Teaching.vue

<template>
  <!-- 教学 -->
  <div class="Teaching">
    <div class="top" v-if="!type">
      <div class="title">
        <span class="text"> <!-- 教辅资料  -->{{ $t("Key214") }} </span>
        <div class="more" @click="goMore">
          <span> <!-- 查看更多  -->{{ $t("Key47") }} </span>
          <img src="../../assets/teacherdev/moreImage.png" alt="" />
        </div>
      </div>
    </div>
    <div class="class_list">
      <div v-for="(item, i) in classList" :key="i" @click="gopreview(item)">
        <div class="listImage">
          <!-- <el-image lazy :src="item.picture_url" alt=""></el-image> -->
          <img
            :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
            alt=""
          />
          <!-- <span v-else>加载失败</span> -->
        </div>
        <!-- <el-image
          lazy
          :src="require('../../assets/teacherdev/' + getimgurl(item) + '.png')"
          alt=""
        ></el-image> -->
        <p class="one_name">
          {{ item.name }}
        </p>
        <p class="price" v-if="item.price*1>0">
          ¥<span class="price_1" v-html="changePrice(item.price*1,24, 16)"></span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["classList", "type"],
  data() {
    return {};
  },
  methods: {
    goMore() {
      this.$router.push({
        path: "/Viewmore",
        query: {
          classify: "TEACHING",
        },
      });
    },
    // 前往预览页面
    gopreview(item) {
      this.$router.push({
        path: "/Preview",
        query: {
          id: item.id,
          allList: this.type ? "allList" : null,
        },
      });
    },
    //   根据不同的文件类型展示不同图片
    getimgurl(item) {
      let index = item.tag.indexOf("downloadable");
      let type = "";
      if (index != -1) {
        type = item.tag[2];
      } else {
        type = item.tag[1];
      }
      switch (type) {
        case "ppt":
          return "ppt";
        case "pptx":
          return "ppt";
        case "pdf":
          return "pdf";
        case "xlsx":
          return "exceil";
        case "xls":
          return "exceil";
        case "doc":
          return "word";
        case "docx":
          return "word";
        case "word":
          return "word";
        default:
          return "word";
      }
    },
    changePrice(price, fontSize1, fontSize2) {
      price = price ? price : 0;
      price = price.toFixed(2);
      price = price.toString();
      let arr = price.split(".");
      let str = `<span style="font-size: ${fontSize1 ? fontSize1 : 16}px;">${
        arr[0]
      }</span>.<span style="font-size: ${fontSize2 ? fontSize2 : 16}px;">${
        arr[1]
      }</span>`;
      return str;
    },
  },
};
</script>

<style lang="scss" scoped>
.Teaching {
  .top {
    width: 1200px;
    margin: 0 auto;
    .title {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text {
        position: relative;
        font-size: 24px;
        font-weight: bold;
      }
      .more {
        cursor: pointer;
        font-size: 16px;
        display: flex;
        align-items: center;
        span {
          opacity: 0.4;
        }
        img {
          width: 25px;
          height: 19px;
        }
      }
    }
  }
  .class_list {
    width: 1200px;
    box-sizing: border-box;
    margin: 0 auto;
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 50px 20px 8px 20px;

    > div {
      width: 192px;
      margin-left: 20px;
      margin-right: 20px;
      transition: all 1s;
      cursor: pointer;
      margin-bottom: 32px;
      .one_name {
        height: 48px;
        margin-top: 16px;
        line-height: 150%;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
        font-size: 16px;
        color: #2c2c2c;
        cursor: pointer;
        padding-left: 4px;
      }
      .price {
        font-weight: bold;
        color: #2c2c2c;
        font-size: 24px;
        .price_2 {
          font-size: 16px;
        }
      }
      p {
        font-size: 16px;
      }
      .listImage {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 256px;
        // border: 1px solid rgba(0, 0, 0, 0.15);
        img {
          max-width: 100%;
          max-height: 100%;
        }
        color: #c0c4cc;
      }
      .gray {
        color: #a3a3a3;
      }
      .origin {
        color: #ff9900;
      }
    }
    .more {
      background: url("../../assets/teacherdev/image 13.png") center;
      position: relative;
      .shade {
        position: absolute;
        width: 100%;
        height: 100%;
        background: #000000;
        opacity: 0.6;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        > div {
          img {
            width: 58px;
            height: 58px;
          }
          span {
            position: relative;
            color: white;
            top: -20px;
          }
        }
      }
    }
  }
}
</style>