.network-error {
    height: 300px;
    /* 或者父容器给的高度 */
    display: flex;
    margin-top: 150px;
    font-size: 18px;
    flex-direction: column;
    justify-content: center;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
    color: #333333;
    background: linear-gradient(180deg, #F3FCFF 0%, #51CFFB 100%);
    box-shadow: 0px 0.1067rem 0.5333rem 0px rgba(25, 79, 183, 0.4), inset 0px 0.0267rem 0.32rem 0px #83DDFC;
    border-radius: 0.4267rem;
}

/* 控制隐藏的class */
.network-error.hide {
    display: none;
}

.network-error .reload-btn {
    /* 尺寸 */
    min-width: 2.5rem;
    /* 用 rem，跟 height 同单位 */
    padding: 0 0.6rem;
    /* 用 padding 撑宽度，文案长了也不会挤 */
    height: 0.96rem;
    box-sizing: border-box;

    /* 布局：用 flex 居中，别用 line-height */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* 外观 */
    background: linear-gradient(180deg, #09CEFE 0%, #0C67F1 100%);
    border-radius: 999px;
    /* 胶囊圆角，不用手算 */
    border: 0.0267rem solid #FFFFFF;
    color: #FFFFFF;
    font-size: 0.4rem;
    line-height: 1.2;
    /* 恢复正常行高 */
    text-align: center;
    text-decoration: none;
    /* 如果是 <a> */
    white-space: nowrap;
    /* 不换行 */
    cursor: pointer;
    transition: all 0.1s ease-in-out;

    /* 去掉 button 默认样式 */
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    margin-top: 50px;
}