<template> <div class="learn-detail-page-content"> <Header title="学习内容详情" /> <div class="page-wrapper"> <div class="title-content"> <div class="row-body"> <div class="title-label">学习内容名称</div> <div class="title-body">{{ list.name }}</div> </div> <div class="row-body"> <div class="title-label">学习内容宣传图</div> <div class="title-body"> <img :src="list.cover" alt="" /> </div> </div> </div> <van-collapse v-model="activeNames" accordion> <van-collapse-item :name="item.id" :title="item.name" v-for="(item, index) in list.exhibitionBoardList" :key="index" > <div class="content"> <div class="row-body"> <div class="title-label">展板版权方</div> <div class="title-body">{{ item.boardCopyrightOwnerName }}</div> </div> <div class="row-body"> <div class="title-label">展板宣传图</div> <div class="title-body"> <img :src="item.cover" alt="" /> </div> </div> <div class="detail-body"> <div class="learn-title">展板简介</div> <div class="learn-body textarea"> {{ item.remarks || '暂无数据'}} </div> </div> <div class="detail-body"> <div class="learn-title">展板视频</div> <div class="learn-body" v-if="item.videoList.length"> <span class="file-box" v-for="(s, i) in item.videoList" :key="i"> <video controls width="100%" height="100%" poster="@/assets/images/applets/video.png" > <source :src="s.fileUrl" /> </video> <span>{{ s.fileName }}</span> </span> </div> <div class="learn-body" v-if="!item.videoList.length">暂无数据</div> </div> <div class="detail-body"> <div class="learn-title">展板音频</div> <div class="learn-body"> <span class="file-box" v-for="(s, i) in item.audioList" :key="i" > <audio controls width="100%" height="100%" poster="@/assets/images/applets/audio.png" > <source :src="s.fileUrl" /> </audio> <span>{{ s.fileName }}</span> </span> </div> <div class="learn-body" v-if="!item.audioList.length">暂无数据</div> </div> </div> </van-collapse-item> </van-collapse> </div> </div> </template> <script> import Header from "@/components/Header/index.vue"; export default { components: { Header }, data() { return { activeNames: [], list: [], }; }, mounted() { this.id = this.$route.query.id; this.getContentInfo(); }, methods: { // 获取详情 getContentInfo() { let vm = this; let param = { id: this.id, }; vm.$https( { url: `learningContent/get/${this.id}`, method: "get", authType: this.backToken, }, param ) .then((res) => { if (res.data.resultCode === "200") { this.list = res.data.data; this.activeNames = this.list.exhibitionBoardList[0].id; } else { this.$toast(res.data.message); } }) .catch(function (err) { console.log(err); }); }, }, }; </script> <style lang="scss" scoped> .learn-detail-page-content { padding: 50px 16px 16px; box-sizing: border-box; .page-wrapper { padding-top: 20px; width: 100%; height: calc(100vh - 80px); overflow-y: auto; } .title-content { padding: 0 10px; } .row-body { margin-bottom: 30px; display: flex; color: #333; .title-label { font-size: 14px; width: 140px; } .title-body { font-size: 16px; font-weight: 700; flex: 1; img { width: 160px; height: 100px; } } } ::v-deep .van-collapse-item__title { font-size: 16px; font-weight: 700; &:active { background-color: transparent; } } .van-hairline--top-bottom::after { border-width: 0; } .content { .learn-title { font-size: 14px; color: #333333; padding-bottom: 12px; } .detail-body { margin-bottom: 20px; .learn-body { display: flex; flex-wrap: wrap; padding-bottom: 12px; .file-box { width: 50%; padding: 10px; box-sizing: border-box; } img { width: 32px; height: auto; padding: 0 5px; box-sizing: border-box; vertical-align: middle; } } .textarea { line-height: 1.5; color: #333; } } } } </style>