gary_wms/wms/css/view/expression-index.php

<style>
    #table_index2_filter,
    #table_index2_paginate {
        text-align: right;
    }

    #table_index3_filter,
    #table_index3_paginate {
        text-align: right;
    }

    #table_index4_filter,
    #table_index4_paginate {
        text-align: right;
    }

    #table_index5_filter,
    #table_index5_paginate {
        text-align: right;
    }

    #table_index6_filter,
    #table_index6_paginate {
        text-align: right;
    }

    #table_index7_filter,
    #table_index7_paginate {
        text-align: right;
    }

    table {
        table-layout: fixed;
        width: 100%;
        margin-left: 12px;
    }

    td {
        word-wrap: break-word;
    }

    img {
        width: 125px;
    }

    .width_style_1 {
        width: 125px;
    }

    #table_index_filter {
        float: right;
    }

    #table_index_paginate {
        float: right;
    }

    label {
        display: inline-flex;
        margin-bottom: .5rem;
        margin-top: .5rem;
    }

    .table>tbody>tr>th {
        vertical-align: middle !important;
        text-align: center;
    }

    .table>tbody>tr>td {
        vertical-align: middle !important;
        text-align: center;
    }

    #loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        /* 透明度的背景颜色 */
        z-index: 9999;
        /* 确保在最上层显示 */
        /* 添加加载动画的样式 */
    }

    .hidden {
        display: none;
    }

    #loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.7);
        /* 半透明的背景 */
        z-index: 9999;
        /* 确保显示在最上层 */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .loading-text {
        text-align: center;
        margin-top: 10px;
        /* 调整文字与图标之间的间距 */
        font-size: 16px;
        color: #333;
        /* 文字颜色 */
    }

    .loading-icon {
        /* 这里是你加载图标的样式，可以是一个动画、GIF图或者SVG等 */
        /* 例如一个简单的加载圆圈动画 */
        border: 10px solid #f3f3f3;
        /* 灰色边框 */
        border-top: 10px solid #3498db;
        /* 蓝色顶部边框 */
        border-radius: 50%;
        width: 80px;
        height: 80px;
        animation: spin 2s linear infinite;
        /* 旋转动画 */
    }

    /* The Modal (background) */
    .modal {
        display: none;
        /* Hidden by default */
        position: fixed;
        /* Stay in place */
        z-index: 1;
        /* Sit on top */
        padding-top: 100px;
        /* Location of the box */
        left: 0;
        top: 0;
        width: 100%;
        /* Full width */
        height: 100%;
        /* Full height */
        overflow: auto;
        /* Enable scroll if needed */

    }

    .modal .back {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        /* Black w/ opacity */
    }

    /* Modal Content */
    .modal-content {
        z-index: 9;
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
    }

    /* The Close Button */
    .close {
        color: #aaaaaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }


    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @media screen and (max-width: 600px) {

        table {
            border: 0;
        }

        table thead {
            display: none;
        }

        table tr {
            margin-bottom: 10px;
            display: block;
            border-bottom: 2px solid #ddd;
        }

        table td {
            display: block;
            text-align: right;
            font-size: 14px;
            border-bottom: 1px dotted #ccc;
        }

        table td:last-child {
            border-bottom: 0;
        }

        table td:before {
            content: attr(data-label);
            float: left;
            text-transform: uppercase;
            font-weight: bold;
        }
    }
</style>