<template>
  <div class="history-page-content">
    <div class="page-wrapper">
      <div class="field-title">
        <span>2021/03/05</span>
      </div>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div>建档伟业<span class="author">丁一一</span>
            </div>
          </template>
          <div class="content">
              <!-- <div class="learnvideo">
                  <div class="learn-title">学习视频</div>
                  <div class="learn-body">
                    <video src=""></video>
                    <video src=""></video>
                    <video src=""></video>
                  </div>
              </div> -->
              <div class="learnphoto">
                  <div class="learn-title">学习照片</div>
                  <div class="learn-body">
                    <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
                    <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
                    <img src="https://img01.yzcdn.cn/vant/apple-1.jpg" alt="">
                  </div>
              </div>
              <div class="learntextarea">
                  <div class="learn-title">有话对党说</div>
                  <div class="learn-body">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
                  </div>
              </div>
              <!-- <van-image-preview :images="images"/> -->
          </div>
        </van-collapse-item>
        <van-collapse-item title="伟大成就" name="2">内容</van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
export default {
  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>
.history-page-content {
  padding: 24px 12px;
  height: calc(100% - 150px);
  overflow-y: auto;
  .field-title {
    position: relative;
    padding-bottom: 20px;
    span {
      color: #333;
      font-size: 16px;
      line-height: 20px;
      padding-left: 24px;
      &:before {
        content: "";
        height: 16px;
        width: 16px;
        background-image: url('/images/applets/timer.png');
        background-size: cover;
        position: absolute;
        left: 0;
        top: 2px;
      }
    }
  }
  .author {
      float: right;
  }
  .content {
      .learn-title {
        font-size: 14px;
        color: #333333;
        padding: 16px 0;
      }
      .learn-body{
          padding-bottom: 12px;
        img,video {
            width: 30%;
            height: auto;
            padding: 0 5px;
            box-sizing: border-box;
        }
      }
      .learntextarea {
          .learn-body {
              line-height: 1.5
          }
      }
      
  }
}
</style>