From 6dcfc0795d981949ddcabe180c8238d0f4fdb35f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E6=8D=B7?= <151292022@qq.com>
Date: Wed, 22 Oct 2025 22:45:35 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../portraitScreen/components/pxkcjh.vue      | 47 ++++++++--------
 src/views/portraitScreen/components/qyzpq.vue | 16 +++---
 src/views/portraitScreen/components/top10.vue |  2 +-
 src/views/portraitScreen/index.vue            | 54 +++++++++++++++++--
 4 files changed, 82 insertions(+), 37 deletions(-)

diff --git a/src/views/portraitScreen/components/pxkcjh.vue b/src/views/portraitScreen/components/pxkcjh.vue
index 7c84330..fe829ce 100644
--- a/src/views/portraitScreen/components/pxkcjh.vue
+++ b/src/views/portraitScreen/components/pxkcjh.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="tableBox">
     <el-table :data="tableData" height="1540px" style="width: 100%">
-      <el-table-column label="序号" width="140px">
+      <el-table-column label="序号" width="120px">
         <template #default="scope">
           {{ scope.$index + 1 }}
         </template>
       </el-table-column>
-      <el-table-column prop="name" label="课程名称" />
+      <el-table-column prop="name" label="课程名称" width="550px" />
       <el-table-column prop="starTime" label="开课时间" />
       <el-table-column prop="endTime" label="结束时间" />
     </el-table>
