cfc/cfc-frontend/pages/wealth/index.vue

<template>
  <view class="container">
    <!-- TabTransition overlay -->
    <tab-transition v-if="showTabTransition" dimCode="wealth" ref="tabTransition" @close="showTabTransition = false" />

    <!-- 未登录时显示精简内容 -->
    <template v-if="!isLoggedIn">
      <PageBanner theme="wealth"
        tagline="利他创富 · 价值共享"
        quote="富足源于利他与坚持" />

      <!-- 推荐阅读 -->
      <ArticleBookshelf
        :articles="wealthArticles"
        :loading="articlesLoading"
        @articleClick="goArticleDetail"
        @moreArticles="goMoreArticles" />

      <!-- 登录引导 -->
      <view class="login-guide-section">
        <text class="login-guide-text">登录后查看财富能量、推广收益、邀请返利等更多内容</text>
        <button class="login-btn" @click="goLogin">登录 / 注册</button>
      </view>
    </template>

    <template v-else>
      <!-- 品牌头部 -->
      <PageBanner theme="wealth"
        tagline="利他创富 · 价值共享"
        quote="富足源于利他与坚持" />

      <!-- 家庭成员选择条 -->
      <FamilyMemberStrip
        v-if="isLoggedIn"
        :members="familyMembersVisible"
        :selectedMemberId="selectedMemberId"
        @select="onFamilyMemberSelect"
        @removed="loadFamilyMembersVisible" />

      <!-- 模式切换 / 退出切换入口（家长未切时显示"切换到孩子视角"；已切时显示"退出切换"） -->
 <!-- 已切孩子态：点击"退出切换"回到家长模式 -->
 <view v-if="isSwitchedChild" class="exit-switch" @click="exitSwitch">
   <text>🔄 退出切换</text>
 </view>
 <!-- 家长且未切孩子态：此处展示"切换到孩子视角"，点击完成模式切换 -->
 <view v-else class="exit-switch" @click="onSwitchMode">
   <text>👶 切换到孩子视角</text>
 </view>

      <!-- 身克富杠杆警告 -->
      <body-wealth-alert 
        :status="bodyWealthStatus" 
        :message="bodyWealthMessage" 
        :showTip="true" />

