NoticeAnnouncement.vue

<template>
  <CellWrapper title="通知公告" :cellContentHeight="cellContentHeight">
    <template v-slot:header>
      <span class="el-icon-refresh" title="刷新"></span>
      <span class="el-icon-more" title="操作" @click="opening"></span>
    </template>

    <div class="notice-container">
      <el-scrollbar style="height: 100%">
        <div style="padding-right: 10px">
          <div class="notice-item" v-for="(item, idx) in testData" :key="idx">
            <div class="notice-title" :class="{ active: idx === 0 }">
              <a :href="item.url" target="_blank" rel="noopener noreferrer">
                <!-- <router-link :to="'/Display/'+item.tid"> -->
                {{ item.title }}
                <!-- </router-link> -->
              </a>
            </div>
            <div class="notice-date">
              {{ item.date }}
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </CellWrapper>
</template>

<script>
import CellWrapper from "../common/CellWrapper.vue";

export default {
  name: "NoticeAnnouncement",
  props: ["cellContentHeight"],
  components: { CellWrapper },
  data() {
    return {
      noticeList: [],
      testData: [
        {
          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",
        },
        {
          title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
          url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
          date: "2021-07-20",
        },
        {
          title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
          url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
          date: "2021-07-20",
        },
        {
          title: "现行有效外汇管理主要法规目录（截至2021年6月30日）...",
          url: "https://www.safe.gov.cn/safe/2021/0720/19437.html",
          date: "2021-07-20",
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.loadNoticeData();
    });
  },
  methods: {
    loadNoticeData() {
      // 查询加载数据
      this.noticeList = this.testData;
    },
    opening() {
      window.location.href = "#/business/notice";
    },
  },
};
</script>

<style scoped>
.notice-container {
  height: 100%;
  margin: 0 20px;
  box-sizing: border-box;
}
.notice-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  font-size: 15px;
}
.notice-item .notice-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.notice-item .notice-title a {
  color: #4e4e4e;
  text-decoration: none;
}
.notice-item .notice-title::before {
  content: "";
  display: inline-block;
  width: 8px;
}
.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;
}
.notice-item .notice-date {
  /* width: 20%; */
  margin-right: 6px;
}
</style>