qin/Happy_language
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

homepage

Browse Source
This commit is contained in:
superlishunqin 2025-09-22 07:11:00 +08:00
parent 2f1bef2c18
commit 89a98739b1
2 changed files with 66 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
app/static/css/style.css
View File

@ -2313,29 +2313,6 @@ a.btn:hover {
left: 100%; left: 100%;
} }
/* 童趣控制器 */
.kid-control {
z-index: 15;
width: 70px;
height: 70px;
background: linear-gradient(45deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
border-radius: 50%;
border: none;
margin: 0 20px;
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.kid-control:hover {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(0,0,0,0.3);
}
.kid-arrow-prev, .kid-arrow-next {
font-size: 2rem;
color: #FF6B6B;
}
/* 童趣指示器 */ /* 童趣指示器 */
.hero-carousel-kid .carousel-indicators { .hero-carousel-kid .carousel-indicators {
bottom: 40px; bottom: 40px;
@ -4087,3 +4064,65 @@ a.btn:hover {
font-size: 0.9rem; font-size: 0.9rem;
} }
} }
/* 极简无框轮播图控制器 */
.hero-carousel-kid .carousel-control-prev,
.hero-carousel-kid .carousel-control-next {
z-index: 15;
width: 50px;
height: 50px;
background: none;
border: none;
margin: auto 15px;
transition: all 0.3s ease;
opacity: 0.7;
}
.hero-carousel-kid .carousel-control-prev:hover,
.hero-carousel-kid .carousel-control-next:hover {
opacity: 1;
transform: scale(1.2);
}
.hero-carousel-kid .carousel-control-prev-icon,
.hero-carousel-kid .carousel-control-next-icon {
width: 24px;
height: 24px;
background-size: 100% 100%;
filter: brightness(0) invert(1) drop-shadow(1px 1px 2px rgba(0,0,0,0.5));
transition: all 0.3s ease;
}
.hero-carousel-kid .carousel-control-prev:hover .carousel-control-prev-icon,
.hero-carousel-kid .carousel-control-next:hover .carousel-control-next-icon {
filter: brightness(0) invert(1) drop-shadow(2px 2px 4px rgba(0,0,0,0.7));
transform: scale(1.1);
}
/* 指示器样式优化 */
.hero-carousel-kid .carousel-indicators {
bottom: 30px;
z-index: 15;
}
.hero-carousel-kid .carousel-indicators button {
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
margin: 0 8px !important;
background: rgba(255, 255, 255, 0.6) !important;
border: 2px solid rgba(255, 255, 255, 0.8) !important;
transition: all 0.3s ease;
opacity: 0.7;
}
.hero-carousel-kid .carousel-indicators .active {
background: rgba(255, 255, 255, 0.95) !important;
transform: scale(1.3);
opacity: 1;
}
.hero-carousel-kid .carousel-indicators button:hover {
background: rgba(255, 255, 255, 0.8) !important;
opacity: 1;
}

8
app/templates/index.html
View File

@ -128,12 +128,12 @@
</div> </div>
<!-- 控制器 --> <!-- 控制器 -->
<button class="carousel-control-prev kid-control" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev"> <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
<span class="kid-arrow-prev">◀️</span> <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> <span class="visually-hidden">Previous</span>
</button> </button>
<button class="carousel-control-next kid-control" type="button" data-bs-target="#heroCarousel" data-bs-slide="next"> <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
<span class="kid-arrow-next">▶️</span> <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> <span class="visually-hidden">Next</span>
</button> </button>
</div> </div>