merge

src/components/ImgPro.astro

 ---
 import Img from '@/components/children/Img.astro'
-import Text from '@/components/children/Text.astro'
+import Text4 from '@/components/children/Text4.astro'
 
 const {
   listOrData,
   url,
-  ratio,
-  btnDisplay,
-  titleSize,
-  childrenSize,
-  textWeight,
-  ellipsis,
+  ratio = '3 / 1',
   position,
-  titleColor,
-  contentColor,
   href,
-  titleHeight,
-  pt,
-  contentLineHeight,
   imgMb,
   ...right
 } = Astro.props
 <!-- 图片Pro版 -->
 <div class=`box mb-${imgMb}`>
   <Img listOrData={listOrData} ratio={ratio} />
-  <Text
-    contentLineHeight={contentLineHeight}
-    pt={pt}
-    titleHeight={titleHeight}
-    listOrData={listOrData}
-    btnDisplay={btnDisplay}
-    titleSize={titleSize}
-    childrenSize={childrenSize}
-    textWeight={textWeight}
-    ellipsis={ellipsis}
-    position={position}
-    titleColor={titleColor}
-    contentColor={contentColor}
-    href={href}
-    {...right}
-  />
+  <Text4 listOrData={listOrData} position={position} href={href} {...right} />
 </div>
 <style>
   .box {

src/components/LeftImgRightText.astro

   ...right
 } = Astro.props
 import Img from '@/components/children/Img.astro'
-import Text from '@/components/children/Text.astro'
+import Text5 from '@/components/children/Text5.astro'
 ---
 
 <!-- 左图右文 -->
 <div class=`${componentsBg}`>
   <div class="container pb-5">
