<template>
    <div class="card flex flex-col">
        <div class="header bg-app-blue-4 flex items-center px-5 py-3 rounded-tl-xl rounded-tr-xl ">
            <div class="medals h-14 w-16 relative flex-grow-0">
                <!-- <img v-if="index <= 5" class="w-10 h-12" :src="lists[index-1]" alt="">
                <div v-else class='w-10 h-10 rounded-full border border-app-blue-2 border-solid text-app-blue-1 text-center text-white absolute left-1 top-1 leading-10'>
                    {{ index >= 10 ? index : '0'+index }}
                </div> -->
                <div class="cycle rounded-full w-10 h-10 z-40 absolute top-0 text-center" :class='medalsColor'>
                    <div class='inside w-8 h-8 bg-app-white-2 rounded-full text-app-blue-1 absolute left-1 top-1 leading-8'>
                        01
                    </div>
                
                </div>
                <div class="trangle w-3  h-5 bg-app-red absolute top-7 left-2 z-30 transform  rotate-45 "></div>
                <div class="trangle w-3  h-5 bg-app-red absolute top-7 left-6 z-30 transform  -rotate-45 shadow-lg "></div>
            </div>
            <div class=" text-sm text-left justify-items-start flex-grow">
                <div class="pb-1">社区名称一</div>
                <div class=' text-xs'>当前票数 <span>57217348918</span></div>
            </div>
            <div class='flex-grow-0'>
                <app-btn text='投票' class="bg-app-blue-2 rounded" border="border-none"></app-btn>
            </div>
        </div>
        <div class="bottom bg-app-blue-3 rounded-bl-xl rounded-br-xl  px-5 py-5">
            <div class=" text-xs text-app-white">这里是社区介绍介绍，这里是社区介绍，显示30个字，超过了去更过里面查看详情…</div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  props: {
      medalsColor:{
        type:String,
        default:'bg-app-yellow-1'
      },
      index: {
          type: Number
      },
      cardContent: {
          type: Object
      }
  },
  data() {
      return {
          lists: [require('@/assets/1.png'),require('@/assets/2.png'),require('@/assets/3.png'),require('@/assets/4.png'),]
      }
  },
  methods:{
  },
components:{
    'app-btn':()=>import('@/components/common/Btn.vue')
}
});
</script>

