jsite/jingrow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复SwiperItems组件手机端横向溢出问题

Browse Source
This commit is contained in:
jingrow 2025-06-19 01:02:32 +08:00
parent acf88d1758
commit 7cfaa5f7e4
4 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/page.jsx
View File

@ -38,12 +38,10 @@ export default function Page() {
<> <>
<section className="wrapper"> <section className="wrapper">
<Hero /> <Hero />
{/* /.swiper-container */}
</section> </section>
<section className="wrapper !bg-[#ffffff] "> <section className="w-full xl:w-10/12 xl:mx-auto">
<div className="w-full">
<SwiperItems /> <SwiperItems />
</div> <CategoryItems />
</section> </section>
</> </>
</div>{" "} </div>{" "}

2
components/homes/home-15/CategoryItems.jsx
View File

@ -197,7 +197,7 @@ export default function CategoryItems() {
{/* 文字内容 */} {/* 文字内容 */}
<div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4"> <div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
<div className="post-header !mb-[.9rem]"> <div className="post-header !mb-[.9rem]">
<div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]"> <div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#1fc76f]">
{post.additional_title} {post.additional_title}
</div> </div>
<h2 className="post-title !mt-1 !leading-[1.35] !mb-0 text-base md:!text-[0.85rem]"> <h2 className="post-title !mt-1 !leading-[1.35] !mb-0 text-base md:!text-[0.85rem]">

14
components/homes/home-15/SwiperItems.jsx
View File

@ -169,7 +169,7 @@ export default function SwiperItems(props) {
} }
return ( return (
<div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto my-[150px]"> <div className="w-full max-w-full mx-auto my-[150px] px-4 sm:px-6 md:px-8 xl:w-10/12 xl:px-0">
{/* 新增模块标题和副标题显示 */} {/* 新增模块标题和副标题显示 */}
{(title || subtitle) && ( {(title || subtitle) && (
<div className="relative z-20 text-center mb-10 select-text"> <div className="relative z-20 text-center mb-10 select-text">
@ -185,9 +185,9 @@ export default function SwiperItems(props) {
) : ( ) : (
<div className="relative"> <div className="relative">
<Swiper <Swiper
className="swiper" className="swiper w-full"
modules={[Navigation, Pagination, Grid]} modules={[Navigation, Pagination, Grid]}
spaceBetween={30} spaceBetween={16}
slidesPerView={columns} slidesPerView={columns}
slidesPerGroup={columns * rows} slidesPerGroup={columns * rows}
grid={{ rows }} grid={{ rows }}
@ -226,19 +226,19 @@ export default function SwiperItems(props) {
{/* 文字内容 */} {/* 文字内容 */}
<div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4"> <div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
<div className="post-header !mb-[.9rem]"> <div className="post-header !mb-[.9rem]">
<div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]"> <div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#1fc76f]">
{post.additional_title || ""} {post.additional_title || ""}
</div> </div>
<h2 className="post-title !mt-1 !leading-[1.35] !mb-0"> <h2 className="post-title !mt-1 !leading-[1.35] !mb-0 text-base md:!text-[0.85rem]">
<Link <Link
className="!text-[#343f52] hover:!text-[#3f78e0]" className="!text-[#333333] hover:!text-[#1fc76f]"
href={post.slug ? `/${category_slug}/${post.slug}` : "#"} href={post.slug ? `/${category_slug}/${post.slug}` : "#"}
> >
{post.title} {post.title}
</Link> </Link>
</h2> </h2>
</div> </div>
<div className="!relative"> <div className="!relative !text-[0.7rem]">
<p>{getSummary(post.subtitle)}</p> <p>{getSummary(post.subtitle)}</p>
</div> </div>
</div> </div>

4
public/assets/custom.css
View File

@ -518,3 +518,7 @@ html {
box-shadow: none !important; box-shadow: none !important;
background: #ffffff !important; background: #ffffff !important;
} }
html, body {
overflow-x: hidden;
}