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="富足源于利他与坚持" />

      <!-- 品牌定位语 -->
      <view class="brand-strap">
        <text class="brand-strap-text">分享价值，收获财富</text>
      </view>

      <!-- 登录引导 -->
      <view class="login-guide-section">
        <LoginGuideCard
          title="解锁财富能量与推广收益"
          :items="[
            '查看家庭财富能量仪表盘与推广收益',
            '管理邀请返利，开通会员享专属折扣',
            '浏览商城精选商品，一键加入购物车'
          ]" />
      </view>

      <!-- 商城精选预览（无需登录） -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">🛍️ 商城精选</text>
          <text class="section-more" @click="goToShop">查看全部 ›</text>
        </view>
        <scroll-view scroll-x class="product-scroll" show-scrollbar="false">
          <view class="product-list">
            <view class="product-card" v-for="(item, idx) in guestProducts" :key="idx" @click="goProductDetail(item.id)">
              <image class="product-img" :src="item.image || '/static/default-product.png'" mode="aspectFill" />
              <text class="product-name">{{ item.name }}</text>
              <text class="product-price">¥{{ item.price || 0 }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </template>

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

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

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

      <!-- 财富能量环 -->
      <WealthEnergyRing
        :score="wealthScore"
        :delta="deltaPercent" />

      <!-- 成长溪流 -->
      <view class="section stream-section">
        <view class="section-header">
          <text class="section-title">📈 成长溪流</text>
        </view>
        <view class="stream-stages">
          <view
            class="stage-card"
            :class="{ active: stage.key === currentStage }"
            v-for="stage in streamStages"
            :key="stage.key">
            <text class="stage-icon">{{ stage.icon }}</text>
            <text class="stage-name">{{ stage.name }}</text>
            <text class="stage-desc">{{ stage.desc }}</text>
            <text class="stage-range">{{ stage.range }}</text>
          </view>
        </view>
        <view class="stream-water">
          <view class="stream-water-fill" :style="{ width: wealthScore + '%' }"></view>
        </view>
        <text class="stream-percent">水位 {{ wealthScore }}%</text>
        <text class="stream-tip">{{ streamTip }}</text>
      </view>

      <!-- 子维度水滴 -->
      <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="disc-card">
          <text class="disc-label">💰 累计收益</text>
          <text class="disc-value">¥{{ wealthData.totalEarnings || 0 }}</text>
          <text class="disc-sub">较上月 ↑ {{ deltaPercent }}%</text>
        </view>
        <view class="disc-sub-row">
          <view class="disc-sub-card" @click="goToIncome">
            <text class="disc-sub-label">可提现</text>
            <text class="disc-sub-value">¥{{ wealthData.availableAmount || 0 }}</text>
            <text class="disc-sub-action">提现 →</text>
          </view>
          <view class="disc-sub-card" @click="goToAchievements">
            <text class="disc-sub-label">邀请人数</text>
            <text class="disc-sub-value">{{ wealthData.referralCount || 0 }}人</text>
            <text class="disc-sub-action">邀请 →</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" v-else>
        <view class="child-wealth-card">
          <view class="child-wealth-item">
            <text class="child-wealth-icon">⭐</text>
            <text class="child-wealth-value">{{ wealthPoints || 0 }}</text>
            <text class="child-wealth-label">累计积分</text>
          </view>
          <view class="child-wealth-item">
            <text class="child-wealth-icon">📝</text>
            <text class="child-wealth-value">{{ taskPercent }}%</text>
            <text class="child-wealth-label">任务完成</text>
          </view>
          <view class="child-wealth-item">
            <text class="child-wealth-icon">🏆</text>
            <text class="child-wealth-value">{{ badgeCount }}</text>
            <text class="child-wealth-label">已获徽章</text>
          </view>
        </view>
        <view class="child-trend">
          <text class="child-trend-title">📊 本周成长趋势</text>
          <view class="child-trend-bars">
            <view class="trend-bar" v-for="(h, i) in weekTrend" :key="i" :style="{ height: h + '%' }"></view>
          </view>
          <view class="child-trend-days">
            <text class="trend-day" v-for="(d, i) in weekDays" :key="i">{{ d }}</text>
          </view>
        </view>
      </view>

      <!-- 财富服务 8 宫格 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">🚀 财富服务</text>
        </view>
        <view class="service-grid">
          <view class="service-item" v-for="item in serviceList" :key="item.label" @click="onServiceClick(item.action)">
            <view class="service-icon-wrap">
              <text class="service-icon">{{ item.icon }}</text>
            </view>
            <text class="service-label">{{ item.label }}</text>
          </view>
        </view>
      </view>

      <!-- 底部菜单 -->
      <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>

      <!-- 富维度介绍卡片 -->
      <DimensionIntroCard dimCode="wealth" v-if="isLoggedIn" learn-more-url="/pages/wealth/dimension-intro" />
    </template>
  </view>
</template>

<script>
import TabTransition from '../../components/tab-transition.vue'
import PageBanner from '../../components/PageBanner.vue'
import WealthEnergyRing from '../../components/WealthEnergyRing.vue'
import WealthSubScores from '../../components/WealthSubScores.vue'
import BodyWealthAlert from '../../components/BodyWealthAlert.vue'
import FamilyMemberStrip from '../../components/FamilyMemberStrip.vue'
import DimensionIntroCard from '../../components/DimensionIntroCard.vue'
import {
  getChildren,
  getWealthDetail,
  getReferralCode,
  getReferralSummary,
  getCommissionSummary,
  getVisibleFamilyMembers,
  productList
} from '../../utils/api.js'
import nav from '../../utils/nav.js'

export default {
  components: { TabTransition, PageBanner, WealthEnergyRing, WealthSubScores, BodyWealthAlert, FamilyMemberStrip, DimensionIntroCard },
  data() {
    return {
      showTabTransition: true,
      isLoggedIn: false,
      role: 'parent',
      // 五维评分
      wealthScore: 0,
      // 子维度 - 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: ''
      },
      // 成长溪流
      deltaPercent: 5.2,
      streamStages: [
        { key: 'start', icon: '💧', name: '起步', desc: '新人阶段', range: '0-30%' },
        { key: 'mid', icon: '🌊', name: '汇流', desc: '成长阶段', range: '30-70%' },
        { key: 'surge', icon: '🌊🌊', name: '奔涌', desc: '达人阶段', range: '70-100%' }
      ],
      // 孩子数据
      taskPercent: 0,
      badgeCount: 0,
      weekTrend: [30, 40, 35, 50, 60, 55, 70],
      weekDays: ['一', '二', '三', '四', '五', '六', '日'],
      // 服务列表
      serviceList: [
        { icon: '📝', label: '记账打卡', action: 'goToCheckin' },
        { icon: '🛡️', label: '保单管理', action: 'goToInsurance' },
        { icon: '🎨', label: '创客中心', action: 'goToCreator' },
        { icon: '🏪', label: '商城首页', action: 'goToShop' },
        { icon: '🛒', label: '购物车', action: 'goToCart' },
        { icon: '📋', label: '我的订单', action: 'goToOrders' },
        { icon: '🔄', label: '售后服务', action: 'goToAfterSales' },
        { icon: '📊', label: '积分记录', action: 'goToPointsLogs' }
      ],
      children: [],
      familyMembersVisible: [],
      selectedMemberId: null,
      guestProducts: [],
    }
  },
  computed: {
    activeChildId() {
      if (this.role === 'child') {
        return uni.getStorageSync('currentChildId')
      }
      return ''
    },
    currentStage() {
      var s = this.wealthScore
      if (s >= 70) return 'surge'
      if (s >= 30) return 'mid'
      return 'start'
    },
    streamTip() {
      var s = this.wealthScore
      if (s >= 70) return '🎉 已是富足达人，继续引领全家成长！'
      if (s >= 30) return '💡 坚持分享，下一阶段"奔涌"在望'
      return '🌱 从今天开始，迈出创富第一步'
    }
  },
  onShow() {
    this.showTabTransition = true

    var token = uni.getStorageSync('token')
    if (!token) {
      this.isLoggedIn = false
      this.loadGuestProducts()
      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.loadChildren()
    this.loadWealthDetail()
    this.loadWealthData()
    this.loadFamilyMembersVisible()
    this._watchPageReady()
  },
  methods: {
    onFamilyMemberSelect(member) {
      this.selectedMemberId = member.id
    },
    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.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' })
        }
      })
    },
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出登录吗？',
        success: function(res) {
          if (res.confirm) {
            uni.clearStorageSync()
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    },
    goToProfile() {
      nav.goPage('/pages/profile-main/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' })
    },
    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' })
    },
    goToCart() {
      uni.navigateTo({ url: '/pages/shop/cart/cart' })
    },
    loadGuestProducts() {
      var self = this
      productList({ page: 1, size: 4, sort: 'sales' }).then(function(res) {
        if (res.code === 200 && res.data && res.data.records) {
          self.guestProducts = res.data.records.slice(0, 4)
        }
      }).catch(function() {})
    },
    goProductDetail(id) {
      uni.navigateTo({ url: '/pages/shop/detail/detail?id=' + id })
    },
    onServiceClick(action) {
      if (this[action]) {
        this[action]()
      }
    }
  }
}
</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;
}

