修改首页样式

wujingjing

2025-02-13 1c7d1f1b7be77bc10cd549a6b778b4a55786985f

 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]">全国工业软件｜工业APP总量</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">工业软件｜工业APP<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 {