dianshang-qianduan/src/views/learningCenter/learningResources.vue

<template>
  <div class="app-container">
    <el-scrollbar height="780px" always>
      <!-- <div class="app-container"> -->
      <div class="main">
        <el-row :gutter="40">
          <el-col :span="3" v-for="i in item" :key="i">
            <div class="zs">
              <div class="el_top">
                <a target="_blank" @click="showResource(i.resourcesUrl)">
                  <span>{{ i.resourcesName }}</span>
                </a>
              </div>

              <div class="el_bon">
                <!-- <a :href="getImgLink(i.resourcesUrl)" target="_blank"> -->
                <a target="_blank" @click="showResource(i.resourcesUrl)">
                  <img :src="getImg(i.resourcesImg)" />
                </a>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- </div> -->
    </el-scrollbar>
  </div>
</template>
<script setup>
import * as API from "@/api/prtrait/prtrait.js";
import { getAssetsFile } from "@/utils";
import { getUserInfo } from "@/utils/auth";
import { onMounted } from "vue";
const getImg = (i) => {
  return getAssetsFile(i);
};
const getImgLink = (i) => {
  return i;
};
const data = ref({
  stuScoreDetailsDTO: {
    learningProjects: "资源学习",
    assessmentItems: "观看资源",
    viewingTime: 0,
    userId: JSON.parse(getUserInfo()).userId,
  },
});
const item = ref({});

onMounted(() => {
  API.learningResourcesView({ module: data.value.stuScoreDetailsDTO.module }).then((res) => {
    item.value = res.data;
  });
});

const showResource = async (i) => {
  // const newWindow=window.open(`http://192.168.2.4:8800/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
  //  window.open(`http://qkljr.sztzjy.com:90/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
  if (i.includes("mp4")) {
    const newWindow = window.open("", "_blank");
    newWindow.document.write(`
      <html>
      <head>
          <title>视频播放</title>
          <style>
              body {
                  margin: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
                  background-color: #333333;
              }
              video {
                  width: 90%;
                  // max-width: 800px;
              }
          </style>
      </head>
      <body>
          <video controls autoplay controlsList="nodownload">
              <source src="http://118.31.7.2:8042/file/${i}" type="video/mp4">
          </video>
      </body>
      </html>
  `);
  }
  if (i.includes("pdf")) {
    //  window.open(`http://qkljr.sztzjy.com:90/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}#toolbar=0`)
    window.open(`http://118.31.7.2:8042/file/${i}#toolbar=0`);
    // window.open(`http://202.199.90.115:8800/api/stu/concept/block/getResource?`+`module=${data2.module}`+`&name=${i}`)
  }
};
const timer = ref(null);
let seconds = 0;
onMounted(() => {
  timer.value = setInterval(() => {
    seconds++;
  }, 1000);
});
onBeforeUnmount(() => {
  item.value = {};
  if (timer.value) {
    clearInterval(timer.value);
  }
  data.value.stuScoreDetailsDTO.viewingTime = seconds;
  API.resourcesLearningScoreStatistics(data.value);
});

const taskTime = async () => {};
</script>
<style lang="scss" scoped>
.app-container {
  // background-color: #fff;
  // border-radius: 6px;
  // padding: 25px 25px 25px 0;
  .k_main {
    width: 100%;
    display: inline-block;
    margin: 20px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    height: 750px;
    background-color: white;
    border-radius: 10px;
  }
  .el-col-4 {
    margin-bottom: 30px;
  }
  .zs {
    margin-bottom: 36px;
    border: 1px solid #dcdfe6;
    border-radius: 8px;
  }
  .main {
    width: 100%; /* 确保宽度不超过容器宽度 */
    overflow-x: hidden; /* 确保不出现水平滚动条 */
  }
  .el_top {
    height: 66px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-family: Source Han Sans CN;
    font-weight: 550;
    // color: #333333;
    padding: 7px;
    text-align: center;
    background: #ffffff;
    border-radius: 6px 6px 0 0;
  }
  .el_bon {
    display: flex;
    justify-content: center;
    background-color: whitesmoke;
    // padding: 10px 27px 10px 27px;
    img {
      width: 159px;
      height: 184px;
    }
  }
  .el-row {
    margin-bottom: 20px;
  }
  .el-row:last-child {
    margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
}
</style>