<template>
|
<div class="qsAsidePanel">
|
<!-- <div class="closeBtn" @click="closeWindow">x</div> -->
|
<div class="safePanelTab">
|
<span
|
class="safePanelTabTitle active"
|
style="margin-left: 58px"
|
@click="tabActive(1)"
|
>质量</span
|
>
|
<span class="safePanelTabTitle" @click="tabActive(2)">安全</span>
|
<span class="safePanelTabTitle" @click="tabActive(3)">智慧工地</span>
|
</div>
|
<div class="qsContentAsidePanel">
|
<div class="part">
|
<div class="part-title">
|
<span class="title-text">质量问题整改统计</span>
|
</div>
|
<div class="part-main">
|
<div class="part-main-left">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题总数</span>
|
<span class="part-main-unit-val">26</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">未逾期</span>
|
<span class="part-main-unit-val">2</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭率</span>
|
<span class="part-main-unit-val">76.9%</span>
|
</div>
|
</div>
|
<div class="part-main-right">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭数</span>
|
<span class="part-main-unit-val">20</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">逾期</span>
|
<span class="part-main-unit-val">4</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题及时关闭率</span>
|
<span class="part-main-unit-val">84.6%</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="part" style="margin-top: 20px; margin-bottom: 17px">
|
<div class="part-main">
|
<div class="equip_pie">
|
<div class="equip_pie_text">
|
<div class="equip_pie_text1"></div>
|
<div class="equip_pie_text2"></div>
|
</div>
|
<div class="detail_line1">
|
<div class="detail_top" style="margin-top: -25px">
|
<div class="detail_top_left">问题关闭数</div>
|
<div class="detail_top_right"></div>
|
</div>
|
<div class="detail_bottom">2</div>
|
</div>
|
<div class="detail_line2">
|
<div
|
class="detail_top"
|
style="margin-top: -12px; margin-left: 16px; width: 200px"
|
>
|
<div class="detail_top_left">关闭数</div>
|
<div class="detail_top_right"></div>
|
</div>
|
<div class="detail_bottom" style="margin-left: 85px">20</div>
|
</div>
|
<div class="detail_line1" style="top: 100px">
|
<div
|
class="detail_top"
|
style="margin-top: -23px; margin-left: -40px; width: 200px"
|
>
|
<div class="detail_top_left">未关闭数（逾期）</div>
|
<div class="detail_top_right"></div>
|
</div>
|
<div class="detail_bottom" style="margin-left: 6px">4</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="part">
|
<div class="part-title">
|
<span class="title-text">质量问题督办统计</span>
|
</div>
|
<div class="part-main">
|
<div class="part-main-left">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题总数</span>
|
<span class="part-main-unit-val">26</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">未逾期</span>
|
<span class="part-main-unit-val">2</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭率</span>
|
<span class="part-main-unit-val">76.9%</span>
|
</div>
|
</div>
|
<div class="part-main-right">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭数</span>
|
<span class="part-main-unit-val">20</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">逾期</span>
|
<span class="part-main-unit-val">4</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题及时关闭率</span>
|
<span class="part-main-unit-val">84.6%</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="qsContentAsidePanel" style="display: none">
|
<div class="part">
|
<div class="part-title">
|
<span class="title-text">安全问题整改统计</span>
|
</div>
|
<div class="part-main">
|
<div class="part-main-left">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题总数</span>
|
<span class="part-main-unit-val">26</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">未关闭数</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭率</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
</div>
|
<div class="part-main-right">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭数</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">未关闭数（预期）</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题及时关闭率</span>
|
<span class="part-main-unit-val">78</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="part" style="margin-top: 20px; margin-bottom: 17px">
|
<div class="part-main">
|
<div class="equip_pie">
|
<div class="equip_pie_text">
|
<div class="equip_pie_text1"></div>
|
<div class="equip_pie_text2"></div>
|
</div>
|
<div class="detail_line1">
|
<div class="detail_top" style="margin-top: -25px">
|
<div class="detail_top_left">问题关闭数</div>
|
<div class="detail_top_right"></div>
|
</div>
|
<div class="detail_bottom">16%</div>
|
</div>
|
<div class="detail_line2">
|
<div
|
class="detail_top"
|
style="margin-top: -12px; margin-left: 16px; width: 200px"
|
>
|
<div class="detail_top_left">关闭数</div>
|
<div class="detail_top_right"></div>
|
</div>
|
<div class="detail_bottom" style="margin-left: 85px">60%</div>
|
</div>
|
<div class="detail_line1" style="top: 100px">
|
<div
|
class="detail_top"
|
style="margin-top: -23px; margin-left: -40px; width: 200px"
|
>
|
<div class="detail_top_left">未关闭数（逾期）</div>
|
<div class="detail_top_right"></div>
|
</div>
|
<div class="detail_bottom" style="margin-left: 6px">60%</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="part">
|
<div class="part-title">
|
<span class="title-text">安全问题督办统计</span>
|
</div>
|
<div class="part-main">
|
<div class="part-main-left">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题总数</span>
|
<span class="part-main-unit-val">26</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">未关闭数</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭率</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
</div>
|
<div class="part-main-right">
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题关闭数</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">未关闭数（预期）</span>
|
<span class="part-main-unit-val">24</span>
|
</div>
|
<div class="part-main-unit">
|
<span class="part-main-unit-label">问题及时关闭率</span>
|
<span class="part-main-unit-val">78</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="qsContentAsidePanel" style="display: none">
|
<div class="tab_three">
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">88</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">视频监控</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">112</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">塔基监控</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">11</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">配电箱监控</div>
|
</div>
|
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">0</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">车辆监控</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">8</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">环境检测</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">1</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">废水检测</div>
|
</div>
|
|
<div class="part_box" :class="showAdd ? 'gd_back2' : ''">
|
<div class="part_box_main">
|
<div class="part_box_main_num" @click="showAdd = !showAdd">4</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">基坑监测</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">3</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">AI视频监控</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">27</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">升降机监控</div>
|
</div>
|
|
<div class="part2_box" v-show="showAdd">
|
<div class="part2_box_box">
|
<img
|
class="part2_box_box3"
|
src="../../assets/img/zc.png"
|
alt=""
|
/>
|
<div class="part2_box_box1">
|
<div class="part2_box_box2">正常</div>
|
<div
|
class="part2_box_box1_left"
|
style="color: #0ec939"
|
@click="numClick(1)"
|
>
|
2
|
</div>
|
</div>
|
</div>
|
<div class="part2_box_box">
|
<img
|
class="part2_box_box3"
|
src="../../assets/img/lx.png"
|
alt=""
|
/>
|
<div class="part2_box_box1">
|
<div class="part2_box_box2">离线</div>
|
<div
|
class="part2_box_box1_left"
|
style="color: #e99d08"
|
@click="numClick(2)"
|
>
|
1
|
</div>
|
</div>
|
</div>
|
<div class="part2_box_box">
|
<img
|
class="part2_box_box3"
|
src="../../assets/img/bj.png"
|
alt=""
|
/>
|
<div class="part2_box_box1">
|
<div class="part2_box_box2">报警</div>
|
<div
|
class="part2_box_box1_left"
|
style="color: #e9373a"
|
@click="numClick(3)"
|
>
|
1
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">1</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">边坡检测</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">2</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">高支模检测</div>
|
</div>
|
<div class="part_box">
|
<div class="part_box_main">
|
<div class="part_box_main_num">0</div>
|
<div class="part_box_main_ge">个</div>
|
</div>
|
<div class="part_box_title">智能广播</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- <elevator-dialog :dialogVisible.sync="dialogVisible" /> -->
|
</div>
|
</template>
|
|
<script>
|
import ElevatorDialog from "./ElevatorDialog.vue";
|
export default {
|
name: "QualitySafety",
|
components: {
|
ElevatorDialog,
|
},
|
data() {
|
return {
|
myChart1: null,
|
myChart2: null,
|
showAdd: false,
|
dialogVisible: false,
|
boxList: [
|
{
|
title: "配电箱监控",
|
pic: require("../../assets/img/fire.png"),
|
num: 11,
|
},
|
{
|
title: "车辆监控",
|
pic: require("../../assets/img/fire.png"),
|
num: 0,
|
},
|
{
|
title: "环境检测",
|
pic: require("../../assets/img/fire.png"),
|
num: 8,
|
},
|
{
|
title: "废水检测",
|
pic: require("../../assets/img/fire.png"),
|
num: 1,
|
},
|
{
|
title: "升降机监控",
|
pic: require("../../assets/img/fire.png"),
|
num: 4,
|
},
|
{
|
title: "AI视频监控",
|
pic: require("../../assets/img/fire.png"),
|
num: 3,
|
},
|
{
|
title: "基坑检测",
|
pic: require("../../assets/img/fire.png"),
|
num: 27,
|
},
|
{
|
title: "边坡检测",
|
pic: require("../../assets/img/fire.png"),
|
num: 1,
|
},
|
{
|
title: "高支模检测",
|
pic: require("../../assets/img/fire.png"),
|
num: 2,
|
},
|
{
|
title: "智能广播",
|
pic: require("../../assets/img/fire.png"),
|
num: 0,
|
},
|
],
|
};
|
},
|
mounted() {
|
this.$nextTick(() => {
|
// this.LocationFire();
|
});
|
},
|
methods: {
|
closeWindow() {
|
this.$emit("closeWindow");
|
},
|
tabActive(i) {
|
$($(".safePanelTabTitle")[0]).removeClass("active");
|
$($(".safePanelTabTitle")[1]).removeClass("active");
|
$($(".safePanelTabTitle")[2]).removeClass("active");
|
|
$($(".qsContentAsidePanel")[0]).hide();
|
$($(".qsContentAsidePanel")[1]).hide();
|
$($(".qsContentAsidePanel")[2]).hide();
|
|
$($(".safePanelTabTitle")[i - 1]).addClass("active");
|
$($(".qsContentAsidePanel")[i - 1]).show();
|
},
|
|
numClick(type) {
|
// this.LocationFire();
|
if (type == 1) {
|
$("#point_1").show();
|
$("#point_2").show();
|
}
|
if (type == 2) {
|
$("#point_3").show();
|
}
|
if (type == 3) {
|
$("#point_4").show();
|
}
|
|
this.dialogVisible = false; //
|
},
|
LocationFire() {
|
this.rightIsOn = true;
|
// let f = [114.3776,22.72974, 60];
|
let f1 = [114.3768905147421, 22.729431256528564, 80];
|
let f2 = [114.37675705502423, 22.72927183768539, 75];
|
let f3 = [114.3768905147421, 22.729431256528564, 65];
|
let f4 = [114.37675705502423, 22.72927183768539, 100];
|
let treeNode = {};
|
treeNode.flyTo = [
|
114.37566881089457, 22.730244319267076, 109.27621910550947,
|
2.237041973676008, -0.2115434399485434, 0.000008635394220135595,
|
];
|
sgworld.Navigate.flyToPointsInterest({
|
destination: Cesium.Cartesian3.fromDegrees(
|
treeNode.flyTo[0],
|
treeNode.flyTo[1],
|
treeNode.flyTo[2]
|
),
|
orientation: {
|
heading: treeNode.flyTo[3],
|
pitch: treeNode.flyTo[4],
|
roll: treeNode.flyTo[5],
|
},
|
});
|
// let graohic1 = sgworld.Creator.addSimpleGraphic("billboard", {
|
// position: Cesium.Cartesian3.fromDegrees(f1[0], f1[1], f1[2]),
|
// image: SmartEarthRootUrl + "Workers/image/mark1.png",
|
// removeEdit: true,
|
// });
|
this.f1Point(f1, 1);
|
this.f1Point(f2, 2);
|
this.f1Point(f3, 3);
|
this.f1Point(f4, 4);
|
|
this.QualitySafetyPanelShow = true;
|
|
// setTimeout(()=>{
|
// },1000)
|
},
|
f1Point(f1, name) {
|
|
|
|
let des='<img class="part_box_main_pic" id="point_'+name+'" src="'+SmartEarthRootUrl+'Workers/image/mark1.png" style="display: none" alt="" />'
|
|
|
|
let vl = sgworld.Creator.createDivPoint("视频点位", {
|
lon: f1[0],
|
lat: f1[1],
|
height: f1[2],
|
}, {
|
type: "custom",
|
offset: ["c", 0],
|
far: 2000,
|
description: des,
|
|
onclick(data) {
|
|
|
$('#panel_1').is(':hidden')?$('#panel_1').show():$('#panel_1').hide()
|
|
},
|
});
|
|
|
let tooltip = sgworld.Core.CreateResultTooltip(Viewer, {
|
color: 'black',
|
addY: -68, addX: 30,
|
far: 1000,
|
closeBtn: false
|
});
|
|
let htmlstr = `<div style='width:350px;height:130px;display: none' id="panel_1">
|
|
<span style="font-size: 15px;background-color: blue">危险源详情</span>
|
<p>项目名称：中海项目改造工程</p>
|
<p>实施部位：3#基坑</p>
|
<p>风险点：基坑工程》开挖深度超过5米的土方支护</p>
|
<p>状态：已激活</p>
|
<p>预计关闭时间：2023-01-29</p>
|
<p>责任人：张明明</p>
|
<p>联系方式：18373643221</p>
|
</div>`;
|
|
tooltip.showAt(
|
Cesium.Cartesian3.fromDegrees(f1[0], f1[1], f1[2]),
|
htmlstr
|
);
|
|
},
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.resultToolTipClose {
|
padding-right: 16px !important;
|
}
|
|
.resultToolTipClose::after {
|
content: "x";
|
font: 16px/14px Tahoma, Verdana, sans-serif;
|
position: absolute;
|
pointer-events: all;
|
cursor: pointer;
|
top: 0;
|
right: 0;
|
padding: 4px 4px 0 0;
|
font-weight: bold;
|
}
|
|
.qsAsidePanel {
|
height: 700px;
|
top: 110px;
|
position: fixed;
|
z-index: 1000;
|
left: 112px;
|
width: 460px;
|
//height: 830px;
|
background: url("../../assets/img/right_panel_back_img.png") no-repeat;
|
|
display: flex;
|
flex-direction: column;
|
|
.part {
|
display: flex;
|
flex-direction: column;
|
|
.part-title {
|
margin-top: 20px;
|
margin-left: 20px;
|
|
.title-text {
|
background: url("../../assets/img/part-title.png") no-repeat;
|
background-position: 0px 10px;
|
padding-left: 5px;
|
width: 79px;
|
height: 16px;
|
font-size: 16px;
|
opacity: 1;
|
font-family: Source Han Sans CN;
|
font-weight: bold;
|
color: #feffff;
|
line-height: 30px;
|
}
|
}
|
|
.part-main {
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
width: 100%;
|
height: 150px;
|
|
.part-main-left {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
width: 100%;
|
|
.total-num {
|
width: 98px;
|
height: 48px;
|
background: url("../../assets/img/total-num.png") no-repeat;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
|
font-size: 28px;
|
font-family: Arial;
|
font-weight: 400;
|
color: #56faf5;
|
}
|
|
.total-num-text {
|
width: 32px;
|
height: 16px;
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 28px;
|
opacity: 0.9;
|
}
|
}
|
|
.part-main-right {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
width: 100%;
|
|
padding-right: 50px;
|
|
.ring {
|
background: url("../../assets/img/ring.png") no-repeat;
|
width: 133px;
|
height: 115px;
|
margin-top: -60px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
|
.percent-num {
|
padding-left: 5px;
|
padding-top: 10px;
|
display: flex;
|
flex-direction: row;
|
align-items: flex-end;
|
font-family: DIN;
|
font-weight: 500;
|
color: #57fff9;
|
}
|
}
|
|
.total-num-text {
|
width: 32px;
|
height: 16px;
|
margin-top: -10px;
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 28px;
|
opacity: 0.9;
|
}
|
|
#safeBar {
|
height: 100px;
|
width: 200px;
|
}
|
}
|
|
.equip_pie {
|
margin-top: 20px;
|
background: url("../../assets/img/equip_pie_back.png") no-repeat;
|
height: 142px;
|
width: 142px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
position: relative;
|
|
.equip_pie_text {
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
|
.equip_pie_text1 {
|
width: 58px;
|
height: 21px;
|
font-size: 28px;
|
font-family: Arial;
|
font-weight: 400;
|
color: #56faf5;
|
}
|
|
.equip_pie_text2 {
|
width: 28px;
|
height: 14px;
|
font-size: 14px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #ffffff;
|
line-height: 36px;
|
}
|
}
|
|
.detail_line1 {
|
position: absolute;
|
background: url("../../assets/img/detail_line1.png") no-repeat;
|
height: 12px;
|
width: 102px;
|
top: 12px;
|
left: -85px;
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
}
|
|
.detail_line2 {
|
position: absolute;
|
background: url("../../assets/img/detail_line2.png") no-repeat;
|
height: 15px;
|
width: 124px;
|
top: 100px;
|
left: 132px;
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
}
|
|
.detail_top {
|
display: flex;
|
flex-direction: row;
|
justify-content: flex-start;
|
align-items: center;
|
|
.detail_top_left {
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #f6f6f6;
|
line-height: 22px;
|
}
|
|
.detail_top_right {
|
margin-left: 14px;
|
font-size: 30px;
|
font-family: Arial;
|
font-weight: 400;
|
color: #f6f6f6;
|
line-height: 22px;
|
}
|
}
|
|
.detail_bottom {
|
font-size: 20px;
|
font-family: Arial;
|
font-weight: 400;
|
color: #f6f6f6;
|
line-height: 22px;
|
opacity: 0.8;
|
}
|
}
|
|
#safeRadar {
|
height: 178px;
|
width: 100%;
|
}
|
}
|
|
.part-main-unit-label {
|
font-size: 17px;
|
color: #eee;
|
}
|
|
.part-main-unit-val {
|
color: #3dd4d3;
|
font-size: 19px;
|
margin-left: 15px;
|
font-weight: 800;
|
}
|
|
.part-main-unit {
|
margin-bottom: 10px;
|
}
|
}
|
|
.safePanelTab {
|
height: 35px;
|
margin: 10px;
|
border: 1px;
|
border-radius: 8px;
|
border-style: hidden;
|
margin-left: 25px;
|
margin-right: 25px;
|
background-color: #86c3d1;
|
background: linear-gradient(45deg, #406277, transparent);
|
background-color: rgb(69 107 116);
|
|
.safePanelTabTitle {
|
font-size: 16px;
|
color: white;
|
font-weight: 800;
|
margin-left: 50px;
|
line-height: 35px;
|
letter-spacing: 4px;
|
padding: 10px;
|
}
|
|
.active {
|
color: #36d4d7;
|
border-bottom: 1px solid #36d4d7;
|
}
|
|
.part-main-unit {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
|
.tab_three {
|
height: 780px;
|
width: 100%;
|
display: flex;
|
flex-direction: row;
|
align-items: flex-start;
|
align-content: flex-start;
|
padding-left: 30px;
|
padding-right: 30px;
|
gap: 30px;
|
flex-wrap: wrap;
|
|
.part_box {
|
width: 113px;
|
height: 98px;
|
display: flex;
|
flex-direction: column;
|
background: url("../../assets/img/gd_back1.png") no-repeat;
|
|
.part_box_title {
|
margin-top: 28px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 28px;
|
}
|
|
.part_box_main {
|
margin-top: 30px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
align-items: center;
|
|
.part_box_main_num {
|
margin-left: 10px;
|
width: 60px;
|
display: flex;
|
flex-direction: row;
|
justify-content: center;
|
font-size: 32px;
|
font-family: Arial;
|
font-weight: bold;
|
font-style: italic;
|
color: #ffd427;
|
line-height: 14px;
|
cursor: pointer;
|
}
|
|
.part_box_main_ge {
|
font-size: 16px;
|
font-family: Source Han Sans CN;
|
font-weight: 500;
|
color: #ffffff;
|
line-height: 28px;
|
}
|
}
|
}
|
|
.gd_back2 {
|
background: url("../../assets/img/gd_back2.png") no-repeat;
|
}
|
|
.part2_box {
|
margin-left: 16px;
|
height: 108px;
|
width: 360px;
|
padding-left: 20px;
|
display: flex;
|
flex-direction: row;
|
background: url("../../assets/img/part2_box_back.png") no-repeat;
|
|
.part2_box_box {
|
flex: 1;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
|
.part2_box_box1 {
|
margin-left: 6px;
|
margin-top: 14px;
|
display: flex;
|
flex-direction: column;
|
|
.part2_box_box1_left {
|
font-size: 24px;
|
font-family: DIN;
|
font-weight: 500;
|
color: #2aedab;
|
cursor: pointer;
|
}
|
}
|
|
.part2_box_box2 {
|
font-size: 14px;
|
font-family: Source Han Sans CN;
|
font-weight: 400;
|
color: #fafdff;
|
opacity: 0.9;
|
}
|
|
.part2_box_box3 {
|
margin-top: 8px;
|
height: 46px;
|
width: 46px;
|
}
|
}
|
}
|
}
|
|
.closeBtn {
|
position: absolute;
|
right: 16px;
|
top: 10px;
|
cursor: pointer;
|
}
|
</style>
|
