From c466b7f253a93d3a9b58c658adf6ec75574f5bd8 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期二, 17 六月 2025 09:06:38 +0800
Subject: [PATCH] 公司logo动态切换，整体样式修改
---
src/views/index.vue | 150 +++++++++++++++++++++++++++----------------------
1 files changed, 82 insertions(+), 68 deletions(-)
diff --git a/src/views/index.vue b/src/views/index.vue
index 06de745..f6ae965 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -9,21 +9,21 @@
<div class="card-group">
<div class="info-card">
<div class="info-message">
- <div class="info-number">{{contractAmount}}</div>
+ <div class="info-number">{{ contractAmount }}</div>
<div class="info-title">鍚堝悓閲戦(鍏�)</div>
</div>
<img src="@/assets/images/icon1.png" alt="" style="width: 63px;height: 63px">
</div>
<div class="info-card1">
<div class="info-message">
- <div class="info-number">{{invoiceAmount}}</div>
+ <div class="info-number">{{ invoiceAmount }}</div>
<div class="info-title">寮�绁ㄩ噾棰�(鍏�)</div>
</div>
<img src="@/assets/images/icon2.png" alt="" style="width: 63px;height: 63px">
</div>
<div class="info-card2">
<div class="info-message">
- <div class="info-number">{{receiptAmount}}</div>
+ <div class="info-number">{{ receiptAmount }}</div>
<div class="info-title">鍥炴閲戦(鍏�)</div>
</div>
<img src="@/assets/images/icon%203.png" alt="" style="width: 63px;height: 63px">
@@ -38,20 +38,18 @@
<div class="card-group">
<div class="pie-group">
<div style="margin-right: 80px">
- <Echarts ref="chart"
- :legend="pieLegend"
- :chartStyle="chartStyle"
- :series="materialPieSeries"
- :tooltip="pieTooltip"></Echarts>
+ <Echarts ref="chart" :legend="pieLegend" :chartStyle="chartStyle" :series="materialPieSeries"
+ :tooltip="pieTooltip"></Echarts>
</div>
<div class="info-message2">
<div class="info-message1">
<div class="pie-title">鏈湀鍥炴閲戦</div>
- <div class="pie-info"><span class="pie-number">{{receiveAmount}}</span>鍏� <span class="pie-number">{{receiveAmountPercentage}}</span>%</div>
+ <div class="pie-info"><span class="pie-number">{{ receiveAmount }}</span>鍏� <span
+ class="pie-number">{{ receiveAmountPercentage }}</span>%</div>
</div>
<div class="info-message1">
<div class="pie-title">搴旀敹娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number">{{contractAmountMonth}}</span>鍏�</div>
+ <div class="pie-info"><span class="pie-number">{{ contractAmountMonth }}</span>鍏�</div>
</div>
</div>
</div>
@@ -59,21 +57,18 @@
<div class="card-group">
<div class="pie-group">
<div style="margin-right: 80px">
- <Echarts ref="chart"
- :options="options"
- :legend="pieLegend"
- :chartStyle="chartStyle"
- :series="materialPieSeries1"
- :tooltip="pieTooltip1"></Echarts>
+ <Echarts ref="chart" :options="options" :legend="pieLegend" :chartStyle="chartStyle"
+ :series="materialPieSeries1" :tooltip="pieTooltip1"></Echarts>
</div>
<div class="info-message2">
<div class="info-message1">
<div class="pie-title1">鏈湀浠樻閲戦</div>
- <div class="pie-info"><span class="pie-number1">{{paymentAmount}}</span>鍏� <span class="pie-number1">{{payableAmountPercentage}}</span>%</div>
+ <div class="pie-info"><span class="pie-number1">{{ paymentAmount }}</span>鍏� <span
+ class="pie-number1">{{ payableAmountPercentage }}</span>%</div>
</div>
<div class="info-message1">
<div class="pie-title1">搴斾粯娆鹃噾棰�</div>
- <div class="pie-info"><span class="pie-number1">{{payableAmount}}</span>鍏�</div>
+ <div class="pie-info"><span class="pie-number1">{{ payableAmount }}</span>鍏�</div>
</div>
</div>
</div>
@@ -87,15 +82,8 @@
<span style="font-weight: bold">瀹㈡埛鍚堝悓閲戦TOP5缁熻</span>
</div>
<div>
- <Echarts ref="chart"
- :chartStyle="chartStyle1"
- :grid="grid"
- :legend="barLegend"
- :series="barSeries"
- :tooltip="tooltip"
- :xAxis="xAxis1"
- :yAxis="yAxis1"
- style="height: 42vh;"></Echarts>
+ <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="barSeries"
+ :tooltip="tooltip" :xAxis="xAxis1" :yAxis="yAxis1" style="height: 42vh;"></Echarts>
</div>
</div>
</div>
@@ -107,15 +95,8 @@
<span style="font-weight: bold">鍥炴銆佸紑绁ㄨ繎鍗婂勾璧板娍鍥�</span>
</div>
<div>
- <Echarts ref="chart"
- :chartStyle="chartStyle1"
- :grid="grid"
- :legend="barLegend"
- :series="lineSeries"
- :tooltip="tooltipLine"
- :xAxis="xAxis2"
- :yAxis="yAxis2"
- style="height: 27vh;"></Echarts>
+ <Echarts ref="chart" :chartStyle="chartStyle1" :grid="grid" :legend="barLegend" :series="lineSeries"
+ :tooltip="tooltipLine" :xAxis="xAxis2" :yAxis="yAxis2" style="height: 27vh;"></Echarts>
</div>
</div>
</div>
@@ -190,10 +171,10 @@
borderWidth: 2
},
label: {
- show:false
+ show: false
},
data: [
- { value: 0, name: '鏈湀鍥炴閲戦', itemStyle: { color: '#2D99FF' } },
+ { value: 0, name: '鏈湀鍥炴閲戦', itemStyle: { color: '#2D99FF' } },
{ value: 0, name: '搴旀敹娆鹃噾棰�', itemStyle: { color: '#D4DDFF' } },
]
}
@@ -208,10 +189,10 @@
borderWidth: 2
},
label: {
- show:false
+ show: false
},
data: [
- { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } },
+ { value: 0, name: '鏈湀浠樻閲戦', itemStyle: { color: '#1EBFAC' } },
{ value: 0, name: '搴斾粯娆鹃噾棰�', itemStyle: { color: '#D0EFE1' } },
]
}
@@ -264,22 +245,22 @@
])
const barLegend = reactive({})
const barSeries = ref([
- {
- type: 'bar',
- data: [],
- label: {
- show: true
- },
+ {
+ type: 'bar',
+ data: [],
+ label: {
+ show: true
},
+ },
])
const lineSeries = ref([
- {
- type: 'line',
- data: [],
- label: {
- show: true
- },
+ {
+ type: 'line',
+ data: [],
+ label: {
+ show: true
},
+ },
])
// 鍚堝悓閲戦
const getContractAmountNum = () => {
@@ -330,7 +311,7 @@
customerName.push(item.customerName)
totalAmount.push(item.totalAmount)
})
-// 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
+ // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
xAxis1.value = [
{
type: 'category',
@@ -369,7 +350,7 @@
receiptAmount.push(item.receiptAmount)
invoiceAmount.push(item.invoiceAmount)
})
-// 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
+ // 姝ｇ‘鍝嶅簲寮忚祴鍊硷細鍒涘缓鏂扮殑 xAxis 鍜� series 瀵硅薄
xAxis2.value = [
{
type: 'category',
@@ -458,6 +439,7 @@
width: 56vw;
margin-bottom: 20px;
}
+
.card-top-right {
padding: 16px;
background: #fff;
@@ -466,6 +448,7 @@
margin-bottom: 20px;
margin-left: 20px;
}
+
.card-bottom {
padding: 16px;
background: #fff;
@@ -473,6 +456,7 @@
width: 85.2vw;
margin-bottom: 20px;
}
+
.title {
position: relative;
font-size: 18px;
@@ -481,6 +465,7 @@
padding-left: 10px;
margin-bottom: 26px;
}
+
.title::before {
position: absolute;
left: 0;
@@ -488,12 +473,14 @@
content: '';
width: 4px;
height: 18px;
- background-color: #3A7BFA;
+ background-color: #002FA7;
border-radius: 2px;
}
+
.card-group {
display: flex;
}
+
.info-card {
width: 300px;
height: 126px;
@@ -503,6 +490,7 @@
justify-content: space-around;
align-items: center;
}
+
.info-card1 {
width: 300px;
height: 126px;
@@ -513,6 +501,7 @@
justify-content: space-around;
align-items: center;
}
+
.info-card2 {
width: 300px;
height: 126px;
@@ -522,12 +511,14 @@
justify-content: space-around;
align-items: center;
}
+
.info-message {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
+
.info-message1 {
font-weight: bold;
display: flex;
@@ -535,6 +526,7 @@
justify-content: center;
align-items: flex-start;
}
+
.info-message2 {
font-weight: bold;
display: flex;
@@ -542,25 +534,30 @@
align-items: center;
justify-content: space-around;
}
+
.info-number {
font-weight: bold;
font-size: 32px;
color: #FFFFFF;
margin-bottom: 10px;
}
+
.info-title {
font-weight: bold;
font-size: 18px;
color: #FFFFFF;
}
+
.pie {
display: flex;
flex-direction: row;
justify-content: space-around;
}
+
.pie-group {
display: flex;
}
+
.pie-title {
font-size: 14px;
line-height: 24px;
@@ -568,16 +565,24 @@
padding-left: 16px;
position: relative;
}
+
.pie-title::before {
content: '';
- width: 6px; /* 钃濈偣鐨勫搴� */
- height: 6px; /* 钃濈偣鐨勯珮搴� */
- background-color: #2853FD; /* 钃濈偣鐨勯鑹� */
- border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
+ width: 6px;
+ /* 钃濈偣鐨勫搴� */
+ height: 6px;
+ /* 钃濈偣鐨勯珮搴� */
+ background-color: #2853FD;
+ /* 钃濈偣鐨勯鑹� */
+ border-radius: 50%;
+ /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
position: absolute;
- left: 0; /* 瀹氫綅鍒板乏杈� */
- top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
+ left: 0;
+ /* 瀹氫綅鍒板乏杈� */
+ top: 9px;
+ /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
}
+
.pie-title1 {
font-size: 14px;
line-height: 24px;
@@ -585,26 +590,35 @@
padding-left: 16px;
position: relative;
}
+
.pie-title1::before {
content: '';
- width: 6px; /* 钃濈偣鐨勫搴� */
- height: 6px; /* 钃濈偣鐨勯珮搴� */
- background-color: #1EBFAC; /* 钃濈偣鐨勯鑹� */
- border-radius: 50%; /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
+ width: 6px;
+ /* 钃濈偣鐨勫搴� */
+ height: 6px;
+ /* 钃濈偣鐨勯珮搴� */
+ background-color: #1EBFAC;
+ /* 钃濈偣鐨勯鑹� */
+ border-radius: 50%;
+ /* 灏嗘鏂瑰舰鍙樹负鍦嗗舰 */
position: absolute;
- left: 0; /* 瀹氫綅鍒板乏杈� */
- top: 9px; /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
+ left: 0;
+ /* 瀹氫綅鍒板乏杈� */
+ top: 9px;
+ /* 鍨傜洿灞呬腑瀵归綈锛屾牴鎹楂樿皟鏁� */
}
+
.pie-info {
padding-left: 16px;
font-size: 14px;
line-height: 24px;
}
+
.pie-number {
color: #2853FD;
}
+
.pie-number1 {
color: #1EBFAC;
}
</style>
-
--
Gitblit v1.9.3