details.vue

<template>
  <div class="info">
    <div class="info-header">学习内容详情</div>
    <div class="info-container">
      <div class="info-wrapper">
        <el-form
          class="demo-form-inline"
          :inline="true"
          :model="formInline"
          label-position="top"
        >
          <el-form-item label="学习内容名称" class="w50">
            <span>{{ formInline.name }}</span>
          </el-form-item>
          <el-form-item label="学习内容宣传图" class="w50">
            <img class="imgSize" :src="formInline.cover" alt />
          </el-form-item>
        </el-form>
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item
            v-for="(item, index) in formInline.exhibitionBoardList"
            :key="index"
            :title="item.name"
          >
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="formInline"
              label-position="top"
            >
              <el-form-item label="展板宣传图"  class="w100">
                <img class="imgSize" :src="item.cover" alt />
              </el-form-item>
              <el-form-item label="展板版权方" class="w50" >
                <span>{{ item.boardCopyrightOwnerName }}</span>
              </el-form-item>
              <el-form-item label="展板名称">
                <span>{{ item.name }}</span>
              </el-form-item>
             
              <el-form-item label="展板简介" class="w100">
                <span>{{ item.remarks }}</span>
              </el-form-item>
              <el-form-item label="展板视频" class="w100">
                <div class="video-box">
                  <div
                    class="video-item"
                    v-for="(vi, index) in item.videoList"
                    :key="index"
                  >
                    <video :src="vi.fileUrl" controls />
                    <span>{{ vi.fileName }}</span>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="展板音频">
                <div class="audio-box">
                  <div
                    class="audio-item"
                    v-for="(au, index) in item.audioList"
                    :key="index"
                  >
                    <audio :src="au.fileUrl" controls />
                    <span>{{ au.fileName }}</span>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="info-footer">
      <div class="btn-group">
        <el-button
          size="mini"
          type="primary"
          class="btn_form_search"
          @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNames: [1],
      formInline: {},
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getInfo(this.$route.query.id);
    },
    //  获取版权方详情
    getInfo(id) {
      let vm = this;
      vm.$https(
        {
          url: "learningContent/get/" + id,
          method: "get",
          authType: this.backToken,
        }
        // param
      )
        .then((res) => {
          let data = res.data.data;
          vm.formInline = data;
          console.log(this.ruleForm); 
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    close() {
      history.go(-1);
    },
    handleChange(val) {
      console.log(val);
    },
  },
};
</script>

<style lang="less">
.video-box {
  width: 100%;
  .video-item {
    width: 100%;
  }
  video {
    width: 100%;
    height: 200px;
  }
}
audio:focus {
  outline: none;
}
.audio-item{
  display: flex;
  align-items: center;
  span{
    margin-left: 30px;
  }
}
</style>