├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── FUNDING.yml ├── .gitignore ├── .stylelintrc ├── CNAME ├── LICENSE ├── README-zh_CN.md ├── README.md ├── docs ├── cases.md ├── download.md ├── edit │ ├── edit-block.md │ └── video.md ├── guide │ ├── banner.md │ ├── content.md │ ├── examples.md │ ├── header-footer.md │ ├── layout.md │ └── type.md ├── introduce.md └── use │ ├── create-react-app.en-US.md │ ├── create-react-app.zh-CN.md │ ├── dumi.md │ ├── dva-cli.md │ ├── getting-started.md │ ├── pro-1-x.md │ ├── pro.md │ └── umi.md ├── documentation.md ├── index.text ├── package.json ├── prettier ├── install-service-worker.js ├── lib │ ├── index.js │ ├── parser-babylon.js │ ├── parser-flow.js │ ├── parser-glimmer.js │ ├── parser-graphql.js │ ├── parser-markdown.js │ ├── parser-parse5.js │ ├── parser-postcss.js │ ├── parser-typescript.js │ ├── parser-vue.js │ └── sw-toolbox.js ├── service-worker.js └── worker.js ├── renovate.json ├── site ├── bisheng.common.config.js ├── bisheng.edit.config.js ├── bisheng.index.config.js ├── bisheng.templates.config.js ├── edit │ ├── en-US.js │ ├── index.js │ ├── static │ │ ├── banner-slide.less │ │ ├── common.less │ │ ├── content.less │ │ ├── custom.less │ │ ├── edit-influence.less │ │ ├── edit-list │ │ │ ├── box-model.less │ │ │ ├── child.less │ │ │ ├── collapse.less │ │ │ ├── common.less │ │ │ ├── custom.less │ │ │ ├── editor-bg-image.less │ │ │ ├── editor-color.less │ │ │ ├── editor-font.less │ │ │ ├── editor-gradient.less │ │ │ └── index.less │ │ ├── edit-stage.less │ │ ├── index.html │ │ ├── index.less │ │ ├── login-controller.less │ │ ├── nav-controller.less │ │ ├── other-view.less │ │ ├── side-menu.less │ │ ├── sort.less │ │ └── style.js │ ├── template │ │ ├── NotFound.jsx │ │ ├── component.config.js │ │ ├── components │ │ │ ├── EditInfluence.jsx │ │ │ ├── EditListController.jsx │ │ │ ├── EditStageController.jsx │ │ │ ├── Iframe.jsx │ │ │ ├── ListComponents │ │ │ │ ├── CheckboxGroup.jsx │ │ │ │ ├── ChildComp.jsx │ │ │ │ ├── EditorComp.jsx │ │ │ │ ├── EditorOther.jsx │ │ │ │ ├── InputGroup.jsx │ │ │ │ └── PropsComp.jsx │ │ │ ├── MediumEditor.jsx │ │ │ ├── NavController │ │ │ │ ├── HistoryButton.jsx │ │ │ │ ├── NewFileButton.jsx │ │ │ │ ├── PublishModal.jsx │ │ │ │ └── index.jsx │ │ │ ├── SideMenu.jsx │ │ │ ├── StateComponents │ │ │ │ ├── ButtonViewComponent │ │ │ │ │ ├── ContentEditView.jsx │ │ │ │ │ ├── ContentEditViewItem.jsx │ │ │ │ │ ├── ContentWrapper.jsx │ │ │ │ │ ├── IconComp.jsx │ │ │ │ │ ├── ImageComp.jsx │ │ │ │ │ ├── LinkComp.jsx │ │ │ │ │ ├── MenuComp.jsx │ │ │ │ │ ├── MenuEditView.jsx │ │ │ │ │ ├── TextyComp.jsx │ │ │ │ │ └── VideoComp.jsx │ │ │ │ ├── EditButtonView.jsx │ │ │ │ ├── ListSort.jsx │ │ │ │ └── SwitchSlideView.jsx │ │ │ └── saveJsZip.jsx │ │ ├── index.jsx │ │ ├── layout.jsx │ │ ├── template.config.js │ │ └── utils.jsx │ └── zh-CN.js ├── shared │ ├── constants.js │ ├── defaultTemplate.js │ ├── leancloud.js │ ├── localStorage.js │ ├── redux │ │ ├── actionTypes.js │ │ ├── actions.js │ │ ├── index.js │ │ ├── reducers │ │ │ ├── currentEditData.js │ │ │ ├── historyEdit.js │ │ │ ├── index.js │ │ │ ├── mediaStateSelect.js │ │ │ ├── templateData.js │ │ │ └── userIsLogin.js │ │ └── saga.js │ ├── url.js │ └── utils.js ├── templates │ ├── index.js │ ├── static │ │ ├── bottom-func-bar.less │ │ ├── common.less │ │ ├── content.less │ │ ├── custom.less │ │ ├── index.html │ │ ├── index.less │ │ ├── lessToString.jsx │ │ └── point.less │ └── template │ │ ├── BottomBar.jsx │ │ ├── NotFound.jsx │ │ ├── element │ │ ├── Banner0 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Banner1 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Banner2 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Banner3 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Banner4 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Banner5 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content0 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content1 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content10 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content11 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content12 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content13 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content2 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content3 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content4 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content5 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content6 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content7 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content8 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Content9 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Feature6 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Feature7 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Feature8 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Footer0 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Footer1 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Footer2 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Nav0 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Nav1 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Nav2 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Nav3 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Pricing0 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Pricing1 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Pricing2 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Teams0 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Teams1 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Teams2 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ ├── Teams3 │ │ │ ├── index.jsx │ │ │ ├── index.less │ │ │ └── template.config.js │ │ └── template.config.js │ │ ├── index.jsx │ │ ├── layout.jsx │ │ ├── other │ │ ├── Point.jsx │ │ └── otherToString.jsx │ │ └── utils.jsx ├── theme │ ├── en-US.js │ ├── index.js │ ├── static │ │ ├── antd.less │ │ ├── common.less │ │ ├── default.less │ │ ├── footer.less │ │ ├── header.less │ │ ├── home │ │ │ ├── banner.less │ │ │ ├── index.less │ │ │ ├── page1.less │ │ │ ├── page2.less │ │ │ ├── page3.less │ │ │ ├── page4.less │ │ │ └── responsive.less │ │ ├── index.less │ │ ├── page │ │ │ ├── highlight.less │ │ │ ├── index.less │ │ │ ├── markdown.less │ │ │ ├── page-nav.less │ │ │ ├── responsive.less │ │ │ └── toc.less │ │ ├── preview-img.less │ │ ├── responsive.less │ │ ├── style.js │ │ └── template.html │ ├── template │ │ ├── Content │ │ │ ├── Article.jsx │ │ │ ├── EditButton.jsx │ │ │ ├── MainContent.jsx │ │ │ └── index.jsx │ │ ├── Home │ │ │ ├── Banner.jsx │ │ │ ├── Page1.jsx │ │ │ ├── Page2.jsx │ │ │ ├── Page3.jsx │ │ │ ├── Page4.jsx │ │ │ ├── component │ │ │ │ ├── ImageLoadComp.jsx │ │ │ │ ├── Templates.jsx │ │ │ │ ├── WaterfallLayout.jsx │ │ │ │ └── data.json │ │ │ ├── index.jsx │ │ │ └── utils.jsx │ │ ├── Layout │ │ │ ├── Footer.jsx │ │ │ ├── Header.jsx │ │ │ ├── Layout.jsx │ │ │ ├── PhoneNav.jsx │ │ │ └── index.jsx │ │ ├── NotFound.jsx │ │ ├── Other │ │ │ ├── Cases.jsx │ │ │ ├── Download.jsx │ │ │ ├── cases.less │ │ │ └── download.less │ │ └── utils.jsx │ └── zh-CN.js └── utils.jsx └── webpack.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | 15 | [Makefile] 16 | indent_style = tab -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | _site 3 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: ant-design-landing 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | custom: # Replace with a single custom sponsorship URL 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .idea/ 3 | .ipr 4 | .iws 5 | *~ 6 | ~* 7 | *.diff 8 | *.patch 9 | *.bak 10 | .DS_Store 11 | Thumbs.db 12 | .project 13 | .*proj 14 | .svn/ 15 | *.swp 16 | *.swo 17 | *.pyc 18 | *.pyo 19 | node_modules 20 | dist 21 | psd 22 | old 23 | _site 24 | .vscode -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard", 3 | "rules": { 4 | "comment-empty-line-before": null, 5 | "declaration-empty-line-before": null, 6 | "function-comma-newline-after": null, 7 | "function-name-case": null, 8 | "function-parentheses-newline-inside": null, 9 | "function-max-empty-lines": null, 10 | "function-whitespace-after": null, 11 | "indentation": null, 12 | "number-leading-zero": null, 13 | "number-no-trailing-zeros": null, 14 | "rule-empty-line-before": null, 15 | "selector-combinator-space-after": null, 16 | "selector-list-comma-newline-after": null, 17 | "selector-pseudo-element-colon-notation": null, 18 | "unit-no-unknown": null, 19 | "value-list-max-empty-lines": null, 20 | "no-descending-specificity": null 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | landing.ant.design -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT LICENSE 2 | 3 | Copyright (c) 2015-present Alipay.com, https://www.alipay.com/ 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining 6 | a copy of this software and associated documentation files (the 7 | "Software"), to deal in the Software without restriction, including 8 | without limitation the rights to use, copy, modify, merge, publish, 9 | distribute, sublicense, and/or sell copies of the Software, and to 10 | permit persons to whom the Software is furnished to do so, subject to 11 | the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be 14 | included in all copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 19 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 20 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 21 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 22 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 23 | -------------------------------------------------------------------------------- /README-zh_CN.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 |

