ChronicDisease_UniApp/src/pages/patient/health/details/physical.vue

<template>
  <CustomNav title="体格数据" leftType="back" />
  <view class="page">

    <view class="header">
      <view class="month-selector">
        <button class="btn" @click="prevPeriod">‹</button>
        <view class="period-controls">
          <picker mode="multiSelector" :value="pickerValue" :range="pickerRange" @change="onPickerChange">
            <view class="month-label">{{ displayPeriod }}</view>
          </picker>
          <view class="view-toggle">
            <button :class="['toggle-btn', { active: viewMode === 'month' }]" @click="setViewMode('month')">月</button>
            <button :class="['toggle-btn', { active: viewMode === 'week' }]" @click="setViewMode('week')">周</button>
          </view>
                  <view class="metric-toggle" style="margin-top:8rpx; display:flex; gap:8rpx;">
                    <button :class="['toggle-btn', { active: selectedMetric === 'all' }]" @click.prevent="selectedMetric = 'all'">全部</button>
                    <button :class="['toggle-btn', { active: selectedMetric === 'height' }]" @click.prevent="selectedMetric = 'height'">身高</button>
                    <button :class="['toggle-btn', { active: selectedMetric === 'weight' }]" @click.prevent="selectedMetric = 'weight'">体重</button>
                    <button :class="['toggle-btn', { active: selectedMetric === 'bmi' }]" @click.prevent="selectedMetric = 'bmi'">BMI</button>
                  </view>
        </view>
        <button class="btn" @click="nextPeriod">›</button>
      </view>
    </view>

    <!-- 趋势图 - 简化canvas设置 -->
    <view class="chart-wrap">
  <view class="chart-header">本月趋势</view>
      <canvas 
        canvas-id="bpChart" 
        id="bpChart" 
        class="chart-canvas"
        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
      ></canvas>
    </view>

    <view class="content">
  <view class="summary">共 {{ records.length }} 条记录，本月平均：{{ averageHeight }} cm / {{ averageWeight }} kg；平均 BMI：{{ averageBMI }}</view>

      <view class="list">
        <view v-if="records.length === 0" class="empty">暂无记录，点击右下角 + 添加</view>
        <view v-for="item in records" :key="item.id" class="list-item" :style="{ backgroundColor: getItemColor(item.h, item.w) }">
          <view class="date">{{ item.date }}</view>
          <view class="value">{{ item.h }} cm / {{ item.w }} kg · BMI {{ item.bmi }}</view>
          <button class="btn-delete" @click="confirmDeleteRecord(item.id)">✕</button>
        </view>
      </view>
    </view>

    <view class="fab" @click="openAdd">
      <view class="fab-inner">+</view>
    </view>

    <view class="modal" v-if="showAdd">
      <view class="modal-backdrop" @click="closeAdd"></view>
  <view class="modal-panel">
        <view class="drag-handle"></view>
  <view class="modal-header"><text class="modal-title">添加体格数据</text></view>

        <view class="modal-inner">
          <view class="form-row">
            <text class="label">日期</text>
            <picker mode="date" :value="addDate" @change="onAddDateChange">
              <view class="picker-display">{{ addDateLabel }}</view>
            </picker>
          </view>

          <view class="form-row">
            <text class="label">身高 (cm)</text>
            <input type="number" v-model.number="addHeight" class="input" placeholder="身高 (cm)" />
          </view>
          <view class="form-row">
            <text class="label">体重 (kg)</text>
            <input type="number" v-model.number="addWeight" class="input" placeholder="体重 (kg)" />
          </view>
        </view>

        <!--提供滑动条（收缩压70-200，舒张压40-120）-->
        <view class="ruler-wrap">
          <view class="ruler-row">
            <ScaleRuler v-if="showAdd" :min="100" :max="220" :step="1" :gutter="16" :initialValue="addHeight ?? 170" @update="onHUpdate" @change="onHChange" />
          </view>
          <view class="ruler-row">
            <ScaleRuler v-if="showAdd" :min="30" :max="200" :step="1" :gutter="16" :initialValue="addWeight ?? 65" @update="onWUpdate" @change="onWChange" />
          </view>
        </view>

        <view class="fixed-footer">
          <button class="btn-primary btn-full" @click="confirmAdd">保存</button>
        </view>
      </view>
    </view>

  </view>

