qdintc/intc-vue-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 样式完善与修改。

Browse Source
This commit is contained in:
tianyongbao
2026-02-20 20:29:30 +08:00
parent f39db5ef0c
commit 9ce370d484
1 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/pages/statistic/bigScreen/index.vue
View File

@@ -4,26 +4,29 @@
<scroll-view scroll-y class="screen-scroll">
<!-- 核心指标卡片 -->
<view class="metric-cards">
<view class="metric-card primary">
<view class="metric-label">净资产</view>
<view class="metric-value">{{ Number(netAsset || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">总负债</view>
<view class="metric-value danger">{{ Number(totalDebt || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">总资产</view>
<view class="metric-value success">{{ Number(totalAsset || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">信用卡已用额度</view>
<view class="metric-value danger">{{ Number(creditBalance || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">未结清贷款本息</view>
<view class="metric-value danger">{{ Number(unClearedOnlineDebt || 0).toFixed(2) }}<text>元</text></view>
<view class="section">
<view class="section-title">核心指标</view>
<view class="metric-cards">
<view class="metric-card primary">
<view class="metric-label">净资产</view>
<view class="metric-value">{{ Number(netAsset || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">总负债</view>
<view class="metric-value danger">{{ Number(totalDebt || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">总资产</view>
<view class="metric-value success">{{ Number(totalAsset || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">信用卡已用额度</view>
<view class="metric-value danger">{{ Number(creditBalance || 0).toFixed(2) }}<text>元</text></view>
</view>
<view class="metric-card">
<view class="metric-label">未结清贷款本息</view>
<view class="metric-value danger">{{ Number(unClearedOnlineDebt || 0).toFixed(2) }}<text>元</text></view>
</view>
</view>
</view>
<!-- 未结清分期及贷款 -->
@@ -488,7 +491,7 @@ const assetChartOpts = computed(() => ({
lineHeight: 25
},
title: {
name: `总计`,
name: `资产总计`,
fontSize: 15,
color: '#666666'
},
@@ -636,8 +639,9 @@ const trendChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 5
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -680,8 +684,9 @@ const expenseChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 4
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -724,8 +729,9 @@ const investChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 4
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -765,8 +771,9 @@ const lendRepaymentChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 5
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -809,8 +816,9 @@ const balanceChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 5
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -850,8 +858,9 @@ const creditBillChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 4
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -891,8 +900,9 @@ const openCardChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 5
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -928,8 +938,9 @@ const posCardChartOpts = ref({
dataLabel: false,
xAxis: {
disableGrid: true,
rotateLabel: true,
labelCount: 6
fontSize: 9,
boundaryGap: 'justify',
labelCount: 3
},
yAxis: {
gridType: 'dash',
@@ -1302,7 +1313,6 @@ onMounted(() => {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rpx;
margin: 24rpx 0;
.metric-card:nth-child(4),
.metric-card:nth-child(5) {
@@ -1363,6 +1373,10 @@ onMounted(() => {
padding: 24rpx;
border: 1px solid rgba(148, 163, 184, 0.3);
box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.5);
&:first-child {
margin-top: 24rpx;
}
}
.section-title {
@@ -1374,14 +1388,15 @@ onMounted(() => {
border-bottom: 1px solid rgba(148, 163, 184, 0.2);
position: relative;
padding-left: 16rpx;
line-height: 28rpx;
&::before {
content: '';
position: absolute;
left: 0;
top: 2rpx;
top: 0;
width: 6rpx;
height: 24rpx;
height: 28rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 3rpx;
}