<template>
  <div class="home-cell" id="noticeAnnouncement">
    <CellHeaderVue title="通知公告">
      <span class="el-icon-refresh" title="刷新"></span>
      <span class="el-icon-more" title="操作"></span>
    </CellHeaderVue>
    <div class="cell-content">
      <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
        <div class="notice-title" :class="{ active: idx === 0 }">
          {{ item.title }}
        </div>
        <div class="notice-date">
          {{ item.date }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CellHeaderVue from "./CellHeader.vue";

export default {
  name: "NoticeAnnouncement",
  components: { CellHeaderVue },
  data() {
    return {
      noticeList: [
        {
          title:
            "国务院关于同意在澳门特别行政区维护国家安全委员会设立国家安全事务顾问和国家安全技术顾问的批复",
          date: "2021-12-03",
        },
        { title: '国务院批复同意《"十四五"公共服务规划》', date: "2021-11-30" },
        { title: "学习六中全会精神 这些表述要精读", date: "2021-11-08" },
        { title: "十九届六中全会有何特殊意义", date: "2021-11-08" },
        { title: "部署开展科技成果评价改革试点", date: "2021-11-08" },
        { title: "印发供电企业信息公开实施办法", date: "2021-11-08" },
        { title: "公布2020年全国海水利用报告", date: "2021-11-08" },
        { title: "制造业中小微企业缓缴税费超15亿元", date: "2021-11-08" },
        { title: "完成审计事项整改1882项", date: "2021-11-08" },
        { title: "完成审计事项整改1882项", date: "2021-11-08" },
        { title: "完成审计事项整改1882项", date: "2021-11-08" },
        { title: "探索企业信用监管“一张网”显成效", date: "2021-11-08" },
        { title: "探索企业信用监管“一张网”显成效", date: "2021-11-08" },
      ],
    };
  },
};
</script>

<style scoped>
/* 通知公告 */
#noticeAnnouncement .cell-content {
  display: flex;
  flex-wrap: wrap;
  margin: 0 20px;
}
#noticeAnnouncement .cell-content .notice-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 15px;
}
#noticeAnnouncement .cell-content .notice-item .notice-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 75%;
}
#noticeAnnouncement .cell-content .notice-item .notice-title::before {
  content: "";
  display: inline-block;
  width: 8px;
}
#noticeAnnouncement .cell-content .notice-item .notice-title.active::before {
  content: "";
  background: rgb(255, 0, 0);
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
  margin-right: 2px;
  margin-bottom: 2px;
}
#noticeAnnouncement .cell-content .notice-item .notice-date {
  /* width: 20%; */
  margin-right: 6px;
}
</style>