</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick, onBeforeUnmount, getCurrentInstance } from 'vue'
import { createUChart } from '@/composables/useUChart'
import CustomNav from '@/components/custom-nav.vue'

import ScaleRuler from '@/components/scale-ruler.vue'
import { getWeekStart, getWeekEnd, formatDisplayDate, formatPickerDate, daysInMonth } from '@/utils/date'
import { getWindowWidth, rpxToPx } from '@/utils/platform'

type RecordItem = { id: string; date: string; h: number; w: number; bmi: number }

// 当前展示年月
const current = ref(new Date())
// 使用 multiSelector 的索引形式： [yearOffset从2000起, month(0-11)]
const pickerValue = ref([current.value.getFullYear() - 2000, current.value.getMonth()])

// 视图模式：'month' 或 'week'
const viewMode = ref<'month' | 'week'>('month')

// 年月选择器的选项范围（与 height/weight 保持一致）
const pickerRange = ref([
  Array.from({ length: 50 }, (_, i) => `${2000 + i}年`),
  Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
])

// 明确的canvas尺寸（将由 getCanvasSize 初始化以匹配设备宽度）
const canvasWidth = ref(700) // 初始值，会在 mounted 时覆盖
const canvasHeight = ref(320)

// 获取Canvas实际尺寸的函数 - 参考微信小程序示例使用固定尺寸
function getCanvasSize(): Promise<{ width: number; height: number }> {
  return new Promise(async (resolve) => {
    const width = await getWindowWidth().catch(() => 375)
    const height = Math.round((320 / 750) * width)
    resolve({ width, height })
  })
}

// 使用 formatPickerDate 从 src/utils/date.ts

const displayYear = computed(() => current.value.getFullYear())
const displayMonth = computed(() => current.value.getMonth() + 1)

// 显示周期（支持月/周）
const displayPeriod = computed(() => {
  if (viewMode.value === 'month') {
    return `${displayYear.value}年 ${displayMonth.value}月`
  } else {
    const weekStart = getWeekStart(current.value)
    const weekEnd = getWeekEnd(current.value)
    return `${formatDisplayDate(weekStart)} - ${formatDisplayDate(weekEnd)}`
  }
})

const records = ref<RecordItem[]>(generateMockRecords(current.value))

function generateMockRecords(d: Date): RecordItem[] {
  const arr: RecordItem[] = []
  if (viewMode.value === 'month') {
    const y = d.getFullYear()
    const m = d.getMonth()
    const n = Math.floor(Math.random() * Math.min(daysInMonth(y, m), 7))
    for (let i = 0; i < n; i++) {
      const day = Math.max(1, Math.floor(Math.random() * daysInMonth(y, m)) + 1)
      const date = new Date(y, m, day)
      // 随机生成身高（150-190）和体重（45-100）作为示例数据
  const h = 150 + Math.floor(Math.random() * 40)
  const w = 45 + Math.floor(Math.random() * 55)
  const bmi = Math.round((w / ((h / 100) * (h / 100))) * 10) / 10
  arr.push({ id: `${date.getTime()}-${i}`, date: formatDisplayDate(date), h, w, bmi })
    }
  } else {
    const weekStart = getWeekStart(d)
    const n = Math.floor(Math.random() * 7)
    for (let i = 0; i < n; i++) {
      const dayOffset = Math.floor(Math.random() * 7)
      const date = new Date(weekStart)
      date.setDate(weekStart.getDate() + dayOffset)
  const h = 150 + Math.floor(Math.random() * 40)
  const w = 45 + Math.floor(Math.random() * 55)
  const bmi = Math.round((w / ((h / 100) * (h / 100))) * 10) / 10
  arr.push({ id: `${date.getTime()}-${i}`, date: formatDisplayDate(date), h, w, bmi })
    }
  }
  return arr.sort((a, b) => (a.date < b.date ? 1 : -1))
}

