页面提交

2025-11-29 17:20:17 +08:00
parent 95832a6288
commit 0eb8ac9181
50 changed files with 8471 additions and 63 deletions
--- a/src/components/finance/CreditCard.vue
+++ b/src/components/finance/CreditCard.vue
@@ -0,0 +1,148 @@
+<template>
+  <view class="credit-card">
+    <view class="header">
+      <text class="title">{{ title }}</text>
+      <text class="date">更新于 {{ updateTime }}</text>
+    </view>
+    
+    <view class="content">
+      <view class="row">
+        <view class="item">
+          <text class="label">总额度</text>
+          <text class="value">¥{{ formatPrice(totalLimit) }}</text>
+        </view>
+        <view class="item">
+          <text class="label">可用额度</text>
+          <text class="value highlight">¥{{ formatPrice(availableLimit) }}</text>
+        </view>
+      </view>
+      
+      <!-- 进度条 -->
+      <view class="progress-wrapper">
+        <view class="progress-bg">
+          <view class="progress-bar" :style="{ width: percent + '%' }"></view>
+        </view>
+        <view class="progress-text">
+          <text>已用 {{ percent }}%</text>
+          <text>¥{{ formatPrice(usedLimit) }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  title: string
+  totalLimit: number
+  usedLimit: number
+  availableLimit: number
+  updateTime: string
+}
+
+const props = defineProps<Props>()
+
+const percent = computed(() => {
+  if (props.totalLimit === 0) return 0
+  return Math.min(100, Math.round((props.usedLimit / props.totalLimit) * 100))
+})
+
+function formatPrice(price: number) {
+  return price.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+}
+</script>
+
+<style lang="scss" scoped>
+.credit-card {
+  background: #fff;
+  border-radius: 16rpx;
+  padding: 30rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
+  margin-bottom: 24rpx;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 30rpx;
+  
+  .title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+    position: relative;
+    padding-left: 20rpx;
+    
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 8rpx;
+      height: 32rpx;
+      background: #ff4d4f;
+      border-radius: 4rpx;
+    }
+  }
+  
+  .date {
+    font-size: 24rpx;
+    color: #999;
+  }
+}
+
+.content {
+  .row {
+    display: flex;
+    margin-bottom: 30rpx;
+    
+    .item {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8rpx;
+      
+      .label {
+        font-size: 26rpx;
+        color: #666;
+      }
+      
+      .value {
+        font-size: 36rpx;
+        font-weight: 600;
+        color: #333;
+        
+        &.highlight {
+          color: #52c41a;
+        }
+      }
+    }
+  }
+  
+  .progress-wrapper {
+    .progress-bg {
+      height: 12rpx;
+      background: #f5f5f5;
+      border-radius: 6rpx;
+      overflow: hidden;
+      margin-bottom: 12rpx;
+    }
+    
+    .progress-bar {
+      height: 100%;
+      background: linear-gradient(90deg, #ff9c6e 0%, #ff4d4f 100%);
+      border-radius: 6rpx;
+      transition: width 0.3s ease;
+    }
+    
+    .progress-text {
+      display: flex;
+      justify-content: space-between;
+      font-size: 24rpx;
+      color: #999;
+    }
+  }
+}
+</style>