gupiao-web/src/components/PerformanceCard.vue

<template>
  <view class="card performance-card">
    <view class="performance-item">
      <text class="performance-label">历史成功率</text>
      <text class="performance-value success">{{ successRate }}</text>
    </view>
    <view class="performance-item">
      <text class="performance-label">平均收益率</text>
      <text class="performance-value profit">{{ profitRate }}</text>
    </view>
    <view class="performance-item">
      <text class="performance-label">总交易次数</text>
      <text class="performance-value">{{ totalTrades }}</text>
    </view>
  </view>
</template>

<script setup>
defineProps({
  successRate: { type: String, default: '0%' },
  profitRate: { type: String, default: '+0%' },
  totalTrades: { type: [Number, String], default: 0 }
})
</script>

<style scoped>
.card {
  background: #ffffff;
  border-radius: 24rpx;
  box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
  margin-bottom: 32rpx;
}

.performance-card {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #f7f8fc;
  padding: 32rpx 24rpx;
}

.performance-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.performance-label {
  font-size: 24rpx;
  color: #666a7f;
  margin-bottom: 12rpx;
}

.performance-value {
  font-size: 32rpx;
  font-weight: 700;
  color: #222222;
}

.performance-value.success {
  color: #3abf81;
}

.performance-value.profit {
  color: #f16565;
}
</style>