update site
tjz
parent
4902293747
commit
b5de11fe3a
|
|
@ -1,37 +0,0 @@
|
|||
<template>
|
||||
<li :class="justCopied ? 'copied' : ''" v-clipboard:copy="text"
|
||||
v-clipboard:success="onCopied">
|
||||
<a-icon :type="type" />
|
||||
<span class='anticon-class'>
|
||||
<a-badge :dot="isNew">
|
||||
{{type}}
|
||||
</a-badge>
|
||||
</span>
|
||||
</li>
|
||||
</template>
|
||||
<script>
|
||||
import BaseMixin from 'antd/_util/BaseMixin'
|
||||
|
||||
export default {
|
||||
mixins: [BaseMixin],
|
||||
props: {
|
||||
type: String,
|
||||
isNew: Boolean,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
justCopied: false,
|
||||
text: `<a-icon type="${this.type}" />`,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onCopied () {
|
||||
this.setState({ justCopied: true }, () => {
|
||||
setTimeout(() => {
|
||||
this.setState({ justCopied: false })
|
||||
}, 2000)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
<script>
|
||||
import CopyableIcon from './CopyableIcon'
|
||||
export default {
|
||||
props: {
|
||||
catigory: String,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
icons: {
|
||||
direction: ['step-backward', 'step-forward', 'fast-backward', 'fast-forward', 'shrink', 'arrows-alt', 'down', 'up', 'left', 'right', 'caret-up', 'caret-down', 'caret-left', 'caret-right', 'up-circle', 'down-circle', 'left-circle', 'right-circle', 'up-circle-o', 'down-circle-o', 'right-circle-o', 'left-circle-o', 'double-right', 'double-left', 'verticle-left', 'verticle-right', 'forward', 'backward', 'rollback', 'enter', 'retweet', 'swap', 'swap-left', 'swap-right', 'arrow-up', 'arrow-down', 'arrow-left', 'arrow-right', 'play-circle', 'play-circle-o', 'up-square', 'down-square', 'left-square', 'right-square', 'up-square-o', 'down-square-o', 'left-square-o', 'right-square-o', 'login', 'logout', 'menu-fold', 'menu-unfold'],
|
||||
suggestion: ['question', 'question-circle-o', 'question-circle', 'plus', 'plus-circle-o', 'plus-circle', 'pause', 'pause-circle-o', 'pause-circle', 'minus', 'minus-circle-o', 'minus-circle', 'plus-square', 'plus-square-o', 'minus-square', 'minus-square-o', 'info', 'info-circle-o', 'info-circle', 'exclamation', 'exclamation-circle-o', 'exclamation-circle', 'close', 'close-circle', 'close-circle-o', 'close-square', 'close-square-o', 'check', 'check-circle', 'check-circle-o', 'check-square', 'check-square-o', 'clock-circle-o', 'clock-circle', 'warning'],
|
||||
logo: [
|
||||
'android', 'android-o', 'apple', 'apple-o', 'windows', 'windows-o', 'ie', 'chrome', 'github', 'aliwangwang', 'aliwangwang-o', 'dingding', 'dingding-o',
|
||||
'weibo-square', 'weibo-circle', 'taobao-circle', 'html5', 'weibo', 'twitter', 'wechat', 'youtube', 'alipay-circle', 'taobao', 'skype', 'qq', 'medium-workmark', 'gitlab', 'medium', 'linkedin', 'google-plus',
|
||||
'dropbox', 'facebook', 'codepen', 'amazon', 'google', 'codepen-circle', 'alipay', 'ant-design', 'aliyun',
|
||||
],
|
||||
other: ['lock', 'unlock', 'area-chart', 'pie-chart', 'bar-chart', 'dot-chart', 'bars', 'book', 'calendar', 'cloud', 'cloud-download', 'code', 'code-o', 'copy', 'credit-card', 'delete', 'desktop', 'download', 'edit', 'ellipsis', 'file', 'file-text', 'file-unknown', 'file-pdf', 'file-word', 'file-excel', 'file-jpg', 'file-ppt', 'file-add', 'folder', 'folder-open', 'folder-add', 'hdd', 'frown', 'frown-o', 'meh', 'meh-o', 'smile', 'smile-o', 'inbox', 'laptop', 'appstore-o', 'appstore', 'line-chart', 'link', 'mail', 'mobile', 'notification', 'paper-clip', 'picture', 'poweroff', 'reload', 'search', 'setting', 'share-alt', 'shopping-cart', 'tablet', 'tag', 'tag-o', 'tags', 'tags-o', 'to-top', 'upload', 'user', 'video-camera', 'home', 'loading', 'loading-3-quarters', 'cloud-upload-o', 'cloud-download-o', 'cloud-upload', 'cloud-o', 'star-o', 'star', 'heart-o', 'heart', 'environment', 'environment-o', 'eye', 'eye-o', 'camera', 'camera-o', 'save', 'team', 'solution', 'phone', 'filter', 'exception', 'export', 'customer-service', 'qrcode', 'scan', 'like', 'like-o', 'dislike', 'dislike-o', 'message', 'pay-circle', 'pay-circle-o', 'calculator', 'pushpin', 'pushpin-o', 'bulb', 'select', 'switcher', 'rocket', 'bell', 'disconnect', 'database', 'compass', 'barcode', 'hourglass', 'key', 'flag', 'layout', 'printer', 'sound', 'usb', 'skin', 'tool', 'sync', 'wifi', 'car', 'schedule', 'user-add', 'user-delete', 'usergroup-add', 'usergroup-delete', 'man', 'woman', 'shop', 'gift', 'idcard', 'medicine-box', 'red-envelope', 'coffee', 'copyright', 'trademark', 'safety', 'wallet', 'bank', 'trophy', 'contacts', 'global', 'shake', 'api', 'fork', 'dashboard', 'form', 'table', 'profile'],
|
||||
},
|
||||
newIcons: [
|
||||
'aliyun',
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
render () {
|
||||
const { catigory } = this.$props
|
||||
const listClassName = {
|
||||
'anticons-list': true,
|
||||
clearfix: true,
|
||||
}
|
||||
return (
|
||||
<ul class={listClassName}>
|
||||
{this.icons[catigory].map(type => (
|
||||
<CopyableIcon key={type} type={type} isNew={this.newIcons.indexOf(type) >= 0} />
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<template>
|
||||
<div class='markdown api-container'>
|
||||
<slot v-if="lang === 'cn'" name="cn"></slot>
|
||||
<slot v-else></slot>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'api',
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
return {
|
||||
lang,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<script>
|
||||
import * as AllDemo from '../demo'
|
||||
import Header from './header'
|
||||
import zhCN from 'antd/locale-provider/zh_CN'
|
||||
import enUS from 'antd/locale-provider/default'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
render () {
|
||||
const { name } = this.$route.params
|
||||
let { lang } = this.$route.params
|
||||
const titleMap = {}
|
||||
const menuConfig = {
|
||||
General: [],
|
||||
Layout: [],
|
||||
Navigation: [],
|
||||
'Data Entry': [],
|
||||
'Data Display': [],
|
||||
Feedback: [],
|
||||
Other: [],
|
||||
}
|
||||
for (const [title, d] of Object.entries(AllDemo)) {
|
||||
const type = d.type || 'Other'
|
||||
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
titleMap[key] = title
|
||||
menuConfig[type] = menuConfig[type] || []
|
||||
menuConfig[type].push(d)
|
||||
}
|
||||
const Demo = AllDemo[titleMap[name]]
|
||||
const MenuGroup = []
|
||||
for (const [type, menus] of Object.entries(menuConfig)) {
|
||||
const MenuItems = []
|
||||
_.sortBy(menus, ['title']).forEach(({ title, subtitle }) => {
|
||||
const linkValue = lang === 'cn'
|
||||
? [<span>{title}</span>, <span class='chinese'>{subtitle}</span>]
|
||||
: [<span>{title}</span>]
|
||||
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
MenuItems.push(<a-menu-item key={key}>
|
||||
<router-link to={{ path: `/${lang}/components/${key}` }}>{linkValue}</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
|
||||
}
|
||||
let locale = zhCN
|
||||
if (lang !== 'cn') {
|
||||
lang = 'us'
|
||||
locale = enUS
|
||||
}
|
||||
return (
|
||||
<div class='page-wrapper'>
|
||||
<Header num={Object.keys(AllDemo).length}/>
|
||||
<a-locale-provider locale={locale}>
|
||||
<div class='main-wrapper'>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
<a-menu
|
||||
class='aside-container menu-site'
|
||||
selectedKeys={[name]}
|
||||
defaultOpenKeys={['Components']}
|
||||
inlineIndent={40}
|
||||
mode='inline'>
|
||||
<a-sub-menu title='Components' key='Components'>
|
||||
{MenuGroup}
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div class='content main-container'>
|
||||
{Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,162 +0,0 @@
|
|||
<template>
|
||||
<section :class="['code-box', isOpen ? 'expand': '']">
|
||||
<section class="code-box-demo">
|
||||
<slot name="component"></slot>
|
||||
</section>
|
||||
<section class="code-box-meta markdown">
|
||||
<slot v-if="lang === 'cn'" name="description"></slot>
|
||||
<slot v-else name="us-description"></slot>
|
||||
<span class="btn-toggle" :class="{open: isOpen}" @click="toggle"><i class="anticon anticon-down-circle-o"></i></span>
|
||||
</section>
|
||||
<transition appear :css="false" @enter="enter" @leave="leave">
|
||||
<section class="highlight-wrapper" style="position: relative;" v-show="isOpen">
|
||||
<a-tooltip
|
||||
:title="copied ? '复制成功' : '复制代码'"
|
||||
:visible="copyTooltipVisible"
|
||||
@change="onCopyTooltipVisibleChange"
|
||||
>
|
||||
<a-icon
|
||||
:type="copied && copyTooltipVisible ? 'check' : 'copy'"
|
||||
class="code-box-code-copy"
|
||||
v-clipboard:copy="sourceCode"
|
||||
v-clipboard:success="handleCodeCopied"
|
||||
/>
|
||||
</a-tooltip>
|
||||
<slot name="code"></slot>
|
||||
</section>
|
||||
</transition>
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
import animate from 'antd/_util/openAnimation'
|
||||
import BaseMixin from 'antd/_util/BaseMixin'
|
||||
export default {
|
||||
mixins: [BaseMixin],
|
||||
name: 'demoBox',
|
||||
props: {
|
||||
jsfiddle: Object,
|
||||
},
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
const { html, script, style } = this.jsfiddle
|
||||
let sourceCode = `<template>${html}</template>\n`
|
||||
sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
|
||||
sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
|
||||
return {
|
||||
isOpen: false,
|
||||
lang,
|
||||
copied: false,
|
||||
copyTooltipVisible: false,
|
||||
sourceCode,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.isOpen = !this.isOpen
|
||||
},
|
||||
enter: animate.enter,
|
||||
leave: animate.leave,
|
||||
handleCodeCopied () {
|
||||
this.setState({ copied: true })
|
||||
},
|
||||
|
||||
onCopyTooltipVisibleChange (visible) {
|
||||
if (visible) {
|
||||
this.setState({
|
||||
copyTooltipVisible: visible,
|
||||
copied: false,
|
||||
})
|
||||
return
|
||||
}
|
||||
this.setState({
|
||||
copyTooltipVisible: visible,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.box-demo{
|
||||
padding: 0;
|
||||
border: 1px solid #e9e9e9;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.box-demo-show{
|
||||
padding: 20px 25px 30px;
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
}
|
||||
.box-demo-description{
|
||||
position: relative;
|
||||
padding: 17px 16px 15px 20px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
-webkit-transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
&.bordered{
|
||||
border-bottom: 1px dashed #e9e9e9;
|
||||
}
|
||||
h3, h4{
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
padding: 1px 8px;
|
||||
margin-left: -8px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
color: #777;
|
||||
border-radius: 4px;
|
||||
border-top-left-radius: 0;
|
||||
background: #fff;
|
||||
-webkit-transition: background-color 0.4s ease;
|
||||
transition: background-color 0.4s ease;
|
||||
.header-anchor{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
li{
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
.box-demo-code{
|
||||
-webkit-transition: height .2s ease-in-out;
|
||||
transition: height .2s ease-in-out;
|
||||
overflow: auto;
|
||||
border-top: 1px dashed #e9e9e9;
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
code{
|
||||
margin: 0;
|
||||
background: #f7f7f7;
|
||||
padding: .2em .4em;
|
||||
border-radius: 3px;
|
||||
font-size: .9em;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
.btn-toggle{
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 17px;
|
||||
cursor: pointer;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
color: #999;
|
||||
i{
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&.open{
|
||||
i{
|
||||
-webkit-transform: rotate(-180deg);
|
||||
-ms-transform: rotate(-180deg);
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
num: Number,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
const { lang, name } = this.$route.params
|
||||
this.$router.push({
|
||||
path: `/${lang === 'cn' ? 'us' : 'cn'}/components/${name}`,
|
||||
})
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { lang } = this.$route.params
|
||||
return (
|
||||
<header id='header'>
|
||||
<a-row>
|
||||
<a-col xxl={4} xl={5} lg={5} md={6} sm={24} xs={24}>
|
||||
<router-link to={{ path: `/${lang}` }} id='logo'>
|
||||
<img alt='logo' src='https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png' />
|
||||
<span> VUE-ANTD</span>
|
||||
</router-link>
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div id='search-box'>
|
||||
进度：{this.num} / 52
|
||||
</div>
|
||||
<a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
|
||||
{lang === 'cn' ? 'English' : '中文'}
|
||||
</a-button>
|
||||
<a-menu selectedKeys={['components']} mode='horizontal' class='menu-site' id='nav'>
|
||||
<a-menu-item key='components'>
|
||||
{lang === 'cn' ? '组件' : 'Components'}
|
||||
</a-menu-item>
|
||||
<a-menu-item key='github'>
|
||||
<a href='https://github.com/vueComponent/ant-design'>GitHub</a>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</header>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
<template>
|
||||
<div v-html="marked(text)" class="markdown" />
|
||||
</template>
|
||||
<script>
|
||||
import marked from 'marked'
|
||||
marked.setOptions({
|
||||
renderer: new marked.Renderer(),
|
||||
gfm: true,
|
||||
tables: true,
|
||||
breaks: true,
|
||||
pedantic: true,
|
||||
sanitize: true,
|
||||
smartLists: true,
|
||||
smartypants: true,
|
||||
})
|
||||
export default {
|
||||
name: 'md',
|
||||
props: {
|
||||
cn: String,
|
||||
us: String,
|
||||
},
|
||||
data () {
|
||||
const { lang } = this.$route.params
|
||||
let text = ''
|
||||
const { cn, us } = this
|
||||
if (this.$slots.default && this.$slots.default[0] && this.$slots.default[0].text) {
|
||||
text = this.$slots.default[0].text
|
||||
} else {
|
||||
text = lang === 'cn' ? cn : us
|
||||
}
|
||||
text = text || ''
|
||||
text = text.split('\n').map(t => t.trim()).join('\n')
|
||||
return {
|
||||
marked,
|
||||
text,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
export { default as avatar } from 'antd/avatar/demo/index.vue'
|
||||
export { default as badge } from 'antd/badge/demo/index.vue'
|
||||
export { default as breadcrumb } from 'antd/breadcrumb/demo/index.vue'
|
||||
export { default as button } from 'antd/button/demo/index.vue'
|
||||
export { default as card } from 'antd/card/demo/index.vue'
|
||||
export { default as checkbox } from 'antd/checkbox/demo/index.vue'
|
||||
export { default as grid } from 'antd/grid/demo/index.vue'
|
||||
export { default as icon } from 'antd/icon/demo/index.vue'
|
||||
export { default as input } from 'antd/input/demo/index.vue'
|
||||
export { default as select } from 'antd/select/demo/index.vue'
|
||||
export { default as menu } from 'antd/menu/demo/index.vue'
|
||||
export { default as pagination } from 'antd/pagination/demo/index.vue'
|
||||
export { default as popconfirm } from 'antd/popconfirm/demo/index.vue'
|
||||
export { default as popover } from 'antd/popover/demo/index.vue'
|
||||
export { default as radio } from 'antd/radio/demo/index.vue'
|
||||
export { default as rate } from 'antd/rate/demo/index.vue'
|
||||
export { default as tabs } from 'antd/tabs/demo/index.vue'
|
||||
export { default as tag } from 'antd/tag/demo/index.vue'
|
||||
export { default as tooltip } from 'antd/tooltip/demo/index.vue'
|
||||
export { default as dropdown } from 'antd/dropdown/demo/index.vue'
|
||||
export { default as divider } from 'antd/divider/demo/index.vue'
|
||||
export { default as collapse } from 'antd/collapse/demo/index.vue'
|
||||
export { default as notification } from 'antd/notification/demo/index.vue'
|
||||
export { default as message } from 'antd/message/demo/index.vue'
|
||||
export { default as spin } from 'antd/spin/demo/index.vue'
|
||||
export { default as switch } from 'antd/switch/demo/index.vue'
|
||||
export { default as autoComplete } from 'antd/auto-complete/demo/index.vue'
|
||||
export { default as affix } from 'antd/affix/demo/index.vue'
|
||||
export { default as cascader } from 'antd/cascader/demo/index.vue'
|
||||
export { default as backTop } from 'antd/back-top/demo/index.vue'
|
||||
export { default as modal } from 'antd/modal/demo/index.vue'
|
||||
export { default as alert } from 'antd/alert/demo/index.vue'
|
||||
export { default as timePicker } from 'antd/time-picker/demo/index.vue'
|
||||
export { default as steps } from 'antd/steps/demo/index.vue'
|
||||
export { default as calendar } from 'antd/calendar/demo/index.vue'
|
||||
export { default as datePicker } from 'antd/date-picker/demo/index.vue'
|
||||
export { default as localeProvider } from 'antd/locale-provider/demo/index.vue'
|
||||
export { default as slider } from 'antd/slider/demo/index.vue'
|
||||
export { default as progress } from 'antd/progress/demo/index.vue'
|
||||
export { default as timeline } from 'antd/timeline/demo/index.vue'
|
||||
export { default as table } from 'antd/table/demo/index.vue'
|
||||
export { default as inputNumber } from 'antd/input-number/demo/index.vue'
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/vueComponent/ant-design/master/logo.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
import '../components/style.js'
|
||||
import './index.less'
|
||||
import 'highlight.js/styles/solarized-light.css'
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import VueClipboard from 'vue-clipboard2'
|
||||
import routes from './routes'
|
||||
import Md from './components/md'
|
||||
import Api from './components/api'
|
||||
import * as Components from '../components/index'
|
||||
import demoBox from './components/demoBox'
|
||||
|
||||
Vue.use(VueClipboard)
|
||||
Vue.use(VueRouter)
|
||||
Vue.component(Md.name, Md)
|
||||
Vue.component(Api.name, Api)
|
||||
Vue.component('demo-box', demoBox)
|
||||
Object.keys(Components).forEach(k => {
|
||||
if (k === 'api') {
|
||||
Object.keys(Components[k]).forEach(api => {
|
||||
Vue.prototype[`$${api}`] = Components[k][api]
|
||||
})
|
||||
} else {
|
||||
const name = `a${k.replace(/([A-Z])/g, '-$1').toLowerCase()}`
|
||||
Vue.component(name, Components[k])
|
||||
}
|
||||
})
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'hash',
|
||||
routes,
|
||||
})
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
})
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
@import './theme/static/index.less';
|
||||
.site {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.nav {
|
||||
width: 200px;
|
||||
}
|
||||
.content {
|
||||
flex: 1;
|
||||
}
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.api-container table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid @site-border-color-split;
|
||||
width: 100%;
|
||||
margin: 8px 0 16px;
|
||||
}
|
||||
|
||||
.api-container table th {
|
||||
white-space: nowrap;
|
||||
color: #5c6b77;
|
||||
font-weight: 500;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.api-container pre code {
|
||||
padding: 12px 20px;
|
||||
margin: 16px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.api-container table th,
|
||||
.api-container table td {
|
||||
border: 1px solid @site-border-color-split;
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
}
|
||||
.code-box .highlight-wrapper {
|
||||
display: block;
|
||||
}
|
||||
.code-box-meta > h4 {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
padding: 1px 8px;
|
||||
margin-left: -8px;
|
||||
color: #777;
|
||||
border-radius: 2px 2px 0 0;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
width: auto;
|
||||
}
|
||||
.code-box-code-copy {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import Demo from './components/demo.vue'
|
||||
const AsyncComp = () => {
|
||||
const hashs = window.location.hash.split('/')
|
||||
const d = hashs[hashs.length - 1]
|
||||
return {
|
||||
component: import(`../components/input-number/demo/${d}`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
{ path: '/:lang?/components/:name/:demo?/:other?', component: Demo },
|
||||
{ path: '/:lang?/test/:name/:demo?', component: AsyncComp },
|
||||
{ path: '/*', redirect: '/us/components/button' },
|
||||
]
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
/* stylelint-disable no-duplicate-selectors */
|
||||
.color-palettes {
|
||||
margin: 0 1%;
|
||||
}
|
||||
.color-palette {
|
||||
margin: 45px 1%;
|
||||
width: 31%;
|
||||
display: inline-block;
|
||||
&-pick {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
&-picker {
|
||||
margin: 12px 0 24px;
|
||||
&-value {
|
||||
font-size: 13px;
|
||||
font-family: Consolas;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-color {
|
||||
text-align: left;
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
padding: 0 12px;
|
||||
margin-right: 4px;
|
||||
transition: all .2s;
|
||||
position: relative;
|
||||
font-family: Consolas;
|
||||
font-size: 14px;
|
||||
&:first-child {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
&:hover {
|
||||
margin-right: -8px;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
&-item &-text {
|
||||
transition: all .3s;
|
||||
float: left;
|
||||
}
|
||||
&-item &-value {
|
||||
float: right;
|
||||
transform: scale(0.85);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
left: 3px;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
.color-title {
|
||||
margin: 0 0 24px;
|
||||
font-weight: 500;
|
||||
color: #5c6b77;
|
||||
font-size: 22px;
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.color-description {
|
||||
font-size: 14px;
|
||||
font-weight: lighter;
|
||||
color: #777;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.main-color:hover {
|
||||
.main-color-value {
|
||||
opacity: 0.7;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.color-palette-horizontal {
|
||||
width: 100%;
|
||||
|
||||
.main-color {
|
||||
display: flex;
|
||||
|
||||
&-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
border-radius: 0;
|
||||
height: 86px;
|
||||
text-align: center;
|
||||
padding-top: 37px;
|
||||
line-height: normal;
|
||||
|
||||
.main-color-text {
|
||||
float: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
margin-top: -10px;
|
||||
height: 96px;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-value {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
float: none;
|
||||
transform-origin: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.main-color-item {
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.main-color-value {
|
||||
opacity: 0.7;
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.make-palatte(@color, @index: 1) when (@index <= 10) {
|
||||
.palatte-@{color}-@{index} {
|
||||
@background: "@{color}-@{index}";
|
||||
background: @@background;
|
||||
}
|
||||
.make-palatte(@color, (@index + 1)); // next iteration
|
||||
}
|
||||
|
||||
@grey-1: #fff;
|
||||
@grey-2: #fafafa;
|
||||
@grey-3: #f5f5f5;
|
||||
@grey-4: #e8e8e8;
|
||||
@grey-5: #d9d9d9;
|
||||
@grey-6: #bfbfbf;
|
||||
@grey-7: #8c8c8c;
|
||||
@grey-8: #595959;
|
||||
@grey-9: #262626;
|
||||
@grey-10: #000;
|
||||
|
||||
@border-color: rgba(229, 231, 235, 100);
|
||||
|
||||
.main-color {
|
||||
.make-palatte(blue);
|
||||
.make-palatte(purple);
|
||||
.make-palatte(cyan);
|
||||
.make-palatte(green);
|
||||
.make-palatte(magenta);
|
||||
.make-palatte(red);
|
||||
.make-palatte(volcano);
|
||||
.make-palatte(orange);
|
||||
.make-palatte(gold);
|
||||
.make-palatte(yellow);
|
||||
.make-palatte(lime);
|
||||
.make-palatte(geekblue);
|
||||
.make-palatte(grey);
|
||||
}
|
||||
|
|
@ -1,132 +0,0 @@
|
|||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: @font-family;
|
||||
line-height: 1.5;
|
||||
color: @site-text-color;
|
||||
font-size: 14px;
|
||||
background: #fff;
|
||||
transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: color .3s ease;
|
||||
&:focus {
|
||||
text-decoration: underline;
|
||||
text-decoration-skip: ink;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
background: #fff;
|
||||
padding: 40px 0 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding: 0 170px 144px 64px;
|
||||
background: #fff;
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
border-left: 1px solid @site-border-color-split;
|
||||
position: relative;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
padding-bottom: 50px;
|
||||
font-family: Lato, @font-family;
|
||||
|
||||
&.ant-menu-inline .ant-menu-submenu-title h4,
|
||||
&.ant-menu-inline > .ant-menu-item,
|
||||
&.ant-menu-inline .ant-menu-item a {
|
||||
font-size: 14px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&.ant-menu-inline .ant-menu-item-group-title {
|
||||
padding-left: 56px;
|
||||
}
|
||||
|
||||
a[disabled] {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.menu-item-link-outside {
|
||||
position: relative;
|
||||
.anticon {
|
||||
font-size: 12px;
|
||||
color: @primary-color;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
&:hover .anticon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-container .chinese {
|
||||
font-size: 12px;
|
||||
margin-left: 6px;
|
||||
font-weight: normal;
|
||||
opacity: .67;
|
||||
}
|
||||
|
||||
.outside-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.outside-link:after {
|
||||
content: '\e691';
|
||||
font-family: 'anticon';
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.outside-link.internal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// reset menu text color
|
||||
.menu-site .ant-menu-item > a {
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.menu-site .ant-menu-item-selected > a,
|
||||
.menu-site .ant-menu-item > a:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
#react-content {
|
||||
transition: transform .3s @ease-in-out-circ;
|
||||
}
|
||||
.page-wrapper {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
z-index: 1029;
|
||||
}
|
||||
|
|
@ -1,261 +0,0 @@
|
|||
.code-boxes-col-1-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.code-boxes-col-2-1 {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
border: 1px solid @site-border-color-split;
|
||||
border-radius: @border-radius-sm;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
margin: 0 0 16px;
|
||||
transition: all .2s;
|
||||
|
||||
&:target {
|
||||
border: 1px solid @primary-color;
|
||||
}
|
||||
|
||||
&-expand-trigger {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #9199ac;
|
||||
margin-left: 5px;
|
||||
opacity: .8;
|
||||
transition: all .3s;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
|
||||
&-active {
|
||||
color: #3b4357;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
padding: 1px 8px;
|
||||
margin-left: -8px;
|
||||
color: #777;
|
||||
border-radius: @border-radius-sm @border-radius-sm 0 0;
|
||||
background: #fff;
|
||||
transition: background-color .4s;
|
||||
|
||||
a,
|
||||
a:hover {
|
||||
color: @site-text-color;
|
||||
font-size: @font-size-base;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
a.edit-button {
|
||||
position: absolute;
|
||||
right: -16px;
|
||||
top: 7px;
|
||||
font-size: 12px;
|
||||
transform: scale(0.9);
|
||||
background: #fff;
|
||||
padding-right: 6px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&-demo {
|
||||
border-bottom: 1px solid @site-border-color-split;
|
||||
padding: 42px 24px 50px;
|
||||
color: rgba(0, 0, 0, .65);
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&-meta {
|
||||
&.markdown {
|
||||
position: relative;
|
||||
padding: 18px 32px;
|
||||
border-radius: 0 0 @border-radius-sm @border-radius-sm;
|
||||
transition: background-color .4s;
|
||||
width: 100%;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h4,
|
||||
section& p {
|
||||
margin: 0;
|
||||
width: 98%;
|
||||
}
|
||||
|
||||
> p {
|
||||
font-size: 12px;
|
||||
margin: 0.5em 0;
|
||||
padding-right: 25px;
|
||||
width: 100%;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
&.expand &-meta {
|
||||
border-radius: 0;
|
||||
border-bottom: 1px dashed @site-border-color-split;
|
||||
}
|
||||
|
||||
.code-expand-icon {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 23px;
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.code-expand-icon-show,
|
||||
.code-expand-icon-hide {
|
||||
transition: all 0.4s;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
vertical-align: baseline;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.code-expand-icon-show {
|
||||
opacity: 0.55;
|
||||
pointer-events: auto;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.code-expand-icon.ant-tooltip-open .code-expand-icon-show {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.code-expand-icon-hide {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.highlight-wrapper {
|
||||
display: none;
|
||||
overflow: auto;
|
||||
border-radius: 0 0 @border-radius-sm @border-radius-sm;
|
||||
|
||||
&-expand {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight {
|
||||
position: relative;
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-top: 1px dashed @site-border-color-split;
|
||||
}
|
||||
}
|
||||
|
||||
&-actions {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
text-align: right;
|
||||
> i,
|
||||
> form {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&-code-copy {
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all .24s;
|
||||
background: #fff;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
border-radius: 20px;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: @site-text-color-secondary;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
&.anticon-check {
|
||||
color: @green-6 !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
&-codepen {
|
||||
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/OtZslpOjYXijshDERXwc.svg") center / 14px no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-riddle {
|
||||
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/DlHbxMCyeuyOrqOdbgik.svg") center / 14px no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-codesandbox {
|
||||
background: transparent url("https://gw.alipayobjects.com/zos/rmsportal/aaYmtdDyHSCkXyLZVgGK.svg") center / 14px no-repeat;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all .3s;
|
||||
border: 0;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.highlight-wrapper:hover &-code-copy,
|
||||
.highlight-wrapper:hover &-codepen,
|
||||
.highlight-wrapper:hover &-codesandbox,
|
||||
.highlight-wrapper:hover &-riddle {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
width: auto;
|
||||
code {
|
||||
border: none;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
.algolia-autocomplete {
|
||||
.ds-dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: @box-shadow-base;
|
||||
|
||||
[class^="ds-dataset-"] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--title {
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.algolia-docsearch-suggestion--highlight {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
@import './colors';
|
||||
|
||||
@padding-space: 144px;
|
||||
|
||||
footer {
|
||||
clear: both;
|
||||
font-size: 14px;
|
||||
background-color: #000;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
box-shadow: 0 1000px 0 1000px #fff;
|
||||
.ant-row {
|
||||
text-align: center;
|
||||
.footer-center {
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
> h2 {
|
||||
font-size: 16px;
|
||||
margin: 0 auto 24px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
|
||||
> .title-icon {
|
||||
width: 27px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
> .anticon {
|
||||
font-size: 16px;
|
||||
position: absolute;
|
||||
left: -22px;
|
||||
top: 3px;
|
||||
color: #aaa;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
margin: 12px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-wrap {
|
||||
position: relative;
|
||||
padding: 86px @padding-space 93px @padding-space;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.bottom-bar {
|
||||
text-align: right;
|
||||
padding: 16px @padding-space;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.translate-button {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
h2 {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
& > span {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,144 +0,0 @@
|
|||
@header-height: 64px;
|
||||
@menu-item-border: 2px;
|
||||
|
||||
#header {
|
||||
transition: all 0.3s;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
max-width: 100%;
|
||||
&.home-nav-bottom {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: #ebedee;
|
||||
.search {
|
||||
border-left-color: #ebedee;
|
||||
}
|
||||
a {
|
||||
color: @site-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header-link {
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.ant-menu-item-active .header-link {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
#logo {
|
||||
overflow: hidden;
|
||||
padding-left: 40px;
|
||||
float: left;
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
img {
|
||||
height: 32px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
img + img {
|
||||
height: 16px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
#search-box {
|
||||
border-left: 1px solid @site-border-color-split;
|
||||
float: left;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
padding-left: 16px;
|
||||
margin: 22px auto 0;
|
||||
}
|
||||
|
||||
#search-box .anticon {
|
||||
color: #ced4d9;
|
||||
position: relative;
|
||||
top: 0.5px;
|
||||
}
|
||||
|
||||
#search-box input {
|
||||
font-size: 14px;
|
||||
margin-top: -5px;
|
||||
width: 200px;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: #a3b1bf;
|
||||
}
|
||||
}
|
||||
|
||||
.header-lang-button,
|
||||
.version {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.header-lang-button {
|
||||
color: @text-color;
|
||||
border-color: @border-color-base;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
#nav {
|
||||
border: 0;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-family: Lato, @font-family;
|
||||
&.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
|
||||
& > .ant-menu-item {
|
||||
height: @header-height;
|
||||
line-height: @header-height - @menu-item-border - 2px;
|
||||
min-width: 72px;
|
||||
border-top: @menu-item-border solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-top: @menu-item-border solid @primary-color;
|
||||
border-bottom: @menu-item-border solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-menu-item-selected {
|
||||
border-top: @menu-item-border solid @primary-color;
|
||||
border-bottom: @menu-item-border solid transparent;
|
||||
a {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .ant-menu-item {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.component-select {
|
||||
&.ant-select-dropdown {
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
|
||||
font-size: 14px;
|
||||
}
|
||||
.ant-select-dropdown-menu {
|
||||
max-height: 200px;
|
||||
}
|
||||
.ant-select-dropdown-menu-item {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.ant-component-decs {
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
color: #aaa;
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,153 +0,0 @@
|
|||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
background: white;
|
||||
color: @site-text-color;
|
||||
line-height: 2;
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 16px 32px;
|
||||
border-radius: @border-radius-sm;
|
||||
font-size: @font-size-base;
|
||||
white-space: pre;
|
||||
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 12px 20px;
|
||||
margin: 16px 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f2f4f5;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #f81d22;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #0b8235;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #0b8235;
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #008dff;
|
||||
}
|
||||
|
||||
.token.function {
|
||||
color: #f81d22;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -1,366 +0,0 @@
|
|||
@home-bg-color: #2f54eb;
|
||||
@home-text-color: #314659;
|
||||
|
||||
.home-page-wrapper {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
position: relative; // will-change: transform;
|
||||
color: @home-text-color;
|
||||
font-family: Avenir, @font-family;
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
padding: 0 24px;
|
||||
h2 {
|
||||
font-size: 38px;
|
||||
line-height: 46px;
|
||||
color: @home-text-color;
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
margin: 140px auto 100px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-bg {
|
||||
&-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
width: 120%;
|
||||
height: 200px;
|
||||
background: @home-bg-color;
|
||||
position: absolute;
|
||||
bottom: -200px;
|
||||
left: 0%;
|
||||
transform-origin: 0;
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 576px;
|
||||
&-wrapper {
|
||||
overflow: initial;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.text-wrapper {
|
||||
width: 54%;
|
||||
max-width: 560px;
|
||||
min-height: 336px;
|
||||
color: #0d1a26;
|
||||
> * {
|
||||
will-change: transform;
|
||||
}
|
||||
h1 {
|
||||
font-size: 68px;
|
||||
font-weight: 600;
|
||||
line-height: 76px;
|
||||
margin: 8px 0 28px;
|
||||
letter-spacing: 0;
|
||||
font-family: Avenir, @font-family;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
line-height: 40px;
|
||||
color: @home-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.img-wrapper {
|
||||
width: 46%;
|
||||
max-width: 482px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 26px;
|
||||
}
|
||||
|
||||
.banner-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
padding: 0 24px;
|
||||
border-radius: 100px;
|
||||
font-size: 16px;
|
||||
line-height: 38px;
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
margin-right: 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #2f54eb;
|
||||
}
|
||||
|
||||
.banner-btn.components {
|
||||
background: #2f54eb;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.banner-btn.language {
|
||||
color: #2f54eb;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
g {
|
||||
transform-origin: 50%;
|
||||
transform-box: fill-box;
|
||||
}
|
||||
}
|
||||
|
||||
/** page1 **/
|
||||
|
||||
.page1 {
|
||||
min-height: 784px;
|
||||
background: @home-bg-color;
|
||||
background: linear-gradient(to bottom, rgba(47, 84, 235, 1) 0%, rgba(58, 64, 212, 1) 100%);
|
||||
h2 {
|
||||
color: #fff !important;
|
||||
}
|
||||
&-block {
|
||||
max-width: 160px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
h3 {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover .page1-image {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 6px 10px rgba(5, 26, 180, .35);
|
||||
}
|
||||
}
|
||||
&-image {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #fff;
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 46px auto 40px;
|
||||
transition: transform .45s @ease-out, box-shadow .45s @ease-out;
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-point-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
overflow: inherit !important;
|
||||
}
|
||||
}
|
||||
|
||||
/** page2 **/
|
||||
|
||||
.page2 {
|
||||
background: #eff3f6;
|
||||
min-height: 1110px;
|
||||
overflow: initial;
|
||||
padding-top: 1px;
|
||||
.page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
h2 {
|
||||
margin-bottom: 142px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
box-shadow: 0 12px 20px #d8e0e6;
|
||||
background: @home-bg-color;
|
||||
}
|
||||
&-components,
|
||||
&-product {
|
||||
min-height: 554px;
|
||||
}
|
||||
&-components {
|
||||
position: initial;
|
||||
background: @home-bg-color;
|
||||
padding: 56px;
|
||||
color: #fff;
|
||||
line-height: 32px;
|
||||
h3 {
|
||||
font-size: 28px;
|
||||
margin: 0 auto 32px;
|
||||
color: #fff;
|
||||
}
|
||||
.components-button-wrapper {
|
||||
position: absolute;
|
||||
bottom: 48px;
|
||||
left: 56px;
|
||||
a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
line-height: 1.5em;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-product {
|
||||
background: #fff;
|
||||
padding: 48px 56px;
|
||||
.product-block {
|
||||
margin-bottom: 34px;
|
||||
cursor: pointer;
|
||||
color: @home-text-color;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.block-text-wrapper {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
.block-text-wrapper {
|
||||
padding-bottom: 35px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
p {
|
||||
line-height: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.more {
|
||||
display: inline-block;
|
||||
line-height: 22px;
|
||||
color: @home-bg-color;
|
||||
vertical-align: top;
|
||||
i {
|
||||
font-size: 12px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
.block-image-wrapper {
|
||||
height: 104px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
display: block;
|
||||
max-width: 80%;
|
||||
}
|
||||
&.right {
|
||||
float: right;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
h4 {
|
||||
color: @home-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.parallax-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
&.bottom {
|
||||
z-index: 0;
|
||||
}
|
||||
&.top {
|
||||
margin-top: 220px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
svg {
|
||||
overflow: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** page3 **/
|
||||
|
||||
.page3 {
|
||||
min-height: 556px;
|
||||
&-block {
|
||||
padding: 24px 12px;
|
||||
a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: @home-text-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
h3 {
|
||||
color: @home-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-img-wrapper,
|
||||
&-text-wrapper {
|
||||
display: inline-block;
|
||||
}
|
||||
&-text-wrapper {
|
||||
// max-width: 182px;
|
||||
margin-left: 32px;
|
||||
line-height: 24px;
|
||||
margin-top: 2px;
|
||||
h3 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
.parallax-bg.top {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/** video **/
|
||||
|
||||
.new-version-video {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: #fbfbfb;
|
||||
.vidoe-wrap {
|
||||
background: url('https://gw.alipayobjects.com/zos/rmsportal/gEeRuETmbpAYRaeilexm.jpg') repeat-x;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
video {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
ul.anticons-list {
|
||||
margin: 40px 0;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
li {
|
||||
float: left;
|
||||
width: 16.66%;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
height: 100px;
|
||||
color: #555;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
margin: 3px 0;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
padding: 10px 0 0;
|
||||
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
margin: 12px 0 16px;
|
||||
transition: all .3s;
|
||||
}
|
||||
|
||||
.anticon-class {
|
||||
display: block;
|
||||
text-align: center;
|
||||
transform: scale(0.83);
|
||||
font-family: "Lucida Console", Consolas;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @primary-color;
|
||||
color: #fff;
|
||||
.anticon {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
}
|
||||
|
||||
&.copied:hover {
|
||||
color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
content: "Copied!";
|
||||
text-align: center;
|
||||
line-height: 110px;
|
||||
color: #fff;
|
||||
transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&.copied:after {
|
||||
opacity: 1;
|
||||
top: -10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
@import '../../../components/style/v2-compatible-reset.less';
|
||||
@import '../../../components/style/themes/default.less';
|
||||
@import './common';
|
||||
@import './header';
|
||||
@import './footer';
|
||||
@import './home';
|
||||
@import './page-nav';
|
||||
@import './markdown';
|
||||
@import './resource';
|
||||
@import './preview-img';
|
||||
@import './toc';
|
||||
@import './not-found';
|
||||
@import './highlight';
|
||||
@import './demo';
|
||||
@import './colors';
|
||||
@import './icons';
|
||||
@import './mock-browser';
|
||||
@import './new-version-info-modal';
|
||||
@import './motion';
|
||||
@import './responsive';
|
||||
@import './theme';
|
||||
@import './docsearch';
|
||||
|
|
@ -1,325 +0,0 @@
|
|||
.markdown {
|
||||
color: @site-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
max-width: ~"calc(100% - 32px)";
|
||||
}
|
||||
|
||||
.markdown p > img {
|
||||
margin: 34px 0;
|
||||
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: @site-heading-color;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 8px;
|
||||
font-family: Lato, @font-family;
|
||||
font-size: 30px;
|
||||
line-height: 38px;
|
||||
|
||||
.subtitle {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 24px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: @site-heading-color;
|
||||
font-family: Lato, @font-family;
|
||||
margin: 1.6em 0 0.6em;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h3 { font-size: 18px; }
|
||||
.markdown h4 { font-size: 16px; }
|
||||
.markdown h5 { font-size: 14px; }
|
||||
.markdown h6 { font-size: 12px; }
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: @site-border-color-split;
|
||||
margin: 72px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p,
|
||||
.markdown pre {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
list-style-type: circle;
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown ol > li {
|
||||
list-style-type: decimal;
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown ul > li > p,
|
||||
.markdown ol > li > p {
|
||||
margin: 0.2em 0;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 1px;
|
||||
background: #f2f4f5;
|
||||
padding: .2em .4em;
|
||||
border-radius: 3px;
|
||||
font-size: .9em;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.markdown pre {
|
||||
border-radius: @border-radius-sm;
|
||||
background: #f2f4f5;
|
||||
font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
}
|
||||
|
||||
.markdown pre code {
|
||||
border: none;
|
||||
background: #f2f4f5;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: @font-size-base - 1px;
|
||||
color: @site-text-color;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.markdown > table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cells: show;
|
||||
border: 1px solid @site-border-color-split;
|
||||
width: 100%;
|
||||
margin: 8px 0 16px;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
white-space: nowrap;
|
||||
color: #5c6b77;
|
||||
font-weight: 500;
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.markdown > table th,
|
||||
.markdown > table td {
|
||||
border: 1px solid @site-border-color-split;
|
||||
padding: 16px 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: @site-text-color-secondary;
|
||||
border-left: 4px solid @site-border-color-split;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.markdown a.edit-button {
|
||||
line-height: 12px;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
height: 12px;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
|
||||
i {
|
||||
color: @site-text-color-secondary;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.anticon {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown > br,
|
||||
.markdown > p > br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown.api-container table {
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
td:first-child {
|
||||
font-weight: 500;
|
||||
width: 20%;
|
||||
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
td:nth-child(3) {
|
||||
width: 22%;
|
||||
font-size: 12px;
|
||||
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
td:last-child {
|
||||
width: 13%;
|
||||
font-size: 12px;
|
||||
font-family: "Lucida Console", Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-demo,
|
||||
[id^="components-grid-demo-"] {
|
||||
.demo-row,
|
||||
.code-box-demo .demo-row {
|
||||
background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%);
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ant-row-flex,
|
||||
.code-box-demo .ant-row-flex {
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.ant-row > div,
|
||||
.code-box-demo .ant-row > div,
|
||||
.ant-row-flex > div,
|
||||
.code-box-demo .ant-row-flex > div {
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
min-height: 30px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
color: #fff;
|
||||
}
|
||||
.code-box-demo .ant-row > div:not(.gutter-row),
|
||||
.code-box-demo .ant-row-flex > div:not(.gutter-row) {
|
||||
background: #00a0e9;
|
||||
padding: 16px 0;
|
||||
&:nth-child(2n+1) {
|
||||
background: fade(#00a0e9, 70%);
|
||||
}
|
||||
}
|
||||
.ant-row .demo-col,
|
||||
.code-box-demo .ant-row .demo-col {
|
||||
text-align: center;
|
||||
padding: 30px 0;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
border: none;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.ant-row .demo-col-1,
|
||||
.ant-row .demo-col-1 {
|
||||
background: fade(#00a0e9, 70%);
|
||||
}
|
||||
.ant-row .demo-col-2,
|
||||
.code-box-demo .ant-row .demo-col-2 {
|
||||
background: fade(#00a0e9, 50%);
|
||||
}
|
||||
.ant-row .demo-col-3,
|
||||
.code-box-demo .ant-row .demo-col-3 {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: #999;
|
||||
}
|
||||
.ant-row .demo-col-4,
|
||||
.code-box-demo .ant-row .demo-col-4 {
|
||||
background: fade(#00a0e9, 60%);
|
||||
}
|
||||
.ant-row .demo-col-5,
|
||||
.code-box-demo .ant-row .demo-col-5 {
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: #999;
|
||||
}
|
||||
.code-box-demo .height-100 {
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
}
|
||||
.code-box-demo .height-50 {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
}
|
||||
.code-box-demo .height-120 {
|
||||
height: 120px;
|
||||
line-height: 120px;
|
||||
}
|
||||
.code-box-demo .height-80 {
|
||||
height: 80px;
|
||||
line-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
// For Changelog
|
||||
.markdown ul.ant-timeline {
|
||||
line-height: 2;
|
||||
li.ant-timeline-item {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 30px;
|
||||
.ant-timeline-item-content {
|
||||
font-size: 14px;
|
||||
padding-left: 32px;
|
||||
position: relative;
|
||||
top: -14px;
|
||||
> h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
li.ant-timeline-item:first-child {
|
||||
margin-top: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
/* Browser mockup code
|
||||
* Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
|
||||
* Live example: https://updown.io
|
||||
*/
|
||||
|
||||
.browser-mockup {
|
||||
border-top: 2em solid rgba(230, 230, 230, 0.7);
|
||||
box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
|
||||
position: relative;
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
|
||||
.browser-mockup:before {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1.25em;
|
||||
left: 1em;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
border-radius: 50%;
|
||||
background-color: #f44;
|
||||
box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
|
||||
}
|
||||
|
||||
.browser-mockup.with-tab:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -2em;
|
||||
left: 5.5em;
|
||||
width: 20%;
|
||||
height: 0;
|
||||
border-bottom: 2em solid white;
|
||||
border-left: 0.8em solid transparent;
|
||||
border-right: 0.8em solid transparent;
|
||||
}
|
||||
|
||||
.browser-mockup.with-url:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: -1.6em;
|
||||
left: 5.5em;
|
||||
width: ~"calc(100% - 6em)";
|
||||
height: 1.2em;
|
||||
border-radius: 2px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.browser-mockup > * {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
.motion-container {
|
||||
height: 190px;
|
||||
line-height: 190px;
|
||||
text-align: center;
|
||||
margin: 40px 0 20px;
|
||||
}
|
||||
|
||||
.motion-example {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
line-height: 180px;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
display: inline-block !important;
|
||||
border-radius: 8px;
|
||||
animation-duration: 0.5s !important;
|
||||
font-weight: bold;
|
||||
background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
|
||||
}
|
||||
|
||||
.motion-select-wrapper {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.motion-select {
|
||||
text-align: left;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.video-player {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
&-right {
|
||||
width: 616px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.new-version-info-modal {
|
||||
img {
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
left: 34px;
|
||||
top: 36px;
|
||||
}
|
||||
p {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.anticon {
|
||||
display: none;
|
||||
}
|
||||
.ant-confirm-body {
|
||||
.ant-confirm-title {
|
||||
font-size: 18px;
|
||||
}
|
||||
margin-left: 120px;
|
||||
.ant-confirm-content {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
#page-404 {
|
||||
background-image: url('https://os.alipayobjects.com/rmsportal/NOAjOBbnYCrNzrW.jpg');
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
top: 48%;
|
||||
left: 55%;
|
||||
margin: -103px 0 0 -120px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: @primary-color;
|
||||
font-size: 120px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
color: @site-text-color;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: @primary-color;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* Fancy blur effect */
|
||||
#nprogress .peg {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 100px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
|
||||
opacity: 1;
|
||||
transform: rotate(3deg) translate(0, -4px);
|
||||
}
|
||||
|
||||
/* Remove these to get rid of the spinner */
|
||||
#nprogress .spinner {
|
||||
display: block;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
#nprogress .spinner-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
box-sizing: border-box;
|
||||
border: solid 2px transparent;
|
||||
border-top-color: @primary-color;
|
||||
border-left-color: @primary-color;
|
||||
border-radius: 50%;
|
||||
animation: nprogress-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nprogress-custom-parent #nprogress .spinner,
|
||||
.nprogress-custom-parent #nprogress .bar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@keyframes nprogress-spinner {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.prev-next-nav {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: ~"calc(100% - 194px - 64px)";
|
||||
margin-left: 64px;
|
||||
font-size: 14px;
|
||||
border-top: 1px solid @site-border-color-split;
|
||||
|
||||
> .prev-page,
|
||||
> .next-page {
|
||||
width: 50%;
|
||||
float: left;
|
||||
line-height: 72px;
|
||||
height: 72px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
> a.prev-page {
|
||||
&:before {
|
||||
font-family: 'anticon';
|
||||
content: '\e61c';
|
||||
font-size: 12px;
|
||||
margin-right: 1em;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
color: @primary-color;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
> .next-page {
|
||||
text-align: right;
|
||||
float: right;
|
||||
|
||||
&:after {
|
||||
font-family: 'anticon';
|
||||
content: '\e61b';
|
||||
font-size: 12px;
|
||||
margin-left: 1em;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all .3s;
|
||||
position: relative;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&:hover:after {
|
||||
color: @primary-color;
|
||||
right: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.chinese {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,159 +0,0 @@
|
|||
.preview-image-boxes {
|
||||
display: flex;
|
||||
float: right;
|
||||
margin: 0 0 70px 64px;
|
||||
width: 496px;
|
||||
clear: both;
|
||||
|
||||
&-with-carousel {
|
||||
width: 420px;
|
||||
|
||||
.preview-image-box img {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-boxes + .preview-image-boxes {
|
||||
margin-top: -35px;
|
||||
}
|
||||
|
||||
.preview-image-box {
|
||||
width: 100%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.preview-image-box + .preview-image-box {
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.preview-image-wrapper {
|
||||
background: #f2f4f5;
|
||||
padding: 16px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image-wrapper.video {
|
||||
padding: 0;
|
||||
background: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.preview-image-wrapper video {
|
||||
width: 100%;
|
||||
display: block;
|
||||
+ svg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-wrapper.good:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: @primary-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-image-wrapper.bad:after {
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: @error-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.preview-image-title {
|
||||
font-size: 12px;
|
||||
margin-top: 5px;
|
||||
color: @site-text-color;
|
||||
}
|
||||
|
||||
.preview-image-description {
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
color: @site-text-color-secondary;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.preview-image-description hr {
|
||||
margin: 2px 0;
|
||||
border: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.preview-image-box img {
|
||||
cursor: pointer;
|
||||
max-width: 100%;
|
||||
transition: all .3s;
|
||||
background: #fff;
|
||||
padding: 12px;
|
||||
border-radius: @border-radius-base;
|
||||
&.no-padding {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.preview-image-boxes.preview-image-boxes-with-carousel img {
|
||||
padding: 0;
|
||||
box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 #fff, 0 4px 0 0 #ddd, 0 6px 0 0 #fff, 0 7px 0 0 #ddd;
|
||||
}
|
||||
|
||||
.preview-image-box img:hover {
|
||||
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.image-modal {
|
||||
text-align: center;
|
||||
|
||||
&-container {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ant-carousel {
|
||||
.slick-slider {
|
||||
padding-bottom: 24px;
|
||||
img {
|
||||
display: inline;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.slick-dots {
|
||||
bottom: 4px;
|
||||
li button {
|
||||
background: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-modal-single.slick-slider {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.image-modal-single .slick-dots {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.transition-video-player {
|
||||
float: right;
|
||||
padding: 0 0 70px 20px;
|
||||
width: 600px;
|
||||
|
||||
.preview-image-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
.resource-cards {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.resource-card {
|
||||
display: flex;
|
||||
max-width: 420px;
|
||||
width: ~"calc(50% - 24px)";
|
||||
min-width: 300px;
|
||||
height: 130px;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
margin: 24px 24px 0 0;
|
||||
vertical-align: middle;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.resource-card:hover {
|
||||
box-shadow: 0 3px 8px #d3ddeb;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.resource-card:hover .resource-card-title {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.resource-card.disabled {
|
||||
opacity: 0.45;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.resource-card-cover, .resource-card-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.resource-card-cover img {
|
||||
width: 68px;
|
||||
}
|
||||
|
||||
.resource-card-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.resource-card-title {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: @site-text-color;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.resource-card-description {
|
||||
display: block;
|
||||
color: #697b8c;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
|
@ -1,369 +0,0 @@
|
|||
@import "../../../components/style/themes/default.less";
|
||||
|
||||
.nav-phone-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
top: 25px;
|
||||
z-index: 1;
|
||||
width: 16px;
|
||||
height: 22px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1440px) and (max-width: 1599px) {
|
||||
.main-wrapper > .ant-row > .ant-col-xl-5 {
|
||||
width: 274px;
|
||||
}
|
||||
|
||||
#header .ant-row .ant-col-xl-5 {
|
||||
width: 274px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.en-us #search-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: @screen-xl) {
|
||||
#search-box {
|
||||
display: none;
|
||||
}
|
||||
#logo {
|
||||
padding: 0 40px;
|
||||
}
|
||||
.banner-wrapper .banner-title-wrapper {
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
}
|
||||
p {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.99px) {
|
||||
#header {
|
||||
text-align: center;
|
||||
#logo {
|
||||
float: initial;
|
||||
}
|
||||
}
|
||||
#search-box {
|
||||
display: none;
|
||||
}
|
||||
.code-boxes-col-2-1, .code-boxes-col-1-1 {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.preview-image-boxes {
|
||||
margin: 0 !important;
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
.preview-image-box {
|
||||
padding-left: 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.version {
|
||||
display: block;
|
||||
margin: 29px auto 16px;
|
||||
}
|
||||
|
||||
.popover-menu {
|
||||
width: 300px;
|
||||
div.version {
|
||||
margin: 16px auto;
|
||||
}
|
||||
.ant-popover-inner {
|
||||
overflow: hidden;
|
||||
&-content {
|
||||
padding: 0;
|
||||
.ant-select {
|
||||
width: 60%;
|
||||
display: block;
|
||||
}
|
||||
.ant-btn {
|
||||
margin: 16px 8% 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#nav a.header-link {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
ul#nav,
|
||||
ul#nav li {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul#nav li {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
padding: 0 !important;
|
||||
border: 0;
|
||||
a {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-phone-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-phone-icon:before {
|
||||
content: "";
|
||||
display: block;
|
||||
border-radius: 2px;
|
||||
width: 16px;
|
||||
height: 2px;
|
||||
background: #777;
|
||||
box-shadow: 0 6px 0 0 #777, 0 12px 0 0 #777;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.main {
|
||||
height: calc(100% - 86px);
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
float: none;
|
||||
width: auto;
|
||||
padding-bottom: 30px;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
margin-right: 0;
|
||||
> .markdown > * {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
text-align: center;
|
||||
.footer-wrap {
|
||||
padding: 40px;
|
||||
.ant-row {
|
||||
padding: 0;
|
||||
> div {
|
||||
&:nth-child(2),
|
||||
&:nth-child(4) {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.footer-center {
|
||||
text-align: center;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.bottom-bar {
|
||||
padding: 16px;
|
||||
|
||||
text-align: center;
|
||||
.translate-button {
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
> div > span {
|
||||
display: block;
|
||||
&:nth-child(1), &:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.prev-next-nav {
|
||||
margin-left: 16px;
|
||||
width: ~"calc(100% - 32px)";
|
||||
}
|
||||
|
||||
.drawer {
|
||||
.ant-menu-inline .ant-menu-item:after,
|
||||
.ant-menu-vertical .ant-menu-item:after {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#_hj_feedback_container {
|
||||
display: none;
|
||||
}
|
||||
/** home 区块 **/
|
||||
.home-page-wrapper {
|
||||
.page {
|
||||
h2 {
|
||||
margin: 80px auto 64px;
|
||||
}
|
||||
}
|
||||
.parallax-bg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
display: block;
|
||||
height: 632px;
|
||||
&-bg-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.img-wrapper,
|
||||
.text-wrapper {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
.img-wrapper {
|
||||
position: initial;
|
||||
margin-top: 48px;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.text-wrapper {
|
||||
margin-top: 48px;
|
||||
min-height: 200px;
|
||||
padding: 0 16px;
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
p {
|
||||
font-size: 14px;
|
||||
line-height: 28px;
|
||||
color: @home-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page1 {
|
||||
min-height: 1538px;
|
||||
.ant-row {
|
||||
margin: 24px auto 64px;
|
||||
>div {
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page2 {
|
||||
min-height: 840px;
|
||||
background: #fff;
|
||||
&-content {
|
||||
box-shadow: none;
|
||||
}
|
||||
&-components {
|
||||
display: none;
|
||||
}
|
||||
&-product {
|
||||
min-height: auto;
|
||||
padding: 0 16px;
|
||||
.product-block {
|
||||
padding-bottom: 35px;
|
||||
margin-bottom: 34px;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
&:last-child {
|
||||
margin-bottom: 32px;
|
||||
border-bottom: none;
|
||||
.block-text-wrapper {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.block-image-wrapper {
|
||||
height: 88px;
|
||||
img {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.block-text-wrapper {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
h4 {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
margin-bottom: 8px;
|
||||
line-height: 20px;
|
||||
}
|
||||
a {
|
||||
line-height: 20px;
|
||||
}
|
||||
.components-button-wrapper {
|
||||
font-size: 12px;
|
||||
margin-top: 16px;
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page3 {
|
||||
min-height: 688px;
|
||||
background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat;
|
||||
background-size: cover;
|
||||
.ant-row {
|
||||
margin: 0 8px;
|
||||
}
|
||||
.page3-block {
|
||||
padding: 24px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
|
||||
margin-bottom: 32px;
|
||||
&:nth-child(2) {
|
||||
.page3-img-wrapper img {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-size: 12px;
|
||||
}
|
||||
.page3-img-wrapper {
|
||||
width: 20%;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.page3-text-wrapper {
|
||||
width: 80%;
|
||||
margin: 0;
|
||||
max-width: initial;
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
@site-heading-color: #0d1a26;
|
||||
@site-text-color: #314659;
|
||||
@site-text-color-secondary: #697b8c;
|
||||
@site-border-color-split: #ebedf0;
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
.toc {
|
||||
font-size: 12px;
|
||||
margin: 16px 0;
|
||||
padding-left: 0;
|
||||
border-left: 1px solid #ebedf0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.toc > li {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
line-height: 1.5;
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.toc li > ul {
|
||||
text-indent: 8px;
|
||||
font-size: 12px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toc a {
|
||||
padding-left: 16px;
|
||||
display: block;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: @site-text-color;
|
||||
width: 110px;
|
||||
border-left: 1px solid transparent;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.toc a:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.toc a.current {
|
||||
border-color: @primary-color;
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
.toc-affix {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 20px;
|
||||
.ant-affix {
|
||||
background: #fff;
|
||||
overflow: auto;
|
||||
max-height: ~"calc(100vh - 16px)";
|
||||
}
|
||||
}
|
||||
.toc-affix-bottom {
|
||||
position: absolute;
|
||||
bottom: 88px;
|
||||
right: 20px;
|
||||
.ant-affix {
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
"dev": true,
|
||||
"requires": {
|
||||
"@babel/types": "7.0.0-beta.42",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/types": {
|
||||
|
|
@ -83,7 +83,7 @@
|
|||
"dev": true,
|
||||
"requires": {
|
||||
"esutils": "2.0.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"to-fast-properties": "2.0.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
"@babel/code-frame": "7.0.0-beta.36",
|
||||
"@babel/types": "7.0.0-beta.36",
|
||||
"babylon": "7.0.0-beta.36",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"babylon": {
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
"debug": "3.1.0",
|
||||
"globals": "11.1.0",
|
||||
"invariant": "2.2.2",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"babylon": {
|
||||
|
|
@ -152,7 +152,7 @@
|
|||
"dev": true,
|
||||
"requires": {
|
||||
"esutils": "2.0.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"to-fast-properties": "2.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -684,7 +684,7 @@
|
|||
"convert-source-map": "1.5.1",
|
||||
"fs-readdir-recursive": "1.1.0",
|
||||
"glob": "7.1.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"output-file-sync": "1.1.2",
|
||||
"path-is-absolute": "1.0.1",
|
||||
"slash": "1.0.0",
|
||||
|
|
@ -749,7 +749,7 @@
|
|||
"convert-source-map": "1.5.1",
|
||||
"debug": "2.6.9",
|
||||
"json5": "0.5.1",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"minimatch": "3.0.4",
|
||||
"path-is-absolute": "1.0.1",
|
||||
"private": "0.1.8",
|
||||
|
|
@ -800,7 +800,7 @@
|
|||
"babel-types": "6.26.0",
|
||||
"detect-indent": "4.0.0",
|
||||
"jsesc": "1.3.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"source-map": "0.5.7",
|
||||
"trim-right": "1.0.1"
|
||||
}
|
||||
|
|
@ -1513,7 +1513,7 @@
|
|||
"babel-traverse": "6.26.0",
|
||||
"babel-types": "6.26.0",
|
||||
"babylon": "6.18.0",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"babel-traverse": {
|
||||
|
|
@ -1530,7 +1530,7 @@
|
|||
"debug": "2.6.9",
|
||||
"globals": "9.18.0",
|
||||
"invariant": "2.2.2",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
|
|
@ -1552,7 +1552,7 @@
|
|||
"requires": {
|
||||
"babel-runtime": "6.26.0",
|
||||
"esutils": "2.0.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"to-fast-properties": "1.0.3"
|
||||
}
|
||||
},
|
||||
|
|
@ -2113,7 +2113,7 @@
|
|||
"dom-serializer": "0.1.0",
|
||||
"entities": "1.1.1",
|
||||
"htmlparser2": "3.9.2",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"parse5": "3.0.3"
|
||||
}
|
||||
},
|
||||
|
|
@ -2459,7 +2459,7 @@
|
|||
"integrity": "sha1-RYwH4J4NkA/Ci3Cj/sLazR0st/Y=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"combined-stream": {
|
||||
|
|
@ -3958,7 +3958,7 @@
|
|||
"js-yaml": "3.10.0",
|
||||
"json-stable-stringify-without-jsonify": "1.0.1",
|
||||
"levn": "0.3.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"minimatch": "3.0.4",
|
||||
"mkdirp": "0.5.1",
|
||||
"natural-compare": "1.4.0",
|
||||
|
|
@ -4446,7 +4446,7 @@
|
|||
"integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7058,7 +7058,7 @@
|
|||
"bluebird": "3.5.1",
|
||||
"html-minifier": "3.5.8",
|
||||
"loader-utils": "0.2.17",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"pretty-error": "2.1.1",
|
||||
"toposort": "1.0.6"
|
||||
},
|
||||
|
|
@ -7141,7 +7141,7 @@
|
|||
"requires": {
|
||||
"http-proxy": "1.16.2",
|
||||
"is-glob": "3.1.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"micromatch": "2.3.11"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
@ -7349,7 +7349,7 @@
|
|||
"cli-width": "2.2.0",
|
||||
"external-editor": "2.1.0",
|
||||
"figures": "2.0.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"mute-stream": "0.0.7",
|
||||
"run-async": "2.3.0",
|
||||
"rx-lite": "4.0.8",
|
||||
|
|
@ -7966,7 +7966,7 @@
|
|||
"integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8167,6 +8167,7 @@
|
|||
"resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
|
||||
"integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"jsonify": "0.0.0"
|
||||
}
|
||||
|
|
@ -8208,7 +8209,8 @@
|
|||
"version": "0.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
|
||||
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"jsonp": {
|
||||
"version": "0.2.1",
|
||||
|
|
@ -8354,7 +8356,7 @@
|
|||
"integrity": "sha1-0jyjSAG9qYY60xjju0vUBisTrNI=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"phantomjs-prebuilt": "2.1.16"
|
||||
}
|
||||
},
|
||||
|
|
@ -8833,9 +8835,9 @@
|
|||
}
|
||||
},
|
||||
"lodash": {
|
||||
"version": "4.17.4",
|
||||
"resolved": "https://registry.npm.taobao.org/lodash/download/lodash-4.17.4.tgz",
|
||||
"integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
|
||||
"version": "4.17.5",
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
|
||||
"integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
|
||||
},
|
||||
"lodash._baseassign": {
|
||||
"version": "3.2.0",
|
||||
|
|
@ -9808,7 +9810,8 @@
|
|||
"version": "1.4.4",
|
||||
"resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz",
|
||||
"integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"oauth-sign": {
|
||||
"version": "0.8.2",
|
||||
|
|
@ -13013,7 +13016,7 @@
|
|||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "2.3.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"log-symbols": "2.1.0",
|
||||
"postcss": "6.0.16"
|
||||
},
|
||||
|
|
@ -13682,6 +13685,7 @@
|
|||
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
|
||||
"integrity": "sha1-BktyYCsY+Q8pGSuLG8QY/9Hr078=",
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"asap": "2.0.6"
|
||||
}
|
||||
|
|
@ -15589,7 +15593,7 @@
|
|||
"ignore": "3.3.7",
|
||||
"imurmurhash": "0.1.4",
|
||||
"known-css-properties": "0.5.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"log-symbols": "2.1.0",
|
||||
"mathml-tag-names": "2.0.1",
|
||||
"meow": "4.0.0",
|
||||
|
|
@ -15995,7 +15999,7 @@
|
|||
"ajv": "5.5.2",
|
||||
"ajv-keywords": "2.1.1",
|
||||
"chalk": "2.3.0",
|
||||
"lodash": "4.17.4",
|
||||
"lodash": "4.17.5",
|
||||
"slice-ansi": "1.0.0",
|
||||
"string-width": "2.1.1"
|
||||
},
|
||||
|
|
@ -16394,7 +16398,8 @@
|
|||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
|
||||
"integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"uglifyjs-webpack-plugin": {
|
||||
"version": "0.4.6",
|
||||
|
|
@ -17044,7 +17049,7 @@
|
|||
"entities": "1.1.1",
|
||||
"htmlparser2": "3.8.3",
|
||||
"jsdom": "7.2.2",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"domhandler": {
|
||||
|
|
@ -17144,7 +17149,7 @@
|
|||
"eslint-visitor-keys": "1.0.0",
|
||||
"espree": "3.5.2",
|
||||
"esquery": "1.0.0",
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
|
|
@ -17307,7 +17312,7 @@
|
|||
"integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17364,7 +17369,7 @@
|
|||
"integrity": "sha1-YaKau2/MAm/qd+VtHG7FOnlZUfQ=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"camelcase": {
|
||||
|
|
@ -18003,7 +18008,7 @@
|
|||
"integrity": "sha1-8Rl6Cpc+acb77rbWWCGaqMDBNVU=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash": "4.17.4"
|
||||
"lodash": "4.17.5"
|
||||
}
|
||||
},
|
||||
"webpack-sources": {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,56 @@ import zhCN from 'antd/locale-provider/zh_CN'
|
|||
import enUS from 'antd/locale-provider/default'
|
||||
import _ from 'lodash'
|
||||
import { isZhCN } from '../util'
|
||||
import { Provider, create } from '../../components/_util/store'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
this.store = create({
|
||||
currentSubMenu: [],
|
||||
})
|
||||
this.subscribe()
|
||||
return {
|
||||
currentSubMenu: [],
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.params.name': function () {
|
||||
this.store.setState({ currentSubMenu: [] })
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
subscribe () {
|
||||
const { store } = this
|
||||
this.unsubscribe = store.subscribe(() => {
|
||||
this.currentSubMenu = this.store.getState().currentSubMenu
|
||||
})
|
||||
},
|
||||
getSubMenu (isCN) {
|
||||
const currentSubMenu = this.currentSubMenu
|
||||
const lis = []
|
||||
currentSubMenu.forEach(({ cnTitle, usTitle, id }) => {
|
||||
const title = isCN ? cnTitle : usTitle
|
||||
const className = window.location.hash === `#${id}` ? 'current' : ''
|
||||
lis.push(<li title={title} key={id}><a href={`#${id}`} class={className}>{title}</a></li>)
|
||||
})
|
||||
return (
|
||||
<a-affix>
|
||||
<ul id='demo-toc' class='toc'>
|
||||
{lis}
|
||||
</ul>
|
||||
</a-affix>
|
||||
)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const { name } = this.$route.params
|
||||
const lang = isZhCN(name) ? 'cn' : 'us'
|
||||
const isCN = isZhCN(name)
|
||||
const lang = isCN ? 'cn' : 'us'
|
||||
// name = name.replace('-cn', '')
|
||||
const titleMap = {}
|
||||
const menuConfig = {
|
||||
|
|
@ -41,7 +86,7 @@ export default {
|
|||
key = `${key}-cn`
|
||||
}
|
||||
MenuItems.push(<a-menu-item key={key}>
|
||||
<router-link to={{ path: `/ant-design/components/${key}` }}>{linkValue}</router-link>
|
||||
<router-link to={{ path: `/ant-design/components/${key}/` }}>{linkValue}</router-link>
|
||||
</a-menu-item>)
|
||||
})
|
||||
MenuGroup.push(<a-menu-item-group title={type}>{MenuItems}</a-menu-item-group>)
|
||||
|
|
@ -53,6 +98,7 @@ export default {
|
|||
return (
|
||||
<div class='page-wrapper'>
|
||||
<Header num={Object.keys(AllDemo).length}/>
|
||||
|
||||
<a-locale-provider locale={locale}>
|
||||
<div class='main-wrapper'>
|
||||
<a-row>
|
||||
|
|
@ -70,7 +116,10 @@ export default {
|
|||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div class='content main-container'>
|
||||
{Demo ? <Demo key={lang}/> : '正在紧急开发中...'}
|
||||
<div class='toc-affix' style='width: 110px;'>
|
||||
{this.getSubMenu(isCN)}
|
||||
</div>
|
||||
{Demo ? <Provider store={this.store}><Demo key={lang}/></Provider> : '正在紧急开发中...'}
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<section :class="['code-box', isOpen ? 'expand': '']">
|
||||
<section :class="['code-box', isOpen ? 'expand': '']" :id="id">
|
||||
<section class="code-box-demo">
|
||||
<slot name="component"></slot>
|
||||
</section>
|
||||
|
|
@ -37,18 +37,29 @@ export default {
|
|||
props: {
|
||||
jsfiddle: Object,
|
||||
},
|
||||
inject: {
|
||||
_store: { default: {}},
|
||||
},
|
||||
data () {
|
||||
const { name } = this.$route.params
|
||||
const { html, script, style } = this.jsfiddle
|
||||
const { name = '' } = this.$route.params
|
||||
const { html, script, style, us, cn } = this.jsfiddle
|
||||
let sourceCode = `<template>${html}</template>\n`
|
||||
sourceCode = script ? sourceCode + '\<script>' + script + '<\/script>' : sourceCode
|
||||
sourceCode = style ? sourceCode + '\<style>' + style + '<\/style>' : sourceCode
|
||||
const usTitle = (us.split('#### ')[1] || '').split('\n')[0] || ''
|
||||
const cnTitle = (cn.split('#### ')[1] || '').split('\n')[0] || ''
|
||||
const id = ['components', name.replace('-cn', ''), 'demo', ...usTitle.split(' ')].join('-').toLowerCase()
|
||||
if (this._store.store) {
|
||||
const { currentSubMenu } = this._store.store.getState()
|
||||
this._store.store.setState({ currentSubMenu: [...currentSubMenu, { cnTitle, usTitle, id }] })
|
||||
}
|
||||
return {
|
||||
isOpen: false,
|
||||
isZhCN: isZhCN(name),
|
||||
copied: false,
|
||||
copyTooltipVisible: false,
|
||||
sourceCode,
|
||||
id,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ export default {
|
|||
const { name } = this.$route.params
|
||||
const newName = isZhCN(name) ? name.replace('-cn', '') : `${name}-cn`
|
||||
this.$router.push({
|
||||
path: `/ant-design/components/${newName}`,
|
||||
path: `/ant-design/components/${newName}/`,
|
||||
})
|
||||
},
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import Demo from './components/demo.vue'
|
||||
const AsyncComp = () => {
|
||||
const d = window.location.hash.replace('#', '')
|
||||
return {
|
||||
component: import(`../components/input-number/demo/${d}`),
|
||||
}
|
||||
}
|
||||
export default [
|
||||
{ path: '/:prefix?/components/:name', component: Demo },
|
||||
// { path: '/:lang?/test/:name/:demo?', component: AsyncComp },
|
||||
{ path: '/*', redirect: '/ant-design/components/button' },
|
||||
{ path: '/:prefix?/components/:name/', component: Demo },
|
||||
{ path: '/:prefix?/test/:demo?/', component: AsyncComp },
|
||||
{ path: '/*', redirect: '/ant-design/components/button/' },
|
||||
]
|
||||
|
|
|
|||
|
|
@ -83,6 +83,8 @@ md.core.ruler.push('update_template', function replace ({ tokens }) {
|
|||
html: template,
|
||||
script,
|
||||
style,
|
||||
us,
|
||||
cn,
|
||||
}
|
||||
jsfiddle = md.utils.escapeHtml(JSON.stringify(jsfiddle))
|
||||
const codeHtml = code ? md.render(code) : ''
|
||||
|
|
|
|||
|
|
@ -5,14 +5,8 @@ const merge = require('webpack-merge')
|
|||
const baseWebpackConfig = require('./webpack.base.config')
|
||||
|
||||
module.exports = merge(baseWebpackConfig, {
|
||||
entry: {
|
||||
index: [
|
||||
'./examples/index.js',
|
||||
],
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, './dist'),
|
||||
// publicPath: '/',
|
||||
publicPath: '/ant-design/',
|
||||
filename: 'build.js',
|
||||
},
|
||||
|
|
@ -43,11 +37,6 @@ module.exports = merge(baseWebpackConfig, {
|
|||
devServer: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
// historyApiFallback: {
|
||||
// rewrites: [
|
||||
// { from: /.*/, to: '/index.html' },
|
||||
// ],
|
||||
// },
|
||||
historyApiFallback: {
|
||||
rewrites: [
|
||||
{ from: /./, to: '/ant-design/index.html' },
|
||||
|
|
|
|||
Loading…
Reference in New Issue