jsh_erp_app/pages/index/notice-page.vue

<template>
  <view class="notice-page">
    <u-navbar
      height="40px"
      title="消息通知"
      bgColor="#fff"
      autoBack
      placeholder
    >
    </u-navbar>
    <view class="container_main">
      <view class="time-box"> 2025-04-03 星期四 </view>
      <notice-item
        v-for="(item, i) in noticeList"
        :key="i"
        :item="item"
      ></notice-item>
    </view>
  </view>
</template>

<script>
import noticeItem from "./components/notice-item.vue";
export default {
  components: {
    noticeItem,
  },
  data() {
    return {
      noticeList: [
        {
          type: 1,
          sn: "123654",
          time: "",
          isRead: false,
        },
        {
          type: 2,
          sn: "aa123654",
          time: "",
          isRead: true,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.notice-page {
  min-height: 100vh;
  background-color: #f0f6fb;
  .container_main {
    padding: 32rpx 24rpx;
    .time-box {
      position: relative;
      color: #000;
      font-family: "PingFang SC";
      font-size: 28rpx;
      font-weight: 400;
      padding-left: 20rpx;
      margin-bottom: 24rpx;
      &::before {
        content: "";
        display: block;
        width: 6rpx;
        height: 30rpx;
        border-radius: 100rpx;
        background: #0256ff;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
}
</style>