<template>
  <div class="details mb-20">
    <child-view>
      <div class="sub-page">
        <div>
          <time-line :height="height" />
        </div>
        <div class="mt-3 mb-2 mx-4 py-4 bg-app-dark-2 border border-app-blue-3 border-solid rounded-lg">
          <div class="border-0 border-b border-app-blue-3 border-solid 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 mb-0">这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，
                这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少，这里是社区介绍，有多少展示多少。</p>
            </div>
          </div>
        </div>
      </div>
    </child-view>
  </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'
import ChildView from '@/layouts/childView.vue'
export default Vue.extend({
  components: {
    TimeLine,
    CommunityCard,
    TicketBar,
    // AppIcon,
    ChildView
  },
  data() {
    return {
      height: 12070,
      ticketNum: 22202,
      community: {
        id: 1
      }
    }
  }
})
</script>

<style scoped>
  .details {
    background-image: url(../../assets/home/banner.png);
    background-position-x: 50%;
    background-position-y: 0%;
    background-size: 100%;
    background-repeat: no-repeat;
  }
</style>