修改为动态页

src/components/DynamicComponent.astro

+---
+import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
+import ImgPro from '@/components/ImgPro.astro'
+
+const { type, ...leftProps } = Astro.props;
+
+---
+
+<Fragment>
+
+  { type == 'ImgPro' && <ImgPro {...leftProps} /> }
+  { type == 'LeftMiddleRightImgTextPro' && <LeftMiddleRightImgTextPro {...leftProps} /> }
+
+
+</Fragment>

src/data/zh/homepage.js

 
+export default [
+
+  {
+    type: 'ImgPro',    
+    imgProData: {
+      url: '//e.huawei.com/-/mediae/images/home/banner/jiasu-banner-pc1.jpg',
+      title: '加速行业智能化',
+      content:
+        '华为持续引领数智基础设施产品与解决方案创新，使能百模千态，赋能千行万业智能化转型',
+    },
+  }
+
+
+]
+
 export default {
   firstpage: {
     thumb: '../image/homepage/thumb1.png',

src/pages/[lang]/index.astro

 import Container from '@/components/Container.astro'
 import MediaCard from '@/components/MediaCard/MediaCard1.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
+import DynamicComponent from '@/components/DynamicComponent.astro'
+import type { Code, Debug } from 'astro:components'
 
 function getName(item = {}) {
   return (
 ---
 
 <Layout title="官网">
-  <ImgPro
+
+  {
+    list.map((item, index) => {
+      <DynamicComponent {...item} key={index} />
+    })
+  }
+
+
+  <!-- <ImgPro
     listOrData={list?.imgProData}
     ratio="16 / 9"
     titleSize="60px"
     listOrData={list?.caseList}
     componentTitle="案例展示"
   />
+
   <LeftMiddleRightImgTextPro
     listOrData={list?.informationList}
     componentTitle="最新资讯"
     btnBottomDisplay={true}
     bhref=`/${lang}/news`
-  />
-  <Container title="测试标题">
-    <div class="row" style="--bs-gutter-x: 48px">
-      <div class="col-md-4 col-sm-12 mt-4">
-        <MediaCard
-          link="http://www.baidu.com"
-          thumb="https://e.huawei.com/-/mediae/images/home/newsevents/news/news-20240314-2.jpg"
-          title="因聚而生 数智有为”华为举办中国合作伙伴大会2024"
-          subTitle="华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘"
-          more
-        />
-      </div>
-      <div class="col-md-4 col-sm-12 mt-4">
-        <MediaCard
-          thumb="https://e.huawei.com/-/mediae/images/home/newsevents/news/news-20240314-2.jpg"
-          title="因聚而生 数智有为”华为举办中国合作伙伴大会2024"
-          subTitle="华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘"
-        />
-      </div>
-      <div class="col-md-4 col-sm-12 mt-4">
-        <MediaCard
-          thumb="https://e.huawei.com/-/mediae/images/home/newsevents/news/news-20240314-2.jpg"
-          title="因聚而生 数智有为”华为举办中国合作伙伴大会2024"
-          subTitle="华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘"
-        />
-      </div>
-      <div class="col-md-4 col-sm-12 mt-md-5 mt-4">
-        <MediaCard
-          thumb="https://e.huawei.com/-/mediae/images/home/newsevents/news/news-20240314-2.jpg"
-          title="因聚而生 数智有为”华为举办中国合作伙伴大会2024"
-          subTitle="华为智能型边缘方案，云边协同、统一运维，打造敏捷智能的园区IT边缘"
-        />
-      </div>
-    </div>
-  </Container>
+  /> -->
 
   <Footer lang={lang} />
 </Layout>