toutoukan_front/miniprogram/pages/notifications/notifications.wxss

/* message.wxss */
page {
    background-color: #f4f6f8;
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
  
  .container {
    padding: 32rpx;
  }
  
  /* 卡片样式 */
  .card {
    background-color: #ffffff;
    border-radius: 20rpx;
    margin-bottom: 32rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx T12rpx rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease-in-out;
  }
  
  .card:last-child {
    margin-bottom: 0;
  }
  
  /* 卡片头部 */
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
  }
  
  .card-title-box {
    display: flex;
    align-items: center;
  }
  
  .card-icon {
    width: 48rpx;
    height: 48rpx;
    margin-right: 20rpx;
  }
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
  }
  
  .card-time {
    font-size: 24rpx;
    color: #999999;
  }
  
  /* 卡片内容 */
  .card-body {
    padding: 16rpx 0;
  }
  
  .card-content {
    font-size: 28rpx;
    color: #555555;
    line-height: 1.6;
    /* 最多显示两行，超出部分显示省略号 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 分割线 */
  .divider {
    height: 1rpx;
    background-color: #e9e9e9;
    margin-top: 24rpx;
  }
  
  /* 卡片脚部 */
  .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24rpx;
    font-size: 28rpx;
    color: #576b95; /* 微信主题链接色 */
  }
  
  .arrow {
    font-size: 36rpx;
    color: #cccccc;
  }
  
  /* 点击态样式 */
  .cell-hover {
    background-color: #f7f7f7;
  }
  
  /* 无消息提示 */
  .no-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 200rpx;
    color: #999;
  }
  
  .no-message-icon {
    width: 180rpx;
    height: 180rpx;
    margin-bottom: 20rpx;
  }
  
  /* --- 新增样式 --- */
  /* 未读红点样式 */
  .unread-dot {
    width: 16rpx;
    height: 16rpx;
    background-color: #fa5151; /* 微信主题红色 */
    border-radius: 50%;
    margin-left: 12rpx;
  }
  .card-hover {
    transform: scale(0.99);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
  }