ChronicDisease_UniApp/src/pages/index/index.vue

<template>
  <CustomNav title="慢病APP" leftType="none" />
  <view class="content">
    <!-- 轮播图 -->
    <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>

<script setup lang="ts">
import { ref } from 'vue'
import PageTitle from '@/components/PageTitle.vue'
import CustomNav from '@/components/CustomNav.vue'

const title = ref('Hello')

const bannerImages = [
  '/static/logo.png',
  '/static/logo.png',
  '/static/logo.png'
]

const cards = [
  { title: '健康档案', desc: '管理您的健康信息' },
  { title: '慢病管理', desc: '查看慢病相关数据' },
  { title: '健康咨询', desc: '在线咨询医生' },
  { title: '用药提醒', desc: '设置用药提醒' }
]
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: calc(var(--status-bar-height) + 44px);
  padding-bottom: 100rpx;
  height: calc(100vh - var(--status-bar-height) - 44px - 100rpx);
  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;
}

.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;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
</style>