-    <div class="text-center pt-5" id={componentTitle} style="font-size:48px">
+    <div
+      class="text-center pt-5 left-img-right-text-title"
+      id={componentTitle}
+      style="font-size:48px"
+    >
       {componentTitle}
     </div>
     {
                   </div>
                   <div class="col-md-6 col-sm-6">
                     <div class="card-body">
-                      <Text
-                        listOrData={item?.children}
-                        btnDisplay={btnDisplay}
-                        ellipsis="line-ellipsis-large"
-                        {...right}
-                      />
+                      <Text5 listOrData={item?.children} {...right} />
                     </div>
                   </div>
                 </div>
   </div>
 </div>
 <style>
+  @media (max-width: 768px) {
+    .left-img-right-text-title {
+      font-size: 36px !important;
+    }
+  }
   .text-underline {
     display: inline-block;
     width: 100px;

src/components/LeftMiddleRightText.astro

 <div class=`${componentsBg}`>
   <div class="container">
     <div
-      class=`${titleTextAlign} pt-5`
+      class=`${titleTextAlign} pt-5 left-middle-right-text-title`
       style="font-size:48px"
       id={componentTitle}
     >
   </div>
 </div>
 <style>
+  @media (max-width: 768px) {
+    .left-middle-right-text-title {
+      font-size: 36px !important;
+    }
+  }
   .text-underline {
     display: inline-block;
     width: 100px;

src/components/NavSubMenu.astro

+---
+const { lang = 'zh', list } = Astro.props
+---
+
+<div class="container" style="margin-top: 120px;">
+  <div class="row g-5 pb-5 justify-content-center">
+    {
+      list?.map((item, index) => (
+        <div class="col-md-3 col-sm-12" id={item.id}>
+          <div
+            class="card border-0 text-center my-1"
+            style="background-color:#f8f8f8;"
+          >
+            <a
+              class="inline-block p-5 link-dark menu-a"
+              href={`/${lang}${item.href}`}
+              style="font-size: 28px;"
+            >
+              <div class="pb-4">
+                <img
+                  src={`${item.url}`}
+                  style="width: 5vw;"
+                  class="products-solutions-md-img"
+                />
+              </div>
+              {item.title}
+              <div class="menu-content pt-3">{item.subTitle}</div>
+            </a>
+          </div>
+        </div>
+      ))
+    }
+  </div>
+</div>
+
+<style>
+  @media (max-width: 768px) {
+    .products-solutions-md-img {
+      width: 15vw !important;
+    }
+  }
+  .menu-a {
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .menu-content {
+    font-size: 16px;
+    line-height: 1.95;
+    color: #666;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+</style>

src/components/Title/PartTitle.astro

 </h1>
 
 <style lang="less">
+  @media (max-width: 768px) {
+    .part-title {
+      font-size: 36px !important;
+    }
+  }
   .part-title {
     font-size: 48px;
     line-height: 1.5;

src/components/Title/SubTitle.astro

 }
 ---
 
-<p class:list={['text-secondary lh-lg', className]} style={style}>
+<p
+  class:list={['text-secondary lh-lg', className]}
+  style={style}
+  class="sub-title--p"
+>
   {text}
 </p>
+<style>
+  @media (max-width: 768px) {
+    .sub-title--p {
+      height: 24vw !important;
+    }
+  }
+</style>

src/components/VerticalNavigationContent.astro

 <div class=`${componentsBg}`>
   <div class="container">
     <div
-      class={`${titleTextAlign} pt-5`}
+      class={`${titleTextAlign} pt-5 vertical-navigation-content-title`}
       style="font-size: 48px;"
       id={componentTitle}
     >
   </div>
 </div>
 <style>
-  /* .vertical-a {
-    width: 100%;
-    display: -webkit-box;
-    height: 2.2em;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  } */
+  @media (max-width: 768px) {
+    .vertical-navigation-content-title {
+      font-size: 36px !important;
+    }
+  }
   .nav-link {
     color: #787878;
   }

src/components/children/Carousel.astro

 <!-- 轮播 -->
 <div class=`py-5 ${componentsBg}` style="position:relative;">
   <div class="container">
-    <div class={`${titleTextAlign}`} style="font-size:48px" id={componentTitle}>
+    <div
+      class={`${titleTextAlign} carousel-title`}
+      style="font-size:48px"
+      id={componentTitle}
+    >
       {componentTitle}
     </div>
     <div class={`${textAlign}`}><div class="text-underline"></div></div>
   </div>
 </div>
 <style>
+  @media (max-width: 768px) {
+    .carousel-title {
+      font-size: 36px !important;
+    }
+  }
   .text-underline {
     display: inline-block;
     width: 100px;

src/components/children/Text.astro

 ---
 const {
   listOrData,
-  titleSize = '28',
-  childrenSize = '16',
-  contentColor = 'text-secondary',
-  textWeight,
-  ellipsis,
-  btnDisplay = true,
-  btn2,
-  textUnderline,
-  position,
+  contentTextSize = '16',
+  textWeight = 'fw-bold',
   titleColor,
-  href = '#',
-  titleHeight = '2.8',
-  contentHeight = '7',
-  lineHeight,
   contentLineHeight = '1.95',
-  pt = '1',
-  px = '0',
-  top = '60',
-  backgroundColor,
-  aMb,
-  rounded,
-  pLine = 'title-line-ellipsis',
-  isContent = true,
-  pMb,
-  subPmb,
-  animation,
-  textP,
+  contentTextPt = '1',
+  textBoxPx = '0',
+  textpmb,
+  contenttextpmb,
+  boxtextpb,
+  contentTextColor = '#666',
 } = Astro.props
-import LinkBtn2 from '@/components/Button/LinkBtn2.astro'
 ---
 
-<!-- 文本 -->
-<div
-  class=`${position} px-${px} rounded-${rounded} ${animation} pb-${textP} textHover`
-  style=`top:${top}%!important;background-color:${backgroundColor};line-height:${lineHeight}`
->
+<!-- 联系我们文本 -->
+<div class=`px-${textBoxPx} pb-${boxtextpb}`>
   <p
-    class=`${textWeight} ${titleColor} mb-0 pt-5 ${pLine} mb-${pMb}`
-    style=`font-size:${titleSize}px;height:${titleHeight}em;`
+    class=`${textWeight} ${titleColor} mb-0 pt-5 title-text-line-ellipsis mb-${textpmb} p-title`
   >
     {listOrData?.title}
   </p>
-  {textUnderline && <div class="text-underline" />}
-  {
-    isContent && (
-      <p
-        class={`${ellipsis} pt-${pt} p-content mb-${subPmb}`}
-        style={`font-size:${childrenSize}px;color:#666;line-height:${contentLineHeight};height:${contentHeight}em;`}
-      >
-        {listOrData?.content}
-      </p>
-    )
-  }
-  {
-    btnDisplay && (
-      <a class={`a-link mb-${aMb}`} href={`${href}`}>
-        了解更多
-      </a>
-    )
-  }
-  {btn2 && <LinkBtn2>了解更多</LinkBtn2>}
+
+  <p
+    class={`content-text-ellipsis pt-${contentTextPt} p-content mb-${contenttextpmb}`}
+    style={`font-size:${contentTextSize}px;color:${contentTextColor};line-height:${contentLineHeight};`}
+  >
+    {listOrData?.content}
+  </p>
 </div>
 
 <style>
+  @media (max-width: 768px) {
+    /* .p-title {
+    } */
+  }
   @media (max-width: 768px) {
     .p-content {
       font-size: 1rem !important;
+      height: 24vw !important;
     }
   }
-  .text-underline {
-    width: 100px;
-    border-bottom: 2px solid #c7000b;
-    margin-left: 50px;
-    margin-bottom: 1em;
-  }
-  .titleLineEllipsis2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .title-line-ellipsis {
+  .title-text-line-ellipsis {
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 24px;
   }
-  .line-ellipsis-small {
+  .content-text-ellipsis {
     display: -webkit-box;
-    height: 7em;
+    height: 6em;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
   }
-  .line-ellipsis-large {
-    display: -webkit-box;
-    height: 17em;
-    -webkit-line-clamp: 8;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  .positionMiddle {
-    position: absolute;
-    top: 60%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-  .positionBottom {
-    position: absolute;
-    top: 68%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-  .a-link {
-    display: inline-block;
-    font-size: 16px;
-    padding: 11px 28px;
-    border: 2px solid #c7000b;
-    border-radius: 25px;
-    text-decoration: none;
-    color: #c7000b;
-    cursor: pointer;
-  }
-  .a-link:hover {
-    background-color: #c7000b;
-    color: white;
-  }
-  .animation {
-    border: 1px solid white;
-  }
-  .animation:hover {
-    border: 1px solid #ddd;
-    cursor: pointer;
-  }
 </style>

src/components/children/Text2.astro

 } = Astro.props
 ---
 
-{
+<!-- logo文本 -->{
   listOrData?.map((item, index) => (
     <div id={`${item.id}`}>
       <div class="text-center pt-5">
-        <img src={item?.url} style="width: 5vw;" />
+        <img src={item?.url} style="width: 5vw;" class="logoimg" />
       </div>
       <p
         class={`mb-0 pt-4 title-line-ellipsis text-center`}
 }
 
 <style>
+  @media (max-width: 768px) {
+    .logoimg {
+      width: 15vw !important;
+    }
+  }
   .line-ellipsis-small {
     display: -webkit-box;
     -webkit-line-clamp: 1;

src/components/children/Text3.astro

+---
+const {
+  listOrData,
+  titleLineHeight = '1.8',
+  titleSize = 20,
+  boxpx = '5',
+  backgroundColor = '#f8f8f8',
+  titlepmb = '3',
+  boxpb = '5',
+  titleHeight = '6',
+  boxrounded = '3',
+} = Astro.props
+import LinkBtn2 from '@/components/Button/LinkBtn2.astro'
+---
+
+<!-- 相关资源的文本组件 -->
+<div
+  class=`px-${boxpx} animation pb-${boxpb} rounded-${boxrounded}`
+  style=`background-color:${backgroundColor};`
+>
+  <p
+    class=` mb-0 pt-5 verticalTitleLineEllipsis mb-${titlepmb} p-title`
+    style=`font-size:${titleSize}px;line-height:${titleLineHeight};height:${titleHeight}em;`
+  >
+    {listOrData?.title}
+  </p>
+  <LinkBtn2>了解更多</LinkBtn2>
+</div>
+
+<style>
+  .verticalTitleLineEllipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .animation {
+    border: 1px solid white;
+  }
+  .animation:hover {
+    border: 1px solid #ddd;
+    cursor: pointer;
+  }
+</style>

src/components/children/Text4.astro

+---
+const {
+  listOrData,
+  titleSize = '52px',
+  childrenSize = '24',
+  textWeight,
+  position = 'positionMiddle',
+  titleHeight = '2.5em',
+  singlecontentHeight = '7',
+  singlept = '0',
+  singlepx = '0',
+  top = '50',
+  singlecolor = '#666',
+} = Astro.props
+---
+
+<!-- 单图文本 -->
+<div class=`${position} px-${singlepx}` style=`top:${top}%!important;`>
+  <p class=`${textWeight} mb-0 pt-5 title-line-ellipsis p-title`>
+    {listOrData?.title}
+  </p>
+  <p
+    class={`line-ellipsis-small pt-${singlept} p-content`}
+    style={`font-size:${childrenSize}px;color:${singlecolor};height:${singlecontentHeight}em;`}
+  >
+    {listOrData?.content}
+  </p>
+</div>
+
+<style define:vars={{ pTitleSize: titleSize, pTitleHeight: titleHeight }}>
+  @media (max-width: 768px) {
+    .p-title {
+      font-size: 36px !important;
+      height: 3em !important;
+    }
+  }
+  @media (max-width: 768px) {
+    .p-content {
+      font-size: 1rem !important;
+      height: 18vw !important;
+    }
+  }
+  .title-line-ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: var(--pTitleSize);
+    height: var(--pTitleHeight);
+  }
+  .line-ellipsis-small {
+    display: -webkit-box;
+    height: 7em;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .positionMiddle {
+    position: absolute;
+    top: 60%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .positionBottom {
+    position: absolute;
+    top: 68%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+</style>

src/components/children/Text5.astro

+---
+const {
+  listOrData,
+  rightpt = '4',
+  rightpx = '5',
+  rightpmb = '5',
+  rightContentColor = '#666',
+} = Astro.props
+import LinkBtn2 from '@/components/Button/LinkBtn2.astro'
+---
+
+<!-- 左右图文文本 -->
+<div class=`px-${rightpx}`>
+  <p class=`mb-0 pt-5 right-title-line-ellipsis right-md-p-title`>
+    {listOrData?.title}
+  </p>
+  <p
+    class={`right-content-line-ellipsis pt-${rightpt} right-md-p-content mb-${rightpmb}`}
+    style={`color:${rightContentColor};`}
+  >
+    {listOrData?.content}
+  </p>
+  <LinkBtn2>了解更多</LinkBtn2>
+</div>
+
+<style>
+  @media (max-width: 768px) {
+    .right-md-p-title {
+      /* font-size: 36px !important;
+      height: 3em !important; */
+    }
+  }
+  @media (max-width: 768px) {
+    .right-md-p-content {
+      /* font-size: 1rem !important;
+      height: 20vw !important; */
+    }
+  }
+  .right-title-line-ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 34px;
+  }
+  .right-content-line-ellipsis {
+    display: -webkit-box;
+    font-size: 16px;
+    height: 17em;
+    -webkit-line-clamp: 8;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.95;
+  }
+</style>

src/pages/[lang]/about/index.astro

 ---
 import Layout from '@/layouts/Layout.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
+import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import ImgPro from '@/components/ImgPro.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 const informationList2 = [
   {
     id: '1',
-    url: '/public/image/building/control.png',
-    children: {
-      title: '案例统计',
-      content:
-        '案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计',
-    },
+    link: 'http://www.baidu.com',
+    thumb: '/public/image/building/control.png',
+    title: '案例统计',
+    subTitle:
+      '案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计',
   },
   {
     id: '2',
-    url: '/public/image/building/identify.png',
-    children: {
-      title: '案例统计',
-      content:
-        '案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计',
-    },
+    link: 'http://www.baidu.com',
+    thumb: '/public/image/building/identify.png',
+    title: '案例统计',
+    subTitle:
+      '案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计',
   },
   {
     id: '3',
-    url: '/public/image/building/identify.png',
-    children: {
-      title: '案例统计',
-      content:
-        '案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计',
-    },
+    link: 'http://www.baidu.com',
+    thumb: '/public/image/building/identify.png',
+    title: '案例统计',
+    subTitle:
+      '案例统计案例统计案例统计案例统计案例统计案例统计案例统计案例统计',
   },
 ]
 const imgProData2 = {
 ---
 
 <Layout title="关于云致">
-  <ImgPro
-    contentLineHeight="1.5"
-    titleHeight="2.5"
-    listOrData={imgProData}
-    titleColor="text-dark"
-    contentColor="text-secondary"
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftImgRightText
     listOrData={data}
     componentTitle="发展背景"
     textAlign="text-center"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
-  <LeftMiddleRightImgText
+  <LeftMiddleRightImgTextPro
     componentTitle="案例统计"
     listOrData={informationList2}
-    textAlign="text-center"
-    titleHeight="3.2"
-    pt="4"
-    px="5"
     componentsBg="bg-img"
-    subPmb="5"
-  />
-  <ImgPro
-    listOrData={imgProData2}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    top="50"
-    imgMb="5"
-  />
-  <ImgPro
-    listOrData={imgProData3}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    top="50"
   />
+  <ImgPro listOrData={imgProData2} imgMb="5" />
+  <ImgPro listOrData={imgProData3} imgMb="5" />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/concat-us/index.astro

 const text = [
   {
     title: '技术支持',
-    content: '提交项目需求这一块那一块',
+    content: '提交项目需求这一块那一块一块',
   },
   {
     title: '云致合作伙伴咨询',
           text.map((item, index) => (
             <div class="col-md-5">
               <div class="card border-0 ps-4 pb-4">
-                <Text
-                  textWeight="fw-bold"
-                  titleSize="24"
-                  ellipsis="line-ellipsis-small"
-                  titleHeight="'3.2"
-                  listOrData={item}
-                  btnDisplay={false}
-                />
+                <Text listOrData={item} />
               </div>
             </div>
           ))

src/pages/[lang]/detail/BuildingDetail.astro

----
-import Layout from '@/layouts/Layout.astro'
-import ImgPro from '@/components/ImgPro.astro'
-import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
-import Img from '@/components/children/Img.astro'
-import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
-import ScrollingNavbar from '@/components/ScrollingNavbar.astro'
-import Footer from '@/components/Footer.astro'
-
-const { lang = 'zh' } = Astro.params
-
-const sNav = ['使能百模千态', '智算万数', '智联万物']
-
-const imgProData = {
-  url: '//e.huawei.com/-/mediae/images/solutions/campus/campus/banner-pc.jpg',
-  title: '智慧楼宇',
-  content: '楼宇智能化',
-}
-
-const informationList2 = [
-  {
-    id: '1',
-    url: '/public/image/building/detail/lighting.png',
-    children: {
-      title: '智能照明',
-    },
-  },
-  {
-    id: '2',
-    url: '/public/image/building/detail/havc.png',
-    children: {
-      title: '智能暖通',
-    },
-  },
-  {
-    id: '3',
-    url: '/public/image/building/detail/control.png',
-    children: {
-      title: '能耗管控',
-    },
-  },
-]
----
-
-<Layout title="智慧楼宇详情">
-  <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleSize="fs-1"
-    childrenSize="fs-4"
-    textWeight="fw-bold"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-  />
-  <LeftMiddleRightImgText
-    componentTitle="智能识别便捷通行"
-    listOrData={informationList2}
-    textAlign="text-center"
-  />
-  <Footer lang={lang} />
-</Layout>

src/pages/[lang]/detail/FirstScreenDetail.astro

----
-import Layout from '@/layouts/Layout.astro'
-import ImgPro from '@/components/ImgPro.astro'
-import Img from '@/components/children/Img.astro'
-import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
-import ScrollingNavbar from '@/components/ScrollingNavbar.astro'
-import Footer from '@/components/Footer.astro'
-
-const { lang = 'zh' } = Astro.params
-
-const sNav = ['使能百模千态', '智算万数', '智联万物']
-
-const imgProData = {
-  url: '//e.huawei.com/-/mediae/images/home/banner/jiasu-banner-pc1.jpg',
-  title: '首屏详情页',
-  content: '首屏详情页首屏详情页首屏详情页首屏详情页首屏详情页',
-}
-const leftImgRightTextData = [
-  {
-    id: '1',
-    url: 'https://e.huawei.com/topic/sitecore/new-value-together/img/architecture/jiagoutu-cn.png',
-    children: {
-      title: '首屏详情页左图右文',
-      content:
-        '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字',
-    },
-  },
-]
-
-const leftImgRightTextData2 = [
-  {
-    id: '1',
-    url: 'https://e.huawei.com/topic/sitecore/new-value-together/img/zhilian-everything/img-03.jpg',
-    children: {
-      title: '首屏详情页左图右文',
-      content:
-        '文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字',
-    },
-  },
-]
-const list = [
-  {
-    id: '1',
-    tabName: '盘古大模型',
-    children: [
-      {
-        url: 'https://e.huawei.com/topic/sitecore/new-value-together/img/intelligent-calculation/pangu.jpg',
-      },
-    ],
-  },
-  {
-    id: '2',
-    tabName: '云致云',
-    children: [
-      {
-        url: 'https://e.huawei.com/topic/sitecore/new-value-together/img/intelligent-calculation/p-02.jpg',
-      },
-    ],
-  },
-  {
-    id: '3',
-    tabName: '上岸',
-    children: [
-      {
-        url: 'https://e.huawei.com/topic/sitecore/new-value-together/img/intelligent-calculation/p-03.jpg',
-      },
-    ],
-  },
-]
-
-const imgProData2 = {
-  url: 'https://e.huawei.com/topic/sitecore/new-value-together/img/partner/background-pc.jpg',
-  title: '面向中小企业',
-  content:
-    '未来5年，90%的中小企业将通过数字化和智能化构筑核心竞争力。面向中小企业，华为在销服体系和研发体系进行能力重构，完善流程和IT工具，带来更多深入场景的解决方案，并推出了分销子品牌“华为坤灵”，打造更多适销易用的产品。',
-}
----
-
-<Layout title="首屏">
-  <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    listOrData={imgProData}
-    ratio="16 / 9"
-    titleSize="fs-1"
-    childrenSize="fs-4"
-    textWeight="fw-bold"
-    ellipsis="line-ellipsis-small"
-    position="positionBottom"
-  />
-  <LeftImgRightText
-    listOrData={leftImgRightTextData}
-    componentTitle="使能百模千态"
-    textAlign="text-center"
-    btnDisplay={false}
-  />
-  <VerticalNavigationContent
-    mdSize="12"
-    list={list}
-    Children={Img}
-    componentTitle="智算万数"
-    textAlign="text-start"
-  />
-  <LeftImgRightText
-    listOrData={leftImgRightTextData2}
-    componentTitle="智联万物"
-    textAlign="text-center"
-    btnDisplay={false}
-  />
-  <ImgPro
-    listOrData={imgProData2}
-    ratio="16 / 9"
-    titleSize="fs-1"
-    childrenSize="fs-4"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-  />
-  <Footer lang={lang} />
-</Layout>

src/pages/[lang]/detail/index.astro

 <Layout>
   <ScrollingNavbar sNav={ids} />
 
-  <!-- <ImgPro
-    listOrData={imgProData}
-    titleColor="text-dark"
-    contentColor="text-secondary"
-    ratio="3 / 1"
-    titleSize="fs-1"
-    childrenSize="fs-4"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-  />
-  <LeftImgRightText
-    listOrData={data}
-    componentTitle="发展背景"
-    textAlign="text-center"
-    btnDisplay={false}
-  />
-  <LeftMiddleRightImgText
-    componentTitle="案例统计"
-    listOrData={informationList2}
-    textAlign="text-center"
-    btnDisplay={false}
-  /> -->
-
   <div class="container-fulid" style="margin-top: 9rem;background-color:#fff">
     <div class="container p-5">
       <div style="word-break:break-word">

src/pages/[lang]/index.astro

 
 <Layout title="官网">
   <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
     listOrData={imgProData}
     ratio="16 / 9"
-    titleSize="60"
-    childrenSize="24"
+    titleSize="60px"
     textWeight="fw-bold"
-    ellipsis="line-ellipsis-small"
     position="positionBottom"
-    btnDisplay={false}
     top="68"
   />
   <LeftImgRightText
     listOrData={leftImgRightTextData}
     componentTitle="产品与解决方案"
     textAlign="text-center"
-    titleSize="34"
-    pt="4"
-    px="5"
-    contentHeight="17"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightImgTextPro listOrData={caseList} componentTitle="案例展示" />
   <LeftMiddleRightImgTextPro

src/pages/[lang]/news/index.astro

 ---
 
 <Layout title="最新资讯">
-  <ImgPro
-    listOrData={imgProData}
-    titleColor="text-dark"
-    contentColor="text-secondary"
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-  />
+  <ImgPro listOrData={imgProData} />
   <List text={text} />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/product/gov-ent-health/index.astro

 ---
 import Layout from '@/layouts/Layout.astro'
+import NavSubMenu from '@/components/NavSubMenu.astro'
 import Footer from '@/components/Footer.astro'
 const { lang = 'zh' } = Astro.params
+
+const list = [
+  {
+    id: '1',
+    href: '/products-solutions/gov-ent-health/gov',
+    url: '/public/menu/gov-ent-health/gov.png',
+    title: '政务服务',
+    subTitle:
+      '各级政府、各相关部门及事业单位，根据法律法规，为社会团体、企事业单位和个人提供的许可、确认、裁决、奖励、处罚等行政服务。',
+  },
+  {
+    id: '2',
+    href: '/products-solutions/gov-ent-health/bank',
+    url: '/public/menu/gov-ent-health/bank.png',
+    title: '银行业务',
+    subTitle:
+      '各级政府、各相关部门及事业单位，根据法律法规，为社会团体、企事业单位和个人提供的许可、确认、裁决、奖励、处罚等行政服务。',
+  },
+  {
+    id: '3',
+    href: '/products-solutions/gov-ent-health/healthcare',
+    url: '/public/menu/gov-ent-health/healthcare.png',
+    title: '医院医疗',
+    subTitle:
+      '各级政府、各相关部门及事业单位，根据法律法规，为社会团体、企事业单位和个人提供的许可、确认、裁决、奖励、处罚等行政服务。',
+  },
+]
 ---
 
 <Layout title="菜单">
-  <div class="container" style="margin-top: 120px;">
-    <div class="row g-5 pb-5 justify-content-center">
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/gov-ent-health/gov`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/gov-ent-health/gov.png"
-                style="width: 5vw;"
-              />
-            </div>
-            政务服务
-            <div class="menu-content pt-3">
-              各级政府、各相关部门及事业单位，根据法律法规，为社会团体、企事业单位和个人提供的许可、确认、裁决、奖励、处罚等行政服务。
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/gov-ent-health/bank`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/gov-ent-health/bank.png"
-                style="width: 5vw;"
-              />
-            </div>
-            银行业务
-            <div class="menu-content pt-3">
-              各级政府、各相关部门及事业单位，根据法律法规，为社会团体、企事业单位和个人提供的许可、确认、裁决、奖励、处罚等行政服务。
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/gov-ent-health/healthcare.png`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/gov-ent-health/healthcare.png"
-                style="width: 5vw;"
-              />
-            </div>
-            医院医疗
-            <div class="menu-content pt-3">
-              各级政府、各相关部门及事业单位，根据法律法规，为社会团体、企事业单位和个人提供的许可、确认、裁决、奖励、处罚等行政服务。
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <NavSubMenu list={list} />
   <Footer lang={lang} />
 </Layout>
 
 <style>
+  @media (max-width: 768px) {
+    .products-solutions-md-img {
+      width: 15vw !important;
+    }
+  }
   .menu-a {
     text-decoration: none;
     cursor: pointer;

src/pages/[lang]/product/others/index.astro

 ---
 import Layout from '@/layouts/Layout.astro'
+import NavSubMenu from '@/components/NavSubMenu.astro'
 import Footer from '@/components/Footer.astro'
 const { lang = 'zh' } = Astro.params
+
+const list = [
+  {
+    id: '1',
+    href: '/products-solutions/others/eshop',
+    url: '/public/menu/others/eshop.png',
+    title: '电商系统',
+    subTitle: '商务活动中各参与方和支持企业进行交易活动的电子技术手段的集合',
+  },
+  {
+    id: '2',
+    href: '/products-solutions/others/shigongli',
+    url: '/public/menu/others/shigongli.png',
+    title: '旅游住宿',
+    subTitle:
+      '游客在旅游过程中所涉及的住宿环节，它是旅游活动的重要组成部分，为游客提供休息、放松和恢复精力的场所。',
+  },
+  {
+    id: '3',
+    href: '/products-solutions/others/house',
+    url: '/public/menu/others/house.png',
+    title: '房源交易',
+    subTitle:
+      '在房地产市场中，房屋权利人通过委托房地产经纪机构或其他渠道，将其房屋进行买卖、租赁或其他形式的交易行为。',
+  },
+  {
+    id: '4',
+    href: '/products-solutions/others/crm',
+    url: '/public/menu/others/crm.png',
+    title: 'CRM管理',
+    subTitle:
+      '利用软件、硬件和网络技术，为企业建立客户信息收集、管理、分析和利用的信息系统。该系统以客户数据的管理为核心，记录企业在市场营销和销售过程中与客户发生的各种交互行为',
+  },
+]
 ---
 
 <Layout title="菜单">
-  <div class="container" style="margin-top: 120px;">
-    <div class="row g-5 pb-5">
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/others/eshop`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img src="/public/menu/others/eshop.png" style="width: 5vw;" />
-            </div>
-            电商系统
-            <div class="menu-content pt-3">
-              商务活动中各参与方和支持企业进行交易活动的电子技术手段的集合
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/others/shigongli`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/others/shigongli.png"
-                style="width: 5vw;"
-              />
-            </div>
-            旅游住宿
-            <div class="menu-content pt-3">
-              游客在旅游过程中所涉及的住宿环节，它是旅游活动的重要组成部分，为游客提供休息、放松和恢复精力的场所。
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/others/house`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img src="/public/menu/others/house.png" style="width: 5vw;" />
-            </div>
-            房源交易
-            <div class="menu-content pt-3">
-              在房地产市场中，房屋权利人通过委托房地产经纪机构或其他渠道，将其房屋进行买卖、租赁或其他形式的交易行为。
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/others/crm`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img src="/public/menu/others/crm.png" style="width: 5vw;" />
-            </div>
-            CRM管理
-            <div class="menu-content pt-3">
-              利用软件、硬件和网络技术，为企业建立客户信息收集、管理、分析和利用的信息系统。该系统以客户数据的管理为核心，记录企业在市场营销和销售过程中与客户发生的各种交互行为
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <NavSubMenu list={list} />
   <Footer lang={lang} />
 </Layout>
 
 <style>
+  @media (max-width: 768px) {
+    .products-solutions-md-img {
+      width: 15vw !important;
+    }
+  }
   .menu-a {
     text-decoration: none;
     cursor: pointer;

src/pages/[lang]/products-solutions/gov-ent-health/bank/custom/index.astro

 import ImgPro from '@/components/ImgPro.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import Footer from '@/components/Footer.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 
 <Layout title="定制开发">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightImgTextPro
     componentTitle="场景化解决方案"
     listOrData={informationList}
     list={carouselList2}
     Children={LeftImgRightText}
     line="0"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-img"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/gov-ent-health/bank/index.astro

 import ImgPro from '@/components/ImgPro.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import Footer from '@/components/Footer.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 
 <Layout title="银行业务">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightImgTextPro
     componentTitle="场景化解决方案"
     listOrData={informationList}
     list={carouselList}
     line="0"
     Children={LeftImgRightText}
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightImgTextPro
     componentTitle="新闻资讯"
   <VerticalNavigationContent
     list={verticalNavigationContentList}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/gov-ent-health/gov/civilized-city/index.astro

 import ImgPro from '@/components/ImgPro.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import Footer from '@/components/Footer.astro'
 
 
 <Layout title="文明创城">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftImgRightText
     listOrData={leftImgRightTextList}
     componentTitle="场景化解决方案"
     textAlign="text-center"
-    titleSize="34"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/gov-ent-health/gov/index.astro

 import ImgPro from '@/components/ImgPro.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import LeftMiddleRightText from '@/components/LeftMiddleRightText.astro'
 import Footer from '@/components/Footer.astro'
 
 <Layout title="政务服务">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightImgTextPro
     componentTitle="场景化解决方案"
     listOrData={informationList}
     list={carouselList}
     line="0"
     Children={LeftImgRightText}
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightText
     componentTitle="新闻与活动"
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/gov-ent-health/healthcare/index.astro

 import ImgPro from '@/components/ImgPro.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import Footer from '@/components/Footer.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 
 <Layout title="医院医疗">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftImgRightText
     listOrData={leftImgRightTextList}
     componentTitle="场景化解决方案"
     textAlign="text-center"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <Carousel
     componentTitle="成功案例"
     list={carouselList}
     Children={LeftImgRightText}
     line="0"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-img"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightImgTextPro
     componentTitle="相关产品"
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

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

 ---
 import Layout from '@/layouts/Layout.astro'
 import NavMenu from '@/components/NavMenu/index.jsx'
+import NavSubMenu from '@/components/NavSubMenu.astro'
 import Footer from '@/components/Footer.astro'
+import menu from '@/data/menu.js'
 const { lang = 'zh' } = Astro.params
+
+const list = [
+  {
+    id: '1',
+    href: '/products-solutions/lot',
+    url: '/public/menu/lot/building.png',
+    title: '智慧物联',
+    subTitle:
+      '将物联网与人工智能等先进技术结合实现更智能、高效、自动化的系统和应用',
+  },
+  {
+    id: '2',
+    href: '/products-solutions/industrial-internet',
+    url: '/public/menu/products-solutions/internet.png',
+    title: '工业互联网',
+    subTitle:
+      '新一代信息通信技术与工业经济深度融合的新型基础设施、应用模式和工业生态',
+  },
+  {
+    id: '3',
+    href: '/product/gov-ent-health',
+    url: '/public/menu/products-solutions/health.png',
+    title: '政企医疗',
+    subTitle: '政府与企业在医疗领域的合作或互动',
+  },
+  {
+    id: '4',
+    href: '/product/others',
+    url: '/public/menu/products-solutions/other.png',
+    title: '其他业务',
+    subTitle: '一个公司或组织的主营业务之外的所有其他活动或收入来源',
+  },
+]
 ---
 
 <Layout title="菜单">
-  <NavMenu lang={lang} client:load />
-  <div class="container" style="margin-top: 120px;">
-    <div class="row g-5 pb-5">
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/lot`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/products-solutions/lot.png"
-                style="width: 5vw;"
-              />
-            </div>
-            智慧物联
-            <div class="menu-content pt-3">
-              将物联网与人工智能等先进技术结合实现更智能、高效、自动化的系统和应用
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/industrial-internet`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/products-solutions/internet.png"
-                style="width: 5vw;"
-              />
-            </div>
-            工业互联网
-            <div class="menu-content pt-3">
-              新一代信息通信技术与工业经济深度融合的新型基础设施、应用模式和工业生态
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/product/gov-ent-health`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/products-solutions/health.png"
-                style="width: 5vw;"
-              />
-            </div>
-            政企医疗
-            <div class="menu-content pt-3">
-              政府与企业在医疗领域的合作或互动
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/product/others`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/products-solutions/other.png"
-                style="width: 5vw;"
-              />
-            </div>
-            其他业务
-            <div class="menu-content pt-3">
-              一个公司或组织的主营业务之外的所有其他活动或收入来源
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <NavMenu menus={menu} lang={lang} client:load />
+  <NavSubMenu list={list} />
   <Footer lang={lang} />
 </Layout>
 
 <style>
+  @media (max-width: 768px) {
+    .products-solutions-md-img {
+      width: 15vw !important;
+    }
+  }
   .menu-a {
     text-decoration: none;
     cursor: pointer;

src/pages/[lang]/products-solutions/industrial-internet/erp/index.astro

 import Carousel from '@/components/children/Carousel.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
 import LeftMiddleRightText from '@/components/LeftMiddleRightText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import Footer from '@/components/Footer.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 
 <Layout title="ERP">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftImgRightText
     listOrData={leftImgRightTextList}
     componentTitle="选择云致的理由"
     textAlign="text-center"
-    titleSize="34"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightImgTextPro
     componentTitle="场景化解决方案"
     list={carouselList}
     line="0"
     Children={LeftImgRightText}
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightImgTextPro
     componentTitle="配套产品"
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#eee"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="5.4"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
   />
   <Footer lang={lang} />

src/pages/[lang]/products-solutions/industrial-internet/index.astro

 ---
 import Layout from '@/layouts/Layout.astro'
+import NavSubMenu from '@/components/NavSubMenu.astro'
 import Footer from '@/components/Footer.astro'
 const { lang = 'zh' } = Astro.params
+
+const list = [
+  {
+    id: '1',
+    href: '/products-solutions/industrial-internet/mes',
+    url: '/public/menu/industrial-internet/mes.png',
+    title: '云致MES',
+    subTitle:
+      '在数字化、智能化技术的支持下，对楼宇的运营、管理和服务进行全面升级的一种新型楼宇形态',
+  },
+  {
+    id: '2',
+    href: '/products-solutions/industrial-internet/erp',
+    url: '/public/menu/industrial-internet/erp.png',
+    title: 'ERP',
+    subTitle:
+      '在数字化、智能化技术的支持下，对楼宇的运营、管理和服务进行全面升级的一种新型楼宇形态',
+  },
+]
 ---
 
 <Layout title="菜单">
-  <div class="container" style="margin-top: 120px;">
-    <div class="row g-5 pb-5 justify-content-center">
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/industrial-internet/mes`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/industrial-internet/mes.png"
-                style="width: 5vw;"
-              />
-            </div>
-            云致MES
-            <div class="menu-content pt-3">
-              在数字化、智能化技术的支持下，对楼宇的运营、管理和服务进行全面升级的一种新型楼宇形态
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/industrial-internet/erp`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/industrial-internet/erp.png"
-                style="width: 5vw;"
-              />
-            </div>
-            ERP
-            <div class="menu-content pt-3">
-              在数字化、智能化技术的支持下，对楼宇的运营、管理和服务进行全面升级的一种新型楼宇形态
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <NavSubMenu list={list} />
   <Footer lang={lang} />
 </Layout>
 
 <style>
+  @media (max-width: 768px) {
+    .products-solutions-md-img {
+      width: 15vw !important;
+    }
+  }
   .menu-a {
     text-decoration: none;
     cursor: pointer;

src/pages/[lang]/products-solutions/industrial-internet/mes/index.astro

 import Carousel from '@/components/children/Carousel.astro'
 import ImgPro from '@/components/ImgPro.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import Footer from '@/components/Footer.astro'
 
 const { lang = 'zh' } = Astro.params
 
 <Layout title="云致MES">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    contentLineHeight="1.5"
-    titleHeight="2.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftImgRightText
     listOrData={leftImgRightTextData2}
     componentTitle="数智云简介"
     textAlign="text-center"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftImgRightText
     listOrData={leftImgRightTextData3}
     componentTitle="数智云架构"
     textAlign="text-center"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

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

 import Carousel from '@/components/children/Carousel.astro'
 import ImgPro from '@/components/ImgPro.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import Footer from '@/components/Footer.astro'
 import ScrollingNavbar from '@/components/ScrollingNavbar.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 
 <Layout title="智慧农业">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightImgTextPro
     componentTitle="项目内容"
     listOrData={informationList}
     listOrData={data}
     componentTitle="大数据可视化平台"
     textAlign="text-center"
-    titleSize="34"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightImgTextPro
     componentTitle="”四情“监测系统"
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    ellipsis="line-ellipsis-small"
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    lineHeight="1.8"
-    btnDisplay={false}
-    btn2={true}
   />
   <Footer lang={lang} />
 </Layout>

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

 ---
 import Layout from '@/layouts/Layout.astro'
 import Img from '@/components/children/Img.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
 import LeftMiddleRightText from '@/components/LeftMiddleRightText.astro'
 import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
 
 <Layout title="智慧楼宇">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    listOrData={imgProData1}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData1} />
   <!-- href=`/${lang}/detail/BuildingDetail/` -->
   <LeftMiddleRightText
+    ellipsis="line-ellipsis-small"
     componentTitle="智慧通行"
     listOrData={carouselList4}
     titleTextAlign="text-end"
     ellipsis="line-ellipsis-small"
     pt="4"
   />
-  <ImgPro
-    listOrData={imgProData2}
-    btnDisplay={false}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    titleHeight="2.5"
-    titleColor="text-light"
-    contentColor="text-light"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    top="50"
-  />
+  <ImgPro listOrData={imgProData2} />
   <LeftMiddleRightImgTextPro
     componentTitle="智慧识别便捷通行"
     listOrData={informationList3}
   />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    btnDisplay={false}
-    listOrData={imgProData3}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    titleColor="text-light"
-    contentColor="text-light"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    top="50"
-  />
+  <ImgPro listOrData={imgProData3} />
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
-    btnDisplay={false}
-    btn2={true}
     componentsBg="bg-even"
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

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

 import Carousel from '@/components/children/Carousel.astro'
 import LeftMiddleRightText from '@/components/LeftMiddleRightText.astro'
 import ImgPro from '@/components/ImgPro.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import Footer from '@/components/Footer.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 
 <Layout title="智慧社区">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightImgTextPro
     componentTitle="社区目的"
     listOrData={informationList}
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#eee"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="5.4"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
   />
   <Footer lang={lang} />

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

 import ImgPro from '@/components/ImgPro.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import Footer from '@/components/Footer.astro'
 import LeftMiddleRightImgTextPro from '@/components/LeftMiddleRightImgTextPro/index.astro'
 
 
 <Layout title="智慧展馆">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleSize="52"
-    childrenSize="24"
-    btnDisplay={false}
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightImgTextPro
     componentTitle="5G网络覆盖"
     listOrData={informationList}
     white="white"
   />
   <Carousel
-    titleHeight="3.2"
     componentTitle="成功案例"
     list={carouselList2}
     Children={LeftImgRightText}
     line="0"
     textAlign="text-center"
     titleTextAlign="text-center"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <LeftMiddleRightImgTextPro
     componentTitle="界面设计与用户体验"
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

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

 ---
 import Layout from '@/layouts/Layout.astro'
+import NavSubMenu from '@/components/NavSubMenu.astro'
 import Footer from '@/components/Footer.astro'
 const { lang = 'zh' } = Astro.params
+
+const list = [
+  {
+    id: '1',
+    href: '/products-solutions/lot/building',
+    url: '/public/menu/lot/building.png',
+    title: '智慧楼宇',
+    subTitle:
+      '在数字化、智能化技术的支持下，对楼宇的运营、管理和服务进行全面升级的一种新型楼宇形态',
+  },
+  {
+    id: '2',
+    href: '/products-solutions/lot/agriculture',
+    url: '/public/menu/lot/agriculture.png',
+    title: '智慧农业',
+    subTitle:
+      '现代科学技术与农业种植相结合，实现无人化、自动化、智能化管理的农业生产方式。',
+  },
+  {
+    id: '3',
+    href: '/products-solutions/lot/community',
+    url: '/public/menu/lot/community.png',
+    title: '智慧社区',
+    subTitle:
+      '在传统住宅社区的基础上，利用互联网、物联网、云计算、大数据等现代信息技术，实现社区管理智能化和服务智能化的新型居住社区。',
+  },
+  {
+    id: '4',
+    href: '/products-solutions/lot/exhibition-all',
+    url: '/public/menu/lot/exhibition-all.png',
+    title: '智慧展馆',
+    subTitle:
+      '运用先进的信息技术和智能化设备，将展馆打造成一个智能化、数字化、互动化的展览空间，为参观者提供更加丰富、便捷、高效的观展体验。',
+  },
+]
 ---
 
 <Layout title="菜单">
-  <div class="container" style="margin-top: 120px;">
-    <div class="row g-5 pb-5">
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/lot/building`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img src="/public/menu/lot/building.png" style="width: 5vw;" />
-            </div>
-            智慧楼宇
-            <div class="menu-content pt-3">
-              在数字化、智能化技术的支持下，对楼宇的运营、管理和服务进行全面升级的一种新型楼宇形态
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/lot/agriculture`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img src="/public/menu/lot/agriculture.png" style="width: 5vw;" />
-            </div>
-            智慧农业
-            <div class="menu-content pt-3">
-              现代科学技术与农业种植相结合，实现无人化、自动化、智能化管理的农业生产方式。
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/lot/community`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img src="/public/menu/lot/community.png" style="width: 5vw;" />
-            </div>
-            智慧社区
-            <div class="menu-content pt-3">
-              在传统住宅社区的基础上，利用互联网、物联网、云计算、大数据等现代信息技术，实现社区管理智能化和服务智能化的新型居住社区。
-            </div>
-          </a>
-        </div>
-      </div>
-      <div class="col-md-3 col-sm-12">
-        <div
-          class="card border-0 text-center my-1"
-          style="background-color:#f8f8f8;"
-        >
-          <a
-            class="inline-block p-5 link-dark menu-a"
-            href={`/${lang}/products-solutions/lot/exhibition-all`}
-            style="font-size: 28px;"
-          >
-            <div class="pb-4">
-              <img
-                src="/public/menu/lot/exhibition-all.png"
-                style="width: 5vw;"
-              />
-            </div>
-            智慧展馆
-            <div class="menu-content pt-3">
-              运用先进的信息技术和智能化设备，将展馆打造成一个智能化、数字化、互动化的展览空间，为参观者提供更加丰富、便捷、高效的观展体验。
-            </div>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <NavSubMenu list={list} />
   <Footer lang={lang} />
 </Layout>
 

src/pages/[lang]/products-solutions/others/crm/index.astro

 import ScrollingNavbar from '@/components/ScrollingNavbar.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
 import ImgPro from '@/components/ImgPro.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 
 <Layout title="CRM管理">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightImgTextPro
     componentTitle="服务产品"
     listOrData={informationList}
     listOrData={leftImgRightTextList}
     componentTitle="成功案例"
     textAlign="text-center"
-    titleHeight="'3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <VerticalNavigationContent
     list={verticalNavigationContentList}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/others/eshop/index.astro

 import Layout from '@/layouts/Layout.astro'
 import ScrollingNavbar from '@/components/ScrollingNavbar.astro'
 import Carousel from '@/components/children/Carousel.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import ImgPro from '@/components/ImgPro.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import LeftMiddleRightText from '@/components/LeftMiddleRightText.astro'
 
 <Layout title="电商系统">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftMiddleRightText
     componentTitle="电商产品"
     listOrData={carouselList}
   <VerticalNavigationContent
     list={verticalNavigationContentList}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/others/house/index.astro

 import ScrollingNavbar from '@/components/ScrollingNavbar.astro'
 import Carousel from '@/components/children/Carousel.astro'
 import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
 import ImgPro from '@/components/ImgPro.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 
 <Layout title="房源交易">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <Carousel
     componentTitle="成功案例"
     list={carouselList}
     line="0"
     textAlign="text-center"
     titleTextAlign="text-center"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
     componentsBg="bg-grey"
   />
   <LeftMiddleRightImgTextPro
   <VerticalNavigationContent
     list={list}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/[lang]/products-solutions/others/shigongli/index.astro

 import Layout from '@/layouts/Layout.astro'
 import ScrollingNavbar from '@/components/ScrollingNavbar.astro'
 import Carousel from '@/components/children/Carousel.astro'
-import Text from '@/components/children/Text.astro'
+import Text3 from '@/components/children/Text3.astro'
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
 import ImgPro from '@/components/ImgPro.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 
 <Layout title="旅游住宿">
   <ScrollingNavbar sNav={sNav} />
-  <ImgPro
-    titleHeight="2.5"
-    contentLineHeight="1.5"
-    listOrData={imgProData}
-    ratio="3 / 1"
-    titleColor="text-light"
-    contentColor="text-light"
-    titleSize="52"
-    childrenSize="24"
-    ellipsis="line-ellipsis-small"
-    position="positionMiddle"
-    btnDisplay={false}
-  />
+  <ImgPro listOrData={imgProData} />
   <LeftImgRightText
     listOrData={leftImgRightTextList}
     componentTitle="旅游住宿"
     textAlign="text-center"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-grey"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <Carousel
     componentTitle="成功案例"
     titleTextAlign="text-left"
     textAlign="text-left"
     line="0"
-    titleHeight="3.2"
-    px="5"
-    pt="4"
-    contentHeight="17"
     componentsBg="bg-img"
-    subPmb="5"
-    btnDisplay={false}
-    btn2={true}
   />
   <VerticalNavigationContent
     list={verticalNavigationContentList}
     ellipsis="line-ellipsis-small"
-    Children={Text}
+    Children={Text3}
     componentTitle="相关资源"
     titleTextAlign="text-left"
     textAlign="text-left"
-    pt="4"
-    px="5"
-    backgroundColor="#f8f8f8"
-    textP="5"
-    rounded="3"
-    titleSize="20"
-    titleHeight="6"
-    pLine="titleLineEllipsis2"
-    isContent={false}
-    pMb="3"
-    animation="animation"
     componentsBg="bg-even"
-    btnDisplay={false}
-    btn2={true}
-    lineHeight="1.8"
   />
   <Footer lang={lang} />
 </Layout>

src/pages/components/FirstScreen.astro

----
-import Img from '@/components/children/Img.astro'
-import Text from '@/components/children/Text.astro'
-
-const { data } = Astro.props
-const list = { title: data.title, content: data.subTitle }
----
-
-<div class="box">
-  <Img listOrData={data.thumb} ratio="16 / 9" class="img" />
-  <Text
-    listOrData={list}
-    btnDisplay={true}
-    titleSize="fs-1"
-    childrenSize="fs-4"
-    textWeight="fw-bold"
-    ellipsis="line-ellipsis-small"
-    position="positionBottom"
-  />
-</div>
-<style>
-  .box {
-    position: relative;
-    text-align: center;
-  }
-</style>