资金看板-完善-数据暂时没有对接

src/views/largeScreen/components/RevenueContractCard.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="stat-card" :style="customStyles">
+    <!-- 标题区域 -->
+    <div class="stat-card__title">{{ title }}</div>
+    
+    <!-- 数值区域 -->
+    <div class="stat-card__value-container">
+      <span class="stat-card__value">{{ formattedValue }}</span>
+      <span class="stat-card__unit">{{ unit }}</span>
+    </div>
+    
+    <!-- 底部信息区域 -->
+    <div class="stat-card__footer">
+      <div class="stat-card__trend">
+        <img 
+          class="stat-card__trend-icon" 
+          :src="'/src/assets/large/' + trendIcon+'.png'" 
+          :alt="trendDirection === 'up' ? '上升' : '下降'"
+        >
+        <span class="stat-card__trend-text">{{ trendText }}</span>
+      </div>
+      <img 
+        class="stat-card__badge" 
+        :src="'/src/assets/large/'+badgeIcon+'.png'" 
+        alt="徽章图标"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+// 定义组件属性
+const props = defineProps({
+  // 卡片标题
+  title: {
+    type: String,
+    default: '收入合同'
+  },
+  // 数值
+  value: {
+    type: Number,
+    default: 205805.17
+  },
+  // 单位
+  unit: {
+    type: String,
+    default: '万元'
+  },
+  // 增长率
+  growthRate: {
+    type: Number,
+    default: 3.2
+  },
+  // 增长对比周期
+  period: {
+    type: String,
+    default: '较上月'
+  },
+  // 趋势方向 (up/down)
+  trendDirection: {
+    type: String,
+    default: 'up',
+    validator: (value) => ['up', 'down'].includes(value)
+  },
+  // 趋势图标
+  trendIcon: {
+    type: String,
+    default: 'up'
+  },
+  // 徽章图标
+  badgeIcon: {
+    type: String,
+    default: 'top1'
+  },
+  // 卡片自定义样式
+  customStyles: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// 格式化数值为带千分位的字符串
+const formattedValue = computed(() => {
+  return props.value.toLocaleString('zh-CN', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+});
+
+// 生成趋势文本
+const trendText = computed(() => {
+  return `${props.growthRate}% ${props.period}`;
+});
+</script>
+
+<style lang="scss" scoped>
+.stat-card {
+  width: 225px;
+  height: 147px;
+  background-color: rgba(29, 214, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+  box-sizing: border-box;
+  border: 1px solid rgba(29, 214, 255, 0.1);
+  border-radius: 4px; // 增加轻微圆角，提升视觉效果
+  
+  &__title {
+    font-size: 14px;
+    color: #8FABBF;
+    line-height: 20px;
+  }
+  
+  &__value-container {
+    display: flex;
+    align-items: baseline;
+  }
+  
+  &__value {
+    font-size: 24px;
+    color: #fff;
+    line-height: 30px;
+    margin-right: 5px;
+    font-weight: bold;
+  }
+  
+  &__unit {
+    color: #8FABBF;
+    font-size: 14px;
+  }
+  
+  &__footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  &__trend {
+    display: flex;
+    align-items: center;
+  }
+  
+  &__trend-icon {
+    width: 12px;
+    height: 12px;
+    margin-right: 4px;
+  }
+  
+  &__trend-text {
+    font-size: 14px;
+    color: #8FABBF;
+  }
+  
+  &__badge {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+// 为下降趋势添加不同颜色
+:deep(.stat-card__trend-text) {
+  color: v-bind('trendDirection === "up" ? "#8FABBF" : "#ff4d4f"');
+}
+</style>