<template>
  <div class="flex flex-col">
    <div class=" h-260px bg-red-500 relative">
      头部图片/可以用背景图片
      <div class='w-full  absolute bottom-1 '>
          <div class=' w-11/12 mx-auto h-10 bg-blue-900 text-white'>
            搜索input
          </div>
      </div>
    </div>
    <div class="list-contianer w-11/12 mx-auto">
        <div class="sub-title flex items-center justify-between py-5">
          <div>投票列表</div>
          <div @click="doFilter"><app-icon type="icon-shaixuan" customize color=' text-white' ></app-icon></div>
        </div>
        <div class="list w-full" @scroll="scrollStart">
            <app-card class=" mb-2"></app-card>
            <app-card2></app-card2>
            <div class="list-mergeup h-9"></div>
        </div>
    </div>
  </div>
</template>

<script lang="ts">

import Vue from "vue";

export default Vue.extend({
  name: "Square",
  data() {
    return {

    };
  },
  components:{
    'app-icon':()=>import('@/components/common/Icon.vue'),
    'app-card':()=>import('@/components/Card.vue'),
    'app-card2':()=>import('@/components/Card_two.vue')
  },
  methods:{
    doFilter(){
      console.log(123);
      
    },
    scrollStart(e:any){
      console.log(e);
      //用来控制list占屏长度
    }
  }

});
</script>

