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">
<Hero />
{/* /.swiper-container */}
</section>
<section className="wrapper !bg-[#ffffff] ">
<div className="w-full">
<section className="w-full xl:w-10/12 xl:mx-auto">
<SwiperItems />
</div>
<CategoryItems />
</section>
</>
</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="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}
</div>
<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 (
<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) && (
<div className="relative z-20 text-center mb-10 select-text">
@ -185,9 +185,9 @@ export default function SwiperItems(props) {
) : (
<div className="relative">
<Swiper
className="swiper"
className="swiper w-full"
modules={[Navigation, Pagination, Grid]}
spaceBetween={30}
spaceBetween={16}
slidesPerView={columns}
slidesPerGroup={columns * 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="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 || ""}
</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
className="!text-[#343f52] hover:!text-[#3f78e0]"
className="!text-[#333333] hover:!text-[#1fc76f]"
href={post.slug ? `/${category_slug}/${post.slug}` : "#"}
>
{post.title}
</Link>
</h2>
</div>
<div className="!relative">
<div className="!relative !text-[0.7rem]">
<p>{getSummary(post.subtitle)}</p>
</div>
</div>

4
public/assets/custom.css
View File

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