// 将 records 聚合为每天一个点（取最新记录）
function aggregateDaily(recordsArr: RecordItem[], year: number, month: number) {
  const map = new Map<number, RecordItem>()
  for (const r of recordsArr) {
    const parts = r.date.split('-')
    if (parts.length >= 3) {
      const y = parseInt(parts[0], 10)
      const m = parseInt(parts[1], 10) - 1
      const d = parseInt(parts[2], 10)
      if (y === year && m === month) {
        // 覆盖同一天，保留最新的（数组头部为最新）
        map.set(d, r)
      }
    }
  }
  // 返回按日索引的数组
  return map
}

const averageHeight = computed(() => {
  if (records.value.length === 0) return '--'
  const sum = records.value.reduce((s, r) => s + r.h, 0)
  return Math.round(sum / records.value.length)
})
const averageWeight = computed(() => {
  if (records.value.length === 0) return '--'
  const sum = records.value.reduce((s, r) => s + r.w, 0)
  return Math.round(sum / records.value.length)
})
const averageBMI = computed(() => {
  if (records.value.length === 0) return '--'
  const sum = records.value.reduce((s, r) => s + (r.bmi || 0), 0)
  return Math.round((sum / records.value.length) * 10) / 10
})

// 根据血压值获取颜色
function getItemColor(h: number, w: number): string {
  // 根据 BMI 简单分类
  if (!h || !w) return '#ffffff'
  const bmi = w / ((h / 100) * (h / 100))
  if (bmi < 18.5) return '#fff3cd' // 偏瘦 - 黄
  if (bmi < 25) return '#e8f5e8' // 正常 - 绿
  if (bmi < 30) return '#fff3cd' // 超重 - 黄
  return '#f8d7da' // 肥胖 - 红
}

// 使用共享日期工具 (src/utils/date.ts)

// 使用可复用的 chart composable，支持多序列
const vm = getCurrentInstance()

// 选择显示的指标：'all' | 'height' | 'weight' | 'bmi'
const selectedMetric = ref<'all'|'height'|'weight'|'bmi'>('all')

let bpChart: any = null

function createChartForMetric(metric: 'all'|'height'|'weight'|'bmi') {
  const seriesMap: Record<string, { names: string[]; accessors: Array<(r:any)=>number>; colors: string[] }> = {
    all: { names: ['身高','体重','BMI'], accessors: [ (r: RecordItem) => r.h, (r: RecordItem) => r.w, (r: RecordItem) => r.bmi ], colors: ['#ff6a00', '#007aff', '#28c76f'] },
    height: { names: ['身高'], accessors: [ (r: RecordItem) => r.h ], colors: ['#ff6a00'] },
    weight: { names: ['体重'], accessors: [ (r: RecordItem) => r.w ], colors: ['#007aff'] },
    bmi: { names: ['BMI'], accessors: [ (r: RecordItem) => r.bmi ], colors: ['#28c76f'] }
  }
  const cfg = seriesMap[metric]
  return createUChart({
    canvasId: 'bpChart',
    vm,
    getCanvasSize,
    seriesNames: cfg.names,
    valueAccessors: cfg.accessors,
    colors: cfg.colors
  })
}

// 延迟创建 chart：在 mounted 时先读取路由参数（metric），然后创建 chart 并绘制
function initMetricFromRoute() {
  try {
    // 在 uni-app 中，可通过 getCurrentPages 获取当前页面的 options（包含 query）
    const pages = typeof getCurrentPages === 'function' ? getCurrentPages() : []
    const currentPage = pages[pages.length - 1] || {}
  const opts = (currentPage && (currentPage as any).options) ? (currentPage as any).options : {}
  const metricParam = opts.metric || opts?.metric
    if (metricParam && ['all', 'height', 'weight', 'bmi'].includes(metricParam)) {
      ;(selectedMetric as any).value = metricParam
    }
  } catch (e) {
    console.warn('initMetricFromRoute error', e)
  }
}

