<template>
  <div class="details mb-20">
    <div class="w-full h-12 bg-app-drak-1 flex items-center fixed z-50">
      <div class="w-8 h-8" @click="$router.back()">
        <app-icon customize size="32px" type='icon-houtuishangyige'></app-icon>
      </div>
    </div>
    <div class="pt-10">
      <time-line :height="height" />
    </div>
    <div class="mt-3 mx-4 py-5 border-2 border-app-blue-2 border-solid rounded-lg">
      <div class="border-b px-4">
        <CommunityCard :community="community" :showIntro="false" />
      </div>
      <div class="pt-7 px-4">
        <div class="mb-5">
          <TicketBar :ticketNum="ticketNum" />
        </div>
        <div>
          <p class="opacity-80 text-sm">社区简介</p>
          <p class="text-xs font-medium leading-6 opacity-80">这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
            这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import TimeLine from '@/components/home/TimeLine.vue'
import CommunityCard from '@/components/home/CommunityCard.vue'
import TicketBar from '@/components/home/TicketBar.vue'
import AppIcon from '@/components/common/Icon.vue'
export default Vue.extend({
  components: {
    TimeLine,
    CommunityCard,
    TicketBar,
    AppIcon
  },
  data() {
    return {
      height: 12070,
      ticketNum: 22202,
      community: {
        id: 1
      }
    }
  }
})
</script>

<style scoped>
  .border-b {
    padding-bottom: 0;
    border-bottom: 2px solid #666EED;
  }
</style>