mirror of https://github.com/ElemeFE/element
Homepage: update style and some docs (#877)
parent
6f55d6d9af
commit
b5e97d857d
|
@ -40,7 +40,7 @@
|
||||||
background-color: #f9fafc;
|
background-color: #f9fafc;
|
||||||
border: solid 1px #eaeefb;
|
border: solid 1px #eaeefb;
|
||||||
margin-bottom: 25px;
|
margin-bottom: 25px;
|
||||||
border-radius: 2px;
|
border-radius: 4px;
|
||||||
-webkit-font-smoothing: auto;
|
-webkit-font-smoothing: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -83,14 +83,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.header-fixed {
|
|
||||||
position: fixed;
|
|
||||||
top: -80px;
|
|
||||||
box-shadow: 0 2px 6px 0 rgba(50, 63, 87, 0.25);
|
|
||||||
}
|
|
||||||
.header-hangUp {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
.header-home {
|
.header-home {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -103,9 +95,7 @@
|
||||||
ref="header"
|
ref="header"
|
||||||
:style="headerStyle"
|
:style="headerStyle"
|
||||||
:class="{
|
:class="{
|
||||||
'header-home': isHome,
|
'header-home': isHome
|
||||||
'header-fixed': isFixed,
|
|
||||||
'header-hangUp': hangUp
|
|
||||||
}">
|
}">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1><router-link to="/">Element<span>Beta</span></router-link></h1>
|
<h1><router-link to="/">Element<span>Beta</span></router-link></h1>
|
||||||
|
@ -139,10 +129,8 @@
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
active: '',
|
active: '',
|
||||||
isFixed: false,
|
|
||||||
isHome: false,
|
isHome: false,
|
||||||
headerStyle: {},
|
headerStyle: {}
|
||||||
hangUp: false
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
|
@ -154,43 +142,16 @@
|
||||||
mounted() {
|
mounted() {
|
||||||
this.isHome = this.$route.path === '/';
|
this.isHome = this.$route.path === '/';
|
||||||
function scroll(fn) {
|
function scroll(fn) {
|
||||||
var beforeScrollTop = document.body.scrollTop;
|
|
||||||
|
|
||||||
window.addEventListener('scroll', () => {
|
window.addEventListener('scroll', () => {
|
||||||
const afterScrollTop = document.body.scrollTop;
|
fn();
|
||||||
var delta = afterScrollTop - beforeScrollTop;
|
|
||||||
|
|
||||||
if (delta === 0) return false;
|
|
||||||
|
|
||||||
fn(delta > 0 ? 'down' : 'up');
|
|
||||||
beforeScrollTop = afterScrollTop;
|
|
||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
scroll((direction) => {
|
scroll(() => {
|
||||||
if (this.isHome) {
|
if (this.isHome) {
|
||||||
this.hangUp = false;
|
|
||||||
this.isFixed = false;
|
|
||||||
this.headerStyle.transition = '';
|
|
||||||
const threshold = 200;
|
const threshold = 200;
|
||||||
let alpha = Math.min(document.body.scrollTop, threshold) / threshold;
|
let alpha = Math.min(document.body.scrollTop, threshold) / threshold;
|
||||||
this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
|
this.$refs.header.style.backgroundColor = `rgba(32, 160, 255, ${ alpha })`;
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
this.headerStyle.backgroundColor = 'rgba(32, 160, 255, 1)';
|
|
||||||
const bounding = this.$el.getBoundingClientRect();
|
|
||||||
if (bounding.bottom < 0) {
|
|
||||||
this.isFixed = true;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.headerStyle.transition = 'all .5s ease';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (bounding.top === 0) {
|
|
||||||
this.isFixed = false;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.headerStyle.transition = '';
|
|
||||||
});
|
|
||||||
}
|
|
||||||
this.hangUp = direction === 'up';
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -95,7 +95,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
## Date Picker 日期选择器
|
## DatePicker 日期选择器
|
||||||
|
|
||||||
用于选择或输入日期
|
用于选择或输入日期
|
||||||
|
|
||||||
|
|
|
@ -96,7 +96,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
## 日期时间选择器
|
## DateTimePicker 日期时间选择器
|
||||||
|
|
||||||
在同一个选择器里选择日期和时间
|
在同一个选择器里选择日期和时间
|
||||||
|
|
||||||
|
|
|
@ -64,6 +64,9 @@
|
||||||
.el-input {
|
.el-input {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
.el-button--text {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
## Dialog 对话框
|
## Dialog 对话框
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
## Input Number 数字输入框
|
## InputNumber 计数器
|
||||||
|
|
||||||
仅允许输入标准的数字值,可定义范围
|
仅允许输入标准的数字值,可定义范围
|
||||||
|
|
||||||
|
|
|
@ -72,7 +72,7 @@
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
## Message box 信息提示
|
## MessageBox 弹框
|
||||||
模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、成功提示、错误提示、询问信息。
|
模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、成功提示、错误提示、询问信息。
|
||||||
|
|
||||||
### 消息提示
|
### 消息提示
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
## Time Picker 时间选择器
|
## TimePicker 时间选择器
|
||||||
|
|
||||||
用于选择或输入日期
|
用于选择或输入日期
|
||||||
|
|
||||||
|
|
|
@ -72,7 +72,7 @@
|
||||||
{
|
{
|
||||||
"path": "/input-number",
|
"path": "/input-number",
|
||||||
"name": "计数器 (input-number)",
|
"name": "计数器 (input-number)",
|
||||||
"title": "Input Number 计数器"
|
"title": "InputNumber 计数器"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/select",
|
"path": "/select",
|
||||||
|
@ -95,19 +95,19 @@
|
||||||
{
|
{
|
||||||
"path": "/time-picker",
|
"path": "/time-picker",
|
||||||
"name": "时间选择器(time-picker)",
|
"name": "时间选择器(time-picker)",
|
||||||
"title": "Time Picker 时间选择器",
|
"title": "TimePicker 时间选择器",
|
||||||
"description": "用于选择或输入时间"
|
"description": "用于选择或输入时间"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/date-picker",
|
"path": "/date-picker",
|
||||||
"name": "日期选择器(date-picker)",
|
"name": "日期选择器(date-picker)",
|
||||||
"title": "Date Picker 日期选择器",
|
"title": "DatePicker 日期选择器",
|
||||||
"description": "用于选择或输入时间"
|
"description": "用于选择或输入时间"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/datetime-picker",
|
"path": "/datetime-picker",
|
||||||
"name": "日期时间选择器",
|
"name": "日期时间选择器",
|
||||||
"title": "Datetime Picker 日期时间选择器",
|
"title": "DateTimePicker 日期时间选择器",
|
||||||
"description": "用于选择或输入日期时间"
|
"description": "用于选择或输入日期时间"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -116,16 +116,16 @@
|
||||||
"title": "Upload 上传",
|
"title": "Upload 上传",
|
||||||
"description": "文件上传组件"
|
"description": "文件上传组件"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "/rate",
|
||||||
|
"name": "评分 (rate)",
|
||||||
|
"title": "Rate 评分"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "/form",
|
"path": "/form",
|
||||||
"name": "表单 (form)",
|
"name": "表单 (form)",
|
||||||
"title": "Form 表单",
|
"title": "Form 表单",
|
||||||
"description": "一个多功能的并带有字段验证的表单组件"
|
"description": "一个多功能的并带有字段验证的表单组件"
|
||||||
},
|
|
||||||
{
|
|
||||||
"path": "/rate",
|
|
||||||
"name": "评分 (rate)",
|
|
||||||
"title": "Rate 评分"
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -164,7 +164,7 @@
|
||||||
{
|
{
|
||||||
"path": "/badge",
|
"path": "/badge",
|
||||||
"name": "标记 (badge)",
|
"name": "标记 (badge)",
|
||||||
"title": " Badge 标记",
|
"title": "Badge 标记",
|
||||||
"description": "出现在按钮、图标旁的数字或状态标记"
|
"description": "出现在按钮、图标旁的数字或状态标记"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -193,7 +193,7 @@
|
||||||
{
|
{
|
||||||
"path": "/message-box",
|
"path": "/message-box",
|
||||||
"name": "弹框 (message-box)",
|
"name": "弹框 (message-box)",
|
||||||
"title": "Message Box 弹框"
|
"title": "MessageBox 弹框"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "/notification",
|
"path": "/notification",
|
||||||
|
@ -204,7 +204,7 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"groupName": "Nav",
|
"groupName": "Navigation",
|
||||||
"list": [
|
"list": [
|
||||||
{
|
{
|
||||||
"path": "/menu",
|
"path": "/menu",
|
||||||
|
|
Loading…
Reference in New Issue