NoticeAnnouncement.vue

<template>
  <div class="home-cell" id="noticeAnnouncement">
    <CellHeaderVue title="通知公告">
      <span class="el-icon-refresh" title="刷新"></span>
      <span class="el-icon-more" title="操作"></span>
    </CellHeaderVue>

    <el-scrollbar :style="{ height: cellScrollHeight + 'px' }">
      <div class="cell-content">
        <div class="notice-item" v-for="(item, idx) in noticeList" :key="idx">
          <div class="notice-title" :class="{ active: idx === 0 }">
            <a :href="item.url" target="_blank" rel="noopener noreferrer">
              {{ item.title }}
            </a>
          </div>
          <div class="notice-date">
            {{ item.date }}
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

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

export default {
  name: "NoticeAnnouncement",
  components: { CellHeaderVue },
  props: {
    cellScrollHeight: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      noticeList: [
        {
          title: "中国国际货物和服务贸易数据（BPM6，2015年以后）",
          url: "https://www.safe.gov.cn/safe/2018/0427/8886.html",
          date: "2021-12-30",
        },
        {
          title: "中国银行业对外金融资产和负债（2021年9月末）",
          url: "https://www.safe.gov.cn/safe/2021/1230/20403.html",
          date: "2021-12-30",
        },
        {
          title: "银行代客涉外收付款数据",
          url: "https://www.safe.gov.cn/safe/2018/0419/8806.html",
          date: "2021-12-24",
        },
        {
          title: "银行结售汇数据（按交易项目）——2021年",
          url: "https://www.safe.gov.cn/safe/2021/0220/18308.html",
          date: "2021-12-24",
        },
        {
          title: "中国人民银行 国家外汇管理局关于支持新型离岸国际贸易发展...",
          url: "https://www.safe.gov.cn/safe/2021/1224/20380.html",
          date: "2021-12-24",
        },
        {
          title: "官方储备资产（2021年）",
          url: "https://www.safe.gov.cn/safe/2021/0202/18180.html",
          date: "2021-12-07",
        },
        {
          title: "国家外汇管理局关于印发《外汇市场交易行为规范指引》的通知...",
          url: "https://www.safe.gov.cn/safe/2021/1203/20296.html",
          date: "2021-12-03",
        },
        {
          title: "国家外汇管理局关于印发《对外金融资产负债及交易统计制度》...",
          url: "https://www.safe.gov.cn/safe/2021/1203/20291.html",
          date: "2021-12-03",
        },
        {
          title: "国家外汇管理局关于印发《贸易信贷统计调查制度》的通知",
          url: "https://www.safe.gov.cn/safe/2021/1130/20271.html",
          date: "2021-11-30",
        },
        {
          title: "国家外汇管理局综合司关于开展第二批非金融企业对外金融资产...",
          url: "https://www.safe.gov.cn/safe/2021/1117/20208.html",
          date: "2021-11-17",
        },
        {
          title: "外汇管理行政罚款裁量办法",
          url: "https://www.safe.gov.cn/safe/2021/1105/20154.html",
          date: "2021-11-05",
        },
        {
          title: "国家外汇管理局综合司关于印发《银行外汇业务合规与审慎经营...",
          url: "https://www.safe.gov.cn2021-10-14",
          date: "2021-10-14",
        },
        {
          title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
          url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
          date: "2021-07-20",
        },
      ],
    };
  },
};
</script>

<style scoped>
/* 通知公告 */
#noticeAnnouncement .cell-content {
  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 a {
  color: #4e4e4e;
  text-decoration: none;
}
#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>