|
|
<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>
|