<!-- 财富子维度卡片 -->
      <wealth-sub-scores
        :role="role"
        :income="wealthIncome"
        :achievement="wealthAchievement"
        :network="wealthNetwork"
        :education="wealthEducation"
        :social="wealthSocial"
        :points="wealthPoints" />

      <!-- 心的子维度（仅孩子） -->
      <view class="section" v-if="role !== 'parent'">
        <view class="section-header">
          <text class="section-title">🔥 心的子维度</text>
        </view>
        <view class="sub-dim-grid heart-sub-dim">
          <view class="sub-dim-card" @click="childSubDimClick('emotion')">
            <text class="sub-dim-score">{{ heartEmotionStable || '-' }}</text>
            <text class="sub-dim-label">情绪稳定</text>
            <text class="sub-dim-desc">EMI情绪管理</text>
          </view>
          <view class="sub-dim-card" @click="childSubDimClick('understanding')">
            <text class="sub-dim-score">{{ heartUnderstanding || '-' }}</text>
            <text class="sub-dim-label">理解包容</text>
            <text class="sub-dim-desc">共情+社交适应</text>
          </view>
          <view class="sub-dim-card" @click="childSubDimClick('legacy')">
            <text class="sub-dim-score">{{ heartLegacy || '-' }}</text>
            <text class="sub-dim-label">传承传递</text>
            <text class="sub-dim-desc">未来开放</text>
          </view>
        </view>
      </view>

      <!-- 财富数据（仅家长） -->
      <view class="section" v-if="role === 'parent'">
        <view class="section-header">
          <text class="section-title">💰 财富数据</text>
        </view>
        <view class="wealth-card">
          <view class="wealth-item">
            <text class="wealth-value">{{ wealthData.totalEarnings || 0 }}</text>
            <text class="wealth-label">累计收益</text>
          </view>
          <view class="wealth-divider"></view>
          <view class="wealth-item">
            <text class="wealth-value">{{ wealthData.availableAmount || 0 }}</text>
            <text class="wealth-label">可提现</text>
          </view>
          <view class="wealth-divider"></view>
          <view class="wealth-item">
            <text class="wealth-value">{{ wealthData.referralCount || 0 }}</text>
            <text class="wealth-label">邀请人数</text>
          </view>
        </view>
        <!-- 邀请码复制 -->
        <view class="referral-code-bar" v-if="wealthData.referralCode" @click="copyReferralCode">
          <text class="referral-code-label">我的邀请码</text>
          <text class="referral-code-value">{{ wealthData.referralCode }}</text>
          <text class="referral-code-copy">复制</text>
        </view>
      </view>

      <!-- 增值服务入口 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">🚀 增值服务</text>
        </view>
        <view class="service-grid">
          <view class="service-item" @click="goToCheckin">
            <text class="service-icon">📝</text>
            <text class="service-label">记账打卡</text>
          </view>
          <view class="service-item" @click="goToInsurance">
            <text class="service-icon">🛡️</text>
            <text class="service-label">保单管理</text>
          </view>
          <view class="service-item" @click="goToCreator">
            <text class="service-icon">🎨</text>
            <text class="service-label">创客中心</text>
          </view>
        </view>
      </view>

      <!-- 消费中心 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">🛍️ 消费中心</text>
        </view>
        <view class="service-grid">
          <view class="service-item" @click="goToShop">
            <text class="service-icon">🏪</text>
            <text class="service-label">商城首页</text>
          </view>
          <view class="service-item" @click="goToCart">
            <text class="service-icon">🛒</text>
            <text class="service-label">购物车</text>
          </view>
          <view class="service-item" @click="goToOrders">
            <text class="service-icon">📋</text>
            <text class="service-label">我的订单</text>
          </view>
          <view class="service-item" @click="goToAfterSales">
            <text class="service-icon">🔄</text>
            <text class="service-label">售后服务</text>
          </view>
        </view>
      </view>

      <!-- 商品推荐 -->
      <DimensionProducts
        dimensionCode="wealth"
        :familyId="activeChildId"
        :products="dimensionProducts"
        title="推荐商品"
        @productClick="goProductDetail"
        @moreProducts="goMoreProducts" />

      <!-- 推荐活动 -->
      <DimensionActivities
        dimensionCode="wealth"
        :activities="dimensionActivities"
        :isLoggedIn="isLoggedIn"
        @activityClick="goActivityDetail"
        @moreActivities="goMoreActivities" />

      <!-- 推荐阅读 -->
      <ArticleBookshelf
        :articles="wealthArticles"
        :loading="articlesLoading"
        @articleClick="goArticleDetail"
        @moreArticles="goMoreArticles" />

      <!-- 底部菜单 -->
      <view class="menu-list">
        <view class="menu-item" @click="goToProfile">
          <text>👤 个人中心</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item" @click="goToPointsLogs">
          <text>📊 积分记录</text>
          <text class="arrow">›</text>
        </view>
        <view class="menu-item logout-item" @click="logout">
          <text>🚪 退出登录</text>
          <text class="arrow">›</text>
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import TabTransition from '../../components/tab-transition.vue'
import PageBanner from '../../components/PageBanner.vue'
import ArticleBookshelf from '../../components/ArticleBookshelf.vue'
import DimensionProducts from '../../components/DimensionProducts.vue'
import DimensionActivities from '../../components/DimensionActivities.vue'
import WealthSubScores from '../../components/WealthSubScores.vue'
import BodyWealthAlert from '../../components/BodyWealthAlert.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import {
  verifyPassword,
  getChildren,
  getWealthDetail,
  getReferralCode,
  getReferralSummary,
  getCommissionSummary,
  getVisibleFamilyMembers,
  getFeaturedArticles,
  getActivityList,
  getProductsByDomain
} from '../../utils/api.js'

