code

src/app.ts

@@ -63,6 +63,11 @@ App<IAppOption>({
       obeyMuteSwitch: false,
       mixWithOther: false,
     })
+    wx.login({
+      success: (res) => {
+        console.log('code',res)
+      },
+    })
   },
   onShow(options) {
     if (options.query.scene) {

src/pages/index/index.scss

@@ -3,6 +3,8 @@
   height: 92rpx;
 }
 .page {
+  padding-bottom: 200rpx;
+  background-color: #f7f7fa;
   .banner {
     width: 100vw;
     height: 556rpx;
@@ -14,5 +16,151 @@
     }
   }
   .page-containr {
+    position: relative;
+    z-index: 1;
+    margin-top: -26rpx;
+    padding: 42rpx 40rpx;
+    background: linear-gradient(346deg, #f7f7fa 0%, #ffe5dc 100%);
+    border-radius: 32rpx 32rpx 0 0;
+    .apply {
+      position: relative;
+      .a-img {
+        width: 670rpx;
+        height: 136rpx;
+      }
+      .a-label {
+        position: absolute;
+        top: -8rpx;
+        right: 68rpx;
+        width: 115rpx;
+        height: 60rpx;
+      }
+    }
+    .module1 {
+      margin-top: 54rpx;
+      .module-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .title {
+          height: 40rpx;
+        }
+        .more {
+          font-size: 28rpx;
+          color: rgba(1, 1, 5, 0.4);
+          display: flex;
+          align-items: center;
+          .icon {
+            margin-left: 2rpx;
+            width: 32rpx;
+            height: 32rpx;
+          }
+        }
+      }
+      .module-list {
+        margin: 24rpx -40rpx 0;
+        padding-left: 40rpx;
+        display: flex;
+        gap: 24rpx;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        .module-item {
+          border-radius: 24rpx;
+          background: #ffffff;
+          .item-img {
+            border-radius: 24rpx 24rpx 0 0;
+            width: 424rpx;
+            height: 220rpx;
+          }
+          .item-title {
+            padding: 20rpx;
+            font-size: 28rpx;
+            color: #010105;
+            line-height: 32rpx;
+          }
+        }
+      }
+    }
+
+    .module2 {
+      margin-top: 54rpx;
+      .module-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        .title {
+          height: 40rpx;
+        }
+        .more {
+          font-size: 28rpx;
+          color: rgba(1, 1, 5, 0.4);
+          display: flex;
+          align-items: center;
+          .icon {
+            margin-left: 2rpx;
+            width: 32rpx;
+            height: 32rpx;
+          }
+        }
+      }
+      .module-list {
+        margin: 24rpx -40rpx 0;
+        padding-left: 40rpx;
+        display: flex;
+        gap: 24rpx;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        .module-item {
+          padding: 24rpx 32rpx;
+          width: 424rpx;
+          box-sizing: border-box;
+          border-radius: 24rpx;
+          border: 2rpx solid #ffffff;
+          background: linear-gradient(12deg, #ffffff 0%, #ffe8e6 100%);
+          .item-header {
+            padding-bottom: 24rpx;
+            display: flex;
+            align-items: center;
+            gap: 12rpx;
+            border-bottom: 1px dashed #f0f0f6;
+            .icon {
+              flex-shrink: 0;
+              width: 36rpx;
+              height: 36rpx;
+            }
+            .title {
+              font-weight: bold;
+              font-size: 28rpx;
+              color: #010105;
+            }
+          }
+          .content {
+            padding: 16rpx 0;
+            font-size: 28rpx;
+            color: #010105;
+            line-height: 48rpx;
+          }
+          .item-footer {
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 24rpx;
+            font-size: 24rpx;
+            color: #f23a2f;
+            .icon {
+              width: 24rpx;
+              height: 28rpx;
+            }
+          }
+        }
+      }
+    }
   }
 }

src/pages/index/index.wxml

@@ -10,8 +10,65 @@
   <view class="page-containr">
     <view class="apply">
       <image class="a-img" src="/images/index-apply.png"></image>
+      <image class="a-label" src="/images/index-apply-label.png"></image>
+    </view>
+    <view class="module1">
+      <view class="module-header">
+        <image class="title" src="/images/index-title2.png" mode="heightFix"></image>
+        <view class="more">
+          查看更多
+          <image class="icon" src="/images/icon1.png"></image>
+        </view>
+      </view>
+      <view class="module-list">
+        <view class="module-item" bindtap="onModuleItemTap" data-id="1">
+          <image
+            class="item-img"
+            src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567"
+          ></image>
+          <view class="item-title">基因治疗</view>
+        </view>
+        <view class="module-item" bindtap="onModuleItemTap" data-id="2">
+          <image
+            class="item-img"
+            src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567"
+          ></image>
+          <view class="item-title">基因检测</view>
+        </view>
+        <view class="module-item" bindtap="onModuleItemTap" data-id="3">
+          <image
+            class="item-img"
+            src="https://pic1.zhimg.com/50/v2-8cfef5f9ea7d15963af2277c6814f152_720w.jpg?source=2c26e567"
+          ></image>
+          <view class="item-title">基因组学</view>
+        </view>
+      </view>
+    </view>
+    <view class="module2">
+      <view class="module-header">
+        <image class="title" src="/images/index-title3.png" mode="heightFix"></image>
+        <view class="more">
+          查看更多
+          <image class="icon" src="/images/icon1.png"></image>
+        </view>
+      </view>
+      <view class="module-list">
+        <view class="module-item" bindtap="onModuleItemTap" data-id="1">
+          <view class="item-header">
+            <image class="icon" src="/images/icon2.png"></image>
+            <view class="title">基因疗法适合多大年龄？</view>
+          </view>
+          <view class="content">目前的治疗方案适合 18 岁以上成人，暂不支持儿童及...</view>
+          <view class="item-footer">
+            <view class="star">
+              <image class="icon" src="/images/icon3.png"></image>
+              123
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
-</view>
 
-<popup model:show="{{popupShow}}" type="{{popupType}}" params="{{popupParams}}"></popup>
+  <popup model:show="{{popupShow}}" type="{{popupType}}" params="{{popupParams}}"></popup>
+</view>