antissoft / lvqianmeiye_ERP

<template>
  <el-dialog
    title="大项目部老师工资详情"
    :visible="visible"
    width="1400px"
    :close-on-click-modal="false"
    @close="handleClose"
    class="detail-dialog"
    :modal="true"
    :modal-append-to-body="true"
  >
    <div v-if="detailData" class="detail-content">
      <!-- 基本信息 -->
      <div class="detail-section">
        <div class="section-title">
          <i class="el-icon-user"></i>
          <span>基本信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item">
              <span class="label">门店名称：</span>
              <span class="value">{{ detailData.StoreName || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">员工姓名：</span>
              <span class="value">{{ detailData.EmployeeName || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">岗位：</span>
              <span class="value">{{ detailData.Position || '无' }}</span>
            </div>
            <div class="info-item">
              <span class="label">员工账号：</span>
              <span class="value">{{ detailData.EmployeeAccount || '无' }}</span>
            </div>
            <div class="info-item" v-if="detailData.IsNewStore !== undefined && detailData.IsNewStore !== null">
              <span class="label">是否新店：</span>
              <span class="value">{{ detailData.IsNewStore || '无' }}</span>
            </div>
            <div class="info-item" v-if="detailData.NewStoreProtectionStage !== undefined && detailData.NewStoreProtectionStage !== null">
              <span class="label">新店保护阶段：</span>
              <span class="value">{{ detailData.NewStoreProtectionStage || '0' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 业绩信息 -->
      <div class="detail-section" v-if="hasPerformanceFields">
        <div class="section-title">
          <i class="el-icon-trophy"></i>
          <span>业绩信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in performanceFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '无' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 提成信息 -->
      <div class="detail-section" v-if="hasCommissionFields">
        <div class="section-title">
          <i class="el-icon-money"></i>
          <span>提成信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in commissionFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else-if="field.type === 'percent'">{{ formatPercent(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '无' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 工资信息 -->
      <div class="detail-section" v-if="hasSalaryFields">
        <div class="section-title">
          <i class="el-icon-wallet"></i>
          <span>工资信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in salaryFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight, large: field.large }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '0' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 保底信息 -->
      <div class="detail-section" v-if="hasGuaranteedFields">
        <div class="section-title">
          <i class="el-icon-lock"></i>
          <span>保底信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in guaranteedFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '无' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 补贴信息 -->
      <div class="detail-section" v-if="hasSubsidyFields">
        <div class="section-title">
          <i class="el-icon-circle-plus"></i>
          <span>补贴信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in subsidyFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '无' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 扣款信息 -->
      <div class="detail-section" v-if="hasDeductionFields">
        <div class="section-title">
          <i class="el-icon-circle-minus"></i>
          <span>扣款信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in deductionFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '无' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 其他信息 -->
      <div class="detail-section" v-if="hasOtherFields">
        <div class="section-title">
          <i class="el-icon-document"></i>
          <span>其他信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in otherFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '无' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 支付信息 -->
      <div class="detail-section" v-if="hasPaymentFields">
        <div class="section-title">
          <i class="el-icon-credit-card"></i>
          <span>支付信息</span>
        </div>
        <div class="section-content">
          <div class="info-row">
            <div class="info-item" v-for="field in paymentFields" :key="field.key">
              <span class="label">{{ field.label }}：</span>
              <span class="value" :class="{ highlight: field.highlight }">
                <span v-if="field.type === 'money'">{{ formatMoney(detailData[field.key]) }}</span>
                <span v-else>{{ detailData[field.key] || '无' }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div v-else class="no-data">
      <i class="el-icon-warning"></i>
      <span>暂无数据</span>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MajorProjectTeacherDetailDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    detailData: {
      type: Object,
      default: null
    }
  },
  computed: {
    // 业绩相关字段
    performanceFields() {
      return this.getFieldsByCategory('performance')
    },
    hasPerformanceFields() {
      return this.performanceFields.length > 0
    },
    // 提成相关字段
    commissionFields() {
      return this.getFieldsByCategory('commission')
    },
    hasCommissionFields() {
      return this.commissionFields.length > 0
    },
    // 工资相关字段
    salaryFields() {
      return this.getFieldsByCategory('salary')
    },
    hasSalaryFields() {
      return this.salaryFields.length > 0
    },
    // 保底相关字段
    guaranteedFields() {
      return this.getFieldsByCategory('guaranteed')
    },
    hasGuaranteedFields() {
      return this.guaranteedFields.length > 0
    },
    // 补贴相关字段
    subsidyFields() {
      return this.getFieldsByCategory('subsidy')
    },
    hasSubsidyFields() {
      return this.subsidyFields.length > 0
    },
    // 扣款相关字段
    deductionFields() {
      return this.getFieldsByCategory('deduction')
    },
    hasDeductionFields() {
      return this.deductionFields.length > 0
    },
    // 其他字段
    otherFields() {
      return this.getFieldsByCategory('other')
    },
    hasOtherFields() {
      return this.otherFields.length > 0
    },
    // 支付相关字段
    paymentFields() {
      return this.getFieldsByCategory('payment')
    },
    hasPaymentFields() {
      return this.paymentFields.length > 0
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    formatMoney(value) {
      if (value === null || value === undefined || value === '') {
        return '0.00'
      }
      return Number(value).toFixed(2)
    },
    formatPercent(value) {
      if (value === null || value === undefined || value === '') {
        return '0.00%'
      }
      return (Number(value) * 100).toFixed(2) + '%'
    },
    // 根据分类获取字段
    getFieldsByCategory(category) {
      if (!this.detailData) return []
      
      const excludeFields = ['StoreName', 'EmployeeName', 'Position', 'EmployeeAccount', 'Id', 'CreateTime', 'UpdateTime', 'CreateUser', 'UpdateUser', 'StatisticsMonth', 'IsNewStore', 'NewStoreProtectionStage']
      
      const categoryMap = {
        performance: ['OrderAchievement', 'ConsumeAchievement', 'RefundAchievement', 'TotalPerformance'],
        commission: ['Commission', 'PerformanceCommissionRate', 'PerformanceCommissionAmount', 'TotalCommission', 'HandworkFee'],
        salary: ['BaseSalary', 'WorkingDays', 'LeaveDays', 'TransportationAllowance', 'LessRest', 'FullAttendance', 'CalculatedGrossSalary'],
        guaranteed: ['GuaranteedSalary', 'GuaranteedLeaveDeduction', 'GuaranteedBaseSalary', 'GuaranteedSupplement', 'FinalGrossSalary'],
        subsidy: ['Subsidy', 'MonthlyTrainingSubsidy', 'MonthlyTransportSubsidy', 'LastMonthTrainingSubsidy', 'LastMonthTransportSubsidy', 'TotalSubsidy'],
        deduction: ['Deduction', 'MissingCard', 'LateArrival', 'LeaveDeduction', 'SocialInsuranceDeduction', 'RewardDeduction', 'AccommodationDeduction', 'StudyPeriodDeduction', 'WorkClothesDeduction', 'TotalDeduction'],
        payment: ['Payment', 'ActualSalary', 'MonthlyPaymentStatus', 'PaidAmount', 'PendingAmount', 'MonthlyTotalPayment'],
        other: ['Bonus', 'ReturnPhoneDeposit', 'ReturnAccommodationDeposit', 'LastMonthSupplement']
      }
      
      const keywords = categoryMap[category] || []
      const fields = []
      
      Object.keys(this.detailData).forEach(key => {
        if (excludeFields.includes(key)) return
        
        const lowerKey = key.toLowerCase()
        const matchesCategory = keywords.some(kw => lowerKey.includes(kw.toLowerCase()))
        
        if (matchesCategory || (category === 'other' && !this.isInOtherCategories(key))) {
          const type = this.getFieldType(key)
          const label = this.formatFieldLabel(key)
          fields.push({
            key,
            label,
            type,
            highlight: this.isHighlightField(key),
            large: key === 'ActualSalary'
          })
        }
      })
      
      return fields.sort((a, b) => {
        const orderA = this.getFieldOrder(a.key)
        const orderB = this.getFieldOrder(b.key)
        return orderA - orderB
      })
    },
    // 判断字段是否在其他分类中
    isInOtherCategories(key) {
      const lowerKey = key.toLowerCase()
      const categories = [
        ['orderachievement', 'consumeachievement', 'refundachievement', 'totalperformance'],
        ['commission', 'performancecommissionrate', 'performancecommissionamount', 'totalcommission', 'handworkfee'],
        ['basesalary', 'workingdays', 'leavedays', 'transportationallowance', 'lessrest', 'fullattendance', 'calculatedgrosssalary'],
        ['guaranteedsalary', 'guaranteedleavededuction', 'guaranteedbasesalary', 'guaranteedsupplement', 'finalgrosssalary'],
        ['subsidy', 'monthlytrainingsubsidy', 'monthlytransportsubsidy', 'lastmonthtrainingsubsidy', 'lastmonthtransportsubsidy', 'totalsubsidy'],
        ['deduction', 'missingcard', 'latearrival', 'leavededuction', 'socialinsurancededuction', 'rewarddeduction', 'accommodationdeduction', 'studyperioddeduction', 'workclothesdeduction', 'totaldeduction'],
        ['payment', 'actualsalary', 'monthlypaymentstatus', 'paidamount', 'pendingamount', 'monthlytotalpayment']
      ]
      
      return categories.some(cat => cat.some(kw => lowerKey.includes(kw)))
    },
    // 获取字段类型
    getFieldType(key) {
      const lowerKey = key.toLowerCase()
      
      const moneyFields = ['achievement', 'commission', 'salary', 'subsidy', 'deduction', 'amount', 'fee', 'bonus', 'deposit', 'supplement', 'payment', 'handwork', 'gross', 'guaranteed', 'transportation', 'allowance', 'total', 'lessrest', 'fullattendance']
      const percentFields = ['rate', 'percentage', 'percent']
      
      if (moneyFields.some(field => lowerKey.includes(field)) && !lowerKey.includes('status')) {
        return 'money'
      } else if (percentFields.some(field => lowerKey.includes(field))) {
        return 'percent'
      }
      return 'text'
    },
    // 格式化字段标签（参考后端 MajorProjectTeacherSalaryOutput.cs 的 XML 注释）
    formatFieldLabel(key) {
      // 根据后端字段定义的中文注释进行映射
      const labelMap = {
        // 基础信息
        'Id': '主键ID',
        'StatisticsMonth': '统计月份',
        'StoreId': '部门ID',
        'StoreName': '部门名称',
        'Position': '核算岗位',
        'EmployeeName': '员工姓名',
        'EmployeeId': '员工ID',
        'EmployeeAccount': '员工账号',
        'StoreType': '门店类型',
        'StoreCategory': '门店类别',
        'IsNewStore': '是否新店',
        'NewStoreProtectionStage': '新店保护阶段',
        'IsLocked': '是否锁定',
        'IsTerminated': '是否离职',
        'UpdateTime': '更新时间',
        'CreateTime': '创建时间',
        'CreateUser': '创建人',
        'UpdateUser': '更新人',
        
        // 业绩相关
        'OrderAchievement': '开单业绩',
        'ConsumeAchievement': '消耗业绩',
        'RefundAchievement': '退卡业绩',
        'TotalPerformance': '总业绩',
        
        // 底薪相关
        'BaseSalary': '底薪',
        
        // 业绩提成相关
        'PerformanceCommissionRate': '业绩提成比例',
        'PerformanceCommissionAmount': '业绩提成金额',
        'TotalCommission': '提成合计',
        
        // 其他收入
        'HandworkFee': '手工费',
        'TransportationAllowance': '车补',
        'LessRest': '少休费',
        'FullAttendance': '全勤奖',
        
        // 考勤相关
        'WorkingDays': '在店天数',
        'LeaveDays': '请假天数',
        
        // 工资计算
        'CalculatedGrossSalary': '核算应发工资',
        'GuaranteedSalary': '保底工资',
        'GuaranteedLeaveDeduction': '保底请假扣款',
        'GuaranteedBaseSalary': '保底底薪',
        'GuaranteedSupplement': '保底补差',
        'FinalGrossSalary': '最终应发工资',
        
        // 补贴相关
        'MonthlyTrainingSubsidy': '当月培训补贴',
        'MonthlyTransportSubsidy': '当月交通补贴',
        'LastMonthTrainingSubsidy': '上月培训补贴',
        'LastMonthTransportSubsidy': '上月交通补贴',
        'TotalSubsidy': '补贴合计',
        
        // 扣款相关
        'MissingCard': '缺卡扣款',
        'LateArrival': '迟到扣款',
        'LeaveDeduction': '请假扣款',
        'SocialInsuranceDeduction': '扣社保',
        'RewardDeduction': '扣除奖励',
        'AccommodationDeduction': '扣住宿费',
        'StudyPeriodDeduction': '扣学习期费用',
        'WorkClothesDeduction': '扣工作服费用',
        'TotalDeduction': '扣款合计',
        
        // 其他
        'Bonus': '发奖金',
        'ReturnPhoneDeposit': '退手机押金',
        'ReturnAccommodationDeposit': '退住宿押金',
        'LastMonthSupplement': '补发上月',
        
        // 支付相关
        'ActualSalary': '实发工资',
        'MonthlyPaymentStatus': '当月是否发放',
        'PaidAmount': '支付金额',
        'PendingAmount': '待支付金额',
        'MonthlyTotalPayment': '当月支付总额'
      }
      
      // 如果映射中存在，直接返回中文
      if (labelMap[key]) {
        return labelMap[key]
      }
      
      // 如果没有映射，尝试将驼峰命名转换为中文
      let chineseLabel = key
        .replace(/([A-Z])/g, ' $1') // 在大写字母前加空格
        .trim()
        .toLowerCase()
      
      // 常见英文单词的中文映射（作为兜底）
      const wordMap = {
        'store': '门店',
        'total': '总',
        'performance': '业绩',
        'order': '开单',
        'consume': '消耗',
        'refund': '退卡',
        'achievement': '业绩',
        'commission': '提成',
        'rate': '比例',
        'amount': '金额',
        'salary': '工资',
        'base': '底薪',
        'gross': '应发',
        'actual': '实发',
        'final': '最终',
        'calculated': '核算',
        'working': '在店',
        'days': '天数',
        'leave': '请假',
        'transportation': '交通',
        'allowance': '补贴',
        'less': '少',
        'rest': '休',
        'full': '全',
        'attendance': '勤',
        'guaranteed': '保底',
        'deduction': '扣款',
        'supplement': '补差',
        'subsidy': '补贴',
        'monthly': '当月',
        'training': '培训',
        'transport': '交通',
        'last': '上月',
        'missing': '缺',
        'card': '卡',
        'late': '迟到',
        'arrival': '到达',
        'social': '社保',
        'insurance': '保险',
        'reward': '奖励',
        'accommodation': '住宿',
        'study': '学习',
        'period': '期',
        'work': '工作',
        'clothes': '服',
        'fee': '费用',
        'bonus': '奖金',
        'return': '退',
        'phone': '手机',
        'deposit': '押金',
        'payment': '支付',
        'status': '状态',
        'paid': '已支付',
        'pending': '待支付',
        'handwork': '手工',
        'is': '是否',
        'new': '新',
        'protection': '保护',
        'stage': '阶段',
        'id': 'ID',
        'name': '名称',
        'type': '类型',
        'category': '类别',
        'time': '时间',
        'user': '人'
      }
      
      // 尝试翻译常见单词
      const words = chineseLabel.split(' ')
      const translatedWords = words.map(word => {
        // 移除常见的后缀
        const cleanWord = word.replace(/s$/, '').replace(/ed$/, '').replace(/ing$/, '')
        return wordMap[cleanWord] || wordMap[word] || word
      })
      
      // 如果翻译后的结果与原文不同，使用翻译结果
      if (translatedWords.some((w, i) => w !== words[i])) {
        chineseLabel = translatedWords.join('')
      } else {
        // 如果无法翻译，至少将驼峰命名转换为更易读的形式
        chineseLabel = key.replace(/([A-Z])/g, ' $1').trim()
      }
      
      return chineseLabel || key
    },
    // 判断是否为高亮字段
    isHighlightField(key) {
      const highlightFields = ['TotalPerformance', 'TotalCommission', 'FinalGrossSalary', 'ActualSalary', 'TotalSubsidy', 'TotalDeduction', 'MonthlyTotalPayment']
      return highlightFields.includes(key)
    },
    // 获取字段顺序
    getFieldOrder(key) {
      const orderMap = {
        'OrderAchievement': 1,
        'ConsumeAchievement': 2,
        'RefundAchievement': 3,
        'TotalPerformance': 4,
        'PerformanceCommissionRate': 10,
        'PerformanceCommissionAmount': 11,
        'TotalCommission': 12,
        'HandworkFee': 13,
        'BaseSalary': 20,
        'WorkingDays': 21,
        'LeaveDays': 22,
        'TransportationAllowance': 23,
        'LessRest': 24,
        'FullAttendance': 25,
        'CalculatedGrossSalary': 26,
        'GuaranteedSalary': 30,
        'GuaranteedLeaveDeduction': 31,
        'GuaranteedBaseSalary': 32,
        'GuaranteedSupplement': 33,
        'FinalGrossSalary': 34,
        'TotalSubsidy': 40,
        'TotalDeduction': 50,
        'ActualSalary': 60,
        'MonthlyTotalPayment': 70
      }
      return orderMap[key] || 999
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-dialog {
  ::v-deep .el-dialog {
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
  }

  ::v-deep .el-dialog__header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(10px);
    padding: 20px 24px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .el-dialog__title {
      font-size: 20px;
      font-weight: 700;
      background: linear-gradient(135deg, #303133 0%, #606266 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .el-dialog__close {
      color: #606266;
      font-size: 20px;
      transition: all 0.3s ease;

      &:hover {
        color: #3b82f6;
        transform: rotate(90deg);
      }
    }
  }

  ::v-deep .el-dialog__body {
    padding: 24px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 50%, #f0f4f8 100%);
  }

  .detail-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;

    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(144, 147, 153, 0.1);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(144, 147, 153, 0.3);
      border-radius: 4px;
      transition: background 0.3s ease;

      &:hover {
        background: rgba(144, 147, 153, 0.5);
      }
    }
  }

  .detail-section {
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(144, 147, 153, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #3b82f6 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover {
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
      transform: translateY(-2px);

      &::before {
        opacity: 1;
      }
    }

    .section-title {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid rgba(59, 130, 246, 0.2);
      font-size: 18px;
      font-weight: 700;
      background: linear-gradient(135deg, #303133 0%, #606266 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      position: relative;

      i {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        font-size: 18px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
          transition: left 0.5s ease;
        }

        &.el-icon-user,
        &.el-icon-user-solid {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
          color: #3b82f6;
        }

        &.el-icon-trophy {
          background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(217, 119, 6, 0.15) 100%);
          color: #f59e0b;
        }

        &.el-icon-money,
        &.el-icon-coin {
          background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
          color: #22c55e;
        }

        &.el-icon-medal {
          background: linear-gradient(135deg, rgba(168, 85, 247, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%);
          color: #a855f7;
        }

        &.el-icon-wallet {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
          color: #3b82f6;
        }

        &.el-icon-circle-minus {
          background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(220, 38, 38, 0.15) 100%);
          color: #ef4444;
        }

        &.el-icon-circle-plus {
          background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(21, 128, 61, 0.15) 100%);
          color: #22c55e;
        }

        &.el-icon-document,
        &.el-icon-document-copy {
          background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.15) 100%);
          color: #6b7280;
        }

        &.el-icon-credit-card {
          background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.15) 100%);
          color: #ec4899;
        }

        &.el-icon-date,
        &.el-icon-calendar {
          background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(75, 85, 99, 0.15) 100%);
          color: #6b7280;
        }

        &.el-icon-data-line,
        &.el-icon-s-data {
          background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
          color: #3b82f6;
        }

        &.el-icon-goods,
        &.el-icon-shopping-bag-1 {
          background: linear-gradient(135deg, rgba(236, 72, 153, 0.15) 0%, rgba(219, 39, 119, 0.15) 100%);
          color: #ec4899;
        }

        &:not([class*="el-icon-"]) {
          background: linear-gradient(135deg, rgba(96, 98, 102, 0.1) 0%, rgba(144, 147, 153, 0.1) 100%);
          color: #606266;
        }

        &:hover {
          transform: scale(1.1) rotate(5deg);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

          &::before {
            left: 100%;
          }

          &.el-icon-user,
          &.el-icon-user-solid {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff;
          }

          &.el-icon-trophy {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #fff;
          }

          &.el-icon-money,
          &.el-icon-coin {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            color: #fff;
          }

          &.el-icon-medal {
            background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
            color: #fff;
          }

          &.el-icon-wallet {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff;
          }

          &.el-icon-circle-minus {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: #fff;
          }

          &.el-icon-circle-plus {
            background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
            color: #fff;
          }

          &.el-icon-document,
          &.el-icon-document-copy {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            color: #fff;
          }

          &.el-icon-credit-card {
            background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
            color: #fff;
          }

          &.el-icon-date,
          &.el-icon-calendar {
            background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
            color: #fff;
          }

          &.el-icon-data-line,
          &.el-icon-s-data {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff;
          }

          &.el-icon-goods,
          &.el-icon-shopping-bag-1 {
            background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
            color: #fff;
          }

          &:not([class*="el-icon-"]) {
            background: linear-gradient(135deg, #606266 0%, #909399 100%);
            color: #fff;
          }
        }
      }
    }

    .section-content {
      .info-row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px 40px;

        .info-item {
          display: flex;
          align-items: center;
          min-width: 200px;
          flex: 0 0 calc(33.333% - 27px);
          padding: 12px 16px;
          background: linear-gradient(135deg, rgba(248, 249, 250, 0.8) 0%, rgba(240, 242, 245, 0.8) 100%);
          border-radius: 8px;
          border: 1px solid rgba(144, 147, 153, 0.1);
          transition: all 0.3s ease;
          cursor: default;

          &:hover {
            background: linear-gradient(135deg, rgba(239, 246, 255, 0.9) 0%, rgba(219, 234, 254, 0.9) 100%);
            border-color: rgba(59, 130, 246, 0.3);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
          }

          .label {
            color: #606266;
            font-size: 14px;
            font-weight: 500;
            white-space: nowrap;
            margin-right: 8px;
            flex-shrink: 0;
          }

          .value {
            color: #303133;
            font-size: 14px;
            font-weight: 500;
            flex: 1;
            text-align: right;

            &.highlight {
              color: #3b82f6;
              font-weight: 700;
              font-size: 16px;
            }

            &.large {
              font-size: 24px;
              font-weight: 700;
              background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
            }
          }
        }
      }
    }
  }

  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #909399;

    i {
      font-size: 64px;
      margin-bottom: 20px;
      color: #cbd5e1;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0.5;
      }
    }

    span {
      font-size: 16px;
      font-weight: 500;
    }
  }
}
</style>