From 1c7d1f1b7be77bc10cd549a6b778b4a55786985f Mon Sep 17 00:00:00 2001
From: wujingjing <gersonwu@qq.com>
Date: 星期四, 13 二月 2025 13:51:17 +0800
Subject: [PATCH] 修改首页样式
---
src/views/Home.vue | 488 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 431 insertions(+), 57 deletions(-)
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 90c1621..87eb281 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -2,45 +2,30 @@
<div class="h-full">
<!-- 杞挱鍥鹃儴鍒� -->
<div class="banner-carousel bg-primary relative right-[29.5%] w-screen">
- <el-carousel height="400px" :interval="5000" arrow="always">
+ <el-carousel height="500px" :interval="5000" arrow="always">
<el-carousel-item>
- <div class="banner-slide bg-blue-900 text-white">
- <div class="container mx-auto px-4 h-full flex items-center">
- <div class="flex justify-between items-center w-full">
- <div class="flex-1">
- <div class="text-4xl font-bold mb-4">鍏ㄥ浗淇℃爣濮旇蒋浠朵笌绯荤粺宸ョ▼</div>
- <div class="text-5xl font-bold mb-8">鍒嗗浼�(TC28/SC7)鎴愮珛40鍛ㄥ勾</div>
- <div class="flex space-x-8 text-xl">
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">136<sup>+</sup></div>
- <div>鍙戝竷鍥藉鏍囧噯</div>
- </div>
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">19<sup>+</sup></div>
- <div>鍙戝竷琛屼笟鏍囧噯</div>
- </div>
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">211<sup>+</sup></div>
- <div>瀵瑰彛鍥介檯鏍囧噯鍖栫粍缁�</div>
- </div>
- <div class="text-center">
- <div class="text-4xl font-bold text-blue-400">60<sup>+</sup></div>
- <div>鍙備笌鐨勫浗闄呮爣鍑�</div>
- </div>
- </div>
- </div>
- <div class="w-1/3">
- <div class="text-6xl font-bold text-blue-400">40</div>
- </div>
- </div>
- </div>
+ <div class="carousel-item">
+ <img src="@/assets/carousel/1.png" class="carousel-image" />
</div>
</el-carousel-item>
+ <el-carousel-item>
+ <div class="carousel-item">
+ <img src="@/assets/carousel/4.png" class="carousel-image" />
+ </div>
+ </el-carousel-item>
+ <el-carousel-item>
+ <div class="carousel-item">
+ <img src="@/assets/carousel/3.png" class="carousel-image" />
+ </div>
+ </el-carousel-item>
+ <!-- <el-carousel-item>
+ <img src="@/assets/carousel/1.png" class="w-full h-full object-cover" />
+ </el-carousel-item> -->
</el-carousel>
</div>
- <div class="-mt-20 relative z-20">
+ <div class="relative z-20 2">
<!-- 鍔熻兘鎸夐挳鍖哄煙 -->
- <div class="bg-[#f3f3f3] py-8 -mt-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">
@@ -65,14 +50,14 @@
</div>
</div>
</router-link>
- <router-link to="/publish-app" class="block" style="border-right: 1px solid #e3e3e3">
+ <router-link to="/industrial-software" class="block" style="border-right: 1px solid #e3e3e3">
<div class="flex items-center gap-1 justify-center">
<div class="w-16 h-16">
<img src="@/assets/icons/publish-app.svg" alt="鍙慉PP" class="w-full h-full" />
</div>
<div>
- <div class="text-lg font-medium">鍙慉PP</div>
- <div class="text-sm text-info-light-3">Publish APP</div>
+ <div class="text-lg font-medium">鎵続PP</div>
+ <div class="text-sm text-info-light-3">Find APP</div>
</div>
</div>
</router-link>
@@ -132,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">
+ <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>
@@ -149,7 +134,9 @@
alt="閫氱煡鍏憡"
/>
<div class="bg-page p-4 flex-auto">
- <div class="font-bold text-medium over-ellipsis mb-2">姝︽眽甯備汉姘戞斂搴滃叧浜庡嵃鍙戞姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲�</div>
+ <div class="font-bold text-medium over-ellipsis mb-2">
+ 姝︽眽甯備汉姘戞斂搴滃叧浜庡嵃鍙戞姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲�
+ </div>
<div class="text-small text-regular">
鍚勫尯浜烘皯鏀垮簻锛屽競浜烘皯鏀垮簻鍚勯儴闂細
缁忕爺绌讹紝鐜板皢銆婃姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲忓彂灞曠殑鑻ュ共鏀跨瓥鎺柦銆嬪嵃鍙戠粰浣犱滑锛岃璁ょ湡缁勭粐瀹炴柦銆�
@@ -160,11 +147,9 @@
class="flex text-regular justify-between items-center py-2"
style="border-bottom: 1px solid #e3e3e3"
>
- <div class="flex items-center hover:text-primary w-full">
+ <div class="flex items-center hover:text-primary w-full" @click="handleNewsClick(item.link)">
<!-- <div class="w-1.5 h-1.5 rounded-full bg-gray-400 mr-2"></div> -->
- <div
- class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap "
- >
+ <div class="w-full text-gray-700 hover:text-blue-500 cursor-pointer text-ellipsis overflow-hidden whitespace-nowrap">
{{ item.title }}
</div>
</div>
@@ -173,38 +158,420 @@
</div>
</div>
</div>
+
+ <!-- 娲诲姩鍚堜綔鍖哄煙 -->
+ <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-bold"> <span class="text-primary">娲诲姩</span>鍚堜綔</span>
+ </div>
+ <el-button text>鏇村</el-button>
+ </div>
+ <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 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">
+ 4083<span class="text-base text-info-light-3 ml-1">涓�</span>
+ </div>
+ </div>
+ <div class="grid grid-cols-1 gap-4">
+ <div v-for="(item, index) in cooperationData" :key="index" class="flex justify-between items-center">
+ <span class="text-[#26c4f6]">{{ item.region }}</span>
+ <div>
+ <span class="text-white font-bold">{{ item.count }}</span>
+ <span class="text-sm text-gray-500 ml-1 text-regular">涓�</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <!-- 宸ヤ笟杞欢鍒嗙被缁熻 -->
+ <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 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>
+ </div>
+ </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>
+ </div>
+ </div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
-import { Document } from '@element-plus/icons-vue';
-import { ref } from 'vue';
+import { Document, Operation } from '@element-plus/icons-vue';
+import * as echarts from 'echarts';
+import { onMounted, ref } from 'vue';
const newsList = ref([
{
- title: '鍏充簬鍗板彂銆婂畞娉㈠競淇冭繘杞欢浜т笟楂樿川閲忓彂灞曚笓椤规斂绛栨剰瑙併�嬬殑閫氱煡',
- date: '2024-02-11',
+ title: '涓婃捣甯傜粡娴庝俊鎭寲濮斿叧浜庡緛闆嗙敤鑳借澶囨洿鏂颁緵搴旈摼骞冲彴鐨勯�氱煡',
+ date: '2025-02-07',
+ link: 'https://sheitc.sh.gov.cn/jjyx/20250207/7e424cc336b84066890ba2366c4543a1.html',
},
{
- title: '骞夸笢鐪佸伐涓氬拰淇℃伅鍖栧巺鍏充簬寮�灞�2024骞存湁鍏充汉鎵嶄笓椤归」鐩鍗曟帹鑽愬伐浣滅殑閫氱煡',
- date: '2024-02-11',
+ title: '娴欐睙澶ц妯′互鏃ф崲鏂版柟妗堝叕甯�',
+ date: '2025-02-08',
+ link: 'https://news.qq.com/rain/a/20250208A05YH100',
},
{
- title: '鍏充簬鍗板彂銆婂畞娉㈠競杞欢浜т笟绐佺牬鎻愬崌鍙戝睍琛屽姩鏂规銆嬬殑閫氱煡',
- date: '2024-02-11',
+ title: '2024骞磋澶囨洿鏂颁笌娑堣垂鍝佷互鏃ф崲鏂版垚鏁堟樉钁�',
+ date: '2025-02-10',
+ link: 'https://www.sohu.com/a/857615850_122006510',
},
{
- title: '姝︽眽甯傜粡淇″眬鍏充簬瀵广�婃姹夊競鍏充簬杩涗竴姝ヤ績杩涜蒋浠跺拰淇℃伅鎶�鏈湇鍔′笟楂樿川閲忓彂灞曠殑鑻ュ共鏀跨瓥锛堝緛姹傛剰瑙佺锛夈�嬪叕寮�寰佹眰鎰忚鐨勯�氱煡',
- date: '2024-02-11',
+ title: '涓婃捣甯傚伐涓氶�氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规壎鎸佸疄鏂界粏鍒�',
+ date: '2025-01-06',
+ link: 'https://service.shanghai.gov.cn/XingZhengWenDangKuJyh/XZGFDetails.aspx?docid=250120100555h7fouO6RCg6qGzauglW',
},
+ // {
+ // title: '鍗板彂鎺ㄥ姩宸ヤ笟棰嗗煙璁惧鏇存柊宸ヤ綔瀹炴柦鏂规鐨勯�氱煡',
+ // date: '2024-10-22',
+ // },
+ // {
+ // title: '鍏充簬銆婁笂娴峰競宸ヤ笟閫氫俊涓氱敤鑳借澶囨洿鏂颁笓椤规斂绛栧疄鏂界粏鍒欙紙寰佹眰鎰忚绋匡級銆嬪叕寮�寰佹眰鎰忚鐨勫叕鍛�',
+ // date: '2024-12-18',
+ // },
+ // {
+ // title: '瑙ｈ浜т笟鑳芥晥鎸囧崡锛屾帹鍔ㄨ澶囧鏍囧強鏇存柊',
+ // date: '2024-08-05',
+ // },
+ // {
+ // title: '涓冮儴闂ㄨ仈鍚堝嵃鍙戞柟妗堥儴缃插伐涓氶鍩熻澶囨洿鏂板拰鎶�鏈敼閫� 鎺ㄥ姩鍏堣繘浜ц兘姣旈噸鎸佺画鎻愬崌',
+ // date: '2024-04-29',
+ // },
+ // {
+ // title: '鍥藉姟闄㈠叧浜庡嵃鍙戙�婃帹鍔ㄥぇ瑙勬ā璁惧鏇存柊鍜屾秷璐瑰搧浠ユ棫鎹㈡柊琛屽姩鏂规銆嬬殑閫氱煡',
+ // date: '2024-03-07',
+ // },
]);
+
+const cooperationData = ref([
+ { region: '绂忓缓鐪�', count: 7 },
+ { region: '閲嶅簡甯�', count: 6 },
+ { region: '涓婃捣甯�', count: 184 },
+ { region: '婀栧寳鐪�', count: 4 },
+ { region: '骞夸笢鐪�', count: 249 },
+]);
+
+const handleNewsClick = (link: string) => {
+ window.open(link, '_blank');
+};
+
+// 鍥捐〃鏁版嵁
+const chartData = [
+ { name: '鐮斿彂璁捐绫�', value: 644, percentage: '15.77%' },
+ { name: '鐢熶骇鍒堕�犵被', value: 1058, percentage: '25.91%' },
+ { name: '杩愮淮鏈嶅姟绫�', value: 934, percentage: '22.88%' },
+ { name: '缁忚惀绠＄悊绫�', value: 1035, percentage: '25.35%' },
+ { name: '鏀拺淇濋殰绫�', value: 412, percentage: '10.09%' },
+];
+
+const pieChartRef = ref<HTMLElement | null>(null);
+const barChartRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+ if (pieChartRef.value && barChartRef.value) {
+ // 鍒濆鍖栭ゼ鍥�
+ const pieChart = echarts.init(pieChartRef.value);
+ pieChart.setOption({
+ title: {
+ text: '鎬婚噺\n4083',
+ left: '30%',
+ top: '50%',
+ textStyle: {
+ fontSize: 14,
+ lineHeight: 24,
+ align: 'center',
+ fontWeight: 'normal',
+ rich: {
+ value: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ padding: [10, 0],
+ },
+ },
+ },
+ textAlign: 'center',
+ textVerticalAlign: 'middle',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c} ({d}%)',
+ },
+ legend: {
+ orient: 'vertical',
+ right: '-1%',
+ top: 'middle',
+ formatter: (name: string) => {
+ const item = chartData.find((d) => d.name === name);
+ return `${name}: ${item?.value} (${item?.percentage})`;
+ },
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['30%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ },
+ emphasis: {
+ label: {
+ show: false,
+ },
+ },
+ data: chartData.map((item) => ({
+ value: item.value,
+ name: item.name,
+ })),
+ color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#E8684A'],
+ },
+ ],
+ });
+
+ // 鍒濆鍖栨煴鐘跺浘
+ const barChart = echarts.init(barChartRef.value);
+ barChart.setOption({
+ title: {
+ text: '鐮斿彂璁捐绫讳骇鍝佹暟閲忕粺璁�',
+ left: 'center',
+ top: 10,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ data: ['姹熻嫃鐪�', '鍖椾含甯�', '涓婃捣甯�', '娴欐睙鐪�', '骞夸笢鐪�', '灞变笢鐪�'],
+ axisLabel: {
+ interval: 0,
+ rotate: 30,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ name: '鏁伴噺',
+ },
+ series: [
+ {
+ data: [260, 240, 35, 25, 20, 8],
+ type: 'bar',
+ barWidth: '40%',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#83bff6' },
+ { offset: 0.5, color: '#188df0' },
+ { offset: 1, color: '#188df0' },
+ ]),
+ },
+ emphasis: {
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#2378f7' },
+ { offset: 0.7, color: '#2378f7' },
+ { offset: 1, color: '#83bff6' },
+ ]),
+ },
+ },
+ },
+ ],
+ });
+
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', () => {
+ pieChart.resize();
+ barChart.resize();
+ });
+ }
+});
+
+// 琛屽熀閫氫笓鏁版嵁
+const chartData2 = [
+ { name: '鍩虹鍏辨�х被', value: 1764, percentage: '43.20%' },
+ { name: '琛屼笟閫氱敤绫�', value: 1670, percentage: '40.90%' },
+ { name: '浼佷笟涓撶敤绫�', value: 596, percentage: '14.60%' },
+ { name: '鍏朵粬绫�', value: 53, percentage: '1.30%' },
+];
+
+const pieChart2Ref = ref<HTMLElement | null>(null);
+const barChart2Ref = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+ // 鍒濆鍖栫浜屼釜楗煎浘
+ if (pieChart2Ref.value && barChart2Ref.value) {
+ const pieChart2 = echarts.init(pieChart2Ref.value);
+ pieChart2.setOption({
+ title: {
+ text: '鎬婚噺\n4083',
+ left: '30%',
+ top: '50%',
+ textStyle: {
+ fontSize: 14,
+ lineHeight: 24,
+ align: 'center',
+ fontWeight: 'normal',
+ rich: {
+ value: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ padding: [10, 0],
+ },
+ },
+ },
+ textAlign: 'center',
+ textVerticalAlign: 'middle',
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}: {c} ({d}%)',
+ },
+ legend: {
+ orient: 'vertical',
+ right: '-1%',
+ top: 'middle',
+ formatter: (name: string) => {
+ const item = chartData2.find((d) => d.name === name);
+ return `${name}: ${item?.value} (${item?.percentage})`;
+ },
+ },
+ series: [
+ {
+ type: 'pie',
+ radius: ['40%', '70%'],
+ center: ['30%', '50%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ },
+ emphasis: {
+ label: {
+ show: false,
+ },
+ },
+ data: chartData2.map((item) => ({
+ value: item.value,
+ name: item.name,
+ })),
+ color: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16'],
+ },
+ ],
+ });
+
+ // 鍒濆鍖栫浜屼釜鏌辩姸鍥�
+ const barChart2 = echarts.init(barChart2Ref.value);
+ barChart2.setOption({
+ title: {
+ text: '鍩虹鍏辨�х被浜у搧鏁伴噺缁熻',
+ left: 'center',
+ top: 10,
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: {
+ type: 'category',
+ data: ['姹熻嫃鐪�', '鍖椾含甯�', '娴欐睙鐪�', '涓婃捣甯�', '灞变笢鐪�', '骞夸笢鐪�'],
+ axisLabel: {
+ interval: 0,
+ rotate: 30,
+ },
+ },
+ yAxis: {
+ type: 'value',
+ name: '鏁伴噺',
+ max: 600,
+ },
+ series: [
+ {
+ data: [500, 450, 220, 150, 150, 120],
+ type: 'bar',
+ barWidth: '40%',
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ { offset: 0, color: '#26c4f6' },
+ { offset: 0.5, color: '#26c4f6' },
+ { offset: 1, color: '#26c4f6' },
+ ]),
+ },
+ },
+ ],
+ });
+
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', () => {
+ pieChart2.resize();
+ barChart2.resize();
+ });
+ }
+});
</script>
<style scoped>
-.banner-slide {
+.carousel-item {
+ width: 100%;
height: 100%;
+ overflow: hidden;
+ position: relative;
+ cursor: pointer;
+}
+
+.carousel-image {
+ width: 100%;
+ height: 100%;
+ object-fit: cover; /* 淇濇寔鍥剧墖姣斾緥骞跺～鍏呭鍣� */
+ object-position: center center; /* 灞呬腑鏄剧ず鍥剧墖 */
}
.function-card {
@@ -217,11 +584,18 @@
}
:deep(.el-carousel__arrow) {
- background-color: rgba(255, 255, 255, 0.3);
+ background-color: rgba(0, 0, 0, 0.5);
border: none;
+ width: 44px;
+ height: 44px;
+ font-size: 20px;
&:hover {
- background-color: rgba(255, 255, 255, 0.5);
+ background-color: rgba(0, 0, 0, 0.7);
+ }
+
+ i {
+ color: #fff;
}
}
</style>
--
Gitblit v1.9.3