Ant Design Landing

7 |
Ant Design 的 Landing Page 模板与设计指引
8 | 9 |
10 | 此网站的内容是从 Ant Motion 模板区块中分离出来. 11 |
12 | 13 |
English | 简体中文
14 | 15 | ## 什么是Landing? 16 | 17 | Landing 是运用 Ant Motion 动效组件来搭建完成的页面模板，拥有丰富的各类首页模板，下载模板代码包，即可快速使用，也可使用首页编辑器，快速搭建一个属于你的专属首页。 18 | 19 | ## 三大特性 20 | 21 | - [设计指引](https://landing.ant.design/docs/introduce) 22 | - [源文件下载](https://landing.ant.design/docs/download) 23 | - [响应式布局](https://landing.ant.design/docs/guide/layout) 24 | 25 | 26 | ## 丰富的模板 27 | 28 | 拥有丰富的各类首页模板提供下载。 29 | 30 | [![](https://user-images.githubusercontent.com/6802825/47977555-ac77b080-e0f3-11e8-90f3-6aa04cce5351.jpg)](http://landing.ant.design) 31 | 32 | ## 丰富的模块 33 | 34 | 多样的模块，可灵活又快速的配置出你想要的首页模板。 35 | 36 | 37 |
38 | 39 |
40 | 41 | [进入编辑 😀](https://landing.ant.design/edit) 42 | 43 | ## 脚手架里的示例 44 | 45 | [生成首页在 dva-cli 里运行的例子](https://github.com/ant-motion/ant-motion-dva-cli-example) 46 | 47 | [生成首页在 umi 里运行的例子](https://github.com/ant-motion/landing-umi-example) 48 | 49 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 | 5 |

6 |

Ant Design Landing

7 | 8 |
9 | 10 | Landing Pages of Ant Design System 11 | 12 | [![Dependencies](https://img.shields.io/david/ant-design/ant-design-landing.svg)](https://david-dm.org/ant-design/ant-design-landing) 13 | [![DevDependencies](https://img.shields.io/david/dev/ant-design/ant-design-landing.svg)](https://david-dm.org/ant-design/ant-design-landing?type=dev) 14 | 15 |
16 | 17 |
English | 简体中文
18 | 19 | ## What is Landing? 20 | 21 | Landing is a template built by Ant Motion's motion components. It has a rich homepage template, downloads the template code package, and can be used quickly. You can also use the editor to quickly build your own dedicated page. 22 | 23 |
24 | Go Editing 📝 25 |
26 | 27 | ## Features 28 | 29 | - [Specifications](https://landing.ant.design/docs/introduce) 30 | - [Download](https://landing.ant.design/docs/download) 31 | - [Responsive](https://landing.ant.design/docs/guide/layout) 32 | 33 | ## Templates 34 | 35 | Has a wealth of various page templates to provide downloads. 36 | 37 | [![](https://user-images.githubusercontent.com/6802825/47977555-ac77b080-e0f3-11e8-90f3-6aa04cce5351.jpg)](http://landing.ant.design) 38 | 39 | ## Modules 40 | 41 | Diverse modules, you can quickly and flexibly configure the page template you want. 42 | 43 |
44 | 45 |
46 | 47 | ## Example in scaffolding 48 | 49 | - [dva-cli-example](https://github.com/ant-motion/ant-motion-dva-cli-example) 50 | - [umi-example](https://github.com/ant-motion/landing-umi-example) 51 | -------------------------------------------------------------------------------- /docs/cases.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | title: 4 | zh-CN: 实践案例 5 | en-US: Case 6 | --- 7 | 8 | 目前在外部也有许多产品实践，如果你的页面想在这里展现，[欢迎留言](https://github.com/ant-design/ant-motion/issues/30)。 9 | 10 | ```__react 11 | const casesData = [ 12 | { title: '蚂蚁科技官网', content: '蚂蚁金融科技，数字金融新原力', url: 'https://tech.antfin.com/', img: 'https://gw.alipayobjects.com/zos/rmsportal/vHQCWlZGnFSYiPOnbluw.jpg' }, 13 | { title: 'Ant Design官网', content: '服务于企业级产品的设计体系。', url: 'https://ant.design/', img: 'https://gw.alipayobjects.com/zos/rmsportal/yYQUqTuAxwHzSgGEGqkE.jpg' }, 14 | { title: '闪蝶', content: '提供专业的云上建站服务，满足不同行业的个性化需求', url: 'https://morpho.alipay.com/domain-intro', img: 'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*YHa3S5yO6EsAAAAAAAAAAABkARQnAQ' }, 15 | { title: '智能物料设计平台', content: '花更少的时间做更专业的物料', url: 'https://chitu.alipay.com/', img: 'https://gw.alipayobjects.com/zos/rmsportal/aBwXHHpGMhIrnhUPUYVW.jpg' }, 16 | ]; 17 | 18 | import React from 'react'; 19 | import Demo from '../site/theme/template/Other/Cases'; 20 | ReactDOM.render(, mountNode); 21 | ``` -------------------------------------------------------------------------------- /docs/download.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | title: 4 | zh-CN: 设计资源 5 | en-US: Download Sketch 6 | --- 7 | 8 | 这里提供以 Ant Design 设计规范完成的相关设计资源，更多设计资源正在整理和完善中。 9 | 10 | ```__react 11 | const downloadData = [ 12 | { title: '基础模板', content: '百搭型产品 Landing 模板，拼搭自已的专属产品 Landing Page', name: 'basic', url: 'https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Landing.Template.sketch', img: 'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*an5vQIKuBLgAAAAAAAAAAABkARQnAQ' }, 13 | { title: 'Ant Design Home 3.0', content: 'Ant Design 首页的源文件', name: 'antd', url: 'https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.home-3.0.sketch', img: 'https://gw.alipayobjects.com/zos/rmsportal/JhuPtNExKmpFjYKxBSZg.jpg' }, 14 | { title: 'Ant Design Landing', content: 'Ant Design Landing 首页的源文件', name: 'landing', url: 'https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Landings.home.noImg.sketch', img: 'https://gw.alipayobjects.com/mdn/rms_ae7ad9/afts/img/A*Ke86RZXx9SkAAAAAAAAAAABjARQnAQ' }, 15 | ]; 16 | 17 | import React from 'react'; 18 | import Demo from '../site/theme/template/Other/Download'; 19 | ReactDOM.render(, mountNode); 20 | ``` -------------------------------------------------------------------------------- /docs/edit/video.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | category: 4 | zh-CN: 编辑器教程 5 | en-US: Edit-help 6 | title: 7 | zh-CN: 视频教程 8 | en-US: Video help 9 | --- 10 | 11 | ```__react 12 | import React from 'react'; 13 | function Demo(){ 14 | return ( 15 |
16 |
18 | ) 19 | } 20 | ReactDOM.render(, mountNode); 21 | ``` -------------------------------------------------------------------------------- /docs/guide/banner.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | category: 4 | zh-CN: 设计指引 5 | en-US: Guide 6 | title: 7 | zh-CN: Banner 首屏 8 | en-US: Banner 9 | --- 10 | 11 | Banner 是整个展示页面最重要的组成部分之一，一般介绍产品的名称和简介，并且体现整体产品的风格走向。 12 | 13 | 高度为 750px 为例： Banner 一屏的设计尺寸为 1200\*750px，半屏的设计尺寸为 1200\*375px（多用于技术类的产品），主要由单屏和多屏滚动两种类型： 14 | 15 | ## 单屏布局一 16 | 17 | 单屏布局一 18 | 19 | 1）全屏背景图； 20 | 21 | 2）标题、文案和按钮与页面居中对齐； 22 | 23 | ## 单屏布局二 24 | 25 | 单屏布局二 26 | 27 | 1）主图在页面左侧，标题、文案和按钮在页面右侧； 28 | 29 | 2）建议文案和button部分左对齐； 30 | 31 | ## 单屏布局三 32 | 33 | 单屏布局三 34 | 35 | 1）主图在页面右侧，标题、文案和按钮在页面左侧； 36 | 37 | 2）建议文案和button部分左对齐； 38 | 39 | ## 单屏布局四 40 | 41 | 单屏布局四 42 | 43 | 1）主图在页面下方； 44 | 45 | 2）标题、文案和button与页面居中对齐； 46 | 47 | ## 多屏滚动类 48 | 49 | 多屏滚动类 50 | 51 | 1）多屏Headers组合，底部有走马灯滚动轮播； 52 | 53 | 2）建议滚动屏不超过5个； 54 | 55 | 56 | ## 半屏类型 57 | 58 | 半屏类型 59 | 60 | 1）半屏的设计尺寸为1200*375px； 61 | 62 | 2）排版方式和类别与整屏的相同（在此列举其中一种）； -------------------------------------------------------------------------------- /docs/guide/content.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | category: 4 | zh-CN: 设计指引 5 | en-US: Guide 6 | title: 7 | zh-CN: 内容区块 8 | en-US: Content 9 | --- 10 | 11 | 内容页一般用来介绍产品的功能、特性以及相关信息。展示型页面中可选择添加内容页（或多个内容页组合），也可以选择不添加。 12 | 每一屏的最小设计尺寸为 1200*375px，可以自由灵活的选择多种模板进行拼接。 13 | 14 | > 我们将分点阐述、合作伙伴/客户、价格表、团队展示、联系我们等合称为内容区块。 15 | 16 | 17 | ## 全屏式 18 | 19 | 全屏式 20 | 21 | 1）全屏背景图； 22 | 23 | 2）标题、文案和按钮与页面居中对齐； 24 | 25 | ## 两栏式1 26 | 27 | 两栏式1 28 | 29 | 1）主介绍图在页面左侧，标题文案在页面右侧； 30 | 31 | 2）标题和文案内容左对齐 32 | 33 | ## 两栏式2 34 | 35 | 两栏式2 36 | 37 | 1）主介绍图在页面右侧，标题文案在页面左侧； 38 | 39 | 2）标题和文案内容左对齐； 40 | 41 | ## 单行多栏式 42 | 43 | 单行多栏式 44 | 45 | 1）内容区块按栅格均分； 46 | 47 | 2）一行可放置3~4个并列区块（建议不超过4个）； 48 | 49 | ## 双行多栏式1 50 | 51 | 双行多栏式1 52 | 53 | 1）内容区块按栅格均分； 54 | 55 | 2）一行可放置2~3个并列区块（建议不超过3个）； 56 | 57 | ## 双行多栏式2 58 | 59 | 双行多栏式2 60 | 61 | 1）内容区块按栅格均分； 62 | 63 | 2）一行可放置3~5个并列内容区（建议不超过5个）； 64 | 65 | 66 | ## 半屏设计模板 67 | 68 | 半屏设计模板 69 | 70 | 1）半屏的设计尺寸为 1200*375px； 71 | 72 | 2）排版方式和类别与整屏的相同（再次列举其中两种））； 73 | 74 | 半屏设计模板 -------------------------------------------------------------------------------- /docs/guide/examples.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 5 3 | category: 4 | zh-CN: 设计指引 5 | en-US: Guide 6 | title: 7 | zh-CN: 组合示例 8 | en-US: Examples 9 | --- 10 | 11 | ## 示例 12 | 13 | 我们将以上模板整合出三个模板，以供参考： 14 | 15 |
16 |
17 | 18 |

示例1

19 |
20 |
21 | 22 |

示例2

23 |
24 |
25 | 26 |

示例3

27 |
28 |
29 | 30 | -------------------------------------------------------------------------------- /docs/guide/header-footer.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | category: 4 | zh-CN: 设计指引 5 | en-US: Guide 6 | title: 7 | zh-CN: 页头与页尾 8 | en-US: Header and Footer 9 | --- 10 | 11 | 页头承载的是品牌信息与整个网站的结构信息，明确的告知我们网站里最主要的几块内容。 12 | 13 | 页尾则是一个网站的落款，提供的相关的产品信息、友情链接与版权信息。 14 | 15 | ## 顶部页头导航 16 | 17 | 顶部导航高度为 64px, 主要展示 logo、基本导航内容、用户相关信息。 我们提供了三种示例供调选： 18 | 19 | ### 基本型页头导航 20 | 21 | 基本型页头导航 22 | 23 | 由 logo 与基本导航内容组成。 24 | 25 | ### 用户信息页头导航 26 | 27 | 用户信息页头导航 28 | 29 | 如果有登录信息或其它信息需要在导航展现时，我们可以在导航基本内容右侧添加其它信息。 30 | 31 | ### 单 logo 页头 32 | 33 | 单 logo 页头 34 | 35 | 如果不需要导航时，我们建议将背景设为透明，将 logo 融入首屏里。此处只展示类型。 36 | 37 | ## 页脚 38 | 39 | Footer（页脚）作为展示页中也非常重要的一部分，在页面的最底部，包含的信息内容为：实用导航，语言选择，社交链接，帮助和支持，版权和隐私声明等。 40 | 41 | ### 单版权信息 42 | 43 | 单版权信息 44 | 45 | 页尾不需要任何信息内容时。 46 | 47 | ### 内容较少 48 | 49 | 内容较少 50 | 51 | 页尾内容比较少时。 52 | 53 | 54 | ### 内容较多 55 | 56 | 内容较多 57 | 58 | 页尾内容比较多时。 -------------------------------------------------------------------------------- /docs/guide/layout.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 1 3 | category: 4 | zh-CN: 设计指引 5 | en-US: Guide 6 | title: 7 | zh-CN: 布局 8 | en-US: Layout 9 | --- 10 | 11 | Ant Design 目前提供了两套布局方案: [Layout](https://ant.design/components/layout-cn/) 和 [Grid](https://ant.design/components/grid-cn/), 同样 Landing 的整体布局也是以 8 的倍数来计算。我们以页面宽度来做整体布局，提供以下两种类型: 12 | 13 | --- 14 | 15 | ## 百分比类型 16 | 17 | 100% 类型示例 18 | 19 | 100% 类型，内容的宽度为 92%, 左右边距为 4%; 20 | 21 | 需要注意： 在 banner 使用百分比类型布局后，导航必需也使用百分比类型； 22 | 23 | 24 | --- 25 | 26 | ## 像素类型 27 | 28 | 像素类型示例 29 | 30 | 以 1152px 为最大宽度为例，为在响应式方面保证更好的预览效果，我们在最大宽度外面增加了 24px 的边距, 避免屏幕尺寸在低于 1152px 的时候内容贴边, 于是需要将内容区域的最大宽度改为 1200px，再增加 24px 的内边距 `padding: 0 24px`。 31 | -------------------------------------------------------------------------------- /docs/guide/type.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | category: 4 | zh-CN: 设计指引 5 | en-US: Guide 6 | title: 7 | zh-CN: 类型 8 | en-US: Type 9 | --- 10 | 11 | 展示类页面（Display Page）一般是指当用户进入某个网站时浏览到的第一个页面，也可以当作着陆页（Landing Page）来吸引用户的注意。在此，我们归纳整理了几种最常见的展示类模板，可以用于灵活的搭配组合。 12 | 13 | 我们对 Landing Page 做了以下两种类型： 14 | 15 | --- 16 | 17 | ## 分步浏览 18 | 19 | 分步浏览示例 20 | 21 | 分步浏览展示产品的主要信息，通过精彩的视觉，动效，使用户增加产品认知，提升使用兴趣，提供试用机制，进而达到转化目的 22 | 适用产品范围较广。 23 | 24 | 规范： 25 | 26 | 1. 分点阐述：数量不宜过多，建议3-5条。 27 | 28 | 2. CTA：此为转化的重要环节，一定要做的显著，且随时随地都可触达且明确告知用户付出与收获。 29 | 30 | 3. 客户证言：用真实信息，建议有真实个人或公司照片。如非有名客户，建议具体说明帮他解决的问题和使用体验。 31 | 32 | --- 33 | 34 | ## 邀请注册 35 | 36 | 邀请注册示例 37 | 38 | 一屏之内展示出产品卖点或价值主张，突出显示 CTA。主要目的在于快速留住游客，是指直接转化为使用者。 39 | 40 | 常用于功能较为单一，属于社交型、服务型等需要获取用户信息，建立用户联系的产品。 41 | 42 | 规范： 43 | 44 | 1. USP：一句话阐述核心竞争力，字体较大，不宜过长，力求简单好记。 45 | 46 | 2. 媒体展示：与 USP 内容相关。如用视频，长度建议1~3分钟。 47 | 48 | 3. CTA 登录/注册：尽量优化注册流程，或提供第三方社交账号登录。 49 | 50 | 4. 不建议在注册前就为用户提供较多的价值和内容。 -------------------------------------------------------------------------------- /docs/introduce.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 0 3 | title: 4 | zh-CN: 介绍 5 | en-US: Introduce 6 | --- 7 | 8 | 9 | 10 | 19 | 20 | Ant Design Landing 是针对产品首页的解决方案，我们秉承 [Ant Design](https://ant.design) 的 [设计价值观](https://ant.design/docs/spec/introduce-cn)，延用 [Ant Design](https://ant.design) 的 [设计原则](http://ant.design/docs/spec/proximity-cn)，可以快速搭建出你想要的首页，进一步提升你的工作效率。随着『设计者』的不断反馈，我们将持续迭代，逐步沉淀和总结出更多首页模块的代码实现，阐述首页(Landing page)的最佳实践，也十分期待你的参与和共建。 21 | 22 | ## 作用 23 | 24 | - 激发用户的探索兴趣，继续深入访问。 25 | - 引导用户直接购买产品或服务。 26 | - 用户通过提供个人信息或注册来交换一些试用与服务。 27 | - 让用户分享、评论或产生其它一些互动。 28 | 29 | ## 构成元素 30 | 31 | - 全局导航 32 | - 首屏阐述 Banner: 33 | > - USP(unique selling proposition) 产品卖点或价值主张: 产品 logo，名称，slogan， 媒体展示(背景，图片，视频)。 34 | > - CTA(Call-To-Action): 行动按钮，登录/ 注册。 35 | - 分点阐述: 36 | > - 产品特色/优势。 37 | > - 使用方法 + 核心功能 + 解决方案 38 | - 合作伙伴/客户: 成功案例，客户展示，客户证言。 39 | - 价格表 40 | - 团队展示 41 | - 联系我们 42 | - 全局页脚 43 | 44 | ### 动效 45 | 46 | 延用 [Ant Motion](https://motion.ant.design) 动画组件与规范，提供基本的动画组件与 banner 切换效果，以 `scroll-anim` 组件为基本动画框架，随滚动来完成页面的进出场效果。 47 | 48 | - [单元素动效执行组件](https://motion.ant.design/components/tween-one) 49 | - [样式进出场组件](https://motion.ant.design/components/animate) 50 | - [队列进出场组件](https://motion.ant.design/components/queue-anim) 51 | - [文字动效组件](https://motion.ant.design/components/texty) 52 | - [随滚动执行效果组件](https://motion.ant.design/components/scroll-anim) 53 | - [Banner 切换效果组件](https://motion.ant.design/components/banner-anim) 54 | 55 | ## 设计资源 56 | 57 | 我们提供完善的设计规范、最佳实践和设计资源文件 Sketch，来帮助业务快速设计出高质量的产品原型。 58 | 59 | 60 | ## 谁在使用 61 | 62 | 目前 Ant Design 旗下产品全部使用 Landing 搭建，如果你和你的组织使用了这个产品，欢迎到 Ant Design Landing Users 留言。 63 | 64 | 65 | ### For 设计者 66 | 67 | 如果你是产品或设计师，你可以找到相关模板或各模块的 Sketch 设计资源，大幅度提升设计效率和沟通效率。 68 | 69 | ### For 开发者 70 | 71 | 如果你是工程师，只需将你下载的以『Home』为名的文件包替换掉你的项目里的首页即可，具体介绍请查看 [使用文档](/docs/use/getting-started)。 72 | 73 | 74 | ## 如何贡献 75 | 76 | 我们欢迎任何形式的贡献，有任何建议或意见，请给我们 [提问]()。 77 | -------------------------------------------------------------------------------- /docs/use/dumi.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 2 3 | category: 4 | zh-CN: 使用教程 5 | en-US: Tutorial 6 | title: 7 | zh-CN: dumi 里使用 8 | en-US: Use in dumi 9 | --- 10 | 11 | [dumi](https://d.umijs.org/) 基于 [Umi](https://umijs.org/)、为组件开发场景而生的文档工具 12 | 13 | 使用 demo 地址请查看 [dumi-example](https://github.com/ant-motion/landing-dumi-example); 14 | 15 | ## 文件路径 16 | 17 | 我们首先初始化一个站点模式的组件库开发脚手架, 如果没装安 dumi 的，请先查看 dumi 的[轻松上手](https://d.umijs.org/#%E8%BD%BB%E6%9D%BE%E4%B8%8A%E6%89%8B) 18 | ``` 19 | $ npx @umijs/create-dumi-lib --site 20 | ``` 21 | 安装完后，再将 Home 复制到 docs 里，我们的文件目录为： 22 | 23 | ``` 24 | │── docs 25 | + │── Home 26 | | └── index.md 27 | │── src 28 | │ │── Foo 29 | │ │── index.ts 30 | │ └── ... 31 | │── package.json 32 | │── ... 33 | ``` 34 | 35 | ## 安装依赖 36 | 37 | 安装 dumi 里的依赖: `npm install`; 38 | 39 | 我们组件的依赖详细参考[开始使用里的安装依赖](docs/use/getting-started#安装依赖); 40 | 41 | ## 修改首页 42 | 43 | 更改 index.md, 删掉全部内容，增加 gapless: true, 再在下面添加 code， 最后的 index.md 如下: 44 | 45 | ``` 46 | --- 47 | gapless: true 48 | --- 49 | 50 | 51 | ``` 52 | ## 删除 Home 里的 md 文件 53 | 54 | 将 documentation.md 从文件包里删除； 55 | 56 | ## 完成 57 | 58 | 完成以上步骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板。 59 | -------------------------------------------------------------------------------- /docs/use/dva-cli.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 3 3 | category: 4 | zh-CN: 使用教程 5 | en-US: Tutorial 6 | title: 7 | zh-CN: dva-cli 里使用 8 | en-US: Use in dva 9 | --- 10 | [dva](https://github.com/dvajs/dva) 脚手架为 ant design 提供的基于 redux、redux-saga 和 react-router 比较完善的轻量级前端框架，具体教程[请查看](https://github.com/sorrycc/blog/issues/18)。 11 | 12 | 如何使用 demo 地址请查看 [dva-cli-example](https://github.com/ant-motion/ant-motion-dva-cli-example); 13 | 14 | 基本配置请查看 [开始使用](docs/use/getting-started); 15 | 16 | ## 文件路径 17 | 18 | [dva-cli](https://github.com/dvajs/dva-cli) 脚手架的文件目录为 `src/routes`, 首先我们需要将下载的 Home 文件包直接复制到 routes 文件夹下。 19 | 20 | ## 修改路由 21 | 22 | 复制完成后，我们需要将主页入口修改成以上复制的文件目录。 23 | 24 | ```jsx 25 | import IndexPage from './routes/Home'; 26 | ``` 27 | 28 | ## CSS Modules 29 | 30 | dva 默认使用了 `css-modules`，同样我们提供了两套解决方案。 31 | 32 | ### 关闭 css-modules 33 | 34 | 如果你当前项目为新项目，且对 `css-modules` 并不是太了解，可以选择关闭 `css-modules`，只需要在 `.roadhogrc` 文件里加上 `"disableCSSModules": true` 即可。 35 | ```json 36 | { 37 | "entry": "src/index.js", 38 | + "disableCSSModules": true, // 加在此处 39 | "env": { 40 | "development": { 41 | "extraBabelPlugins": [ 42 | "dva-hmr", 43 | "transform-runtime" 44 | ] 45 | }, 46 | "production": { 47 | "extraBabelPlugins": [ 48 | "transform-runtime" 49 | ] 50 | } 51 | }, 52 | } 53 | ``` 54 | 55 | ### 使用 global 56 | 57 | 使用 `css-modules` 的 `global`, 在 `index.less` 里添加 `:global`, 将样式不作转换, `global` 具体使用[请查看开始使用](/docs/use/getting-started#样式)。 58 | 59 | 60 | ## 按需加载 61 | 62 | dva 里使用 `babel-plugin-import` 我们只需要 `.roadhogrc` 文件里添加 `["import", { "libraryName": "antd", "style": true }]` 即可。 63 | 64 | ```json 65 | 66 | { 67 | "entry": "src/index.js", 68 | "env": { 69 | "development": { 70 | "extraBabelPlugins": [ 71 | "dva-hmr", 72 | "transform-runtime", 73 | ["import", { "libraryName": "antd", "style": true }] 74 | ] 75 | }, 76 | "production": { 77 | "extraBabelPlugins": [ 78 | "transform-runtime", 79 | ["import", { "libraryName": "antd", "style": true }] 80 | ] 81 | } 82 | }, 83 | } 84 | ``` 85 | 86 | ## 完成 87 | 88 | 完成以上频骤之后，我们再启动 `npm start` 即可查看在 landing 上下载的模板。 -------------------------------------------------------------------------------- /docs/use/pro.md: -------------------------------------------------------------------------------- 1 | --- 2 | order: 4 3 | category: 4 | zh-CN: 使用教程 5 | en-US: Tutorial 6 | title: 7 | zh-CN: pro 里使用 8 | en-US: Use in pro 9 | --- 10 | 11 | [Ant Design pro](https://pro.ant.design) 是 Ant Design 推出的一个开箱即用的中台前端/设计解决方案。 12 | 13 | ## 文件路径 14 | 15 | [Ant Design pro v2.x](https://pro.ant.design) 使用的为 umi 脚手架，文件目录同样为 `src/pages`, 首先我们需要将下载的 Home 文件包直接复制到 `pages` 文件夹下。 16 | 17 | ## 修改路由 18 | 19 | 文件目录： `config/router.config.js`； 20 | 21 | 修改 `dashboard` 的路由， 增加 `Home` 路由； 22 | 23 | ```js 24 | export default [ 25 | + { path: '/', component: './Home' }, // 增加 Home 路由 26 | // user 27 | { 28 | path: '/user', 29 | ... 30 | }, 31 | // app 32 | { 33 | - path: '/', 34 | + path: '/dashboard', // 更改 dashboard 路由； 35 | component: '../layouts/BasicLayout', 36 | Routes: ['src/pages/Authorized'], 37 | authority: ['admin', 'user'], 38 | ... 39 | }, 40 | ]; 41 | ``` 42 | 43 | ## 安装依赖 44 | 45 | 详细参考[开始使用里的安装依赖](docs/use/getting-started#安装依赖); 46 | 47 | ## CSS Modules 48 | 49 | 多方案请查看 [umi 里使用的 css module](/docs/use/umi#CSS-Modules); 50 | 51 | 这里推荐使用 css-module 的 global; 52 | 53 | antMotionStyle.less 如下 54 | 55 | ``` 56 | :global { 57 | @import './common.less'; 58 | @import './custom.less'; 59 | @import './content.less'; 60 | @import './nav0.less'; 61 | @import './banner0.less'; 62 | ... 63 | } 64 | ``` 65 | 66 | ## 暂时先删除换肤插件 67 | 68 | 由于换肤插件需要重新 build 全部的 less, 暂时不支持 landing 的 less，所以我们先暂时删除换肤插件。 69 | 70 | 文件目录：`config/config.js`; 71 | 72 | 删除 `webpackPlugin` 相关的代码： 73 | ```jsx 74 | // https://umijs.org/config/ 75 | import os from 'os'; 76 | import pageRoutes from './router.config'; 77 | - import webpackPlugin from './plugin.config'; 78 | import defaultSettings from '../src/defaultSettings'; 79 | 80 | ... 81 | 82 | export default { 83 | // add for transfer to umi 84 | ... 85 | manifest: { 86 | basePath: '/', 87 | }, 88 | 89 | - chainWebpack: webpackPlugin, 90 | }; 91 | 92 | ``` -------------------------------------------------------------------------------- /documentation.md: -------------------------------------------------------------------------------- 1 | # 如何使用： 2 | 3 | - umi 里如何使用[请查看](https://landing.ant.design/docs/use/umi)。 4 | - 其它脚手架使用[请查看](https://landing.ant.design/docs/use/getting-started)。 5 | -------------------------------------------------------------------------------- /index.text: -------------------------------------------------------------------------------- 1 | /* eslint no-undef: 0 */ 2 | /* eslint arrow-parens: 0 */ 3 | import React from 'react'; 4 | import { enquireScreen } from 'enquire-js'; 5 | &scrollAnim& 6 | &import& 7 | &dataSource& 8 | import './less/antMotionStyle.less'; 9 | 10 | let isMobile; 11 | enquireScreen((b) => { 12 | isMobile = b; 13 | }); 14 | 15 | const { location = {} } = typeof window !== 'undefined' ? window : {}; 16 | 17 | export default class Home extends React.Component { 18 | constructor(props) { 19 | super(props); 20 | this.state = { 21 | isMobile, 22 | show: !location.port,// 如果不是 dva 2.0 请删除 23 | }; 24 | } 25 | 26 | componentDidMount() { 27 | &scrollScreen-pragma& 28 | // 适配手机屏幕; 29 | enquireScreen((b) => { 30 | this.setState({ isMobile: !!b }); 31 | }); 32 | // dva 2.0 样式在组件渲染之后动态加载，导致滚动组件不生效；线上不影响； 33 | /* 如果不是 dva 2.0 请删除 start */ 34 | if (location.port) { 35 | // 样式 build 时间在 200-300ms 之间; 36 | setTimeout(() => { 37 | this.setState({ 38 | show: true, 39 | }); 40 | &scrollScreen& 41 | }, 500); 42 | } 43 | /* 如果不是 dva 2.0 请删除 end */ 44 | } 45 | 46 | render() { 47 | &children& 48 | return ( 49 |
{ this.dom = d; }}> 50 | {/* 如果不是 dva 2.0 替换成 {children} start */} 51 | {this.state.show && children} 52 | {/* 如果不是 dva 2.0 替换成 {children} end */} 53 |
54 | ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /prettier/install-service-worker.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | /* eslint-env browser */ 4 | 5 | if ('serviceWorker' in navigator) { 6 | navigator.serviceWorker.register('/service-worker.js', { 7 | scope: '/edit/', 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /prettier/service-worker.js: -------------------------------------------------------------------------------- 1 | /* eslint-env serviceworker */ 2 | /* global toolbox */ 3 | 4 | 5 | importScripts('lib/sw-toolbox.js'); 6 | 7 | toolbox.precache([ 8 | // Scripts 9 | 'lib/index.js', 10 | 'lib/parser-babylon.js', 11 | 'lib/parser-postcss.js', 12 | 'lib/parser-flow.js', 13 | 'lib/parser-glimmer.js', 14 | 'lib/parser-graphql.js', 15 | 'lib/sw-toolbox.js', 16 | ]); 17 | 18 | // Default to hit the cache only if there's a network error 19 | toolbox.router.default = toolbox.networkFirst; 20 | 21 | // For scripts, stylesheets and images, we can use the "fastest" strategy 22 | // This means you need to reload twice to get new changes 23 | toolbox.router.get(/\.(js|css|png|svg)$/, toolbox.fastest); 24 | -------------------------------------------------------------------------------- /renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "config:base" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /site/bisheng.edit.config.js: -------------------------------------------------------------------------------- 1 | const commonConfig = require('./bisheng.common.config'); 2 | 3 | module.exports = { source: {}, 4 | output: './_site/edit', 5 | root: '/edit/', 6 | entryName: 'edit', 7 | theme: './site/edit', 8 | htmlTemplate: './site/edit/static/index.html', 9 | port: 7112, 10 | themeConfig: { 11 | }, 12 | ...commonConfig }; 13 | -------------------------------------------------------------------------------- /site/bisheng.index.config.js: -------------------------------------------------------------------------------- 1 | const commonConfig = require('./bisheng.common.config'); 2 | 3 | module.exports = { port: 7111, 4 | root: '/', 5 | source: { 6 | docs: './docs', 7 | }, 8 | theme: './site/theme', 9 | htmlTemplate: './site/theme/static/template.html', 10 | themeConfig: { 11 | root: '/', 12 | categoryOrder: { 13 | 介绍: 0, 14 | 设计指引: 1, 15 | 编辑器教程: 2, 16 | 使用教程: 3, 17 | 实践案例: 4, 18 | 设计资源: 5, 19 | Introduce: 0, 20 | Guide: 1, 21 | 'Edit-help': 2, 22 | Tutorial: 3, 23 | }, 24 | }, 25 | ...commonConfig }; 26 | -------------------------------------------------------------------------------- /site/bisheng.templates.config.js: -------------------------------------------------------------------------------- 1 | const commonConfig = require('./bisheng.common.config'); 2 | 3 | module.exports = { source: {}, 4 | output: './_site/templates', 5 | root: '/templates/', 6 | entryName: 'templates', 7 | theme: './site/templates', 8 | htmlTemplate: './site/templates/static/index.html', 9 | port: 7113, 10 | themeConfig: { 11 | }, 12 | ...commonConfig }; 13 | -------------------------------------------------------------------------------- /site/edit/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | routes: 3 | { 4 | path: '/', 5 | component: './template/index', 6 | childRoutes: [ 7 | { 8 | path: 'index-cn', 9 | component: './template/index', 10 | }, 11 | ], 12 | }, 13 | }; 14 | -------------------------------------------------------------------------------- /site/edit/static/banner-slide.less: -------------------------------------------------------------------------------- 1 | .banner-slide { 2 | background: fade(@primary-color, 55); 3 | border-radius: 4px 4px 0 0; 4 | overflow: hidden; 5 | display: inline-block; 6 | padding: 4px 8px 0; 7 | &-wrapper { 8 | position: absolute; 9 | bottom: 0; 10 | display: flex; 11 | width: 100%; 12 | justify-content: center; 13 | cursor: auto; 14 | opacity: 0; 15 | } 16 | .ant-pagination { 17 | display: inline-block; 18 | margin-right: 8px; 19 | } 20 | & .ant-pagination.mini .ant-pagination-item-link { 21 | border-radius: 100%; 22 | background: @primary-color; 23 | color: @edit-text-color; 24 | &:hover, 25 | &:focus { 26 | background: #597ef7; 27 | } 28 | &:active { 29 | background: #1d39c4; 30 | } 31 | } 32 | .ant-pagination-disabled a { 33 | background: rgb(218, 218, 218) !important; 34 | color: rgba(0, 0, 0, 0.25) !important; 35 | } 36 | .ant-pagination .ant-pagination-simple-pager { 37 | color: @edit-text-color; 38 | margin: 0 8px; 39 | input { 40 | background: transparent; 41 | padding: 0; 42 | margin: 0; 43 | &:hover { 44 | border-color: @edit-text-color; 45 | } 46 | } 47 | .ant-pagination-slash { 48 | margin: 0 5px; 49 | } 50 | } 51 | .ant-btn { 52 | vertical-align: top; 53 | } 54 | } 55 | 56 | .manage-wrapper { 57 | width: 300px; 58 | .ant-popover-inner-content { 59 | padding: 12px 0; 60 | position: relative; 61 | } 62 | .manage-button { 63 | text-align: center; 64 | margin: 16px 0; 65 | } 66 | } 67 | 68 | .list-drag-selected { 69 | box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25); 70 | transform: scale(1.1) !important; 71 | } 72 | -------------------------------------------------------------------------------- /site/edit/static/common.less: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | background: #fff; 4 | color: @edit-text-color; 5 | } 6 | 7 | body, 8 | div, 9 | dl, 10 | dt, 11 | dd, 12 | ul, 13 | ol, 14 | li, 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6 { 21 | margin: 0; 22 | padding: 0; 23 | } 24 | 25 | .gu-mirror { 26 | position: fixed !important; 27 | margin: 0 !important; 28 | z-index: 9999 !important; 29 | opacity: 0.8; 30 | background: fade(@primary-color, 70); 31 | pointer-events: none; 32 | 33 | >div, 34 | >p { 35 | display: none; 36 | } 37 | 38 | >.img { 39 | display: block; 40 | } 41 | 42 | &.img-wrapper { 43 | background: none; 44 | } 45 | } 46 | 47 | .gu-hide { 48 | display: none !important; 49 | } 50 | 51 | .gu-unselectable { 52 | -webkit-user-select: none !important; 53 | -moz-user-select: none !important; 54 | -ms-user-select: none !important; 55 | user-select: none !important; 56 | } 57 | 58 | .gu-transit { 59 | background: fade(@primary-color, 35); 60 | 61 | >p { 62 | display: none; 63 | } 64 | } 65 | 66 | .placeholder { 67 | background: @primary-color; 68 | text-align: center; 69 | color: @edit-text-color; 70 | font-size: 12px; 71 | line-height: 32px; 72 | position: absolute; 73 | width: 100%; 74 | } 75 | 76 | .modal-form { 77 | .ant-form-item { 78 | margin-bottom: 0; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /site/edit/static/content.less: -------------------------------------------------------------------------------- 1 | .edit { 2 | &-content-wrapper { 3 | height: ~"calc(100% - 64px)"; 4 | position: relative; 5 | } 6 | &-stage-wrapper { 7 | display: inline-block; 8 | width: ~"calc(100% - 40px)"; 9 | height: 100%; 10 | position: absolute; 11 | margin-left: 40px; 12 | left: 0; 13 | top: 0; 14 | .edit-preview { 15 | width: 100%; 16 | height: ~"calc(100% - 16px)"; 17 | max-height: 100%; 18 | border: 0; 19 | overflow: hidden; 20 | display: block; 21 | margin: auto; 22 | position: absolute; 23 | left: 0; 24 | right: 0; 25 | top: 16px; 26 | bottom: 0; 27 | transition: width .15s @ease-in-out, max-height .15s @ease-in-out, top .15s @ease-in-out; 28 | &.mobile { 29 | box-shadow: 0 0 0 1px #000; 30 | } 31 | } 32 | .mobile { 33 | width: 375px; 34 | max-height: 667px; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /site/edit/static/custom.less: -------------------------------------------------------------------------------- 1 | @edit-text-color: #fff; 2 | @edit-list-text-color: fade(#fff, 55); 3 | 4 | @edit-bg-color: #262626; 5 | @edit-line-color: #000; 6 | 7 | @edit-mouse-catcher-hover: #666; 8 | 9 | @edit-login-text-color: #314659; 10 | -------------------------------------------------------------------------------- /site/edit/static/edit-influence.less: -------------------------------------------------------------------------------- 1 | .edit-influence { 2 | height: 16px; 3 | background: black; 4 | >div { 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100%; 9 | } 10 | .ant-select { 11 | line-height: 16px; 12 | color: @edit-text-color; 13 | &.ant-select-single:not(.ant-select-customize-input) .ant-select-selector { 14 | background: transparent; 15 | border: none; 16 | border-radius: 0; 17 | &:focus { 18 | box-shadow: none; 19 | } 20 | &--single { 21 | height: 16px; 22 | } 23 | &__rendered { 24 | line-height: 16px; 25 | } 26 | &-selected-value { 27 | padding-right: 16px; 28 | span { 29 | font-size: 12px; 30 | } 31 | } 32 | } 33 | &-arrow { 34 | color: fade(@edit-text-color, 55); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/box-model.less: -------------------------------------------------------------------------------- 1 | .@{editorList} { 2 | .ant-collapse { 3 | .box-model-wrapper { 4 | width: 145px; 5 | height: 60px; 6 | margin: 20px auto; 7 | border: 1px solid @edit-list-text-color; 8 | } 9 | .box-model { 10 | position: relative; 11 | height: 100%; 12 | .top, 13 | .right, 14 | .bottom, 15 | .left, 16 | .center, 17 | .top-left, 18 | .top-right, 19 | .bottom-right, 20 | .bottom-left { 21 | position: absolute; 22 | margin: auto; 23 | width: 56px; 24 | height: 22px; 25 | .ant-select-selection { 26 | background: @bgColor; 27 | .ant-input, 28 | .ant-select-selection__placeholder { 29 | text-align: center; 30 | } 31 | } 32 | } 33 | .top { 34 | top: -11px; 35 | left: 0; 36 | right: 0; 37 | .editor-color-picker { 38 | left: -85px; 39 | } 40 | } 41 | .right { 42 | right: -28px; 43 | top: 0; 44 | bottom: 0; 45 | .editor-color-picker { 46 | right: -13px; 47 | left: auto; 48 | } 49 | } 50 | .bottom { 51 | bottom: -11px; 52 | left: 0; 53 | right: 0; 54 | } 55 | .left { 56 | left: -28px; 57 | top: 0; 58 | bottom: 0; 59 | } 60 | .center { 61 | top: 0; 62 | right: 0; 63 | bottom: 0; 64 | left: 0; 65 | } 66 | .top-left { 67 | top: -11px; 68 | left: -28px; 69 | } 70 | .top-right { 71 | top: -11px; 72 | right: -28px; 73 | } 74 | .bottom-left { 75 | bottom: -11px; 76 | left: -28px; 77 | } 78 | .bottom-right { 79 | bottom: -11px; 80 | right: -28px; 81 | } 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/child.less: -------------------------------------------------------------------------------- 1 | .child-wrapper { 2 | .sort-manage { 3 | height: 32px; 4 | display: flex; 5 | align-items: center; 6 | transition: background .45s @ease-in-out, box-shadow .45s @ease-in-out, transform .45s @ease-in-out; 7 | &:hover { 8 | background: @heiColor; 9 | } 10 | &-delete { 11 | width: 32px; 12 | .ant-btn { 13 | background: transparent; 14 | height: 32px; 15 | width: 32px; 16 | line-height: 32px; 17 | color: rgba(255, 255, 255, 0.55); 18 | border: none; 19 | } 20 | } 21 | &-icon { 22 | width: 32px; 23 | } 24 | &-name { 25 | width: ~"calc(100% - 64px)"; 26 | } 27 | } 28 | .add-type { 29 | border-top: 1px solid @heiColor; 30 | padding-top: 8px; 31 | display: flex; 32 | align-items: center; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/custom.less: -------------------------------------------------------------------------------- 1 | @edit-list-text-color: fade(@edit-text-color, 55); 2 | @edit-list-text-color-hover: @edit-text-color; 3 | @input-line-color: @edit-list-text-color; 4 | @input-line-color-hover: @edit-list-text-color-hover; 5 | 6 | @heiColor: #121212; 7 | @huiColor: #121212; 8 | @bgColor: #262626; 9 | 10 | @editorList: edit-list-tab; 11 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/editor-bg-image.less: -------------------------------------------------------------------------------- 1 | @import "custom"; 2 | 3 | @bgImage: editor-bg-image; 4 | 5 | .@{bgImage} { 6 | &-wrapper { 7 | border-top: 1px solid @heiColor; 8 | padding-top: 8px; 9 | 10 | .add-button { 11 | font-size: 14px !important; 12 | } 13 | } 14 | 15 | &-list { 16 | display: grid; 17 | grid-template-columns: 24px 24px auto 24px; 18 | grid-template-rows: 32px; 19 | gap: 0 4px; 20 | align-items: center; 21 | line-height: 32px; 22 | height: 32px; 23 | 24 | transition: background .3s @ease-in-out; 25 | 26 | &-preview { 27 | grid-column-start: 2; 28 | background-size: cover; 29 | background-position: center; 30 | background-clip: content-box; 31 | width: 24px; 32 | height: 24px; 33 | border: 1px solid fade(#fff, 15); 34 | } 35 | 36 | &-bar { 37 | grid-column-start: 1; 38 | text-align: center; 39 | outline: none; 40 | } 41 | 42 | &-name { 43 | grid-column-start: 3; 44 | text-overflow: ellipsis; 45 | overflow: hidden; 46 | white-space: nowrap; 47 | user-select: none; 48 | color: rgba(255, 255, 255, 0.55); 49 | &:hover { 50 | color: rgba(255, 255, 255, 0.85); 51 | } 52 | } 53 | 54 | &-delete { 55 | grid-column-start: 4; 56 | text-align: center; 57 | cursor: pointer; 58 | } 59 | 60 | &:hover, 61 | &:active { 62 | background-color: fade(@heiColor, 70); 63 | } 64 | } 65 | &-pop { 66 | width: 248px; 67 | padding: 16px; 68 | &-type { 69 | padding-bottom: 8px; 70 | border-bottom: 1px solid @bgColor; 71 | } 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/editor-color.less: -------------------------------------------------------------------------------- 1 | @color: editor-color; 2 | .@{color} { 3 | width: 100%; 4 | height: 22px; 5 | border-radius: 4px; 6 | cursor: pointer; 7 | overflow: hidden; 8 | display: block; 9 | transition: box-shadow .3s, border .3s; 10 | border: 1px solid #a4a7a8; 11 | 12 | i { 13 | width: 100%; 14 | height: 100%; 15 | display: block; 16 | position: relative; 17 | &:after { 18 | content: ''; 19 | display: block; 20 | position: absolute; 21 | width: 0; 22 | height: 0; 23 | border-bottom: 4px solid white; 24 | border-left: 4px solid transparent; 25 | right: 1px; 26 | bottom: 1px; 27 | } 28 | } 29 | &.active { 30 | border-color: @input-line-color-hover; 31 | box-shadow: 0 0 4px @input-line-color-hover; 32 | } 33 | &-wrapper { 34 | &:hover { 35 | .color-close { 36 | opacity: 1; 37 | } 38 | } 39 | .color-close { 40 | position: absolute; 41 | line-height: 12px; 42 | text-align: center; 43 | width: 12px; 44 | height: 12px; 45 | top: -5px; 46 | left: -5px; 47 | border-radius: 100%; 48 | background: #f00; 49 | color: @edit-text-color; 50 | opacity: 0; 51 | cursor: pointer; 52 | transition: opacity .3s @ease-out; 53 | .anticon-close { 54 | font-size: 12px; 55 | transform: scale(.8); 56 | } 57 | } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/editor-font.less: -------------------------------------------------------------------------------- 1 | @font: editor-font; 2 | .@{editorList} { 3 | .@{font} { 4 | &-align { 5 | .left, 6 | .center, 7 | .right, 8 | .justify { 9 | width: 16px; 10 | margin: auto; 11 | &:after, 12 | &:before { 13 | background: @edit-list-text-color; 14 | box-shadow: 0 6px 0 @edit-list-text-color; 15 | content: ''; 16 | display: block; 17 | margin: auto; 18 | height: 1px; 19 | } 20 | &:before { 21 | margin-top: 5px; 22 | } 23 | &:after { 24 | margin-top: 2px; 25 | } 26 | } 27 | .left, 28 | .center, 29 | .right { 30 | &:after { 31 | width: 13px; 32 | } 33 | &:before { 34 | width: 100%; 35 | } 36 | } 37 | .left { 38 | &:after { 39 | margin-left: 0; 40 | } 41 | } 42 | .right { 43 | &:after { 44 | margin-right: 0; 45 | } 46 | } 47 | .justify { 48 | &:after, 49 | &:before { 50 | width: 100%; 51 | } 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/editor-gradient.less: -------------------------------------------------------------------------------- 1 | @import "custom"; 2 | @gradient: editor-gradient; 3 | 4 | .@{gradient} { 5 | padding-bottom: 1px; 6 | border-bottom: 1px solid @bgColor; 7 | margin-bottom: 8px; 8 | 9 | &-bar { 10 | height: 16px; 11 | border: 1px solid @bgColor; 12 | cursor: crosshair; 13 | position: relative; 14 | background-repeat: no-repeat; 15 | margin: 16px 0; 16 | 17 | &-item { 18 | position: relative; 19 | height: 100%; 20 | margin-right: 8px; 21 | } 22 | } 23 | 24 | &-point { 25 | box-shadow: @bgColor 0 0 0 1px; 26 | height: 100%; 27 | width: 8px; 28 | position: absolute; 29 | cursor: ew-resize; 30 | transition: shadow .3s; 31 | border-radius: 2px; 32 | background: #eee; 33 | 34 | &.active { 35 | box-shadow: @edit-list-text-color-hover 0 0 0 2px, @bgColor 0 0 0 3px, @bgColor 0 0 0 1px inset; 36 | } 37 | } 38 | 39 | &-repeat { 40 | color: @edit-list-text-color; 41 | 42 | .ant-checkbox +span { 43 | color: @edit-list-text-color; 44 | } 45 | } 46 | 47 | &-color { 48 | .ant-row { 49 | margin-bottom: 0 !important; 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /site/edit/static/edit-list/index.less: -------------------------------------------------------------------------------- 1 | 2 | @import "common"; 3 | @import "editor-color"; 4 | @import "collapse"; 5 | @import "editor-font"; 6 | @import "editor-bg-image"; 7 | @import "editor-gradient"; 8 | @import "box-model"; 9 | @import "child"; 10 | 11 | .edit-right-view { 12 | .edit-list-tab { 13 | height: 100%; 14 | text-align: left; 15 | .tab-scroll { 16 | overflow: auto; 17 | height: 100%; 18 | position: relative; 19 | } 20 | &s { 21 | height: 100%; 22 | &.ant-tabs:not(.ant-tabs-vertical) > .ant-tabs-content > .ant-tabs-tabpane-inactive { 23 | height: 100%; 24 | } 25 | .ant-tabs { 26 | &-bar { 27 | height: 64px; 28 | border-color: @edit-line-color; 29 | } 30 | &-content { 31 | height: ~"calc(100% - 80px)"; 32 | } 33 | &-ink-bar { 34 | display: none !important; 35 | } 36 | &-tab { 37 | margin-right: 0; 38 | border-right: 1px solid @edit-line-color; 39 | padding: 0 24px; 40 | line-height: 64px; 41 | font-size: 16px; 42 | color: fade(@edit-text-color, 60); 43 | height: 65px; 44 | transition: color 0.3s @ease-in-out, background .3s @ease-in-out; 45 | &-active { 46 | color: @edit-text-color; 47 | background: @edit-bg-color; 48 | } 49 | &:hover { 50 | color: @edit-text-color; 51 | } 52 | .anticon { 53 | margin: 0; 54 | } 55 | } 56 | } 57 | } 58 | .props-explain { 59 | color: @edit-text-color; 60 | padding: 0 16px; 61 | font-size: 12px; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /site/edit/static/index.less: -------------------------------------------------------------------------------- 1 | // @import '~antd/lib/style/v2-compatible-reset.less'; 2 | @import "~antd/lib/style/themes/default.less"; 3 | @import '~antd/lib/tag/style/index.css'; 4 | @import '~antd/lib/slider/style/index.css'; 5 | @import './common'; 6 | @import './custom'; 7 | @import './login-controller'; 8 | @import './edit-list/index'; 9 | @import './content'; 10 | @import './edit-influence'; 11 | @import './nav-controller'; 12 | @import './side-menu'; 13 | @import './edit-stage'; 14 | @import './banner-slide'; 15 | @import './other-view.less'; 16 | @import './sort.less'; 17 | @import '../../templates/static/point'; 18 | 19 | .edit { 20 | &-wrapper { 21 | width: 100%; 22 | position: relative; 23 | height: 100vh; 24 | background: @edit-bg-color; 25 | overflow: hidden; 26 | /** { 27 | -webkit-user-select: none; 28 | -moz-user-select: none; 29 | -ms-user-select: none; 30 | user-select: none; 31 | } */ 32 | > div { 33 | height: 100%; 34 | float: left; 35 | } 36 | } 37 | &-left-view { 38 | width: ~"calc(100% - 288px)"; 39 | } 40 | &-right-view { 41 | width: 288px; 42 | border-left: 1px solid @edit-line-color; 43 | } 44 | } 45 | p { 46 | margin: 0; 47 | } 48 | -------------------------------------------------------------------------------- /site/edit/static/login-controller.less: -------------------------------------------------------------------------------- 1 | .login-controller { 2 | background: @edit-bg-color; 3 | width: 100%; 4 | height: 100vh; 5 | position: absolute; 6 | top: 0; 7 | left: 0; 8 | color: @edit-login-text-color; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | .login-view { 13 | width: 360px; 14 | padding: 24px; 15 | background: #fff; 16 | border-radius: 4px; 17 | box-shadow: 0 0 16px rgba(0, 0, 0, 0.35); 18 | .header { 19 | font-size: 46px; 20 | margin: 0 auto 32px; 21 | width: 60px; 22 | height: 60px; 23 | line-height: 60px; 24 | border-radius: 100%; 25 | color: @edit-login-text-color; 26 | background: @primary-color; 27 | text-align: center; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | p { 33 | margin-bottom: 16px; 34 | } 35 | &.password-no { 36 | animation: antSwingIn .5s linear; 37 | } 38 | } 39 | } 40 | 41 | @keyframes antSwingIn { 42 | 0%, 43 | 100% { 44 | transform: translateX(0); 45 | } 46 | 20% { 47 | transform: translateX(-10px); 48 | } 49 | 40% { 50 | transform: translateX(10px); 51 | } 52 | 60% { 53 | transform: translateX(-5px); 54 | } 55 | 80% { 56 | transform: translateX(5px); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /site/edit/static/other-view.less: -------------------------------------------------------------------------------- 1 | .other { 2 | .ant-radio-button-wrapper { 3 | vertical-align: top; 4 | .point-radio-wrapper { 5 | width: 100%; 6 | height: 100%; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | .point { 11 | background: rgba(255, 255, 255, 0.3); 12 | border-color: transparent; 13 | transition: background .3s @ease-out, border .3s @ease-out; 14 | &-stroke { 15 | background: transparent; 16 | border-color: rgba(255, 255, 255, 0.3); 17 | } 18 | } 19 | } 20 | } 21 | .ant-radio-button-wrapper-checked { 22 | .point-radio-wrapper .point { 23 | background: rgba(255, 255, 255, 0.9); 24 | border-color: transparent; 25 | &-stroke { 26 | background: transparent; 27 | border-color: rgba(255, 255, 255, 0.9); 28 | } 29 | } 30 | } 31 | &-demo { 32 | overflow: hidden; 33 | border: 1px solid rgba(255, 255, 255, 0.3); 34 | border-radius: 4px; 35 | video, 36 | img { 37 | display: block; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /site/edit/static/sort.less: -------------------------------------------------------------------------------- 1 | .sort-manage { 2 | height: 48px; 3 | display: flex; 4 | align-items: center; 5 | transition: background .45s @ease-in-out, box-shadow .45s @ease-in-out, transform .45s @ease-in-out; 6 | &:hover { 7 | background: #e6f7ff; 8 | } 9 | &-list { 10 | position: relative; 11 | } 12 | &-icon { 13 | width: 48px; 14 | text-align: center; 15 | cursor: pointer; 16 | &[disabled] { 17 | color: rgba(0, 0, 0, 0.25) !important; 18 | pointer-events: none; 19 | } 20 | } 21 | &-delete { 22 | text-align: center; 23 | width: 48px; 24 | } 25 | &-name { 26 | width: ~"calc(100% - 80px)"; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /site/edit/static/style.js: -------------------------------------------------------------------------------- 1 | import 'rc-drawer/assets/index.css'; 2 | import 'antd/lib/auto-complete/style/index.css'; 3 | import 'medium-editor/dist/css/medium-editor.css'; 4 | import 'medium-editor/dist/css/themes/default.css'; 5 | // import 'rc-editor-list/assets/index.css'; 6 | import 'codemirror/lib/codemirror.css'; 7 | import 'codemirror/theme/ambiance.css'; 8 | import 'codemirror/addon/hint/show-hint.css'; 9 | import './index.less'; 10 | -------------------------------------------------------------------------------- /site/edit/template/NotFound.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default function NotFound(props) { 4 | return ( 5 |
6 |
7 |

404

8 |

9 | 你要找的页面不存在 10 | {' '} 11 | 返回首页 12 |

13 |
14 |