This commit is contained in:
qiuchenfan 2025-11-20 10:54:57 +08:00
parent 0812e1110b
commit a585b3bd46
3 changed files with 14 additions and 16 deletions

View File

@ -123,9 +123,8 @@ export function CarouselDemo({
{/* 分页指示器容器:绝对定位在底部 */} {/* 分页指示器容器:绝对定位在底部 */}
<div <div
className={`absolute bottom-4 ${ className={`absolute bottom-4 ${paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置 } flex gap-2 z-10`} // 水平排列,间距 0.5rem,置于轮播图上方
} flex gap-2 z-10`} // 水平排列,间距 0.5rem,置于轮播图上方
> >
{/* 动态生成指示器按钮 */} {/* 动态生成指示器按钮 */}
{Array.from({ length: count }).map((_, index) => ( {Array.from({ length: count }).map((_, index) => (
@ -136,12 +135,11 @@ export function CarouselDemo({
// 根据 paginationStyle 决定形状 // 根据 paginationStyle 决定形状
paginationStyle === 'dot' paginationStyle === 'dot'
? 'h-2 w-2 rounded-full' // 圆形:宽高相等 + 全圆角 ? 'h-2 w-2 rounded-full' // 圆形:宽高相等 + 全圆角
: 'h-2 w-8 rounded' // 块状:宽 2rem高 0.5rem,带圆角 : 'h-1 w-6 rounded' // 块状
} ${ } ${index === current
index === current
? 'bg-white' // 当前项为纯白色 ? 'bg-white' // 当前项为纯白色
: 'bg-white/50' // 非当前项为半透明白色 : 'bg-white/50' // 非当前项为半透明白色
}`} }`}
aria-label={`Go to slide ${index + 1}`} // 无障碍支持 aria-label={`Go to slide ${index + 1}`} // 无障碍支持
/> />
))} ))}

View File

@ -45,7 +45,7 @@ const LearnPage = () => {
</div> </div>
{/* 下三图 */} {/* 下三图 */}
{[3, 4, 5].map((i) => ( {[3, 4, 6].map((i) => (
<div key={i} className=" shadow-sm overflow-hidden"> <div key={i} className=" shadow-sm overflow-hidden">
<img <img
src={`/images/carousel-${i}.jpg`} src={`/images/carousel-${i}.jpg`}
@ -59,7 +59,7 @@ const LearnPage = () => {
{/* 右侧新闻列表 */} {/* 右侧新闻列表 */}
<div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center"> <div className="lg:w-2/5 bg-white border border-gray-200 shadow-sm p-8 flex items-center">
<ul className="space-y-8 w-full"> <ul className="space-y-8 w-full">
{newsList.map((item, index) => ( {newsList.map((item, index) => (
<li <li
@ -76,7 +76,7 @@ const LearnPage = () => {
<div className="w-[1590px] h-[285px] flex relative mb-10"> <div className="w-[1590px] h-[285px] flex relative mb-10">
<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}> <div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<div <div
className="w-[140px] h-[220px] absolute left-4 bottom-2 bg-cover bg-center " className="w-[140px] h-[220px] absolute left-4 bottom-3 bg-cover bg-center "
style={{ backgroundImage: "url('/public/images/book1.png')"}} style={{ backgroundImage: "url('/public/images/book1.png')"}}
></div> ></div>
{/* 左边容器内容 */} {/* 左边容器内容 */}
@ -89,10 +89,10 @@ const LearnPage = () => {
</div> </div>
</div> </div>
<div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}> <div className="w-[750px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
<img src="/public/images/book2.png" <div
className="w-[200px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center " className="w-[150px] h-[240px] absolute left-5 bottom-0 bg-cover bg-center "
alt="book" style={{ backgroundImage: "url('/public/images/book2.png')"}}
></img> ></div>
{/* 右边容器内容 */} {/* 右边容器内容 */}
<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] "> <div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25"></p> <p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25"></p>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 141 KiB