merge

src/components/Footer.astro

           href="/"
           class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"
         >
-          <img class="bi me-2" width="120" src="../logo.png" />
+          <img class="bi me-2" width="120" src="/public/logo.png" />
         </a>
         <p class="text-body-secondary">© 2024</p>
       </div>

src/components/ImgPro.astro

+---
+import Img from '@/components/children/Img.astro'
+import Text from '@/components/children/Text.astro'
+
+const {
+  data,
+  url,
+  ratio,
+  btnDisplay,
+  titleSize,
+  childrenSize,
+  textWeight,
+  ellipsis,
+  position,
+} = Astro.props
+---
+
+<!-- 图片Pro版 -->
+<div class="box">
+  <Img url={data?.url} ratio={ratio} />
+  <Text
+    data={data}
+    btnDisplay={btnDisplay}
+    titleSize={titleSize}
+    childrenSize={childrenSize}
+    textWeight={textWeight}
+    ellipsis={ellipsis}
+    position={position}
+  />
+</div>
+<style>
+  .box {
+    position: relative;
+    text-align: center;
+  }
+</style>

src/components/LeftImgRightText.astro

 ---
-const { json, lang, list } = Astro.props
+const { json, lang, listOrData } = Astro.props
 import Img from '@/components/children/Img.astro'
 import Text from '@/components/children/Text.astro'
-// const value = {
-//   id: '1',
-//   url: 'https://e.huawei.com/-/mediae/images/solutions/computing/ascend-computing/ascend-computing-case-1.jpg',
-//   title: '制造、AI开发平台 AI淬炼传统经验，让美味代代相传',
-//   content:
-//     '为生产优质香料和调料，提高公司竞争力，HEXA FOOD走上了数字化转型之路。通过使用华为云ModelArts一站式AI开发平台和Atlas 500智能小站，实现了辣椒智能分拣，筛选出优质原料，大幅提升了香料生产效率和品质',
-// }
+console.log('-----listOrData22----->', listOrData)
 ---
 
 <!-- 左图右文 -->
 <div class="container">
   <div class="row">
-    <div class="col-sm-12 col-md-12 my-5">
-      <div class="card border-0">
-        <div
-          class="left-right-card"
-          style={list?.id ? 'cursor: pointer' : ''}
-          data-post={list?.id}
-        >
-          <div class="row g-0">
-            <div class="col-md-6 col-sm-6">
-              <Img url={list?.url} ratio="3 / 2" />
-            </div>
-            <div class="col-md-6 col-sm-6">
-              <div class="card-body pt-0 px-5">
-                <Text
-                  list={list}
-                  btnDisplay={true}
-                  ellipsis="line-ellipsis-large"
-                />
+    {
+      listOrData?.map((item, index) => (
+        <div class="col-sm-12 col-md-12 my-5">
+          <div class="card border-0">
+            <div
+              class="left-right-card"
+              style={item?.id ? 'cursor: pointer' : ''}
+              data-post={item?.id}
+            >
+              <div class="row g-0">
+                <div class="col-md-6 col-sm-6">
+                  <Img url={item?.url} ratio="3 / 2" />
+                </div>
+                <div class="col-md-6 col-sm-6">
+                  <div class="card-body pt-0 px-5">
+                    <Text
+                      data={item?.children}
+                      btnDisplay={true}
+                      ellipsis="line-ellipsis-large"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
+      ))
+    }
   </div>
 </div>
 <style></style>

src/components/LeftMiddleRightImgText.astro

 ---
