<template>
  <!-- HomePage的主布局 -->
  <div class="home-page page1">
    <!-- 内容包装器，用于承载页面元素 -->
    <div class="home-page-wrapper" id="page1-wrapper">
      <!-- 背景文本，通过样式进行位置调整 -->
      <div class="page1-bg" style="transform: translate(0px, 200.953px);">Feature</div>
      <!-- 主标题，描述页面核心内容 -->
      <h2>What can <span>Online System</span> do for you </h2>
      <!-- 标题下装饰线 -->
      <div class="title-line-wrapper page1-line"></div>
      <!-- 使用List组件展示特性列表 -->
      <list :data-source="features" />
    </div>
  </div>
</template>

<script>
// 导入List组件，用于展示特性列表
import List from './List'
// 定义中文特性数组，包含六个特性对象，每个对象有标题、内容、图片链接、颜色和阴影色
const featuresCN = [
  // 特性一：优雅美观
  {
    title: '优雅美观',
    content: '基于 Ant Design 体系精心设计',
    src: 'https://gw.alipayobjects.com/zos/rmsportal/VriUmzNjDnjoFoFFZvuh.svg',
    color: '#13C2C2',
    shadowColor: 'rgba(19,194,194,.12)'
  },
  // 特性二：常见设计模式
  {
    title: '常见设计模式',
    content: '提炼自中后台应用的典型页面和场景',
    src: 'https://gw.alipayobjects.com/zos/rmsportal/smwQOoxCjXVbNAKMqvWk.svg',
    color: '#2F54EB',
    shadowColor: 'rgba(47,84,235,.12)'
  },
  // 特性三：最新技术栈
  {
    title: '最新技术栈',
    content: '使用 Vue/vuex/antd 等前端前沿技术开发',
    src: 'https://gw.alipayobjects.com/zos/rmsportal/hBbIHzUsSbSxrhoRFYzi.svg',
    color: '#F5222D',
    shadowColor: 'rgba(245,34,45,.12)'
  },
  // 特性四：响应式
  {
    title: '响应式',
    content: '针对不同屏幕大小设计',
    src: 'https://gw.alipayobjects.com/zos/rmsportal/BISfzKcCNCYFmTYcUygW.svg',
    color: '#1AC44D',
    shadowColor: 'rgba(26,196,77,.12)'
  },
  // 特性五：最佳实践
  {
    title: '最佳实践',
    content: '良好的工程实践助你持续产出高质量代码',
    src: 'https://gw.alipayobjects.com/zos/rmsportal/pbmKMSFpLurLALLNliUQ.svg',
    color: '#FA8C16',
    shadowColor: 'rgba(250,140,22,.12)'
  },
  // 特性六：UI 测试
  {
    title: 'UI 测试',
    content: '自动化测试保障前端产品质量',
    src: 'https://gw.alipayobjects.com/zos/rmsportal/RpJIQitGbSCHwLMimybX.svg',
    color: '#1890FF',
    shadowColor: 'rgba(24,144,255,.12)'
  }
]

export default {
  // 定义组件名称
  name: 'Page1',
  // 注册组件
  components: {
    List
  },
  // 定义数据属性
  data () {
    return {
      features: featuresCN
    }
  },
  // 在组件创建时调用更新特性列表的方法
  created () {
    this.updateFeatures()
  },
  // 定义方法
  methods: {
    // 更新特性列表，将一维数组转换为二维数组，以便在界面上进行特定布局
    updateFeatures () {
      const arr = featuresCN
      const newArr = [[], [], []]
      arr.forEach((item, index) => {
        newArr[Math.floor(index / 3)].push(item)
      })
      this.features = newArr
    }
  }
}
</script>
