feat(largeScreen): 大屏展示功能开发

- 新增 RevenueContractCard 组件，用于展示收入、支出等合同数据
- 实现 bottomboxconpoent 组件的通用化，支持自定义标题、数值等
- 在 centerPage 中集成 RevenueContractCard 组件，展示大屏数据
- 更新 rightPage 组件，添加实际数据请求和展示
- 优化 optionList 中的图表配置，提高图表可读性

src/views/largeScreen/components/RevenueContractCard.vue

@@ -2,28 +2,21 @@
   <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__value">{{ props.value }}</span>
       <span class="stat-card__unit">{{ unit }}</span>
     </div>
-    
+
     <!-- 底部信息区域 -->
-    <div class="stat-card__footer">
+    <div class="stat-card__footer" v-if="showIcon">
       <div class="stat-card__trend">
-        <img 
-          class="stat-card__trend-icon" 
-          :src="'/src/assets/large/' + trendIcon+'.png'" 
-          :alt="trendDirection === 'up' ? '上升' : '下降'"
-        >
+        <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="徽章图标"
-      >
+      <img class="stat-card__badge" :src="'/src/assets/large/' + badgeIcon + '.png'" alt="徽章图标">
     </div>
   </div>
 </template>
@@ -78,6 +71,10 @@ const props = defineProps({
   customStyles: {
     type: Object,
     default: () => ({})
+  },
+  showIcon: {
+    type: Boolean,
+    default: false
   }
 });
 
@@ -103,22 +100,26 @@ const trendText = computed(() => {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 20px;
+  padding: 35px 10px;
   box-sizing: border-box;
   border: 1px solid rgba(29, 214, 255, 0.1);
   border-radius: 4px; // 增加轻微圆角，提升视觉效果
-  
+  text-align: center;
+
+
   &__title {
     font-size: 14px;
     color: #8FABBF;
     line-height: 20px;
   }
-  
+
   &__value-container {
-    display: flex;
+    // display: flex;
     align-items: baseline;
+    // align-items: center;
+    // flex-direction: column;
   }
-  
+
   &__value {
     font-size: 24px;
     color: #fff;
@@ -126,34 +127,34 @@ const trendText = computed(() => {
     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;