-const { json, lang, list, componentTitle } = Astro.props
+const { json, lang, listOrData, componentTitle } = Astro.props
 import Img from '@/components/children/Img.astro'
 import Text from '@/components/children/Text.astro'
 ---
   <div class="fs-1 text-center mt-5">{componentTitle}</div>
   <div class="row row-cols-md-3 row-cols-sm-1">
     {
-      list?.map((item, index) => (
+      listOrData?.map((item, index) => (
         <div class="col-md-4 col-sm-12 my-5" id={item.id}>
           <div
             class="title-img"
                   />
                 </div>
                 <Text
-                  list={item?.children}
+                  data={item?.children}
                   btnDisplay={true}
                   ellipsis="line-ellipsis-small"
                 />

src/components/LeftOneRightFourImg.astro

                     transformEnlarge="transformEnlarge"
                   />
                 </div>
-                <Text list={item?.children} ellipsis="line-ellipsis-small" />
+                <Text data={item?.children} ellipsis="line-ellipsis-small" />
               </div>
             </div>
           ))

src/components/LeftRightCarousel.astro

 ]
 ---
 
-<!-- 左右轮播图 -->
-<Carousel list={list} Children={LeftImgRightText} />
-
+<!-- 左右轮播图 --><!-- <Carousel list={list} Children={LeftImgRightText} /> -->
 <style></style>

src/components/VerticalNavigationContent.astro

                 {item?.children?.map((item, index) => (
                   <div class="col-md-4" id={index}>
                     <Text
-                      list={item}
+                      data={item}
                       ellipsis="line-ellipsis-small"
                       btnDisplay={true}
                     />

src/components/children/Carousel.astro

                     data-post={it.id}
                   >
                     <div class="card border-0" />
-                    <Children list={it} componentTitle={componentTitle} />
+                    <Children listOrData={it} componentTitle={componentTitle} />
                   </div>
                 </div>
               ))}

src/components/children/Img.astro

 ---
-const { url, ratio, circle, transformEnlarge } = Astro.props
+const { url, ratio, transformEnlarge } = Astro.props
 ---
 
 <!-- 图片 -->
 <img
   src={url}
-  class=`img-fluid object-fit-cover ${circle} ${transformEnlarge}`
+  class=`img-fluid object-fit-cover ${transformEnlarge}`
   style=`aspect-ratio:${ratio}`
   alt=""
 />

src/components/children/Text.astro

 ---
 const {
-  list,
+  data,
   titleSize = 'fs-4',
   childrenSize,
   textColor,
 
 <!-- 文本 -->
 <div class=`${position}`>
-  <p class=`${titleSize} ${textWeight} mb-0 pt-5`>{list?.title}</p>
+  <p class=`${titleSize} ${textWeight} mb-0 pt-5`>{data?.title}</p>
   <!-- <p class="fs-4">打造全球首个“岛式”精益智造工厂</p> -->
   {textUnderline && <div class="text-underline" />}
 
-  <p class=`text-secondary ${childrenSize} ${ellipsis} pt-1`>{list?.content}</p>
-  {
-    btnDisplay && (
-      <button type="button" class="btn btn-outline-danger rounded-5">
-        了解更多
-      </button>
-    )
-  }
+  <p class=`text-secondary ${childrenSize} ${ellipsis} pt-1`>{data?.content}</p>
+  {btnDisplay && <a class="fs-5 a-link">了解更多</a>}
 </div>
 
 <style>
     left: 50%;
     transform: translate(-50%, -50%);
   }
+  .a-link {
+    padding: 12px 28px;
+    border: 2px solid red;
+    border-radius: 25px;
+    text-decoration: none;
+    color: red;
+    cursor: pointer;
+  }
+  /* .a-link:hover {
+    color: white;
+    background-color: red;
+  } */
 </style>

src/pages/[lang]/index.astro

 import Layout from '@/layouts/Layout.astro'
 import Footer from '@/components/Footer.astro'
 import Navbar from '@/components/Navbar.astro'
-import FirstScreen from 'src/pages/components/FirstScreen.astro'
+import ImgPro from '@/components/ImgPro.astro'
 import LeftOneRightFourImg from '@/components/LeftOneRightFourImg.astro'
 import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
 import Carousel from '@/components/children/Carousel.astro'
 )
 const title = getName(categary)
 
-const firstScreenList = {
+const imgProData = {
+  url: '//e.huawei.com/-/mediae/images/home/banner/jiasu-banner-pc1.jpg',
   title: '加速行业智能化',
   content:
     '华为持续引领数智基础设施产品与解决方案创新，使能百模千态，赋能千行万业智能化转型',
 <Layout title={title}>
   <NavMenu lang={lang} client:load />
 
-  <!-- 首屏图 -->
-  <FirstScreen data={pageData.firstpage} />
+  <ImgPro
+    data={imgProData}
+    ratio="16 / 9"
+    btnDisplay={true}
+    titleSize="fs-1"
+    childrenSize="fs-4"
+    textWeight="fw-bold"
+    ellipsis="line-ellipsis-small"
+    position="positionBottom"
+  />
 
   <!-- 三列图文轮播图 -->
   <Carousel
     Children={LeftMiddleRightImgText}
   />
 
-  <LeftMiddleRightImgText componentTitle="案例展示" list={caseList} />
-  <LeftMiddleRightImgText componentTitle="最新资讯" list={informationList} />
+  <LeftMiddleRightImgText componentTitle="案例展示" listOrData={caseList} />
+  <LeftMiddleRightImgText
+    componentTitle="最新资讯"
+    listOrData={informationList}
+  />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/lot/building/index.astro

+---
+import Layout from '@/layouts/Layout.astro'
+import NavMenu from '@/components/NavMenu/index.jsx'
+import Img from '@/components/children/Img.astro'
+import LeftImgRightText from '@/components/LeftImgRightText.astro'
+import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
+import Carousel from '@/components/children/Carousel.astro'
+import ImgPro from '@/components/ImgPro.astro'
+import Footer from '@/components/Footer.astro'
+
+const { lang = 'zh' } = Astro.params
+
+const data = [
+  {
+    id: '1',
+    url: 'https://e.huawei.com/-/mediae/images/solutions/computing/ascend-computing/ascend-computing-case-2.jpg',
+    title: '重新定义园区',
+    content:
+      '依托新ICT技术，华为打造园区产品组合方案，重新定义园区，最终实现终端互联、数据融合、业务汇聚。重新定义园区网络：多线合一、有线变无线，将15张网简化为4种网络技术',
+  },
+]
+const imgProData = {
+  url: '//e.huawei.com/-/mediae/images/solutions/campus/campus/secondbanner-pc.jpg',
+  title: '加速行业智能化',
+  content:
+    '华为持续引领数智基础设施产品与解决方案创新，使能百模千态，赋能千行万业智能化转型',
+}
+
+const informationList = [
+  {
+    id: '1',
+    url: 'https://e.huawei.com/-/mediae/images/solutions/campus/office-network/office-network-banner-bequoted.png',
+    children: {
+      title: '极简办公网',
+      content: '三层变两层，轻量化运维，打造园区办公网络致简体验',
+    },
+  },
+  {
+    id: '2',
+    url: 'https://e.huawei.com/-/mediae/images/solutions/campus/sdwan/sdwan-banner-bequoted.jpg',
+    children: {
+      title: '总部分支互联',
+      content:
+        '华为总部分支互联方案，应对传统网络架构封闭、业务体验难保障、运维困难所带来的挑战，随时随地安全接入。',
+    },
+  },
+  {
+    id: '3',
+    url: 'https://e.huawei.com/-/mediae/images/solutions/campus/converged-production-network/banner-bequoted.png',
+    children: {
+      title: '融合生产网',
+      content: '数字化生产需要高可靠、无线化、工业级的网络联接能力',
+    },
+  },
+]
+
+const carouselList = [
+  [
+    [
+      {
+        id: '1',
+        url: 'https://e.huawei.com/-/mediae/images/case-studies/industries/education/2022/southeast-university-smart-campus/banner-bequoted1.jpg',
+        children: {
+          title: '东南大学：携手华为打造“数智东南”信息高速公路',
+          content:
+            '“升级后的Wi-Fi网络感觉确实挺好的，信号穿透力更强，在宿舍不同位置信号很强；连接很稳定，在高峰期时期也再不会出现突然掉线了。让人感觉最直接的还是网络带宽的提升，让直播课程流畅了很多，使用网盘下载文件时比过去快了好几倍。”',
+        },
+      },
+    ],
+  ],
+  [
+    [
+      {
+        id: '2',
+        url: 'https://e.huawei.com/-/mediae/images/case-studies/solutions/campus/2023/chongqing-lianglu-guoyuan-port/banner-bequoted.jpg',
+        children: {
+          title:
+            '重庆两路果园港综合保税区：绿色、生态、环保、城景融合的智慧园区',
+          content:
+            '国贸会展集团携手华为打造智慧会展中心，以ICT基础设施为支撑，以安全保障能力为基础，以运营管理能力、服务体验能力和数据运营能力为核心，带来智慧会展全新体验。',
+        },
+      },
+    ],
+  ],
+]
+---
+
+<Layout>
+  <NavMenu lang={lang} client:load />
+  <Img
+    url="//e.huawei.com/-/mediae/images/solutions/campus/campus/banner-pc.jpg"
+    ratio="3 / 1"
+  />
+  <LeftImgRightText listOrData={data} />
+  <ImgPro
+    data={imgProData}
+    ratio="3 / 1"
+    btnDisplay={true}
+    titleSize="fs-1"
+    childrenSize="fs-4"
+    textWeight="fw-bold"
+    ellipsis="line-ellipsis-small"
+    position="positionMiddle"
+  />
+  <LeftMiddleRightImgText
+    componentTitle="场景化解决方案"
+    listOrData={informationList}
+  />
+  <Carousel
+    componentTitle="成功案例"
+    list={carouselList}
+    Children={LeftImgRightText}
+  />
+  <Footer lang={lang} />
+</Layout>