f

src/components/FirstScreen.astro

@@ -1,9 +0,0 @@
----
-import Img from '@/components/children/Img.astro'
----
-
-<!-- 首屏图 -->
-<Img
-  url="//e.huawei.com/-/mediae/images/home/banner/jiasu-banner-pc1.jpg"
-  ratio="16 / 9"
-/>

src/components/Footer.astro

@@ -1,7 +1,7 @@
 ---
 import { arr2Tree } from '@/utils/array'
 
-const [menus] = arr2Tree(Astro.locals._menus || [])
+// const [menus] = arr2Tree(Astro.locals._menus || [])
 
 const { lang } = Astro.props
 
@@ -14,6 +14,44 @@ function getName(item = {}) {
   )
 }
 
+const menus = [
+  {
+    id: '1',
+    name: '首页',
+  },
+  {
+    id: '2',
+    name: '产品与解决方案',
+    url: '/',
+    children: [
+      {
+        name: '智慧物联',
+      },
+      {
+        name: '工业互联网',
+      },
+      {
+        name: '政企医疗',
+      },
+      {
+        name: '其他业务',
+      },
+    ],
+  },
+  {
+    id: '3',
+    name: '最新资讯',
+  },
+  {
+    id: '4',
+    name: '关于云致',
+  },
+  {
+    id: '5',
+    name: '联系我们',
+  },
+]
+
 const colNum = Math.ceil(12 / (menus?.length + 1))
 ---
 
