docs: update docs
tangjinzhou
parent
ffb2a593b1
commit
074aaafea9
|
|
@ -0,0 +1,88 @@
|
|||
|
||||
|
||||
Please find below some of the design resources and tools about Ant Design Vue that we consider valuable. More of this is still being collected.
|
||||
|
||||
> The following design resources are developed and maintained by the [Ant Design](https://ant.design).
|
||||
|
||||
<div class="resource-cards">
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/pKfDZnzocrbAOSzDQOQq.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">
|
||||
RENEW Symbols
|
||||
<span class="resource-card-hot-badge">BETA</span>
|
||||
</span>
|
||||
<span class="resource-card-description">Sketch Symbols for Desktop</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.3.0.Components.sketch" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/pKfDZnzocrbAOSzDQOQq.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">
|
||||
Sketch Symbols
|
||||
</span>
|
||||
<span class="resource-card-description">Sketch Symbols File for Desktop</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Pro.sketch" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ibCZMxKsTUzDbwTEdcTC.svg">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant Design Pro</span>
|
||||
<span class="resource-card-description">Common Templates and Pages</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="http://library.ant.design" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="50" src="https://gw.alipayobjects.com/zos/rmsportal/TXrKQUJBTuwSTGimGYYn.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant Design Library</span>
|
||||
<span class="resource-card-description">A powerful Axure library of Ant Design</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="http://kitchen.alipay.com" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ATYZYtJhchhONKObIwXT.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">
|
||||
Kitchen
|
||||
<span class="resource-card-hot-badge">HOT</span>
|
||||
</span>
|
||||
<span class="resource-card-description">A Sketch plugin with a collection of great tools</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="http://ux.ant.design" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="64" src="https://gw.alipayobjects.com/zos/rmsportal/yMULSUQQyhoEGrCXlovN.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant UX</span>
|
||||
<span class="resource-card-description">A series prototypes that help creating application structure and user flow</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Web Font</span>
|
||||
<span class="resource-card-description">Icon font package for your local reference</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.xiaopiu.com/topic/ant-design" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="72" src="https://img.xiaopiu.com/userImages/img753167822272f8.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant Design Prototype (xiaopiu)</span>
|
||||
<span class="resource-card-description">Online Ant Design library and interactive prototype</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
|
||||
这里提供 Ant Design Vue 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
|
||||
|
||||
> 以下设计资源由[Ant Design](https://ant.design)官方开发并维护
|
||||
|
||||
<div class="resource-cards">
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Components.Beta.3.10.5.sketch" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/pKfDZnzocrbAOSzDQOQq.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">
|
||||
新 Sketch Symbols 组件
|
||||
<span class="resource-card-hot-badge">BETA</span>
|
||||
</span>
|
||||
<span class="resource-card-description">桌面组件 Sketch 模板包</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.3.0.Components.sketch" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/pKfDZnzocrbAOSzDQOQq.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">
|
||||
Sketch Symbols 组件
|
||||
</span>
|
||||
<span class="resource-card-description">桌面组件 Sketch 模板包</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/Ant.Design.Pro.sketch" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ibCZMxKsTUzDbwTEdcTC.svg">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant Design Pro</span>
|
||||
<span class="resource-card-description">典型页面 + 通用业务模板</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="http://library.ant.design" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="50" src="https://gw.alipayobjects.com/zos/rmsportal/TXrKQUJBTuwSTGimGYYn.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant Design Library</span>
|
||||
<span class="resource-card-description">一套强大的 Ant Design 的 Axure 部件库</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="http://kitchen.alipay.com" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="65" src="https://gw.alipayobjects.com/zos/rmsportal/ATYZYtJhchhONKObIwXT.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">
|
||||
Kitchen
|
||||
<span class="resource-card-hot-badge">HOT</span>
|
||||
</span>
|
||||
<span class="resource-card-description">Sketch 工具集</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="http://ux.ant.design" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="64" src="https://gw.alipayobjects.com/zos/rmsportal/yMULSUQQyhoEGrCXlovN.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant UX</span>
|
||||
<span class="resource-card-description">一套页面逻辑原型库，帮你梳理页面逻辑</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://github.com/ant-design/ant-design/releases/download/resource/iconfont-3.x.zip" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="54" src="https://gw.alipayobjects.com/zos/rmsportal/bWBRrdYsVnVkXpFRCVFy.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Web Font</span>
|
||||
<span class="resource-card-description">网络字体图标的本地文件包</span>
|
||||
</div>
|
||||
</a>
|
||||
<a target="_blank" href="https://www.xiaopiu.com/topic/ant-design" class="resource-card">
|
||||
<div class="resource-card-icon">
|
||||
<img width="72" src="https://img.xiaopiu.com/userImages/img753167822272f8.png">
|
||||
</div>
|
||||
<div class="resource-card-content">
|
||||
<span class="resource-card-title">Ant Design 原型（xiaopiu）</span>
|
||||
<span class="resource-card-description">可在线编辑的 Ant Design 组件库和交互原型</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -98,9 +98,10 @@
|
|||
"cross-env": "^5.1.4",
|
||||
"css-loader": "^0.28.7",
|
||||
"deep-assign": "^2.0.0",
|
||||
"enquire-js": "^0.2.1",
|
||||
"eslint": "^4.7.2",
|
||||
"eslint-plugin-html": "^3.2.2",
|
||||
"eslint-config-prettier": "^3.0.1",
|
||||
"eslint-plugin-html": "^3.2.2",
|
||||
"eslint-plugin-vue": "^3.13.0",
|
||||
"eslint-plugin-vue-libs": "^1.2.1",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
|
|
|
|||
|
|
@ -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', 'zhihu', 'slack', 'slack-square', 'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque',
|
||||
],
|
||||
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-markdown', '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: [
|
||||
'zhihu', 'file-markdown', 'slack', 'slack-square', 'behance', 'behance-square', 'dribbble', 'dribbble-square', 'instagram', 'yuque',
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
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,5 +1,5 @@
|
|||
<template>
|
||||
<section :class="['code-box', isOpen ? 'expand': '']" :id="id">
|
||||
<section :class="['code-box', codeExpand ? 'expand': '']" :id="id">
|
||||
<section class="code-box-demo">
|
||||
<template v-if="iframeDemo[iframeDemoKey]">
|
||||
<div class="browser-mockup with-url">
|
||||
|
|
@ -13,12 +13,25 @@
|
|||
<section class="code-box-meta markdown">
|
||||
<slot v-if="isZhCN" name="description"></slot>
|
||||
<slot v-else name="us-description"></slot>
|
||||
<span class="btn-toggle" :class="{open: isOpen}" @click="toggle">
|
||||
<a-icon type="up" />
|
||||
<a-tooltip :title="codeExpand ? 'Hide Code' : 'Show Code'">
|
||||
<span class="code-expand-icon">
|
||||
<img
|
||||
alt="expand code"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/wSAkBuJFbdxsosKKpqyq.svg"
|
||||
:class="codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'"
|
||||
@click="handleCodeExpand"
|
||||
/>
|
||||
<img
|
||||
alt="expand code"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/OpROPHYqWmrMDBFMZtKF.svg"
|
||||
:class="codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'"
|
||||
@click="handleCodeExpand"
|
||||
/>
|
||||
</span>
|
||||
</a-tooltip>
|
||||
</section>
|
||||
<transition appear :css="false" @enter="enter" @leave="leave">
|
||||
<section class="highlight-wrapper" style="position: relative;" v-show="isOpen">
|
||||
<section class="highlight-wrapper" style="position: relative;" v-show="codeExpand">
|
||||
<a-tooltip
|
||||
:title="copied ? '复制成功' : '复制代码'"
|
||||
:visible="copyTooltipVisible"
|
||||
|
|
@ -73,7 +86,7 @@ export default {
|
|||
this.demoContext.store.setState({ currentSubMenu: [...currentSubMenu, { cnTitle, usTitle, id }] });
|
||||
}
|
||||
return {
|
||||
isOpen: false,
|
||||
codeExpand: false,
|
||||
isZhCN: isZhCN(name),
|
||||
copied: false,
|
||||
copyTooltipVisible: false,
|
||||
|
|
@ -83,8 +96,8 @@ export default {
|
|||
};
|
||||
},
|
||||
methods: {
|
||||
toggle () {
|
||||
this.isOpen = !this.isOpen;
|
||||
handleCodeExpand () {
|
||||
this.codeExpand = !this.codeExpand;
|
||||
},
|
||||
enter: animate.enter,
|
||||
leave: animate.leave,
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ export default {
|
|||
</a-button>
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div id='search-box' style='display: block'>
|
||||
<div id='search-box'>
|
||||
<a-icon type='search' />
|
||||
<a-select
|
||||
ref='selectBox'
|
||||
|
|
@ -77,9 +77,25 @@ export default {
|
|||
{isCN ? '组件' : 'Components'}
|
||||
</a-menu-item>
|
||||
<a-menu-item key='github'>
|
||||
<a href='https://github.com/vueComponent/ant-design-vue'>GitHub</a>
|
||||
<a target="_blank" href='https://github.com/vueComponent/ant-design-vue'>GitHub</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item key='sponsor'>
|
||||
<a-sub-menu key="Ecosystem" title={isCN ? '生态系统' : 'Ecosystem'}>
|
||||
<a-menu-item key="design">
|
||||
<router-link to={{ path: isCN ? '/ant-design-vue/docs/vue/download-cn/' : '/ant-design-vue/docs/vue/download/'}}>
|
||||
{isCN ? '设计资源' : 'Design Resources'}
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="vscode">
|
||||
<a target="_blank" href='https://marketplace.visualstudio.com/items?itemName=ant-design-vue.vscode-ant-design-vue-helper'>
|
||||
VS Code Extension
|
||||
</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="awesome">
|
||||
<a target="_blank" href='https://github.com/vueComponent/ant-design-vue-awesome'>
|
||||
Awesome
|
||||
</a>
|
||||
</a-menu-item>
|
||||
<a-menu-item key='dingding'>
|
||||
<a-popover placement='bottom'>
|
||||
<template slot='content'>
|
||||
<img
|
||||
|
|
@ -95,6 +111,12 @@ export default {
|
|||
</a>
|
||||
</a-popover>
|
||||
</a-menu-item>
|
||||
</a-sub-menu>
|
||||
<a-menu-item key="sponsor">
|
||||
<router-link to={{ path: isCN ? '/ant-design-vue/docs/vue/sponsor-cn/' : '/ant-design-vue/docs/vue/sponsor/'}}>
|
||||
{isCN ? '支持我们' : 'Support us'}
|
||||
</router-link>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { enquireScreen } from 'enquire-js';
|
||||
import AllDemo from '../demo';
|
||||
import Header from './header';
|
||||
import Footer from './footer';
|
||||
|
|
@ -9,6 +10,7 @@ import sortBy from 'lodash/sortBy';
|
|||
import { isZhCN } from '../util';
|
||||
import { Provider, create } from '../../components/_util/store';
|
||||
import NProgress from 'nprogress';
|
||||
import MobileMenu from '../../components/vc-drawer/src';
|
||||
|
||||
const docsList = [
|
||||
{ key: 'introduce', enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue' },
|
||||
|
|
@ -18,9 +20,15 @@ const docsList = [
|
|||
{ key: 'changelog', enTitle: 'Change Log', title: '更新日志' },
|
||||
{ key: 'i18n', enTitle: 'Internationalization', title: '国际化' },
|
||||
{ key: 'faq', enTitle: 'FAQ', title: '常见问题' },
|
||||
{ key: 'sponsor', enTitle: 'Sponsor', title: '赞助我们' },
|
||||
{ key: 'sponsor', enTitle: 'Sponsor', title: '支持我们' },
|
||||
{ key: 'download', enTitle: 'Download Design Resources', title: '下载设计资源' },
|
||||
];
|
||||
|
||||
let isMobile = false;
|
||||
enquireScreen(b => {
|
||||
isMobile = b;
|
||||
});
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
|
|
@ -36,6 +44,7 @@ export default {
|
|||
showSideBars: true,
|
||||
currentSubMenu: [],
|
||||
sidebarHeight: document.documentElement.offsetHeight,
|
||||
isMobile,
|
||||
};
|
||||
},
|
||||
provide () {
|
||||
|
|
@ -64,6 +73,9 @@ export default {
|
|||
nprogressHiddenStyle.parentNode.removeChild(nprogressHiddenStyle);
|
||||
}, 0);
|
||||
}
|
||||
enquireScreen(b => {
|
||||
this.isMobile = !!b;
|
||||
});
|
||||
});
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -212,15 +224,30 @@ export default {
|
|||
}
|
||||
const config = AllDemo[titleMap[reName]];
|
||||
this.resetDocumentTitle(config, reName, isCN);
|
||||
const { showSideBars } = this;
|
||||
const { showSideBars, isMobile } = this;
|
||||
return (
|
||||
<div class='page-wrapper'>
|
||||
<Header searchData={searchData} name={name}/>
|
||||
<a-locale-provider locale={locale}>
|
||||
<div class='main-wrapper'>
|
||||
<a-row>
|
||||
<a-col v-show={showSideBars} ref='sidebar' class='site-sidebar' xxl={4} xl={5} lg={5} md={6} sm={8} xs={12}>
|
||||
<div class='drawer-mask' onClick={() => { this.showSideBars = false; }}></div>
|
||||
{isMobile ? <MobileMenu ref='sidebar' wrapperClassName='drawer-wrapper'>
|
||||
<a-menu
|
||||
class='aside-container menu-site'
|
||||
selectedKeys={[name]}
|
||||
defaultOpenKeys={['Components']}
|
||||
inlineIndent={40}
|
||||
mode='inline'>
|
||||
{docsMenu}
|
||||
<a-sub-menu title={`Components(${searchData.length})`} key='Components'>
|
||||
{MenuGroup}
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
</MobileMenu>
|
||||
:
|
||||
<a-col ref='sidebar' class='site-sidebar main-menu' xxl={4} xl={5} lg={5} md={6} sm={8} xs={12}>
|
||||
<a-affix>
|
||||
<section class="main-menu-inner">
|
||||
<Sponsors title={isCN ? '赞助商' : 'Sponsors'}/>
|
||||
<a-menu
|
||||
class='aside-container menu-site'
|
||||
|
|
@ -233,18 +260,15 @@ export default {
|
|||
{MenuGroup}
|
||||
</a-sub-menu>
|
||||
</a-menu>
|
||||
<div class='close-drawer' onClick={() => { this.showSideBars = false; }}>
|
||||
<a-icon type='close'/>
|
||||
</div>
|
||||
</section>
|
||||
</a-affix>
|
||||
</a-col>
|
||||
<div v-show={!showSideBars} class='open-drawer' onClick={() => { this.showSideBars = true; }}>
|
||||
<a-icon type='bars'/>
|
||||
</div>
|
||||
<a-col class='main-container' xxl={20} xl={19} lg={19} md={18} sm={24} xs={24}>
|
||||
<div class='content'>
|
||||
<div class='toc-affix' style='width: 120px;'>
|
||||
}
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={24} xs={24}>
|
||||
<section class='main-container main-container-component'>
|
||||
{!isMobile ? <div class='toc-affix' style='width: 120px;'>
|
||||
{this.getSubMenu(isCN)}
|
||||
</div>
|
||||
</div> : null}
|
||||
{this.showDemo ? <Provider store={this.store} key={isCN ? 'cn' : 'en'}>
|
||||
<router-view
|
||||
class={`demo-cols-${config.cols || 2}`}
|
||||
|
|
@ -266,16 +290,16 @@ export default {
|
|||
] }}
|
||||
></router-view>
|
||||
</div> : ''}
|
||||
</div>
|
||||
</section>
|
||||
<section class='prev-next-nav'>
|
||||
{prevPage ? <router-link class='prev-page' to={`${prevPage.url}`}><a-icon type='left' /> {prevPage.title}</router-link> : ''}
|
||||
{nextPage ? <router-link class='next-page' to={`${nextPage.url}`}>{nextPage.title} <a-icon type='right' /></router-link> : ''}
|
||||
</section>
|
||||
<Footer ref='footer' isCN={isCN}/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
<Footer ref='footer' isCN={isCN}/>
|
||||
{ name.indexOf('back-top') === -1 ? <a-back-top /> : null }
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
124
site/index.less
124
site/index.less
|
|
@ -1,4 +1,5 @@
|
|||
@import './theme/static/index.less';
|
||||
@import '../components/vc-drawer/assets/index.less';
|
||||
.site {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -14,6 +15,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
#search-box {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.api-container table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
|
|
@ -86,9 +93,6 @@
|
|||
.toc-affix .ant-affix {
|
||||
overflow: visible;
|
||||
}
|
||||
.main-wrapper {
|
||||
margin-top: 64px;
|
||||
}
|
||||
.demo-anchor {
|
||||
.ant-anchor-link-title {
|
||||
font-size: 12px;
|
||||
|
|
@ -98,76 +102,6 @@
|
|||
z-index: 1;
|
||||
}
|
||||
@media only screen and (max-width: 767.99px) {
|
||||
.sponsorsWrap {
|
||||
display: none;
|
||||
}
|
||||
.site-sidebar {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
overflow-y: scroll;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
.aside-container {
|
||||
width: 80%;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
border-right: 1px solid #e8e8e8;
|
||||
}
|
||||
}
|
||||
.main-wrapper {
|
||||
z-index: 11;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.drawer-mask {
|
||||
background: #000;
|
||||
opacity: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.close-drawer {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
width: 41px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
z-index: 0;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
left: 80%;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.open-drawer {
|
||||
position: fixed;
|
||||
top: 72px;
|
||||
width: 41px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
left: 0;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.toc-affix {
|
||||
display: none !important;
|
||||
}
|
||||
.header-left .header-lang-button {
|
||||
margin-right: 10px;
|
||||
position: absolute;
|
||||
|
|
@ -185,20 +119,10 @@
|
|||
.header-left .header-lang-button {
|
||||
display: none;
|
||||
}
|
||||
.drawer-mask {
|
||||
display: none !important;
|
||||
}
|
||||
.close-drawer {
|
||||
display: none !important;
|
||||
}
|
||||
.open-drawer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
.sponsorsWrap {
|
||||
padding-left: 40px;
|
||||
position: relative;
|
||||
top: -15px;
|
||||
.sponsorsTitle {
|
||||
color: #777;
|
||||
font-weight: 300;
|
||||
|
|
@ -213,3 +137,37 @@
|
|||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
#nav {
|
||||
border: 0;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, @font-family;
|
||||
font-variant: tabular-nums;
|
||||
&.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
|
||||
& > .ant-menu-submenu {
|
||||
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-submenu {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
@ -99,6 +99,16 @@ export default [
|
|||
component: () => import('../docs/vue/faq.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/download',
|
||||
component: () => import('../docs/vue/download.en-US.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/download-cn',
|
||||
component: () => import('../docs/vue/download.zh-CN.md'),
|
||||
beforeEnter,
|
||||
},
|
||||
{
|
||||
path: 'docs/vue/sponsor',
|
||||
component: () => import('../docs/vue/sponsor.en-US.md'),
|
||||
|
|
|
|||
|
|
@ -9,13 +9,23 @@
|
|||
&-pick {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
&-picker {
|
||||
margin: 12px 0 24px;
|
||||
margin: 24px 0;
|
||||
&-value {
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
font-family: Consolas;
|
||||
margin-left: 16px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
&-validation {
|
||||
font-size: 13px;
|
||||
color: @error-color;
|
||||
margin-left: 16px;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ body {
|
|||
|
||||
body {
|
||||
font-family: @font-family;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 1.5;
|
||||
color: @site-text-color;
|
||||
font-size: 14px;
|
||||
|
|
@ -32,18 +33,26 @@ a {
|
|||
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;
|
||||
|
||||
&-inner {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
&:hover &-inner {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-container {
|
||||
padding-bottom: 50px;
|
||||
font-family: Lato, @font-family;
|
||||
padding-bottom: 48px;
|
||||
font-family: Avenir, @font-family;
|
||||
|
||||
&.ant-menu-inline .ant-menu-submenu-title h4,
|
||||
&.ant-menu-inline > .ant-menu-item,
|
||||
|
|
@ -89,9 +98,7 @@ a {
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.outside-link:after {
|
||||
content: '\e691';
|
||||
font-family: 'anticon';
|
||||
.outside-link-icon {
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
|
|
@ -113,6 +120,7 @@ a {
|
|||
|
||||
#react-content {
|
||||
transition: transform 0.3s @ease-in-out-circ;
|
||||
height: 100%;
|
||||
}
|
||||
.page-wrapper {
|
||||
overflow: hidden;
|
||||
|
|
@ -130,3 +138,7 @@ a {
|
|||
.drawer {
|
||||
z-index: 1029;
|
||||
}
|
||||
|
||||
#_hj_feedback_container .path1:before {
|
||||
color: @primary-color !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,17 +22,12 @@
|
|||
|
||||
&-expand-trigger {
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
color: #9199ac;
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
color: #3b4357;
|
||||
margin-left: 8px;
|
||||
opacity: 0.8;
|
||||
transition: all 0.3s;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
|
||||
&-active {
|
||||
color: #3b4357;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
|
|
@ -129,6 +124,7 @@
|
|||
top: 0;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
vertical-align: baseline;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,8 +8,9 @@ footer {
|
|||
background-color: #000;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
margin-left: -1px;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
box-shadow: 0 1000px 0 1000px #fff;
|
||||
|
||||
.ant-row {
|
||||
text-align: center;
|
||||
.footer-center {
|
||||
|
|
@ -44,13 +45,17 @@ footer {
|
|||
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.bottom-bar {
|
||||
text-align: right;
|
||||
text-align: center;
|
||||
padding: 16px @padding-space;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
overflow: hidden;
|
||||
font-family: Avenir, @font-family;
|
||||
font-size: 16px;
|
||||
font-variant: tabular-nums;
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
margin-left: 4px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
|
@ -58,6 +63,10 @@ footer {
|
|||
.translate-button {
|
||||
text-align: left;
|
||||
}
|
||||
.heart {
|
||||
color: #f73f51;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
|
|
|
|||
|
|
@ -2,14 +2,11 @@
|
|||
@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%;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
&.home-nav-bottom {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-bottom-color: #ebedee;
|
||||
|
|
@ -40,7 +37,7 @@
|
|||
white-space: nowrap;
|
||||
img {
|
||||
height: 32px;
|
||||
margin-right: 10px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
img + img {
|
||||
height: 16px;
|
||||
|
|
@ -94,7 +91,8 @@
|
|||
border: 0;
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-family: Lato, @font-family;
|
||||
font-family: Avenir, @font-family;
|
||||
font-variant: tabular-nums;
|
||||
&.ant-menu-horizontal {
|
||||
border-bottom: none;
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
position: relative; // will-change: transform;
|
||||
color: @home-text-color;
|
||||
font-family: Avenir, @font-family;
|
||||
font-variant: tabular-nums;
|
||||
.page {
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
|
|
@ -63,6 +64,7 @@
|
|||
.text-wrapper {
|
||||
width: 54%;
|
||||
max-width: 560px;
|
||||
min-width: 420px;
|
||||
min-height: 336px;
|
||||
color: #0d1a26;
|
||||
> * {
|
||||
|
|
@ -75,6 +77,7 @@
|
|||
margin: 8px 0 28px;
|
||||
letter-spacing: 0;
|
||||
font-family: Avenir, @font-family;
|
||||
font-variant: tabular-nums;
|
||||
}
|
||||
p {
|
||||
font-size: 20px;
|
||||
|
|
@ -89,12 +92,17 @@
|
|||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 26px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.banner-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
min-width: 520px;
|
||||
}
|
||||
|
||||
.banner-btn {
|
||||
|
|
@ -108,6 +116,8 @@
|
|||
margin-right: 16px;
|
||||
text-decoration: none;
|
||||
border: 1px solid #2f54eb;
|
||||
font-family: @font-family;
|
||||
font-variant: tabular-nums;
|
||||
}
|
||||
|
||||
.banner-btn.components {
|
||||
|
|
@ -192,7 +202,7 @@ svg {
|
|||
position: relative;
|
||||
z-index: 1;
|
||||
h2 {
|
||||
margin-bottom: 142px;
|
||||
margin-bottom: 112px;
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
|
|
@ -201,7 +211,7 @@ svg {
|
|||
}
|
||||
&-components,
|
||||
&-product {
|
||||
min-height: 554px;
|
||||
min-height: 670px;
|
||||
}
|
||||
&-components {
|
||||
position: initial;
|
||||
|
|
@ -230,7 +240,7 @@ svg {
|
|||
background: #fff;
|
||||
padding: 48px 56px;
|
||||
.product-block {
|
||||
margin-bottom: 34px;
|
||||
margin-bottom: 24px;
|
||||
cursor: pointer;
|
||||
color: @home-text-color;
|
||||
&:last-child {
|
||||
|
|
@ -241,17 +251,33 @@ svg {
|
|||
}
|
||||
}
|
||||
.block-text-wrapper {
|
||||
padding-bottom: 35px;
|
||||
padding-bottom: 24px;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #ebedf0;
|
||||
h4 {
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
margin-bottom: 8px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
.new {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
padding: 0 2px;
|
||||
font-size: 12px;
|
||||
background: #f5222d;
|
||||
line-height: 16px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
transform: translate(~'calc(100% + 4px)', -50%); // 手机回行处理
|
||||
}
|
||||
}
|
||||
p {
|
||||
line-height: 24px;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.more {
|
||||
display: inline-block;
|
||||
|
|
@ -263,6 +289,12 @@ svg {
|
|||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.more-mobile-react,
|
||||
.more-mobile-angular {
|
||||
display: block;
|
||||
color: @home-bg-color;
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.block-image-wrapper {
|
||||
height: 104px;
|
||||
|
|
@ -364,3 +396,13 @@ svg {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.banner-1024 {
|
||||
cursor: pointer;
|
||||
transition: all 0.4s;
|
||||
display: block;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-16px) scale(1.01);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,8 +22,9 @@
|
|||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 8px;
|
||||
font-family: Lato, @font-family;
|
||||
font-family: Avenir, @font-family;
|
||||
font-size: 30px;
|
||||
font-variant: tabular-nums;
|
||||
line-height: 38px;
|
||||
|
||||
.subtitle {
|
||||
|
|
@ -42,7 +43,8 @@
|
|||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: @site-heading-color;
|
||||
font-family: Lato, @font-family;
|
||||
font-family: Avenir, @font-family;
|
||||
font-variant: tabular-nums;
|
||||
margin: 1.6em 0 0.6em;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
|
|
@ -65,7 +67,7 @@
|
|||
height: 1px;
|
||||
border: 0;
|
||||
background: @site-border-color-split;
|
||||
margin: 72px 0;
|
||||
margin: 56px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
|
@ -171,12 +173,9 @@
|
|||
}
|
||||
|
||||
.markdown a.edit-button {
|
||||
line-height: 12px;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
height: 12px;
|
||||
margin-left: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
|
||||
i {
|
||||
color: @site-text-color-secondary;
|
||||
|
|
@ -210,20 +209,32 @@
|
|||
.markdown.api-container table {
|
||||
font-size: @font-size-base;
|
||||
line-height: @line-height-base;
|
||||
font-family: @code-family;
|
||||
border-width: 0;
|
||||
margin: 2em 0;
|
||||
th,
|
||||
td {
|
||||
padding: 14px 16px;
|
||||
border-width: 1px 0;
|
||||
border-color: @border-color-split;
|
||||
}
|
||||
th {
|
||||
border-width: 0 0 2px 0;
|
||||
}
|
||||
td:first-child {
|
||||
font-weight: 500;
|
||||
width: 20%;
|
||||
font-family: 'Lucida Console', Consolas, Menlo, Courier, monospace;
|
||||
color: @blue-9;
|
||||
}
|
||||
td:nth-child(3) {
|
||||
width: 22%;
|
||||
font-size: 12px;
|
||||
font-family: 'Lucida Console', Consolas, Menlo, Courier, monospace;
|
||||
font-size: @font-size-base - 1px;
|
||||
color: @magenta-7;
|
||||
word-break: break-all;
|
||||
}
|
||||
td:last-child {
|
||||
width: 13%;
|
||||
font-size: 12px;
|
||||
font-family: 'Lucida Console', Consolas, Menlo, Courier, monospace;
|
||||
font-size: @font-size-base - 1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -371,7 +382,7 @@
|
|||
top: -14px;
|
||||
> h2 {
|
||||
margin-top: 0;
|
||||
padding-top: 2px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,14 @@
|
|||
/* Make clicks pass-through */
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
.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%;
|
||||
.peg {
|
||||
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;
|
||||
.spinner-icon {
|
||||
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,9 +1,7 @@
|
|||
.prev-next-nav {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: ~'calc(100% - 194px - 64px)';
|
||||
margin-left: 64px;
|
||||
margin-right: 64px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
border-top: 1px solid @site-border-color-split;
|
||||
|
||||
|
|
@ -16,9 +14,47 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
> a.prev-page {
|
||||
.footer-nav-icon-before {
|
||||
font-size: 12px;
|
||||
margin-right: 1em;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.footer-nav-icon-after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .footer-nav-icon-before {
|
||||
color: @primary-color;
|
||||
left: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
> .next-page {
|
||||
text-align: right;
|
||||
float: right;
|
||||
|
||||
.footer-nav-icon-after {
|
||||
font-size: 12px;
|
||||
margin-left: 1em;
|
||||
color: @site-text-color-secondary;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.footer-nav-icon-before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover .footer-nav-icon-after {
|
||||
color: @primary-color;
|
||||
right: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.chinese {
|
||||
|
|
|
|||
|
|
@ -148,7 +148,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.transition-video-player {
|
||||
.transition-video-player,
|
||||
.motion-video-min {
|
||||
float: right;
|
||||
padding: 0 0 70px 20px;
|
||||
width: 600px;
|
||||
|
|
@ -157,3 +158,42 @@
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.motion-video-min {
|
||||
width: 390px;
|
||||
}
|
||||
|
||||
.motion-principle-wrapper {
|
||||
width: 100%;
|
||||
max-width: 900px;
|
||||
margin: 48px 0 24px;
|
||||
}
|
||||
|
||||
.principle-wrapper {
|
||||
width: 100%;
|
||||
|
||||
.principle {
|
||||
width: 100%;
|
||||
min-height: 180px;
|
||||
display: inline-block;
|
||||
margin-right: 12.5%;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e8e8e8;
|
||||
margin-bottom: 24px;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 16px 0 8px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
|
||||
.resource-card {
|
||||
display: flex;
|
||||
max-width: 420px;
|
||||
max-width: 500px;
|
||||
width: ~'calc(50% - 24px)';
|
||||
min-width: 300px;
|
||||
min-width: 400px;
|
||||
height: 130px;
|
||||
border: 1px solid @border-color-base;
|
||||
border-radius: @border-radius-base;
|
||||
|
|
@ -65,6 +65,17 @@
|
|||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.resource-card-hot-badge {
|
||||
background: #f50;
|
||||
border-radius: 2px;
|
||||
padding: 0 3px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
margin-left: 2px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.resource-card-description {
|
||||
display: block;
|
||||
color: #697b8c;
|
||||
|
|
|
|||
|
|
@ -11,12 +11,6 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@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;
|
||||
|
|
@ -55,8 +49,9 @@
|
|||
width: 100%;
|
||||
}
|
||||
.preview-image-box {
|
||||
padding-left: 0;
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
|
|
@ -115,17 +110,6 @@
|
|||
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);
|
||||
}
|
||||
|
|
@ -149,6 +133,7 @@
|
|||
.main-wrapper {
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
|
|
@ -174,23 +159,6 @@
|
|||
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 {
|
||||
|
|
@ -232,13 +200,18 @@
|
|||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
max-width: unset;
|
||||
min-width: unset;
|
||||
}
|
||||
.img-wrapper {
|
||||
position: initial;
|
||||
margin-top: 48px;
|
||||
margin-top: 32px;
|
||||
text-align: center;
|
||||
svg {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
max-width: 360px;
|
||||
}
|
||||
}
|
||||
.text-wrapper {
|
||||
|
|
@ -253,10 +226,16 @@
|
|||
line-height: 28px;
|
||||
color: @home-text-color;
|
||||
}
|
||||
.banner-btns {
|
||||
display: block;
|
||||
text-align: center;
|
||||
min-width: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.page1 {
|
||||
min-height: 1538px;
|
||||
min-height: 1300px;
|
||||
.ant-row {
|
||||
margin: 24px auto 64px;
|
||||
> div {
|
||||
|
|
@ -316,6 +295,15 @@
|
|||
display: block;
|
||||
}
|
||||
}
|
||||
a.more-mobile-react,
|
||||
a.more-mobile-angular {
|
||||
color: @link-color;
|
||||
margin-top: 0;
|
||||
}
|
||||
a.more-mobile-react:hover,
|
||||
a.more-mobile-angular:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<li
|
||||
:class="justCopied ? 'copied' : ''"
|
||||
:class="justCopied === type ? 'copied' : ''"
|
||||
v-clipboard:copy="text"
|
||||
v-clipboard:success="onCopied">
|
||||
<a-icon :type="type" :theme="theme"/>
|
||||
|
|
|
|||
|
|
@ -197,6 +197,7 @@ export const categories = {
|
|||
'heart',
|
||||
'environment',
|
||||
'eye',
|
||||
'eye-invisible',
|
||||
'camera',
|
||||
'save',
|
||||
'team',
|
||||
|
|
|
|||
Loading…
Reference in New Issue