cfc/cfc-frontend/pages/health/report-upload.vue

<template>
  <view class="upload-container">
    <!-- 说明提示 -->
    <view class="tip-banner">
      <text class="tip-icon">📋</text>
      <text class="tip-text">{{ tipText }}</text>
    </view>

    <!-- 表单 -->
    <view class="form-section">
      <!-- 步骤1：报告大类 -->
      <view class="form-item category-box">
        <text class="form-label">选择报告类型</text>
        <view class="category-row">
          <view
            :class="['category-card', reportKind === 'health' ? 'category-active' : '']"
            @click="selectReportKind('health')">
            <text class="category-icon">🏥</text>
            <text class="category-title">健康报告</text>
            <text class="category-desc">体检 / 菌群 / 舌诊 / 体脂</text>
          </view>
          <view
            :class="['category-card', reportKind === 'dan' ? 'category-active category-dan' : '']"
            @click="selectReportKind('dan')">
            <text class="category-icon">🧠</text>
            <text class="category-title">DAN测评</text>
            <text class="category-desc">A2 / B4 等成长测评</text>
          </view>
        </view>
      </view>

      <!-- 步骤2：DAN 维度（仅 DAN） -->
      <view class="form-item" v-if="reportKind === 'dan'">
        <text class="form-label">选择 DAN 测评维度</text>
        <view class="dim-grid">
          <view
            v-for="item in danDimensions"
            :key="item.code"
            :class="['dim-chip', danDimension === item.code ? 'dim-active' : '']"
            @click="selectDanDimension(item.code)">
            <text class="dim-chip-text">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <!-- 上传方式 -->
      <view class="upload-methods" v-if="reportKind">
        <view class="upload-card card-file" @click="pickFile">
          <view class="upload-card-icon">📄</view>
          <text class="upload-card-title">从聊天选择文件</text>
          <text class="upload-card-desc" v-if="reportKind === 'health'">PDF / 图片<br/>体检、菌群等健康报告</text>
          <text class="upload-card-desc" v-else>PDF<br/>DAN 测评报告（推荐）</text>
        </view>
        <view class="upload-card card-photo" @click="takePhoto" v-if="reportKind === 'health'">
          <view class="upload-card-icon">📷</view>
          <text class="upload-card-title">拍照上传</text>
          <text class="upload-card-desc">拍摄舌象照片<br/>或单页纸质报告</text>
        </view>
        <view class="upload-card card-photo" @click="goBodyFatScale" v-if="reportKind === 'health'">
          <view class="upload-card-icon">⚖️</view>
          <text class="upload-card-title">体脂秤</text>
          <text class="upload-card-desc">拍摄体脂秤<br/>显示屏照片</text>
        </view>
      </view>

      <view class="kind-hint" v-if="!reportKind">
        <text class="kind-hint-text">请先选择「健康报告」或「DAN测评」，再上传文件</text>
      </view>

      <!-- 责任声明 -->
      <view class="form-item disclaimer-box">
        <view class="disclaimer-check" @click="toggleAgree">
          <view class="disclaimer-checkbox" :class="{ 'disclaimer-checked': agreedToTerms }">
            <text class="disclaimer-checkmark" v-if="agreedToTerms">✓</text>
          </view>
          <text class="disclaimer-label">我已阅读并同意以下声明</text>
        </view>
        <view class="disclaimer-content">
          <text class="disclaimer-text">我同意平台使用本报告数据进行分析，为我提供个性化健康解决方案；未经我授权，平台不会以任何形式将我的报告内容提供给其他任何个人或机构。</text>
        </view>
      </view>

      <!-- 上传中 -->
      <view class="form-item" v-if="uploading">
        <text class="form-label">上传中...</text>
        <view class="analyzing-status">
          <text class="analyzing-text">{{ uploadingText }}</text>
        </view>
      </view>
    </view>

    <!-- 上传说明：随类型切换 -->
    <view class="guide-section">
      <view class="guide-header">
        <text class="guide-header-icon">📖</text>
        <text class="guide-header-title">{{ reportKind === 'dan' ? 'DAN 测评说明' : '健康报告说明' }}</text>
      </view>
      <view class="guide-list" v-if="reportKind !== 'dan'">
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-blue"><text class="guide-icon">📄</text></view>
          <view class="guide-info">
            <text class="guide-name">体检报告</text>
            <text class="guide-desc">血常规、尿常规、生化检验等，支持 PDF 或清晰照片</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-green"><text class="guide-icon">🦠</text></view>
          <view class="guide-info">
            <text class="guide-name">肠道菌群检测报告</text>
            <text class="guide-desc">支持 PDF 或清晰照片，AI 自动解读菌群健康</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-orange"><text class="guide-icon">👅</text></view>
          <view class="guide-info">
            <text class="guide-name">舌象照片</text>
            <text class="guide-desc">拍摄舌象照片，AI 辅助舌诊分析</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-teal"><text class="guide-icon">⚖️</text></view>
          <view class="guide-info">
            <text class="guide-name">体脂秤报告</text>
            <text class="guide-desc">拍摄体脂秤显示屏，自动提取体重、BMI、体脂率等</text>
          </view>
        </view>
      </view>
      <view class="guide-list" v-else>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-teal"><text class="guide-icon">💖</text></view>
          <view class="guide-info">
            <text class="guide-name">心维度 A2</text>
            <text class="guide-desc">人格、情绪、自我概念与自驱力等心理测评报告</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-purple"><text class="guide-icon">🧠</text></view>
          <view class="guide-info">
            <text class="guide-name">智维度 B4</text>
            <text class="guide-desc">认知能力、学习力等双培强基 DAN 智维度报告</text>
          </view>
        </view>
        <view class="guide-item">
          <view class="guide-icon-box guide-icon-blue"><text class="guide-icon">📚</text></view>
          <view class="guide-info">
            <text class="guide-name">其他 DAN 维度</text>
            <text class="guide-desc">认知 / 学习 / 行为 / 生涯 / 校园 / 青春期等专项报告</text>
          </view>
        </view>
      </view>
      <view class="guide-tips">
        <text class="guide-tips-title">温馨提示</text>
        <text class="guide-tips-item">· 请先选择报告类型，再选择文件上传</text>
        <text class="guide-tips-item">· 健康报告走菌群/体检解析；DAN 走测评维度解析</text>
        <text class="guide-tips-item">· 确认入库后将自动生成成长方案，可再分解为每日任务</text>
      </view>
    </view>

    <!-- 点击上传后的类型选择弹层（未预选时兜底） -->
    <view class="sheet-mask" v-if="showKindSheet" @click="closeKindSheet">
      <view class="sheet-panel" @click.stop>
        <text class="sheet-title">请选择要上传的报告</text>
        <view class="sheet-item" @click="onKindSheetPick('health')">
          <text class="sheet-item-title">健康报告</text>
          <text class="sheet-item-desc">体检、肠道菌群、舌诊、体脂等</text>
        </view>
        <view class="sheet-item" @click="onKindSheetPick('dan')">
          <text class="sheet-item-title">DAN测评</text>
          <text class="sheet-item-desc">A2 / B4 等成长测评 PDF</text>
        </view>
        <view class="sheet-cancel" @click="closeKindSheet">
          <text class="sheet-cancel-text">取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { uploadReportOnly, danParsePreview } from '../../utils/api.js'
