/* 外层容器：包裹整个进度条组件的父级容器 */
    .outer-container {
        border: 2px dashed #888;                    /* 虚线边框，颜色为灰色 */
        border-radius: 15px;                        /* 圆角边框，半径为15像素 */
        padding: 5px;                               /* 内边距调整为5px */
        margin: 10px auto;                          /* 外边距：上下10px，左右自动居中 */
        max-width: 100%;                            /* 最大宽度为父容器100% */
        display: flex;                              /* 使用flex弹性布局 */
        flex-direction: column;                     /* 子元素垂直排列 */
        align-items: center;                        /* 子元素水平居中 */
        justify-content: center;                    /* 子元素垂直居中 */
        text-align: center;                         /* 文本水平居中 */
    }

/* 进度条容器：承载进度条背景和填充色的外层 */
    .jinrishengyu-container {
        width: 100%;                                /* 宽度占满父容器 */
        height: 14px;                               /* 固定高度调整为14像素 */
        background-color: #a0a0a0;                  /* 背景色为灰色 */
        border-radius: 7px;                         /* 圆角半径调整为7像素 */
        overflow: hidden;                           /* 隐藏溢出内容 */
        position: relative;                         /* 相对定位 */
        margin: 6px 0;                              /* 上下边距调整为6px，减小间距 */
    }

/* 进度条填充色：表示已完成部分的彩色进度条 */
    .jinrishengyu-color {
        height: 100%;                               /* 高度继承父容器100% */
        background: linear-gradient(to bottom, #fa709a, #fee140); /* 垂直渐变背景 */
        border-radius: 6px 0 0 6px;                 /* 左侧圆角6px，右侧直角 */
        position: absolute;                         /* 绝对定位 */
        left: 0;                                    /* 左侧对齐 */
        width: 100%;                                /* 初始宽度100% */
        transition: width 1s ease;                  /* 宽度变化过渡动画 */
    }

/* 进度条文字容器：显示进度百分比文本 */
    .jinrishengyu-text {
        position: absolute;                         /* 绝对定位 */
        top: 0;                                     /* 顶部对齐 */
        left: 0;                                    /* 左侧对齐 */
        right: 0;                                   /* 右侧对齐 */
        height: 14px;                               /* 高度与进度条容器一致 */
        color: white;                               /* 文字颜色白色 */
        font-size: 10px;                          /* 字体大小*/
        line-height: normal;                        /* 恢复默认行高 */
        display: flex;                              /* 使用flex布局 */
        align-items: center;                        /* 垂直居中 */
        justify-content: center;                    /* 水平居中 */
        z-index: 10;                                /* 较高堆叠顺序 */
        pointer-events: none;                       /* 禁用鼠标事件 */
    }

/* 数字特殊样式：针对进度条中的数字部分 */
    .jinrishengyu-text .number {
        color: #00ffff;                             /* 数字颜色为青色 */
    }