﻿/***************** 右下角弹出提醒盒子 ******************/
.message-box {
    position: fixed;
    bottom: 40px;
    right: 20px;
    display: none;
    padding: 10px;
    /*background-color: #f2f0f0;*/ /* 设置默认背景色 */
    z-index: 1000;
    border-radius: 4px;
    box-shadow: 0px 0px 25px rgba(0,0,0,0.4);
    width: 240px;
    height: auto;
    padding: 2px
}


    .message-box p {
        margin: 0px;
    }

    .message-box .title {
        font-size: 18px;
        color: #484e59;
        padding: 10px 5px;
    }

    .message-box .approval_content {
        color: #646464;
        font-size: 13px;
        padding:  5px;
    }

    .message-box .container {
        display: flex;
        align-items: center; /* 垂直居中 */
        height: 100%;
    }

        .message-box .container .left_img {
            width: 40px;
            height: 40px;
            margin-right: 15px;
            display: flex;
            justify-content: center;
            /*background-image: url('../../img/MessageBoxIcon/m_remind.png');*/ /* 设置默认图片 */
            background-size: cover;
        }

            .message-box .container .left_img img {
                max-width: 100%;
                height: auto;
                /*background-image: url("../img/MessageBoxIcon/m_remind.png");*/
            }

        .message-box .container .right_text {
            flex: 1;
            height: 100%;
        }

    /****************** 切换不同的背景色和图片 ********************/
    .message-box.m_newMes {
        background-color: #f2f0f0; /* 通过背景色 */
    }

        .message-box.m_newMes .container .left_img {
            background-image: url('../../img/MessageBoxIcon/m_remind.png');
        }

    .message-box.m_pass {
        background-color: #a6e9ac; /* 通过背景色 */
    }

        .message-box.m_pass .container .left_img {
            background-image: url('../../img/MessageBoxIcon/m_pass.png');
        }

    .message-box.m_warn {
        background-color: #eed084; /* 警告背景色 */
    }

        .message-box.m_warn .container .left_img {
            background-image: url('../../img/MessageBoxIcon/m_warn.png');
        }

    .message-box.m_error {
        background-color: #e47366; /* 不通过背景色 */
    }

        .message-box.m_error .container .left_img {
            background-image: url('../../img/MessageBoxIcon/m_error.png');
        }

        .message-box.m_error .title {
            color: #000;
        }

        .message-box.m_error .approval_content {
            color: #303030;
        }
