大屏调整
This commit is contained in:
@ -14,7 +14,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content" v-show="isactive != 0 && isactive != 5">
|
||||
<div
|
||||
class="content"
|
||||
v-show="isactive != 0 && isactive != 4 && isactive != 5"
|
||||
>
|
||||
<div class="num">81.1万</div>
|
||||
<div class="label">人口总数</div>
|
||||
</div>
|
||||
@ -48,7 +51,7 @@
|
||||
<!-- </transition> -->
|
||||
<div class="hjrkDialogBox" v-show="isactive == 5">
|
||||
<div class="titleBox">
|
||||
<div class="title">高终端人才</div>
|
||||
<div class="title">高中端人才</div>
|
||||
<div class="close" @click="isactive = -1"></div>
|
||||
</div>
|
||||
<ul class="statisticOne">
|
||||
@ -66,6 +69,43 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="hjrkDialogBox" v-show="isactive == 4">
|
||||
<div class="titleBox">
|
||||
<div class="title">新增就业群体</div>
|
||||
<div class="close" @click="isactive = -1"></div>
|
||||
</div>
|
||||
<div class="pieBigBox">
|
||||
<div class="pieMain">
|
||||
<div class="pieBox" ref="pieRef"></div>
|
||||
<div class="pieTitle">新增就业群体</div>
|
||||
</div>
|
||||
<ul class="pieLsit">
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>城镇新增就业</span></div>
|
||||
<div>
|
||||
<span class="numb">目标7200人</span
|
||||
><span class="proportion">完成5445人</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>失业人员再就业</span></div>
|
||||
<div>
|
||||
<span class="numb">目标1900人</span
|
||||
><span class="proportion">完成1528人</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>
|
||||
<span class="blockThree"></span><span>就业困难人员再就业</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="numb">目标190人</span
|
||||
><span class="proportion">完成125人</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -242,7 +282,47 @@ const option = {
|
||||
}
|
||||
]
|
||||
};
|
||||
const pieRef = ref(null);
|
||||
const optionPie = {
|
||||
// 设置图形位置
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "新增就业群里",
|
||||
type: "pie",
|
||||
radius: ["65%", "80%"],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 5445, name: "城镇新增就业", itemStyle: { color: "#58A8FF" } },
|
||||
{
|
||||
value: 1528,
|
||||
name: "失业人员再就业",
|
||||
itemStyle: { color: "#30DCFF" }
|
||||
},
|
||||
{
|
||||
value: 125,
|
||||
name: "就业困难人员再就业",
|
||||
itemStyle: { color: "#ffffff" }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseTwoRef.value) {
|
||||
@ -250,6 +330,11 @@ onMounted(() => {
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(optionPie);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -406,8 +491,8 @@ ul.statisticOne {
|
||||
padding-top: 3vw;
|
||||
li {
|
||||
// width: 450px;
|
||||
height: 190px;
|
||||
margin: 0 10px;
|
||||
height: 9vw;
|
||||
margin: 0 0;
|
||||
// 第一排的前2个元素（第一排显示2个）
|
||||
&:nth-child(-n + 2) {
|
||||
width: 20vw; // 减去margin值
|
||||
@ -426,11 +511,11 @@ ul.statisticOne {
|
||||
}
|
||||
.infoBox {
|
||||
float: left;
|
||||
padding: 0 0 0 10px;
|
||||
padding: 0 0 0 0.5vw;
|
||||
.title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
margin-top: 36px;
|
||||
height: 2vw;
|
||||
line-height: 2vw;
|
||||
margin-top: 1vw;
|
||||
span {
|
||||
background: -webkit-linear-gradient(#ffffff, #75e8ff);
|
||||
-webkit-background-clip: text;
|
||||
@ -440,15 +525,94 @@ ul.statisticOne {
|
||||
}
|
||||
}
|
||||
.count {
|
||||
font-size: 24px;
|
||||
padding: 18px 0 0 0;
|
||||
font-size: 1.4vw;
|
||||
padding: 0.5vw 0 0 0;
|
||||
span.numb {
|
||||
font-size: 2.1vw;
|
||||
font-size: 2.2vw;
|
||||
display: inline-block;
|
||||
padding: 0 5px 0 0;
|
||||
padding: 0 0.5vw 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
margin: 1vw auto 0;
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 3vw;
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
margin-top: 1vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 2.6vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 1vw 0 0 0;
|
||||
width: 20vw;
|
||||
li {
|
||||
// font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 3vw;
|
||||
padding: 0 1vw;
|
||||
background: rgba(203, 242, 250, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 1vw;
|
||||
font-size: 0.7vw;
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 3vw;
|
||||
}
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree,
|
||||
.blockFour {
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 0.8vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.blockFour {
|
||||
background-color: #dd7d4d;
|
||||
}
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 4.5vw;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user