From 9bd77262c5d697e515190b4eb9e216a3e9c1359c Mon Sep 17 00:00:00 2001
From: tanghaolin <1723298894@qq.com>
Date: 星期四, 13 二月 2025 15:28:45 +0800
Subject: [PATCH] 添加能效产品数据与图片，放在public文件夹内，方便后期数据与图片修改替换
---
src/views/Home.vue | 66 +++++++++++++++++++++------------
1 files changed, 42 insertions(+), 24 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d15f37e..87eb281 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -11,7 +11,6 @@
<el-carousel-item>
<div class="carousel-item">
<img src="@/assets/carousel/4.png" class="carousel-image" />
-
</div>
</el-carousel-item>
<el-carousel-item>
@@ -24,9 +23,9 @@
</el-carousel-item> -->
</el-carousel>
</div>
- <div class="relative z-20">
+ <div class="relative z-20 2">
<!-- 鍔熻兘鎸夐挳鍖哄煙 -->
- <div class="bg-[#f3f3f3] py-8">
+ <div class="bg-white py-8">
<div class="mx-auto px-32">
<div class="grid grid-cols-4 divide-x-w-default">
<router-link to="/publish-app" class="block" style="border-left: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3">
@@ -118,13 +117,13 @@
</div>
</div>
</div>
- <div class="bg-white px-4 py-4">
+ <div class="bg-white px-4 py-4 flex flex-col gap-8">
<!-- 鏂伴椈鍏憡鍖哄煙 -->
- <div class="mx-auto mb-4">
+ <div class="w-full mb-4">
<div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
<div class="flex items-center space-x-2 ml-2 font-bold">
<el-icon class="text-blue-500"><Document /></el-icon>
- <span class="text-medium font-medium"> <span class="text-primary">閫氱煡</span>鍏憡</span>
+ <span class="text-medium font-bold"> <span class="text-primary">閫氱煡</span>鍏憡</span>
</div>
<el-button text>鏇村</el-button>
</div>
@@ -161,19 +160,19 @@
</div>
<!-- 娲诲姩鍚堜綔鍖哄煙 -->
- <div class="mx-auto">
+ <div class="w-full">
<div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
<div class="flex items-center space-x-2 ml-2 font-bold">
<el-icon class="text-blue-500"><Operation /></el-icon>
- <span class="text-medium font-medium"> <span class="text-primary">娲诲姩</span>鍚堜綔</span>
+ <span class="text-medium font-bold"> <span class="text-primary">娲诲姩</span>鍚堜綔</span>
</div>
<el-button text>鏇村</el-button>
</div>
- <div class="flex">
+ <div class="flex bg-[#f9f9f9]">
<div class="flex-auto">
<img src="@/assets/images/china-map.png" alt="娲诲姩鍚堜綔" class="w-full h-full" />
</div>
- <div class="bg-[#393939] h-fit my-auto mr-2 w-[200px] px-4 py-2">
+ <div class="bg-[#393939] h-fit my-auto w-[200px] px-4 py-2 mx-10">
<div class="flex flex-col justify-between items-center mb-4 gap-2">
<div class="text-lg font-bold text-[#26c4f6]">鍏ㄥ浗宸ヤ笟杞欢锝滃伐涓欰PP鎬婚噺</div>
<div class="px-10 bg-[#d7ecf1] py-1.5 rounded-lg text-large font-bold text-warning">
@@ -194,14 +193,14 @@
</div>
<!-- 宸ヤ笟杞欢鍒嗙被缁熻 -->
- <div class="mx-auto mt-2">
+ <div class="w-full bg-[#f6f7f9]">
<!-- <div class="flex justify-between items-center mb-4" style="border-bottom: 1.5px solid var(--alloy-color-primary)">
<div class="flex items-center space-x-2 ml-2 font-bold">
<el-icon class="text-blue-500"><DataLine /></el-icon>
<span class="text-medium font-medium">宸ヤ笟杞欢锝滃伐涓欰PP<span class="text-primary">浜у搧鍒嗙被</span></span>
</div>
</div> -->
- <div class="text-large flex items-center w-fit mx-auto">宸ヤ笟杞欢 | 宸ヤ笟APP浜у搧鍒嗙被</div>
+ <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">宸ヤ笟杞欢 | 宸ヤ笟APP浜у搧鍒嗙被</div>
<div class="flex">
<div class="w-[45%] h-[400px]" ref="pieChartRef"></div>
<div class="w-[55%] h-[400px]" ref="barChartRef"></div>
@@ -209,8 +208,8 @@
</div>
<!-- 琛屽熀閫氫笓鍒嗙被缁熻 -->
- <div class="mx-auto mt-8">
- <div class="text-large flex items-center w-fit mx-auto">琛屽熀閫氫笓</div>
+ <div class="w-full bg-[#f6f7f9]">
+ <div class="text-large flex items-center w-fit mx-auto mt-4 font-bold">琛屽熀閫氫笓</div>
<div class="flex">
<div class="w-[45%] h-[400px]" ref="pieChart2Ref"></div>
<div class="w-[55%] h-[400px]" ref="barChart2Ref"></div>
@@ -300,14 +299,23 @@
pieChart.setOption({
title: {
text: '鎬婚噺\n4083',
- left: 'center',
- top: 'center',
+ left: '30%',
+ top: '50%',
textStyle: {
- fontSize: 20, // 澧炲ぇ瀛椾綋澶у皬
+ fontSize: 14,
lineHeight: 24,
align: 'center',
- fontWeight: 'bold', // 鍔犵矖鏄剧ず
+ fontWeight: 'normal',
+ rich: {
+ value: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ padding: [10, 0],
+ },
+ },
},
+ textAlign: 'center',
+ textVerticalAlign: 'middle',
},
tooltip: {
trigger: 'item',
@@ -315,7 +323,7 @@
},
legend: {
orient: 'vertical',
- right: '10%',
+ right: '-1%',
top: 'middle',
formatter: (name: string) => {
const item = chartData.find((d) => d.name === name);
@@ -433,14 +441,23 @@
pieChart2.setOption({
title: {
text: '鎬婚噺\n4083',
- left: 'center',
- top: 'center',
+ left: '30%',
+ top: '50%',
textStyle: {
- fontSize: 20,
+ fontSize: 14,
lineHeight: 24,
align: 'center',
- fontWeight: 'bold',
+ fontWeight: 'normal',
+ rich: {
+ value: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ padding: [10, 0],
+ },
+ },
},
+ textAlign: 'center',
+ textVerticalAlign: 'middle',
},
tooltip: {
trigger: 'item',
@@ -448,7 +465,7 @@
},
legend: {
orient: 'vertical',
- right: '10%',
+ right: '-1%',
top: 'middle',
formatter: (name: string) => {
const item = chartData2.find((d) => d.name === name);
@@ -547,6 +564,7 @@
height: 100%;
overflow: hidden;
position: relative;
+ cursor: pointer;
}
.carousel-image {
--
Gitblit v1.9.3