feat: ui update

miniprogram/pages/notification/notification.wxss

@@ -1,3 +1,4 @@
+/** 通知列表：下划线筛选 + 未读黑竖条 + 发丝线分行 **/
 .page-flex {
   height: 100vh;
   display: flex;
@@ -10,117 +11,104 @@
   height: 0;
 }
 
-.filter-scroll {
-  background: #fff;
-  white-space: nowrap;
+.segbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  margin-top: 36rpx;
+  background: var(--glass);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 1rpx solid var(--hairline);
 }
 
-.filter-row {
-  display: inline-flex;
-  padding: 20rpx 24rpx;
+.nt-skel {
+  padding: 40rpx var(--pad) 0;
+  display: flex;
+  flex-direction: column;
+  gap: 52rpx;
 }
 
-.filter-item {
-  flex-shrink: 0;
-  padding: 0 32rpx;
-  height: 60rpx;
-  line-height: 60rpx;
-  border-radius: 30rpx;
-  font-size: 26rpx;
-  color: #3C3C43;
-  background: #F2F2F7;
-  margin-right: 16rpx;
+.nt-skel-item {
+  display: flex;
+  flex-direction: column;
+  gap: 18rpx;
 }
 
-.filter-item.active {
-  background: #007AFF;
-  color: #fff;
+.nt-list {
+  padding: 8rpx var(--pad) 0;
 }
 
-.list {
-  padding: 24rpx;
-}
-
-.n-card {
+.nt-item {
+  position: relative;
   display: flex;
   align-items: flex-start;
-  padding: 28rpx;
-  margin-bottom: 20rpx;
+  gap: 26rpx;
+  padding: 36rpx 0;
+  border-bottom: 1rpx solid var(--hairline);
 }
 
-.n-icon {
-  width: 80rpx;
-  height: 80rpx;
+/* 未读：左侧 4rpx 黑竖条 */
+.nt-item.is-unread::before {
+  content: '';
+  position: absolute;
+  left: -20rpx;
+  top: 44rpx;
+  width: 4rpx;
+  height: 32rpx;
+  border-radius: 2rpx;
+  background: var(--ink);
+}
+
+.nt-ic {
+  width: 72rpx;
+  height: 72rpx;
   border-radius: 50%;
+  background: var(--fill);
+  color: var(--ink-2);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-  margin-right: 24rpx;
 }
 
-.n-icon.like {
-  background: #FFE8EC;
-  color: #FF3B30;
+.nt-ic .icon {
+  width: 36rpx;
+  height: 36rpx;
 }
 
-.n-icon.order {
-  background: #E8F2FF;
-  color: #007AFF;
-}
-
-.n-icon.sys {
-  background: #F2F2F7;
-  color: #8E8E93;
-}
-
-.n-icon .icon {
-  width: 44rpx;
-  height: 44rpx;
-}
-
-.n-body {
+.nt-body {
   flex: 1;
   min-width: 0;
 }
 
-.n-title-row {
-  display: flex;
-  align-items: center;
-}
-
-.n-dot {
-  width: 12rpx;
-  height: 12rpx;
-  border-radius: 50%;
-  background: #007AFF;
-  margin-right: 12rpx;
-  flex-shrink: 0;
-}
-
-.n-title {
+.nt-t {
   font-size: 30rpx;
-  font-weight: 600;
-  color: #000;
-}
-
-.n-title.read {
-  color: #8E8E93;
   font-weight: 500;
+  color: var(--ink-3);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.n-content {
+.nt-item.is-unread .nt-t {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.nt-c {
+  margin-top: 10rpx;
   font-size: 26rpx;
-  color: #3C3C43;
-  margin-top: 8rpx;
+  line-height: 1.6;
+  color: var(--ink-2);
   display: -webkit-box;
-  -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
-.n-time {
+.nt-time {
+  margin-top: 12rpx;
   font-size: 22rpx;
-  color: #C7C7CC;
-  margin-top: 8rpx;
+  color: var(--ink-4);
 }