Explorar o código

跟新新闻图片放大问题

丁烨烨 hai 6 meses
pai
achega
cbb44b7ce7

BIN=BIN
public/assets/home/15.jpg


+ 7 - 5
src/app/about/page.tsx

@@ -56,14 +56,16 @@ export default async function Home() {
   return (
     <>
       <AnimatedSection effect="slide" direction="left">
-        {/*<div className="hidden sm:block">*/}
+        <div className="hidden sm:block">
           <div className="w-full h-full flex items-center justify-center text-white text-4xl font-bold">
           <Image src={"/assets/about/1.png"} alt={"关于我们"} width={1920} height={1080}/>
         </div>
-        {/*<div className="sm:hidden">*/}
-        {/*  <div className="w-full h-full flex items-center justify-center text-white text-4xl font-bold">*/}
-        {/*    <Image src={"/assets/about/23.png"} alt={"关于我们"} width={1920} height={1080}/>*/}
-        {/*  </div>*/}
+        </div>
+        <div className="sm:hidden">
+          <div className="w-full h-full flex items-center justify-center text-white text-4xl font-bold">
+            <Image src={"/assets/about/23.png"} alt={"关于我们"} width={1920} height={1080}/>
+          </div>
+        </div>
       </AnimatedSection>
       <div className="w-full">
         <AnimatedSection effect="slide" direction="right">

+ 1 - 1
src/app/news/page.tsx

@@ -62,7 +62,7 @@ export default async function NewsPage({
       <AnimatedSection effect="slide" direction="right">
       <div className="container sm:max-w-7/12 mx-auto p-4 space-y-6">
         {/* 顶部大新闻 */}
-        <div className="bg-white rounded-2xl shadow p-6">
+        <div className="bg-white rounded-2xl p-6">
           <div className="flex flex-col sm:flex-row gap-6">
             {/* 模拟图片色块 */}
             <div className="w-full sm:w-1/3 bg-gray-300 rounded-lg sm:h-auto flex items-center justify-center">

+ 31 - 16
src/components/ProductionSoft.tsx

@@ -11,7 +11,7 @@ function ProductionSoft({softIntroduction}: {softIntroduction: string}) {
       </div>
       <div className="hidden lg:grid grid-cols-1 lg:grid-cols-5 gap-6 h-[600px] mt-10">
         <div
-          className="lg:col-span-2 bg-[url('/assets/home/14.png')] bg-cover from-blue-900 to-blue-700 rounded-lg p-10 text-white flex flex-col justify-between">
+            className="lg:col-span-2 bg-[url('/assets/home/14.png')] bg-cover from-blue-900 to-blue-700 rounded-lg p-10 text-white flex flex-col justify-between">
           <div>
             <h2 className="text-2xl font-bold mt-10 border-b-2 border-blue-400 pb-2 inline-block">软件简介</h2>
             <p className="text-white text-2xl leading-relaxed mb-8 mt-10 tracking-widest font-medium">
@@ -19,39 +19,54 @@ function ProductionSoft({softIntroduction}: {softIntroduction: string}) {
             </p>
           </div>
           <Link
-            href={"/products?keyword=软件产品"}
-            className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors w-fit">
+              href={"/products?keyword=软件产品"}
+              className="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors w-fit">
             了解更多
           </Link>
         </div>
-
+        {/* PC端软件产品图片 */}
         <div className="lg:col-span-3 grid grid-cols-2 gap-4">
-          <div
-            className="col-span-2 bg-[url('/assets/home/15.jpg')] bg-cover from-teal-500 to-green-500 rounded-lg flex items-center justify-center text-white font-semibold text-lg">
+          <div className="col-span-2 rounded-lg overflow-hidden relative h-[300px]">
+            <Image
+                src="/assets/home/15.jpg"
+                fill
+                alt="软件产品图片"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+            />
           </div>
-          <div
-            className="bg-[url('/assets/home/16.jpg')] bg-cover from-blue-600 to-cyan-500 rounded-lg flex items-center justify-center text-white font-semibold">
+          <div className="rounded-lg overflow-hidden relative h-[300px]">
+            <Image
+                src="/assets/home/16.jpg"
+                fill
+                alt="软件产品图片"
+                sizes="(max-width: 768px) 100vw, 50vw"
+            />
           </div>
-
-          <div
-            className="bg-[url('/assets/home/17.jpg')] bg-cover from-slate-700 to-blue-800 rounded-lg flex items-center justify-center text-white font-semibold">
+          <div className="rounded-lg overflow-hidden relative h-[300px]">
+            <Image
+                src="/assets/home/17.jpg"
+                fill
+                alt="软件产品图片"
+                sizes="(max-width: 768px) 100vw, 50vw"
+            />
           </div>
         </div>
       </div>
+      {/* 移动端软件产品图片 */}
       <div className="lg:hidden mt-2">
         <div
-          className="bg-[url('/assets/home/14.png')] bg-cover from-blue-900 to-blue-700 p-10 text-white flex flex-col justify-between">
+            className="bg-[url('/assets/home/14.png')] bg-cover from-blue-900 to-blue-700 p-10 text-white flex flex-col justify-between">
           <div>
             <h2 className="text-1xl font-bold mt-10 border-b-2 border-blue-400 pb-2 inline-block">软件简介</h2>
             <p className="text-white text-1xl leading-relaxed mt-10 tracking-widest font-medium">
               软件产品包括:物联网智慧园区综合平台、物联网智慧园区综合平台、自然灾害应急能力提升平台、物联网环保监测管理平台、水库雨水情测报与大坝安全监测平台等等......
             </p>
           </div>
-          <Image className="mt-6" src={"/assets/home/16.png"} width={1000} height={1000} alt={"软件产品"} />
-          <Image className="mt-6" src={"/assets/home/17.png"} width={1000} height={1000} alt={"软件产品"} />
+          <Image className="mt-6" src={"/assets/home/16.jpg"} width={1000} height={1000} alt={"软件产品"}/>
+          <Image className="mt-6" src={"/assets/home/17.jpg"} width={1000} height={1000} alt={"软件产品"}/>
           <Link
-            href={"/products?keyword=软件产品"}
-            className="mt-6 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors w-fit">
+              href={"/products?keyword=软件产品"}
+              className="mt-6 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition-colors w-fit">
             了解更多
           </Link>
         </div>

+ 2 - 2
src/components/about/TopNav.tsx

@@ -9,7 +9,7 @@ function TopNav() {
       name: "公司简介",
       id: "section-0",
       img:"/assets/about/10.png",
-      activeImg:"/assets/about/2.png",
+      activeImg:"/assets/about/11.png",
     },
     {
       name: "发展历程",
@@ -43,7 +43,7 @@ function TopNav() {
   useEffect(() => {
     const handleScroll = () => {
       let current = ""
-      for (const item of arr) {
+      for (const item of arr) {6
         const section = document.getElementById(item.id)
         if (section) {
           const rect = section.getBoundingClientRect()