<template>
    <div class="visualization">
        <div style="position:relative;
                    height: 60px;
                    color: #0a3460;
                    text-align: center;
                    font-size: 36px;
                    line-height:40px;
                    font-weight: bold;
                    padding-top: 20px;">
        </div>
        <div style="position:fixed;
                    width: 400px;
                    color: #0a3460;
                    text-align: center;
                    font-size: 36px;
                    font-weight: bold;
                    left: 50%;
                    margin-top: -10px;
                    margin-left: -200px;
                    ">
            工艺流程图
        </div>
        <div style="position:fixed;
                    width: 120px;
                    height: 40px;
                    line-height: 40px;
                    border: 1px #022261 solid;
                    text-align: center;
                    border-radius: 20px;
                    color: #0a3460;
                    text-align: center;
                    font-size: 16px;
                    left: 80px;
                    margin-top: 10px;
                    ">
            <img src="../../../assets/images/goBack.png"  />返回上级
        </div>
        <el-row>
            <!-- 左侧 -->
            <el-col :span="4">
                <div style="color: #d3d9e5;">
                    .
                </div>
            </el-col>
            <!-- 中间 -->
            <el-col :span="14">
                <div class="center-top1">
                </div>
                <div class="center-top">
                    <div class="block3">
                        <img src="../../../assets/images/img01.png" alt="">
                        <span style="position: absolute;
                                                height: 30px;
                                                width: 70px;
                                                line-height: 30px;
                                                color: #022261;
                                                background-color: #e9eef3;
                                                text-align: center;
                                                border: 1px solid #022261;;
                                                text-align: center;
                                                border-radius: 4px;
                                                left: 150px;
                                                top: 185px;
                                            ">裂解炉</span>
                    </div>
                    <div class="line1">
                        <div style="position: relative;">
                            <span style="position: absolute;
                                                height: 30px;
                                                width: 90px;
                                                line-height: 30px;
                                                color: #022261;
                                                font-weight: bold;
                                                background-color: #d8e4fe;
                                                text-align: center;
                                                border: 1px solid #ccc;
                                                border-radius: 4px;
                                                left: -90px;
                                                top: -15px;
                                            ">循环进料</span>
                        </div>
                    </div>
                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx1">
                    </el-popover>
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow1">
                    <div class="line2">
                        <div style="position: relative;">
                            <span style="position: absolute;
                                                height: 30px;
                                                width: 90px;
                                                line-height: 30px;
                                                color: #022261;
                                                font-weight: bold;
                                                background-color: #d8e4fe;
                                                text-align: center;
                                                border: 1px solid #ccc;
                                                border-radius: 4px;
                                                left: -90px;
                                                top: -15px;
                                            ">高压给水</span>
                        </div>
                    </div>
                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx2">
                    </el-popover>
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow2">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow21">
                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow22">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow23">
                    <div class="line21"></div>
                    <div class="line22"></div>
                    <div class="line3">
                        <span style="position: absolute;
                                                height: 30px;
                                                width: 90px;
                                                line-height: 30px;
                                                color: #022261;
                                                font-weight: bold;
                                                background-color: #d8e4fe;
                                                text-align: center;
                                                border: 1px solid #ccc;
                                                border-radius: 4px;
                                                left: -90px;
                                                top: -15px;
                                            ">高压蒸汽</span>
                    </div>
                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx3">
                    </el-popover>
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow3">
                    <div class="line4">
                        <span style="position: absolute;
                                                height: 30px;
                                                width: 70px;
                                                line-height: 30px;
                                                color: #022261;
                                                font-weight: bold;
                                                background-color: #d8e4fe;
                                                text-align: center;
                                                border: 1px solid #ccc;
                                                border-radius: 4px;
                                                left: -70px;
                                                top: -15px;
                                            ">缓解气</span>
                    </div>
                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx4">
                    </el-popover>
                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx41">
                    </el-popover>
                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow4">
                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow41">
                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow42">
                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow43">
                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow44">
                    <div class="line41"></div>
                    <div class="line42"></div>
                    <div class="line43"></div>
                    <div class="line44"></div>
                    <div class="line45"></div>

                    <div class="line5">
                        <span style="position: absolute;
                                                height: 30px;
                                                width: 90px;
                                                line-height: 30px;
                                                color: #022261;
                                                font-weight: bold;
                                                background-color: #d8e4fe;
                                                text-align: center;
                                                border: 1px solid #ccc;
                                                border-radius: 4px;
                                                right: -90px;
                                                top: -15px;
                                            ">蒸汽</span>
                    </div>
                    <el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                        <img slot="reference" src="../../../assets/images/lx.png" @click="lxClick" alt="" height="24" class="lx5">
                    </el-popover>
                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow5">
                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow51">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow52">
                    <div class="line51"></div>
                    <div class="line52"></div>
                    <div class="line6">
                        <span style="position: absolute;
                                                height: 30px;
                                                width: 70px;
                                                line-height: 30px;
                                                color: #022261;
                                                background-color: #e9eef3;
                                                text-align: center;
                                                border: 1px solid #022261;
                                                border-radius: 4px;
                                                left: -100px;
                                                top: 5px;
                                            ">储罐</span>
                    </div>
                    <div class="line61"></div>
                    <div class="line62"></div>
                    <div class="line63"></div>
                    <div class="line64"></div>
                    <div class="line65"></div>
                    <div class="line66"></div>
                    <div class="line67"></div>
                    <div class="line68"></div>
                    <div class="line69"></div>
                    <div class="line70"></div>
                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow6">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow61">
                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow62">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow63">
                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow64">
                    <img src="../../../assets/images/arrow-bottom.png" alt="" height="20" class="arrow65">
                    <img src="../../../assets/images/arrow-right.png" alt="" height="20" class="arrow66">
                    <img src="../../../assets/images/arrow-left.png" alt="" height="20" class="arrow67">
                    <img src="../../../assets/images/arrow-top.png" alt="" height="20" class="arrow68">
                </div>
            </el-col>
            <!-- 右侧 -->
            <el-col :span="5">
            </el-col>
        </el-row>
        <el-dialog  :close-on-click-modal="false" title="详情" center :visible.sync="dialogVisible" :append-to-body="true" width="40%">
            <div>
                测试
            </div>
            <span slot="footer" class="dialog-footer">
                                                                    <el-button
                                                                      type="primary"
                                                                      size="mini"
                                                                      @click="dialogVisible = false"
                                                                    >确 认</el-button>
                                                                  </span>
        </el-dialog>
        <!-- 最底边栏控件 -->
        <!-- <div class="copyright">技术支持：某某股份有限公司</div> -->
    </div>
    <!-- </div> -->
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false
        };
    },
    computed: {},
    components: {},
    //在vue自定义指令中添加该指令
    directives: {},
    created() {},
    mounted() {
        function fixStyles() {
            // 渲染完毕后，修改菜单的高度占满屏幕高度
            let bodyHeight = document.documentElement.clientHeight; // 去除topbar的高度
            document.querySelector(".visualization").style.height = bodyHeight + "px";
        }
        fixStyles();
        var _scaleBody = true;
        var _innerWidth = _scaleBody ? 1920 : window.innerWidth;
        var _innerHeight = _scaleBody ? 1080 : window.innerHeight;
        // 页面动态缩放适应屏幕尺寸
        window.onresize = function() {
            fixStyles();
            let BodyStyle = document.querySelector(".visualization").style;
            BodyStyle["margin"] = "0px";
            BodyStyle["width"] = _innerWidth + "px";
            BodyStyle["height"] = _innerHeight + "px";
            BodyStyle["transform-origin"] = "left top 0px";
            BodyStyle["transform"] =
                "translateZ(0) scale(" +
                window.innerWidth / _innerWidth +
                "," +
                window.innerHeight / _innerHeight +
                ")";
            BodyStyle["overflow"] = "hidden";
            document.getElementsByTagName("body")[0].style["overflow"] = "hidden";
        };
        window.onresize();
    },
    beforeDestroy() {
        clearTimeout(this.timeout);
    },
    methods: {
        lxClick() {

        }
    },
};
</script>

