<template>
  <div>
    <h2>粮食价格采集</h2>
    <a-space class="inputBox">
      <a-input addonBefore="监测点名称" class="inputBoxContent"></a-input>
      <a-input addonBefore="所属州市" class="inputBoxContent"></a-input>
      <a-input addonBefore="所属州市" class="inputBoxContent"></a-input>
      <a-input addonBefore="详细地址" class="inputBoxContent"></a-input>
      <a-input addonBefore="联系方式" class="inputBoxContent"></a-input>
      <a-input addonBefore="采集事件" class="inputBoxContent"></a-input>
    </a-space>
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }"
      :data-source="data"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <a-card :title="item.title">Card content</a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script lang="ts" setup>
    console.log(666);
    interface DataItem {
      title: string;
    }
    const data: DataItem[] = [
      {
        title: "Title 1",
      },
      {
        title: "Title 2",
      },
      {
        title: "Title 3",
      },
      {
        title: "Title 4",
      },
      {
        title: "Title 5",
      },
      {
        title: "Title 6",
      },
    ];
</script>
<style>
.inputBox {
  /* width: 100%; */
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.ant-space-item {
  width: 35%;
  margin-top: 30px;
  padding-right: 50px;
}
.inputBoxContent {
  width: 100%;
}
.ant-input-group-addon {
  border: 0;
}
.ant-list{
    margin-top:30px
}
</style>
