<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">建党伟业</div>
        </div>
        <div class="row-body">
          <div class="title-label">学习内容宣传图</div>
          <div class="title-body">
            <img src="images/applets/bg_top.png" alt="">
          </div>
        </div>
      </div>
      <van-collapse v-model="activeNames" accordion>
        <van-collapse-item name="1" title="建党伟业">
          <div class="content">
              <div class="row-body">
                <div class="title-label">展板版权方</div>
                <div class="title-body">中国国家博物馆</div>
              </div>
              <div class="row-body">
                <div class="title-label">展板宣传图</div>
                <div class="title-body">
                  <img src="images/applets/bg_top.png" alt="">
                </div>
              </div>
              <div class="detail-body">
                  <div class="learn-title">展板简介</div>
                  <div class="learn-body textarea">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
                  </div>
              </div>
              
               <div class="detail-body">
                  <div class="learn-title">展板视频</div>
                  <div class="learn-body">
                    <img src="images/applets/video.png" alt="">
                    <span>建党伟业-中文.mp4</span>
                  </div>
              </div>
              <div class="detail-body">
                  <div class="learn-title">展板音频</div>
                  <div class="learn-body">
                    <img src="images/applets/audio.png" alt="">
                    中文.mp3
                    <img src="images/applets/audio.png" alt="">
                    英文.mp3
                  </div>
              </div>
          </div>
        </van-collapse-item>
        <van-collapse-item title="伟大成就" name="2">内容</van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
export default {
  components:{Header},
  data() {
    return {
        activeNames: ['1'],
        images: [
            'https://img01.yzcdn.cn/vant/apple-1.jpg',
            'https://img01.yzcdn.cn/vant/apple-2.jpg',
        ],
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
.learn-detail-page-content {
  padding: 24px;
  overflow-y: auto;
  .page-wrapper {
    margin-top: 44px;
    width: 100%;
    height: calc(100vh - 100px);
    overflow-y: auto;
  }
  .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;
      }
    }
  }
  /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{
          padding-bottom: 12px;
          img {
              width: 32px;
              height: auto;
              padding: 0 5px;
              box-sizing: border-box;
              vertical-align: middle;
          }
        }
        .textarea {
          line-height: 1.5;
              color: #333;
        }
      }
      
  }
}
</style>