DEV_ZZ/rsxm-master
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

大屏调整

Browse Source
This commit is contained in:
王捷
2025-10-22 22:45:35 +08:00
parent c88f93d14c
commit 6dcfc0795d
4 changed files with 82 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/portraitScreen/components/pxkcjh.vue
View File

@ -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>

16
src/views/portraitScreen/components/qyzpq.vue
View File

@ -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>

2
src/views/portraitScreen/components/top10.vue
View File

@ -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%;

54
src/views/portraitScreen/index.vue
View File

@ -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;
}
}