<style>
/* 全局样式 */

.anchorBL {
    display: none;
}

.mymap>div {
    background-color: #081734 !important;
}

@keyframes myrotate {
    0% {
        transform: rotateZ(0deg);
    }
    50% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes myrotateCenter {
    0% {
        transform: rotateZ(0deg);
    }
    80% {
        transform: rotateZ(360deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
.fa-container {
    // width: 100%;
    //   height: calc(100vh - 135px);
    // overflow: hidden;
    background-color: #101129;
    overflow: hidden;
}

.visualization {
    height: calc(100vh - 84px); // background-color: #101129;
    // background-color: #0d1528;
    margin: 0;
    width: 1920px;
    height: 1080px; //   transform-origin: left top 0px;
    box-sizing: border-box; // overflow: hidden;
    background: url(../../../assets/images/bgimg.jpg) 0% 0% / 100% 100% repeat scroll rgb(0, 0, 0); // background: linear-gradient(
    //   180deg,
    //   rgba(7, 28, 55, 1) 0%,
    //   rgba(7, 28, 55, 1) 0%,
    //   rgba(7, 28, 55, 1) 65%,
    //   rgba(0, 0, 0, 1) 100%,
    //   rgba(0, 0, 0, 1) 100%
    // );
    perspective: 1200px;
    .htmleaf-header {
        // position: absolute;
        // top: 0.4%;
        // left: 49%;
        // -webkit-transform: translateX(-50%);
        // transform: translateX(-50%);
        width: 100%;
        height: 90px;
        line-height: 60px; // background-image: url(../../../assets/screen/title.png);
        background-size: 100% 100%;
        #main-title {
            box-sizing: border-box;
            margin: 0 auto;
            height: 70px;
            width: 700px;
            line-height: 70px;
            text-align: center;
            font-family: Arial, Microsoft YaHei, \\9ed1\4f53, \\5b8b\4f53;
            font-weight: 300; // color: #e3d772;
            color: #1eaed2;
            letter-spacing: 1px;
            font-size: 2.4em;
            font-weight: bolder;
            span {
                width: auto;
                height: 70px;
                line-height: 77px;
                display: inline-block;
                vertical-align: middle;
            }
        }
        .scale-out {
            -webkit-animation: 0.5s ease-out;
            animation: 0.5s ease-out;
            -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }
        .float-right {
            float: right;
            width: 50px;
            height: 50px;
            margin: 12px 0 6px 0;
            color: #fff;
            cursor: pointer;
            svg {
                cursor: pointer;
                height: 20px;
            }
            img {
                height: 30px;
            }
        }
    }
    .data-filters {
        position: absolute;
        top: 7.5%;
        width: 15%;
        height: 3%;
        left: 9%;
        z-index: 501;
        .select-wrap {
            color: #fff;
            width: 100%;
            height: 30px;
        }
    }
    .navigation {
        position: absolute;
        top: 4.8%;
        width: 20%;
        height: 4%;
        right: 1.14%;
        z-index: 503;
        .container {
            width: 100%;
            height: 45px;
            padding-bottom: 10px;
            .time {
                position: relative;
                float: right;
                margin-right: 34px;
                height: 100%;
                width: 75%;
                #currentTime {
                    position: absolute;
                    bottom: 0;
                    font-family: Microsoft Yahei;
                    font-size: 1em;
                    letter-spacing: 1px;
                    color: #b2e1ea;
                    white-space: nowrap;
                    text-shadow: 0 0 5px rgba(20, 135, 243, 0.8);
                }
            }
        }
    }
    .top-title {
        font-size: 20px;
        text-align: left;
        color: #06cfe8; // height: 30px;
        // line-height: 30px;
        padding-left: 20px;
        position: relative;
        .top-icon {
            display: inline-block;
            position: absolute;
            right: 20px;
            top: 0px;
            img {
                vertical-align: middle;
            }
        }
    }
    .inner {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: -2.125rem;
        right: -1.583rem;
        bottom: -0.875rem;
        left: -5.5rem; // border: 1px solid red;
        padding: 0.5rem 0 1rem;
    }
    .person-status {
        text-align: center;
        color: #ffffff;
        background-color: #101b46; // background-image: url(../../../assets/screen/rect.png);
        // background-size: 100% 100%;
        margin: 10px 15px;
    }
    .circle-container {
        // background-image: url(../../../assets/screen/circle1.png);
        background-size: cover;
        width: 90px;
        height: 90px;
        margin: 10px;
        text-align: center;
        display: inline-block;
    }
    .plan-tips {
        text-align: left;
        padding-top: 26px;
        color: #8294a5;
    }
    .plan-num {
        text-align: left;
        background: linear-gradient(0deg, #273e68, #273e68, #61ddb1, #61ddb1);
        font-style: normal;
        background-size: cover;
        font-family: electronicFont;
        font-size: 36px;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;
    }
    .circle1 {
        margin-top: 15px;
        height: 55px;
        width: 55px;
        animation: animation-rotate 4s linear infinite;
    }
    .circle2 {
        height: 100px;
        animation: animation-rotate 4s linear infinite;
    }
    .left-top {
        height: 258px; // background-image: url(../../../assets/screen/border.png);
        // background-size: 100% 100%;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        margin-top: 10px;
        padding: 0 8px;
        position: relative;
    }
    .left-center {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
    }
    .left-bottom {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
        .goods-container {
            height: 130px; // background-image: url(../../../assets/screen/bg02.png);
            background-size: 100% 100%;
            margin: 10px 10px; // padding: 15px;
            // border: 2px solid red;
            // border-image: url(../../../assets/screen/bg02.png) 30 30 30 30;
            // border-width: 50px 50px 50px 50px;
        }
        .goods-tips {
            font-size: 20px;
            color: #06cfe8;
            text-align: center;
            padding-top: 30px;
        }
        .goods-num {
            font-size: 36px;
            font-family: electronicFont;
            text-align: center;
            color: #ffffff;
        }
    }
    .right-top {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
        margin-top: 10px;
    }
    .right-center {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
    }
    .right-bottom {
        height: 258px;
        border: 2px solid red; // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin: 20px;
        padding: 0 8px;
        position: relative;
    }
    .center-top1 {
        height: 100px;
        position: relative; // background-color: #080a20;
    }
    .center-top2 {
        height: 100px;
        position: relative; // background-color: #080a20;
    }
    .center-top {
        height: 860px;
        position: relative; // background-color: #080a20;
        .block1-tips {
            position: absolute;
            bottom: 120px;
            right: 2px;
            width: 40px;
            height: 110px;
            font-size: 22px;
            color: #fff;
            line-height: 28px;
            padding-top: 11px;
            text-align: center;
            background-color: #6ea7d3;
        }
        .block1 {
            position: absolute;
            bottom: 100px;
            right: 50px;
            width: 50px;
            height: 362px;
            border: 1px #ccc dotted;
            border-radius: 3px; // display: flex;
            // align-items: flex-end;
            overflow: hidden;
            .block1-capsule {
                display: inline-block;
                width: 20px;
                height: 96px;
                border-radius: 10px;
                background-color: #61ddb1;
                margin: 10px 15px;
            }
        }
        .block2-tips {
            position: absolute;
            bottom: 246px;
            right: 244px;
            width: 110px;
            height: 40px;
            font-size: 22px;
            color: #fff;
            letter-spacing: 2px;
            padding-top: 2px;
            text-align: center;
            background-color: #6ea7d3;
        }
        .block2 {
            position: absolute;
            bottom: 240px;
            right: 130px;
            width: 350px;
            height: 220px;
            border: 1px #ccc dotted;
            border-radius: 3px;
            padding: 50px 0 0 12px;
            .block2-capsule {
                display: inline-block;
                width: 20px;
                height: 100px;
                border-radius: 10px;
                background-color: #61ddb1;
                margin: 10px 8px;
            }
        }
        .block3-tips {
            position: absolute;
            top: 160px;
            left: 780px;
            width: 40px;
            height: 110px;
            font-size: 22px;
            color: #fff;
            line-height: 28px;
            padding-top: 11px;
            text-align: center;
            background-color: #6ea7d3;
        }
        .block3 {
            position: absolute;
            top: 140px;
            left: 650px;
            width: 110px;
            height: 500px; // border: 1px #ccc dotted;
            border-radius: 3px; // background-image: url(../../../assets/images/furnace.png);
            // background-size: 100% 100%;
            img {
                height: 860px;
                margin-top: -210px;
                margin-left: -59px;
                width: 180px;
            }
            .block3-capsule {
                display: inline-block;
                width: 80px;
                height: 24px;
                border-radius: 10px;
                background-color: #61ddb1;
                margin: 10px 15px;
            }
        }
        .line1 {
            position: absolute;
            top: 190px;
            left: -140px;
            width: 780px;
            height: 1px;
            background-color: #273e68;
            color: #fff;
            text-align: left;
            line-height: 24px;
        }
        .lx1 {
            cursor: pointer;
            position: absolute;
            top: 178px;
            left: 19px;
        }
        .arrow1 {
            position: absolute;
            top: 180px;
            left: 633px;
        }
        .line2 {
            position: absolute;
            top: 225px;
            left: -140px;
            width: 780px;
            height: 1px;
            background-color: #273e68;
            color: #fff;
            text-align: left;
            line-height: 24px;
        }
        .lx2 {
            cursor: pointer;
            position: absolute;
            top: 213px;
            left: 19px;
        }
        .arrow2 {
            position: absolute;
            top: 215px;
            left: 633px;
        }
        .arrow21 {
            position: absolute;
            top: 215px;
            left: 433px;
        }
        .arrow22 {
            position: absolute;
            top: 369px;
            left: 440px;
        }
        .arrow23 {
            position: absolute;
            top: 375px;
            left: 634px;
        }
        .line21 {
            position: absolute;
            top: 226px;
            left: 450px;
            width: 1px;
            height: 160px;
            background-color: #273e68;
        }
        .line22 {
            position: absolute;
            top: 385px;
            left: 451px;
            width: 198px;
            height: 1px;
            background-color: #273e68;
        }
        .line3 {
            position: absolute;
            top: 420px;
            left: -140px;
            width: 780px;
            height: 1px;
            background-color: #273e68;
            color: #fff;
            text-align: left;
            line-height: 24px;
        }
        .lx3 {
            cursor: pointer;
            position: absolute;
            top: 408px;
            left: 19px;
        }
        .arrow3 {
            position: absolute;
            top: 410px;
            left: 633px;
        }
        .line4 {
            position: absolute;
            top: 455px;
            left: -160px;
            width: 702px;
            height: 1px;
            background-color: #273e68;
            color: #fff;
            text-align: left;
            line-height: 24px;
        }
        .lx4 {
            cursor: pointer;
            position: absolute;
            top: 444px;
            left: 19px;
        }
        .lx41 {
            cursor: pointer;
            position: absolute;
            top: 444px;
            left: 440px;
        }
        .arrow4 {
            position: absolute;
            top: 445px;
            left: 318px;
        }
        .arrow41 {
            position: absolute;
            top: 670px;
            left: 311px;
        }
        .arrow42 {
            position: absolute;
            top: 636px;
            left: 696px;
        }
        .arrow43 {
            position: absolute;
            top: 574px;
            left: 531px;
        }
        .arrow44 {
            position: absolute;
            top: 451px;
            left: 531px;
        }
        .line41 {
            position: absolute;
            top: 456px;
            left: 541px;
            width: 1px;
            height: 160px;
            background-color: #273e68;
        }
        .line42 {
            position: absolute;
            top: 616px;
            left: 541px;
            width: 90px;
            height: 1px;
            background-color: #273e68;
        }
        .line43 {
            position: absolute;
            top: 456px;
            left: 320px;
            width: 1px;
            height: 230px;
            background-color: #273e68;
        }
        .line44 {
            position: absolute;
            top: 685px;
            left: 320px;
            width: 387px;
            height: 1px;
            background-color: #273e68;
        }
        .line45 {
            position: absolute;
            top: 641px;
            left: 706px;
            width: 1px;
            height: 44px;
            background-color: #273e68;
        }
        .line5 {
            position: absolute;
            top: 93px;
            top: -6px;
            left: 580px;
            width: 652px;
            height: 1px;
            background-color: #273e68;
            color: #fff;
            text-align: right;
            line-height: 24px;
        }
        .lx5 {
            cursor: pointer;
            position: absolute;
            top: -17px;
            left: 1048px;
        }
        .arrow5 {
            position: absolute;
            top: -15px;
            left: 575px;
        }
        .arrow51 {
            position: absolute;
            top: 239px;
            left: 571px;
        }
        .arrow52 {
            position: absolute;
            top: 245px;
            left: 634px;
        }
        .line51 {
            position: absolute;
            top: -5px;
            left: 580px;
            width: 1px;
            height: 256px;
            background-color: #273e68;
        }
        .line52 {
            position: absolute;
            top: 255px;
            left: 580px;
            width: 69px;
            height: 1px;
            background-color: #273e68;
        }
        .line6 {
            position: absolute;
            top: 287px;
            left: 259px;
            width: 130px;
            height: 40px;
            background-image: url(../../../assets/images/img02.png);
            background-size: 100% 100%;
        }
        .arrow6 {
            position: absolute;
            top: 262px;
            left: 366px;
        }
        .arrow61 {
            position: absolute;
            top: 257px;
            left: 514px;
        }
        .arrow62 {
            position: absolute;
            top: 333px;
            left: 520px;
        }
        .arrow63 {
            position: absolute;
            top: 338px;
            left: 634px;
        }
        .arrow64 {
            position: absolute;
            top: 297px;
            left: 386px;
        }
        .arrow65 {
            position: absolute;
            top: 539px;
            left: 337px;
        }
        .arrow66 {
            position: absolute;
            top: 544px;
            left: 514px;
        }
        .arrow67 {
            position: absolute;
            top: 505px;
            left: 373px;
        }
        .arrow68 {
            position: absolute;
            top: 317px;
            left: 367px;
        }
        .line61 {
            position: absolute;
            top: 267px;
            left: 376px;
            width: 1px;
            height: 20px;
            background-color: #273e68;
        }
        .line62 {
            position: absolute;
            top: 266px;
            left: 375px;
            width: 156px;
            height: 1px;
            background-color: #273e68;
        }
        .line63 {
            position: absolute;
            top: 267px;
            left: 530px;
            width: 1px;
            height: 75px;
            background-color: #273e68;
        }
        .line64 {
            position: absolute;
            top: 348px;
            left: 530px;
            width: 119px;
            height: 1px;
            background-color: #273e68;
        }
        .line65 {
            position: absolute;
            top: 307px;
            left: 399px;
            width: 251px;
            height: 1px;
            background-color: #273e68;
        }
        .line66 {
            position: absolute;
            top: 321px;
            left: 377px;
            width: 1px;
            height: 194px;
            background-color: #273e68;
        }
        .line67 {
            position: absolute;
            top: 514px;
            left: 377px;
            width: 154px;
            height: 1px;
            background-color: #273e68;
        }
        .line68 {
            position: absolute;
            top: 327px;
            left: 346px;
            width: 1px;
            height: 227px;
            background-color: #273e68;
        }
        .line69 {
            position: absolute;
            top: 554px;
            left: 348px;
            width: 181px;
            height: 1px;
            background-color: #273e68;
        }
        .line70 {
            position: absolute;
            top: 491px;
            left: 530px;
            width: 22px;
            height: 87px;
            border: 2px solid #fff;
            background-color: #b0c7d8;
        }
        .block4-tips {
            position: absolute;
            top: 342px;
            left: 360px;
            width: 40px;
            height: 110px;
            font-size: 22px;
            color: #fff;
            line-height: 28px;
            padding-top: 11px;
            text-align: center;
            background-color: #6ea7d3;
        }
        .block4 {
            position: absolute;
            top: 140px;
            left: 200px;
            width: 370px;
            height: 500px;
            border: 1px #ccc dotted;
            border-radius: 3px;
            padding-top: 60px;
            .block4-capsule {
                display: inline-block;
                width: 80px;
                height: 24px;
                border-radius: 10px;
                background-color: #61ddb1;
                margin: 18px 50px;
            }
        }
        .green-status {
            background-color: #61ddb1 !important;
        }
        .red-status {
            background-color: #f89588 !important;
        }
        .grey-status {
            background-color: #9192ab !important;
        }
        .btm-tips {
            position: absolute;
            bottom: 0;
            height: 40px;
            width: 100%; // border: 1px red solid;
            font-size: 18px;
            color: #06cfe8;
            text-align: center;
            .green-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #61ddb1;
            }
            .yellow-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #ffd102;
            }
            .red-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #f89588;
            }
            .grey-block {
                display: inline-block;
                height: 20px;
                width: 40px;
                margin: 0 10px;
                border-radius: 10px;
                vertical-align: middle;
                background-color: #9192ab;
            }
        }
    }
    .center-bottom {
        height: 258px; // border: 2px solid red;
        // border-image: url(../../../assets/screen/border.png) 51 38 21 132;
        // border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        margin-top: 20px;
        padding: 0 8px;
        position: relative;
        .goods-container {
            height: 130px; // background-image: url(../../../assets/screen/bg02.png);
            background-size: 100% 100%;
            margin: 10px 50px; // padding: 15px;
            // border: 2px solid red;
            // border-image: url(../../../assets/screen/bg02.png) 30 30 30 30;
            // border-width: 50px 50px 50px 50px;
        }
        .goods-tips {
            font-size: 20px;
            color: #06cfe8;
            text-align: center;
            padding-top: 30px;
        }
        .goods-num {
            font-size: 36px;
            font-family: electronicFont;
            text-align: center;
            color: #ffffff;
        }
    }
    .copyright {
        height: 30px;
        line-height: 25px;
        text-align: center;
        font-size: 14px;
        color: #6ea7d3;
        position: absolute;
        bottom: 0px;
        width: 100%;
        transition: all 1s;
    }
}
</style>
