---
const { json, lang } = Astro.props
import Text from '@/components/children/Text.astro'
import Img from '@/components/children/Img.astro'

const list = [
  // {
  //   url: '//e.huawei.com/-/mediae/images/home/whatsnew/whatsnew-high-quality-cloudcampus-background-pc-0314.jpg',
  //   title: '标题',
  //   desc: '内容',
  // },
  {
    id: '1',
    url: 'https://e.huawei.com/-/mediae/images/home/whatsnew/whatsnew-primary-storage.jpg',
    children: {
      title: '华为全闪存存储',
      content: '独家荣获2024年Gartner®主存储全球“客户之选',
    },
  },
  {
    id: '2',
    url: 'https://e.huawei.com/-/mediae/images/home/whatsnew/whatsnew-new-products.jpg',
    children: {
      title: 'MWC 2024 重磅发布',
      content: '加速行业智能化',
    },
  },
  {
    id: '3',
    url: 'https://e.huawei.com/-/mediae/images/home/whatsnew/whatsnew-mwc2024.jpg',
    children: {
      title: 'MWC 2024 精彩回看',
      content: '听行业大咖共话行业智能化',
    },
  },
  {
    id: '1',
    url: 'https://e.huawei.com/-/mediae/images/home/whatsnew/whatsnew-commercial-real-estate-network-coverage.jpg',
    children: {
      title: '高品质商业地产弱电网络',
      content: '为客户省钱，让物业省心',
    },
  },
]
---

<!-- 左一右四图片 -->
<div class="container">
  <div class="row">
    <div class="col-md-5">
      <div class="left-block">
        <Img
          url="//e.huawei.com/-/mediae/images/home/whatsnew/whatsnew-high-quality-cloudcampus-background-pc-0314.jpg"
          ratio="2 / 3"
          transformEnlarge="transformEnlarge"
        />
      </div>
    </div>
    <div class="col-md-7">
      <div class="row">
        {
          list?.map((item, index) => (
            <div class="col-md-6" id={item?.id}>
              <div class="right-block">
                <div class="limit">
                  <Img
                    url={item?.url}
                    ratio="3 / 2"
                    transformEnlarge="transformEnlarge"
                  />
                </div>
                <Text list={item?.children} ellipsis="line-ellipsis-small" />
              </div>
            </div>
          ))
        }
      </div>
    </div>
  </div>
</div>

<style>
  .top-bottom-project-card-img1:hover {
    box-shadow: 8px 12px 12px 0 rgba(14, 14, 14, 0.2);
  }
  .left-block,
  .right-block {
    margin-bottom: 10px;
    height: auto;
    overflow: hidden;
  }
  .limit {
    height: auto;
    overflow: hidden;
  }
</style>
