@pisell/layout
Version:
基于 Fusion 设计系统的自然布局体系
244 lines (236 loc) • 8.97 kB
Markdown
---
title: 案例2 - 门户
order: 2
---
居中对齐 demo
```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Box, Button, Divider } from '@alifd/next';
import { Page, Block, Section, Cell, Row, Col, Grid, P, Text } from '@pisell/layout';
import '@alifd/theme-3/variables.css';
class App extends Component {
render() {
return (
<div className="mock-body-portal">
<Page
minHeight="100vh"
breakPoints={[{ width: Infinity, maxContentWidth: 1000, numberOfColumns: 12 }]}
sectionGap={0}
style={{
background: '#f9f9f9',
}}
>
<Section
style={{
minHeight: 460,
background:
'linear-gradient(rgb(227, 229, 233), rgb(237, 238, 242), rgb(232, 233, 238))',
}}
>
<Block mode="transparent">
<Cell verAlign="center" gap={12}>
<P type="h1">Alibaba Fusion Design</P>
<P type="h3">企业级的中后台设计系统解决方案</P>
<P>
<Button type="primary" size="large">
研发文档
</Button>
<Button size="large">设计模式</Button>
</P>
</Cell>
</Block>
</Section>
<Section style={{ background: 'white' }}>
<Block mode="transparent">
<Cell align="center" verAlign="center" style={{ height: 160 }}>
<P type="h2">精选设计系统站点</P>
</Cell>
<Row>
<Cell>
<P>
<img
src="https://img.alicdn.com/tfs/TB1MjfHAbr1gK0jSZFDXXb9yVXa-770-480.png"
style={{ maxWidth: 300 }}
/>
</P>
<P align="left" verAlign="center">
<img
src="https://img.alicdn.com/tfs/TB1awiGBAT2gK0jSZFkXXcIQFXa-44-41.svg"
style={{ width: 32, height: 32 }}
/>
Fusion Design Pro
</P>
</Cell>
<Cell>
<P>
<img
src="https://img.alicdn.com/tfs/TB1lCHFAoz1gK0jSZLeXXb9kVXa-770-480.png"
style={{ maxWidth: 300 }}
/>
</P>
<P align="left" verAlign="center">
<img
src="https://img.alicdn.com/tfs/TB1TOkPua61gK0jSZFlXXXDKFXa-53-53.png"
style={{ width: 32, height: 32 }}
/>
Deep Design Pro
</P>
</Cell>
<Cell>
<P>
<img
src="https://img.alicdn.com/tfs/TB180fGAeL2gK0jSZPhXXahvXXa-770-480.png"
style={{ maxWidth: 300 }}
/>
</P>
<P align="left" verAlign="center">
<img
src="https://gw.alicdn.com/tfs/TB1MbBSvKH2gK0jSZFEXXcqMpXa-60-56.png"
style={{ width: 32, height: 32 }}
/>
InTiger Design
</P>
</Cell>
</Row>
</Block>
<Block mode="transparent">
<Cell align="center" verAlign="center" style={{ height: 160 }}>
<P type="h2">Fusion 的能力</P>
</Cell>
<Grid cols={2} align="center">
<Cell align="center" style={{ width: 260 }}>
<P>
<img
src="https://img.alicdn.com/tfs/TB1T82LAbj1gK0jSZFOXXc7GpXa-360-360.png"
style={{ width: 160 }}
/>
</P>
<P type="h3">企业级的中后台设计系统解决方案</P>
<P type="body1">
基于对阿里集团中后台业务的总结和抽象， 提供了一套开箱即用的核心模式
</P>
</Cell>
<Cell align="center" style={{ width: 260 }}>
<P>
<img
src="https://img.alicdn.com/tfs/TB1T82LAbj1gK0jSZFOXXc7GpXa-360-360.png"
style={{ width: 160 }}
/>
</P>
<P type="h3">企业级的中后台设计系统解决方案</P>
<P type="body1">
基于对阿里集团中后台业务的总结和抽象， 提供了一套开箱即用的核心模式
</P>
</Cell>
<Cell align="center" style={{ width: 260 }}>
<P>
<img
src="https://img.alicdn.com/tfs/TB1T82LAbj1gK0jSZFOXXc7GpXa-360-360.png"
style={{ width: 160 }}
/>
</P>
<P type="h3">企业级的中后台设计系统解决方案</P>
<P type="body1">
基于对阿里集团中后台业务的总结和抽象， 提供了一套开箱即用的核心模式
</P>
</Cell>
<Cell align="center" style={{ width: 260 }}>
<P>
<img
src="https://img.alicdn.com/tfs/TB1T82LAbj1gK0jSZFOXXc7GpXa-360-360.png"
style={{ width: 160 }}
/>
</P>
<P type="h3">企业级的中后台设计系统解决方案</P>
<P type="body1">
基于对阿里集团中后台业务的总结和抽象， 提供了一套开箱即用的核心模式
</P>
</Cell>
</Grid>
<Cell style={{ height: 60 }}></Cell>
</Block>
</Section>
<Section style={{ background: '#f9f9f9' }}>
<Block mode="transparent">
<Row gap={40}>
<Cell
style={{
height: 600,
overflow: 'hidden',
animation: 'up 20s linear 0s infinite',
background:
'url("https://img.alicdn.com/tfs/TB1sx9x1kY2gK0jSZFgXXc5OFXa-1244-2446.png") 50% center / 100%',
}}
></Cell>
<Cell align="center" verAlign="center" gap={20}>
<P type="h2">优秀的团队都在使用 Fusion 助力产品研发</P>
<P type="h5">
“通过对 Fusion 组件库进行封装 ICE，淘宝实现了组件库的全面中台化。极大提高了 B2C
平台的设计协同效率。”
</P>
</Cell>
</Row>
</Block>
</Section>
<Divider style={{ margin: 0 }} />
<Section style={{ background: 'white' }}>
<Block mode="transparent">
<Cell style={{ height: 80 }} />
<Row spacing={40}>
<Cell verAlign="top">
<P type="h3">Alibaba Fusion</P>
<P type="h6">更聪明的工作，让效率突飞猛进</P>
<P type="h6">Work smarter, as easy as blowing off dust</P>
</Cell>
<Col>
<Cell verAlign="top" style={{ height: 200 }}>
<P type="h6">Fusion 官方物料（200px height 没生效)</P>
<P>Fusion Next PC 组件库</P>
<P>Fusion Mobile 组件库</P>
<P>Fusion 官方推荐组件</P>
</Cell>
<Cell verAlign="top">
<P type="h6">开发者社区</P>
<P>Fusion Github</P>
<P>在 Fusion Github 开发者社群您可以提 Issue 或贡献组件</P>
</Cell>
</Col>
<Cell verAlign="top">
<P type="h6">相关资源</P>
<P>Done-Client Sketch Plugin</P>
<P>BizCharts</P>
<P>Fusion 官方推荐组件</P>
</Cell>
</Row>
<Cell style={{ height: 80 }} />
</Block>
</Section>
</Page>
</div>
);
}
}
ReactDOM.render(
<div className="mock-iframe-portal">
<App />
</div>,
mountNode,
);
```
```css
.mock-iframe-portal {
border: 3px solid black;
border-radius: 12px;
overflow: hidden;
--page-max-content-width: 1000px;
}
@keyframes up {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -1132.5px;
}
}
```