<template>
    <div class="card flex flex-col">
        <div class="header  ">
            <div class='w-full relative'>
            
                <img src="@/assets/demo.png" class="object-cover h-36 object-center w-full rounded-tl-xl rounded-tr-xl">
                <div class='cover w-full h-36 absolute top-0 left-0 z-40 bg-black bg-opacity-20'>
              
                </div>
                <div class='overlay w-full h-36 absolute top-0 left-0 z-50 p-5 '>
                    <div>离投票截止还有约</div>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="bottom bg-app-blue-3 rounded-bl-xl rounded-br-xl  ">
            <div class="bottom-upside border-b border-gray-400">
                <div class="px-5 py-3">
                    <div class='py-2'>这里是投票项目的名称</div>
                    <div  class=" text-xs text-app-white">这里是投票项目的介绍</div>
                </div>
            </div>
            <div class=" bottom-footside flex items-center justify-between px-5">
                <div class='text-xs text-app-white'>当前票数<span class="ml-3 text-lg text-white">230</span></div>
                <div>
                    <app-btn text='投票' class="bg-app-blue-2 rounded" border="border-none"></app-btn>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  props: {

  },
  methods:{

  },
    components:{
        'app-btn':()=>import('@/components/common/Btn.vue')
    }
});
</script>

