<template>
  <div class="common-box" style="margin-top: 20px">
    <TopTitle icon="laba" title="公告通知" />
    <div class="list-box">
      <el-scrollbar>
        <div v-for="(item, index) in dataList" :key="index" class="line">
          <div class="title">{{ item.title }}1</div>
          <div class="date">{{ item.date }}2</div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script lang="ts" setup>
const dataList = ref<any[]>([
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
  {},
]);
</script>

<style lang="scss" scoped>
.list-box {
  margin-top: 5px;
  height: 300px;
  padding: 0 20px;

  .line {
    border-bottom: 1px solid #eee;
    line-height: 25px;
    display: flex;
    justify-content: space-between;

    .title {
      font-size: 14px;
      color: #1a1a1a;
      text-align: left;
    }

    .date {
      font-size: 12px;
      color: #666666;
      text-align: right;
    }
  }
}
</style>
