local/www/three-img.html
@@ -14,28 +14,30 @@
        .arrow_box {
            position: absolute;
            background: #88b7d5;
            border: 1px solid #c2e1f5;
            /*background: #fff;*/
            /*opacity: 0.8;*/
            border: 0px solid #c2e1f5;
            padding: 2px;
            width: 150px;
            height: 45px;
            border-radius: 6px;
            /*width: 140px;*/
            height: 30px;
            border-radius: 3px;
        }
        .arrow_box_1 {
            position: absolute;
            background: rgba(12, 70, 118, 1);
            border: 1px solid rgba(22, 146, 220, 1);
            background: rgba(255,255,255, 0);
            border: 1px solid rgba(255,255,255, 0);
            padding: 2px;
            width: 150px;
            height: 45px;
            border-radius: 6px;
            /*width: 160px;*/
            height: 40px;
            border-radius: 3px;
        }
        .arrow_min{
            width: 80px;
            height: 45px;
            height: 40px;
            border-radius: 6px;
            position: absolute;
/*             background: #88b7d5; */
            /*             background: #88b7d5; */
        }
        .arrow_box:after, .arrow_box:before {
@@ -51,50 +53,59 @@
        .arrow_box:after {
            border-color: rgba(136, 183, 213, 0);
            border-top-color: #88b7d5;
            border-top-color: #fff;
            opacity: 0;
            border-width: 18px;
            margin-left: -18px;
        }
        .arrow_box:before {
            border-color: rgba(194, 225, 245, 0);
            border-top-color: #c2e1f5;
            border-top-color: #fff;
            opacity: 0;
            border-width: 19px;
            margin-left: -19px;
        }
        .tip{
            cursor: pointer;
        }
        .tip img {
            height: 44px;
            width: 44px;
            height: 22px;
            width: 22px;
        }
        .div-c {
            /*float: left;*/
            height: 43px;
            /*display: none;*/
            float: left;
            height: 38px;
        }
        .div-d2 {
            text-align: left;
            height: 43px;
            height: 38px;
            /*color: #FFF;*/
            color: #FFF;
            font-size: 14px;
            color: #000;
            font-size: 12px;
            line-height: 20px;
        }
        .div-d {
            text-align: left;
            height: 43px;
            color: rgb(255,128,64);
            font-size: 12px;
            line-height: 18px;
            float: left;
            text-align: center;
            height: 40px;
            color: #000;
            /*color: #FFF;*/
            font-size: 8px;
            line-height: 10px;
            font-weight: bold;
        }
        .arrow_min .div-d {
            color: #000cff;
        }
        .font-warn{
            color: #FF5722 !important;
            color: #ff0000 !important;
        }
        .div-temp {
            text-align: left;
@@ -134,15 +145,18 @@
            color: #FFF;
        }
        .div-d p{
           /*width: 200px;*/
            width: 80px;
            /*width: 200px;*/
            /* width: 80px;*/
            /*white-space:nowrap;*/
        }
        @media only screen and (max-width:1280px) and (max-height: 800px){
        }
    </style>
</head>
<body class="pdgxq-body">
<div class="i-container">
<div class="i-container div-body">
    <div class="jmkt-main">
        <div class="layui-fluid">
            <div class="pdgxq-m1 layui-row layui-col-space20">