onMounted(() => {
  // 延迟确保DOM渲染完成并设置canvas尺寸
  setTimeout(async () => {
    await nextTick()
    try {
      const size = await getCanvasSize()
      canvasWidth.value = size.width
      canvasHeight.value = size.height
    } catch (e) {
      console.warn('getCanvasSize failed on mounted', e)
    }

    // 先从路由读取 metric（如果有），然后创建 chart
    initMetricFromRoute()
    try {
      if (!bpChart) bpChart = createChartForMetric(selectedMetric.value)
    } catch (e) {
      console.warn('createChartForMetric failed', e)
    }

    try {
      if (bpChart && bpChart.draw) await bpChart.draw(records, current, viewMode)
    } catch (e) {
      console.warn('bpChart draw failed', e)
    }
  }, 500)
})

// 监听并更新图表（轻微去抖）
watch([() => current.value], async () => {
  setTimeout(async () => {
    await bpChart.update(records, current, viewMode)
  }, 100)
})

watch([() => records.value], async () => {
  setTimeout(async () => {
    // 如果图表实例已被替换，根据 current selectedMetric 的 chart 实例更新
    try {
      if (bpChart && bpChart.update) await bpChart.update(records, current, viewMode)
    } catch (e) {
      console.warn('bpChart update failed', e)
    }
  }, 100)
}, { deep: true })

// 监听 selectedMetric 变化，重建图表以使用不同的 series 配置
watch(() => selectedMetric.value, async (val) => {
  try {
    if (bpChart && bpChart.destroy) {
      try { bpChart.destroy() } catch (e) { /* ignore */ }
    }
    bpChart = createChartForMetric(val)
    // small delay to ensure DOM/canvas availability
    await nextTick()
    try { await bpChart.draw(records, current, viewMode) } catch (e) { console.warn('draw after metric change failed', e) }
  } catch (e) {
    console.warn('selectedMetric watch error', e)
  }
})

onBeforeUnmount(() => {
  try { bpChart.destroy() } catch (e) { console.warn('bpChart destroy error', e) }
})

// 强制重建图表（用于切换月份时彻底刷新）
async function rebuildChart() {
  try { if (bpChart && bpChart.rebuild) await bpChart.rebuild(records, current, viewMode) } catch (e) { console.warn('rebuildChart failed', e) }
}

// 周/月周期导航与 Picker 处理
async function prevPeriod() {
  const d = new Date(current.value)
  if (viewMode.value === 'month') {
    d.setMonth(d.getMonth() - 1)
  } else {
    d.setDate(d.getDate() - 7)
  }
  current.value = d
  pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
  records.value = generateMockRecords(d)
  await rebuildChart()
}

async function nextPeriod() {
  const d = new Date(current.value)
  if (viewMode.value === 'month') {
    d.setMonth(d.getMonth() + 1)
  } else {
    d.setDate(d.getDate() + 7)
  }
  current.value = d
  pickerValue.value = [d.getFullYear() - 2000, d.getMonth()]
  records.value = generateMockRecords(d)
  await rebuildChart()
}

async function setViewMode(mode: 'month' | 'week') {
  if (viewMode.value !== mode) {
    viewMode.value = mode
    records.value = generateMockRecords(current.value)
    await rebuildChart()
  }
}

async function onPickerChange(e: any) {
  const val = e?.detail?.value || e
  if (Array.isArray(val) && val.length >= 2) {
    const y = 2000 + val[0]
    const m = val[1]
    const d = new Date(y, m, 1)
    current.value = d
    pickerValue.value = [val[0], val[1]]
    records.value = generateMockRecords(d)
    await rebuildChart()
  }
}

// 添加逻辑（体格数据）
const showAdd = ref(false)
const addDate = ref(formatPickerDate(new Date()))
const addDateLabel = ref(formatDisplayDate(new Date()))
const addHeight = ref<number | null>(null)
const addWeight = ref<number | null>(null)

function onHUpdate(v: number) { addHeight.value = Math.round(v) }
function onHChange(v: number) { addHeight.value = Math.round(v) }
function onWUpdate(v: number) { addWeight.value = Math.round(v) }
function onWChange(v: number) { addWeight.value = Math.round(v) }

