ChronicDisease_UniApp/src/pages/health/health.vue

<template>
  <CustomNav title="健康数据" leftType="none" />
  <view class="content">
    <view class="menu-card">
      <view class="menu-list">
        <view class="menu-item" @click="openDetail('height')">
          <image src="/static/icons/remixicon/height.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">身高</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('weight')">
          <image src="/static/icons/remixicon/weight.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">体重</text>
          <text class="menu-value">80.0 公斤</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('bmi')">
          <image src="/static/icons/remixicon/bmi.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">BMI</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('blood-pressure')"><image src="/static/icons/remixicon/scan-line.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">血压</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('blood-glucose')"><image src="/static/icons/remixicon/contrast-drop-2-line.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">血糖</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
        <view class="menu-item" @click="openDetail('heart-rate')">
          <image src="/static/icons/remixicon/heart-pulse.svg" class="menu-icon" mode="widthFix" />
          <text class="menu-text">心率</text>
          <text class="menu-value">--</text>
          <uni-icons class="menu-arrow" type="arrowright" size="20" color="#c0c0c0" />
        </view>
      </view>
    </view>
  </view>
  <TabBar />
</template>

<script setup lang="ts">
import { ref } from 'vue'

import CustomNav from '@/components/CustomNav.vue'
import TabBar from '@/components/TabBar.vue'

const title = ref('健康数据')

const openDetail = (type: string) => {
  uni.navigateTo({ url: `/pages/health/${type}` })
}
</script>

<style scoped>
.content {
  padding-top: calc(var(--status-bar-height) + 44px);
  min-height: 100vh;
  background-color: #f5f5f5;
  box-sizing: border-box;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.menu-card {
  padding: 50rpx 0rpx;
}

.menu-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.menu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.menu-item:last-child {
  border-bottom: none
}

.menu-text {
  font-size: 32rpx;
  color: #000000;
  flex: 1;
  /* 字符间距，调整数值以获得所需视觉效果 */
  letter-spacing: 1rpx;
}

.menu-value {
  font-size: 28rpx;
  color: #5a5a5a;
  margin-right: 10rpx
}

.menu-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44rpx;
  height: 44rpx;
}

.menu-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 30rpx;
  display: inline-block;
}
</style>