@@ -19,8 +19,8 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
 const tableData = ref([
   {
     name: "人社局劳务经纪人培训",
-    starTime: "2025/9/24",
-    endTime: "2025/9/26"
+    starTime: "2025/09/24",
+    endTime: "2025/09/26"
   },
   {
     name: "退役军人适应性培训",
@@ -34,28 +34,28 @@ const tableData = ref([
   },
   {
     name: "电工",
-    starTime: "2025/5/12",
-    endTime: "2025/6/6"
+    starTime: "2025/05/12",
+    endTime: "2025/06/06"
   },
   {
     name: "焊工",
-    starTime: "2025/5/19",
-    endTime: "2025/6/13"
+    starTime: "2025/05/19",
+    endTime: "2025/06/13"
   },
   {
     name: "钳工",
-    starTime: "2025/5/26",
-    endTime: "2025/6/20"
+    starTime: "2025/05/26",
+    endTime: "2025/06/20"
   },
   {
     name: "人工智能训练师",
-    starTime: "2025/6/2",
-    endTime: "2025/6/27"
+    starTime: "2025/06/02",
+    endTime: "2025/06/27"
   },
   {
     name: "无人机飞手",
-    starTime: "2025/6/16",
-    endTime: "2025/7/11"
+    starTime: "2025/06/16",
+    endTime: "2025/07/11"
   }
   // {
   //   name: "手工木工",
@@ -66,7 +66,7 @@ const tableData = ref([
   //   name: "高空作业",
   //   starTime: "2025/8/18",
   //   endTime: "2025/9/12"
-  // },
+  // }
   // {
   //   name: "学生就业指导",
   //   starTime: "2025/9/1",
@@ -77,8 +77,7 @@ const tableData = ref([
 
 <style lang="scss" scoped>
 .tableBox {
-  width: 1440px;
-  margin: 0 auto;
+  width: 100%;
   margin-top: 50px;
 }
 ::v-deep .el-table {
@@ -93,34 +92,34 @@ const tableData = ref([
   margin: 0 0 1px 0;
 }
 ::v-deep .el-table .el-table__cell {
-  padding: 30px 0;
+  padding: 38px 0;
 }
 ::v-deep .el-table th.el-table__cell {
-  background-color: #163155 !important;
+  background-color: rgba(31, 84, 145, 0.473);
   color: #c4f3fe;
   margin: 0 0 4px 0;
   font-size: 40px;
 }
 ::v-deep .el-table tr {
-  background-color: rgba(22, 43, 85, 0.5);
+  background-color: rgba(22, 43, 85, 0);
 }
 ::v-deep .el-table tr:nth-child(even) {
-  background-color: rgba(22, 51, 85, 0.9);
+  background-color: rgba(31, 84, 145, 0.473);
 }
 ::v-deep .el-table td.el-table__cell,
 .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid rgba(22, 41, 85, 0.5);
+  border-bottom: 1px solid rgba(22, 41, 85, 0);
   font-size: 40px;
 }
 ::v-deep .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid rgba(22, 41, 85, 0.9);
+  border-bottom: 1px solid rgba(22, 41, 85, 0.3);
 }
 ::v-deep
   .el-table--enable-row-hover
   .el-table__body
   tr:hover
   > td.el-table__cell {
-  background-color: rgb(16, 68, 171);
+  background-color: rgb(16, 68, 171, 0.3);
   color: #fff;
 }
 </style>
diff --git a/src/views/portraitScreen/components/qyzpq.vue b/src/views/portraitScreen/components/qyzpq.vue
index 3f3bd07..f863542 100644
--- a/src/views/portraitScreen/components/qyzpq.vue
+++ b/src/views/portraitScreen/components/qyzpq.vue
@@ -3,7 +3,7 @@
     <el-table
       ref="tableRef"
       :data="tableData"
-      height="1540px"
+      height="1360px"
       style="width: 100%"
     >
       <el-table-column label="序号" width="200px">
@@ -539,7 +539,7 @@ const tableData = ref([
 }
 ::v-deep .el-table {
   background-color: transparent;
-  --el-table-border-color: rgba(22, 65, 85, 0.9);
+  --el-table-border-color: rgba(22, 65, 85, 0.5);
   .cell {
     line-height: normal;
     color: #fff;
@@ -552,31 +552,31 @@ const tableData = ref([
   padding: 36px 0;
 }
 ::v-deep .el-table th.el-table__cell {
-  background-color: #163155 !important;
+  background-color: #1631551f !important;
   color: #c4f3fe;
   margin: 0 0 4px 0;
   font-size: 40px;
 }
 ::v-deep .el-table tr {
-  background-color: rgba(22, 43, 85, 0.5);
+  background-color: rgba(22, 43, 85, 0);
 }
 ::v-deep .el-table tr:nth-child(even) {
-  background-color: rgba(22, 51, 85, 0.9);
+  background-color: rgba(31, 84, 145, 0.473);
 }
 ::v-deep .el-table td.el-table__cell,
 .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid rgba(22, 41, 85, 0.5);
+  border-bottom: 1px solid rgba(22, 41, 85, 0);
   font-size: 40px;
 }
 ::v-deep .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid rgba(22, 41, 85, 0.9);
+  border-bottom: 1px solid rgba(22, 41, 85, 0.3);
 }
 ::v-deep
   .el-table--enable-row-hover
   .el-table__body
   tr:hover
   > td.el-table__cell {
-  background-color: rgb(16, 68, 171);
+  background-color: rgb(16, 68, 171, 0.3);
   color: #fff;
 }
 </style>
diff --git a/src/views/portraitScreen/components/top10.vue b/src/views/portraitScreen/components/top10.vue
index ec30949..920cc33 100644
--- a/src/views/portraitScreen/components/top10.vue
+++ b/src/views/portraitScreen/components/top10.vue
@@ -56,7 +56,7 @@ ul.rankList {
   margin: 0 auto;
   li {
     margin: 0 100px;
-    height: 70px;
+    height: 85px;
     background: url("~@/assets/images/largeScreen/rankList-bg.png") no-repeat 0
       0;
     background-size: 100% 100%;
diff --git a/src/views/portraitScreen/index.vue b/src/views/portraitScreen/index.vue
index e44fad4..ab2df4a 100644
--- a/src/views/portraitScreen/index.vue
+++ b/src/views/portraitScreen/index.vue
@@ -19,6 +19,44 @@
           </li>
         </ul> -->
       </div>
+      <!-- <ul class="port-three">
+        <li
+          class="port-three-item"
+          v-for="(it, idx) in data.threeList"
+          :key="idx"
+        >
+          <div class="bt-Title tc">
+            <span>{{ it.title }}</span>
+          </div>
+          <ul class="childBox flex">
+            <li v-for="(iv, ix) in it.list" :key="ix" class="childItem">
+              <div class="info tc">{{ iv.label }}</div>
+              <div class="chartsBox">
+                <Jgsl v-if="iv.label == '服务机构分类与数量'"></Jgsl>
+                <Glrq v-if="iv.label == '各类人群就业率'"></Glrq>
+                <Csgf v-if="iv.label == '服务机构入职成功率'"></Csgf>
+                <Jgrzcgl v-if="iv.label == '技能型岗位需求'"></Jgrzcgl>
+                <Xxrcgw v-if="iv.label == '新兴人才岗位需求'" />
+                <Zdrc v-if="iv.label == '重点企业人才招聘技能要求'" />
+                <Jgmyd v-if="iv.label == '各类机构入职满意度'"></Jgmyd>
+                <Hyjyl v-if="iv.label == '行业就业率'"></Hyjyl>
+                <Xlccjyl v-if="iv.label == '学历层次就业率'"></Xlccjyl>
+                <Qylsry v-if="iv.label == '企业流失人员分析'"></Qylsry>
+                <Lsyyfx v-if="iv.label == '流失原因分析'"></Lsyyfx>
+                <Lxfx v-if="iv.label == '流向分析'"></Lxfx>
+                <Xxgwxq v-if="iv.label == '新型岗位需求'"></Xxgwxq>
+                <Rcldyy v-if="iv.label == '人才流动原因'"></Rcldyy>
+                <Jgpxfb v-if="iv.label == '技能培训机构分布'"></Jgpxfb>
+                <Jngwtop v-if="iv.label == '短缺技能岗位TOP'"></Jngwtop>
+                <Jndqzpnd
+                  v-if="iv.label == '重点企业技能短缺招聘难度'"
+                ></Jndqzpnd>
+                <Gwxzdb v-if="iv.label == '技能岗位薪资酬对比'"></Gwxzdb>
+              </div>
+            </li>
+          </ul>
+        </li>
+      </ul> -->
       <div class="bigBox">
         <div class="pubTitle">人才机构分析</div>
         <ul class="chartsBox">
@@ -36,7 +74,7 @@
           </li>
         </ul>
       </div>
-      <div class="bigBox" style="margin-top: 75px; height: 1830px">
+      <div class="bigBox" style="margin-top: 75px; height: 1650px">
         <div class="pubTitle" style="height: 180px; line-height: 200px">
           企业招聘情况
         </div>
@@ -44,11 +82,14 @@
           <Qyzpq></Qyzpq>
         </div>
       </div>
-      <div class="bigBox" style="margin-top: 75px; height: 1830px">
+      <div class="bigBox" style="margin-top: 75px; height: 1650px">
         <div class="pubTitle" style="height: 180px; line-height: 200px">
           兴蜀来了培训产品 online
         </div>
-        <ul class="chartsBox">
+        <ul
+          class="chartsBox"
+          style="height: calc(100% - 180px); overflow: hidden"
+        >
           <li style="width: 50%">
             <div class="info">培训课程top10</div>
             <div class="chartsMian"><Top10></Top10></div>
@@ -132,8 +173,10 @@ const data = reactive({
   ul.chartsBox {
     width: 100%;
     display: flex;
-    flex-wrap: no-wrap;
+    flex-wrap: nowrap;
     height: calc(100% - 146px);
+    background: url("~@/assets/images/ggg.png") no-repeat;
+    background-size: 100% 100%;
     li {
       width: 33.33%;
       height: 100%;
@@ -168,6 +211,9 @@ const data = reactive({
   }
   .mainBox {
     height: calc(100% - 180px);
+    background: url("~@/assets/images/ggg.png") no-repeat;
+    background-size: 100% 100%;
+    border: 1px solid transparent;
   }
 }