function openAdd() { 
  showAdd.value = true; 
  if (!addHeight.value) addHeight.value = 170; 
  if (!addWeight.value) addWeight.value = 65 
}
function closeAdd() { 
  showAdd.value = false; 
  addHeight.value = null; 
  addWeight.value = null 
}

function onAddDateChange(e: any) { 
  const val = e?.detail?.value || e; 
  addDate.value = val; 
  addDateLabel.value = val.replace(/^(.{10}).*$/, '$1') 
}

async function confirmAdd() {
  if (!addHeight.value || !addWeight.value) { 
    uni.showToast && uni.showToast({ title: '请输入身高和体重', icon: 'none' }); 
    return 
  }
  // 检查 BMI 预警（简单阈值）
  const bmi = addWeight.value / ((addHeight.value / 100) * (addHeight.value / 100))
  if (bmi >= 25) {
    uni.showModal({
      title: '体重超标',
      content: '当前体重指数偏高，建议注意饮食与运动，必要时就医。',
      showCancel: false,
      confirmText: '知道了'
    })
  }
  const id = `user-${Date.now()}`
  const bmiVal = Math.round((Math.round(addWeight.value) / ((Math.round(addHeight.value) / 100) * (Math.round(addHeight.value) / 100))) * 10) / 10
  const item: RecordItem = { 
    id, 
    date: addDateLabel.value, 
    h: Math.round(addHeight.value), 
    w: Math.round(addWeight.value),
    bmi: bmiVal
  }
  const parts = addDate.value.split('-')
  const addY = parseInt(parts[0], 10)
  const addM = parseInt(parts[1], 10) - 1
  if (viewMode.value === 'month') {
    if (addY === current.value.getFullYear() && addM === current.value.getMonth()) {
      records.value = [item, ...records.value]
    }
  } else {
    const addDateObj = new Date(addY, addM, parseInt(parts[2] || '1', 10))
    const addWeekStart = getWeekStart(addDateObj)
    const curWeekStart = getWeekStart(current.value)
    if (addWeekStart.getTime() === curWeekStart.getTime()) {
      records.value = [item, ...records.value]
    }
  }
  uni.showToast && uni.showToast({ title: '已添加', icon: 'success' })
  closeAdd()
  // 新增记录后彻底重建图表，确保像退出再进入一样刷新
  try {
    await rebuildChart()
  } catch (e) {
    console.warn('rebuildChart after add failed', e)
  }
}

async function confirmDeleteRecord(id: string) { 
  if (typeof uni !== 'undefined' && uni.showModal) { 
    uni.showModal({ 
      title: '删除', 
      content: '确认删除该条记录吗？', 
      success: async (res: any) => { 
        if (res.confirm) {
          records.value = records.value.filter(r => r.id !== id)
          try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
        }
      } 
    }) 
  } else { 
    records.value = records.value.filter(r => r.id !== id)
    try { await rebuildChart() } catch (e) { console.warn('rebuildChart after delete failed', e) }
  } 
}
</script>

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

.header { 
  padding: 20rpx 40rpx 
}

.month-selector { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12rpx 
}

.period-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.view-toggle {
  display: flex;
  gap: 4rpx;
}

.toggle-btn {
  padding: 4rpx 12rpx;
  border: 1rpx solid #ddd;
  background: #f5f5f5;
  color: #666;
  border-radius: 6rpx;
  font-size: 24rpx;
  min-width: 60rpx;
  text-align: center;
}

.toggle-btn.active {
  background: #ff6a00;
  color: #fff;
  border-color: #ff6a00;
}

.month-label { 
  font-size: 34rpx; 
  color: #333 
}

.btn { 
  background: transparent; 
  border: none; 
  font-size: 36rpx; 
  color: #666 
}

.content { 
  padding: 20rpx 24rpx 100rpx 24rpx 
}

