notice-page.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <template>
  2. <view class="notice-page">
  3. <u-navbar height="40px" title="消息通知" bgColor="#fff" autoBack placeholder>
  4. </u-navbar>
  5. <view class="container_main">
  6. <view class="time-box">
  7. 2025-04-03 星期四
  8. </view>
  9. <notice-item v-for="(item,i) in noticeList" :key="i" :item="item"></notice-item>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. import noticeItem from './components/notice-item.vue'
  15. export default{
  16. components:{
  17. noticeItem
  18. },
  19. data() {
  20. return {
  21. noticeList:[
  22. {
  23. type:1,
  24. sn:'123654',
  25. time:'',
  26. isRead:false
  27. },
  28. {
  29. type:2,
  30. sn:'aa123654',
  31. time:'',
  32. isRead:true
  33. }
  34. ]
  35. }
  36. }
  37. }
  38. </script>
  39. <style lang="scss" scoped>
  40. .notice-page {
  41. min-height: 100vh;
  42. background-color: #F0F6FB;
  43. .container_main {
  44. padding: 32rpx 24rpx;
  45. .time-box {
  46. position: relative;
  47. color: #000;
  48. font-family: "PingFang SC";
  49. font-size: 28rpx;
  50. font-weight: 400;
  51. padding-left: 20rpx;
  52. margin-bottom: 24rpx;
  53. &::before {
  54. content: '';
  55. display: block;
  56. width: 6rpx;
  57. height: 30rpx;
  58. border-radius: 100rpx;
  59. background: #0256FF;
  60. position: absolute;
  61. left: 0;
  62. top: 50%;
  63. transform: translateY(-50%);
  64. }
  65. }
  66. }
  67. }
  68. </style>