<template>
  <div class="info">
    <p class="title">某某党员大会</p>
    <p>上海市浦东新区梅花路1099号</p>
    <div class="content">
      <div class="box">
        <div>
          <span>活动日期：</span>
          <span>2020年1月3日</span>
        </div>
        <div>
          <span>活动地址：</span>
          <span>某某活动地址</span>
        </div>
        <div>
          <span>参与人数：</span>
          <span>20人</span>
        </div>
        <div>
          <span>出席率：</span>
          <span>50%</span>
        </div>
      </div>
      <div class="box">
        <span>活动内容描述</span>
        <p>XXXXXXXXXXXXXXXXXXXXX</p>
        <p>XXXXXXXXXXXXXXXXXXXXX</p>
        <p>XXXXXXXXXXXXXXXXXXXXX</p>
        <p>XXXXXXXXXXXXXXXXXXXXX</p>
      </div>
      <div class="box">
        <span>活动照片</span>
        <div class="photos">
          <div class="photo"></div>
          <div class="photo"></div>
          <div class="photo"></div>
        </div>
      </div>
    </div>
    <n-button class="export-btn" type="primary" size="small">
      <template #icon>
        <n-icon size=".12rem">
          <svg-icon :data="exportIcon" original />
        </n-icon>
      </template>
      参加人员名单下载
    </n-button>
  </div>
</template>

<script lang="ts" setup>
import exportIcon from '@images/export.svg'
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.info
  background $bg
  $blur()
  border-radius .04rem
  box-sizing border-box
  padding .1rem
  width 3rem
  max-height 50vh
  display flex
  flex-direction column
  .title
    font-size .13rem
    font-family $font-ping-medium
  .content
    flex 1
    overflow-y auto
    margin .05rem 0 .1rem
  .box
    background $white-bg
    border-radius .03rem
    margin-top .05rem
    box-sizing border-box
    padding .1rem
    >div
      $flex-align()
      margin-bottom .05rem
    span
      display inline-block
      &:nth-of-type(1)
        color $gray
        width 26%
      &:nth-of-type(2)
        flex 1
        $text-overflow()
    .photos
      $flex-align()
      justify-content space-between
      >.photo
        width 32%
        height .6rem
        border-radius .04rem
        background $light-gray
  .export-btn
    width 50%
    margin 0 auto
</style>