/* 成长溪流 */
.stream-section {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.stream-stages {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.stage-card {
  flex: 1;
  margin: 0 8rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background: #F5F9FC;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stage-card.active {
  background: #FFF7ED;
  border: 2rpx solid #FBBF24;
}
.stage-icon {
  font-size: 44rpx;
}
.stage-name {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
  margin-top: 8rpx;
}
.stage-desc {
  font-size: 20rpx;
  color: #999;
  margin-top: 4rpx;
}
.stage-range {
  font-size: 20rpx;
  color: #F59E0B;
  margin-top: 4rpx;
}
.stream-water {
  height: 20rpx;
  border-radius: 10rpx;
  background: #FEF3C7;
  overflow: hidden;
}
.stream-water-fill {
  height: 100%;
  border-radius: 10rpx;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  transition: width 0.8s ease;
}
.stream-percent {
  display: block;
  text-align: right;
  font-size: 22rpx;
  color: #F59E0B;
  margin-top: 8rpx;
}
.stream-tip {
  display: block;
  text-align: center;
  font-size: 24rpx;
  color: #92400E;
  margin-top: 12rpx;
}

/* 财富数据主卡 */
.disc-card {
  background: linear-gradient(135deg, #FFF7ED, #FEF3C7);
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 16rpx;
  display: flex;
  flex-direction: column;
}
.disc-label {
  font-size: 26rpx;
  color: #92400E;
}
.disc-value {
  font-size: 56rpx;
  font-weight: bold;
  color: #F59E0B;
  margin-top: 8rpx;
}
.disc-sub {
  font-size: 24rpx;
  color: #B45309;
  margin-top: 8rpx;
}
.disc-sub-row {
  display: flex;
  margin-bottom: 16rpx;
}
.disc-sub-card {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.disc-sub-card:first-child {
  margin-right: 8rpx;
}
.disc-sub-card:last-child {
  margin-left: 8rpx;
}
.disc-sub-label {
  font-size: 24rpx;
  color: #999;
}
.disc-sub-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-top: 8rpx;
}
.disc-sub-action {
  font-size: 22rpx;
  color: #F59E0B;
  margin-top: 8rpx;
}

/* 孩子财富卡 */
.child-wealth-card {
  display: flex;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 0;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.child-wealth-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.child-wealth-icon {
  font-size: 44rpx;
}
.child-wealth-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #F59E0B;
  margin-top: 8rpx;
}
.child-wealth-label {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
}
.child-trend {
  margin-top: 16rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.child-trend-title {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
}
.child-trend-bars {
  display: flex;
  align-items: flex-end;
  height: 120rpx;
  margin-top: 16rpx;
}
.trend-bar {
  flex: 1;
  margin: 0 6rpx;
  background: linear-gradient(180deg, #FBBF24, #F59E0B);
  border-radius: 6rpx 6rpx 0 0;
}
.child-trend-days {
  display: flex;
  margin-top: 8rpx;
}
.trend-day {
  flex: 1;
  text-align: center;
  font-size: 20rpx;
  color: #999;
}

/* 邀请码复制条 */
.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;
}

/* 服务入口 */
.service-grid {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
}
.service-item {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16rpx 0;
}
.service-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 24rpx;
  background: #FFF7ED;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8rpx;
}
.service-icon {
  font-size: 40rpx;
}
.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;
}

/* 品牌定位语 */
.brand-strap {
  margin: 16rpx 30rpx 0;
  padding: 20rpx 28rpx;
  background: linear-gradient(135deg, #FFFBEB, rgba(245,158,11,0.12));
  border-radius: 16rpx;
  border-left: 4rpx solid #F59E0B;
}
.brand-strap-text {
  font-size: 26rpx;
  color: #92400E;
  font-weight: 500;
}

/* 商城精选预览 */
.product-scroll {
  white-space: nowrap;
  padding: 0 30rpx;
}
.product-list {
  display: inline-flex;
  gap: 20rpx;
}
.product-card {
  width: 220rpx;
  flex-shrink: 0;
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
}
.product-img {
  width: 220rpx;
  height: 220rpx;
  background: #f5f5f5;
}
.product-name {
  display: block;
  padding: 12rpx 12rpx 4rpx;
  font-size: 24rpx;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-price {
  display: block;
  padding: 4rpx 12rpx 12rpx;
  font-size: 26rpx;
  font-weight: bold;
  color: #F59E0B;
}
</style>