@@ -37,7 +75,7 @@ const colNum = Math.ceil(12 / (menus?.length + 1))
           menus?.map((item) => {
             return (
               <div class={`col-md-${colNum} col-sm-12 mb-3`}>
-                <h5>{getName(item)}</h5>
+                <h5>{item?.name}</h5>
                 <ul class="nav flex-column">
                   {item?.children?.map((child) => (
                     <li class="nav-item mb-2">
@@ -45,7 +83,7 @@ const colNum = Math.ceil(12 / (menus?.length + 1))
                         href={`/${lang}/${child.categaryId}`}
                         class="nav-link p-0 text-body-secondary"
                       >
-                        {getName(child)}
+                        {child?.name}
                       </a>
                     </li>
                   ))}

src/components/LeftMiddleRightImgText.astro

@@ -1,40 +1,12 @@
 ---
-const { json, lang } = Astro.props
+const { json, lang, list, componentTitle } = Astro.props
 import Img from '@/components/children/Img.astro'
 import Text from '@/components/children/Text.astro'
-const list = [
-  {
-    id: '1',
-    url: 'https://e.huawei.com/-/mediae/images/solutions/computing/banner/huawei-data-center-banner-share.jpg',
-    children: {
-      title: '国家区域人工智能计算中心',
-      content:
-        '方案主要用于人工智能深度学习模型开发、模型训练和模型推理场景，以AI算力集群赋能产业集群，推动人工智能产业集约集聚发展。',
-    },
-  },
-  {
-    id: '2',
-    url: 'https://e.huawei.com/-/mediae/images/solutions/computing/banner/huawei-computing-ai-solution2-banner-share.jpg',
-    children: {
-      title: '城市人工智能中枢',
-      content:
-        '依托ICT技术与知识创新融合，推动城市的感知、认知、决策和执行实现深度协同，打造面向城市的智能应用和场景化服务。',
-    },
-  },
-  {
-    id: '3',
-    url: 'https://e.huawei.com/-/mediae/images/solutions/computing/banner/huawei-computing-solution-ai-1-share.jpg',
-    children: {
-      title: '通用训练服务器场景',
-      content:
-        '通用训练服务器场景主要面向互联网、金融、运营商等行业，提供Atlas 800、Atlas 300T Pro等通用训练服务产品。',
-    },
-  },
-]
 ---
 
 <!-- 左中右图文 -->
 <div class="container">
+  <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) => (

src/components/LeftOneRightFourImg.astro

@@ -62,11 +62,13 @@ const list = [
           list?.map((item, index) => (
             <div class="col-md-6" id={item?.id}>
               <div class="right-block">
-                <Img
-                  url={item?.url}
-                  ratio="3 / 2"
-                  transformEnlarge="transformEnlarge"
-                />
+                <div class="limit">
+                  <Img
+                    url={item?.url}
+                    ratio="3 / 2"
+                    transformEnlarge="transformEnlarge"
+                  />
+                </div>
                 <Text list={item?.children} ellipsis="line-ellipsis-small" />
               </div>
             </div>
@@ -87,4 +89,8 @@ const list = [
     height: auto;
     overflow: hidden;
   }
+  .limit {
+    height: auto;
+    overflow: hidden;
+  }
 </style>

src/components/LeftRightCarousel.astro

@@ -1,4 +1,5 @@
 ---
+const { json, lang } = Astro.props
 import LeftImgRightText from '@/components/LeftImgRightText.astro'
 import Carousel from '@/components/children/Carousel.astro'
 const list = [

src/components/VerticalNavigationContent.astro

@@ -3,10 +3,31 @@ const domId = `tab-${Math.random().toString(36).substring(2, 7)}`
 import Text from '@/components/children/Text.astro'
 const list = [
   {
+    id: '1',
     tabName: '精选视频',
-    children: [],
+    children: [
+      {
+        title: '中信银行携手华为的数字化转型实践',
+      },
+      {
+        title: 'HIFS2023 曹冲丨拥抱大模型，构建无所不及的金融智能',
+      },
+      {
+        title: 'BDO携手华为共同应对数字化转型的新挑战',
+      },
+      {
+        title: '申万宏源通过基础设施现代化为数字化转型夯基垒台',
+      },
+      {
+        title: '华为iMaster NCE助力华夏银行网络自服务平台搭建',
+      },
+      {
+        title: '常熟农商银行科技创新之路',
+      },
+    ],
   },
   {
+    id: '2',
     tabName: '会议演讲材料',
     children: [
       {
@@ -24,10 +45,12 @@ const list = [
     ],
   },
   {
+    id: '3',
     tabName: '白皮书/第三方报告',
     children: [],
   },
   {
+    id: '4',
     tabName: '快捷书架',
     children: [],
   },
@@ -36,42 +59,64 @@ const list = [
 
 <!-- 竖形导航内容 -->
 <div class="d-flex align-items-start">
-  <div
-    class="nav flex-column nav-pills me-3"
-    id="v-pills-tab"
-    role="tablist"
-    aria-orientation="vertical"
-  >
-    {
-      list?.map((item, index) => (
-        <a
-          class={index == 0 ? 'nav-link active' : 'nav-link'}
-          id={`v-pills-${index}-tab`}
-          data-bs-toggle="pill"
-          href={`#v-pills-${index}`}
-          role="tab"
-          aria-controls={`v-pills-${index}`}
-          aria-selected={index == 0 ? 'true' : 'false'}
-        >
-          {item?.tabName}
-        </a>
-      ))
-    }
-  </div>
-  <div class="tab-content" id="v-pills-tabContent">
-    {
-      list?.map((item, index) => (
-        <div
-          class={index == 0 ? 'tab-pane fade' : 'tab-pane fade show active'}
-          id={`v-pills-${index}`}
-          role="tabpanel"
-          aria-labelledby={`v-pills-${index}-tab`}
-        >
-          {item?.children?.map((item, index) => (
-            <Text id={index} list={item} ellipsis="line-ellipsis-small" />
-          ))}
-        </div>
-      ))
-    }
+  <div class="row">
+    <div class="col-md-2">
+      <div
+        class="nav flex-column nav-pills me-3"
+        id="v-pills-tab"
+        role="tablist"
+        aria-orientation="vertical"
+      >
+        {
+          list?.map((item, index) => (
+            <a
+              class={index == 0 ? 'nav-link active mt-5' : 'nav-link mt-5'}
+              id={`v-pills-${index}-tab`}
+              data-bs-toggle="pill"
+              href={`#v-pills-${index}`}
+              role="tab"
+              aria-controls={`v-pills-${index}`}
+              aria-selected={index == 0 ? 'true' : 'false'}
+            >
+              {item?.tabName}
+            </a>
+          ))
+        }
+      </div>
+    </div>
+    <div class="col-md-10">
+      <div class="tab-content" id="v-pills-tabContent">
+        {
+          list?.map((item, index) => (
+            <div
+              class={index == 0 ? 'tab-pane fade show active' : 'tab-pane fade'}
+              id={`v-pills-${index}`}
+              role="tabpanel"
+              aria-labelledby={`v-pills-${index}-tab`}
+            >
+              <div class="row">
+                {item?.children?.map((item, index) => (
+                  <div class="col-md-4" id={index}>
+                    <Text
+                      list={item}
+                      ellipsis="line-ellipsis-small"
+                      btnDisplay={true}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
   </div>
 </div>
+<style>
+  .nav-link {
+    color: #787878;
+  }
+  .nav-link.active {
+    background-color: #c80510;
+  }
+</style>

src/components/children/Carousel.astro

@@ -1,9 +1,9 @@
 ---
 const domId = `carousel-${Math.random().toString(36).substring(2, 7)}`
-const { list, Children } = Astro.props
+const { list, Children, componentTitle } = Astro.props
 ---
 
-<!-- 左右轮播图 -->
+<!-- 轮播 -->
 <div class="container">
   <div id={domId} class="carousel slide" data-bs-ride="carousel">
     <div class="carousel-inner">
@@ -15,14 +15,14 @@ const { list, Children } = Astro.props
           >
             <div class="row">
               {item.map((it, index) => (
-                <div class="col-md-12 col-sm-12 my-5 px-5">
+                <div class="col-md-12 col-sm-12 px-5">
                   <div
                     class="top-bottom-project-card-carousel"
                     style={it.id ? 'cursor: pointer' : ''}
                     data-post={it.id}
                   >
                     <div class="card border-0" />
-                    <Children list={it} />
+                    <Children list={it} componentTitle={componentTitle} />
                   </div>
                 </div>
               ))}

src/components/children/Text.astro

@@ -1,22 +1,24 @@
 ---
 const {
   list,
-  textSize,
+  titleSize = 'fs-4',
+  childrenSize,
   textColor,
   textWeight,
   ellipsis,
   btnDisplay,
   textUnderline,
+  position,
 } = Astro.props
 ---
 
 <!-- 文本 -->
-<div>
-  <p class="fs-4 mb-0 pt-5">{list?.title}</p>
+<div class=`${position}`>
+  <p class=`${titleSize} ${textWeight} mb-0 pt-5`>{list?.title}</p>
   <!-- <p class="fs-4">打造全球首个“岛式”精益智造工厂</p> -->
   {textUnderline && <div class="text-underline" />}
 
-  <p class=`text-secondary ${ellipsis} pt-1`>{list?.content}</p>
+  <p class=`text-secondary ${childrenSize} ${ellipsis} pt-1`>{list?.content}</p>
   {
     btnDisplay && (
       <button type="button" class="btn btn-outline-danger rounded-5">
@@ -35,7 +37,7 @@ const {
   }
   .line-ellipsis-small {
     display: -webkit-box;
-    height: 4.4em;
+    height: 5em;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
@@ -49,4 +51,16 @@ const {
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .positionMiddle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  .positionBottom {
+    position: absolute;
+    top: 70%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 </style>

src/layouts/Layout.astro

@@ -20,7 +20,7 @@ const { title } = Astro.props
       crossorigin="anonymous"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
     <meta name="generator" content={Astro.generator} />
-    <title>{title} - Academe</title>
+    <title>{title} - 南京云致</title>
     <style is:global>
       html,
       body {

src/pages/[lang]/index.astro

@@ -2,18 +2,13 @@
 import Layout from '@/layouts/Layout.astro'
 import Footer from '@/components/Footer.astro'
 import Navbar from '@/components/Navbar.astro'
-import FirstScreen from '@/components/FirstScreen.astro'
+import FirstScreen from 'src/pages/components/FirstScreen.astro'
 import LeftOneRightFourImg from '@/components/LeftOneRightFourImg.astro'
-import Text from '@/components/children/Text.astro'
-import Img from '@/components/children/Img.astro'
-import Carousel from '@/components/children/Carousel.astro'
-import BigImg from '@/components/BigImg.astro'
 import LeftMiddleRightImgText from '@/components/LeftMiddleRightImgText.astro'
+import Carousel from '@/components/children/Carousel.astro'
 import LeftRightCarousel from '@/components/LeftRightCarousel.astro'
 import VerticalNavigationContent from '@/components/VerticalNavigationContent.astro'
 import NavMenu from '@/components/NavMenu/index.jsx'
-// import Dynamic from '@/components/Dynamic.astro'
-import { getContentList } from '@/services/apis'
 
 function getName(item = {}) {
   return (
@@ -30,22 +25,153 @@ const categary = Astro.locals._menus?.find(
 )
 const title = getName(categary)
 
-// const contentList = await getContentList(categaryId);
+const firstScreenList = {
+  title: '加速行业智能化',
+  content:
+    '华为持续引领数智基础设施产品与解决方案创新，使能百模千态，赋能千行万业智能化转型',
+}
+
+const carouselList = [
+  [
+    [
+      {
+        id: '1',
+        url: 'https://e.huawei.com/-/mediae/images/home/casestorys/casestorys-driving-bank-of-beijing-digital.jpg',
+        children: {
+          title: '智慧物联',
+          content: '',
+        },
+      },
+      {
+        id: '2',
+        url: 'https://e.huawei.com/-/mediae/images/home/casestorys/casestorys-wuling-manufacturing-plant.jpg',
+        children: {
+          title: '工业互联网',
+          content: '',
+        },
+      },
+      {
+        id: '3',
+        url: 'https://e.huawei.com/-/mediae/images/home/casestorys/casestorys-zjhtcm.jpg',
+        children: {
+          title: '政企业务',
+          content: '',
+        },
+      },
+    ],
+  ],
+  [
+    [
+      {
+        id: '4',
+        url: 'https://e.huawei.com/-/mediae/images/home/casestorys/casestorys-shenyang-metro.jpg',
+        children: {
+          title: '其他业务',
+          content: '',
+        },
+      },
+    ],
+  ],
+]
+
+const caseList = [
+  {
+    id: '1',
+    url: 'https://e.huawei.com/-/mediae/images/home/newsevents/events/events-finance-summit-2024.jpg',
+    children: {
+      title: '房源交易系统',
+      content: '房源交易业务支撑系统，涵盖新房、二手房、租房的功能管理模块。',
+    },
+  },
+  {
+    id: '2',
+    url: 'https://e.huawei.com/-/mediae/images/home/newsevents/events/events-hpc2024.jpg',
+    children: {
+      title: '城的空间',
+      content:
+        '为提升售楼处的体验，提高数字化和智能化的进程，提高小区的品质和形象，引入售楼处和后续小区的私有化会所形象，专门为品质生活服务的需求应运而生。',
+    },
+  },
+  {
+    id: '3',
+    url: 'https://e.huawei.com/-/mediae/images/events/list/2307-storage-ai-product-launch-event-list.jpg',
+    children: {
+      title: '资源管理平台',
+      content:
+        '是针对集团性企业有众多供应商库和众多分公司，对于内部信息 不对称，资源拥有量不清楚的情况，做一个自有资源展示、交易平台。',
+    },
+  },
+  {
+    id: '4',
+    url: 'https://e.huawei.com/-/mediae/images/events/list/2023-cn-data-storage-user-forum-list.jpg',
+    children: {
+      title: '智慧社区',
+      content:
+        '物业系统（停车系统、缴费系统、门禁系统、公告发布系统）、安防系统、管家系统（智能家居）、社区系统以及智能硬件模块对接，实现用户数据采 集、用户电子化管理、用户激活等功能。',
+    },
+  },
+  {
+    id: '5',
+    url: 'https://e.huawei.com/-/mediae/EBG2022/Events/list-230426-cn-smart-manufacturing-data-infrastructure.jpg',
+    children: {
+      title: '智慧消防控制平台',
+      content:
+        '展示大屏（分析），依赖动态且丰富的主题信息设计，配合 设计感强的大屏场景设计，从而展示数据及业务现状，达到 一定的数据应用价值。',
+    },
+  },
+  {
+    id: '6',
+    url: 'https://e.huawei.com/-/mediae/images/events/list/220909-cn-longkou-intelligent-city.jpg',
+    children: {
+      title: '邓州市共享农机系统',
+      content:
+        '农机共享平台针对农业农村 局等管理单位提供管理运营 的功能，农业农村局等管理 单位，担任审核、运营及数 据管理的职能。',
+    },
+  },
+]
+
+const informationList = [
+  {
+    id: '1',
+    url: 'https://e.huawei.com/-/mediae/images/home/newsevents/news/news-20240314-4.jpg',
+    children: {
+      title: '“因聚而生 数智有为”华为举办中国合作伙伴大会2024',
+      content: '',
+    },
+  },
+  {
+    id: '2',
+    url: 'https://e.huawei.com/-/mediae/images/home/newsevents/news/news-20240314-1.jpg',
+    children: {
+      title: '华为连续四年获Gartner Peer Insights™ SD-WAN “客户之选”',
+      content: '',
+    },
+  },
+  {
+    id: '3',
+    url: 'https://e.huawei.com/-/mediae/images/home/newsevents/news/news-20240314-2.jpg',
+    children: {
+      title: '华为独家荣获Gartner Peer Insights™主存储全球“客户之选”',
+      content: '',
+    },
+  },
+]
 ---
 
 <Layout title={title}>
-  <!-- 导航栏 -->
   <NavMenu lang={lang} client:load />
-  <FirstScreen />
-  <BigImg />
-  <LeftMiddleRightImgText />
-  <LeftRightCarousel />
-  <LeftOneRightFourImg />
-  <VerticalNavigationContent />
-  <!-- <Text />
-  <Img />
-  <Carousel /> -->
-  <!-- <Dynamic contentList={contentList} lang={lang} /> -->
-
-  <!-- <Footer lang={lang} /> -->
+
+  <!-- 首屏图 -->
+  <FirstScreen list={firstScreenList} />
+
+  <!-- 三列图文轮播图 -->
+  <Carousel
+    componentTitle="产品与解决方案"
+    list={carouselList}
+    Children={LeftMiddleRightImgText}
+  />
+
+  <LeftMiddleRightImgText componentTitle="案例展示" list={caseList} />
+  <LeftMiddleRightImgText componentTitle="最新资讯" list={informationList} />
+  <Footer lang={lang} />
 </Layout>

src/pages/components/FirstScreen.astro

@@ -0,0 +1,29 @@
+---
+import Img from '@/components/children/Img.astro'
+import Text from '@/components/children/Text.astro'
+
+const { list } = Astro.props
+---
+
+<div class="box">
+  <Img
+    url="//e.huawei.com/-/mediae/images/home/banner/jiasu-banner-pc1.jpg"
+    ratio="16 / 9"
+    class="img"
+  />
+  <Text
+    list={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>