dsProject/dsBase/WebRoot/html/orgDataView/css/child.css

body,
html {
    height: 100%;
}

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'pingfang';
    src: url('../font/pingfang.ttf') format('truetype');
}

body {
    background: url(../images/bg.jpg) no-repeat center center;
    font-family: "pingfang";
}

.el-header {
    height: 8%;
    min-width: 1366px;
    min-height: 61px;
    background: url(../images/head_bg.png) no-repeat center center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-size: 30px;
}

.el-main {
    height: 100%;
    width: 100%;
    /* border: 1px solid red; */
}

.main {
    height: 100%;
}

.left_div_item {
    height: 100%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.left_div_item_child {
    height: 95%;
    width: 95%;
    background-color: rgba(128, 255, 255, 0.145098039215686);
    position: relative;
}

.left_div_item_child_1 {
    height: 95%;
    width: 97.5%;
    background-color: rgba(128, 255, 255, 0.145098039215686);
    position: relative;
}

.right_div_item {
    height: 100%;
    /* border: 1px solid orange; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.right_div_item_child {
    height: 98.5%;
    width: 98.2%;
    background-color: rgba(128, 255, 255, 0.145098039215686);
}

.angle_left_up {
    position: absolute;
    top: -2px;
    left: -2px;
}

.angle_left_down {
    position: absolute;
    left: -2px;
    bottom: -2px;
}

.angle_right_up {
    position: absolute;
    right: -2px;
    top: -2px;
}

.angle_right_down {
    position: absolute;
    right: -2px;
    bottom: -2px;
}


.div_title {
    color: #81D3F8;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-left: 30px;
    height: 20%;
}

.div_1_content {
    height: 80%;
}

.div_1_item {
    display: flex;
    height: 50%;
    align-items: center;
}

.div_left_1_icon {
    position: relative;
    margin-left: 30px;
}

.div_left_1_text {
    display: flex;
    align-items: center;
    margin: -10px 0 0 25px;
}

.div_left_1_num {
    display: flex;
    align-items: center;
    margin: -10px 0 0 45px;
}

.text_color_1 {
    color: #01DFF4;
}

.text_color_2 {
    color: #F7BB39;
}

.circle-icon {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
}

.div_2_content {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul,
ul li {
    list-style: none;
}

ul.wrap {
    width: 260px;
    /* margin: 200px auto; */
    display: flex;
    flex-wrap: wrap;
    color: #00FFFF;
    margin-top: -30px;
}

ul.wrap li {
    width: 130px;
    height: 70px;
    line-height: 70px;
    text-align: center;

    margin-left: -1px;
    margin-top: -1px;
    box-sizing: border-box;
}

ul.wrap li:nth-child(2n+1) {
    margin-left: 0px;
}


.div_3_content {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.div_4_content {
    height: 80%;
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.div_right_title {
    color: #81D3F8;
    font-size: 12px;
    display: flex;
    align-items: center;
    margin-left: 30px;
    height: 5.7%;
}

.div_right_content {
    height: 94%;
}

.div_options {
    display: flex;
    align-items: center;
    color: #81D3F8;
    font-size: 14px;
    margin-left: 30px;    
}

.div_right_items {
    /* margin-top: 20px; */
}

.div_right_item {
    margin-top: 20px;
    padding: 0 20px;
    margin-bottom: 30px;
}

.item_title {
    background-color: rgba(129, 211, 248, 0.305882352941176);
    color: #FFF;
    font-size: 14px;
    padding: 8px 0 8px 20px;
}

.item_content {
    display: flex;
    align-items: center;
    margin-top: 18px;
    margin-left: 20px;
    color: #81D3F8;
    font-size: 14px;
    width: 100%;
}

.item_content_text {
    margin-left: 10px;
}