.chart-wrap { 
  height: 380rpx;
  overflow: hidden; /* 隐藏溢出内容 */
  background: #fff; 
  border-radius: 12rpx; 
  padding: 24rpx; 
  margin: 0 24rpx 20rpx 24rpx; 
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) 
}

.chart-header { 
  font-size: 32rpx; 
  color: #333; 
  margin-bottom: 20rpx; 
  font-weight: 600 
}

/* 关键修复：确保canvas样式正确，参考微信小程序示例 */
.chart-canvas {
  height: 320rpx;
  background-color: #FFFFFF;
  display: block;
}

.summary { 
  padding: 20rpx; 
  color: #666; 
  font-size: 28rpx 
}

.list { 
  background: #fff; 
  border-radius: 12rpx; 
  padding: 10rpx; 
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03) 
}

.empty { 
  padding: 40rpx; 
  text-align: center; 
  color: #999 
}

.list-item { 
  display: flex; 
  align-items: center; 
  padding: 20rpx; 
  border-bottom: 1rpx solid #f0f0f0 
}

.list-item .date { 
  color: #666 
}

.list-item .value { 
  color: #333; 
  font-weight: 600; 
  flex: 1; 
  text-align: right 
}

.btn-delete { 
  width: 80rpx; 
  height: 60rpx; 
  min-width: 60rpx; 
  min-height: 60rpx; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  background: #fff0f0; 
  color: #d9534f; 
  border: 1rpx solid rgba(217,83,79,0.15); 
  border-radius: 8rpx; 
  margin-left: 30rpx 
}

.fab { 
  position: fixed; 
  right: 28rpx; 
  bottom: 160rpx; 
  width: 110rpx; 
  height: 110rpx; 
  border-radius: 999px; 
  background: linear-gradient(180deg, #ff7a00, #ff4a00); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.2); 
  z-index: 1200 
}

.fab-inner { 
  color: #fff; 
  font-size: 56rpx; 
  line-height: 56rpx 
}

.modal { 
  position: fixed; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  display: flex; 
  align-items: flex-end; 
  justify-content: center; 
  z-index: 1300 
}

.modal-backdrop { 
  position: absolute; 
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  background: rgba(0, 0, 0, 0.4) 
}

.modal-panel { 
  position: relative; 
  width: 100%; 
  background: #fff; 
  border-top-left-radius: 18rpx; 
  border-top-right-radius: 18rpx; 
  padding: 28rpx 24rpx 140rpx 24rpx; 
  box-shadow: 0 -8rpx 30rpx rgba(0,0,0,0.12) 
}

.modal-title { 
  font-size: 56rpx; 
  margin-block: 60rpx; 
  color: #222; 
  font-weight: 700; 
  letter-spacing: 1rpx 
}

.modal-inner { 
  max-width: 70%; 
  margin: 0 auto 
}

.form-row { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 34rpx; 
  padding: 14rpx 0; 
  font-size: 32rpx 
}

.input { 
  width: 150rpx; 
  text-align: right; 
  padding: 16rpx; 
  border-radius: 14rpx; 
  border: 1rpx solid #eee; 
  background: #fff7f0 
}

.picker-display { 
  color: #333 
}

.btn-primary { 
  background: #ff6a00; 
  color: #fff; 
  padding: 18rpx 22rpx; 
  border-radius: 16rpx; 
  text-align: center; 
  width: 50%; 
  box-shadow: 0 10rpx 28rpx rgba(255,106,0,0.18) 
}

.drag-handle { 
  width: 64rpx; 
  height: 6rpx; 
  background: rgba(0,0,0,0.08); 
  border-radius: 999px; 
  margin: 10rpx auto 14rpx auto 
}

.modal-header { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 12rpx; 
  margin-bottom: 6rpx 
}

.label { 
  color: #666 
}

.ruler-wrap { 
  margin: 12rpx 0 
}

.ruler-row { 
  margin-bottom: 8rpx 
}

.fixed-footer { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 40rpx; 
  padding: 0 24rpx 
}

.btn-full { 
  width: 100%; 
  padding: 18rpx; 
  border-radius: 12rpx; 
}
</style>