a {
    /* 文字颜色 */
    color: #0066cc;
    /* 去除下划线 */
    text-decoration: none;
    /* 鼠标指针变为手型 */
    cursor: pointer;
}
a:hover {
    /* 悬停时文字颜色改变 */
    color: #ff0000;
    /* 悬停时出现下划线 */
    text-decoration: underline;
}
a:active {
    /* 点击瞬间背景色改变 */
    background-color: #f0f0f0;
}
a {
    /* 基础样式，如颜色、去除下划线等 */
    color: #0066cc;
    text-decoration: none;
    cursor: pointer;

    /* 设置过渡效果，这里针对颜色和下划线属性进行过渡 */
    transition: color 0.3s ease, text-decoration 0.3s ease;
}

a:hover {
    /* 鼠标悬停时的样式变化 */
    color: #ff0000;
    text-decoration: underline;
}
@keyframes fadeInOut {
    0% {
        opacity: 0; /* 开始时图片完全透明 */
    }
    5% {
        opacity: 1; /* 过渡到完全不透明 */
    }
    95% {
        opacity: 1;
    }
    100% {
        opacity: 0; /* 结束时又回到完全透明，准备下一次切换 */
    }
}

.carousel ul li {
    width: 25%;
    height: 100%;
    animation: fadeInOut 0.5s ease-in-out; /* 为每个图片添加淡入淡出动画 */
}
.carousel {
    width: 500px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background-color: #f8f8f8; /* 设置浅灰色背景色 */
}
.carousel.indicators span:hover {
    background-color: #999; /* 悬停时改变背景色，使其更有交互感 */
}
.carousel ul li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease; /* 为图片添加透明度过渡效果，切换时更平滑 */
}
.carousel.indicators span {
    width: 20px;
    height: 5px;
    border-radius: 3px; /* 设置为方形，通过调整border-radius来改变形状 */
    background-color: #ccc;
    margin: 0 5px;
    cursor: pointer;
}

.aside-count .content {
    padding: 15px
}
 
.aside-count .content .item {
    margin-bottom: 15px
}
 
.aside-count .content .item:last-child {
    margin-bottom: 0
}
 
.aside-count .content .item .title {
    font-size: 12px;
    color: var(--minor);
    margin-bottom: 5px;
    display: flex;
    align-items: center
}
 
.aside-count .content .item .title span {
    color: var(--theme);
    font-weight: 500;
    font-size: 14px;
    margin: 0 5px
}
 
.aside-count .content .item .progress {
    display: flex;
    align-items: center
}
 
.aside-count .content .item .progress .progress-bar {
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--classC);
    width: 0;
    min-width: 0;
    flex: 1;
    margin-right: 5px
}
@keyframes progress {
    0% {
        background-position: 0 0
    }
 
    100% {
        background-position: 30px 0
    }
}
.aside-count .content .item .progress .progress-bar .progress-inner {
    width: 0;
    height: 100%;
    border-radius: 5px;
    transition: width 0.35s;
    -webkit-animation: progress 750ms linear infinite;
    animation: progress 750ms linear infinite
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-1 {
    background: #bde6ff;
    background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-2 {
    background: #ffd980;
    background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-3 {
    background: #ffa9a9;
    background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
 
.aside-count .content .item .progress .progress-bar .progress-inner-4 {
    background: #67c23a;
    background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%);
    background-size: 30px 30px
}
.deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        z-index: 9999;
        pointer-events: none;
}
.deng-box1 {
        position: fixed;
        top: -30px;
        left: 0;
        z-index: 9999;
        pointer-events: none;
}