feat: 新增轮播图和卡片列表，展示健康相关信息

src/pages/index/index.vue

@@ -1,8 +1,19 @@
 <template>
   <CustomNav title="慢病APP" leftType="none" />
   <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <PageTitle :title="title" />
+    <!-- 轮播图 -->
+    <swiper class="banner-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :circular="true">
+      <swiper-item v-for="(img, idx) in bannerImages" :key="idx">
+        <image :src="img" class="banner-img" mode="aspectFill" />
+      </swiper-item>
+    </swiper>
+    <!-- 卡片列表 -->
+    <view class="card-list">
+      <view class="card" v-for="(card, idx) in cards" :key="idx">
+        <view class="card-title">{{ card.title }}</view>
+        <view class="card-desc">{{ card.desc }}</view>
+      </view>
+    </view>
   </view>
 </template>
 
@@ -12,6 +23,19 @@ import PageTitle from '@/components/PageTitle.vue'
 import CustomNav from '@/components/CustomNav.vue'
 
 const title = ref('Hello')
+
+const bannerImages = [
+  'https://cdn.jsdelivr.net/gh/Chanzhaoyu/chatgpt-web@main/public/banner1.jpg',
+  'https://cdn.jsdelivr.net/gh/Chanzhaoyu/chatgpt-web@main/public/banner2.jpg',
+  'https://cdn.jsdelivr.net/gh/Chanzhaoyu/chatgpt-web@main/public/banner3.jpg'
+]
+
+const cards = [
+  { title: '健康档案', desc: '管理您的健康信息' },
+  { title: '慢病管理', desc: '查看慢病相关数据' },
+  { title: '健康咨询', desc: '在线咨询医生' },
+  { title: '用药提醒', desc: '设置用药提醒' }
+]
 </script>
 
 <style>
@@ -19,19 +43,70 @@ const title = ref('Hello')
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
   padding-top: calc(var(--status-bar-height) + 44px);
-  padding-bottom: 100rpx; /* 给底边栏留空间 */
+  padding-bottom: 100rpx;
+  min-height: 100vh;
+  background: #f7f8fa;
+}
+
+.banner-swiper {
+  width: 670rpx;
+  max-width: 100vw;
+  height: 300rpx;
+  margin: 20rpx auto 30rpx auto;
+  border-radius: 16rpx;
+  overflow: hidden;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
+  background: #fff;
+}
+
+.banner-img {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.card-list {
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  gap: 32rpx;
+  padding: 0 40rpx;
+  margin: 0 auto;
 }
 
-.logo {
+.card {
+  /* 不设置width，宽度由父容器控制 */
+  background: #fff;
+  border-radius: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
+  padding: 40rpx 32rpx;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+.card-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 16rpx;
+}
+
+.card-desc {
+  font-size: 28rpx;
+  color: #888;
+}
+
+/* .logo {
   height: 200rpx;
   width: 200rpx;
   margin-top: 200rpx;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 50rpx;
-}
+} */
 
 .text-area {
   display: flex;