修改内容结构样式

src/App.jsx

@@ -565,7 +565,7 @@ const products = [
   }
 ];
 
-const newsItems = [
+const newsTotal = [
   {
     title: "首批创新伙伴+牵头专题组！明树双身份亮相横琴 以 “数据 + AI” 赋能交通高质量发展",
     date: "2025-11-30",
@@ -793,6 +793,7 @@ DCMM（数据管理能力成熟度模型）作为我国数据管理领域的首
   }
 ];
 
+const newsItems = newsTotal.slice(0, 4);
 // --- Mock Case Data for Services (New function) ---
 const getServiceCases = (serviceName) => {
     const specificCases = {
@@ -1815,7 +1816,7 @@ const HomeSection = ({ setActiveTab, setSelectedScenario }) => {
                                 key={i} 
                                 onClick={() => setSelectedScenario(item)}
                                 className="min-w-[280px] md:min-w-[320px] snap-center h-[380px] group p-6 
-                                bg-gradient-to-b from-[#062C24] to-[#050505] hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
+                                hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
                                 border border-white/5
                                 hover:border-[#00FFC2]/40
                                 rounded-sm transition-all duration-500 ease-out
@@ -1975,6 +1976,7 @@ const App = () => {
   const [activeServiceTab, setActiveServiceTab] = useState('consulting');
   const [showCopyToast, setShowCopyToast] = useState(false); 
   const scrollContainerRef = useRef(null);
+  const [showNewsTotal, setShownewsTotal] = useState(false);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -2013,11 +2015,11 @@ const App = () => {
     buttons.forEach(button => button.remove());
     
     // 临时修改样式避免截图不全2
-    const rightContent = modalElement.querySelector('.md\\:overflow-y-auto');
+    const rightContent = modalElement.querySelector('.overflow-y-auto');
     
     modalElement.style.overflow = 'visible';
     if (rightContent) rightContent.style.overflow = 'visible';
-    modalElement.classList.remove("animate-fade-in-up")
+    modalElement.classList.remove("animate-fade-in-up", "h-[100dvh]", "md:max-h-[90vh]");
     document.body.appendChild(modalElement);
     // DOM转Canvas
     const canvas = await html2canvas(modalElement);
@@ -2030,7 +2032,11 @@ const App = () => {
       }
       const clipboardItem = new ClipboardItem({ 'image/png': blob });
       await navigator.clipboard.write([clipboardItem]);
-      alert('🎉 产品弹窗已转为图片并复制到剪贴板！\n可直接粘贴到微信聊天/朋友圈～');
+      setShowCopyToast(true);
+      setTimeout(() => {
+        setShowCopyToast(false);
+      }, 1500);
+      // alert('🎉 产品弹窗已转为图片并复制到剪贴板！\n可直接粘贴到微信聊天/朋友圈～');
     }, 'image/png', 1.0);
 
   } catch (error) {
@@ -2232,17 +2238,19 @@ const App = () => {
         return <HomeSection setActiveTab={setActiveTab} setSelectedScenario={setSelectedScenario} />;
       
       case 'data':
-        return (
-          <div className="animate-fade-in-up pt-24 pb-16">
-             <div className="container mx-auto px-6">
-                <div className="mb-12 text-center">
-                   <h2 className="text-3xl font-bold text-white mb-4">全链路数据要素服务</h2>
-                </div>
-                <DataPositioningSection />
-                <DataResourceGraph />
-             </div>
-          </div>
-        );
+        location.href = "/channel.html";
+        return ;
+        // return (
+        //   <div className="animate-fade-in-up pt-24 pb-16">
+        //      <div className="container mx-auto px-6">
+        //         <div className="mb-12 text-center">
+        //            <h2 className="text-3xl font-bold text-white mb-4">全链路数据要素服务</h2>
+        //         </div>
+        //         <DataPositioningSection />
+        //         <DataResourceGraph />
+        //      </div>
+        //   </div>
+        // );
 
       case 'scenarios':
         return (
@@ -2257,7 +2265,7 @@ const App = () => {
                       key={i} 
                       onClick={() => setSelectedScenario(item)}
                       className="min-w-[220px] h-[380px] group p-6 
-                      bg-gradient-to-b from-[#062C24] to-[#050505] hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
+                      hover:from-[#1c1f26] hover:to-[#1c1f26] backdrop-blur-md
                       border border-white/5
                       hover:border-[#00FFC2]/40
                       rounded-sm transition-all duration-500 ease-out
@@ -2537,7 +2545,32 @@ const App = () => {
         );
 
       case 'about':
-        return (
+        return showNewsTotal ? (
+          <div className="pt-24 pb-16 container mx-auto px-6 max-w-5xl animate-fade-in-up">
+            <div>
+                  <h2 className="text-3xl font-bold text-white mb-12 text-center">公司动态</h2>
+                  <div className="mb-5 flex justify-end">
+                    <button onClick={() => setShownewsTotal(false)} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
+                        返回 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
+                    </button>
+                  </div>
+                  <div className="grid grid-cols-2 gap-8">
+                      {newsTotal.map((news, i) => (
+                          <div key={i} onClick={() => setSelectedNews(news)} className="flex flex-col md:flex-row gap-6 bg-[#16181d] border border-white/5 p-6 rounded-lg hover:border-[#00FFC2]/30 transition-all group cursor-pointer">
+                              <div className="flex-1 flex flex-col justify-center">
+                                  <h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#00FFC2] transition-colors">{news.title}</h3>
+                                  <div className="flex items-center gap-3 mb-2">
+                                      <span className="text-[#00FFC2] text-xs border border-[#00FFC2]/30 px-2 py-0.5 rounded">{news.category}</span>
+                                      <span className="text-gray-500 text-xs">{news.date}</span>
+                                  </div>
+                                  <p className="text-gray-400 text-sm line-clamp-2">{news.content}</p>
+                              </div>
+                          </div>
+                      ))}
+                  </div>
+              </div>
+          </div>
+        ) : (
              <div className="pt-24 pb-16 container mx-auto px-6 max-w-5xl animate-fade-in-up">
                  <div className="text-center mb-16">
                      <h2 className="text-3xl font-bold text-white mb-8">关于我们</h2>
@@ -2619,6 +2652,11 @@ const App = () => {
                  {/* News Section */}
                  <div>
                      <h2 className="text-3xl font-bold text-white mb-12 text-center">公司动态</h2>
+                     <div className="mb-5 flex justify-end">
+                        <button onClick={() => setShownewsTotal(true)} className="text-gray-400 hover:text-[#00FFC2] text-sm flex items-center gap-1 transition-colors group">
+                            查看更多 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform"/>
+                        </button>
+                     </div>
                      <div className="grid gap-8">
                          {newsItems.map((news, i) => (
                              <div key={i} onClick={() => setSelectedNews(news)} className="flex flex-col md:flex-row gap-6 bg-[#16181d] border border-white/5 p-6 rounded-lg hover:border-[#00FFC2]/30 transition-all group cursor-pointer">
@@ -2871,7 +2909,7 @@ const App = () => {
 
                 <div className="p-4 md:p-6 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-3 md:gap-4 shrink-0">
                     <div className="flex items-center gap-3 md:gap-4">
-                         <img src="https://api.qrserver.com/v1/create-qr-code/?size=100x100&data=BridataNews" alt="QR" className="w-9 h-9 md:w-12 md:h-12 bg-white p-0.5 md:p-1 rounded-sm" />
+                         <img src={codeImg} alt="QR" className="w-9 h-9 md:w-12 md:h-12 bg-white p-0.5 md:p-1 rounded-sm" />
                          <div>
                             <div className="text-white font-bold text-xs md:text-sm">关注明树数据</div>
                             <div className="text-gray-500 text-xs">获取更多资讯</div>