体育与健康完成

yiming

2024-08-07 bac7941b8dc29e70643c44fb393c49d2eaa3015b

 src/books/sportsAndHealth/view/components/chapter008.vue

@@ -1698,10 +1698,29 @@
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" width="60vw" top="2vh" append-to-body lock-scroll :show-close="false"
      class="custom-dialog">
      <div slot="title" class="header_title">
        <span>{{ pdfTitle }}</span>
        <span @click="closeDialog"> x </span>
      </div>
      <div class="pdfModal" v-if="dialogVisible">
        <preView :isClear="dialogVisible" :md5="p_md5"></preView>
      </div>
    </el-dialog>





  </div>
</template>

<script>


import preView from "@/components/pdfview/index.vue"
import { getResourcePath } from '@/assets/methods/resources'
export default {
  name: 'chapter008-page',
@@ -1717,9 +1736,14 @@
      default: false,
    },
  },
  components: {},
  components: {
    preView,
  },
  data() {
    return {
      pdfTitle: "",
      p_md5: "",
      dialogVisible: false,
      isShowXyx01: false,
      isShowXyx02: false,
      isShowXyx03: false,
@@ -1825,9 +1849,7 @@
  computed: {},
  watch: {},
  created() {

    const localData = JSON.parse(localStorage.getItem('chapter008'))

    if (localData) {
      this.chapter008 = { ...Object.assign(this.chapter008, localData) }
    }
@@ -1837,22 +1859,22 @@
  },
  mounted() { },
  methods: {

    async getVideo(md5, val) {
      const data = await getResourcePath(md5)
      // console.log(data);

      this.chapter008.videoUrl[val] = data
    },
    closeDialog() {
      this.dialogVisible = false;
    },

    toUrl(val) {
      if (val) {
        const obj = {
          type: 'pdf',
          data: {
            md5: this.chapter008.pdfMd5[val].md5,
            title: this.chapter008.pdfMd5[val].name,
          },
        }
        this.$emit('openPDFChange', obj)
        this.dialogVisible = true;
        this.p_md5 = this.chapter008.pdfMd5[val].md5;
        this.pdfTitle = this.chapter008.pdfMd5[val].name;
      }
    },

@@ -1907,4 +1929,70 @@
}
</script>

<style lang="less" scoped></style>

<style lang="less">
.pdfModal {
  width: 100%;
  height: 90vh;
}

.custom-dialog {
  overflow: hidden !important;

  /deep/ .el-dialog__body {
    padding: 0;
  }

  /deep/ .el-dialog__header {
    background-color: rgba(0, 0, 0, 0.8);

    .header_title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      font-family: "FZLTXIHJW";

      span:nth-child(2):hover {
        cursor: pointer;
      }
    }

    /deep/.el-dialog__title,
    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      font-family: "FZLTXIHJW";
    }
  }
}

@media screen and (max-width: 1024px) {
  .pdfModal {
    width: 100%;
    height: 80vh;
  }

  .custom-dialog {
    /deep/ .el-dialog {
      width: 90vw !important;
    }
  }
}

@media screen and (max-width: 800px) {
  .pdfModal {
    width: 100%;
    height: 60vh;
  }

  .custom-dialog {
    /deep/ .el-dialog {
      width: 90vw !important;
    }
  }
}
</style>