1.0 开发

src/pages/home/index.scss

@@ -3,11 +3,11 @@ page {
 }
 
 .page-title {
-  width: 320rpx;
+  width: 344rpx;
   height: 34rpx;
 }
 .page {
-  padding: 44rpx 40rpx;
+  padding: 44rpx 40rpx 0;
   .user {
     display: flex;
     align-items: center;
@@ -15,8 +15,8 @@ page {
       flex-shrink: 0;
       padding: 0;
       margin: 0;
-      width: 124rpx;
-      height: 124rpx;
+      width: 108rpx;
+      height: 108rpx;
       outline: none;
       border: 2px solid #fff;
       border-radius: 50%;
@@ -39,42 +39,461 @@ page {
       }
       .hostipal {
         margin-top: 16rpx;
-        line-height: 1;
+        line-height: 32rpx;
         font-size: 28rpx;
-        color: rgba(173, 172, 178, 1);
+        color: rgba(105, 104, 110, 1);
         .tag {
           margin-left: 10rpx;
+          height: 32rpx;
           display: inline-block;
           font-size: 24rpx;
           color: rgba(255, 255, 255, 1);
-          padding: 2rpx 10rpx;
-          background: #8c75d0;
+          padding: 0 10rpx;
+          background: rgba(195, 148, 255, 1);
           border-radius: 8rpx 8rpx 8rpx 8rpx;
         }
       }
     }
   }
   .banner {
-    margin-top: 32rpx;
-    padding: 40rpx;
-    border-radius: 24rpx;
-    border: 1px solid #fff;
-    background: linear-gradient(to right, rgba(223, 214, 250, 1), rgba(229, 227, 240, 1));
-    .title {
-      font-size: 40rpx;
-      color: rgba(140, 117, 208, 1);
-      font-weight: bold;
-      text-align: center;
+    margin-top: 50rpx;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30rpx;
+    .edc {
+      height: 384rpx;
+      box-shadow: 0 4rpx 40rpx rgba(119, 80, 234, 0.34);
+      border-radius: 32rpx;
+      .e-img {
+        width: 100%;
+        height: 100%;
+      }
     }
-    .btn {
-      margin: 16rpx auto 0;
-      padding: 8rpx 0;
-      width: 330rpx;
-      text-align: center;
-      font-size: 32rpx;
-      color: rgba(255, 255, 255, 1);
-      background-color: rgba(140, 117, 208, 1);
-      border-radius: 64rpx;
+    .v-swiper {
+      position: relative;
+      height: 384rpx;
+      border-radius: 32rpx;
+      .swiper-item {
+        border-radius: 32rpx;
+        background-color: #fff;
+        .item1 {
+          padding: 32rpx;
+          .i-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .date {
+              .year {
+                font-size: 24rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 32rpx;
+              }
+              .day {
+                display: flex;
+                align-items: baseline;
+                font-size: 36rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 40rpx;
+                .sub {
+                  font-size: 22rpx;
+                }
+              }
+            }
+            .icon {
+              width: 68rpx;
+              height: 68rpx;
+            }
+          }
+          .content {
+            margin-top: 28rpx;
+            font-size: 30rpx;
+            color: rgba(33, 29, 46, 1);
+            line-height: 56rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+          }
+        }
+        .item2 {
+          padding: 32rpx;
+          .i-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .date {
+              .year {
+                font-size: 24rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 32rpx;
+              }
+              .day {
+                display: flex;
+                align-items: baseline;
+                font-size: 36rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 40rpx;
+                .sub {
+                  font-size: 22rpx;
+                }
+              }
+            }
+            .icon {
+              width: 68rpx;
+              height: 68rpx;
+            }
+          }
+          .status1 {
+            margin-top: 38rpx;
+            font-size: 40rpx;
+            color: rgba(195, 49, 0, 1);
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+            .s-icon {
+              width: 36rpx;
+              height: 36rpx;
+            }
+          }
+          .status2 {
+            margin-top: 38rpx;
+            font-size: 40rpx;
+            color: rgba(69, 163, 83, 1);
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+            .s-icon {
+              width: 36rpx;
+              height: 36rpx;
+            }
+          }
+          .status3 {
+            margin-top: 38rpx;
+            font-size: 40rpx;
+            color: rgba(185, 130, 255, 1);
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+            .s-icon {
+              width: 36rpx;
+              height: 36rpx;
+            }
+          }
+          .name {
+            margin-top: 44rpx;
+            font-size: 28rpx;
+            color: rgba(105, 104, 110, 1);
+            line-height: 44rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
+        }
+        .item3 {
+          padding: 32rpx;
+          .i-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .date {
+              .year {
+                font-size: 24rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 32rpx;
+              }
+              .day {
+                display: flex;
+                align-items: baseline;
+                font-size: 36rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 40rpx;
+                .sub {
+                  font-size: 22rpx;
+                }
+              }
+            }
+            .icon {
+              width: 68rpx;
+              height: 68rpx;
+            }
+          }
+          .status4 {
+            margin-top: 38rpx;
+            font-size: 40rpx;
+            color: rgba(185, 130, 255, 1);
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+            .s-icon {
+              width: 36rpx;
+              height: 36rpx;
+            }
+          }
+          .status2 {
+            margin-top: 38rpx;
+            font-size: 40rpx;
+            color: rgba(69, 163, 83, 1);
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+            .s-icon {
+              width: 36rpx;
+              height: 36rpx;
+            }
+          }
+          .name {
+            margin-top: 44rpx;
+            font-size: 28rpx;
+            color: rgba(105, 104, 110, 1);
+            line-height: 44rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
+        }
+        .item4 {
+          padding: 32rpx;
+          .i-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .date {
+              .year {
+                font-size: 24rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 32rpx;
+              }
+              .day {
+                display: flex;
+                align-items: baseline;
+                font-size: 36rpx;
+                color: rgba(173, 172, 178, 1);
+                line-height: 40rpx;
+                .sub {
+                  font-size: 22rpx;
+                }
+              }
+            }
+            .icon {
+              width: 68rpx;
+              height: 68rpx;
+            }
+          }
+          .num-line {
+            display: flex;
+            align-items: baseline;
+            font-size: 72rpx;
+            color: rgba(185, 130, 255, 1);
+            font-weight: bold;
+            .sub {
+              font-size: 32rpx;
+              color: rgba(33, 29, 46, 1);
+            }
+          }
+          .name {
+            margin-top: 44rpx;
+            font-size: 28rpx;
+            color: rgba(105, 104, 110, 1);
+            line-height: 44rpx;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
+        }
+
+        .item5 {
+          padding: 96rpx 22rpx 0;
+          .icon1 {
+            width: 276rpx;
+            height: 214rpx;
+          }
+          .title {
+            margin-top: -60rpx;
+            font-size: 32rpx;
+            color: rgba(173, 172, 178, 1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8rpx;
+            .icon2 {
+              width: 36rpx;
+              height: 36rpx;
+            }
+          }
+        }
+      }
+      .dots {
+        position: absolute;
+        bottom: 16rpx;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        .dot {
+          flex-shrink: 0;
+          width: 8rpx;
+          height: 8rpx;
+          border-radius: 50%;
+          background-color: rgba(231, 234, 236, 1);
+          transition: all 0.3s ease;
+          &.active {
+            width: 12rpx;
+            height: 12rpx;
+            background-color: rgba(195, 148, 255, 1);
+          }
+        }
+      }
+    }
+  }
+  .ad {
+    margin-top: 40rpx;
+    .swiper {
+      height: 224rpx;
+      .ad-img {
+        display: block;
+        width: 100%;
+        height: 224rpx;
+        border-radius: 24rpx;
+        box-shadow: 0 4rpx 22rpx 0 rgba(0, 0, 0, 0.03);
+      }
+    }
+  }
+  .briefing {
+    margin-top: 40rpx;
+    .b-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .title {
+        width: 140rpx;
+        height: 44rpx;
+      }
+      .more {
+        font-size: 28rpx;
+        color: rgba(173, 172, 178, 1);
+      }
+    }
+    .scroll {
+      margin: 24rpx -40rpx 0;
+      padding-left: 40rpx;
+      overflow-x: auto;
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 24rpx;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .card {
+        flex-shrink: 0;
+        width: 304rpx;
+        height: 404rpx;
+        border-radius: 32rpx;
+      }
+      .none {
+        padding: 102rpx 12rpx 0;
+        flex-shrink: 0;
+        width: 304rpx;
+        background-color: #fff;
+        border-radius: 32rpx;
+        .icon {
+          display: block;
+          margin: 0 auto;
+          width: 276rpx;
+          height: 230rpx;
+        }
+        .content {
+          margin-top: -90rpx;
+          font-size: 32rpx;
+          color: rgba(173, 172, 178, 1);
+          line-height: 48rpx;
+          text-align: center;
+        }
+      }
+    }
+  }
+  .sop {
+    margin-top: 40rpx;
+    .s-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .title {
+        width: 156rpx;
+        height: 44rpx;
+      }
+      .more {
+        font-size: 28rpx;
+        color: rgba(173, 172, 178, 1);
+      }
+    }
+    .scroll {
+      margin: 24rpx -40rpx 0;
+      padding-left: 40rpx;
+      overflow-x: auto;
+      display: flex;
+      flex-wrap: nowrap;
+      gap: 24rpx;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+      .card {
+        flex-shrink: 0;
+        width: 304rpx;
+        .photo {
+          width: 100%;
+          height: 304rpx;
+          border-radius: 32rpx 32rpx 0 0;
+        }
+        .content {
+          padding: 20rpx;
+          height: 132rpx;
+          box-sizing: border-box;
+          background-color: #fff;
+          border-radius: 0 0 32rpx 32rpx;
+          .center {
+            font-size: 28rpx;
+            color: rgba(33, 29, 46, 1);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
+        }
+      }
+      .none {
+        padding: 102rpx 12rpx 0;
+        flex-shrink: 0;
+        width: 304rpx;
+        background-color: #fff;
+        border-radius: 32rpx;
+        .icon {
+          display: block;
+          margin: 0 auto;
+          width: 276rpx;
+          height: 230rpx;
+        }
+        .content {
+          margin-top: -90rpx;
+          font-size: 32rpx;
+          color: rgba(173, 172, 178, 1);
+          line-height: 48rpx;
+          text-align: center;
+        }
+      }
     }
   }
   .message {
@@ -107,31 +526,16 @@ page {
       }
     }
   }
-  .ad {
-    margin-top: 32rpx;
-    .swiper {
-      height: 224rpx;
-      .ad-img {
-        display: block;
-        width: 100%;
-        height: 224rpx;
-        border-radius: 24rpx;
-        box-shadow: 0 4rpx 22rpx 0 rgba(0, 0, 0, 0.03);
-      }
-    }
-  }
   .list {
-    margin-top: 32rpx;
-    padding: 32rpx 20rpx;
-    background-color: #fff;
+    margin-top: 40rpx;
     border-radius: 24rpx;
     .list-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       .title {
-        width: 146rpx;
-        height: 34rpx;
+        width: 140rpx;
+        height: 44rpx;
       }
       .more {
         font-size: 28rpx;
@@ -140,17 +544,19 @@ page {
     }
     .card {
       margin: 24rpx 0 0;
+      padding: 32rpx;
       background-color: #fff;
       border-radius: 24rpx;
       display: flex;
+      gap: 24rpx;
       .photo {
         flex-shrink: 0;
         width: 176rpx;
         height: 176rpx;
-        border-radius: 12rpx;
+        border-radius: 24rpx;
       }
       .wrap {
-        padding: 12rpx 24rpx 0 24rpx;
+        padding-top: 12rpx;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -198,5 +604,28 @@ page {
         }
       }
     }
+    .none {
+      margin-top: 28rpx;
+      padding: 32rpx;
+      border-radius: 32rpx;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      gap: 46rpx;
+      .icon {
+        width: 176rpx;
+        height: 176rpx;
+      }
+      .content {
+        font-size: 32rpx;
+        color: rgba(173, 172, 178, 1);
+      }
+    }
+  }
+  .bottom {
+    margin: 56rpx auto 0;
+    display: block;
+    width: 234rpx;
+    height: 86rpx;
   }
 }

src/pages/home/index.ts

@@ -15,6 +15,8 @@ Page({
 
     userInfo: {},
     unReadMsgCount: 0,
+    current: 0,
+
     bannerList: [],
 
     list: [] as any[],
@@ -78,6 +80,12 @@ Page({
       url: '/pages/message/index',
     });
   },
+  handleSwiperChange(e) {
+    console.log('DEBUGPRINT[89]: index.ts:83: e=', e);
+    this.setData({
+      current: e.detail.current,
+    });
+  },
   getBanner() {
     wx.ajax({
       method: 'GET',
@@ -109,6 +117,7 @@ Page({
       url: '?r=xd/doctor/index/get-latest-material',
       data: {
         page: newPage,
+        count: 3,
       },
     }).then((res) => {
       res.list.forEach((item) => {

src/pages/home/index.wxml

@@ -4,7 +4,7 @@
 
 <view
   class="page"
-  style="background: url('{{imageUrl}}bg2.png?t={{Timestamp}}') no-repeat top center/100% 616rpx;padding-top: {{pageTop + 20}}px;"
+  style="background: url('{{imageUrl}}bg8.png?t={{Timestamp}}') no-repeat top center/100% 616rpx;padding-top: {{pageTop + 20}}px;"
 >
   <view class="user">
     <button class="avatar-wrapper">
@@ -18,24 +18,133 @@
       </view>
     </view>
   </view>
-  <view class="banner" bind:tap="handleWebview">
-    <view class="title">甲状腺眼突登记研究项目</view>
-    <view class="btn">点此进入EDC系统</view>
-  </view>
-  <view
-    class="message"
-    wx:if="{{unReadMsgCount > 0}}"
-    style="background: url('{{imageUrl}}bg3.png?t={{Timestamp}}') no-repeat top center/100% 150rpx"
-    bind:tap="handleNotice"
-  >
-    <view class="content {{unReadMsgCount > 0 && 'dot'}}">
-      您有
-      <text class="num">{{unReadMsgCount}}</text>
-      条新消息待查看
+  <view class="banner">
+    <view class="edc" bind:tap="handleWebview">
+      <image class="e-img" src="/images/card1.png"></image>
     </view>
+    <swiper class="v-swiper" current="{{current}}" bind:change="handleSwiperChange">
+      <swiper-item class="swiper-item" wx:for="{{8}}" wx:key="index">
+        <!-- 文字 -->
+        <view class="item1" wx:if="{{false}}">
+          <view class="i-header">
+            <view class="date">
+              <view class="year">2025</view>
+              <view class="day">
+                6
+                <text class="sub">月</text>
+                1
+                <text class="sub">日</text>
+              </view>
+            </view>
+            <image class="icon" src="/images/icon12.png"></image>
+          </view>
+          <view class="content">
+            您有一份甲状腺登记研究简报25.06第一期，该请查收您有一份甲状腺登记研究简报25.06第一期，该请查收
+          </view>
+        </view>
+        <!-- 伦理 -->
+        <view class="item2" wx:elif="{{false}}">
+          <view class="i-header">
+            <view class="date">
+              <view class="year">2025</view>
+              <view class="day">
+                6
+                <text class="sub">月</text>
+                1
+                <text class="sub">日</text>
+              </view>
+            </view>
+            <image class="icon" src="/images/icon13.png"></image>
+          </view>
+          <view class="status1" wx:if="{{true}}">
+            未通过
+            <image class="s-icon" src="/images/icon19.png"></image>
+          </view>
+          <view class="status2" wx:elif="{{false}}">
+            未通过
+            <image class="s-icon" src="/images/icon20.png"></image>
+          </view>
+          <view class="status3" wx:elif="{{false}}">
+            未通过
+            <image class="s-icon" src="/images/icon21.png"></image>
+          </view>
+          <view class="name">
+            中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院
+            中国医科大学附属第一医院
+          </view>
+        </view>
+        <!-- edc -->
+        <view class="item3" wx:elif="{{false}}">
+          <view class="i-header">
+            <view class="date">
+              <view class="year">2025</view>
+              <view class="day">
+                6
+                <text class="sub">月</text>
+                1
+                <text class="sub">日</text>
+              </view>
+            </view>
+            <image class="icon" src="/images/icon14.png"></image>
+          </view>
+          <view class="status4" wx:if="{{true}}">
+            已上会
+            <image class="s-icon" src="/images/icon21.png"></image>
+          </view>
+          <view class="status2" wx:elif="{{false}}">
+            未通过
+            <image class="s-icon" src="/images/icon20.png"></image>
+          </view>
+          <view class="name">
+            中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院
+            中国医科大学附属第一医院
+          </view>
+        </view>
+        <!-- 入组 -->
+        <view class="item4" wx:elif="{{false}}">
+          <view class="i-header">
+            <view class="date">
+              <view class="year">2025</view>
+              <view class="day">
+                6
+                <text class="sub">月</text>
+                1
+                <text class="sub">日</text>
+              </view>
+            </view>
+            <image class="icon" src="/images/icon12.png"></image>
+          </view>
+          <view class="num-line">
+            7
+            <view class="sub">例入组</view>
+          </view>
+          <view class="name">
+            中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院
+            中国医科大学附属第一医院
+          </view>
+        </view>
+        <!-- more -->
+        <view class="item5">
+          <image class="icon1" src="/images/icon17.png"></image>
+          <view class="title">
+            查看更多
+            <image class="icon2" src="/images/icon18.png"></image>
+          </view>
+        </view>
+      </swiper-item>
+      <view class="dots">
+        <view class="dot {{index==0 && 'active'}}" wx:for="{{6}}"></view>
+      </view>
+    </swiper>
   </view>
   <view class="ad">
-    <swiper class="swiper">
+    <swiper
+      class="swiper"
+      autoplay
+      indicator-dots
+      indicator-color="rgba(231, 234, 236, 1)"
+      indicator-active-color="rgba(195, 148, 255, 1)"
+    >
       <swiper-item
         class="swiper-item"
         wx:for="{{bannerList}}"
@@ -47,6 +156,57 @@
       </swiper-item>
     </swiper>
   </view>
+  <view class="briefing">
+    <view class="b-header">
+      <image class="title" src="/images/title4.png"></image>
+      <view class="more">
+        查看全部
+        <van-icon name="arrow" />
+      </view>
+    </view>
+    <view class="scroll">
+      <image
+        wx:for="{{10}}"
+        wx:key="index"
+        class="card"
+        src="https://pic1.zhimg.com/50/v2-dcfbab1219ae4f7a7a6db168bb1580a2_720w.jpg?source=2c26e567"
+      ></image>
+      <view class="none">
+        <image class="icon" src="/images/none1.png"></image>
+        <view class="content">
+          更多内容
+          <view></view>
+          敬请期待
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="sop">
+    <view class="s-header">
+      <image class="title" src="/images/title5.png"></image>
+    </view>
+    <view class="scroll">
+      <view class="card" wx:for="{{10}}" wx:key="index">
+        <image
+          class="photo"
+          src="https://pic1.zhimg.com/50/v2-dcfbab1219ae4f7a7a6db168bb1580a2_720w.jpg?source=2c26e567"
+        ></image>
+        <view class="content">
+          <view class="center">替妥尤单抗的作用机制、适用场景、使用方式</view>
+        </view>
+      </view>
+      <view class="none">
+        <image class="icon" src="/images/none1.png"></image>
+        <view class="content">
+          更多内容
+          <view></view>
+          敬请期待
+        </view>
+      </view>
+    </view>
+  </view>
+
   <view class="list">
     <view class="list-header" bind:tap="handleMore">
       <image class="title" src="{{imageUrl}}title3.png?t={{Timestamp}}"></image>
@@ -73,7 +233,13 @@
         </view>
       </view>
     </view>
+    <view class="none">
+      <image class="icon" src="/images/none2.png"></image>
+      <view class="content">建设中 敬请期待...</view>
+    </view>
   </view>
+
+  <image class="bottom" src="/images/bottom1.png"></image>
 </view>
 
 <popup

src/pages/message/index.scss

@@ -1,57 +1,98 @@
 page {
-  background-color: rgba(247, 246, 250, 1);
+  background-color: rgba(246, 248, 249, 1);
 }
 .page {
   padding: 32rpx 30rpx;
-  .card1 {
-    margin-bottom: 32rpx;
-    padding: 0 32rpx;
-    border-radius: 24rpx;
+  .card {
+    position: relative;
+    padding: 32rpx 120rpx 32rpx 32rpx;
+    border-radius: 32rpx;
     background-color: #fff;
-    .title {
-      padding: 32rpx 0 24rpx;
+    .stage {
+      position: absolute;
+      top: 26rpx;
+      right: 32rpx;
+      width: 96rpx;
+      height: 96rpx;
+    }
+    .date {
       font-size: 32rpx;
-      color: rgba(33, 29, 46, 1);
-      font-weight: bold;
+      color: rgba(173, 172, 178, 1);
+      line-height: 48rpx;
     }
     .content {
-      padding-bottom: 32rpx;
+      margin-top: 16rpx;
       font-size: 32rpx;
-      color: rgba(105, 104, 110, 1);
-      line-height: 48rpx;
-      border-bottom: 1px solid rgba(173, 172, 178, 0.1);
+      color: rgba(33, 29, 46, 1);
     }
-    .c-footer {
-      padding: 24rpx 0;
+    .status1 {
+      margin-top: 38rpx;
+      font-size: 40rpx;
+      color: rgba(195, 49, 0, 1);
+      font-weight: bold;
       display: flex;
       align-items: center;
-      justify-content: space-between;
-      .btn {
-        font-size: 32rpx;
-        color: rgba(105, 104, 110, 1);
+      gap: 12rpx;
+      .s-icon {
+        width: 36rpx;
+        height: 36rpx;
       }
-      .more {
-        width: 16rpx;
+    }
+    .status2 {
+      margin-top: 38rpx;
+      font-size: 40rpx;
+      color: rgba(69, 163, 83, 1);
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      .s-icon {
+        width: 36rpx;
         height: 36rpx;
       }
     }
-  }
-  .card2 {
-    margin-bottom: 32rpx;
-    padding: 32rpx;
-    border-radius: 24rpx;
-    background-color: #fff;
-    .title {
-      font-size: 32rpx;
-      color: rgba(33, 29, 46, 1);
-      line-height: 48rpx;
+    .status3 {
+      margin-top: 38rpx;
+      font-size: 40rpx;
+      color: rgba(185, 130, 255, 1);
       font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      .s-icon {
+        width: 36rpx;
+        height: 36rpx;
+      }
     }
-    .photo {
-      margin-top: 24rpx;
-      width: 100%;
-      height: 260rpx;
-      border-radius: 16rpx;
+    .status4 {
+      margin-top: 38rpx;
+      font-size: 40rpx;
+      color: rgba(185, 130, 255, 1);
+      font-weight: bold;
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+      .s-icon {
+        width: 36rpx;
+        height: 36rpx;
+      }
+    }
+    .num-line {
+      display: flex;
+      align-items: baseline;
+      font-size: 72rpx;
+      color: rgba(185, 130, 255, 1);
+      font-weight: bold;
+      .sub {
+        font-size: 32rpx;
+        color: rgba(33, 29, 46, 1);
+      }
+    }
+    .name {
+      margin-top: 16rpx;
+      font-size: 28rpx;
+      color: rgba(105, 104, 110, 1);
+      line-height: 44rpx;
     }
   }
 }

src/pages/message/index.ts

@@ -12,6 +12,9 @@ Page({
   onLoad() {
     app.waitLogin().then(() => {
       this.getList();
+      wx.setNavigationBarTitle({
+        title: '消息（20）',
+      });
     });
   },
   getList(newPage = 1) {

src/pages/message/index.wxml

@@ -1,23 +1,54 @@
 <view class="page">
-  <view class="card1">
-    <view class="title">项目进展更新</view>
-    <view class="content">
-      随着城市化进程的加速，城市交通拥堵问题日益严重，给人们的生活和工作带来了诸多不便。汽车尾气排放导致空气污染加剧...
+  <view class="card">
+    <image class="stage" src="/images/icon12.png"></image>
+    <image class="stage" src="/images/icon13.png"></image>
+    <image class="stage" src="/images/icon14.png"></image>
+    <view class="date">2025年 6月1日</view>
+    <view class="wrap1">
+      <view class="content">您有一份甲状腺登记研究简报(2025.06第一期)，该请查收</view>
     </view>
-    <view class="c-footer">
-      <view class="btn">去查看</view>
-      <image class="more" src="{{imageUrl}}icon3.png?t={{Timestamp}}"></image>
+    <view class="wrap2">
+      <view class="status1" wx:if="{{true}}">
+        未通过
+        <image class="s-icon" src="/images/icon19.png"></image>
+      </view>
+      <view class="status2" wx:elif="{{false}}">
+        未通过
+        <image class="s-icon" src="/images/icon20.png"></image>
+      </view>
+      <view class="status3" wx:elif="{{false}}">
+        未通过
+        <image class="s-icon" src="/images/icon21.png"></image>
+      </view>
+      <view class="name">
+        中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院
+        中国医科大学附属第一医院
+      </view>
     </view>
-  </view>
-  <view class="card2">
-    <view class="title">
-      随着城市化进程的加速，城市交通拥堵问题日益严重，给人们的生活和工作带来了诸多不便。汽车尾气排放导致空气污染加剧...
+    <view class="wrap3">
+      <view class="status4" wx:if="{{true}}">
+        未通过
+        <image class="s-icon" src="/images/icon21.png"></image>
+      </view>
+      <view class="status2" wx:elif="{{false}}">
+        未通过
+        <image class="s-icon" src="/images/icon20.png"></image>
+      </view>
+      <view class="name">
+        中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院
+        中国医科大学附属第一医院
+      </view>
+    </view>
+    <view class="wrap4">
+      <view class="num-line">
+        7
+        <view class="sub">例入组</view>
+      </view>
+      <view class="name">
+        中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院 中国医科大学附属第一医院
+        中国医科大学附属第一医院
+      </view>
     </view>
-    <image
-      class="photo"
-      mode="aspectFill"
-      src="https://pic1.zhimg.com/50/v2-dcfbab1219ae4f7a7a6db168bb1580a2_720w.jpg?source=2c26e567"
-    ></image>
   </view>
   <pagination pagination="{{pagination}}"></pagination>
 </view>