details.vue

<template>
  <div class="info">
    <div class="info-header">学习内容详情</div>
    <div class="info-container">
      <div class="info-wrapper">
        <el-collapse v-model="activeNames" @change="handleChange">
          <el-collapse-item title="建党伟业" name="1">
            <el-form
              class="demo-form-inline"
              :inline="true"
              :model="formInline"
              label-position="top"
            >
              <el-form-item label="学习内容宣传图" class="w50">
                <img class="imgSize" src alt />
              </el-form-item>
              <el-form-item label="展板宣传图">
                <img class="imgSize" src alt />
              </el-form-item>
              <el-form-item label="展板名称" class="w50">
                xxxxxxx
                <!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
              </el-form-item>
              <el-form-item label="展板版权方">
                xxxxxxx
                <!-- <el-input v-model="formInline.user" placeholder="审批人"></el-input> -->
              </el-form-item>
              <el-form-item label="展板简介">
                各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给各区域为夫妻房我发给
                <!-- <el-input type="textarea" v-model="formInline.remarks"></el-input> -->
              </el-form-item>
              <el-form-item label="展板视频" class="w100">
                <div>
                  <img class="iconImg" src alt />
                  <span>xxx.mp4</span>
                </div>
              </el-form-item>
              <el-form-item label="展板音频">
                <div>
                  <img class="iconImg" src alt />
                  <span>xxx.mp3</span>
                </div>
              </el-form-item>
            </el-form>
          </el-collapse-item>
          <el-collapse-item title="改革之路" name="2">
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
          <el-collapse-item title="伟大复兴" name="3"></el-collapse-item>
          <el-collapse-item title="辉煌成就" name="4"></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: {
        user: "",
        region: ""
      }
    };
  },
  methods: {
    close() {
      history.go(-1);
    },
    handleChange(val) {
      console.log(val);
    }
  }
};
</script>

<style lang="less">

</style>