<template>
  <div class="notion-list">
    <section class="notion-list__left">
      <img :src="Bell" />
      <span class="notion-title">上飞院关于加强防御台风“贝碧嘉”的通知</span>
    </section>
    <section class="notion-list__right">
      <span>发布人：XXX</span>
      <span>2024-01-01 23:59:59</span>
    </section>
  </div>
</template>

<script lang="ts" setup>
  import Bell from 'assets/svg/bell.svg';
</script>

<style lang="scss" scoped>
  .notion-list {
    @include flex-center;
    justify-content: space-between;
    width: 100%;
    height: 25cpx;
    padding: 0 13cpx;
    &__left {
      display: flex;
      align-items: center;
      gap: 16cpx;
    }
    &__right {
      display: flex;
      align-items: center;
      gap: 24cpx;
      font-size: 12cpx;
      color: rgba($text-color, 0.45);
    }
  }
  .notion-title {
    font-size: 16cpx;
    font-weight: 600;
    color: rgba($text-color, 0.85);
  }
</style>
