feat:消息中心和案例库

src/pages/message-center/status-notification/components/StatusNotificationItem.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import type { StatusNotificationItem } from '@/types/status-notification'
+
+defineProps<{
+  item: StatusNotificationItem
+  icon: string
+}>()
+</script>
+
+<template>
+  <view class="status-notification-item">
+    <image
+      class="status-notification-item__icon"
+      :src="icon"
+      mode="aspectFit"
+    />
+
+    <view class="status-notification-item__content">
+      <view class="status-notification-item__row">
+        <text class="status-notification-item__title">
+          {{ item.title }}
+        </text>
+        <text class="status-notification-item__time">
+          {{ item.time }}
+        </text>
+      </view>
+      <text class="status-notification-item__preview">
+        {{ item.preview }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import '@/styles/variables.scss';
+
+.status-notification-item {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 24rpx 32rpx;
+  background: $color-bg-page;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.status-notification-item__icon {
+  flex-shrink: 0;
+  width: 88rpx;
+  height: 88rpx;
+  margin-right: 24rpx;
+}
+
+.status-notification-item__content {
+  flex: 1;
+  min-width: 0;
+  padding-top: 4rpx;
+}
+
+.status-notification-item__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.status-notification-item__title {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: $color-text-primary;
+}
+
+.status-notification-item__time {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  font-size: 24rpx;
+  color: $color-text-secondary;
+}
+
+.status-notification-item__preview {
+  margin-top: 8rpx;
+  min-height: 78rpx;
+  font-size: 26rpx;
+  line-height: 1.5;
+  color: $color-text-secondary;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+</style>