<style>
    /* 轮播图容器 */
    #slider {
        position: relative;
        width: 1000px; /* 外框宽度 */
        height: 380px; /* 外框高度 */
        margin-left: 0;
        background: url(/squ_jidian/static/images/loading.gif) no-repeat 50% 50%; /* 加载动画 */
        overflow: hidden; /* 确保超出部分不显示 */
    }

    /* 图片样式：确保图片按比例填充容器并居中 */
    #slider img {
        position: absolute;
        top: 50%;           /* 垂直居中 */
        left: 50%;          /* 水平居中 */
        width: 100%;        /* 使图片宽度自动适应外框 */
        height: 100%;       /* 使图片高度自动适应外框 */
        object-fit: cover;  /* 图片覆盖整个外框，保持比例并填充整个区域 */
        transform: translate(-50%, -50%); /* 将图片的中心与容器的中心对齐 */
        display: none;      /* 默认隐藏，轮播时显示 */
        opacity: 0;         /* 图片默认透明 */
        transition: opacity 0.5s ease-in-out; /* 使用透明度过渡 */
        z-index: 1;         /* 确保图片不被覆盖 */
    }

    /* 当前活动的图片样式 */
    #slider img.active {
        display: block;     /* 显示当前图片 */
        opacity: 1;         /* 使当前图片完全显示 */
        z-index: 2;         /* 确保当前图片在最上层 */
    }

    /* 链接样式，确保图片不受影响 */
    #slider a {
        border: 0;
        display: block;
    }

    /* 控制点样式 */
    .nivo-controlNav {
        position: absolute;
        left: 50%;                /* 水平居中 */
        bottom: 8px;
        transform: translateX(-50%); /* 完全居中 */
    }

    .nivo-controlNav a {
        display: block;
        width: 22px;
        height: 22px;
        background: url(/squ_jidian/static/images/bullets.png) no-repeat;
        text-indent: -9999px;
        border: 0;
        margin-right: 3px;
        float: left;
    }

    .nivo-controlNav a.active {
        background-position: 0 -22px;
    }

    /* 导航箭头样式 */
    .nivo-directionNav a {
        display: block;
        width: 30px;
        height: 30px;
        background: url(/squ_jidian/static/images/arrows.png) no-repeat;
        text-indent: -9999px;
        border: 0;
    }

    a.nivo-nextNav {
        background-position: -30px 0;
        right: 15px;
    }

    a.nivo-prevNav {
        left: 15px;
    }

    /* 图片下方的标题样式 */
    .nivo-caption {
        text-shadow: none;
        font-family: Helvetica, Arial, sans-serif;
        height: 38px;
        font-size: 16px;
    }

    .nivo-caption a {
        color: #efe9d1;
        text-decoration: underline;
    }

    /* 清除浮动 */
    .clear {
        clear: both;
    }
</style>