export default {
  components: { TabTransition, PageBanner, DimensionProducts, DimensionActivities, WealthSubScores, BodyWealthAlert, FamilyMemberStrip, ArticleBookshelf },
  data() {
    return {
      showTabTransition: true,
      isLoggedIn: false,
      role: 'parent',
      isSwitchedChild: false,
      // 五维评分
      bodyScore: 0,
      mindScore: 0,
      wisdomScore: 0,
      actionScore: 0,
      wealthScore: 0,
      // 心的子维度（仅孩子有真实数据）
      heartEmotionStable: null,
      heartUnderstanding: null,
      heartLegacy: null,
      // 子维度 - parent
      wealthIncome: null,
      wealthAchievement: null,
      wealthNetwork: null,
      // 子维度 - child
      wealthEducation: null,
      wealthSocial: null,
      wealthPoints: null,
      // 身克富杠杆
      bodyWealthStatus: 'normal',
      bodyWealthMessage: '',
      // 财富数据
      wealthData: {
        totalEarnings: 0,
        availableAmount: 0,
        referralCount: 0,
        referralCode: ''
      },
      children: [],
      familyMembersVisible: [],
      selectedMemberId: null,
      wealthArticles: [],
      articlesLoading: false,
      dimensionActivities: [],
      dimensionProducts: []
    }
  },
  computed: {
    activeChildId() {
      if (this.role === 'child') {
        return uni.getStorageSync('currentChildId')
      }
      return ''
    }
  },
  onShow() {
    this.showTabTransition = true

    var token = uni.getStorageSync('token')
    if (!token) {
      this.isLoggedIn = false
      this._watchPageReady()
      return
    }
    this.isLoggedIn = true

    var currentRole = uni.getStorageSync('currentRole') || uni.getStorageSync('role') || 'parent'
    if (currentRole === 'teacher') {
      uni.redirectTo({ url: '/pages/teacher/teacher-profile' })
      return
    }
    this.role = currentRole
    this.isSwitchedChild = uni.getStorageSync('isSwitchedChild') || false

    this.loadChildren()
    this.loadWealthDetail()
    this.loadWealthData()
    this.loadFamilyMembersVisible()
    this.loadWealthArticles()
    this.loadDimensionActivities()
    this.loadDimensionProducts()
    this._watchPageReady()
  },
  methods: {
    onFamilyMemberSelect(member) {
      this.selectedMemberId = member.id
    },
    goProductDetail: function(prod) {
      if (!prod || !prod.id) return
      uni.navigateTo({ url: '/pages/discover-detail/product-detail/product-detail?id=' + prod.id })
    },
    goMoreProducts: function() {
      uni.navigateTo({ url: '/pages/shop/index/index' })
    },
    loadDimensionActivities: function() {
      var self = this
      getActivityList({ dimensionCode: 'wealth', page: 1, size: 3 }).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionActivities = list.slice(0, 3)
        }
      }).catch(function() { self.dimensionActivities = [] })
    },
    loadDimensionProducts: function() {
      var self = this
      getProductsByDomain('wealth', 1, 4).then(function(res) {
        if (res && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.dimensionProducts = list.slice(0, 4)
        }
      }).catch(function() { self.dimensionProducts = [] })
    },
    goActivityDetail: function(act) {
      if (!act || !act.id) return
      uni.navigateTo({ url: '/pages/activity/activity-detail/activity-detail?id=' + act.id })
    },
    goMoreActivities: function() {
      uni.navigateTo({ url: '/pages/discover/index?type=activity' })
    },
    loadWealthArticles: function() {
      var self = this
      self.articlesLoading = true
      getFeaturedArticles({ size: 5, dimensionCode: 'wealth' }).then(function(res) {
        if (res.code === 200 && res.data) {
          var list = Array.isArray(res.data) ? res.data : (res.data.records || [])
          self.wealthArticles = list.slice(0, 5)
        }
      }).catch(function() {
        self.wealthArticles = []
      }).then(function() {
        self.articlesLoading = false
      })
    },
    goArticleDetail: function(article) {
      var id = article && article.id ? article.id : article
      uni.navigateTo({ url: '/pages/article-center/article-detail?id=' + id })
    },
    goMoreArticles: function() {
      uni.navigateTo({ url: '/pages/article-center/index?dimension=wealth' })
    },
    loadFamilyMembersVisible() {
      var self = this
      getVisibleFamilyMembers().then(function(res) {
        self.familyMembersVisible = res.data || []
      }).catch(function(e) {
        console.log('获取可见家庭成员失败', e)
        self.familyMembersVisible = []
      })
    },
    goLogin() {
      uni.navigateTo({ url: '/pages/login/login' })
    },
    _watchPageReady() {
      var self = this
      this.$nextTick(function() {
        if (self.$refs.tabTransition) self.$refs.tabTransition.markReady()
      })
    },
    async loadChildren() {
      try {
        var res = await getChildren()
        this.children = res.data || []
      } catch (e) {
        console.error('获取孩子列表失败', e)
      }
    },
    async loadWealthDetail() {
      var memberId = null
      var memberType = this.role
      if (this.role === 'child') {
        memberId = uni.getStorageSync('currentChildId')
        if (!memberId && this.children.length > 0) {
          memberId = this.children[0].id
        }
      } else {
        memberId = uni.getStorageSync('userId')
      }
      if (!memberId) return

      try {
        var res = await getWealthDetail(memberId, memberType)
        if (res && res.data) {
          var d = res.data
          this.wealthScore = d.wealthScore || 0
          if (memberType === 'parent') {
            this.wealthIncome = d.wealthIncome
            this.wealthAchievement = d.wealthAchievement
            this.wealthNetwork = d.wealthNetwork
          } else {
            this.wealthEducation = d.wealthEducation
            this.wealthSocial = d.wealthSocial
            this.wealthPoints = d.wealthPoints
            this.heartEmotionStable = d.heartEmotionStable
            this.heartUnderstanding = d.heartUnderstanding
            this.heartLegacy = d.heartLegacy
          }
          // 身克富杠杆状态
          this.bodyWealthStatus = d.bodyWealthStatus || 'normal'
          this.bodyWealthMessage = d.bodyWealthMessage || ''
        }
      } catch (e) {
        console.error('获取富维度详情失败', e)
      }
    },
    async loadWealthData() {
      if (this.role !== 'parent') return
      try {
        var codeRes = await getReferralCode()
        if (codeRes && codeRes.code === 200 && codeRes.data) {
          this.wealthData.referralCode = codeRes.data.code || codeRes.data || ''
        }
      } catch (e) {
        console.error('获取邀请码失败', e)
      }
      try {
        var summaryRes = await getReferralSummary()
        if (summaryRes && summaryRes.code === 200 && summaryRes.data) {
          this.wealthData.referralCount = summaryRes.data.totalCount || summaryRes.data.count || 0
        }
      } catch (e) {
        console.error('获取邀请统计失败', e)
      }
      try {
        var commissionRes = await getCommissionSummary()
        if (commissionRes && commissionRes.code === 200 && commissionRes.data) {
          this.wealthData.totalEarnings = commissionRes.data.totalEarnings || 0
          this.wealthData.availableAmount = commissionRes.data.availableAmount || 0
        }
      } catch (e) {
        console.error('获取佣金统计失败', e)
      }
    },
    copyReferralCode() {
      if (!this.wealthData.referralCode) return
      uni.setClipboardData({
        data: this.wealthData.referralCode,
        success: function() {
          uni.showToast({ title: '邀请码已复制', icon: 'success' })
        }
      })
    },
    onSwitchMode() {
      if (this.role === 'child') {
        this.exitSwitch()
        return
      }
      // parent → switch to child
      if (this.children.length === 0) {
        this.loadChildren()
        if (this.children.length === 0) {
          uni.showModal({
            title: '提示',
            content: '您还没有添加孩子，请先在家庭成员中添加',
            success: function(res) {
              if (res.confirm) {
                uni.navigateTo({ url: '/pages/profile-extra/family-members' })
              }
            }
          })
          return
        }
      }
      if (this.children.length === 1) {
        this.$store.commit('switchToChild', this.children[0].id)
        this.role = 'child'
        this.isSwitchedChild = true
        uni.showToast({ title: '已切换为孩子模式', icon: 'success' })
        return
      }
      var self = this
      uni.showActionSheet({
        itemList: this.children.map(function(c) { return c.nickname }),
        success: function(res) {
          var selectedChild = self.children[res.tapIndex]
          self.$store.commit('switchToChild', selectedChild.id)
          self.role = 'child'
          self.isSwitchedChild = true
          uni.showToast({ title: '已切换为' + selectedChild.nickname + '模式', icon: 'success' })
        }
      })
    },
    exitSwitch() {
      if (!this.isSwitchedChild) return
      var self = this
      uni.showModal({
        title: '退出切换',
        content: '请输入家长密码以确认退出',
        editable: true,
        success: function(res) {
          if (res.confirm && res.content) {
            verifyPassword(res.content).then(function(result) {
              if (result.code === 200) {
                uni.removeStorageSync('isSwitchedChild')
                uni.removeStorageSync('currentChildId')
                self.isSwitchedChild = false
                self.role = 'parent'
                if (self.$store && self.$store.commit) {
                  self.$store.commit('switchBackToParent')
                }
                uni.showToast({ title: '已退出切换', icon: 'success' })
                setTimeout(function() {
                  uni.reLaunch({ url: '/pages/index-home/index' })
                }, 1000)
              } else {
                uni.showToast({ title: '密码错误', icon: 'none' })
              }
            }).catch(function() {
              uni.showToast({ title: '验证失败', icon: 'none' })
            })
          }
        }
      })
    },
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: function(res) {
          if (res.confirm) {
            uni.clearStorageSync()
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    },
    goToProfile() {
      uni.navigateTo({ url: '/pages/profile/profile' })
    },
    goToCheckin() {
      uni.navigateTo({ url: '/pages/wealth-sub/checkin' })
    },
    goToInsurance() {
      uni.navigateTo({ url: '/pages/wealth-sub/insurance-list' })
    },
    goToCreator() {
      uni.navigateTo({ url: '/pages/promotion/index' })
    },
    goToPointsLogs() {
      uni.navigateTo({ url: '/pages/points/points' })
    },
    goToShop() {
      uni.navigateTo({ url: '/pages/shop/index/index' })
    },
    goToCart() {
      uni.navigateTo({ url: '/pages/shop/cart/cart' })
    },
    goToOrders() {
      uni.navigateTo({ url: '/pages/shop/order-list/order-list' })
    },
    goToAfterSales() {
      uni.navigateTo({ url: '/pages/shop/after-sales/after-sales' })
    },
    goToIncome() {
      uni.navigateTo({ url: '/pages/promotion/commission' })
    },
    goToAchievements() {
      uni.navigateTo({ url: '/pages/rewards/badge' })
    },
    goToNetwork() {
      uni.navigateTo({ url: '/pages/promotion/team' })
    },
    childSubDimClick(key) {
      var routes = {
        education: '/pages/assessment/results',
        social: '/pages/activity/index',
        points: '/pages/shop/index',
        emotion: '/pages/mind-detail/emotion-report',
        understanding: '/pages/mind-detail/emotion-trend',
        legacy: '/pages/wishes/index'
      }
      var url = routes[key]
      if (url) {
        uni.navigateTo({ url: url })
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 120rpx;
}

.section {
  margin: 20rpx 30rpx;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}
.section-more {
  font-size: 24rpx;
  color: #999;
}

/* 切换区域 */
.switch-section {
  margin: 0 30rpx 20rpx;
}
.btn-switch {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  color: #fff;
  font-size: 26rpx;
  padding: 16rpx 0;
  border-radius: 40rpx;
  text-align: center;
  line-height: 1.5;
}

/* 财富数据卡片 */
.wealth-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx 20rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.wealth-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wealth-value {
  font-size: 40rpx;
  font-weight: bold;
  color: #F97316;
}
.wealth-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 8rpx;
}
.wealth-divider {
  width: 1rpx;
  height: 60rpx;
  background: #f0f0f0;
}

/* 邀请码复制条 */
.referral-code-bar {
  display: flex;
  align-items: center;
  background: #fff;
  margin-top: 16rpx;
  border-radius: 16rpx;
  padding: 24rpx 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.referral-code-label {
  font-size: 26rpx;
  color: #666;
  margin-right: 16rpx;
}
.referral-code-value {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #F59E0B;
  letter-spacing: 2rpx;
}
.referral-code-copy {
  font-size: 24rpx;
  color: #fff;
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  padding: 8rpx 24rpx;
  border-radius: 20rpx;
}

/* 三子维度卡片 */
.sub-dim-grid {
  display: flex;
}
.sub-dim-card {
  flex: 1;
  margin-right: 16rpx;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx 16rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.sub-dim-card:last-child {
  margin-right: 0;
}
.sub-dim-score {
  font-size: 48rpx;
  font-weight: bold;
  color: #F59E0B;
}
.heart-sub-dim .sub-dim-score {
  color: #FF6B9D;
}
.sub-dim-label {
  font-size: 24rpx;
  color: #333;
  margin-top: 8rpx;
  font-weight: 500;
}
.sub-dim-desc {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}

/* 增值服务 */
.service-grid {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;
}
.service-icon {
  font-size: 48rpx;
  margin-bottom: 8rpx;
}
.service-label {
  font-size: 22rpx;
  color: #666;
}

/* 底部菜单 */
.menu-list {
  margin: 30rpx 30rpx 0;
  background: #fff;
  border-radius: 16rpx;
}
.menu-item {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
}
.menu-item:last-child {
  border-bottom: none;
}
.arrow {
  color: #ccc;
  font-size: 32rpx;
}
.logout-item {
  color: #EF4444;
}

/* 未登录 */
.login-guide-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60rpx 40rpx;
  margin: 30rpx;
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.06);
}
.login-guide-text {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  margin-bottom: 30rpx;
  line-height: 1.6;
}
.login-guide-section .login-btn {
  width: 60%;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(135deg, #5B9BD5, #3A7CC4);
  color: #fff;
  font-size: 30rpx;
  font-weight: bold;
  border-radius: 40rpx;
  text-align: center;
  border: none;
}
.login-prompt .login-btn::after {
  border: none;
}

/* 退出切换 */
.exit-switch {
  margin: 20rpx 30rpx 0;
  padding: 16rpx 24rpx;
  background: #FEF3C7;
  border-radius: 12rpx;
  text-align: center;
  font-size: 26rpx;
  color: #92400E;
}
</style>