* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }
 		bj {
            background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
        }

       .header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: #fff;
            color: white;
        }

       .header img {
            height: 35px;
        }

       .back-button {
            cursor: pointer;
            font-size: 16px;
        }

       .slider-container {
            width: 100%;
            position: relative;
            overflow: hidden;
        }

       .slider {
            display: flex;
            transition: transform 0.5s ease-in-out; /* 调整过渡效果时长 */
        }

       .slider img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

       .slider-nav {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
        }

       .slider-nav button {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: none;
            background-color: rgba(255, 255, 255, 0.5);
            margin: 0 5px;
            cursor: pointer;
        }

       .slider-nav button.active {
            background-color: white;
        }

       .slider-control {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30px;
            color: white;
            cursor: pointer;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 10px 15px;
            border-radius: 5px;
        }

       .slider-control.prev {
            left: 10px;
        }

       .slider-control.next {
            right: 10px;
        }

       .word-container {
            flex: 1;
            width: 100%;
            background-color: white;
            border-radius: 15px 15px 0 0;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
        }

       .tab-bar {
            display: flex;
            border-bottom: 2px solid #e0e7ff;
            background-color: #f0f4ff;
        }

       .tab {
            flex: 1;
            padding: 18px;
            text-align: center;
            cursor: pointer;
            font-size: 16px;
            font-weight: 500;
            color: #667eea;
            transition: all 0.3s ease;
        }

       .tab.active {
            background-color: #667eea;
            color: white;
            box-shadow: 0 -3px 5px rgba(102, 126, 234, 0.3) inset;
        }

       .word-section {
            display: none;
            padding: 20px;
        }

       .word-section.active {
            display: block;
        }

       .word-list {
            list-style-type: none;
        }

       .word-item {
            padding: 10px;
            border-bottom: 1px solid #f0f4ff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s ease;
        }

       .word-item:hover {
            background-color: #f4f7ff;
        }

       .word-info {
            display: flex;
            flex-direction: column;
        }

       .word {
            font-size: 22px;
            color: #3742fa;
            margin-bottom: 10px;
        }

       .phonetic {
            font-size: 16px;
            color: #777;
        }

       .play-icon {
            font-size: 24px;
            color: #e9573f;
            cursor: pointer;
        }

       .bottom-bar {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 10px 0;
            background-color: white;
            box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            bottom: 0;
        }

       .bottom-button {
            cursor: pointer;
            text-align: center;
            transition: all 0.3s ease;
        }

       .bottom-button i {
            font-size: 28px;
            display: block;
            margin-bottom: 7px;
        }

       .bottom-button span {
            font-size: 14px;
            color: #666;
        }

       .bottom-button:hover {
            transform: translateY(-3px);
            color: #667eea;
        }
		   /* 简单的轮播样式调整 */
        .splide__slide {
            text-align: center;
        }

        .card {
            width: 100%;
            height: 320px;
            background-color: #ccc;
            
        }

		.card-fixed,.card-fixed .card-overlay{
			border-radius:0;
			position:fixed;
			top:0;left:0;
			right:0;
			bottom:0
		}
		.card-style{
			overflow:hidden;
			border-radius:12px;
			margin:0 10px 0px;
			border:none;
			background-size:cover;
			background-repeat:no-repeat;
			background-position:center center
		}
		/* 去掉具有 no-underline 类的链接的下划线 */
        .no-underline {
			text-decoration: none !important;
		}
		/* 整体容器样式 */
       .feature-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        /* 每个功能块样式 */
       .feature-block {
            padding: 20px;
            border-radius: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
		.down-block {
            padding: 10px;
            border-radius: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        /* 功能标题样式 */
       .feature-title {
            font-size: 24px;
            color: white;
            margin-bottom: 5px;
        }

        /* 功能描述样式 */
       .feature-desc {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* 图标样式 */
       .feature-icon {
            font-size: 30px;
        }
		.shadow {
            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
			spread-radius:8px;
        }
		.bottom {
			border-bottom: 1px solid #ccc; /* 1px 是线的粗细，solid 是线的样式，black 是线的颜色 */
		}
		/* 顶部留空 */
		.pt-0 {
			padding-top: 0!important
		}

		.pt-1 {
			padding-top: .25rem!important
		}

		.pt-2 {
			padding-top: .5rem!important
		}

		.pt-3 {
			padding-top: 1rem!important
		}

		.pt-4 {
			padding-top: 1.5rem!important
		}

		.pt-5 {
			padding-top: 3rem!important
		}
		/* 底部留空 */
		.my-0 {
			margin-bottom: 0!important
		}

		.my-1 {
			margin-bottom: .25rem!important
		}

		.my-2 {
			margin-bottom: .5rem!important
		}

		.my-3 {
			margin-bottom: 1rem!important
		}

		.my-4 {
			margin-bottom: 1.5rem!important
		}

		.my-5 {
			margin-bottom: 3rem!important
		}

		.my-auto {
			margin-top: auto!important;
			margin-bottom: auto!important
		}
		/* 左右两边缩进 */
		.px-0 {
			padding-right: 0!important;
			padding-left: 0!important
		}

		.px-1 {
			padding-right: .25rem!important;
			padding-left: .25rem!important
		}

		.px-2 {
			padding-right: .5rem!important;
			padding-left: .5rem!important
		}

		.px-3 {
			padding-right: 1rem!important;
			padding-left: 1rem!important
		}

		.px-4 {
			padding-right: 1.5rem!important;
			padding-left: 1.5rem!important
		}

		.px-5 {
			padding-right: 3rem!important;
			padding-left: 3rem!important
		}

		



		/* 顶部图片容器样式 */
		.top-image {
			text-align: center;
			margin-bottom: 20px;
		}

		.down-image {
			text-align: center;
			margin-bottom: 10px;
		}

		/* 顶部图片样式 */
		.top-image img {
			border-radius: 10px;
			max-width: 100%;
			height: auto;
		}

		/* 选项卡容器样式 */
		.tabs {
			display: flex;
			border-top-left-radius: 15px;
			border-bottom-left-radius: 15px;
			border-top-right-radius: 15px;
			border-bottom-right-radius: 15px;
			overflow: hidden;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
			background-color: #eaeff1;
		}

		/* 选项卡按钮样式 */
		.tab-button {
			flex: 1;
			padding: 18px;
			text-align: center;
			cursor: pointer;
			font-size: 16px;
			color: #656d78;
			border: none;
			transition: all 0.3s ease;
		}

		/* 选中的选项卡按钮样式 */
		.tab-button.active {
			background-color: #8CC152;
			color: white;
		}

		/* 内容版块容器样式 */
		.content-section {
			margin-top: 20px;
			display: none;
		}

		/* 音频列表容器样式（用于单词听读） */
		.audio-list {
			background-color: white;
			border: 1px solid #e0e0e0;
			border-radius: 10px;
			padding: 15px;
		}

		/* 音频条目样式 */
		.audio-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1px solid #e0e0e0;
		}

		/* 最后一个音频条目去掉底部边框 */
		.audio-item:last-child {
			border-bottom: none;
		}

		/* 音频信息样式 */
		.audio-info {
			display: flex;
			flex-direction: column;
		}

		/* 类别样式（如“测试”） */
		.category {
			font-weight: bold;
			color: #333;
			margin-bottom: 5px;
		}

		/* 歌曲名称样式 */
		.song-name {
			color: #333;
		}
		/* 播放按钮样式 */
		button {
			radius: 5px;
			color: white;
			border: none;
			border-radius: 0px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
        /* 单词听写版块样式（假设是文本输入样式示例） */
       .dictation-section {
            background-color: #f0f4ff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px;
        }

        /* 单词认读版块样式（假设是单词卡片样式示例） */
       .recognition-section {
            background-color: #f0f4ff;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            padding: 15px;
        }

        /* 单词卡片样式 */
       .word-card {
            border: 1px solid #e0e0e0;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
        }
		/* 隐藏与显示 */
		.hide {
            display: none;
        }

        .show {
            cursor: pointer;
            color: #e9573f;
        }


        /* 容器样式 */
       .container {
            max-width: 100%;
            margin: 0 auto;
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        /* 状态栏样式 */
       .status-bar {
            text-align: right;
            padding: 12px 20px;
            font-size: 14px;
            color: #333;
            background-color: #f5f5f5;
        }

        /* 主内容区样式 */
       .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }

       .section-title {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 25px;
            color: #333;
        }

        /* 歌曲信息样式 */
       .song-info {
            text-align: center;
            margin: 30px 0;
        }

       .song-title {
            font-size: 24px;
            font-weight: bold;
            margin: 8px 0;
            color: #333;
        }

       .artist {
            color: #666;
            margin-bottom: 5px;
        }

       .lyricist {
            font-size: 12px;
            color: #999;
        }

        /* 按钮样式 */
       .add-button {
            background: #000;
            color: white;
            border: none;
            padding: 8px 25px;
            border-radius: 20px;
            margin: 15px 0;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

       .add-button:hover {
            background-color: #333;
        }

        /* 统计信息容器样式 */
       .stats-container {
            display: flex;
            justify-content: center;
            gap: 25px;
            margin: 30px 0;
        }

       .stat-item {
            text-align: center;
        }

       .stat-number {
            font-weight: bold;
            margin-bottom: 3px;
            color: #333;
        }

       .stat-label {
            font-size: 12px;
            color: #666;
        }

        /* 底部导航样式 */
       .bottom-nav {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            border-top: 1px solid #eee;
            background-color: #f5f5f5;
        }

       .nav-item {
            text-align: center;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: color 0.3s ease;
        }

       .nav-item:hover {
            color: #000;
        }

        /* 黑胶唱片样式 */
       .vinyl-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 0 auto 30px;
        }

       .vinyl {
            width: 100%;
            height: 100%;
            background: url('../img/pep3s.png');
            background-size: cover;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            animation: rotate 10s linear infinite;
            animation-play-state: paused;
        }

       .vinyl-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 50%;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* 进度条样式 */
       .progress-container {
            width: 100%;
            height: 4px;
            background-color: #e0e0e0;
            margin: 10px 0;
            cursor: pointer;
        }

       .progress-bar {
            height: 100%;
            background-color: #000;
            width: 0;
        }

        /* 时间显示样式 */
       .time-display {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
        }

        /* 控制按钮样式 */
       .control-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
            margin-top: 20px;
        }

       .control-button {
            background: transparent;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #333;
            transition: color 0.3s ease;
        }

       .control-button:hover {
            color: #000;
        }
		/* 下拉菜单样式优化 */
        .song-dropdown {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 12px;
            background-color: #fff;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            
            background-repeat: no-repeat;
            background-position: right 10px center;
        }
/* 自定义下拉按钮的样式 */
       .custom-dropdown-arrow {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #333; /* 设置图标颜色 */
        }

        /* 包裹下拉框和自定义图标的容器样式 */
       .custom-dropdown {
            position: relative;
        }
		.kongbai {
			width: auto;
            height: 60px;
        }

		/* 定义一个容器样式 */
        .download-container {
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 15px; /* 圆角边框 */
            padding: 8px; /* 内边距 */
            margin: 20px auto; /* 上下外边距为 20px，水平居中 */
            max-width: 96%; /* 最大宽度 */
            background-color: #fff; /* 背景颜色 */
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
        }
		/* 返回按钮背景 */
        .back-container {
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 10px; /* 圆角边框 */
            padding: 0px 12px; /* 内边距 */
            background-color: #fff; /* 背景颜色 */
        }

        /* 图片样式 */
        .top-image img {
            max-width: 100%; /* 图片最大宽度为容器宽度 */
            height: auto; /* 高度自适应 */
            display: block; /* 块级元素，便于居中 */
            margin: 0 auto; /* 水平居中 */
        }

        /* 下载按钮样式 */
        .feature-block {
            display: flex; /* 使用 flex 布局 */
            align-items: center; /* 垂直居中对齐 */
            justify-content: space-between; /* 两端对齐 */
            margin-top: 15px; /* 顶部外边距 */
        }

        .feature-title {
            font-size: 18px; /* 标题字体大小 */
            font-weight: bold; /* 标题字体加粗 */
        }

        .feature-icon a {
            font-size: 24px; /* 图标字体大小 */
        }

		.section {
            margin: 20px;
        }

        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }

        .photo-item {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .photo-item img {
            width: 100%;
            height: auto;
            display: block;
        }

        .photo-item p {
            padding: 3px;
            font-size: 14px;
        }

       .guess-you-like {
            grid-template-columns: repeat(3, 1fr);
        }

       .preview {
            grid-template-columns: repeat(2, 1fr);
        }



        /* 个人信息部分 */
       .profile {
            background-color: white;
            padding: 20px;
            align-items: center;
            justify-content: space-between;
        }

       .profile-info {
            display: flex;
            align-items: center;
        }

       .profile-pic {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-right: 15px;
        }

       .name {
            font-size: 24px;
            font-weight: bold;
        }

       .status {
            font-size: 16px;
            color: #666;
        }

       .status span {
            margin-right: 10px;
        }

       .online-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: green;
            display: inline-block;
            margin-left: 5px;
        }

        /* 统计信息部分 */
       .stats {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
            background-color: white;
            padding: 15px 0;
        }

       .stat-item {
            text-align: center;
        }

       .stat-value {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }

       .stat-label {
            font-size: 14px;
            color: #666;
        }

        /* 画廊部分 */
       .gallery {
            background-color: white;
            padding: 20px;
            margin-bottom: 20px;
        }

       .gallery-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

       .gallery-title {
            font-size: 20px;
            font-weight: bold;
        }

       .show-all {
            font-size: 16px;
            color: #007bff;
            cursor: pointer;
        }

       .image-container {
            display: flex;
            gap: 10px;
        }

       .large-image {
            width: 67.66666%;
            display: flex;
            align-items: flex-end;
            position: relative;
        }

       .small-images {
            display: flex;
            flex-direction: column;
            width: 32.33333%;
            gap: 10px;
            justify-content: space-between;
        }

       .small-image {
            width: 100%;
        }

       .large-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            aspect-ratio: 16 / 9;
            position: absolute;
            top: 0;
            left: 0;
        }

       .small-image img {
            width: 100%;
            height: auto;
            object-fit: cover;
            border-radius: 10px;
            min-height: 200px;
        }

        /* 文章部分 */
       .articles {
            background-color: white;
            padding: 20px;
        }

       .article {
            margin-bottom: 15px;
		   
        }

       .article img {
            width: 100%;
            height: auto;
            display: block;
		   border-radius: 10px;
        }