import config from '@/config.js'

var DAN_DIMENSIONS = [
  { code: 'mind', label: '心 A2' },
  { code: 'wisdom', label: '智 B4' },
  { code: 'cognition', label: '认知' },
  { code: 'learning', label: '学习' },
  { code: 'behavior', label: '行为' },
  { code: 'career', label: '生涯' },
  { code: 'campus', label: '校园' },
  { code: 'adolescent', label: '青春期' }
]

export default {
  data() {
    return {
      memberId: null,
      uploading: false,
      selectedFile: null,
      photoPath: null,
      agreedToTerms: false,
      currentMemberId: null,
      extractedMetrics: [],
      reportKind: '',
      danDimension: 'mind',
      danDimensions: DAN_DIMENSIONS,
      showKindSheet: false,
      pendingIsPhoto: false
    }
  },
  computed: {
    tipText: function() {
      if (this.reportKind === 'dan') {
        return '上传 DAN 测评 PDF（A2/B4 等），解析确认后生成个性化成长方案'
      }
      if (this.reportKind === 'health') {
        return '上传体检/菌群/舌诊等健康报告，解析确认后生成个性化健康方案'
      }
      return '请先选择「健康报告」或「DAN测评」，再上传文件生成方案'
    },
    uploadingText: function() {
      return this.reportKind === 'dan'
        ? '正在解析 DAN 测评报告...'
        : '正在上传文件，即将进入分析页面...'
    }
  },
  onLoad: function(options) {
    this.memberId = options.memberId ? parseInt(options.memberId) : null
    if (options.reportKind === 'health' || options.reportKind === 'dan') {
      this.reportKind = options.reportKind
    }
    if (options.dimension) {
      var codes = DAN_DIMENSIONS.map(function(d) { return d.code })
      if (codes.indexOf(options.dimension) >= 0) {
        this.danDimension = options.dimension
        this.reportKind = 'dan'
      }
    }
    if (options.bodyFatMetrics) {
      try {
        this.extractedMetrics = JSON.parse(decodeURIComponent(options.bodyFatMetrics))
      } catch (e) {}
    }
  },
  methods: {
    selectReportKind: function(kind) {
      this.reportKind = kind
      if (kind === 'dan' && !this.danDimension) {
        this.danDimension = 'mind'
      }
    },
    selectDanDimension: function(code) {
      this.danDimension = code
    },
    toggleAgree: function() {
      this.agreedToTerms = !this.agreedToTerms
    },
    ensureAgreed: function(callback) {
      if (this.agreedToTerms) {
        callback()
        return
      }
      var self = this
      uni.showModal({
        title: '数据使用声明',
        content: '上传报告即代表您同意平台使用本报告数据进行分析，为您提供个性化健康解决方案；未经您授权，平台不会以任何形式将您的报告内容提供给其他任何个人或机构。点击「同意继续」即表示您已阅读并同意。',
        confirmText: '同意继续',
        cancelText: '暂不',
        success: function(res) {
          if (res.confirm) {
            self.agreedToTerms = true
            callback()
          }
        }
      })
    },
    // 点击上传：未选类型时弹层；已选则直接走对应链路
    pickFile: function() {
      var self = this
      this.ensureAgreed(function() {
        self.beginUpload(false)
      })
    },
    takePhoto: function() {
      var self = this
      this.ensureAgreed(function() {
        self.beginUpload(true)
      })
    },
    beginUpload: function(isPhoto) {
      if (!this.reportKind) {
        this.pendingIsPhoto = isPhoto
        this.showKindSheet = true
        return
      }
      if (this.reportKind === 'dan') {
        if (!this.danDimension) {
          uni.showToast({ title: '请选择 DAN 测评维度', icon: 'none' })
          return
        }
        this.startPickDan()
        return
      }
      this.startPickHealth(isPhoto)
    },
    closeKindSheet: function() {
      this.showKindSheet = false
    },
    onKindSheetPick: function(kind) {
      this.reportKind = kind
      this.showKindSheet = false
      var isPhoto = this.pendingIsPhoto
      this.pendingIsPhoto = false
      if (kind === 'dan') {
        if (isPhoto) {
          uni.showToast({ title: 'DAN 请上传 PDF 文件', icon: 'none' })
        }
        this.startPickDan()
        return
      }
      this.startPickHealth(isPhoto)
    },
    startPickHealth: function(isPhoto) {
      var self = this
      if (isPhoto) {
        uni.chooseImage({
          count: 1,
          sourceType: ['camera', 'album'],
          success: function(res) {
            self.photoPath = res.tempFilePaths[0]
            self.uploadHealthAndGoConfirm(self.photoPath, 'image')
          }
        })
      } else {
        uni.chooseMessageFile({
          count: 1,
          type: 'file',
          extension: ['pdf'],
          success: function(res) {
            var files = res.tempFiles
            if (files && files.length > 0) {
              self.selectedFile = files[0]
              self.uploadHealthAndGoConfirm(files[0].path, '')
            }
          },
          fail: function(e) {
            console.log('选择文件取消或失败', e)
          }
        })
      }
    },
    startPickDan: function() {
      var self = this
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['pdf'],
        success: function(res) {
          var files = res.tempFiles
          if (files && files.length > 0) {
            self.selectedFile = files[0]
            self.uploadDanAndGoPreview(files[0].path)
          }
        },
        fail: function() {
          uni.chooseImage({
            count: 1,
            success: function(res) {
              if (res.tempFiles && res.tempFiles.length > 0) {
                self.selectedFile = res.tempFiles[0]
                var path = res.tempFiles[0].path || (res.tempFilePaths && res.tempFilePaths[0])
                self.uploadDanAndGoPreview(path)
              }
            }
          })
        }
      })
    },
    // 健康报告：upload-only → 菌群/健康解析页
    uploadHealthAndGoConfirm: function(filePath, type) {
      if (!filePath) return
      var self = this
      self.uploading = true
      uni.showLoading({ title: '上传中...' })
      uploadReportOnly(filePath, type).then(function(res) {
        uni.hideLoading()
        self.uploading = false
        var draftId = res.data && res.data.draftId
        if (!draftId) {
          uni.showToast({ title: (res && res.message) || '上传失败', icon: 'none' })
          return
        }
        uni.redirectTo({ url: '/pages/health/gut-flora-detail?draftId=' + draftId })
      }).catch(function(err) {
        uni.hideLoading()
        self.uploading = false
        var msg = (err && err.message) || '上传失败，请重试'
        uni.showToast({ title: msg, icon: 'none' })
      })
    },
    // DAN测评：parse-preview → 预览确认页
    uploadDanAndGoPreview: function(filePath) {
      if (!filePath) return
      var self = this
      var memberId = self.memberId
          || (self.$store.state && self.$store.state.currentChildId)
          || uni.getStorageSync('currentChildId')
          || uni.getStorageSync('currentMemberId')
      if (!memberId) {
        uni.showToast({ title: '请先选择家庭成员', icon: 'none' })
        return
      }
      self.uploading = true
      uni.showLoading({ title: '解析中...' })
      danParsePreview(filePath, self.danDimension, memberId).then(function(res) {
        uni.hideLoading()
        self.uploading = false
        if (!res || res.code !== 200 || !res.data) {
          uni.showToast({ title: (res && res.message) || '解析失败', icon: 'none' })
          return
        }
        try {
          uni.setStorageSync('danUploadPreview', {
            draftId: res.data.draftId || res.data.uploadId,
            previewData: res.data,
            dimension: self.danDimension,
            memberId: memberId
          })
        } catch (e) {}
        uni.redirectTo({
          url: '/pages/dan-assessment/report-upload?resume=1&dimension=' + self.danDimension
        })
      }).catch(function(err) {
        uni.hideLoading()
        self.uploading = false
        uni.showToast({ title: (err && err.message) || '上传失败', icon: 'none' })
      })
    },
    goBodyFatScale: function() {
      var self = this
      this.ensureAgreed(function() {
        self.reportKind = 'health'
        self.startBodyFatUpload()
      })
    },
    startBodyFatUpload: function() {
      var self = this
      uni.chooseImage({
        count: 1,
        sourceType: ['camera', 'album'],
        success: function(res) {
          self.photoPath = res.tempFilePaths[0]
          self.uploadBodyFat(self.photoPath)
        }
      })
    },
    uploadBodyFat: function(filePath) {
      var self = this
      self.uploading = true
      uni.showLoading({ title: 'AI 识别中...' })
      var token = uni.getStorageSync('token')
      uni.uploadFile({
        url: config.API_BASE_URL + '/api/health/report/bodyfat-upload',
        filePath: filePath,
        name: 'file',
        header: { 'Authorization': 'Bearer ' + token },
        success: function(uploadRes) {
          var data
          try { data = JSON.parse(uploadRes.data) } catch (e) { data = uploadRes.data }
          self.uploading = false
          uni.hideLoading()
          if (data && data.code === 200) {
            self.currentMemberId = data.data && data.data.memberId
            self.extractedMetrics = data.data && data.data.metrics || []
            uni.navigateTo({ url: '/pages/health/bodyfat-confirm' })
          } else {
            uni.showToast({ title: (data && data.message) || '上传失败', icon: 'none' })
          }
        },
        fail: function() {
          self.uploading = false
          uni.hideLoading()
          uni.showToast({ title: '网络错误', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style scoped>
.upload-container {
  min-height: 100vh;
  background: #F5F7FA;
}

.tip-banner {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #E3F2FD;
  margin: 20rpx 30rpx;
  padding: 20rpx 24rpx;
  border-radius: 16rpx;
}
.tip-icon {
  font-size: 32rpx;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.tip-text {
  font-size: 24rpx;
  color: #1565C0;
  line-height: 1.5;
}

.form-section {
  margin: 0 30rpx;
}
.form-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}
.form-label {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 16rpx;
}

.category-row {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
}
.category-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28rpx 16rpx;
  border-radius: 16rpx;
  background: #F8FAFC;
  border: 2rpx solid #E2E8F0;
}
.category-active {
  background: #EFF6FF;
  border-color: #3B82F6;
}
.category-dan.category-active {
  background: #F5F3FF;
  border-color: #8B5CF6;
}
.category-icon {
  font-size: 40rpx;
  margin-bottom: 10rpx;
}
.category-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 6rpx;
}
.category-desc {
  font-size: 20rpx;
  color: #94A3B8;
  text-align: center;
}

.dim-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.dim-chip {
  width: 23%;
  margin-right: 2%;
  margin-bottom: 12rpx;
  padding: 16rpx 0;
  text-align: center;
  border-radius: 12rpx;
  background: #F1F5F9;
  border: 2rpx solid transparent;
  box-sizing: border-box;
}
.dim-active {
  background: #EDE9FE;
  border-color: #8B5CF6;
}
.dim-chip-text {
  font-size: 22rpx;
  color: #334155;
}

.kind-hint {
  background: #FFFBEB;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border: 2rpx dashed #FCD34D;
}
.kind-hint-text {
  font-size: 24rpx;
  color: #92400E;
}

.analyzing-status {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.analyzing-text {
  font-size: 26rpx;
  color: #5B9BD5;
}

.disclaimer-box {
  background: #FFF8F0;
  border: 2rpx solid #FDE68A;
}
.disclaimer-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12rpx;
}
.disclaimer-checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 6rpx;
  border: 2rpx solid #CBD5E1;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 12rpx;
}
.disclaimer-checked {
  background: #5B9BD5;
  border-color: #5B9BD5;
}
.disclaimer-checkmark {
  font-size: 24rpx;
  color: #fff;
  font-weight: bold;
}
.disclaimer-label {
  font-size: 24rpx;
  color: #333;
  font-weight: 500;
}
.disclaimer-content {
  background: #FFFDF5;
  border-radius: 10rpx;
  padding: 16rpx;
  margin-left: 48rpx;
}
.disclaimer-text {
  font-size: 22rpx;
  color: #92400E;
  line-height: 1.6;
}

.upload-methods {
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  margin-bottom: 20rpx;
}
.upload-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32rpx 12rpx;
  border-radius: 20rpx;
  text-align: center;
  min-height: 220rpx;
}
.upload-card:active {
  opacity: 0.85;
}
.upload-card-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  font-size: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
}
.upload-card-title {
  font-size: 26rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}
.upload-card-desc {
  font-size: 20rpx;
  color: #94A3B8;
  line-height: 1.5;
}
.card-file {
  background: #F0F7FF;
  border: 2rpx dashed #93C5FD;
}
.card-file .upload-card-icon {
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #fff;
}
.card-photo {
  background: #FFF7ED;
  border: 2rpx solid #FED7AA;
}
.card-photo .upload-card-icon {
  background: linear-gradient(135deg, #FB923C, #EA580C);
  color: #fff;
}

.guide-section {
  margin: 0 30rpx 30rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}
.guide-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}
.guide-header-icon {
  font-size: 32rpx;
  margin-right: 12rpx;
}
.guide-header-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
}
.guide-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin-bottom: 20rpx;
}
.guide-icon-box {
  width: 64rpx;
  height: 64rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.guide-icon {
  font-size: 32rpx;
}
.guide-icon-blue { background: #DBEAFE; }
.guide-icon-green { background: #DCFCE7; }
.guide-icon-orange { background: #FFEDD5; }
.guide-icon-purple { background: #EDE9FE; }
.guide-icon-teal { background: #CCFBF1; }
.guide-info {
  flex: 1;
}
.guide-name {
  font-size: 26rpx;
  font-weight: 600;
  color: #334155;
  display: block;
  margin-bottom: 4rpx;
}
.guide-desc {
  font-size: 22rpx;
  color: #94A3B8;
  line-height: 1.5;
}
.guide-tips {
  margin-top: 8rpx;
  padding-top: 16rpx;
  border-top: 1rpx solid #F1F5F9;
}
.guide-tips-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #64748B;
  display: block;
  margin-bottom: 8rpx;
}
.guide-tips-item {
  font-size: 22rpx;
  color: #94A3B8;
  display: block;
  line-height: 1.7;
}

.sheet-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sheet-panel {
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx 28rpx calc(32rpx + env(safe-area-inset-bottom));
}
.sheet-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #0F172A;
  display: block;
  text-align: center;
  margin-bottom: 24rpx;
}
.sheet-item {
  background: #F8FAFC;
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 16rpx;
}
.sheet-item:active {
  background: #EFF6FF;
}
.sheet-item-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #1E293B;
  display: block;
  margin-bottom: 6rpx;
}
.sheet-item-desc {
  font-size: 22rpx;
  color: #94A3B8;
}
.sheet-cancel {
  margin-top: 8rpx;
  padding: 24rpx;
  text-align: center;
}
.sheet-cancel-text {
  font-size: 28rpx;
  color: #64748B;
}
</style>