Skip to content

E
Element
Commit 8c71f100 authored by Leopoldthecoder's avatar Leopoldthecoder
Browse files
Options

Merge branch 'next' of github.com:eleme/element-ui into next 

# Conflicts:
#	examples/app.vue
#	examples/nav.config.json
#	examples/pages/component.vue
#	examples/pages/design.vue
#	examples/pages/guide.vue
#	examples/pages/nav.vue
#	examples/pages/resource.vue
#	examples/route.config.js
parents 84229951 b51aeab3
Show whitespace changes
Inline Side-by-side
Showing with 3353 additions and 1060 deletions
components.json
View file @ 8c71f100
......@@ -26,6 +26,9 @@
"menu-item": [
"./packages/menu-item/index.js"
],
"menu-item-group": [
"./packages/menu-item-group/index.js"
],
"input": [
"./packages/input/index.js"
],
......
examples/app.vue
View file @ 8c71f100
<style lang="css">
@import '../node_modules/purecss/build/grids-core.css';
@import '../node_modules/purecss/build/grids-units.css';
@import '../node_modules/purecss/build/menus.css';
@import '../node_modules/highlight.js/styles/color-brewer.css';
@import 'assets/styles/common.css';
@import 'assets/styles/fonts/style.css';
......@@ -9,255 +6,27 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
overflow: auto;
#app {
height: 100%;
}
.pure-g [class *= "pure-u"] {
body {
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
overflow: auto;
font-weight: 300;
}
.app__sidebar {
width: 230px;
display: block;
}
.app__content {
margin-left: 230px;
display: block;
}
.app__menu {
bottom: 0;
position: fixed;
top: 0;
z-index: 10;
background-color: #f8f8f9;
color: #20293b;
.app__brand {
color: #20293b;
font-size: 24px;
margin: 10px 0 40px;
text-align: center;
.app__eleme {
font-weight: 900;
}
}
.app__menu__label {
color: #20293b;
font-weight: bold;
font-size: 14px;
padding: 10px 0 10px 36px;
position: relative;
&::after {
border-color: transparent transparent transparent rgba(170, 170, 170, .5);
border-style: solid;
border-width: 5px 0 5px 7px;
content: " ";
display: block;
height: 0;
position: absolute;
right: 22px;
top: 14px;
transition-delay: .1s;
transition: transform .3s;
width: 0;
}
&.unfold::after {
transform: rotate(90deg);
}
}
.app__menu__link {
padding: 12px 0 12px 50px;
font-size: 14px;
color: #20293b;
transition: color, background-color .3s;
&:focus {
background-color: transparent;
}
&.active {
border-left: 3px solid #2675c3;
color: #2675c3;
padding-left: 47px;
}
}
}
.app__main {
.app__description {
font-size: 14px;
margin: 0;
color: #666;
padding-bottom: 36px;
margin-bottom: 36px;
border-bottom: 1px solid #e4e4e4;
&:empty {
display: none;
}
}
a {
color: #216fc1;
}
h2 {
color: #333;
font-size: 20px;
font-weight: bold;
margin: 60px 0 16px;
line-height: 1;
&:first-of-type {
margin-top: 36px;
}
}
h3 {
color: #333;
font-size: 16px;
font-weight: normal;
line-height: 1;
margin: 36px 0 16px;
}
p, h2, h3 {
+div, +span {
margin: 10px 0 24px;
}
+span {
margin-right: 8px;
}
}
p {
color: #666;
font-size: 14px;
margin: 0 0 16px;
line-height: 1.5;
}
section > table {
border-collapse: collapse;
border-style: hidden;
box-shadow: 0 0 0 1px #e1e1e1;
border-radius: 5px;
overflow: hidden;
width: 100%;
thead {
background-color: #f8f8f8;
font-size: 14px;
th {
color: #666;
}
}
th, td {
border: 1px solid #e1e1e1;
padding: 10px 16px;
text-align: left;
font-size: 14px;
color: #999;
}
}
.hljs {
border-radius: 5px;
border: 1px solid #e1e1e1;
font-size: 14px;
max-height: 90px;
overflow-y: hidden;
position: relative;
margin-bottom: 40px;
margin-top: 0;
&::before {
background: linear-gradient(0deg, #fff 0, rgba(255, 255, 255, 0) 80%);
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
content: "";
}
&.open {
max-height: 100%;
&::before {
content: none;
}
.hljs__button::before {
margin-bottom: 0;
margin-top: 9px;
transform: rotate(45deg);
}
}
}
.hljs__button {
background-color: #fff;
border-radius: 4px;
border: 1px solid #ccc;
outline: 0;
position: absolute;
right: 10px;
top: 10px;
height: 28px;
width: 28px;
&::before {
margin-bottom: 2px;
margin-top: 0;
transform: rotate(-135deg);
border-left: 1px solid #ccc;
border-top: 1px solid #ccc;
content: "";
display: inline-block;
height: 10px;
width: 10px;
}
}
}
.app__header {
background-color: #2c7dc7;
color: #fff;
padding: 42px;
height: 120px;
.main-cnt {
margin-top: -80px;
padding: 80px 0 120px;
box-sizing: border-box;
.app__headline {
font-size: 36px;
font-weight: normal;
line-height: 1;
margin: 0 0 10px 0;
}
min-height: 100%;
}
.slidedown-transition {
transition: all .3s ease-in-out;
overflow: hidden;
}
.slidedown-enter, .slidedown-leave {
max-height: 0 !important;
.page-cnt {
}
.demo {
margin: 20px 0;
......@@ -266,115 +35,16 @@
<template>
<div id="app">
<div class="pure-g">
<div class="pure-u-1-6 app__sidebar pure-menu pure-menu-scrollable app__menu">
<template v-for="(nav, key) in navs">
<a
href="#"
@click.prevent="navState.$set(key, !navState[key] || false)"
class="pure-menu-heading app__menu__label"
:class="{ 'unfold': !navState[key] }"
v-text="nav.group"></a>
<ul
class="pure-menu-list"
transition="slidedown"
v-show="!navState[key]"
:style="{
maxHeight: nav.list.length * 44 + 'px'
}">
<li
class="pure-menu-item app__menu__item"
v-for="item in nav.list"
v-if="!item.disabled">
<router-link
class="pure-menu-link app__menu__link"
active-class="active"
:to="'/component' + item.path"
exact
v-text="item.name"></router-link>
</li>
</ul>
</template>
</div>
<div class="pure-u-5-6 app__content">
<header class="app__header">
<h1 class="app__headline">{{ $route.meta.title || 'element 后台组件' }}</h1>
</header>
<section class="app__main" ref="main">
<p class="app__description">{{ $route.meta.description }}</p>
<main-header></main-header>
<div class="main-cnt">
<router-view></router-view>
</section>
</div>
</div>
<main-footer></main-footer>
</div>
</template>
<script>
import { navs } from './route.config';
import E from 'oui-dom-events';
import { toggleClass, addClass, removeClass } from './dom/class';
export default {
name: 'app',
data() {
return {
highlights: [],
navState: []
};
},
methods: {
findAllHighlight() {
return Array.prototype.slice.call(document.querySelectorAll('.hljs'));
}
},
created() {
this.navs = navs;
},
mounted() {
this.mainContent = document.querySelector('.app__content');
E.delegate(this.$refs.main, '.hljs__button', 'click.highlight', e => {
const parent = e.target.parentNode;
toggleClass(parent, 'open');
});
},
beforeDestroy() {
E.undelegate(this.$refs.main, '.hljs', 'click.highlight');
},
watch: {
highlights(list) {
list.map(item => {
if (item.offsetHeight <= 100) {
toggleClass(item, 'open');
} else {
item.appendChild(this.$els.button.cloneNode(true));
}
});
}
},
events: {
['element.example.reload']() {
this.$nextTick(() => {
if (this.mainContent.querySelector('.no-toc')) {
addClass(this.mainContent, 'no-toc');
} else {
removeClass(this.mainContent, 'no-toc');
}
this.highlights = this.findAllHighlight();
});
this.mainContent.scrollTop = 0;
return true;
}
}
name: 'app'
};
</script>
examples/assets/images/Axure-Components.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="110px" height="87px" viewBox="0 0 110 87" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #FFFFFF;">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Axure Components_icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Axure-Components_icon">
<g id="sitemap">
<g id="Group">
<path d="M87.2413867,49.517832 L56.8966406,49.517832 L56.8966406,41.9316992 L53.1035742,41.9316992 L53.1035742,49.517832 L22.7586133,49.517832 C21.71125,49.517832 20.8619727,50.3671094 20.8619727,51.4144727 L20.8619727,60.8972461 L24.6550391,60.8972461 L24.6550391,53.3111133 L53.1033594,53.3111133 L53.1033594,60.8972461 L56.8964258,60.8972461 L56.8964258,53.3111133 L85.3447461,53.3111133 L85.3447461,60.8972461 L89.1378125,60.8972461 L89.1378125,51.4142578 C89.1380273,50.3668945 88.28875,49.517832 87.2413867,49.517832 L87.2413867,49.517832 Z" id="Shape" fill="#DEEBFD"></path>
<path d="M104.310293,0 L5.68970703,0 C2.54740234,0 0,2.54014599 0,5.673764 L0,81.3260218 C0,84.4596398 2.54740234,87 5.68970703,87 L104.310293,87 C107.452598,87 110,84.4596398 110,81.3260218 L110,5.673764 C110,2.54014599 107.452598,0 104.310293,0 L104.310293,0 Z M106.206934,81.5516797 C106.206934,82.599043 105.357656,83.4483203 104.310293,83.4483203 L5.68970703,83.4483203 C4.64234375,83.4483203 3.79306641,82.599043 3.79306641,81.5516797 L3.79306641,13.2758398 C3.79306641,12.2284766 4.64234375,11.3791992 5.68970703,11.3791992 L104.310293,11.3791992 C105.357656,11.3791992 106.206934,12.2284766 106.206934,13.2758398 L106.206934,81.5516797 L106.206934,81.5516797 Z" id="Shape" fill="#F2F8FE"></path>
</g>
<circle id="Oval" fill="#DDEAFC" cx="5.68970703" cy="5.89703125" r="1.89664062"></circle>
<circle id="Oval" fill="#DDEAFC" cx="11.3794141" cy="5.89703125" r="1.89664062"></circle>
<circle id="Oval" fill="#DDEAFC" cx="17.0689062" cy="5.89703125" r="1.89664062"></circle>
<path d="M34.2899219,43.828125 C33.1585547,43.828125 32.2413867,42.910957 32.2413867,41.7795898 L32.2413867,19.3249805 C32.2413867,18.1936133 33.1585547,17.2764453 34.2899219,17.2764453 L75.7100781,17.2764453 C76.8414453,17.2764453 77.7586133,18.1936133 77.7586133,19.3249805 L77.7586133,41.7795898 C77.7586133,42.910957 76.8414453,43.828125 75.7100781,43.828125 L34.2899219,43.828125 Z" id="Shape" fill="#20A0FF"></path>
<path d="M66.9534766,77.9661523 L43.0465234,77.9661523 C42.3162695,77.9661523 41.7241602,77.3742578 41.7241602,76.6437891 L41.7241602,60.3227539 C41.7241602,59.5922852 42.3160547,59.0003906 43.0465234,59.0003906 L66.9536914,59.0003906 C67.6841602,59.0003906 68.2760547,59.5922852 68.2760547,60.3227539 L68.2760547,76.6437891 C68.2758398,77.374043 67.6839453,77.9661523 66.9534766,77.9661523 L66.9534766,77.9661523 Z" id="Shape" fill="#FFD6D2"></path>
<g id="Group" transform="translate(35.878906, 21.054688)" fill="#2198F0">
<path d="M36.19,11.3940234 L2.0521875,11.3940234 C1.00482422,11.3940234 0.155546875,10.5447461 0.155546875,9.49738281 L0.155546875,9.49738281 C0.155546875,8.45001953 1.00482422,7.60074219 2.0521875,7.60074219 L36.1902148,7.60074219 C37.2375781,7.60074219 38.0868555,8.45001953 38.0868555,9.49738281 L38.0868555,9.49738281 C38.0866406,10.5449609 37.2373633,11.3940234 36.19,11.3940234 L36.19,11.3940234 Z" id="Shape"></path>
<path d="M32.3969336,3.80789063 L5.84525391,3.80789063 C4.79789062,3.80789063 3.94861328,2.95861328 3.94861328,1.91125 L3.94861328,1.91125 C3.94861328,0.863886719 4.79789062,0.014609375 5.84525391,0.014609375 L32.3969336,0.014609375 C33.4442969,0.014609375 34.2935742,0.863886719 34.2935742,1.91125 L34.2935742,1.91125 C34.2935742,2.95882813 33.4442969,3.80789063 32.3969336,3.80789063 L32.3969336,3.80789063 Z" id="Shape"></path>
<path d="M24.8108008,18.9803711 L13.4313867,18.9803711 C12.3840234,18.9803711 11.5347461,18.1310938 11.5347461,17.0837305 L11.5347461,17.0837305 C11.5347461,16.0363672 12.3840234,15.1870898 13.4313867,15.1870898 L24.8108008,15.1870898 C25.8581641,15.1870898 26.7074414,16.0363672 26.7074414,17.0837305 L26.7074414,17.0837305 C26.7072266,18.1310938 25.8581641,18.9803711 24.8108008,18.9803711 L24.8108008,18.9803711 Z" id="Shape"></path>
</g>
<g id="Group" transform="translate(45.332031, 62.734375)" fill="#FFACAD">
<path d="M13.4610352,11.4384961 L5.87490234,11.4384961 C4.82753906,11.4384961 3.97826172,10.5892188 3.97826172,9.54185547 L3.97826172,9.54185547 C3.97826172,8.49449219 4.82753906,7.64521484 5.87490234,7.64521484 L13.4610352,7.64521484 C14.5083984,7.64521484 15.3576758,8.49449219 15.3576758,9.54185547 L15.3576758,9.54185547 C15.3576758,10.5894336 14.5083984,11.4384961 13.4610352,11.4384961 L13.4610352,11.4384961 Z" id="Shape"></path>
<path d="M17.2541016,3.85236328 L2.08183594,3.85236328 C1.03447266,3.85236328 0.185195313,3.00308594 0.185195313,1.95572266 L0.185195313,1.95572266 C0.185195313,0.908359375 1.03447266,0.0590820312 2.08183594,0.0590820312 L17.2543164,0.0590820312 C18.3016797,0.0590820312 19.150957,0.908359375 19.150957,1.95572266 L19.150957,1.95572266 C19.1507422,3.00308594 18.3014648,3.85236328 17.2541016,3.85236328 L17.2541016,3.85236328 Z" id="Shape"></path>
</g>
<path d="M99.1948633,77.9661523 L75.2879102,77.9661523 C74.5574414,77.9661523 73.9655469,77.3742578 73.9655469,76.6437891 L73.9655469,60.3227539 C73.9655469,59.5922852 74.5574414,59.0003906 75.2879102,59.0003906 L99.1950781,59.0003906 C99.9255469,59.0003906 100.517441,59.5922852 100.517441,60.3227539 L100.517441,76.6437891 C100.517227,77.374043 99.925332,77.9661523 99.1948633,77.9661523 L99.1948633,77.9661523 Z" id="Shape" fill="#F2F8FE"></path>
<g id="Group" transform="translate(77.558594, 62.734375)" fill="#DEEBF8">
<path d="M13.4758594,11.4384961 L5.88972656,11.4384961 C4.84236328,11.4384961 3.99308594,10.5892188 3.99308594,9.54185547 L3.99308594,9.54185547 C3.99308594,8.49449219 4.84236328,7.64521484 5.88972656,7.64521484 L13.4758594,7.64521484 C14.5232227,7.64521484 15.3725,8.49449219 15.3725,9.54185547 L15.3725,9.54185547 C15.3725,10.5894336 14.5232227,11.4384961 13.4758594,11.4384961 L13.4758594,11.4384961 Z" id="Shape"></path>
<path d="M17.2689258,3.85236328 L2.09644531,3.85236328 C1.04908203,3.85236328 0.199804688,3.00308594 0.199804688,1.95572266 L0.199804688,1.95572266 C0.199804688,0.908359375 1.04908203,0.0590820312 2.09644531,0.0590820312 L17.2689258,0.0590820312 C18.3162891,0.0590820312 19.1655664,0.908359375 19.1655664,1.95572266 L19.1655664,1.95572266 C19.1655664,3.00308594 18.3162891,3.85236328 17.2689258,3.85236328 L17.2689258,3.85236328 Z" id="Shape"></path>
</g>
<path d="M34.7120898,77.9661523 L10.8051367,77.9661523 C10.0748828,77.9661523 9.48277344,77.3742578 9.48277344,76.6437891 L9.48277344,60.3227539 C9.48277344,59.5922852 10.074668,59.0003906 10.8051367,59.0003906 L34.7123047,59.0003906 C35.4425586,59.0003906 36.034668,59.5922852 36.034668,60.3227539 L36.034668,76.6437891 C36.0344531,77.374043 35.4425586,77.9661523 34.7120898,77.9661523 L34.7120898,77.9661523 Z" id="Shape" fill="#80A8E1"></path>
<g id="Group" transform="translate(13.105469, 62.734375)" fill="#6496DC">
<path d="M13.4462109,11.4384961 L5.86007813,11.4384961 C4.81271484,11.4384961 3.9634375,10.5892188 3.9634375,9.54185547 L3.9634375,9.54185547 C3.9634375,8.49449219 4.81271484,7.64521484 5.86007813,7.64521484 L13.4462109,7.64521484 C14.4935742,7.64521484 15.3428516,8.49449219 15.3428516,9.54185547 L15.3428516,9.54185547 C15.3428516,10.5894336 14.4935742,11.4384961 13.4462109,11.4384961 L13.4462109,11.4384961 Z" id="Shape"></path>
<path d="M17.2392773,3.85236328 L2.06701172,3.85236328 C1.01964844,3.85236328 0.170371094,3.00308594 0.170371094,1.95572266 L0.170371094,1.95572266 C0.170371094,0.908359375 1.01964844,0.0590820312 2.06701172,0.0590820312 L17.2394922,0.0590820312 C18.2868555,0.0590820312 19.1361328,0.908359375 19.1361328,1.95572266 L19.1361328,1.95572266 C19.135918,3.00308594 18.2866406,3.85236328 17.2392773,3.85236328 L17.2392773,3.85236328 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/Module.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="81px" height="77px" viewBox="0 0 81 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Module_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="6" y="57" width="11" height="11" rx="5.5"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-3" x="6" y="57" width="11" height="11" rx="5.5"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.392156863 0 0 0 0 0.588235294 0 0 0 0 0.862745098 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-5" x="6" y="57" width="11" height="11" rx="5.5"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 1 0 0 0 0 0.674509804 0 0 0 0 0.678431373 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Module_icon">
<g id="Group-5">
<g id="folder-3">
<g id="Group">
<rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
<rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
<rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
<g id="Rectangle-path">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
<g id="folder-3-copy" transform="translate(29.000000, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
<rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
<rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
<g id="Rectangle-path">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#80A8E1" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
</g>
</g>
<g id="folder-3-copy" transform="translate(58.000000, 0.000000)">
<g id="Group">
<rect id="Rectangle-path" fill="#DEEBF8" x="0" y="54" width="23" height="23"></rect>
<rect id="Rectangle-path" fill="#F2F8FE" x="0" y="0" width="23" height="54"></rect>
<rect id="Rectangle" fill="#DEEBF9" x="7" y="6" width="9" height="30" rx="3"></rect>
<g id="Rectangle-path">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#FFD6D2" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/Sketch-Template.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="88px" height="77px" viewBox="0 0 88 77" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Sketch Template_icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Sketch-Template_icon">
<g id="Group-25">
<g id="browser">
<g id="Group" transform="translate(0.042735, 6.772269)" fill="#C9E1FB" opacity="0.23880597">
<path d="M3.20088476,28.5057337 L44.1701391,28.5057337 C45.9105265,28.5057337 47.3217575,27.1026312 47.3217575,25.3722682 L47.3217575,0.305608725 C47.3217575,2.03597172 45.9105265,3.43907426 44.1701391,3.43907426 L3.20088476,3.43907426 C1.46049739,3.43907426 0.0492663503,2.03597172 0.0492663503,0.305608725 L0.0492663503,25.3722682 C0.0492663503,27.1029861 1.46014038,28.5057337 3.20088476,28.5057337 L3.20088476,28.5057337 Z" id="Shape"></path>
<path d="M59.9271601,28.5057337 L78.8361566,28.5057337 C80.576544,28.5057337 81.987775,27.1026312 81.987775,25.3722682 L81.987775,0.305608725 C81.987775,2.03597172 80.576544,3.43907426 78.8361566,3.43907426 L59.9271601,3.43907426 C58.1867728,3.43907426 56.7755417,2.03597172 56.7755417,0.305608725 L56.7755417,25.3722682 C56.7755417,27.1029861 58.1867728,28.5057337 59.9271601,28.5057337 L59.9271601,28.5057337 Z" id="Shape"></path>
</g>
<path d="M3.24361929,10.2116986 L44.2128736,10.2116986 C45.953261,10.2116986 47.364492,8.80859603 47.364492,7.07823304 L47.364492,3.94476751 C47.364492,2.21440451 45.953261,0.811301969 44.2128736,0.811301969 L3.24361929,0.811301969 C1.50323191,0.811301969 0.0920008764,2.21440451 0.0920008764,3.94476751 L0.0920008764,7.07823304 C0.0920008764,8.80859603 1.50287491,10.2116986 3.24361929,10.2116986 L3.24361929,10.2116986 Z" id="Shape" fill="#FFD6D2"></path>
<path d="M59.9698947,10.2116986 L78.8788911,10.2116986 C80.6192785,10.2116986 82.0305096,8.80859603 82.0305096,7.07823304 L82.0305096,3.94476751 C82.0305096,2.21440451 80.6192785,0.811301969 78.8788911,0.811301969 L59.9698947,0.811301969 C58.2295073,0.811301969 56.8182763,2.21440451 56.8182763,3.94476751 L56.8182763,7.07823304 C56.8182763,8.80859603 58.2295073,10.2116986 59.9698947,10.2116986 L59.9698947,10.2116986 Z" id="Shape" fill="#20A0FF"></path>
<g id="Group" transform="translate(6.111778, 44.396572)" fill="#C9E1FB" opacity="0.23880597">
<path d="M3.63949659,28.4815974 C3.63949659,30.2119604 2.13657137,31.6150629 0.283103013,31.6150629 L62.5667088,31.6150629 C64.4201772,31.6150629 65.9231024,30.2119604 65.9231024,28.4815974 L65.9231024,3.41493792 C65.9231024,1.68457492 64.4201772,0.28147238 62.5667088,0.28147238 L0.283103013,0.28147238 C2.13657137,0.28147238 3.63949659,1.68457492 3.63949659,3.41493792 L3.63949659,28.4815974 Z" id="Shape"></path>
</g>
<path d="M3.24361929,76.0112803 L6.3952377,76.0112803 C8.13562508,76.0112803 9.54685611,74.6081778 9.54685611,72.8778148 L9.54685611,47.8111553 C9.54685611,46.265021 8.42013066,44.9801712 6.93862628,44.7241059 C6.76209851,44.6935946 6.58053368,44.6776898 6.3952377,44.6776898 L3.24361929,44.6776898 C1.50323191,44.6776898 0.0920008764,46.0807923 0.0920008764,47.8111553 L0.0920008764,72.8778148 C0.0920008764,74.6081778 1.50287491,76.0112803 3.24361929,76.0112803 L3.24361929,76.0112803 Z" id="Shape" fill="#20A0FF"></path>
</g>
<g id="diamond" transform="translate(53.000000, 45.000000)">
<polygon id="Shape" fill="#AFC8EB" points="24.1753264 8.86069795 17.1851852 28.8357025 34.3703704 8.86069795"></polygon>
<g id="Group">
<polygon id="Shape" fill="#80A8E1" points="7.1111088 0.0481841797 0 8.86069795 10.195044 8.86069795"></polygon>
<polygon id="Shape" fill="#80A8E1" points="24.1753264 8.86069795 34.3703704 8.86069795 27.2592616 0.0481841797"></polygon>
<polygon id="Shape" fill="#AFC8EA" points="24.1753264 8.86069795 17.1851852 0.0481841797 10.195044 8.86069795"></polygon>
</g>
<polygon id="Shape" fill="#6496DC" points="17.1851852 0.0481841797 7.1111088 0.0481841797 10.195044 8.86069795"></polygon>
<polygon id="Shape" fill="#93B8EE" points="27.2592616 0.0481841797 17.1851852 0.0481841797 24.1753264 8.86069795"></polygon>
<polygon id="Shape" fill="#80A8E1" points="10.195044 8.86069795 17.1851852 28.8357025 24.1753264 8.86069795"></polygon>
<polygon id="Shape" fill="#6496DC" points="0 8.86069795 17.1851852 28.8357025 10.195044 8.86069795"></polygon>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/banner-bg.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="568px" height="507px" viewBox="0 0 568 507" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_illustration</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0.172590677,23.6485671 L0.42612487,5.77688935 L16.8540329,0.0294293998 C16.8540329,0.0294293998 15.177854,1.93690856 14.7900681,3.04976293 C12.4344075,9.8099545 8.62369332,23.6485672 8.62369332,23.6485672 L12.4503267,50.5104432 L6.77057777,52.869339 L0.172590677,23.6485671 Z" id="path-1"></path>
<path d="M0.50165759,9.70533955 C0.50165759,6.98052183 2.76494799,3.85642502 4.24369921,2.10604949 C4.96116228,1.25679927 6.79457103,1.34458247 6.79457103,1.34458247 C6.79457103,1.34458247 14.3103209,-0.421861028 18.1620961,0.730924858 C22.8270631,2.12708837 31.0441705,8.37777304 31.0441705,8.37777304 L31.0441705,12.3253024 L32.4964571,25.8307437 C32.555656,26.3812599 32.1792224,26.7158395 31.6448531,26.5752017 L19.8473817,23.4702876 L3.10426007,18.5661795 C3.10426007,18.5661795 0.50165759,13.752189 0.50165759,9.70533955 Z" id="path-3"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0431372549 0 0 0 0 0.325490196 0 0 0 0 0.654901961 0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M2.19875271,28.4418279 L3.86287255,27.3843007 L6.00303843,26.0242524 L12.3564954,21.9867108 C12.8199515,21.6921903 13.2299841,21.0067545 13.2727227,20.4506211 L14.6860304,2.06005034 C14.7706085,0.959484285 15.6971156,0.305616758 16.7589871,0.600581073 L22.4471523,2.18062709 C22.4471523,2.18062709 19.490047,15.5881641 17.4849039,21.8866814 C17.1024344,23.0880871 10.8227555,24.3985444 10.8227555,24.3985444 C10.2887808,24.518499 10.3004206,24.5815937 10.8442251,24.5911455 C10.8442251,24.5911455 11.4579499,24.2941008 15.9345701,25.5864254 C20.4111904,26.8787501 23.0420277,28.6605191 23.0420277,28.6605191 C23.5152035,28.9490808 23.617099,28.8328455 23.2761666,28.3987505 C23.2761666,28.3987505 19.3560675,23.6520346 20.0569902,22.4715851 C20.8897111,21.0691694 21.9010058,19.2755192 22.9498965,17.3732235 C26.1042698,11.652369 29.5986652,4.94891231 29.5986652,4.94891231 C29.5986652,4.94891231 29.7107135,4.94887078 29.9094828,4.95967229 C30.9942045,5.01861815 34.6615557,5.40047936 36.7953331,7.87421481 C39.3201135,10.8012488 38.2266685,14.5788175 38.2266685,14.5788175 C38.2266685,14.5788175 42.5812294,18.9778511 40.2515442,23.8137714 C37.921859,28.6496917 33.2744095,26.6149704 33.2744095,26.6149704 C33.2744095,26.6149704 30.9601231,25.2560818 29.852942,26.6149701 C28.9073415,27.775544 28.470517,27.5861458 28.4060007,29.1830071 C28.2854326,32.1672236 28.3770127,36.7431881 28.3770127,36.7431881 C28.3930228,37.8450485 27.6523336,38.2394478 26.7260907,37.6446122 C26.7260907,37.6446122 18.8318554,32.2240559 11.6465746,30.2807614 C4.4612938,28.3374669 1.23580654,29.7833552 1.23580654,29.7833552 C0.169460637,30.0580646 0.0653116146,29.7976027 0.988314829,29.2110458 L2.19875271,28.4418279 Z" id="path-6"></path>
<path d="M30.7057243,18.9325412 L38.1357241,18.9325412 L38.1357241,27.8766294 C38.1357241,27.8766294 38.5162616,29.2690566 35.2086449,29.8766291 C31.9010282,30.4842017 31.6674262,30.0990066 31.6674262,30.0990066 C31.1362929,29.9761909 30.7057243,29.4340532 30.7057243,28.8666523 L30.7057243,18.9325412 Z" id="path-8"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-9">
<feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.996078431 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<linearGradient x1="64.8554444%" y1="50%" x2="64.8554466%" y2="100%" id="linearGradient-10">
<stop stop-color="#1D5A90" offset="0%"></stop>
<stop stop-color="#0D4372" offset="100%"></stop>
</linearGradient>
<polygon id="path-11" points="61 21 335.540789 102.890039 335.540802 506.637756 61 424.528974"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-12">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.870588235 0 0 0 0 0.898039216 0 0 0 0 0.956862745 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-13"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-14">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.596078431 0 0 0 0 0.741176471 0 0 0 0 0.952941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-15"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-16">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M54.5141339,50.0541547 L67.0333492,47.095196 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.1967468,18.0347958 C55.0508728,18.571516 55.929142,21.0423924 55.929142,22.7188969 L55.929142,46.8712959 C55.929142,48.5209333 55.5199636,50.6291097 53.471927,50.0308699" id="path-17"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-18">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0194380412 0 0 0 0 0.303028282 0 0 0 0 0.561410502 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M54.5141339,50.0541547 L67.0333492,47.095196 L67.0860961,47.0808669 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.471927,17.9157796 C55.4017377,18.4781967 56.3020736,21.0789279 56.3020736,22.7554324 L56.3020736,46.8426457 C56.3020736,48.492283 55.5199636,50.6291097 53.471927,50.0308699" id="path-19"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-20">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M6.98591477,5.788899 C3.14429572,8.41812349 1.01086715,13.3604908 1.00181953,17.8179602 L1.00181953,25.9085725 C1.08686715,27.0723276 1.3872481,28.0924092 1.94096239,29.0999194 C2.02239096,29.2489806 1.99886715,29.4303684 1.88667667,29.5596745 C1.43791477,30.0679194 1.15743858,30.6192663 0.99639096,31.2999194 L1.00181953,46.0336337 C1.08686715,47.1973888 1.3872481,48.2174704 1.94096239,49.2267766 C1.43791477,50.1929806 1.15743858,50.7443276 0.99639096,51.4249806 L1.00181953,66.1586949 C1.08686715,67.32245 1.3872481,68.3443276 1.94096239,69.3518378 C1.43791477,70.3180419 1.15743858,70.8693888 0.99639096,71.5500419 L1.00181953,86.2837561 C1.08686715,87.4475112 1.3872481,88.4693888 1.94096239,89.476899 C1.43791477,90.4431031 1.15743858,90.99445 0.99639096,91.676899 L1.00181953,106.408817 C1.08686715,107.572572 1.3872481,108.59445 1.94096239,109.60196 C2.02239096,109.751021 1.99886715,109.932409 1.88667667,110.061715 C1.43791477,110.56996 1.15743858,111.121307 0.99639096,111.80196 L1.00181953,126.535675 C1.08686715,127.69943 1.3872481,128.719511 1.94096239,129.728817 C1.43791477,130.695021 1.15743858,131.246368 0.99639096,131.927021 L1.00181953,146.660736 C1.08686715,147.824491 1.3872481,148.846368 1.94096239,149.853879 C1.43791477,150.820083 1.15743858,151.37143 0.99639096,152.052083 L1.00181953,170.442287 C1.00181953,172.554287 2.42772429,174.529797 4.52315286,174.894368 C4.93210525,174.966205 5.33201001,174.973389 5.74458144,174.915919 C7.91058144,174.619593 9.41791477,172.599185 9.41791477,170.427919 L9.41791477,17.8179602 C9.42877191,16.0992663 10.4041052,12.9186949 12.4452481,12.3386133 C12.4452481,12.3368174 28.9408672,8.40734798 28.9408672,8.40734798 C29.6284862,8.24391941 29.8094386,9.17959288 29.8962957,9.75787859 C29.9198195,9.91591941 29.8962952,10.3005438 29.8962952,10.3005438 L38.420963,12.8788443 L38.4209624,10.9072663 C38.4535338,4.556899 33.8464862,-1.3875908 26.9757243,0.286205122 L10.4819148,4.21567451" id="path-21"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-23">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M0.00542857143,23.7750868 L0.00542857143,17.8179602 C0.0144761905,13.3604908 2.14790476,8.41812349 5.98952381,5.788899 L9.48552381,4.21567451 L25.9793333,0.286205122 C32.8500952,-1.3875908 37.4571429,4.556899 37.4245714,10.9072663 L37.424572,13.2903538 L28.8999043,10.7727194 C28.8999043,10.7727194 28.9234286,9.91591941 28.8999048,9.75787859 C28.8130476,9.17959288 28.6320952,8.24391941 27.9444762,8.40734798 C27.9444762,8.40734798 11.4488571,12.3368174 11.4488571,12.3386133 C9.40771429,12.9186949 8.43238095,16.0992663 8.42152381,17.8179602 L8.42152381,170.427919 C8.42152381,172.599185 6.91419048,174.619593 4.74819048,174.915919 C4.33561905,174.973389 3.93571429,174.966205 3.5267619,174.894368 C1.43133333,174.529797 0.00542857143,172.554287 0.00542857143,170.442287 L0.000803798701,154.775087 L0,154.775087 L0,23.7750868 L0.00542857143,23.7750868 Z" id="path-24"></path>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-26"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-28">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-29"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-31">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-32"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-34">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-35"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-37">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-38"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-40">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-41"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-43">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-44"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-46">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.494117647 0 0 0 0 0.670588235 0 0 0 0 0.929411765 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-47" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-48">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-49" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-50">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-51" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-52">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-53" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-54">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-55"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-56">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-57"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-58">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-59" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-60">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-61" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-62">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.4 0 0 0 0 0.607843137 0 0 0 0 0.91372549 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-63" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-64">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.399626285 0 0 0 0 0.609381731 0 0 0 0 0.91236182 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-65" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-66">
<feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.596078431 0 0 0 0 0.741176471 0 0 0 0 0.952941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polygon id="path-67" points="74 426.153107 74 22.0126982 86.2405882 19.0151402 86.2405882 423.355225"></polygon>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-68">
<feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0258801644 0 0 0 0 0.257757552 0 0 0 0 0.46917517 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-69"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-70">
<feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0431372549 0 0 0 0 0.309803922 0 0 0 0 0.552941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-71"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-72">
<feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.0431372549 0 0 0 0 0.309803922 0 0 0 0 0.552941176 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M0.502950308,30.6485671 C-0.480505421,23.1596051 0.502950301,0 0.502950301,0 L16.2911244,8.0660162 C16.2911244,8.0660162 13.5620575,9.19587032 13.4729521,9.76633142 C13.184641,11.6121269 12.4980011,16.0662639 11.8537478,20.6838739 C11.3498755,24.2953196 10.8719305,28.0067592 10.6307512,30.6485671 C9.9858933,37.7121522 14.3060851,59.0973612 14.3060851,59.0973612 C14.3060851,59.0973612 14.9984979,60.9080209 11.2756091,61.5152334 C7.55272035,62.1224458 6.54182177,59.9181579 6.54182177,59.9181579 C6.54182177,59.9181579 1.48640604,38.137529 0.502950308,30.6485671 Z" id="path-73"></path>
<path d="M16.0400649,4.52725302 C9.49659066,2.50714082 2.45854027,1.08555158 2.1308986,0.873127833 C1.29884527,0.333672988 1.45520269,1.46410902 1.24327259,2.65039743 C1.05123062,3.72536106 0.436776451,4.83437071 0.730498906,5.0068793 C1.02138597,5.17772262 8.71912312,7.27225564 15.414447,9.17594001 C22.9404305,11.3158062 27.6226195,12.8946482 28.9166224,13.1268049 C30.2106254,13.3589615 30.7998202,12.0568691 30.7998202,12.0568691 L30.7998202,8.07228044 C30.7998202,8.07228044 30.7387912,9.03862894 29.8405669,9.17594007 C29.4520991,9.23532496 28.844309,9.00429748 28.1212226,8.69753354 C26.9997129,8.22174154 21.8025217,6.3062482 16.0400649,4.52725302 Z" id="path-75"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-77">
<feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.208583872 0 0 0 0 0.318645032 0 0 0 0 0.451477466 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<path d="M6.99999981,19.2232717 C6.99999981,19.2232717 5.06975199,19.0511389 3.35874473,18.6378029 C2.11803891,18.3380799 0.700774671,18.6378029 0.728358772,16.3886121 C0.735315134,15.8213947 1.28019993,9.67917315 2.83395758,5.56866066 C4.06722125,2.3060246 6.44561296,1.2310278 6.44561296,1.2310278 C7.36973909,0.624436813 8.99503694,0.299150142 10.0867942,0.506565091 L17.0861493,1.83632126 L20.6771876,2.84615544 L24.5986652,3.94891231 L36.852942,7.3949317 L36.8529415,42.8282355 C36.8529415,43.9324216 35.9930002,44.5609098 34.9449571,44.2380744 C34.9449571,44.2380744 26.8215033,41.6983288 19.6362225,39.7550343 C12.4509417,37.8117398 8.40552583,37.201245 8.40552583,37.201245 C7.31979847,37.0100499 6.46820112,35.9564527 6.50337708,34.8496321 L6.99999981,19.2232717 Z" id="path-78"></path>
<path d="M36.9899902,15 L44.4199901,15 L44.4199901,23.9440883 C44.4199901,23.9440883 44.8005276,25.3365154 41.4929109,25.944088 C38.1852942,26.5516605 37.9516921,26.1664655 37.9516921,26.1664655 C37.4205588,26.0436498 36.9899902,25.5015121 36.9899902,24.9341111 L36.9899902,15 Z" id="path-80"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-81">
<feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.996078431 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_illustration">
<g id="轮子" transform="translate(14.000000, 380.000000)">
<path d="M50.6255266,60.8301496 C62.7757911,60.8301496 72.6255266,57.3668702 72.6255266,53.0946984 C72.6255266,48.8225267 62.7757911,45.3592472 50.6255266,45.3592472 C38.4752621,45.3592472 28.6255266,48.8225267 28.6255266,53.0946984 C28.6255266,57.3668702 38.4752621,60.8301496 50.6255266,60.8301496 Z" id="Oval" fill="#E2ECFA" opacity="0.550839552" transform="translate(50.625527, 53.094698) rotate(-10.000000) translate(-50.625527, -53.094698) "></path>
<path d="M10.998595,8.9991166 L22.9120756,6.29683803 C25.0715612,5.82569928 27.4583747,5.67767867 29.5758172,6.29683802 C39.7578873,9.14533206 44.9668086,20.7147518 46.4753121,29.916955 C47.3138222,35.032051 47.1205701,38.9292082 45.4426689,43.9366369 C43.9176517,48.489173 40.5736382,53.2647085 35.2620696,54.7021088 L22.4954669,58.1961107" id="Stroke-3" fill="#CCE7FF" transform="translate(28.979037, 32.041110) rotate(-150.000000) translate(-28.979037, -32.041110) "></path>
<path d="M21.4710018,39.0199931 C20.9910513,45.1728716 21.6331472,50.2815336 25.2803384,55.5804462 C28.7610603,60.6393836 34.2372519,63.0672411 40.3317581,61.6036084 C51.8030067,58.8492981 58.3839492,45.3739319 59.1925144,35.0052722 C59.6724648,28.8523937 59.0303689,23.7415698 55.3831778,18.4448191 C51.9024559,13.3858817 46.4262643,10.9580242 40.3317581,12.4216569 C28.8605094,15.1759672 22.279567,28.6513334 21.4710018,39.0199931 Z" id="Page-1-Copy" fill="#80A8E1"></path>
<path d="M43,16.9550856 C33.3400012,19.2745048 27.7981549,30.6221816 27.1172579,39.3536845 C26.713089,44.5350559 27.2538014,48.837087 30.3251203,53.2993292 C33.2562545,57.559487 37.8677843,59.6039986 43,58.3714658 C52.6599988,56.0520466 58.2018451,44.7043698 58.8827421,35.9728669 C59.286911,30.7914955 58.7461986,26.4876438 55.6748797,22.0272222 C52.7437455,17.7670644 48.1322157,15.7225528 43,16.9550856 L43,16.9550856 Z" id="Page-1" fill="#9BBBE8"></path>
<path d="M48.1057253,16.8410994 L46.8257889,16.4738938 C44.6950385,15.8780845 42.7500553,15.845684 40.6007281,16.3676921 C31.7860718,18.4197239 26.2836457,27.8212696 24.806796,35.4875884 C23.3299464,43.1539072 24.9721289,54.5138832 34.3756674,57.212125 L37.2662059,58.0419379 L37.5578605,58.1265392 C37.3877757,58.0825026 37.219039,58.0346482 37.0517099,57.9830279 C34.4831595,57.1906417 32.2462824,55.5108923 30.5562926,53.1314618 C27.4242567,48.7213935 26.8725279,44.4661275 27.2849312,39.3432481 C27.9778431,30.7103144 33.634456,19.4907405 43.4912666,17.197505 C45.3693736,16.7600982 47.1806043,16.7402979 48.867371,17.0895033" id="Page-1" fill="#C0DBF8"></path>
</g>
<g id="lady" transform="translate(0.000000, 318.000000)">
<g id="鞋子" transform="translate(0.000000, 122.000000)">
<path d="M22.5665213,1.52463221 L28.4753678,2.56652127 L27.2451873,9.54322165 C27.2451873,9.54322165 26.2284251,10.9035575 24.0274738,10.5154704 C21.8265224,10.1273833 21.3363408,8.50133258 21.3363408,8.50133258 L22.5665213,1.52463221 Z" id="Combined-Shape" fill="#FFCFC7"></path>
<path d="M3.56652127,0.524632208 L9.47536779,1.56652127 L8.24518728,8.54322165 C8.24518728,8.54322165 7.22842512,9.90355751 5.02747376,9.5154704 C2.82652239,9.12738329 2.29245931,7.75019664 2.29245931,7.75019664 L3.56652127,0.524632208 Z" id="Combined-Shape" fill="#FFBFBA"></path>
<path d="M23.1902933,17.4944426 C22.8936345,17.9555283 23.0418011,18.5447066 23.5473145,18.7725944 C23.5473145,18.7725944 26.5428133,20.8326334 28.7814677,17.319668 C29.8973272,15.5686269 35.1843376,13.6808502 36.6471005,12.8126659 C38.1189549,11.9390857 38.6198239,10.7291535 38.921474,9.67606089 C39.522911,7.57638057 37.2657576,7.62931993 37.2657576,7.62931993 L33.0163855,8.51218889 C33.0163855,8.51218889 33.5978086,11.1422851 32.0651911,11.865543 C30.5325736,12.5888008 28.4769108,12.4323038 28.4769108,12.4323038 L26.399411,13.4531312 C25.9076031,13.6947923 25.2654328,14.2691311 24.9717658,14.7255668 L23.1902933,17.4944426 Z" id="Path-3" fill="#EFF5FD" transform="translate(31.030938, 13.500993) rotate(7.000000) translate(-31.030938, -13.500993) "></path>
<path d="M4.19029329,15.4944426 C3.89363446,15.9555283 4.04180112,16.5447066 4.54731452,16.7725944 C4.54731452,16.7725944 7.54281334,18.8326334 9.78146771,15.319668 C10.8973272,13.5686269 16.1843376,11.6808502 17.6471005,10.8126659 C19.1189549,9.93908573 19.6198239,8.72915347 19.921474,7.67606089 C20.522911,5.57638057 18.2657576,5.62931993 18.2657576,5.62931993 L14.0163855,6.51218889 C14.0163855,6.51218889 14.5978086,9.14228512 13.0651911,9.86554297 C11.5325736,10.5888008 9.47691082,10.4323038 9.47691082,10.4323038 L7.39941096,11.4531312 C6.90760311,11.6947923 6.26543281,12.2691311 5.97176575,12.7255668 L4.19029329,15.4944426 Z" id="Path-3-Copy" fill="#EFF5FD" transform="translate(12.030938, 11.500993) rotate(7.000000) translate(-12.030938, -11.500993) "></path>
<path d="M1.1086333,14.1724794 C1.1086333,14.7243742 1.49150785,15.3865823 1.99143197,15.6177232 C1.99143197,15.6177232 5.09755,17.7503653 7.33620438,14.2373998 C8.45206387,12.4863587 10.8833052,11.9567362 12.3460681,11.088552 C13.8179225,10.2149718 14.3187914,9.00503952 14.6204416,7.95194694 C15.2218786,5.85226663 12.9647252,5.90520598 12.9647252,5.90520598 L8.66936645,6.93947384 C8.66936645,6.93947384 9.29677619,9.41817118 7.76415869,10.141429 C6.97610138,10.5133213 5.80520989,11.2353857 4.04659154,11.0885519 C2.28797318,10.941718 1.89416703,10.335851 1.89416703,10.335851 C1.46032873,9.9976692 1.1086333,10.1693722 1.1086333,10.7228126 L1.1086333,14.1724794 Z" id="Path-3" fill="#3E0F3F" transform="translate(7.915491, 11.082045) rotate(9.000000) translate(-7.915491, -11.082045) "></path>
<path d="M20.218804,16.2536191 C20.218804,16.8070611 20.6074601,17.4711091 21.1129735,17.6989969 C21.1129735,17.6989969 24.1084723,19.7590359 26.3471267,16.2460704 C27.4629862,14.4950293 29.8942275,13.9654068 31.3569904,13.0972226 C32.8288448,12.2236424 33.3297138,11.0137101 33.6313639,9.96061756 C34.2328009,7.86093724 31.9756475,7.9138766 31.9756475,7.9138766 L27.7262754,8.79674556 C27.7262754,8.79674556 28.3076985,11.4268418 26.775081,12.1500996 C25.2424635,12.8733575 23.1868007,12.7168604 23.1868007,12.7168604 L21.1578967,11.937941 C20.6392501,11.7388266 20.218804,12.0229793 20.218804,12.579508 L20.218804,16.2536191 Z" id="Path-3" fill="#613F62" transform="translate(26.976037, 13.016990) rotate(9.000000) translate(-26.976037, -13.016990) "></path>
</g>
<g id="下半身" transform="translate(2.000000, 52.000000)">
<polygon id="Rectangle-16" fill="#FFBFBA" transform="translate(9.171588, 43.673843) scale(-1, 1) translate(-9.171588, -43.673843) " points="4.91415179 42.0699344 1.32755844 15.336998 14.6157168 18.0169454 12.3098542 42.0699351 14.6770872 57.4907494 17.0156182 72.0106888 10.908393 71.6553877"></polygon>
<g id="Path-10" transform="translate(16.000000, 21.000000)">
<g id="Oval-3">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#FFCFC7" transform="translate(8.513312, 26.449384) scale(-1, 1) translate(-8.513312, -26.449384) " xlink:href="#path-1"></use>
<circle fill="#FFBFBA" mask="url(#mask-2)" transform="translate(17.067321, 24.067321) rotate(4.000000) translate(-17.067321, -24.067321) " cx="17.0673205" cy="24.0673205" r="2"></circle>
</g>
</g>
<g id="Rectangle-14">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
<use fill="#095DBF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<path d="M27.8203145,12.2265229 C27.4718612,8.86521816 31.3954126,8 31.3954126,8 L35,8 L35,29 L30.3264726,29 C30.3264726,29 28.1687678,15.5878277 27.8203145,12.2265229 Z" fill="#0B53A7" mask="url(#mask-4)"></path>
</g>
<path d="M14.5206212,18.6286037 C10.0060034,15.9131904 10.355923,10.6424186 10.355923,10.6424186 C10.355923,10.6424186 8.08724277,16.5302784 12.9309762,19.6571971 C14.3818233,20.5938053 16.7489087,21.734256 20.5422216,20.9799039 C21.8363554,20.7225478 18.2337334,20.8619342 14.5206212,18.6286037 Z" id="Path-11" fill="#0A52A7" transform="translate(15.318103, 15.933838) rotate(27.000000) translate(-15.318103, -15.933838) "></path>
</g>
<g id="上半身" transform="translate(5.000000, 25.000000)">
<path d="M28.6940497,37.2134314 C27.8012851,36.5593758 26.8072481,35.1783277 26.4691422,34.1140947 L21.7737477,19.3347221 C21.7737477,19.3347221 19.5151125,17.526373 23.264109,17.526373 C27.0131056,17.526373 27.6481859,16.2145894 27.6481859,16.2145894 L31.7944171,32.7133975 L43.3922272,44.2009182 C43.3922272,44.2009182 42.1197446,44.386172 41.4292954,44.594951 C40.902138,44.7543536 39.7394074,45.3054631 39.7394074,45.3054631 L28.6940497,37.2134314 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(32.245739, 30.760026) rotate(10.000000) translate(-32.245739, -30.760026) "></path>
<path d="M13.2871095,21.7578122 C15.5668959,18.5509753 18.1942608,10.9301248 18.1942608,10.9301248 L29.8281309,9.34344457 L27.1421856,28.0117575 C27.0636587,28.5575487 26.6134616,29.2125942 26.1184633,29.4848409 L24.8925522,30.159086 L8.88530077,25.6469678 C8.35461119,25.4973772 8.32190919,25.1652874 8.79641286,24.9063039 C8.79641286,24.9063039 12.3374689,23.0936139 13.2871095,21.7578122 Z" id="Rectangle-2" fill="#FFCFC7"></path>
<g id="Path-4">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<use id="Mask" fill="#FFFFFF" xlink:href="#path-6"></use>
<path d="M30.3221331,24.6612154 C29.7330509,23.7698271 29.3694036,22.4870451 29.3694036,22.4870451 L29.6520908,25.2753153 L30.3221331,27.1764032 L32.1810322,26.7415488 C32.1810322,26.7415488 30.9112154,25.5526036 30.3221331,24.6612154 Z" fill="#EFF5FD" mask="url(#mask-7)"></path>
</g>
<path d="M36.5653995,36.1204839 C35.687644,35.4474586 34.7057742,34.0510326 34.3676683,32.9867995 L29.6722738,18.2074269 C29.6722738,18.2074269 27.4136386,16.3990778 31.1626351,16.3990778 C34.9116317,16.3990778 35.546712,15.0872942 35.546712,15.0872942 L39.6929432,31.5861024 L51.2907533,43.073623 L48.5984304,45.3468977 L36.5653995,36.1204839 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(40.144266, 30.217096) rotate(10.000000) translate(-40.144266, -30.217096) "></path>
<path d="M54.9584948,47.5716106 L53.8492328,48.6876421 C53.5604399,48.9778812 53.2125017,48.9784671 53.0093922,48.7372037 C52.8747397,48.5774047 52.9279322,48.0844166 52.965611,47.7716312 L53.5219297,43.1685118 C53.5716138,42.7573062 53.2805595,42.3599765 52.8718132,42.3100299 C52.4631998,42.2600163 52.0916168,42.5762666 52.041916,42.9874052 L51.4282478,46.6028913 C51.396156,46.6928086 51.3273831,46.7083583 51.3196511,46.5873416 L51.1257341,42.0584408 C51.1257341,41.6441721 50.7771003,41.1380261 50.3653609,41.1380261 C49.9536215,41.1380261 49.6199001,41.4737762 49.6199001,41.8880449 L49.6052177,46.6224415 C49.6090587,46.6771082 49.5625506,46.6927416 49.5541036,46.6303586 L48.7664344,43.2012683 C48.6932385,42.7936111 48.4299763,42.2328671 48.0248548,42.3064981 C47.6196834,42.3801124 47.3505946,42.7937283 47.4237239,43.2012683 L48.0142795,47.5259155 C48.0148614,47.6029443 47.9892712,47.6468819 47.9528894,47.5482107 L47.0718782,45.1772212 C46.9340497,44.7868713 46.5078275,44.5594168 46.1198659,44.6980253 C45.7319709,44.8367007 45.5291774,45.2889482 45.6669559,45.6792312 L47.211386,50.7584667 C47.2194505,50.7865198 47.227964,50.8143051 47.2367269,50.8419565 C47.6686026,52.180036 48.9057496,53.1380261 50.3653609,53.1380261 C51.2998307,53.1380261 52.2704163,52.8064605 53.0092592,52.2361255 C53.8073305,51.7524939 56.363999,48.9856645 56.363999,48.9856645 C56.7520935,48.5951974 56.6941454,47.9972612 56.3059345,47.6067272 C55.9178399,47.216327 55.3465727,47.1811435 54.9584948,47.5716106 Z" id="iconfont-shou" fill="#FFCFC7" transform="translate(51.125734, 47.138026) scale(1, -1) rotate(44.000000) translate(-51.125734, -47.138026) "></path>
<path d="M22.7543392,13.0730385 C21.4492879,15.9068643 20.7248905,19.4136168 19.9677507,20.9096016 C18.2408987,24.3215796 17.3529984,24.8604759 17.3529984,24.8604759" id="Path-12" stroke="#FFBFBA" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.053669, 18.966757) rotate(7.000000) translate(-20.053669, -18.966757) "></path>
</g>
<g id="Rectangle-1456" transform="translate(34.427382, 24.575974) scale(-1, 1) rotate(-20.000000) translate(-34.427382, -24.575974) ">
<use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
<use fill="#FFBFBA" fill-rule="evenodd" xlink:href="#path-8"></use>
</g>
<g id="头" transform="translate(29.718434, 26.425748) rotate(26.000000) translate(-29.718434, -26.425748) translate(16.718434, 3.425748)">
<path d="M10,8.83136671 C10,4.50622231 13.5121654,1 17.8249998,1 L17.8249998,1 C22.1466279,1 25.6499996,4.50396035 25.6499996,8.83113908 L25.6499996,10.2335106 L25.6499996,12.6313763 C25.6499996,16.9554964 22.1378342,20.4608884 17.8249998,20.4608884 L17.8249998,20.4608884 C13.5033717,20.4608884 10,16.9591955 10,12.6295217 L10,8.83136671 Z" id="Mask" fill="#FFCFC7"></path>
<path d="M8.12616287,6.19131478 L23.3177958,7.57739004 L16.367781,42.5447082 C15.9369056,44.7125533 13.8929387,45.8788479 11.8080253,45.1516434 L3.67107574,42.3135275 C1.58366754,41.5854529 0.305490956,39.2454486 0.812141041,37.1040879 L8.12616287,6.19131478 Z" id="Rectangle-648" fill="url(#linearGradient-10)"></path>
<path d="M11.6812421,18.7463612 C16.6800594,18.7937594 23.7179263,10.3822989 24.7383933,6.77450066 C25.7588603,3.1667024 21.6815672,0.0320439684 16.297012,0.0320439684 C10.9124568,0.0320439684 7.85562995,4.59606619 7.85562995,7.99223472 C7.85562995,8.53856826 9.29379502,18.7237237 11.6812421,18.7463612 Z" id="Oval-24" fill="#1D5A90"></path>
<path d="M20,16 C21.1045695,16 20.3236227,15.9542812 20.3236227,14.5357995 C20.3236227,13.1173178 21.1045695,11 20,11 C18.8954305,11 18,12.1192881 18,13.5 C18,14.8807119 18.8954305,16 20,16 Z" id="Oval-2" fill="#FFBFBA"></path>
</g>
</g>
<g id="白色背景墙" transform="translate(118.000000, 0.000000)">
<g id="Rectangle-291">
<use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
<use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-11"></use>
</g>
<path d="M217.324845,66.6102349 C210.394808,69.0648935 212.014476,72.5604878 212.005429,77.0179572 L220.421524,77.0179572 C220.432381,75.2992633 219.347234,71.4116926 223.232513,70.4599518 C219.347234,71.4116926 236.356324,66.0319491 236.443181,66.6102349 C236.466705,66.7682757 226.036481,63.9019464 226.036481,63.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<path d="M256.324845,78.6102349 C250.384193,79.4679693 251.014476,84.5604878 251.005429,89.0179572 L259.421524,89.0179572 C259.432381,87.2992633 259.063665,83.5528001 261.920947,82.1573828 C258.035667,83.1091237 275.356324,78.0319491 275.443181,78.6102349 C275.466705,78.7682757 265.036481,75.9019464 265.036481,75.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<g id="Group-22" transform="translate(95.000000, 73.000000)">
<polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 90 26.89678 90 49 3 24"></polygon>
<polygon id="Rectangle-3-Copy" fill="#D6E8FB" opacity="0.639458955" points="3.37286438 24 89.907135 48.9508495 89.907135 50.6262341 0 24.8664486"></polygon>
<polygon id="Rectangle-4" fill="#CCE7FF" points="0 0 3.4625074 1.0179419 3.4625074 24.0179419 0 24.9070677"></polygon>
</g>
<g id="Group-21" transform="translate(95.000000, 133.000000)">
<polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 71 21 71 44 3 24"></polygon>
<polygon id="Rectangle-3-Copy" fill="#C0DBF8" opacity="0.639458955" points="3.37286438 24 71 43.9434662 71 45.7272129 0 24.8664486"></polygon>
<polygon id="Rectangle-4" fill="#CCE7FF" points="0 0 3.4625074 1.0179419 3.4625074 24.0179419 0 24.9070677"></polygon>
</g>
<polygon id="Rectangle-1553" fill="#E2E9F5" points="11.9000244 0 347.343201 100 335.267925 103 0 2.84565806"></polygon>
<polygon id="Combined-Shape" fill="#C3D2EB" points="335 102.866152 347.339966 100 347.341035 503.283905 335 506.174164"></polygon>
<polygon id="shadow" fill="#E2ECFA" opacity="0.550839552" points="347 432.887124 449.782707 462.038067 347 502.380069"></polygon>
</g>
<g id="shadow" transform="translate(211.000000, 226.000000)" fill-opacity="0.200000018">
<polygon id="Rectangle-6" fill="#BCC4D1" points="28 7.10542736e-15 95 20.0580158 95 44.2405205 28 24.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BBC4D0" points="28 40 95 60.0580158 95 84.2405205 28 64.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="144 32 211 52.0580158 211 76.2405205 144 56.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="114 33 134 38.0580158 134 53.2405205 114 48.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="114 73 134 78.0580158 134 93.2405205 114 88.3199844"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="0 2 18 6.05801582 18 21.2405205 0 15.9945803"></polygon>
<polygon id="Rectangle-6" fill="#BCC4D1" points="0 42 18 48.0580158 18 61.5267487 0 56.4029055"></polygon>
<polygon id="Rectangle-6" fill="#BBC4D0" points="145 72 212 92.0580158 212 116.24052 145 96.3199844"></polygon>
<path d="M55.2,120.028239 C57.107455,120.593277 58,123.206131 58,124.89045 L58,149.089935 C58,150.747262 57.2262211,152.892249 55.2,152.29302 L4.8,137.368085 C2.8907455,136.803046 2,134.190192 2,132.505874 L2,108.306388 C2,106.649061 2.77377892,104.502275 4.8,105.103303 L55.2,120.028239" id="Page-1" fill="#BBC4D0"></path>
<path d="M121.2,140.028239 C123.107455,140.593277 124,143.206131 124,144.89045 L124,169.089935 C124,170.747262 123.226221,172.892249 121.2,172.29302 L70.8,157.368085 C68.8907455,156.803046 68,154.190192 68,152.505874 L68,128.306388 C68,126.649061 68.7737789,124.502275 70.8,125.103303 L121.2,140.028239" id="Page-1" fill="#BBC4D0"></path>
</g>
<g id="checkbox1-1" transform="translate(200.000000, 207.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-13"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="checkbox3-1" transform="translate(200.000000, 248.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-15"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#D9EDFE"></path>
</g>
<g id="confirmbutton" transform="translate(200.000000, 320.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
<use fill="#0B66B8" fill-rule="evenodd" xlink:href="#path-17"></use>
</g>
<path d="M56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 Z" id="Page-1" fill="#157AD6"></path>
</g>
<g id="cancelbutton" transform="translate(266.000000, 340.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-19"></use>
</g>
<path d="M53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="梯子" transform="translate(315.000000, 53.000000)">
<path d="M54.0848059,44.7867802 C54.0577014,44.6570069 54.0296142,44.5190045 54,44.3713422 L54,42.331311 L23.7883587,33.2354055 C23.6638166,33.2036099 23.5422496,33.1864407 23.4215236,33.1827845 L23.4215238,24 L15.0054286,24 L15.0054286,28.1820398 L15,28.1820398 L15,164.18204 L15.0017558,164.18204 L15.0054286,176.624327 C15.0054286,178.736327 16.4313333,180.711837 18.5267619,181.076408 C18.9357143,181.148245 19.335619,181.155429 19.7481905,181.097959 C21.9141905,180.801633 23.4215238,178.781224 23.4215238,176.609959 L23.4215238,162.752326 L54,171.92102 L54,170.430952 L54.0054286,188.624327 C54.0054286,190.736327 55.4313333,192.711837 57.5267619,193.076408 C57.9357143,193.148245 58.335619,193.155429 58.7481905,193.097959 C60.9141905,192.801633 62.4215238,190.781224 62.4215238,188.609959 L62.4215238,36 L54.0054286,36 L54.0054286,44.0906122 C54.022798,44.3282887 54.0491493,44.5599724 54.0848059,44.7867802 Z M54.5064352,46.3500296 C54.5640446,46.5006767 54.6278024,46.6488138 54.7009815,46.8030432 C54.6307598,46.6529087 54.565952,46.5020457 54.5064352,46.3500296 Z M54.9922085,47.4954176 C54.9639742,47.59234 54.9255935,47.6751334 54.8791834,47.7543362 C54.8828727,47.7501259 54.8865734,47.7459186 54.8902857,47.7417143 C54.9519257,47.6706706 54.9868003,47.5839053 54.9922085,47.4954176 Z M54.0829305,49.176864 C54.0552095,49.2546599 54.0275328,49.3374152 54,49.4256254 L54,50.9156935 L23.4215238,41.7469995 L23.4215238,53.1827873 C23.5422496,53.1864407 23.6638166,53.2036099 23.7883587,53.2354055 L54,62.331311 L54,64.3713422 C54.0124132,64.4332368 54.0245581,64.4934341 54.0364747,64.5520395 C54.0240563,64.4412008 54.0137193,64.3291198 54.0054286,64.2156735 L54,49.4819592 C54.0247611,49.3773085 54.0523454,49.2757146 54.0829305,49.176864 Z M54.4527177,68.3795845 C54.3086063,68.6174614 54.1521077,68.9382999 54,69.4256254 L54,70.9156935 L23.4215238,61.7469995 L23.4215238,73.1827873 C23.5422496,73.1864407 23.6638166,73.2036099 23.7883587,73.2354055 L54,82.331311 L54,84.3713422 C54.0043085,84.3928252 54.0085847,84.4141038 54.0128302,84.4351822 C54.0102039,84.4038025 54.0077369,84.3723209 54.0054286,84.3407347 L54,69.6070204 C54.0984366,69.190987 54.2414915,68.8232622 54.4527177,68.3795845 Z M54.6837009,88.0385738 C54.4882145,88.3061196 54.2387006,88.660872 54,89.4256254 L54,90.9156935 L23.4215238,81.7469995 L23.4215238,93.1827873 C23.5422496,93.1864407 23.6638166,93.2036099 23.7883587,93.2354055 L54,102.331311 L54,104.371342 C54.0018069,104.380352 54.0036081,104.389325 54.0054037,104.398263 L54,89.7320816 C54.1307623,89.1794268 54.340259,88.7120182 54.6837009,88.0385738 Z M54.9366579,107.644507 C54.7519518,108.047312 54.3634419,108.261223 54,109.425625 L54,110.915693 L23.4215238,101.747 L23.4215238,113.182787 C23.5422496,113.186441 23.6638166,113.20361 23.7883587,113.235406 L54,122.331311 L54,124.371342 C54.0017914,124.380274 54.0035772,124.389171 54.0053575,124.398033 L54,109.858939 C54.1610476,109.17649 54.4415238,108.625143 54.9445714,107.658939 C54.9419278,107.654129 54.93929,107.649318 54.9366579,107.644507 Z M54.9042222,127.709721 C54.7091069,128.073845 54.3433659,128.325543 54,129.425625 L54,130.915693 L23.4215238,121.747 L23.4215238,133.182787 C23.5422496,133.186441 23.6638166,133.20361 23.7883587,133.235406 L54,142.331311 L54,144.371342 C54.0017757,144.380196 54.0035459,144.389015 54.0053107,144.3978 L54,129.984 C54.1610476,129.303347 54.4415238,128.752 54.8902857,128.243755 C55.0024762,128.114449 55.026,127.933061 54.9445714,127.784 C54.930969,127.75925 54.9175194,127.734491 54.9042222,127.709721 Z M54.8693965,147.770793 C54.6676741,148.105139 54.3238831,148.387963 54,149.425625 L54,150.915693 L23.4215238,141.747 L23.4215238,154.188114 C23.5422496,154.191768 23.6638166,154.208937 23.7883587,154.240732 L54,163.336638 L54,165.376669 C54.2776696,166.761183 54.421089,167.296461 54.8790159,168.161935 C54.9004369,168.120712 54.9222858,168.078722 54.9445714,168.035918 C54.3908571,167.028408 54.0904762,166.006531 54.0054286,164.842776 L54,150.109061 C54.1610476,149.428408 54.4415238,148.877061 54.9445714,147.910857 C54.9189729,147.864196 54.8939159,147.817513 54.8693965,147.770793 Z" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
<g id="Stroke-1" transform="translate(38.000000, 12.000000)">
<mask id="mask-22" fill="white">
<use xlink:href="#path-21"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-21"></use>
<use fill="#DEEFFF" fill-rule="evenodd" xlink:href="#path-21"></use>
</g>
<path d="M6.66528399,174.019592 C6.91349293,173.22654 7,171.373639 7,171.373639 L7,16.9987958 C7,13.1334676 10.0413722,9.25563755 13.7926382,8.3375317 L27.3522011,5.01888842 C30.569845,4.23138424 33.1782608,6.28199491 33.1782608,9.58720263 L33.1782608,176.999999 L5.23906441,177 C5.23906441,177 6.3265144,175.101994 6.66528399,174.019592 Z" id="Rectangle-18" fill="#C7DAF5" mask="url(#mask-22)"></path>
</g>
<g id="Rectangle-18">
<mask id="mask-25" fill="white">
<use xlink:href="#path-24"></use>
</mask>
<use id="Mask" stroke="#89B3EF" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" fill="#D9EDFE" xlink:href="#path-24"></use>
<path d="M5.42621958,174.169083 C5.67442852,173.376031 5.76093559,171.523129 5.76093559,171.523129 L5.76093559,17.1482867 C5.76093559,13.2829584 8.80230779,9.40512837 12.5535738,8.48702253 L26.1131367,5.16837924 C29.3307806,4.38087506 31.9391964,6.43148573 31.9391964,9.73669345 L31.9391964,177.14949 L4,177.14949 C4,177.14949 5.08744999,175.251485 5.42621958,174.169083 Z" fill="#AFCAF1" opacity="0.550314832" mask="url(#mask-25)"></path>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 27.000000)">
<mask id="mask-27" fill="white">
<use xlink:href="#path-26"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-26"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-26"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-27)" points="-1 3.74733444 39.3323936 15.4525213 39.3323936 19.3000011 -1 7.38941574"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 47.000000)">
<mask id="mask-30" fill="white">
<use xlink:href="#path-29"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-31)" xlink:href="#path-29"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-29"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-30)" points="0 4 40.3323936 15.7051868 40.3323936 19.5526667 0 7.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 67.000000)">
<mask id="mask-33" fill="white">
<use xlink:href="#path-32"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-34)" xlink:href="#path-32"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-32"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-33)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 87.000000)">
<mask id="mask-36" fill="white">
<use xlink:href="#path-35"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-37)" xlink:href="#path-35"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-35"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-36)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 107.000000)">
<mask id="mask-39" fill="white">
<use xlink:href="#path-38"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-40)" xlink:href="#path-38"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-38"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-39)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 127.000000)">
<mask id="mask-42" fill="white">
<use xlink:href="#path-41"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-43)" xlink:href="#path-41"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-41"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-42)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
<g id="Rectangle-19" transform="translate(2.000000, 148.000000)">
<mask id="mask-45" fill="white">
<use xlink:href="#path-44"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-46)" xlink:href="#path-44"></use>
<use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-44"></use>
</g>
<polygon fill="#C7DAF5" mask="url(#mask-45)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
</g>
</g>
<g id="checkbox1" transform="translate(226.000000, 215.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-48)" xlink:href="#path-47"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-47"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-50)" xlink:href="#path-49"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-49"></use>
</g>
</g>
<g id="checkbox3" transform="translate(226.000000, 255.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-52)" xlink:href="#path-51"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-51"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-54)" xlink:href="#path-53"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-53"></use>
</g>
</g>
<g id="checkbox2-1" transform="translate(315.000000, 241.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-56)" xlink:href="#path-55"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-55"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="checked·" transform="translate(197.000000, 218.000000)">
<polygon id="Rectangle-1652" fill="#60ACF3" transform="translate(5.036130, 5.821554) rotate(54.000000) translate(-5.036130, -5.821554) " points="3.07150394 5.54011888 8.20628364 5.13832831 8.20628364 6.22543373 4.88010346 6.38887731 1.86597545 6.50478"></polygon>
<path d="M4.24655456,10.2765387 L0.490921008,5.4976418 L2.64581298,3.64312744 L6.56137826,8.6085276 L18.3494265,0.114318847 L20.5877398,3.51043594 L6.79989774,13.7333834 L4.24440697,10.2780862 L4.24655456,10.2765387 Z" id="Combined-Shape" fill="#076CC8"></path>
<polygon id="Rectangle-1654" fill="#0B4F8D" points="20.5585902 3.48939907 21.7298006 3.48939907 8.38340048 13.2209998 6.85243598 13.6752435"></polygon>
<path d="M18.3115339,2.45578123 L21.6731061,0.125966083 L21.7389422,1.33108044 C21.7389422,1.33108044 19.5200657,2.79478353 18.3115339,3.52434255 L18.3115339,2.45578123 Z" id="Rectangle-1652" fill="#60ACF3" transform="translate(20.025238, 1.825154) rotate(90.000000) translate(-20.025238, -1.825154) "></path>
</g>
<g id="checkbox4-1" transform="translate(315.000000, 280.000000)">
<g id="Page-1">
<use fill="black" fill-opacity="1" filter="url(#filter-58)" xlink:href="#path-57"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-57"></use>
</g>
<path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
</g>
<g id="checkbox2" transform="translate(342.000000, 247.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-60)" xlink:href="#path-59"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-59"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-62)" xlink:href="#path-61"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-61"></use>
</g>
</g>
<g id="checkbox4" transform="translate(343.000000, 287.000000)">
<g id="Rectangle-3">
<use fill="black" fill-opacity="1" filter="url(#filter-64)" xlink:href="#path-63"></use>
<use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-63"></use>
</g>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
<g id="Rectangle-6">
<use fill="black" fill-opacity="1" filter="url(#filter-66)" xlink:href="#path-65"></use>
<use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-65"></use>
</g>
</g>
<g id="title" transform="translate(185.000000, 71.000000)">
<polygon id="Rectangle-6" fill-opacity="0.200000018" fill="#BCC4D1" points="12 11 107.310913 39.2488499 107.310913 71.595787 12 43.3839226"></polygon>
<polygon id="Rectangle-3" fill="#AFCAF1" points="95 31.1094727 107.374659 28 107.374659 60.4360677 95 63.4540845"></polygon>
<polygon id="Rectangle-6" fill="#DAEDFE" points="0 3 95.3109131 31.2488499 95.3109131 63.595787 0 35.3839226"></polygon>
<polygon id="Rectangle-6" fill="#C9E1FB" points="12.370682 0 107 27.9739961 94.6952441 31 0 3.02147635"></polygon>
</g>
<g id="sidebar" transform="translate(93.000000, 2.000000)">
<g id="Path-22">
<use fill="black" fill-opacity="1" filter="url(#filter-68)" xlink:href="#path-67"></use>
<use fill="#0B4F8D" fill-rule="evenodd" xlink:href="#path-67"></use>
</g>
<path d="M12,3.81983503 L74.0416107,22.0342636 L74.0416107,426.169933 L12,407.258429 L12,3.81983503 Z M12,52 L18,54 L18,262 L12,261.898651 L12,52 Z" id="Combined-Shape" fill="#076CC8"></path>
<polygon id="Rectangle-8" fill="#0660B3" points="15.1800817 53.0544141 18 54 18 263 15.1800817 262.147026"></polygon>
<polygon id="Rectangle-3" fill="#0B4F8D" points="15.375 261 17.9528975 261.998988 17.9528975 263.729858 12 261.875"></polygon>
<polygon id="Rectangle-3" fill="#C0DCF9" points="0.016992598 211.191724 9.40315488 209 15.1196044 210.629393 5.82774904 212.878718"></polygon>
<polygon id="Rectangle-7" fill="#DAEDFE" points="0 211.185312 6 212.854036 6 261.264052 0 259.560964"></polygon>
<polyline id="Rectangle-7" fill="#AFCAF1" points="15.1651854 210.60354 5.87419034 212.834552 5.7527486 261.297634 15.1651854 258.978624 15.1651854 210.60354"></polyline>
<path d="M15,212.736487 C16.264979,212.752321 17.1587333,213.134102 18.0419314,214.040172 L18.0419314,213.797381 L18.0419314,226.281791 L18.0419314,225.46017 C17.2467012,226.682924 16.2948881,227.550288 15,228.222363" id="Page-1" fill="#CCE7FF"></path>
<path d="M15,240.736487 C16.264979,240.752321 17.1587333,241.134102 18.0419314,242.040172 L18.0419314,241.797381 L18.0419314,254.281791 L18.0419314,253.46017 C17.2467012,254.682924 16.2948881,255.550288 15,256.222363" id="Page-1" fill="#CCE7FF"></path>
<polygon id="Rectangle-3" fill="#60ACF3" points="25.0292358 0.841064453 86.2996979 19.0151405 74.0416107 22.1046448 12 3.79017687"></polygon>
<g id="icon3" transform="translate(33.000000, 225.000000)">
<path d="M9.18493393,0.0443408139 C6.15016629,0.492401472 3.73393728,3.38098505 2.44598203,6.76562457 C0.474055685,11.9476834 0.968307898,16.8168137 1.34888466,21.5209195 C1.96400292,29.148681 7.51800337,39.667213 16.1503104,42.2235678 C21.0122524,43.6632691 22.8779302,40.5685516 25.2439966,36.4190848 C27.6720173,32.1619354 27.6505094,28.3533338 27.2714078,23.649228 C26.6548144,16.0199915 22.3451313,3.27788498 13.7128242,0.721530203 C12.279888,0.297214142 10.4531232,-0.142897818 9.18493393,0.0443408139 Z" id="Page-1-Copy-3" fill="#03437E" opacity="0.270000011"></path>
<path d="M10.8090772,0.0196748547 C-1.39550678,5.4102888 2.02272427,29.7952213 12.5781463,38.0567878 C14.9287853,39.8965967 17.6382768,42.197747 20.6031094,42.050499 C18.7107461,42.8983063 18.5096436,42.7489281 14.5053225,41.5383186 C12.6629209,40.9813132 10.9920776,40.0197943 9.49551677,38.775724 C3.80358874,34.044103 0.632722716,25.2252658 0.132785637,19.0291617 C-0.25713421,14.2052451 0.11132216,10.0216555 2.60108559,5.65741503 C4.01379078,3.1792618 5.91131063,1.1172399 8.31459427,0.283046871 C9.17926978,-0.0170867751 10.1934691,0.0141976558 11.1560701,0" id="Page-1" fill="#0B4F8D"></path>
</g>
<g id="icon1" transform="translate(17.000000, 61.000000)">
<g id="Group-5">
<g id="Stroke-3">
<use fill="black" fill-opacity="1" filter="url(#filter-70)" xlink:href="#path-69"></use>
<use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-69"></use>
</g>
<path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
</g>
</g>
</g>
<g id="icon2" transform="translate(110.000000, 144.000000)">
<g id="Group-5">
<g id="Stroke-3">
<use fill="black" fill-opacity="1" filter="url(#filter-72)" xlink:href="#path-71"></use>
<use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-71"></use>
</g>
<path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
</g>
</g>
<g id="man" transform="translate(281.000000, 104.000000)">
<g id="鞋子" transform="translate(21.000000, 124.000000)">
<path d="M22.7742091,2.98024586 L28.7742091,2.98024586 L28.7742091,10.0645731 C28.7742091,10.0645731 28.0091137,11.5808013 25.7742091,11.5808013 C23.5393046,11.5808013 22.7742091,10.0645731 22.7742091,10.0645731 L22.7742091,2.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(25.774209, 7.280524) rotate(10.000000) translate(-25.774209, -7.280524) "></path>
<path d="M3.77420915,0.98024586 L9.77420915,0.98024586 L9.77420915,8.06457308 C9.77420915,8.06457308 9.00911373,9.58080128 6.77420915,9.58080128 C4.53930456,9.58080128 3.77420915,8.06457308 3.77420915,8.06457308 L3.77420915,0.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(6.774209, 5.280524) rotate(10.000000) translate(-6.774209, -5.280524) "></path>
<path d="M23.7700189,18.4959565 C23.7261817,19.0499152 24.0706124,19.7164204 24.5812584,19.9419643 C24.5812584,19.9419643 27.0658469,21.8058508 29.3045013,18.2928854 C30.4203608,16.5418443 32.8516021,16.0122218 34.314365,15.1440376 C35.7862194,14.2704574 36.2870883,13.0605251 36.5887384,12.0074325 C37.1901754,9.90775222 34.9330221,9.96069158 34.9330221,9.96069158 L30.1129777,11.0236574 C30.1129777,11.0236574 30.1948285,11.5007361 30.3320226,12.3101532 C30.3842407,12.6182289 29.8680036,13.2673156 29.0084362,13.8393364 C27.6370402,14.7519664 25.59562,14.1544363 25.59562,14.1544363 C25.59562,14.1544363 25.0759987,14.6130603 24.7061251,14.2128342 C24.3362515,13.812608 24.102315,14.2968164 24.102315,14.2968164 L23.7700189,18.4959565 Z" id="Path-3" fill="#C7DAF5" transform="translate(30.228455, 15.198282) rotate(19.000000) translate(-30.228455, -15.198282) "></path>
<path d="M1.70635126,14.4875264 C1.69860524,15.0405926 2.07229351,15.7063744 2.58293949,15.9319182 C2.58293949,15.9319182 5.06752802,17.7958048 7.30618239,14.2828394 C8.42204189,12.5317983 10.8532832,12.0021758 12.3160461,11.1339915 C13.7879005,10.2604113 14.2887695,9.05047906 14.5904196,7.99738648 C15.1918566,5.89770617 12.9347032,5.95064553 12.9347032,5.95064553 L8.10114981,7.16653886 C8.10114981,7.16653886 8.39708186,9.17988268 6.83873774,9.93129268 C5.28039361,10.6827027 3.530486,10.1119463 3.530486,10.1119463 C3.530486,10.1119463 2.69022362,9.56452146 2.45515389,9.34125176 C2.22008417,9.11798206 2.45515389,9.34125176 2.45515389,9.34125176 C2.08140847,9.34125177 1.77223568,9.78337845 1.76440251,10.3426667 L1.70635126,14.4875264 Z" id="Path-3" fill="#3E0F3F" transform="translate(8.199279, 11.188236) rotate(19.000000) translate(-8.199279, -11.188236) "></path>
<path d="M20.6927047,16.4798039 C20.6927047,17.0358848 21.0726724,17.7041105 21.5833183,17.9296544 C21.5833183,17.9296544 24.0679069,19.7935409 26.3065612,16.2805755 C27.4224207,14.5295344 29.853662,13.9999119 31.316425,13.1317277 C32.7882793,12.2581475 33.2891483,11.0482152 33.5907984,9.99512261 C34.1922354,7.8954423 31.9350821,7.94838166 31.9350821,7.94838166 L27.1150377,9.01134748 C27.1150377,9.01134748 27.1968885,9.48842615 27.3340826,10.2978433 C27.3863007,10.605919 26.8700635,11.2550057 26.0104961,11.8270264 C24.6391001,12.7396564 22.59768,12.1421264 22.59768,12.1421264 C22.59768,12.1421264 21.7524905,11.6552318 21.3826169,11.2550057 C21.0127434,10.8547795 20.6927047,11.5511954 20.6927047,11.5511954 L20.6927047,16.4798039 Z" id="Path-3" fill="#613F62" transform="translate(27.192705, 13.185972) rotate(19.000000) translate(-27.192705, -13.185972) "></path>
</g>
<g id="下半身" transform="translate(24.000000, 61.000000)">
<path d="M3.97348091,35.8497366 C2.34956432,26.400557 0,7.00925805 0,7.00925805 L13.0321022,11.6503649 C13.0321022,11.6503649 13.7391421,26.8058403 14.1860792,35.2425241 C14.734544,45.595712 17.1722848,65.7984672 17.1722848,65.7984672 C17.1722848,65.7984672 16.4231357,68.2344309 13.444825,68.2344309 C11.2466274,68.2344309 9.91577321,66.9074514 9.36940221,66.2122961 C9.17550188,65.965594 9.08040349,65.7984672 9.08040349,65.7984672 C9.08040349,65.7984672 5.71789227,46.0000461 3.97348091,35.8497366 Z" id="Rectangle-16" fill="#004183" transform="translate(8.586142, 37.621844) scale(-1, 1) translate(-8.586142, -37.621844) "></path>
<path d="M1,5.10374928 C1,1.05689979 2.75070465,0 2.75070465,0 L32.6036467,8.3949317 L31.8340797,20.4593716 L4,11.7047234 C4,11.7047234 1,9.15059876 1,5.10374928 Z" id="Rectangle-14-Copy" fill="#095DBF"></path>
<path d="M14.9038787,6 C14.9038787,6 13.8032567,8.02548415 14.0310389,10.2576733 C14.1250765,11.1792104 14.4455233,12.1359777 15.1632932,13" id="Path-2" stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
<g id="Path-10" transform="translate(17.000000, 7.000000)">
<mask id="mask-74" fill="white">
<use xlink:href="#path-73"></use>
</mask>
<use id="Mask" fill="#095DBF" transform="translate(8.178492, 30.810524) scale(-1, 1) translate(-8.178492, -30.810524) " xlink:href="#path-73"></use>
<polygon id="Rectangle-5" fill="#0A57B2" mask="url(#mask-74)" points="13.5496529 28.1789711 13.5496529 -1 16.4824928 -0.0527771115 16.4824931 28.7343892 10.4490563 60.4088554 7.75643292 62.2039375"></polygon>
<polyline stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-74)" points="13.4135465 0.875698903 13.597349 28.1937288 7.48305925 61.9805001"></polyline>
</g>
</g>
<g id="上半身" transform="translate(0.000000, 21.000000)">
<path d="M12.0410227,37.9552057 L22.59781,27.4988081 L26.7440413,11 C26.7440413,11 27.3791216,12.3117836 31.1281182,12.3117836 C34.8771147,12.3117836 34.2606313,12.3117836 34.2606313,12.3117836 L28.6320548,29.3399718 C28.2844569,30.3915632 27.2684431,31.7562232 26.3617752,32.3908971 L14.0131704,41.035008 C14.02288,41.7415503 13.8050846,42.4449476 13.3784498,43.0297345 C13.3779697,43.0304122 13.3776123,43.0311446 13.377078,43.0318616 L13.3705205,43.0406338 C13.3533007,43.0639762 13.3358261,43.0871956 13.3178708,43.1102091 L10.1164762,47.345179 C9.88171485,47.6860467 9.39663987,47.7878077 9.05645015,47.5555054 C8.7162755,47.32311 8.64976284,46.8445946 8.88454903,46.5036471 L10.2848744,44.3972614 C10.3433165,44.3098304 10.2927286,44.3149533 10.230753,44.3607006 L7.0791598,47.3804338 C6.79243741,47.6791427 6.29964865,47.7045626 6.00193968,47.4200415 C5.70424649,47.1355705 5.71437052,46.6489148 6.0011486,46.3500832 L8.60114638,43.6413518 C8.6466503,43.5978502 8.60666579,43.5694134 8.56469718,43.6046532 L4.72585979,46.3755833 C4.39070937,46.6190844 3.92292529,46.5464471 3.68091095,46.2133429 C3.43889662,45.8802388 3.51436766,45.4129035 3.84951808,45.1694025 L7.52858211,42.2382786 C7.62194192,42.1608915 7.56893825,42.1143929 7.4773306,42.1412822 L4.19163573,43.7699435 C3.82980422,43.971396 3.35554137,43.8566662 3.15582627,43.4966939 C2.95597881,43.1366533 3.10634789,42.6676409 3.46822379,42.4661355 L7.51922159,40.2105611 C7.79441733,40.0571932 8.2245189,39.8104558 8.27465218,39.6075921 C8.35045361,39.3014621 8.1454667,39.0203185 7.74091008,38.9572784 L6.18601378,38.7158534 C5.6420128,38.6314026 5.33469446,38.1485574 5.42241854,37.6051108 C5.51018254,37.0614914 5.95986202,36.6631523 6.50387277,36.7476166 C6.50387277,36.7476166 10.2450569,37.1897033 11.1053243,37.5510707 L11.1054176,37.5510851 C11.4283192,37.6457185 11.7438189,37.7829579 12.0410227,37.9552057 Z" id="Combined-Shape" fill="#F0F3F6"></path>
<path d="M9.0410227,32.9552057 L19.59781,22.4988081 L23.7440413,6 C23.7440413,6 24.3791216,7.31178355 28.1281182,7.31178355 C31.8771147,7.31178355 31.2606313,7.31178355 31.2606313,7.31178355 L25.6320548,24.3399718 C25.2844569,25.3915632 24.2684431,26.7562232 23.3617752,27.3908971 L11.0131704,36.035008 C11.02288,36.7415503 10.8050846,37.4449476 10.3784498,38.0297345 C10.3779697,38.0304122 10.3776123,38.0311446 10.377078,38.0318616 L10.3705205,38.0406338 C10.3533007,38.0639762 10.3358261,38.0871956 10.3178708,38.1102091 L7.11647619,42.345179 C6.88171485,42.6860467 6.39663987,42.7878077 6.05645015,42.5555054 C5.7162755,42.32311 5.64976284,41.8445946 5.88454903,41.5036471 L7.28487442,39.3972614 C7.34331648,39.3098304 7.29272862,39.3149533 7.23075303,39.3607006 L4.0791598,42.3804338 C3.79243741,42.6791427 3.29964865,42.7045626 3.00193968,42.4200415 C2.70424649,42.1355705 2.71437052,41.6489148 3.0011486,41.3500832 L5.60114638,38.6413518 C5.6466503,38.5978502 5.60666579,38.5694134 5.56469718,38.6046532 L1.72585979,41.3755833 C1.39070937,41.6190844 0.922925291,41.5464471 0.680910954,41.2133429 C0.438896616,40.8802388 0.51436766,40.4129035 0.849518076,40.1694025 L4.52858211,37.2382786 C4.62194192,37.1608915 4.56893825,37.1143929 4.4773306,37.1412822 L1.19163573,38.7699435 C0.829804215,38.971396 0.35554137,38.8566662 0.155826269,38.4966939 C-0.0440211873,38.1366533 0.106347885,37.6676409 0.468223791,37.4661355 L4.51922159,35.2105611 C4.79441733,35.0571932 5.2245189,34.8104558 5.27465218,34.6075921 C5.35045361,34.3014621 5.1454667,34.0203185 4.74091008,33.9572784 L3.18601378,33.7158534 C2.6420128,33.6314026 2.33469446,33.1485574 2.42241854,32.6051108 C2.51018254,32.0614914 2.95986202,31.6631523 3.50387277,31.7476166 C3.50387277,31.7476166 7.24505686,32.1897033 8.10532429,32.5510707 L8.10541755,32.5510851 C8.42831921,32.6457185 8.74381894,32.7829579 9.0410227,32.9552057 Z" id="Combined-Shape" fill="#FFADAE"></path>
<path d="M79.4187854,11.1021761 L70.8109823,17.3392678 L55.6891321,8.07840842 C55.6891321,8.07840842 55.6398194,8.35807478 54.988813,12.0501156 C54.3378066,15.7421565 53,15.7749743 53,15.7749743 L69.7515272,24.0468342 C70.749787,24.5397723 72.2097055,24.3308544 73.0275442,23.5877077 L82.2493049,15.2081571 C82.2822299,15.2211727 82.3013513,15.2275772 82.3040585,15.2271986 L85.023687,14.2190485 C85.9534804,13.6023712 85.9548168,12.5081181 86.0063196,12.4893921 C86.0063196,12.4893921 86.4107684,10.4982602 85.4152023,9.19157971 C84.4196362,7.88489923 83.7525736,8.03309232 83.7525736,8.03309232 C83.7111586,8.05784814 82.4416163,8.74158976 82.2716101,8.69245976 C81.968593,8.60504069 82.1239261,8.41965901 82.2716101,8.03778267 L82.6614408,7.60665972 C82.8603047,7.09331563 82.8483335,6.52143335 82.333833,6.32568137 C81.8191628,6.12987753 80.7103216,7.10907907 79.9877071,7.97895643 C79.456529,8.61838422 79.5793333,9.95405986 79.5296549,10.346326 C79.4699828,10.5917504 79.433186,10.8455661 79.4187854,11.1021761 Z" id="Combined-Shape" fill="#FFACAD"></path>
<g id="Rectangle-15" transform="translate(26.000000, 35.000000)">
<mask id="mask-76" fill="white">
<use xlink:href="#path-75"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-77)" xlink:href="#path-75"></use>
<use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-75"></use>
</g>
<rect fill="#EAF1F1" mask="url(#mask-76)" x="28" y="7" width="4" height="8"></rect>
</g>
<g id="Rectangle-25" transform="translate(20.000000, 0.000000)">
<mask id="mask-79" fill="white">
<use xlink:href="#path-78"></use>
</mask>
<use id="Mask" fill="#7C8DA2" xlink:href="#path-78"></use>
<g id="Group-14" mask="url(#mask-79)" fill="#587397" opacity="0.392140858">
<g transform="translate(18.762683, 18.934256) rotate(9.000000) translate(-18.762683, -18.934256) translate(10.762683, 14.934256)">
<polygon id="Fill-1" points="12.43302 7.17390524 15.8898921 3.70061315 12.43302 0.227272727 11.3958333 1.26944564 13.8157753 3.70080649 11.3958333 6.13186122"></polygon>
<polygon id="Fill-2" points="3.45687208 0.227272727 3.69482223e-13 3.7005487 3.45687208 7.17382468 4.49405879 6.13171621 2.07411684 3.70035536 4.49405879 1.26936508"></polygon>
<polygon id="Fill-3" points="10.2916667 0.205618247 6.98740672 7.84705418 5.79166667 7.64150038 9.09595216 -3.49942297e-13"></polygon>
</g>
</g>
<path d="M34,15.0118886 C34,15.0118886 34.9849597,17.2821649 35.4304006,17.6551811 C35.9097756,18.0566141 36.7744477,18.416808 36.7744477,18.416808 L38,46 L34,46 L34,15.0118886 Z" fill="#6B819D" mask="url(#mask-79)"></path>
</g>
<path d="M54.3086113,6.80317972 C54.3086113,6.80317972 56.1500559,6.14752551 57.8128552,7.37989855 C59.4756544,8.6122716 65.0966039,12.5232687 65.0966039,12.5232687 C65.5498581,12.8391496 65.7408275,13.5048742 65.5216636,14.0136474 L62.5495905,20.9131017 C62.3310903,21.4203343 61.7718058,21.5928762 61.3029496,21.300081 L57.0695788,18.6563909 L54.3086113,15.089455 L54.3086113,6.80317972 Z" id="Path-9" fill="#7C8DA2"></path>
</g>
<g id="Rectangle-1456" transform="translate(40.711648, 20.643433) scale(-1, 1) translate(-40.711648, -20.643433) ">
<use fill="black" fill-opacity="1" filter="url(#filter-81)" xlink:href="#path-80"></use>
<use fill="#FF9EA2" fill-rule="evenodd" xlink:href="#path-80"></use>
</g>
<g id="头" transform="translate(38.988985, 11.083815) scale(-1, 1) translate(-38.988985, -11.083815) translate(28.988985, 0.583815)">
<path d="M1,8.83136671 C1,4.50622231 4.51216539,1 8.82499981,1 L8.82499981,1 C13.1466279,1 16.6499996,4.50396035 16.6499996,8.83113908 L16.6499996,10.2335106 L16.6499996,12.6313763 C16.6499996,16.9554964 13.1378342,20.4608884 8.82499981,20.4608884 L8.82499981,20.4608884 C4.50337175,20.4608884 1,16.9591955 1,12.6295217 L1,8.83136671 Z" id="Mask" fill="#FFACAD"></path>
<g id="眼镜" transform="translate(15.039748, 10.695366) rotate(-23.000000) translate(-15.039748, -10.695366) translate(11.039748, 8.195366)" stroke="#98B1CA" stroke-width="0.5">
<path d="M6.58972497,-7.54951657e-13 C6.58972497,-7.54951657e-13 7.71474038,0.581779033 7.71474041,2.39983903 C7.71474045,4.21789903 6.41996411,5.17627659 4.9640618,4.30360794" id="Path-5"></path>
<path d="M0.60663877,1.9140498 L7.61773793,2.50485608" id="Path-6" stroke-linecap="round" stroke-linejoin="bevel"></path>
</g>
<path d="M1,6.19138193 C1.30101,6.19138181 3.20160069,3.44330858 3.20160069,3.44330858 L2.23836866,3.20250057 L3.5026107,2.84128856 C3.5026107,2.84128856 7.11919843,-0.530023559 11.2084669,0.0719964876 C15.2977354,0.674016534 16.5619769,3.68411658 16.5619769,3.68411658 L16.7425829,2.48007655 C16.7425829,2.48007655 17.4650072,4.34633848 17.1037949,5.30957063 C16.9321934,5.76717453 16.3872486,6.56759978 14.8996878,7.02071905 C13.2560112,7.52139203 10.4834557,7.58324242 10.4834557,7.58324242 L10.4834561,5.0617077 C10.4834561,5.0617077 9.3498295,6.00075683 7.30296135,6.42217064 C5.25609319,6.84358445 2.23836868,6.6269598 2.23836868,6.6269598" id="Path-7" fill="#375576" transform="translate(9.102467, 3.791621) scale(-1, 1) translate(-9.102467, -3.791621) "></path>
<path d="M7.81226324,4.37166433 C8.92609023,4.60040207 11.3212223,6.31943394 11.3212223,6.31943394 L10.878032,11.1401147 L10.878032,17.2920207 L6.31204298,18.5299749 L5.8991225,17.4749221 L5.8991225,18.5299749 L4.32666901,18.981302 C4.32666901,18.981302 2.38678349,18.2311575 1.27866581,15.3333825 C0.42531037,13.1018217 0.218495667,8.95274544 0.826813149,6.85742976 C2.22505629,2.04125913 1.83665543,4.37166432 1.83665543,4.37166432 C1.83665543,4.37166432 5.76456794,3.95114553 7.81226324,4.37166433 Z" id="Path-8" fill="#375576"></path>
<path d="M11,16 C12.1045695,16 11.3236227,15.9542812 11.3236227,14.5357995 C11.3236227,13.1173178 12.1045695,11 11,11 C9.8954305,11 9,12.1192881 9,13.5 C9,14.8807119 9.8954305,16 11,16 Z" id="Oval-2" fill="#FF9EA2"></path>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/fankui.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Feedback_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M26.3157895,54.7 L20,61 L20,25.3 C20,21.835 22.8421053,19 26.3157895,19 L53.6842105,19 C57.1578947,19 60,21.835 60,25.3 L60,48.4 C60,51.865 57.1578947,54.7 53.6842105,54.7 L26.3157895,54.7 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Feedback_icon">
<g id="Group-18">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="Shape">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<g id="Group" transform="translate(38.000000, 28.000000)" fill="#FFFFFF">
<rect id="Rectangle-path" x="0" y="7" width="4" height="11"></rect>
<circle id="Oval" cx="2" cy="2" r="2"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/kekong.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Controllability_icon</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Controllability_icon">
<g id="Group-24">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="controls" transform="translate(16.000000, 17.000000)">
<g id="Group" transform="translate(5.000000, 0.000000)" fill="#AFCAF1">
<path d="M0,1 L0,33 C0,33.553 0.448,34 1,34 C1.552,34 2,33.553 2,33 L2,1 C2,0.447 1.552,0 1,0 C0.448,0 0,0.447 0,1 Z" id="Shape"></path>
<path d="M37,12 C36.448,12 36,12.447 36,13 L36,45 C36,45.553 36.448,46 37,46 C37.552,46 38,45.553 38,45 L38,13 C38,12.447 37.552,12 37,12 L37,12 Z" id="Shape"></path>
<path d="M19,0 C18.448,0 18,0.447 18,1 L18,16 C18,16.553 18.448,17 19,17 C19.552,17 20,16.553 20,16 L20,1 C20,0.447 19.552,0 19,0 L19,0 Z" id="Shape"></path>
<path d="M19,27 C18.448,27 18,27.447 18,28 L18,45 C18,45.553 18.448,46 19,46 C19.552,46 20,45.553 20,45 L20,28 C20,27.447 19.552,27 19,27 L19,27 Z" id="Shape"></path>
</g>
<circle id="Oval" fill="#AFB6BB" cx="6" cy="41" r="6"></circle>
<circle id="Oval" fill="#AFB6BB" cx="42" cy="9" r="6"></circle>
<circle id="Oval" fill="#0077CE" cx="24" cy="24" r="6"></circle>
<circle id="Oval" fill="#E7ECED" cx="6" cy="39" r="6"></circle>
<circle id="Oval" fill="#E7ECED" cx="42" cy="7" r="6"></circle>
<circle id="Oval" fill="#20A0FF" cx="24" cy="22" r="6"></circle>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/xiaolv.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Efficiency_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M43.6603748,19.56255 L46.4332957,17.3863539 C47.2985626,16.70729 47.5414536,15.3895504 46.9704615,14.4341545 L44.060739,9.56554545 C43.4921406,8.61415464 42.1911396,8.15294772 41.1583334,8.5341334 L37.8026261,9.77265 C35.5689955,7.74945 32.8589812,6.2118 29.8520812,5.33325 L29.2951424,1.97075284 C29.1148653,0.8823361 28.0692991,0 26.9696546,0 L21.0301902,0 C19.9261358,0 18.8852541,0.880702537 18.7047023,1.97080827 L18.1477635,5.3334 C15.1410188,6.21195 12.4310045,7.7496 10.1972186,9.7728 L6.84161092,8.5342834 C5.8072857,8.15252573 4.510253,8.61029956 3.93926098,9.56569545 L1.02953845,14.4343045 C0.460940067,15.3856954 0.697235865,16.7041427 1.56670429,17.3865039 L4.3396252,19.5627 C3.99615694,20.98815 3.81417466,22.47345 3.81417466,24 C3.81417466,25.52655 3.99615694,27.01185 4.33946993,28.43745 L1.56664823,30.6136461 C0.701412305,31.29271 0.458546432,32.6104357 1.02953845,33.5658144 L3.93926098,38.4343356 C4.50785937,39.3857093 5.80883543,39.8469023 6.84161092,39.4657166 L10.1972186,38.2272 C12.4310045,40.2504 15.1410188,41.78805 18.1477635,42.6666 L18.7047023,46.0291917 C18.8849794,47.1176391 19.9305456,48 21.0301902,48 L26.9696546,48 C28.0737089,48 29.1145906,47.1192727 29.2951424,46.0291363 L29.8520812,42.66645 C32.8588259,41.7879 35.5688402,40.25025 37.8026261,38.22705 L41.1582338,39.4655666 C42.192559,39.8473243 43.489606,39.3895783 44.0606159,38.434217 L46.9704294,33.5657845 C47.5390455,32.6144282 47.3027392,31.2959605 46.4332396,30.6135388 L43.6602195,28.43715 C44.0036878,27.01185 44.18567,25.52655 44.18567,24 C44.18567,22.47345 44.0036878,20.98815 43.6603748,19.56255 Z" id="path-1"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-3">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0.68627451 0 0 0 0 0.71372549 0 0 0 0 0.733333333 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Efficiency_icon">
<g id="Group-23">
<path d="M40,80 C62.09139,80 80,62.09139 80,40 C80,17.90861 62.09139,0 40,0 C17.90861,0 0,17.90861 0,40 C0,62.09139 17.90861,80 40,80 Z" id="Mask" fill="#EFF5FD"></path>
<g id="efficiency" transform="translate(16.000000, 16.000000)">
<g id="XMLID_474_">
<g id="XMLID_476_">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask">
<use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-1"></use>
<use fill="#E7ECED" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
<ellipse id="XMLID_477_" fill="#FFFFFF" cx="24" cy="24.7741935" rx="14.7096774" ry="14.7096774"></ellipse>
<rect id="XMLID_478_" fill="#0077CE" x="23" y="15" width="2" height="12"></rect>
<rect id="XMLID_3_" fill="#20A0FF" x="23" y="25" width="10" height="2"></rect>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/yizhi.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="80px" height="80px" viewBox="0 0 80 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>Consistency_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="40" cy="40" r="40"></circle>
<rect id="path-3" x="0" y="20" width="5" height="18"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-5" x="10" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-6">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-7" x="20" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-8">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<rect id="path-9" x="30" y="20" width="5" height="18" rx="1"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-10">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Consistency_icon">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<g id="Group-7" mask="url(#mask-2)">
<g transform="translate(22.000000, 21.000000)">
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<path d="M0,6 C0,5.44771525 0.447365195,5 0.998153687,5 L30,5 L30,7 L0.998153687,7 C0.446888627,7 0,6.55613518 0,6 Z M36,6 L30,12 L30,1.8369702e-16 L36,6 Z" id="Combined-Shape" fill="#7383BF" fill-rule="evenodd"></path>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-5"></use>
</g>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-7"></use>
</g>
<g id="Rectangle-path" fill="none">
<use fill="black" fill-opacity="1" filter="url(#filter-10)" xlink:href="#path-9"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-9"></use>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/zhinan.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_doc_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="60" cy="60" r="60"></circle>
<path d="M72.7204805,55 C72.3212048,55 71.8159682,55.2518631 71.583447,55.5744208 L68.6205739,59.6845744 L30.9907556,59.6845744 C28.7867221,59.6845744 27,61.4733181 27,63.6828821 L27,94.9419923 C27,97.1501967 28.7995699,98.9402999 31.0045707,98.9402999 L88.9954293,98.9402986 C91.2070926,98.9402985 93,97.1496402 93,94.9439184 L93,58.9963801 C93,56.7892403 91.2181016,55.1145608 89.0176162,55.1367239 L72.7204805,55 Z" id="path-3"></path>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-4">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_doc_icon">
<g id="Group">
<g id="Group-2">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<path d="M27,59.0081112 C27,56.7944925 28.7811186,55 30.9977467,55 L47.586785,55 C47.9921103,55 48.5248696,55.2699688 48.7688582,55.5925758 L51.7488113,59.5327339 L88.2558934,59.5327339 C88.6668521,59.5327339 89,59.8566406 89,60.264357 L89,96.2683769 C89,96.6724412 88.6664231,97 88.260519,97 L27.739481,97 C27.3310769,97 27,96.6619234 27,96.2710114 L27,59.0081112 Z" id="Rectangle" fill="#0077CE" mask="url(#mask-2)"></path>
<g id="Group-9" mask="url(#mask-2)">
<g transform="translate(32.000000, 15.000000)">
<path d="M42.2461314,0 L55.7180083,13.3923872 L55.7180083,68.1865965 C55.7180083,70.6980461 53.6816152,72.7323226 51.1722822,72.7323226 L4.62309912,72.7323226 C2.11376615,72.7323226 0.0773730599,70.6980461 0.0773730599,68.1865965 L0.0773730599,4.54572606 C0.0773730599,2.0342765 2.11400132,0 4.62309912,0 L42.2461314,0 Z" id="Shape" fill="#FFFFFF"></path>
<path d="M55.6523941,13.4558849 L46.8080847,13.4558849 C44.2987517,13.4558849 42.2623586,11.4194918 42.2623586,8.91015881 L42.2623586,0.0453890595 L55.6523941,13.4558849 Z" id="Shape" fill="#D9EDFE"></path>
<polygon id="Path" fill="#EFF5FD" points="6.16906036 36.1924682 30.1690604 36.1924682 30.1690604 31.6467421 6.16906036 31.6467421"></polygon>
<polygon id="Path" fill="#20A0FF" points="6 8 6 12 33 12 32.999746 8"></polygon>
<polygon id="Path" fill="#EFF5FD" points="6.16906036 21.9292516 6.16906036 25.9292516 51.1690604 25.9292516 51.1690604 21.9292516"></polygon>
</g>
</g>
<g id="Rectangle-Copy" mask="url(#mask-2)">
<use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-3"></use>
</g>
<text id="Elemnet" mask="url(#mask-2)" font-family="PingFangSC-Semibold, PingFang SC" font-size="14" font-weight="500" line-spacing="30" fill="#0077CE">
<tspan x="33" y="82">Elemnet</tspan>
</text>
</g>
<path d="M100.506172,19.2377548 C100.506172,18.3510985 98.1302446,14.3428431 98.1302446,14.3428431 C97.1524382,12.6147723 97.7714617,11.9727442 99.5476926,12.9005283 C99.5476926,12.9005283 103.291856,15.0088747 104.371071,15.0088747 C105.964825,15.0088747 109.247423,12.9669733 109.247423,12.9669733 C110.978808,11.9987744 111.601512,12.6239259 110.672549,14.3744675 C110.672549,14.3744675 108.657471,17.7591636 108.657471,19.2377548 C108.657471,20.4447205 110.721457,24.1294186 110.721457,24.1294186 C111.638756,25.887084 110.992695,26.4842846 109.270392,25.4942095 C109.270392,25.4942095 105.670245,23.2219716 104.371071,23.2219716 C102.997276,23.2219716 99.4459871,25.4942095 99.4459871,25.4942095 C97.7415162,26.4981217 97.2289914,25.9503 98.257018,24.2518201 C98.257018,24.2518201 100.506172,21.0366554 100.506172,19.2377548 Z" id="Rectangle-22" fill="#FFACAD" transform="translate(104.403023, 19.235844) rotate(135.000000) translate(-104.403023, -19.235844) "></path>
<path d="M97.9563635,39.9441042 C97.9563635,39.2992632 96.6862323,37.2218793 96.6862323,37.2218793 C95.7222557,35.5024456 96.3641883,34.8700535 98.1353687,35.7777355 C98.1353687,35.7777355 99.9823157,36.868555 100.7672,36.868555 C101.926293,36.868555 103.446659,35.8329857 103.446659,35.8329857 C105.184667,34.8806167 105.817305,35.5201588 104.908745,37.2811628 C104.908745,37.2811628 103.884581,38.8687651 103.884581,39.9441042 C103.884581,40.8218974 104.955257,42.6329686 104.955257,42.6329686 C105.86009,44.3910456 105.207738,44.9955706 103.466102,44.0173303 C103.466102,44.0173303 101.712053,42.8417164 100.7672,42.8417164 C99.7680756,42.8417164 98.045543,44.0173303 98.045543,44.0173303 C96.3308398,45.0108454 95.8049382,44.4506312 96.8077051,42.7354455 C96.8077051,42.7354455 97.9563635,41.2523955 97.9563635,39.9441042 Z" id="Rectangle-22" fill="#FFD6D2" transform="translate(100.800150, 39.935899) rotate(135.000000) translate(-100.800150, -39.935899) "></path>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/ziyuan.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="134px" height="120px" viewBox="0 0 134 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_sketch_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<circle id="path-1" cx="83" cy="60" r="60"></circle>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_sketch_icon">
<g id="Group-7" transform="translate(-9.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#EFF5FD" xlink:href="#path-1"></use>
<path d="M139,95 L139,97 C139,98.1 137.734375,99 136.1875,99 L29.8125,99 C28.2665625,99 27,98.1 27,97 L27,95 L139,95 Z" id="Shape" fill="#0077CE"></path>
<g id="Group-15" transform="translate(0.000000, 10.000000)">
<g id="Group-9" transform="translate(26.000000, 72.000000)" fill="#20A0FF">
<polygon id="Rectangle-731" points="9 0.00446001895 105 0.00446001895 112.920506 13 0.989849838 13.3241507"></polygon>
</g>
<path d="M35,6.44020485 C35,5.09251693 36.0946646,4 37.4331334,4 L128.566867,4 C129.910649,4 131,5.09565993 131,6.44020485 L131,72 L35,72 L35,6.44020485 Z" id="Rectangle-731" fill="#D9EDFE"></path>
<rect id="Rectangle-13" fill="#FFFFFF" x="41" y="10" width="84" height="56"></rect>
<g id="Group-11" transform="translate(87.589150, 38.649096) scale(-1, 1) translate(-87.589150, -38.649096) translate(58.589150, 20.149096)">
<rect id="Rectangle-733" fill="#FF9EA4" x="0.425215481" y="0.00674799284" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy-2" fill="#FFCFC7" x="21.0481663" y="20.5392155" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy" fill="#EFF5FD" x="21.0481663" y="0.00674799284" width="15.7704918" height="15.7012987"></rect>
<rect id="Rectangle-733-Copy" fill="#EFF5FD" x="41.6711171" y="20.5392155" width="15.7704918" height="15.7012987"></rect>
</g>
<g id="Group-20" transform="translate(25.049180, 14.701299)">
<circle id="Oval-4" fill="#20A0FF" cx="15" cy="15" r="15"></circle>
<path d="M21.9841499,12.529882 L19.7537045,10.8565359 C19.7036857,10.8045119 19.64724,10.7618965 19.5852055,10.73035 L18.0826867,9.60297906 C17.970913,9.5194086 17.8348284,9.47402597 17.6948318,9.47402597 L11.9736917,9.47402597 C11.8336951,9.47402597 11.6973311,9.5194086 11.5858368,9.60297906 L7.68409413,12.529882 C7.40046821,12.7426823 7.3451402,13.1433777 7.56058413,13.4239752 L14.3226173,22.228759 C14.5799764,22.563871 15.0882676,22.563871 15.3456267,22.228759 L22.1079393,13.4239752 C22.3233833,13.1433777 22.2677758,12.7426823 21.9841499,12.529882 L21.9841499,12.529882 Z" id="Sketch" fill="#FFFFFF"></path>
</g>
<g id="Group-16" transform="translate(19.933385, 18.437778) rotate(-26.000000) translate(-19.933385, -18.437778) translate(4.933385, 5.437778)">
<rect id="Rectangle-23" fill="#FFCFC7" x="25.5270465" y="0.854317229" width="3.8499999" height="11.0799999"></rect>
<path d="M10.981875,8.34555266 C10.4466477,7.48650426 10.7986346,6.36966093 11.70694,5.8837127 L11.70694,5.8837127 C12.6426096,5.38312444 13.8231901,5.65474724 14.3702344,6.53276219 L18.3008157,12.8414083 C18.836043,13.7004567 18.484056,14.8173001 17.5757507,15.3032483 L17.5757507,15.3032483 C16.6400811,15.8038366 15.4595006,15.5322138 14.9124562,14.6541988 L10.981875,8.34555266" id="Rectangle-23" fill="#FF9EA4"></path>
<path d="M0.957497949,21.3837223 C0.0308614262,20.8877504 -0.266799001,19.7574503 0.25738261,18.9157632 L0.25738261,18.9157632 C0.797356108,18.0487189 1.96581964,17.7369549 2.91291496,18.2438771 L9.71791212,21.8861756 C10.6445486,22.3821474 10.9422091,23.5124476 10.4180275,24.3541347 L10.4180275,24.3541347 C9.87805396,25.221179 8.70959043,25.532943 7.76249511,25.0260208 L0.957497949,21.3837223" id="Rectangle-23" fill="#FFCFC7"></path>
</g>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/images/zujian.svg 0 → 100644
View file @ 8c71f100
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
<title>landingpage_demo_icon</title>
<desc>Created with Sketch.</desc>
<defs>
<rect id="path-1" x="0" y="0" width="68" height="12"></rect>
<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-2">
<feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0.466666667 0 0 0 0 0.807843137 0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
</filter>
<polyline id="path-3" points="95.3575369 19.0075852 100.34433 8.39738533 104.940596 12.254111 95.3575369 19.0075852"></polyline>
<mask id="mask-4" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="11.5830596" height="12.6101999">
<rect x="94.3575369" y="7.39738533" width="11.5830596" height="12.6101999" fill="white"></rect>
<use xlink:href="#path-3" fill="black"></use>
</mask>
<polyline id="path-5" points="95.7283485 30.6666667 101.271652 25.1568381 103.271652 28.6209397 95.7283485 30.6666667"></polyline>
<mask id="mask-6" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="-1" y="-1" width="9.54330305" height="7.50982859">
<rect x="94.7283485" y="24.1568381" width="9.54330305" height="7.50982859" fill="white"></rect>
<use xlink:href="#path-5" fill="black"></use>
</mask>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="landingpage_demo_icon">
<g id="Group-17">
<circle id="Oval-7" fill="#EFF5FD" cx="60" cy="60" r="60"></circle>
<g id="Group-8" transform="translate(10.000000, 16.000000)">
<g id="Rectangle-27">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#20A0FF" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
<rect id="Rectangle-36" fill="#FFFFFF" x="0" y="14" width="68" height="69"></rect>
<path d="M9.04980469,81.7578125 C10.9093537,78.8748781 11.4501953,73 11.4501953,73 L75.4501953,73 L75.4501953,77.9414074 C75.4501953,80.735191 73.1859826,83 70.383591,83 L10.0666043,83 C7.26839602,83 7.24754402,82.9859929 9.04980469,81.7578125 C9.04980469,81.7578125 7.81646034,83.6699164 9.04980469,81.7578125 Z" id="Rectangle-36-Copy" fill="#D9EDFE"></path>
<circle id="Oval-8" fill="#0077CE" cx="6.5" cy="6.5" r="2.5"></circle>
<circle id="Oval-8" fill="#0077CE" cx="14.5" cy="6.5" r="2.5"></circle>
<circle id="Oval-8" fill="#0077CE" cx="22.5" cy="6.5" r="2.5"></circle>
<rect id="Rectangle-20" fill="#20A0FF" x="24" y="57" width="20" height="6" rx="3"></rect>
<rect id="Rectangle-37" fill="#D9EDFE" x="8" y="20" width="15" height="4"></rect>
<rect id="Rectangle-37" fill="#EFF5FD" x="8" y="27" width="52" height="4"></rect>
<rect id="Rectangle-37" fill="#D9EDFE" x="8" y="37" width="15" height="4"></rect>
<rect id="Rectangle-37" fill="#EFF5FD" x="8" y="44" width="52" height="4"></rect>
</g>
<g id="Group-8" transform="translate(58.000000, 39.000000)">
<polygon id="Combined-Shape" fill="#6496DC" points="12 29.8863636 14.5 29.8863637 17 34.8863636 12 34.8863636"></polygon>
<path d="M14,33.8884505 C14,34.9918675 14.5735636,35.1980873 15.2746482,34.3567858 L19,29.8863636 L14,29.8863636 L14,33.8884505 Z" id="Combined-Shape" fill="#80A8E1"></path>
<g id="Group-12" transform="translate(0.000000, 0.136364)">
<g id="Group-19">
<rect id="Rectangle-20" fill="#6496DD" x="0" y="0.863636364" width="49" height="29"></rect>
<rect id="Rectangle-20" fill="#80A8E1" x="2" y="0.863636364" width="49" height="29"></rect>
<polygon id="Fill-1" fill="#FFFFFF" points="34.4995277 21.9823228 40.7552877 15.6968482 34.4995277 9.41128616 32.6225734 11.2972638 37.0018433 15.6971981 32.6225734 20.0965784"></polygon>
<polygon id="Fill-2" fill="#FFFFFF" points="18.25576 9.41128616 12 15.6967316 18.25576 21.982177 20.1327143 20.096316 15.7534444 15.6963817 20.1327143 11.2971181"></polygon>
<polygon id="Fill-3" fill="#FFFFFF" points="30.6244081 9.37209893 24.6448241 23.2004929 22.4809422 22.8285106 28.4605725 9"></polygon>
</g>
</g>
</g>
<g id="Triangle-3">
<use fill="#FFACAD" fill-rule="evenodd" xlink:href="#path-3"></use>
<use stroke="#FFACAD" mask="url(#mask-4)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-3"></use>
</g>
<g id="Triangle-3">
<use fill="#FFD6D2" fill-rule="evenodd" xlink:href="#path-5"></use>
<use stroke="#FFD6D2" mask="url(#mask-6)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xlink:href="#path-5"></use>
</g>
</g>
</g>
</g>
</svg>
\ No newline at end of file
examples/assets/styles/common.css
View file @ 8c71f100
......@@ -86,3 +86,8 @@
}
}
}
.container {
width: 960px;
margin: 0 auto;
}
examples/components/demo-block.vue 0 → 100644
View file @ 8c71f100
<template>
<div
class="demo-block"
:class="[blockClass, { 'hover': hovering }]"
@mouseenter="hovering = true"
@mouseleave="hovering = false">
<slot></slot>
<div class="demo-block-control" @click="isExpanded = !isExpanded">
<i :class="iconClass"></i>
<span v-show="hovering">{{ controlText }}</span>
</div>
</div>
</template>
<style>
.demo-block {
border: solid 1px #eaeefb;
border-radius: 4px;
transition: .2s;
&.hover {
box-shadow: 0 6px 18px 0 rgba(232, 237, 250, .5);
}
.source {
padding: 24px;
}
.meta {
background-color: #fbfcfd;
border-top: solid 1px #eaeefb;
clear: both;
overflow: hidden;
height: 0;
transition: height .2s;
}
.description {
padding: 18px 24px;
width: 40%;
box-sizing: border-box;
border-left: solid 1px #eaeefb;
float: right;
font-size: 14px;
line-height: 1.5;
color: #5e6d82;
p {
margin: 0;
}
code {
background-color: #f4faff;
border: solid 1px #eaeefb;
margin: 0 4px;
padding: 0 4px;
font-size: 12px;
}
}
.highlight {
width: 60%;
border-right: solid 1px #eaeefb;
pre {
margin: 0;
}
code.hljs {
padding: 18px 24px;
margin: 0;
line-height: 1.4;
background-color: #fbfcfd;
border: none;
max-height: none;
border-radius: 0;
&::before {
content: none;
}
}
}
.demo-block-control {
border-top: solid 1px #eaeefb;
height: 36px;
box-sizing: border-box;
background-color: #fff;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
text-align: center;
margin-top: -1px;
color: #d3dce6;
cursor: pointer;
transition: .2s;
i {
font-size: 12px;
line-height: 36px;
}
span {
font-size: 14px;
line-height: 36px;
}
&:hover {
color: #20a0ff;
background-color: rgba(32, 159, 255, .05);
}
}
}
</style>
<script type="text/babel">
export default {
data() {
return {
hovering: false,
isExpanded: false
};
},
computed: {
blockClass() {
return `demo-${ this.$router.currentRoute.path.split('/').pop() }`;
},
iconClass() {
return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom';
},
controlText() {
return this.isExpanded ? '隐藏代码' : '显示代码';
},
codeArea() {
return this.$el.getElementsByClassName('meta')[0];
},
codeAreaHeight() {
if (this.$el.getElementsByClassName('description').length > 0) {
return Math.max(this.$el.getElementsByClassName('description')[0].clientHeight, this.$el.getElementsByClassName('highlight')[0].clientHeight);
}
return this.$el.getElementsByClassName('highlight')[0].clientHeight;
}
},
watch: {
isExpanded(val) {
this.codeArea.style.height = val ? `${ this.codeAreaHeight + 1 }px` : '0';
}
},
mounted() {
this.$nextTick(() => {
let highlight = this.$el.getElementsByClassName('highlight')[0];
if (this.$el.getElementsByClassName('description').length === 0) {
highlight.style.width = '100%';
highlight.borderRight = 'none';
}
});
}
};
</script>
\ No newline at end of file
examples/components/footer.vue 0 → 100644
View file @ 8c71f100
<template>
<footer class="footer">
<div class="container">
<div class="footer-main">
<p class="footer-main-title">Element 1.0 Hydrogen</p>
<span class="footer-main-link">反馈建议</span>
<span class="footer-main-link"><router-link to="/changelog">更新日志</router-link></span>
</div>
<div class="footer-social">
<el-popover
ref="weixin"
placement="top"
width="120"
class="footer-popover"
trigger="hover">
<div class="footer-popover-title">饿了么 UED</div>
<img src="../assets/images/qrcode.png" alt="">
</el-popover>
<i class="doc-icon-weixin elementdoc" v-popover:weixin></i>
<a href="//github.com/elemefe" target="_blank">
<i class="doc-icon-github elementdoc"></i>
</a>
</div>
</div>
</footer>
</template>
<style>
.footer {
height: 120px;
background-color: #324057;
color: #fff;
width: 100%;
z-index: 1000;
margin-top: -120px;
* {
word-spacing: 0;
}
.container {
height: 100%;
}
.footer-main {
font-size: 0;
padding-top: 40px;
display: inline-block;
.footer-main-title {
line-height: 1;
font-size: 22px;
margin: 0;
}
.footer-main-link {
display: inline-block;
margin: 12px 18px 0 0;
line-height: 1;
font-size: 12px;
color: #8492a6;
a {
color: #8492a6;
text-decoration: none;
}
}
}
.footer-social {
float: right;
line-height: 120px;
.footer-popover {
padding: 0;
min-width: 120px;
line-height: normal;
box-shadow: 0 0 11px 0 rgba(174, 187, 211, 0.24);
.footer-popover-title {
border-bottom: solid 1px #eaeefb;
height: 30px;
line-height: 30px;
text-align: center;
color: #99a9bf;
background-color: #f8f9fe;
}
img {
size: 100px;
margin: 10px;
}
}
.elementdoc {
transition: .3s;
display: inline-block;
line-height: 32px;
text-align: center;
color: #324057;
background-color: #fff;
size: 32px;
border-radius: 50%;
font-size: 22px;
&:hover {
color: #fff;
transform: scale(1.2);
}
}
.doc-icon-weixin {
margin-right: 36px;
&:hover {
background-color: #26CB72;
}
}
.doc-icon-github {
margin-right: 0;
transform: translateY(8px);
position: relative;
&::before {
position: absolute;
left: 4px;
bottom: -6px;
}
&:hover {
transform: translateY(8px) scale(1.2);
background-color: #437AC0;
}
}
}
}
</style>
examples/components/header.vue 0 → 100644
View file @ 8c71f100
<style scoped>
.headerWrapper {
height: 80px;
}
.header {
height: 80px;
background-color: #20a0ff;
color: #fff;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
line-height: @height;
z-index: 100;
position: relative;
.container {
height: 100%;
}
h1 {
margin: 0;
float: left;
font-size: 32px;
font-weight: normal;
a {
color: #fff;
text-decoration: none;
display: block;
}
span {
font-size: 12px;
display: inline-block;
width: 34px;
height: 18px;
border: 1px solid #fff;
text-align: center;
line-height: 18px;
vertical-align: middle;
margin-left: 10px;
border-radius: 3px;
}
}
.nav {
float: right;
height: 100%;
line-height: 80px;
background: transparent;
@utils-clearfix;
padding: 0;
margin: 0;
}
.nav-item {
margin: 0;
float: left;
list-style: none;
position: relative;
cursor: pointer;
a {
text-decoration: none;
color: #fff;
display: block;
padding: 0 20px;
&.active:before {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background:#99d2fc;
}
}
}
/*.el-menu-item__bar {
background-color: #99d2fc;
}*/
}
.header-fixed {
position: fixed;
top: -80px;
box-shadow: 0px 2px 8px 0px rgba(50,63,87,0.45);
}
.header-hangUp {
top: 0;
}
</style>
<template>
<div class="headerWrapper">
<header class="header"
:style="headerStyle"
:class="{
'header-fixed': isFixed,
'header-hangUp': hangUp
}">
<div class="container">
<h1><router-link to="/">Element<span>Beta</span></router-link></h1>
<ul class="nav">
<li class="nav-item">
<router-link
active-class="active"
to="/guide/design"
exact>指南
</router-link>
</li>
<li class="nav-item">
<router-link
active-class="active"
to="/component/button"
exact>组件
</router-link>
</li>
<li class="nav-item">
<router-link
active-class="active"
to="/resource"
exact>资源
</router-link>
</li>
</ul>
</div>
</header>
</div>
</template>
<script>
export default {
data() {
return {
active: '',
isFixed: false,
headerStyle: {},
hangUp: false
};
},
watch: {
},
mounted() {
var scrollTop = 0;
function scroll(fn) {
var beforeScrollTop = document.body.scrollTop;
window.addEventListener('scroll', () => {
const afterScrollTop = document.body.scrollTop;
var delta = afterScrollTop - beforeScrollTop;
if (delta === 0) return false;
fn(delta > 0 ? 'down' : 'up');
beforeScrollTop = afterScrollTop;
scrollTop = afterScrollTop;
}, false);
}
scroll((direction) => {
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';
});
}
};
</script>
examples/components/side-nav.vue 0 → 100644
View file @ 8c71f100
<style>
.side-nav {
width: 100%;
box-sizing: border-box;
border-right: 1px solid #eaeefa;
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
.nav-item {
a {
font-size:18px;
color:#5e6d82;
line-height: 32px;
height: 32px;
margin: 10px 0;
padding: 0 0 0 10px;
text-decoration: none;
border-left: 2px solid transparent;
display: block;
&.active {
color: #20a0ff;
border-left-color: #20a0ff;
}
}
.nav-item {
a {
font-size: 14px;
padding-left: 20px;
&:hover {
background-color: #eee;
}
}
}
}
.nav-group__title {
color: #99a9bf;
padding-left: 15px;
line-height: 32px;
}
}
</style>
<template>
<div class="side-nav">
<ul>
<li class="nav-item" v-for="item in data">
<a v-if="!item.path">{{item.name}}</a>
<router-link
v-else
active-class="active"
:to="base + item.path"
exact
v-text="item.title || item.name">
</router-link>
<ul class="pure-menu-list sub-nav" v-if="item.children">
<li class="nav-item" v-for="navItem in item.children">
<router-link
class=""
active-class="active"
:to="base + navItem.path"
exact
v-text="navItem.title || navItem.name">
</router-link>
</li>
</ul>
<template v-if="item.groups">
<div class="nav-group" v-for="group in item.groups">
<div class="nav-group__title">{{group.groupName}}</div>
<ul class="pure-menu-list">
<li
class="nav-item"
v-for="navItem in group.list"
v-if="!navItem.disabled">
<router-link
active-class="active"
:to="base + navItem.path"
exact
v-text="navItem.title"></router-link>
</li>
</ul>
</div>
</template>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: Array,
base: {
type: String,
default: ''
}
},
data() {
return {
highlights: [],
navState: []
};
}
};
</script>
examples/docs/alert.md
View file @ 8c71f100
......@@ -11,137 +11,161 @@
.demo-box.demo-alert .el-alert {
margin: 20px 0 0;
}
</style>
## 基本用法
.demo-box.demo-alert .el-alert:first-child {
margin: 0;
}
</style>
Alert 组件提供四种主题，由`type`属性指定，默认值为`info`，下面的示例展示了四种不同的主题。
## Alert 警告
<div class="demo-box demo-alert">
<el-alert title="成功提示的文案" type="success"></el-alert>
<el-alert title="消息提示的文案" type="info"></el-alert>
<el-alert title="警告提示的文案" type="warning"></el-alert>
<el-alert title="错误提示的文案" type="error"></el-alert>
</div>
### 基本用法
::: demo Alert 组件提供四种主题，由 `type` 属性指定，默认值为 `info`。
```html
<el-alert title="成功提示的文案" type="success"></el-alert>
<el-alert title="消息提示的文案" type="info"></el-alert>
<el-alert title="警告提示的文案" type="warning"></el-alert>
<el-alert title="错误提示的文案" type="error"></el-alert>
<template>
<el-alert
title="成功提示的文案"
type="success">
</el-alert>
<el-alert
title="消息提示的文案"
type="info">
</el-alert>
<el-alert
title="警告提示的文案"
type="warning">
</el-alert>
<el-alert
title="错误提示的文案"
type="error">
</el-alert>
</template>
```
:::
## 自定义关闭按钮
在alert组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。
`closable`属性决定是否可关闭，接受`boolean`，默认为`true`。
你可以设置`close-text`属性来代替右侧的关闭图标，注意：`close-text`必须为文本。
设置`close`事件来设置关闭时的回调。
下面的示例展示了上述三种情况：
<div class="demo-box demo-alert">
<el-alert title="不可关闭的alert" type="success" :closable="false"></el-alert>
<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>
</div>
### 自定义关闭按钮
::: demo 在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。`closable` 属性决定是否可关闭，接受 `boolean`，默认为 `true`。你可以设置 `close-text` 属性来代替右侧的关闭图标，注意：`close-text` 必须为文本。设置 `close` 事件来设置关闭时的回调。
```html
<el-alert title="不可关闭" type="success" :closable="false"></el-alert>
<el-alert title="自定义close-text" type="info" close-text="知道了"></el-alert>
<el-alert title="设置了回调的alert" type="warning" @close="hello"></el-alert>
```
## 带有 icon
<template>
<el-alert
title="不可关闭的 alert"
type="success"
:closable="false">
</el-alert>
<el-alert
title="自定义 close-text"
type="info"
close-text="知道了">
</el-alert>
<el-alert
title="设置了回调的 alert"
type="warning"
@close="hello">
</el-alert>
</template>
通过设置`show-icon`属性来显示alert的icon，这能更有效的向用户展示你的显示意图。
<script>
export default {
methods: {
hello() {
alert('Hello World!');
}
}
}
</script>
```
:::
<div class="demo-box demo-alert">
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
</div>
### 带有 icon
::: demo 通过设置 `show-icon` 属性来显示 Alert 的 icon，这能更有效的向用户展示你的显示意图。
```html
<el-alert title="成功提示的文案" type="success" show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" show-icon></el-alert>
<template>
<el-alert
title="成功提示的文案"
type="success"
show-icon>
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
show-icon>
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
show-icon>
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
show-icon>
</el-alert>
</template>
```
:::
## 带有辅助性文字介绍
除了必填的`title`属性外，你可以设置`description`属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
<div class="demo-box demo-alert">
<el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"></el-alert>
</div>
### 带有辅助性文字介绍
::: demo 除了必填的 `title` 属性外，你可以设置 `description` 属性来帮助你更好的介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。
```html
<el-alert
<template>
<el-alert
title="带辅助性文字介绍"
type="success"
description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
</el-alert>
</el-alert>
</template>
```
:::
## 带有 icon 和辅助性文字介绍
最后，这是一个同时具有 icon 和辅助性文字的样例。
<div class="demo-box demo-alert">
<el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
<el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
<el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
<el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon></el-alert>
</div>
### 带有 icon 和辅助性文字介绍
::: demo 最后，这是一个同时具有 icon 和辅助性文字的样例。
```html
<el-alert
<template>
<el-alert
title="成功提示的文案"
type="success"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
<el-alert
</el-alert>
<el-alert
title="消息提示的文案"
type="info"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
<el-alert
</el-alert>
<el-alert
title="警告提示的文案"
type="warning"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
<el-alert
</el-alert>
<el-alert
title="错误提示的文案"
type="error"
description="文字说明文字说明文字说明文字说明文字说明文字说明"
show-icon>
</el-alert>
</el-alert>
</template>
```
:::
## Attributes
### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| **title** | 标题，**必选参数** | string | | |
| type | 主题 | string | 'success', 'warning', 'info', 'error' | 'info' |
| description | 辅助性文字 | string | | |
| closable | 是否可关闭 | boolean | | true |
| close-text | 关闭按钮自定义文本 | string | | |
| showIcon | 是否显示图标 | boolean | | false |
| **title** | 标题，**必选参数** | string | — | — |
| type | 主题 | string | success/warning/info/error | info |
| description | 辅助性文字 | string | — | — |
| closable | 是否可关闭 | boolean | — | true |
| close-text | 关闭按钮自定义文本 | string | — | — |
| showIcon | 是否显示图标 | boolean | — | false |
## Events
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| close | 关闭alert时触发的事件 | |
| close | 关闭alert时触发的事件 | — |
examples/docs/dropdown.md
View file @ 8c71f100
......@@ -25,7 +25,11 @@
## 基础用法
<p>通过与 button 一致的 type 属性来指定菜单按钮类型。</p>
Dropdown 组件只需要`el-dropdown`和它的子元素`el-dropdown-item`即可生成对应的下拉菜单，通过`text`属性来设置按钮文字。
默认条件下，他又一个主要按钮和一个下拉按钮组成，`el-dropdown`中的主要按钮同样可以设置点击事件，只要使用`mainclick`事件即可。
默认情况下，下拉按钮只要`hover`即可，无需点击也会显示下拉菜单。
<div class="demo-box">
<el-dropdown text="主要按钮" type="primary" @mainclick="handleMainClick()">
......@@ -47,7 +51,9 @@
## 不带独立按钮的下拉菜单
可以通过将`icon-separate`属性设为`false`来呈现不带独立按钮的下拉菜单。
如果不需要默认的主要按钮与下拉按钮的组合，可以通过设置`icon-separate`属性来呈现不带独立按钮的下拉菜单，它接受一个`Boolean`，设置为`false`即可。
在下例中，可以看到，在选项三和选项四中插入了一条分割线，要达成这个效果很简单，只需要在选项四中设置`class`为`divider`。
<el-dropdown text="下拉菜单" type="primary" :icon-separate="false">
<el-dropdown-item>选项一</el-dropdown-item>
......@@ -67,6 +73,8 @@
## 通过点击触发下拉
默认通过 Hover 即可出现下拉菜单，如果有需求，可以改成 click ，只要在`trigger`属性设置为`click`即可。
<div class="demo-box">
<el-dropdown text="主要按钮" type="primary" trigger="click">
<el-dropdown-item>选项一</el-dropdown-item>
......@@ -97,7 +105,9 @@
</el-dropdown>
```
## 文字类型下拉菜单
## 按钮样式
除了上述属性以外，由于本质还是按钮，`el-dropdown`同样拥有 Button 组件的相关属性：`type`和`size`，关于这点，可以参考 Button 组件的对应文档，下两例说明了相应字段的功能：
<div class="demo-box">
<el-dropdown text="下拉菜单" type="text" :icon-separate="false">
......@@ -117,25 +127,26 @@
</el-dropdown>
```
## 尺寸
<div class="demo-box">
<el-dropdown text="下拉菜单" type="primary" size="large">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<li class="divider">选项四</el-dropdown-item>
</el-dropdown><el-dropdown text="下拉菜单" type="primary">
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown><el-dropdown text="下拉菜单" type="primary" size="small">
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="small">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown><el-dropdown text="下拉菜单" type="primary" size="mini">
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="mini">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
......@@ -145,6 +156,60 @@
```html
<el-dropdown text="下拉菜单" type="primary" size="large">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<li class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="small">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单" type="primary" size="mini">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
```
## 对齐方式
下拉菜单的对齐方式有两种：`start`与`end`，在下例中演示了它们的区别，你可以通过设置`menu-align`来选择一种对齐方式，默认为`end`：
<div class="demo-box">
<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
</div>
```html
<el-dropdown text="下拉菜单 end" type="primary" menu-align="end">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
<el-dropdown-item class="divider">选项四</el-dropdown-item>
</el-dropdown>
<el-dropdown text="下拉菜单 start" type="primary" menu-align="start">
<el-dropdown-item>选项一</el-dropdown-item>
<el-dropdown-item>选项二</el-dropdown-item>
<el-dropdown-item>选项三</el-dropdown-item>
......@@ -152,12 +217,12 @@
</el-dropdown>
```
## API
## Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------------- |---------------- |---------------- |---------------------- |-------- |
| text | 菜单按钮文本 | string | | |
| type | 菜单按钮类型，同 button | string | | |
| type | 菜单按钮类型，同 Button 组件 | string | | |
| trigger | 触发下拉菜单的方式 | string | hover,click | hover |
| icon-separate | 独立的下拉菜单按钮 | boolean | true, false | false |
| size | 菜单按钮尺寸，同 button | string | large, small, mini | |
| icon-separate | 独立的下拉菜单按钮 | boolean | | false |
| size | 菜单按钮尺寸，同 Button 组件 | string | large, small, mini | |
| menu-align | 菜单水平对齐方向 | string | start, end | end |
examples/docs/menu.md
View file @ 8c71f100
......@@ -133,7 +133,7 @@
```html
<div class="nav">
<h1>Element</h1>
<el-menu default-active="1">
<el-menu default-active="2">
<el-menu-item index="1">处理中心</el-menu-item>
<el-menu-item index="2">我的工作台</el-menu-item>
<el-menu-item index="3">订单管理</el-menu-item>
......@@ -196,6 +196,7 @@
<div class="nav nav-vertical">
<h1>Element</h1>
<el-menu mode="vertical" default-active="2-1">
<el-menu-item-group title="分组一">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
......@@ -203,12 +204,15 @@
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
</el-menu>
</div>
</div>
......@@ -217,6 +221,7 @@
<div class="nav nav-vertical">
<h1>Element</h1>
<el-menu mode="vertical" default-active="2-1">
<el-menu-item-group title="分组一">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub1">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
......@@ -224,12 +229,15 @@
<el-menu-item index="2-2">选项2</el-menu-item>
<el-menu-item index="2-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
<el-menu-item-group title="分组二">
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
<el-menu-item index="3-3">选项3</el-menu-item>
</el-submenu>
</el-menu-item-group>
</el-menu>
</div>
```
......@@ -237,13 +245,18 @@
<div class="demo-box" style="width: 200px;">
<div class="nav nav-vertical nav-dark">
<h1>Element</h1>
<el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu mode="vertical" theme="dark" :default-openeds="['sub2']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group title="分组1">
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item index="2-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
......@@ -270,13 +283,18 @@
```html
<div class="nav nav-vertical nav-dark">
<h1>Element</h1>
<el-menu mode="vertical" theme="dark" :default-openeds="['sub3']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu mode="vertical" theme="dark" :default-openeds="['sub2']" default-active="3-1" :unique-opend="true" @open="handleopen" @close="handleclose" @select="handleselect">
<el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>
<el-submenu index="sub2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group title="分组1">
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
<el-menu-item index="2-4">选项4</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="sub3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
......@@ -322,3 +340,8 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| key | 唯一标志 | string | | |
## menu-group API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 分组标题 | string | | |
examples/docs/message.md
View file @ 8c71f100
......@@ -31,22 +31,22 @@
open5() {
this.$message({
showClose: true,
message: '恭喜你，这是一条成功消息'
message: '这是一条消息提示'
});
},
open6() {
this.$message({
showClose: true,
message: '警告哦，这是一条警告消息',
type: 'warning'
message: '恭喜你，这是一条成功消息',
type: 'success'
});
},
open7() {
this.$message({
showClose: true,
message: '错了哦，这是一条错误消息',
message: '警告哦，这是一条警告消息',
type: 'warning'
});
},
......
examples/docs/notification.md
View file @ 8c71f100
......@@ -73,15 +73,14 @@
## 基本用法
Notification 组件提供通知功能，Element 注册了`$notify`方法，接收一个`options`字面量参数，最简单的条件下，你可以设置`title`字段和`message`字段，用于设置通知的标题和正文，下面是一个最简单的情况的样例：
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
</div>
::: demo Notification 组件提供通知功能，Element 注册了 `$notify` 方法，接收一个 `options` 字面量参数，在最简单的情况下，你可以设置 `title` 字段和 `message` 字段，用于设置通知的标题和正文。
```html
<template>
<el-button :plain="true" @click.native="open">点击展示 Notification</el-button>
<el-button
plain
@click.native="open">
点击展示 Notification
</el-button>
</template>
<script>
......@@ -97,26 +96,33 @@ Notification 组件提供通知功能，Element 注册了`$notify`方法，接
}
</script>
```
:::
## 带有 icon
Element 也为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。
通过`type`字段来设置，除此以外的值将被忽略，下面是四种类型的样例：
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">消息</el-button>
<el-button :plain="true" @click.native="open5">错误</el-button>
</div>
::: demo Element 为 Notification 组件准备了四种通知类型：`success`, `warning`, `info`, `error`。通过 `type` 字段来设置，除此以外的值将被忽略。
```html
<template>
<el-button :plain="true" @click.native="open2">成功</el-button>
<el-button :plain="true" @click.native="open3">警告</el-button>
<el-button :plain="true" @click.native="open4">消息</el-button>
<el-button :plain="true" @click.native="open5">错误</el-button>
<el-button
plain
@click.native="open2">
成功
</el-button>
<el-button
plain
@click.native="open3">
警告
</el-button>
<el-button
plain
@click.native="open4">
消息
</el-button>
<el-button
plain
@click.native="open5">
错误
</el-button>
</template>
<script>
......@@ -157,20 +163,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
}
</script>
```
:::
## 不会自动关闭
默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为`0`，则不会自动关闭，下面是一个不会自动关闭的样例：
注意：`duration`接收一个`Number`，单位为毫秒，默认为`4500`。
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
</div>
::: demo 默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置 `duration`，可以控制关闭的时间间隔，特别的是，如果设置为 `0`，则不会自动关闭。注意：`duration` 接收一个 `Number`，单位为毫秒，默认为 `4500`。
```html
<template>
<el-button :plain="true" @click.native="open6">不会自动关闭的 Notification</el-button>
<el-button
plain
@click.native="open6">
不会自动关闭的 Notification
</el-button>
</template>
<script>
......@@ -187,18 +191,18 @@ Element 也为 Notification 组件准备了四种通知类型：`success`, `warn
}
</script>
```
:::
## 回调函数
Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，你可以通过设置`onClose`参数来处理后续操作，它是一个`Function`，下面是一个样例，会在控制台输出：Notification 已关闭。
<div class="demo-box demo-notification">
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
</div>
::: demo Element 为关闭操作设置了回调函数，在关闭时会触发 `onClose`，你可以通过设置 `onClose` 参数来处理后续操作，它是一个 `Function`。本例会在控制台输出：Notification 已关闭。
```html
<template>
<el-button :plain="true" @click.native="open7">带有回调函数的 Notification</el-button>
<el-button
plain
@click.native="open7">
带有回调函数的 Notification
</el-button>
</template>
<script>
......@@ -219,6 +223,7 @@ Element 为关闭操作设置了回调函数，在关闭时会触发`onClose`，
}
</script>
```
:::
## 全局方法
......
examples/docs/radio.md
View file @ 8c71f100
......@@ -15,12 +15,16 @@
## 基本用法
要使用 Radio 组件，只需要设置`v-model`绑定变量，选中意味着变量的值为相应 Radio `label`属性的值，`label`可以是`String`或者`Number`。
<div class="demo-box demo-radio">
<el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
<el-radio class="radio" v-model="radio" label="单选框 B"></el-radio>
<el-radio class="radio" v-model="radio" label="单选框 C"></el-radio>
</div>
{{radio}}
```html
<template>
<el-radio class="radio" v-model="radio" label="单选框 A"></el-radio>
......@@ -32,8 +36,8 @@
export default {
data () {
return {
radio: '选中且禁用'
}
radio: ''
};
}
}
</script>
......@@ -41,6 +45,8 @@
## Radio Group
结合`el-radio-group`元素和子元素`el-radio`可以实现单选组，在`el-radio-group`中绑定`v-model`，在`el-radio`中设置好`label`即可，无需再给每一个`el-radio`绑定变量，另外，还提供了`change`事件来响应变化，它会传入一个参数`value`。
<div class="demo-box demo-radio">
<el-radio-group v-model="radio2">
<el-radio :label="9"></el-radio>
......@@ -59,6 +65,8 @@
## Radio Group Button
还有一种特殊的单选按钮组，只需要把`el-radio`元素换成`el-radio-button`元素即可，此外，Element 还提供了`size`属性给按钮组，支持`large`和`small`两种（如果不设定为默认）。
<div class="demo">
<el-radio-group v-model="radio31" size="large">
<el-radio-button label="上海"></el-radio-button>
......@@ -107,33 +115,52 @@
## 禁用
只要在`el-radio`元素中设置`disabled`属性即可，它接受一个`Boolean`，`true`为禁用。
注意：请牢记，选中的条件是绑定的变量值等于`label`中的值。
<div class="demo-box demo-radio">
<el-radio disabled v-model="radio" label="禁用"></el-radio>
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
</div>
```html
<el-radio disabled v-model="radio" label="禁用"></el-radio>
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
<template>
<el-radio disabled v-model="radio" label="禁用"></el-radio>
<el-radio disabled v-model="radio1" label="选中且禁用"></el-radio>
</template>
<script>
export default {
data () {
return {
radio: '',
radio1: '选中且禁用'
};
}
}
</script>
```
## Radio API
## Radio Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string,number | | |
| label | 真实值 | string,number | | |
| disabled | 禁用 | boolean | true, false | false |
| label | Radio 的 value | string,number | | |
| disabled | 是否禁用 | boolean | | false |
## Radio Group API
## Radio-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value | 绑定值 | string,number | | |
| size | 尺寸 | string | large, small | |
| change | 绑定值变化时触发的事件 | Function(value) | | |
| size | Radio 按钮组尺寸 | string | large, small | |
## Radio-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 绑定值变化时触发的事件 | 选中的 Radio label 值 |
## Radio Button API
## Radio-button Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 真实值 | string,number | | |
| disabled | 禁用 | boolean | true, false | false |
| label | Radio 的 value | string,number | | |
| disabled | 是否禁用 | boolean | | false |
examples/docs/steps.md
View file @ 8c71f100
## 基础用法
简单的步骤条。
## 基础步骤条
### 定宽步骤条
Steps 组件需要设置`active`属性，接受一个`Number`，表明步骤的 index，从 0 开始。
需要定宽的步骤条时，设置`space`属性即可，它接受`Boolean`，单位为`px`，如果不设置，则为自适应。
设置`finish-status`属性可以改变已经完成的步骤的状态，而`process-status`可以改变当前步骤的状态，Steps组件提供了5种状态：`wait`，`process`，`finish`，`error`，`success`。
下两例分别展示了定宽的步骤条和自适应的步骤条：
<el-steps :space="100" :active="active" finish-status="success">
<el-step title="步骤 1"></el-step>
......@@ -53,24 +58,23 @@
</script>
```
### 自适应步骤条
<el-steps :active="1">
<el-steps :active="1" process-status="error">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
```html
<el-steps :active="1">
<el-steps :active="1" process-status="error">
<el-step title="步骤 1"></el-step>
<el-step title="步骤 2"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
```
## 含状态步骤
每一步骤显示出该步骤的状态。
## 状态与描述
Steps 组件中，我们可以给`el-step`元素设置`title`属性来定义每一个步骤的标题（或状态）。使用`title`具名分发，可以用`slot`的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。
<el-steps :space="100" :active="1" finish-status="success">
<el-step title="已完成"></el-step>
......@@ -86,8 +90,7 @@
</el-steps>
```
## 有描述的步骤条
每个步骤有其对应的步骤状态描述。
除了`title`外，还可以用`description`属性来补充说明，下面是一个使用了`description`的例子：
<el-steps :space="200" :active="1">
<el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
......@@ -104,7 +107,8 @@
```
## 带图标的步骤条
步骤条内可以启用各种自定义的图标。
除了`title`和`description`，还可以通过`icon`属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过 slot name 来使用自定义的图标。
<el-steps :space="100" :active="1">
<el-step title="步骤 1" icon="edit"></el-step>
......@@ -121,7 +125,8 @@
```
## 竖式步骤条
竖直方向的步骤条。
默认情况下，步骤条为横向显示，如果需要竖向显示的步骤条，只需要在`el-steps`元素中设置`direction`属性为`vertical`即可。
<el-steps :space="100" direction="vertical" :active="1">
<el-step title="步骤 1"></el-step>
......@@ -137,47 +142,28 @@
</el-steps>
```
## 步骤错误提示
每一步骤显示出该步骤的状态。
<el-steps :space="100" :active="1" finish-status="success" process-status="error">
<el-step title="已完成"></el-step>
<el-step title="审核失败"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
```html
<el-steps :space="100" :active="1" finish-status="success" process-status="error">
<el-step title="已完成"></el-step>
<el-step title="审核失败"></el-step>
<el-step title="步骤 3"></el-step>
</el-steps>
```
## API
### Steps.props
### Steps Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| space | 每个 step 的间距，不填写将自适应间距 | Number | | |
| direction | 显示方向 | String | `vertical` `horizontal` | `horizontal` |
| active | 设置当前激活步骤 | Number | | 0 |
| process-status | 设置当前步骤的状态 | String | `wait` `process` `finish` `error` `success` | `process` |
| finish-status | 设置结束步骤的状态 | String | `wait` `process` `finish` `error` `success` | `finish` |
| direction | 显示方向 | string | 'vertical', 'horizontal' | 'horizontal' |
| active | 设置当前激活步骤 | number | | 0 |
| process-status | 设置当前步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'process' |
| finish-status | 设置结束步骤的状态 | string | 'wait', 'process', 'finish', 'error', 'success' | 'finish' |
### Step.props
### Step Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| title | 标题 | String | | |
| description | 描述性文字 | String | | |
| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | String | |
| title | 标题 | string | | |
| description | 描述性文字 | string | | |
| icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | |
### Step.slot
### Step Slot
| name | 说明 |
|----|----|
| icon | 图标 |
| title | 标题 |
| description | 描述性文字 |
examples/docs/table.md
View file @ 8c71f100
......@@ -87,6 +87,10 @@
handleMultipleSelectionChange(val) {
this.multipleSelection = val;
},
formatter(row, column) {
return row.address;
}
},
......@@ -104,6 +108,10 @@
## 基础表格
在 Table 组件中，只要在`el-table`元素中注入`data`对象数组后在`el-table-column`中用`property`属性来对应对象中的键名即可填入数据，用`label`属性来定义表格的列名。
在下例中，我们还用了`width`属性来定义列宽：
<el-table :data="tableData" style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
......@@ -148,6 +156,8 @@
## 带斑马纹表格
`stripe`属性可以创建带斑马纹的表格，效果如下例，它接受一个`Boolean`，默认为`false`，设置为`true`即为启用。
<el-table :data="tableData" stripe style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
......@@ -192,6 +202,8 @@
## 带边框表格
默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用`border`属性，它接受一个`Boolean`，设置为`true`即可启用。
<el-table :data="tableData" border style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
......@@ -236,6 +248,8 @@
## 带状态表格
通过在`data`对象数组中加入字段，可以给行加上状态，Element 提供了四种状态：`$positive`、`$info`、`$warning`以及`$negative`，在对象新增字段中把状态设为`true`表示启用该状态。
<el-table :data="tableData2" style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
......@@ -282,6 +296,8 @@
## 固定表头
只要在`el-table`元素中定义了`height`属性，即可实现固定表头的表格，而不需要额外的代码，下例是一个固定表头的表格：
<el-table :data="tableData3" height="250" border style="width: 520px">
<el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
......@@ -337,6 +353,8 @@
```
## 固定列
除了固定头以外，固定列也十分方便，只需要使用`fixed-column-count`属性即可，它接受一个`Number`，表示左起要固定的列数，下例展示了如何使用：
<el-table :data="tableData" :fixed-column-count="1" border style="width: 500px">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="300"></el-table-column>
......@@ -380,6 +398,9 @@
```
## 固定列和表头
固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可，下例是一个联用的样例：
<el-table :data="tableData3" :fixed-column-count="1" border style="width: 500px" height="250">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="300"></el-table-column>
......@@ -436,7 +457,16 @@
## 单选
更方便的是，Table 组件默认提供了选择的支持，只需要配置`selection-mode`属性即可实现单选（`single`）、多选（`multiple`)，如果不需要则设置为`none`即可。
之后由`selectionchange`事件来管理选中时触发的事件，它会传入一个`value`，`value`为生成表格时的对应对象。
在下例中还使用了`allow-no-selection`属性，它接受一个`Boolean`，为`true`，则允许为空，默认为`false`，此时将会产生默认值，为填入数组的第一个对象。
如果需要显示索引，可以增加一列`el-table-column`，设置`type`属性为`index`即可显示从 1 开始的索引号。
<el-table :data="tableData" selection-mode="single" @selectionchange="handleSelectionChange" style="width: 520px" allow-no-selection>
<el-table-column type="index" width="50"></el-table-column>
<el-table-column property="date" label="日期" width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
......@@ -488,25 +518,33 @@
## 多选
除了`selection-mode`的设置外，多选与单选并没有太大差别，只是传入`selectionchange`的事件中，我们提供的参数从对象变成了对象数组。
此外，需要提供一个栏目来显示多选框，手动添加一列，设`type`属性为`selection`即可。
在下例中，为了方便说明其他属性，我们还使用了`inline-template`和`show-tooltip-when-overflow`属性，设置了`inline-template`属性后，可以通过调用`row`对象中的值取代`property`属性的设置。
而如果设置了宽度，默认情况无法完整显示的内容会被隐藏，可以使用`show-tooltip-when-overflow`属性，它接受一个`Boolean`，为`true`时当 hover 在指定内容上就会显示完整内容。
<el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column inline-template property="date" label="日期" width="120">
<el-table-column inline-template label="日期" width="120">
<div>{{ row.date }}</div>
</el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
<el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
</el-table>
<p>{{ multipleSelection }}</p>
```html
<template>
<el-table :data="tableData3" selection-mode="multiple" @selectionchange="handleSelectionChange">
<el-table :data="tableData3" selection-mode="multiple" style="width: 520px" @selectionchange="handleMultipleSelectionChange">
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column inline-template property="date" label="日期" width="120">
<el-table-column inline-template label="日期" width="120">
<div>{{ row.date }}</div>
</el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
<el-table-column property="address" label="地址" show-tooltip-when-overflow></el-table-column>
</el-table>
</template>
......@@ -558,10 +596,14 @@
## 排序
Table 组件中，只要在列中设置`sortable`属性即可实现以该列为基准的排序，接受一个`Boolean`，默认为`false`。
在下例中，我们还使用了`formatter`属性，它用于格式化指定列的值，接受一个`Function`，会传入两个参数：`row`和`column`，可以根据自己的需求进行处理。
<el-table :data="tableData" border style="width: 520px">
<el-table-column property="date" label="日期" sortable width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
<el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
</el-table>
```html
......@@ -569,7 +611,7 @@
<el-table :data="tableData" border style="width: 520px">
<el-table-column property="date" label="日期" sortable width="120"></el-table-column>
<el-table-column property="name" label="姓名" width="120"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
<el-table-column property="address" label="地址" :formatter="formatter"></el-table-column>
</el-table>
</template>
......@@ -595,23 +637,28 @@
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
formatter(row, column) {
return row.address;
}
}
}
</script>
```
## el-table API
## Table Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| data | 显示的数据 | array | | |
| height | table 的高度，默认高度为空，即自动高度 | string | | '' |
| stripe | 是否为斑马纹 table | boolean | | false |
| border | 是否带有纵向边框 | boolean | | false |
| selectionMode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
| allowNoSelection | 单选模式是否允许选项为空 | boolean | | false |
| fixedColumnCount | 固定列的个数 | number | | 0 |
| selection-mode | 列表项选择模式 | string | 'single', 'multiple', 'none' | 'none' |
| allow-no-selection | 单选模式是否允许选项为空 | boolean | | false |
| fixed-column-count | 固定列的个数 | number | | 0 |
## el-table 事件
## Table Events
| 事件名 | 说明 | 参数 |
| ---- | ---- | ---- |
| selectionchange | 当选择项发生变化时会触发该事件 | selected |
......@@ -619,7 +666,7 @@
| cellmouseleave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
| cellclick | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
## el-table-column API
## Table-column Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| label | 显示的标题 | string | | '' |
......@@ -630,4 +677,3 @@
| formatter | 用来格式化内容，在 formatter 执行的时候，会传入 row 和 column | function | | |
| show-tooltip-when-overflow | 当过长被隐藏时显示 tooltip | Boolean | | false |
| inline-template | 指定该属性后可以自定义 column 模板，参考多选的时间列，通过 row 获取行信息。此时不需要配置 property 属性 | | |
examples/docs/tabs.md
View file @ 8c71f100
......@@ -15,9 +15,17 @@
title: '选项卡四',
content: '选项卡四内容'
}],
activeName: '3',
activeName: 'two',
activeName2: ''
}
},
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab, event) {
console.log(tab, event);
}
}
}
</script>
......@@ -29,25 +37,44 @@
## 基础使用
Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-tab-pane`即可，在两个元素中，我们分别提供了一系列的属性来方便使用，`el-tab-pane`中`label`决定了选项卡标题，标签内部写入内容即可。
在下例中我们在`el-tabs`中设置了`active-name`属性，接受一个`String`值，表明选中的选项卡，在`el-tab-pane`中可以设置对应的`name`属性，如果没有设置`name`，则默认值为顺序的`1`/`2`/`3`/`4`。
下例会选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
<div>
<el-tabs :active-name="activeName">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>
</div>
```html
<el-tabs :active-name="activeName">
<template>
<el-tabs :active-name="activeName">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>
</el-tabs>
</template>
<script>
export default {
data() {
return {
activeName: 'two'
};
}
};
</script>
```
## 标签风格
## 多种风格
除了上例中的风格外，我们还提供了标签和卡片两种风格，只需要设置`type`属性即可，如果需要标签风格，将其设置为`card`，卡片风格，则为`border-card`。
<div>
<el-tabs type="card">
......@@ -67,20 +94,17 @@
</el-tabs>
```
## 可关闭的标签
<div>
<el-tabs type="card" :closable="true">
<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>
</div>
{{activeName2}}
```html
<el-tabs type="card" :closable="true">
<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
......@@ -88,10 +112,14 @@
</el-tabs>
```
## 卡片风格
## 可关闭的标签
在`el-tabs`中设置`closable`属性，接受一个`Boolean`，设置为`true`时为可关闭。
除此以外，我们在`el-tabs`中准备了两个钩子，用于在 Tab 被选中时和被删除时自定义属性：`on-click`和`on-remove`，接受`Function`，它们都提供一个参数`tab`，为操作的目标标签。
<div>
<el-tabs type="border-card">
<el-tabs type="card" :closable="true" @tab-click="handleClick" @tab-remove="handleRemove">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
......@@ -100,26 +128,43 @@
</div>
```html
<el-tabs type="border-card">
<template>
<el-tabs type="card" :closable="true" :on-click="handleClick" :on-remove="handleRemove">
<el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
<el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
<el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
<el-tab-pane label="选项卡四">选项卡四内容</el-tab-pane>
</el-tabs>
</el-tabs>
</template>
<script>
export default {
methods: {
handleRemove(tab) {
console.log(tab);
},
handleClick(tab) {
console.log(tab);
}
}
};
</script>
```
## TABS API
## Tabs Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| type | 风格类型 | string | card, border-card | |
| closable | 真实值 | boolean | true, false | false |
| defaultActiveName | 如果没有设置 activeName, 则使用该值 | string | | 第一个面板 |
| activeName | 当前选中面板的 name | string | | |
| tab.click | tab 被点击的回调 | string | | |
| tab.remove | tab 被删除的回调 | string | | |
| closable | 标签是否可关闭 | boolean | true, false | false |
| active-name | 选中选项卡的 name | string | | |
## Tabs Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| tab-click | tab 被选中的钩子 | 被选中的标签 tab |
| tab-remove | tab 被删除的钩子 | 被删除的标签 tab |
## TAB-PANE API
## Tab-pane Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| label | 选项卡标题 | string | | |
| name | 与选项卡 activeName 对应的标识符 | string | | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' |
| name | 与选项卡 activeName 对应的标识符，表示选项卡别名 | string | | 该选项卡在选项卡中的 name 值，如第一个选项卡则为'1' |
examples/docs/tooltip.md
View file @ 8c71f100
......@@ -21,7 +21,7 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
三种箭头方位：`start`, `end`，默认为空
如`top center`即`placement="top"`，`left top`即`placement="left-start"`。
如`top center`即`placement="top"`，`left top`即`placement="left-end"`。
下面是完整的九个示例，可以通过该示例来理解上面的说明，选择你要的效果：
......@@ -56,47 +56,47 @@ Tooltip 组件常用于展示鼠标 hover 时的提示信息，在这里我们
<div class="box">
<div class="top">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-end">
<el-button>上左</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">
<el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-start">
<el-button>上右</el-button>
</el-tooltip>
</div>
<div class="left">
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">
<el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-end">
<el-button>左上</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">
<el-button>左边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">
<el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-start">
<el-button>左下</el-button>
</el-tooltip>
</div>
<div class="right">
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">
<el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-end">
<el-button>右上</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">
<el-button>右边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">
<el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-start">
<el-button>右下</el-button>
</el-tooltip>
</div>
<div class="bottom">
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">
<el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-end">
<el-button>下左</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">
<el-button>下边</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">
<el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-start">
<el-button>下右</el-button>
</el-tooltip>
</div>
......
examples/docs/tree.md
View file @ 8c71f100
......@@ -58,6 +58,7 @@
},
loadNode(node, resolve) {
console.log(node);
if (node.level === -1) {
return resolve([{ name: 'Root1' }, { name: 'Root2' }]);
}
......
examples/entry.js
View file @ 8c71f100
......@@ -4,9 +4,17 @@ import VueRouter from 'vue-router';
import configRouter from './route.config';
import Element from 'main/index.js';
import 'packages/theme-default/src/index.css';
import demoBlock from './components/demo-block.vue';
import MainFooter from './components/footer.vue';
import MainHeader from './components/header.vue';
import SideNav from './components/side-nav';
Vue.use(Element);
Vue.use(VueRouter);
Vue.component('demo-block', demoBlock);
Vue.component('main-footer', MainFooter);
Vue.component('main-header', MainHeader);
Vue.component('side-nav', SideNav);
const router = new VueRouter({
base: __dirname,
......
examples/index.template.html
View file @ 8c71f100
......@@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1471936010_8874195.css">
<title>ELEMENT</title>
</head>
<body>
......
examples/nav.config.json
View file @ 8c71f100
[
{
"group": "Basic",
"name": "基础组件",
"groups": [{
"groupName": "Basic",
"list": [
{
"path": "/button",
"path": "/layout",
"name": "按钮 (button)",
"title": "Button 按钮",
"description": "常用的操作按钮"
"title": "Layout 布局",
"description": ""
},
{
"path": "/icon",
......@@ -14,10 +16,10 @@
"title": "Icon 图标"
},
{
"path": "/tag",
"name": "标签 (tag)",
"title": "Tag 标签",
"description": "Tag 标签"
"path": "/button",
"name": "按钮 (button)",
"title": "Button 按钮",
"description": "常用的操作按钮"
},
{
"path": "/dialog",
......@@ -30,18 +32,6 @@
"name": "弹框 (message-box)",
"title": "message-box 弹框"
},
{
"path": "/popover",
"name": "弹出框 (popover)",
"title": "popover 弹出框",
"description": "收纳具体内容和相关操作, 激活后弹出展现"
},
{
"path": "/tooltip",
"name": "文字提示 (tooltip)",
"title": "tooltip 文字提示",
"description": "优雅地展示文字提示信息"
},
{
"path": "/alert",
"name": "警告 (alert)",
......@@ -75,18 +65,13 @@
]
},
{
"group": "Form",
"groupName": "Form",
"list": [
{
"path": "/autocomplete",
"name": "自动完成 (autocomplete)",
"title": "Autocomplete 自动完成"
},
{
"path": "/select",
"name": "选择器 (select)",
"title": "Select 选择器",
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
"path": "/radio",
"name": "单选框 (radio)",
"title": "Radio 单选框",
"description": "用于在多个备选项选中单个选项。"
},
{
"path": "/checkbox",
......@@ -94,12 +79,6 @@
"title": "Checkbox 多选框",
"description": "用于在多个可选项中进行多项选择。"
},
{
"path": "/radio",
"name": "单选框 (radio)",
"title": "Radio 单选框",
"description": "用于在多个备选项选中单个选项。"
},
{
"path": "/input",
"name": "输入框 (input)",
......@@ -110,109 +89,110 @@
"name": "计数器 (input-number)",
"title": "Input Number 计数器"
},
{
"path": "/select",
"name": "选择器 (select)",
"title": "Select 选择器",
"description": "当选项过多时, 使用下拉菜单展示并选择内容"
},
{
"path": "/switch",
"name": "开关 (switch)",
"title": "Switch 开关",
"description": "用于两种对立状态的切换。"
},
{
"path": "/slider",
"name": "滑块 (slider)",
"title": "Slider 滑块",
"description": "通过拖动滑块在一个固定区间内进行选择"
},
{
"path": "/time-picker",
"name": "时间选择器（time-picker）",
"title": "时间选择器",
"title": "TimePicker 时间选择器",
"description": "用于选择或输入时间"
},
{
"path": "/date-picker",
"name": "日期选择器（date-picker）",
"title": "日期选择器",
"title": "DatePicker",
"description": "用于选择或输入时间"
},
{
"path": "/datetime-picker",
"name": "日期时间选择器",
"title": "日期时间选择器",
"title": "DatetimePicker",
"description": "用于选择或输入日期时间"
},
{
"path": "/upload",
"name": "上传 (upload)",
"title": "upload 上传",
"title": "Upload 上传",
"description": "文件上传组件"
},
{
"path": "/form",
"name": "表单 (form)",
"title": "form 表单",
"title": "Form 表单",
"description": "一个多功能的并带有字段验证的表单组件"
},
{
"path": "/slider",
"name": "滑块 (slider)",
"title": "slider 滑块",
"description": "通过拖动滑块在一个固定区间内进行选择"
"path": "/autocomplete",
"name": "自动完成 (autocomplete)",
"title": "Autocomplete 自动完成"
},
{
"path": "/rate",
"name": "评分 (rate)",
"title": "评分组件"
"title": "Rate 评分组件"
}
]
},
{
"group": "Nav",
"groupName": "Data",
"list": [
{
"path": "/tabs",
"name": "标签页 (tabs)",
"title": "tabs 标签页",
"description": "富展现的标签页"
},
{
"path": "/breadcrumb",
"name": "面包屑 (breadcrumb)",
"title": "breadcrumb 面包屑",
"description": ""
"path": "/table",
"name": "表格 (table)",
"title": "Table 表格",
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
},
{
"path": "/dropdown",
"name": "下拉菜单 (dropdown)",
"title": "Dropdown 下拉菜单"
"path": "/tag",
"name": "标签 (tag)",
"title": "Tag 标签",
"description": "Tag 标签"
},
{
"path": "/steps",
"name": "步骤条 (steps)",
"title": "Steps 步骤",
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
}
]
"path": "/tooltip",
"name": "文字提示 (tooltip)",
"title": "Tooltip 文字提示",
"description": "优雅地展示文字提示信息"
},
{
"group": "Data",
"list": [
{
"path": "/table",
"name": "表格 (table)",
"title": "Table 表格",
"description": "用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。"
"path": "/popover",
"name": "弹出框 (popover)",
"title": "Popover 弹出框",
"description": "收纳具体内容和相关操作, 激活后弹出展现"
},
{
"path": "/progress",
"name": "进度条 (progress)",
"title": "progress 进度条",
"title": "Progress 进度条",
"description": ""
},
{
"path": "/tree",
"name": "tree (tree)",
"title": "Tree 树形控件"
},
{
"path": "/pagination",
"name": "分页 (pagination)",
"title": "Pagination 分页",
"description": "当数据量过多时, 使用分页分解数据"
},
{
"path": "/tree",
"name": "tree (tree)",
"title": "tree"
},
{
"path": "/badge",
"name": "标记 (badge)",
......@@ -222,16 +202,42 @@
]
},
{
"group": "使用说明",
"groupName": "Nav",
"list": [
{
"path": "/quickstart",
"name": "快速上手"
"path": "/tabs",
"name": "标签页 (tabs)",
"title": "Tabs 标签页",
"description": "富展现的标签页"
},
{
"path": "/development",
"name": "开发指南"
"path": "/breadcrumb",
"name": "面包屑 (breadcrumb)",
"title": "Breadcrumb 面包屑",
"description": ""
},
{
"path": "/dropdown",
"name": "下拉菜单 (dropdown)",
"title": "Dropdown 下拉菜单"
},
{
"path": "/steps",
"name": "步骤条 (steps)",
"title": "Steps 步骤",
"description": "引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。"
}
]
}]
},
{
"name": "安装指南",
"children": [{
"path": "/quickstart",
"name": "快速上手"
}, {
"path": "/development",
"name": "开发指南"
}]
}
]
examples/pages/component.vue
View file @ 8c71f100
<style>
.page-component {
padding: 50px 0 95px;
}
.el-col {
box-sizing: border-box;
}
.page-component .content > {
h2, h3, h4, h5 {
font-weight: normal;
color: #1f2f3d;
}
h2 {
margin: 0;
font-size: 28px;
}
h3 {
margin: 45px 0 15px;
font-size: 22px;
}
p {
font-size: 14px;
color: #5e6d82;
}
table {
width: 100%;
background-color: #fff;
color: #5e6d82;
font-size: 14px;
strong {
font-weight: normal;
}
th {
text-align: left;
}
td, th {
border-bottom: 1px solid #eaeefb;
padding: 10px 0;
}
}
}
</style>
<template>
<router-view></router-view>
<div class="page-component container">
<el-row :gutter="25">
<el-col :span="6">
<side-nav :data="navsData" base="/component"></side-nav>
</el-col>
<el-col :span="18">
<router-view class="content"></router-view>
</el-col>
</el-row>
</div>
</template>
<script>
import { navs } from '../route.config';
export default {
data() {
return {
navsData: navs
};
}
};
</script>
examples/pages/design.vue
View file @ 8c71f100
<style scoped>
.cards {
margin-bottom: 70px;
}
.card {
background: #fbfcfd;
height: 204px;
text-align: center;
img {
margin: 40px auto 25px;
}
h4 {
font-size: 18px;
color: #1f2d3d;
font-weight: normal;
margin: 0;
}
span {
font-size: 14px;
color: #99a9bf;
}
}
</style>
<template>
<div>design</div>
<div>
<h2>设计原则</h2>
<el-row :gutter="14" class="cards">
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/yizhi.svg" alt="Consistency">
<h4>一致</h4>
<span>Consistency</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/fankui.svg" alt="Feedback">
<h4>反馈</h4>
<span>Feedback</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/xiaolv.svg" alt="Efficiency">
<h4>效率</h4>
<span>Efficiency</span>
</div>
</el-col>
<el-col :span="6">
<div class="card">
<img src="~examples/assets/images/kekong.svg" alt="Controllability">
<h4>可控</h4>
<span>Controllability</span>
</ul>
</el-col>
</el-row>
<h3>一致性 Consistency</h3>
<ul>
<li><strong>与现实生活一致：</strong>与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</li>
<li><strong>在界面中一致：</strong>所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</li>
</ul>
<h3>反馈 Feedback</h3>
<ul>
<li><strong>控制反馈：</strong>通过界面样式和交互动效让用户可以清晰的感知自己的操作；</li>
<li><strong>页面反馈：</strong>操作后，通过页面元素的变化清晰地展现当前状态。</li>
</ul>
<h3>效率 Efficiency</h3>
<ul>
<li><strong>简化流程：</strong>设计简洁直观的操作流程；</li>
<li><strong>清晰明确：</strong>语言表达清晰且表意明确，让用户快速理解进而作出决策；</li>
<li><strong>帮助用户识别：</strong>界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</li>
</ul>
<h3>可控 Controllability</h3>
<ul>
<li><strong>用户决策：</strong>根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</li>
<li><strong>结果可控：</strong>用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</li>
</ul>
</div>
</template>
examples/pages/guide.vue
View file @ 8c71f100
<style>
.el-col {
box-sizing: border-box;
}
.page-guide {
padding: 50px 0 95px;
.content {
padding-left: 25px;
border-left: 1px solid #eaeefa;
margin-left: -1px;
h3 {
font-size: 22px;
font-weight: normal;
margin: 0 0 30px;
color: #1f2d3d;
}
p {
font-size: 14px;
color: #5e6d82;
}
ul {
margin-bottom: 50px;
padding-left: 0;
}
li {
font-size: 14px;
margin-bottom: 10px;
color: #99a9bf;
list-style: none;
&:before {
content: '';
display: inline-block;
width: 4px;
height: @width;
border-radius: 50%;
vertical-align: middle;
background-color: #5e6d82;
margin-right: 5px;
}
strong {
color: #5e6d82;
font-weight: 400;
}
}
}
}
</style>
<template>
<router-view></router-view>
<div class="page-guide container">
<el-row>
<el-col :span="5">
<side-nav :data="navsData" base="/guide"></side-nav>
</el-col>
<el-col :span="19">
<router-view class="content"></router-view>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
navsData: [
{
path: '/design',
name: '设计原则'
},
{
path: '/nav',
name: '导航'
}
]
};
}
};
</script>
examples/pages/index.vue 0 → 100644
View file @ 8c71f100
<style scoped>
.banner {
height: 420px;
background-color: #20a0ff;
color: #fff;
margin-bottom: 130px;
.container {
position: relative;
}
img {
position: absolute;
top: 15px;
right: -105px;
}
}
.banner-desc {
padding-top: 80px;
font-size: 46px;
position: relative;
z-index: 10;
h2 {
font-size: 80px;
margin: 0;
}
}
.cards {
margin: 0 auto 110px;
width: 960px;
.container {
@utils-clearfix;
padding: 0;
margin: 0 -11px;
width: auto;
}
li {
width: 33.33333%;
padding: 0 11px;
box-sizing: border-box;
float: left;
list-style: none;
}
}
.card {
height: 430px;
width: 100%;
background:#ffffff;
border:1px solid #eaeefb;
border-radius:5px;
box-sizing: border-box;
text-align: center;
position: relative;
transition: bottom .3s;
bottom: 0;
img {
margin: 66px auto 60px;
}
h3 {
margin: 0;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 25px;
}
a {
height: 53px;
line-height: 52px;
font-size: 14px;
color: #20a0ff;
text-align: center;
border: 0;
border-top: 1px solid #eaeefb;
padding: 0;
cursor: pointer;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
border-radius: 0 0 5px 5px;
box-shadow:0px 6px 18px 0px rgba(232,237,250,0.50);
transition: all .3s;
text-decoration: none;
display: block;
&:hover {
background-color: #20a0ff;
color: #fff;
background: #20a0ff;
}
}
&:hover {
bottom: 6px;
}
}
</style>
<template>
<div>
<div class="banner">
<div class="container">
<div class="banner-desc">
<h2>Element</h2>
<div id="source" style="display: none;" ref="type-source">
快速搭建页面<br/>只为这样的你:<span data-type="back" ref="type-job">设计师</span>
</div>
<div id="output-wrap">
<span id="output" ref="type-output"></span>
<span class="typing-cursor typing-cursor-white">|</span>
</div>
</div>
<img src="~examples/assets/images/banner-bg.svg" alt="Element">
</div>
</div>
<div class="cards">
<ul class="container">
<li>
<div class="card">
<img src="~examples/assets/images/zujian.svg" alt="">
<h3>指南</h3>
<p>了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。</p>
<router-link
active-class="active"
to="/guide/design"
exact>查看详情
</router-link>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/zhinan.svg" alt="">
<h3>组件</h3>
<p>使用组件 Demo 快速体验交互细节;使用前端框架封装的代码帮助工程师快速开发。</p>
<router-link
active-class="active"
to="/component/button"
exact>查看详情
</router-link>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/ziyuan.svg" alt="">
<h3>资源</h3>
<p>下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。</p>
<router-link
active-class="active"
to="/resource"
exact>查看详情
</router-link>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
import Typing from 'typing.js';
require('typing.js/typing.css');
export default {
mounted() {
var typing = new Typing({
source: this.$refs['type-source'],
output: this.$refs['type-output'],
delay: 80,
done: function() {}
});
typing.start();
}
};
</script>
examples/pages/nav.vue
View file @ 8c71f100
<style scoped>
h3 {
margin-bottom: 15px;
}
.block {
margin-bottom: 55px;
}
p {
margin: 0 0 15px;
}
.nav-demos {
p {
margin-bottom: 50px;
}
h5 {
margin: 0;
}
img {
width: 100%;
margin-bottom: 15px;
cursor: pointer;
}
}
.dialog-img {
position: fixed;
overflow: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
-webkit-overflow-scrolling: touch;
outline: 0;
.imgWrap {
margin: 0 auto;
position: relative;
top: 100px;
padding-bottom: 50px;
}
img {
display: block;
width: 100%;
}
}
.mask {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #373737;
background-color: rgba(55, 55, 55, 0.6);
height: 100%;
z-index: 1000;
}
.zoom-enter-active,
.zoom-leave-active {
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
}
.zoom-enter,
.zoom-leave-active {
transform: scale(0);
opacity: 0;
}
</style>
<template>
<div>nav</div>
<div>
<h2>导航</h2>
<div class="block">
<p>导航可以解决用户在访问页面时：在哪里，去哪里，怎p去的问题。一般导航会有「侧栏导航」和「顶部导航」2种类型。</p>
</div>
<div class="block">
<h3>选择合适的导航</h3>
<p>选择合适的导航可以让用户在产品的使用过程中非常流畅,相反若是不合适就会引起用户操作不适(方向不明确)，以下是「侧栏导航」和 「顶部导航」的区别。</p>
</div>
<div class="block">
<h3>侧栏导航</h3>
<el-row :gutter="20">
<el-col :span="9">
<p>可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。</p>
</el-col>
<el-col :span="15" class="nav-demos">
<img src="~examples/assets/images/navbar_1.png" alt="一级类目" @click="enlarge(846, $event)">
<h5>一级类目</h5>
<p>适用于结构简单的网站：只有一级页面时，不需要使用面包屑。</p>
<img src="~examples/assets/images/navbar_2.png" alt="二级类目" @click="enlarge(846, $event)">
<h5>二级类目</h5>
<p>侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。</p>
<img src="~examples/assets/images/navbar_3.png" alt="三级类目" @click="enlarge(846, $event)">
<h5>三级类目</h5>
<p>适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。</p>
</el-col>
</el-row>
</div>
<div class="block">
<h3>顶部导航</h3>
<el-row>
<el-col :span="10">
<p>顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。</p>
</el-col>
<el-col :span="14" class="nav-demos">
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
<p>适用于导航较少，页面篇幅较长的网站；</p>
</el-col>
</el-row>
</div>
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
<div class="dialog-img" v-show="showDialog" @click="showDialog = false">
<transition name="zoom">
<div class="imgWrap" :style="imgStyle" v-show="showDialog">
<img src="~examples/assets/images/navbar_2.png" alt="">
</div>
</transition>
</div>
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: '',
imgBound: {},
showDialog: false,
imgStyle: {}
};
},
watch: {
showDialog(val) {
document.body.style.overflow = val ? 'hidden' : '';
}
},
methods: {
enlarge(imgWidth, ev) {
var imgNode = ev.target;
// var bound = imgNode.getBoundingClientRect();
var offset = {};
var doc = document;
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
offset.top = 100;
this.imgUrl = imgNode.src;
this.imgBound = imgNode.getBoundingClientRect();
this.imgStyle.transformOrigin = `${ev.clientX - offset.left}px ${ev.clientY - offset.top}px`;
this.imgStyle.width = imgWidth + 'px';
this.showDialog = true;
}
}
};
</script>
examples/pages/resource.vue
View file @ 8c71f100
<style scoped>
.page-resource {
padding-top: 40px;
}
.cards {
margin: 35px auto 110px;
.container {
@utils-clearfix;
padding: 0;
margin: 0 -11px;
width: auto;
}
li {
width: 33.33333%;
padding: 0 11px;
box-sizing: border-box;
float: left;
list-style: none;
}
}
.card {
height: 394px;
width: 100%;
background:#ffffff;
border:1px solid #eaeefb;
border-radius:5px;
box-sizing: border-box;
text-align: center;
position: relative;
transition: bottom .3s;
bottom: 0;
img {
margin: 75px auto 35px;
}
h3 {
margin: 0 0 10px;
font-size: 18px;
color: #1f2f3d;
font-weight: normal;
}
p {
font-size: 14px;
color: #99a9bf;
padding: 0 30px;
margin: 0;
}
a {
height: 42px;
width: 190px;
display: inline-block;
line-height: @height;
font-size: 14px;
background-color: #20a0ff;
color: #fff;
text-align: center;
border: 0;
padding: 0;
cursor: pointer;
border-radius: 2px;
transition: all .3s;
text-decoration: none;
margin-top: 20px;
}
}
</style>
<template>
<div>resource</div>
<div class="page-resource container">
<h2>资源</h2>
<p>这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。</p>
<div class="cards">
<ul class="container">
<li>
<div class="card">
<img src="~examples/assets/images/Axure-Components.svg" alt="">
<h3>Axure Components</h3>
<p>通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件</p>
<a href="">下载</a>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
<h3>Sketch Template</h3>
<p>从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格</p>
<a href="">下载</a>
</div>
</li>
<li>
<div class="card">
<img src="~examples/assets/images/Module.svg" alt="">
<h3>组件交互文档</h3>
<p>进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节</p>
<a href="">下载</a>
</div>
</li>
</ul>
</div>
</div>
</template>
examples/route.config.js
View file @ 8c71f100
......@@ -6,9 +6,7 @@ const registerRoute = (config) => {
component: require('./pages/component.vue'),
children: []
}];
config
.map(nav =>
nav.list.map(page => {
function addRoute(page) {
const component = require(`./docs${page.path}.md`);
route[0].children.push({
......@@ -19,8 +17,22 @@ const registerRoute = (config) => {
},
component: component.default || component
});
})
);
}
config
.map(nav => {
if (nav.groups) {
nav.groups.map(group => {
group.list.map(page => {
addRoute(page);
});
});
}
if (nav.children) {
nav.children.map(page => {
addRoute(page);
});
}
});
return { route, navs: config };
};
......@@ -48,12 +60,18 @@ let resourceRoute = {
component: require('./pages/resource.vue')
};
let indexRoute = {
path: '/',
name: '首页',
component: require('./pages/index.vue')
};
let changeLogRoute = {
path: '/changelog',
component: require('./pages/changelog.vue')
};
route.route = route.route.concat([guideRoute, resourceRoute, changeLogRoute]);
route.route = route.route.concat([indexRoute, guideRoute, resourceRoute, changeLogRoute]);
route.route.push({
path: '*',
......
package.json
View file @ 8c71f100
......@@ -27,7 +27,8 @@
"url": "https://github.com/eleme/element-ui/issues"
},
"dependencies": {
"object-assign": "^4.1.0"
"object-assign": "^4.1.0",
"typing.js": "^2.1.0"
},
"devDependencies": {
"babel-helper-vue-jsx-merge-props": "^1.0.1",
......@@ -44,6 +45,7 @@
"oui-dom-events": "^0.2.1",
"postcss": "^5.0.21",
"purecss": "^0.6.0",
"strip-tags": "^0.1.1",
"uppercamelcase": "^1.1.0",
"vue": "^2.0.0-rc.2",
"vue-loader": "^9.3.2",
......
packages/cascader/src/cascader.vue
View file @ 8c71f100
......@@ -21,7 +21,7 @@
},
directives: {
ElementClickoutside: require('vue-clickoutside')
ElementClickoutside: require('main/utils/clickoutside').default
},
data() {
......
packages/date-picker/src/css/date-picker.css
View file @ 8c71f100
......@@ -35,7 +35,7 @@
@e time-header {
position: relative;
border-bottom: 1px solid var(--datepicker-inner-border-color);
font-size: 0;
font-size: 12px;
padding: 8px 5px 5px 5px;
display: flex;
}
......
packages/date-picker/src/css/date-range-picker.css
View file @ 8c71f100
......@@ -89,7 +89,7 @@
@e time-header {
position: relative;
border-bottom: 1px solid var(--datepicker-inner-border-color);
font-size: 0;
font-size: 12px;
padding: 8px 5px 5px 5px;
display: flex;
......
packages/date-picker/src/css/picker-panel.css
View file @ 8c71f100
......@@ -85,6 +85,7 @@
}
@e link-btn {
cursor: pointer;
color: #55a4ff;
text-decoration: none;
padding: 15px;
......
packages/date-picker/src/panel/date-range.vue
View file @ 8c71f100
......@@ -7,6 +7,7 @@
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
type="button"
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
......@@ -20,7 +21,9 @@
v-model="leftVisibleDate"
@input="handleDateInput($event, 'min')"
@change="handleDateChange($event, 'min')"/>
<span class="el-date-range-picker__time-picker-wrap">
<span
class="el-date-range-picker__time-picker-wrap"
v-clickoutside="closeLeftTimePicker">
<input
placeholder="开始时间"
class="el-date-range-picker__editor"
......@@ -28,10 +31,10 @@
@focus="leftTimePickerVisible = true"
@change="handleTimeChange($event, 'min')"/>
<time-picker
v-ref:lefttimepicker
ref="lefttimepicker"
:date="minDate"
@pick="handleLeftTimePick"
v-show="leftTimePickerVisible">
:visible="leftTimePickerVisible">
</time-picker>
</span>
</span>
......@@ -44,7 +47,9 @@
:readonly="!minDate"
@input="handleDateInput($event, 'max')"
@change="handleDateChange($event, 'max')" />
<span class="el-date-range-picker__time-picker-wrap">
<span
class="el-date-range-picker__time-picker-wrap"
v-clickoutside="closeRightTimePicker">
<input
placeholder="结束时间"
class="el-date-range-picker__editor"
......@@ -53,19 +58,21 @@
:readonly="!minDate"
@change="handleTimeChange($event, 'max')" />
<time-picker
v-ref:righttimepicker
ref="righttimepicker"
:date="maxDate"
@pick="handleRightTimePick"
v-show="rightTimePickerVisible"></time-picker>
:visible="rightTimePickerVisible"></time-picker>
</span>
</span>
</div>
<div class="el-picker-panel__content el-date-range-picker__content is-left">
<div class="el-date-range-picker__header">
<button
type="button"
@click="prevYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
<button
type="button"
@click="prevMonth"
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
<div>{{ leftLabel }}</div>
......@@ -85,9 +92,11 @@
<div class="el-picker-panel__content el-date-range-picker__content is-right">
<div class="el-date-range-picker__header">
<button
type="button"
@click="nextYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
<button
type="button"
@click="nextMonth"
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
<div>{{ rightLabel }}</div>
......@@ -106,11 +115,11 @@
</div>
</div>
<div class="el-picker-panel__footer" v-if="showTime">
<a
href="JavaScript:"
<!-- <a
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
@click="changeToToday">{{ $t('datepicker.today') }}</a> -->
<button
type="button"
class="el-picker-panel__btn"
@click="handleConfirm"
:disabled="btnDisabled">确定</button>
......@@ -237,6 +246,10 @@
}
},
directives: {
Clickoutside: require('main/utils/clickoutside').default
},
data() {
return {
date: new Date(),
......@@ -267,11 +280,11 @@
},
leftTimePickerVisible(val) {
if (val) this.$refs.lefttimepicker.ajustScrollTop();
if (val) this.$nextTick(() => this.$refs.lefttimepicker.ajustScrollTop());
},
rightTimePickerVisible(val) {
if (val) this.$refs.righttimepicker.ajustScrollTop();
if (val) this.$nextTick(() => this.$refs.righttimepicker.ajustScrollTop());
},
value(newVal) {
......@@ -288,6 +301,14 @@
methods: {
$t,
closeLeftTimePicker() {
this.leftTimePickerVisible = false;
},
closeRightTimePicker() {
this.rightTimePickerVisible = false;
},
handleDateInput(event, type) {
const value = event.target.value;
const parsedValue = parseDate(value, 'yyyy-MM-dd');
......@@ -379,37 +400,29 @@
this.rightTimePickerVisible = false;
},
handleLeftTimePick(value) {
if (!this.minDate) {
this.minDate = new Date();
}
this.minDate.setHours(value.getHours());
this.minDate.setMinutes(value.getMinutes());
this.minDate.setSeconds(value.getSeconds());
handleLeftTimePick(value, visible, first) {
this.minDate = value || this.minDate || new Date();
this.minDate = new Date(this.minDate);
this.leftTimePickerVisible = false;
if (!first) {
this.leftTimePickerVisible = visible;
}
},
handleRightTimePick(value) {
handleRightTimePick(value, visible, first) {
if (!this.maxDate) {
const now = new Date();
if (now >= this.minDate) {
this.maxDate = new Date();
} else {
}
}
if (this.maxDate) {
this.maxDate.setHours(value.getHours());
this.maxDate.setMinutes(value.getMinutes());
this.maxDate.setSeconds(value.getSeconds());
this.maxDate = new Date(this.maxDate);
this.maxDate = value;
}
this.rightTimePickerVisible = false;
if (!first) {
this.rightTimePickerVisible = visible;
}
},
prevMonth() {
......
packages/date-picker/src/panel/date.vue
View file @ 8c71f100
......@@ -7,6 +7,7 @@
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
type="button"
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
......@@ -35,10 +36,12 @@
</div>
<div class="el-date-picker__header" v-show="currentView !== 'time'">
<button
type="button"
@click="prevYear"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
</button>
<button
type="button"
@click="prevMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
......@@ -52,10 +55,12 @@
class="el-date-picker__header-label"
:class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
<button
type="button"
@click="nextYear"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
</button>
<button
type="button"
@click="nextMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
......@@ -97,6 +102,7 @@
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
<button
type="button"
class="el-picker-panel__btn"
@click="confirm">{{ $t('datepicker.confirm') }}</button>
</div>
......
packages/date-picker/src/panel/time-range.vue
View file @ 8c71f100
......@@ -35,9 +35,11 @@
</div>
<div class="el-time-panel__footer">
<button
type="button"
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
type="button"
class="el-time-panel__btn confirm"
@click="handleConfirm()"
:disabled="btnDisabled">确定</button>
......
packages/date-picker/src/panel/time.vue
View file @ 8c71f100
<template>
<transition name="md-fade-bottom">
<div
v-show="visible"
v-show="currentVisible"
class="el-time-panel">
<div class="el-time-panel__content">
<time-spinner
......@@ -16,9 +16,11 @@
</div>
<div class="el-time-panel__footer">
<button
type="button"
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
type="button"
class="el-time-panel__btn confirm"
@click="handleConfirm()">确定</button>
</div>
......@@ -40,10 +42,14 @@
default: new Date()
},
visible: false
visible: Boolean
},
watch: {
visible(val) {
this.currentVisible = val;
},
value(newVal) {
let date;
if (newVal instanceof Date) {
......@@ -70,7 +76,9 @@
hours: 0,
minutes: 0,
seconds: 0,
selectableRange: []
selectableRange: [],
currentDate: this.date,
currentVisible: this.visible
};
},
......@@ -87,16 +95,16 @@
handleChange(date) {
if (date.hours !== undefined) {
this.date.setHours(date.hours);
this.hours = this.date.getHours();
this.currentDate.setHours(date.hours);
this.hours = this.currentDate.getHours();
}
if (date.minutes !== undefined) {
this.date.setMinutes(date.minutes);
this.minutes = this.date.getMinutes();
this.currentDate.setMinutes(date.minutes);
this.minutes = this.currentDate.getMinutes();
}
if (date.seconds !== undefined) {
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
this.currentDate.setSeconds(date.seconds);
this.seconds = this.currentDate.getSeconds();
}
this.handleConfirm(true);
......@@ -107,7 +115,7 @@
},
handleConfirm(visible = false, first) {
const date = new Date(limitRange(this.date, this.selectableRange));
const date = new Date(limitRange(this.currentDate, this.selectableRange));
this.$emit('pick', date, visible, first);
},
......@@ -122,12 +130,12 @@
},
created() {
!this.date && Vue.set(this, 'date', new Date());
!this.visible && Vue.set(this, 'visible', false);
!this.currentDate && Vue.set(this, 'currentDate', new Date());
!this.currentVisible && Vue.set(this, 'currentVisible', false);
this.hours = this.date.getHours();
this.minutes = this.date.getMinutes();
this.seconds = this.date.getSeconds();
this.hours = this.currentDate.getHours();
this.minutes = this.currentDate.getMinutes();
this.seconds = this.currentDate.getSeconds();
},
mounted() {
......
packages/date-picker/src/picker.vue
View file @ 8c71f100
......@@ -33,7 +33,7 @@
import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside';
import { merge, formatDate, parseDate, getWeekNumber } from './util';
import Popper from 'main/utils/popper.js';
import Popper from 'main/utils/popper';
const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40];
const RANGE_SEPARATOR = ' - ';
......
packages/dropdown/src/dropdown-menu.vue
View file @ 8c71f100
......@@ -4,7 +4,7 @@
</ul>
</template>
<script>
import Popper from 'main/utils/popper.js';
import Popper from 'main/utils/popper';
export default {
data() {
......
packages/dropdown/src/dropdown.vue
View file @ 8c71f100
......@@ -41,9 +41,7 @@
import ElButton from 'packages/button/index.js';
import ElButtonGroup from 'packages/button-group/index.js';
import ElDropdownMenu from './dropdown-menu.vue';
import Vue from 'vue';
import VueClickoutside from 'main/utils/clickoutside.js';
Vue.use(VueClickoutside);
import Clickoutside from 'main/utils/clickoutside';
export default {
name: 'ElDropdown',
......@@ -54,6 +52,8 @@
ElDropdownMenu
},
directives: { Clickoutside },
props: {
text: String,
type: String,
......
packages/menu-item-group/index.js 0 → 100644
View file @ 8c71f100
const ElMenuItemGroup = require('../menu/src/menu-item-group');
ElMenuItemGroup.install = function(Vue) {
Vue.component(ElMenuItemGroup.name, ElMenuItemGroup);
};
module.exports = ElMenuItemGroup;
packages/menu/src/menu-item-group.vue 0 → 100644
View file @ 8c71f100
<script>
module.exports = {
name: 'el-menu-item-group',
componentName: 'menu-item-group',
props: {
title: {
type: String,
required: true
}
},
data() {
return {
paddingLeft: 15
};
},
computed: {
activeIndex() {
return this.$parent.activeIndex;
}
},
methods: {
initPadding() {
var parent = this.$parent;
var level = 0;
var componentTag = parent.$options._componentTag;
while (componentTag !== 'el-menu') {
if (componentTag === 'el-submenu') {
level++;
}
parent = parent.$parent;
componentTag = parent.$options._componentTag;
}
this.paddingLeft += level * 10;
}
},
mounted() {
this.initPadding();
}
};
</script>
<template>
<li class="el-menu-item-group">
<div class="el-menu-item-group__title" :style="{'padding-left': paddingLeft + 'px'}">{{title}}</div>
<ul>
<slot></slot>
</ul>
</li>
</template>
packages/menu/src/menu.vue
View file @ 8c71f100
......@@ -67,7 +67,7 @@
this.$emit('select', key, keyPath);
if (this.router) {
this.$route.router.go(key);
this.$router.push(key);
}
}
},
......
packages/menu/src/submenu.vue
View file @ 8c71f100
......@@ -55,7 +55,7 @@
<template>
<li class="el-submenu" :class="{'is-opened': opened}">
<div class="el-submenu__title" @click="handleClick">
<div class="el-menu-item el-submenu__title" @click="handleClick">
<slot name="title"></slot>
<i class="el-submenu__icon-arrow el-icon-arrow-up"></i>
</div>
......
packages/radio/src/radio-button.vue
View file @ 8c71f100
......@@ -8,8 +8,12 @@
required: true
},
disabled: Boolean,
name: String,
size: String
name: String
},
data() {
return {
size: this.$parent.size
};
},
computed: {
value: {
......@@ -20,9 +24,6 @@
this.$parent.$emit('input', newValue);
}
}
},
ready() {
this.size = this.$parent.size;
}
};
</script>
......
packages/select-dropdown/src/select-dropdown.vue
View file @ 8c71f100
......@@ -5,7 +5,7 @@
</template>
<script type="text/babel">
import Popper from 'main/utils/popper.js';
import Popper from 'main/utils/popper';
export default {
name: 'el-select-dropdown',
......
packages/select/src/option.vue
View file @ 8c71f100
......@@ -6,7 +6,7 @@
v-show="queryPassed"
:class="{ 'selected': itemSelected, 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
<slot>
<span>{{ label }}</span>
<span>{{ currentLabel }}</span>
</slot>
</li>
</template>
......@@ -40,7 +40,8 @@
return {
index: -1,
queryPassed: true,
hitState: false
hitState: false,
currentLabel: this.label
};
},
......@@ -92,7 +93,7 @@
},
queryChange(query) {
this.queryPassed = new RegExp(query, 'i').test(this.label);
this.queryPassed = new RegExp(query, 'i').test(this.currentLabel);
if (!this.queryPassed) {
this.parent.filteredOptionsCount--;
}
......@@ -106,7 +107,7 @@
},
created() {
this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
this.currentLabel = this.currentLabel || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
this.parent.options.push(this);
this.parent.optionsCount++;
this.parent.filteredOptionsCount++;
......
packages/select/src/select.vue
View file @ 8c71f100
......@@ -9,7 +9,7 @@
:hit="item.hitState"
type="primary"
@click.native="deleteTag($event, item)"
close-transition>{{ item.label }}</el-tag>
close-transition>{{ item.currentLabel }}</el-tag>
</transition-group>
<input
type="text"
......@@ -290,7 +290,7 @@
this.bottomOverflowBeforeHidden = this.selected.$el.getBoundingClientRect().bottom - this.$refs.popper.$el.getBoundingClientRect().bottom;
}
if (this.selected && this.selected.value) {
this.selectedLabel = this.selected.label;
this.selectedLabel = this.selected.currentLabel;
}
}
} else {
......@@ -360,7 +360,7 @@
}
} else {
this.selected = option;
this.selectedLabel = option.label;
this.selectedLabel = option.currentLabel;
this.hoverIndex = option.index;
}
},
......@@ -402,12 +402,12 @@
handleOptionSelect(option) {
if (!this.multiple) {
this.selected = option;
this.selectedLabel = option.label;
this.selectedLabel = option.currentLabel;
this.visible = false;
} else {
let optionIndex = -1;
this.selected.forEach((item, index) => {
if (item === option || item.label === option.label) {
if (item === option || item.currentLabel === option.currentLabel) {
optionIndex = index;
}
});
......
packages/slider/src/main.vue
View file @ 8c71f100
......@@ -27,7 +27,7 @@
</template>
<script type="text/ecmascript-6">
import Popper from 'main/utils/popper.js';
import Popper from 'main/utils/popper';
import ElInputNumber from 'packages/input-number/index.js';
import { getStyle } from 'wind-dom/src/style';
......
packages/steps/src/step.vue
View file @ 8c71f100
......@@ -110,7 +110,7 @@ export default {
if (parent.direction === 'horizontal') {
this.style = { width: space };
this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
// this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
} else {
this.style = { height: space };
}
......
packages/table/src/table-header.js
View file @ 8c71f100
......@@ -45,7 +45,7 @@ export default {
class="gutter"
style={{
width: (this.$parent.showVScrollBar
? this.$parent.gutterWidth
? this.$parent.currentGutterWidth
: 0
) + 'px'
}}>&nbsp;</th>)
......
packages/table/src/table.vue
View file @ 8c71f100
......@@ -5,7 +5,7 @@
<table-header :columns="columns" :all-selected="allSelected" @allselectedchange="handleAllSelectedChange" :selection="selection" :style="{ width: bodyWidth ? bodyWidth + 'px' : '' }" :border="border"></table-header>
</div>
<div class="el-table__body-wrapper">
<table-body :columns="columns" :selection="selection" :data="filterData" :style="{ width: bodyWidth ? bodyWidth - (showVScrollBar ? gutterWidth : 0 ) + 'px' : '' }"></table-body>
<table-body :columns="columns" :selection="selection" :data="filterData" :style="{ width: bodyWidth ? bodyWidth - (showVScrollBar ? currentGutterWidth : 0 ) + 'px' : '' }"></table-body>
</div>
<div class="el-table__fixed" :style="{ width: fixedBodyWidth ? fixedBodyWidth + 'px' : '' }" ref="fixed">
<div class="el-table__fixed-header-wrapper" v-if="fixedColumnCount > 0">
......@@ -160,8 +160,8 @@
}
});
if (bodyMinWidth < bodyWidth - this.gutterWidth) { // do not have scroll bar.
let flexWidthTotal = bodyWidth - this.gutterWidth - columns.length - bodyMinWidth;
if (bodyMinWidth < bodyWidth - this.currentGutterWidth) { // do not have scroll bar.
let flexWidthTotal = bodyWidth - this.currentGutterWidth - columns.length - bodyMinWidth;
let flexWidthPerColumn = Math.floor(flexWidthTotal / flexColumns.length);
let flexWidthFirstColumn = flexWidthTotal - flexWidthPerColumn * flexColumns.length + flexWidthPerColumn;
......@@ -196,6 +196,7 @@
if (this.styleNode) {
let styleSheet = this.styleNode.sheet;
if (!styleSheet) return;
for (let i = 0, j = styleSheet.cssRules.length; i < j; i++) {
styleSheet.deleteRule(0);
}
......@@ -254,7 +255,7 @@
const fixedBodyWrapper = this.$el.querySelector('.el-table__fixed-body-wrapper');
if (fixedBodyWrapper) {
fixedBodyWrapper.style.height = (this.showHScrollBar ? gridWrapper.offsetHeight - this.gutterWidth : gridWrapper.offsetHeight) + 'px';
fixedBodyWrapper.style.height = (this.showHScrollBar ? gridWrapper.offsetHeight - this.currentGutterWidth : gridWrapper.offsetHeight) + 'px';
}
}
},
......@@ -317,7 +318,7 @@
if (GUTTER_WIDTH === undefined) {
GUTTER_WIDTH = getScrollBarWidth();
}
this.gutterWidth = GUTTER_WIDTH;
this.currentGutterWidth = GUTTER_WIDTH;
this.debouncedReRender = debounce(50, () => {
this.doRender();
......@@ -428,7 +429,8 @@
sortingColumn: null,
sortingProperty: null,
sortingDirection: 1,
visibleFilter: null
visibleFilter: null,
currentGutterWidth: this.gutterWidth
};
}
};
......
packages/tabs/src/tab.vue
View file @ 8c71f100
......@@ -24,7 +24,7 @@
<span
class="el-icon-close"
v-if="closable"
@click="$emit('onremove', tab, $event)">
@click="$emit('remove', tab, $event)">
</span>
</div>
</template>
packages/tabs/src/tabs.vue
View file @ 8c71f100
......@@ -11,7 +11,6 @@
props: {
type: String,
tabPosition: String,
defaultActiveName: String,
activeName: String,
closable: false,
tabWidth: 0
......@@ -29,9 +28,9 @@
watch: {
activeName: {
immediate: true,
handler(val) {
this.currentName = val || 0;
var fisrtKey = this.$children[0] && this.$children[0].key || '1';
this.currentName = val || fisrtKey;
}
},
......@@ -41,7 +40,7 @@
},
methods: {
removeTab(tab, ev) {
handleTabRemove(tab, ev) {
ev.stopPropagation();
tab.$destroy(true);
......@@ -58,14 +57,14 @@
this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
}
this.$emit('tab.remove', tab);
this.$emit('tab-remove', tab.key);
},
handleTabClick(tab) {
handleTabClick(tab, event) {
this.currentName = tab.key;
this.$emit('tab.click', tab);
this.$emit('tab-click', tab.key, event);
},
calcBarStyle() {
if (this.type) return {};
calcBarStyle(firstRendering) {
if (this.type || !this.$refs.tabs) return {};
var style = {};
var offset = 0;
var tabWidth = 0;
......@@ -84,16 +83,19 @@
style.width = tabWidth + 'px';
style.transform = `translateX(${offset}px)`;
if (!firstRendering) {
style.transition = 'transform .3s cubic-bezier(.645,.045,.355,1), -webkit-transform .3s cubic-bezier(.645,.045,.355,1)';
}
this.barStyle = style;
}
},
mounted() {
if (!this.currentName) {
this.currentName = this.defaultActiveName || this.$children[0].key;
var fisrtKey = this.$children[0] && this.$children[0].key || '1';
this.currentName = this.activeName || fisrtKey;
}
this.$children.forEach(tab => this.tabs.push(tab));
this.$nextTick(() => this.calcBarStyle());
this.$nextTick(() => this.calcBarStyle(true));
}
};
</script>
......@@ -106,8 +108,8 @@
ref="tabs"
:tab="tab"
:closable="closable"
@onremove="removeTab"
@click.native="handleTabClick(tab)">
@remove="handleTabRemove"
@click.native="handleTabClick(tab, $event)">
</el-tab>
<div
class="el-tabs__active-bar"
......
packages/theme-default/src/common/var.css
View file @ 8c71f100
......@@ -378,4 +378,16 @@
--steps-border-color: var(--disabled-border-base);
--steps-border-radius: 4px;
--steps-padding: 20px;
/*Steps
--------------------------*/
--menu-item-color: #475669;
--menu-item-fill: #eff2f7;
--menu-item-hover-fill: #d3dce6;
--submenu-item-fill: #e5e9f2;
--dark-menu-item-color: #475669;
--dark-menu-item-fill: #324057;
--dark-menu-item-hover-fill: #475669;
--dark-submenu-item-fill: #1f2d3d;
}
packages/theme-default/src/menu.css
View file @ 8c71f100
......@@ -5,12 +5,15 @@
@b menu {
height: 60px;
line-height: 60px;
background-color: #eff2f7;
list-style: none;
position: relative;
margin: 0;
padding-left: 0;
& li {
list-style: none;
}
@m vertical {
height: auto;
......@@ -22,10 +25,9 @@
padding-left: 20px;
cursor: pointer;
position: relative;
color: #475669;
&:hover {
background-color: #d3dce6;
background-color: var(--menu-item-hover-fill);
}
& .el-menu-item__bar {
display: none;
......@@ -36,18 +38,20 @@
}
}
@m dark {
background-color: #324057;
& .el-menu-item,
& .el-submenu__title {
color: #c0ccda;
}
& .el-menu-item {
background-color: var(--dark-menu-item-fill);
}
&.el-menu--vertical {
& .el-menu-item,
& .el-submenu__title {
&:hover {
background-color: #475669;
background-color: var(--dark-menu-item-hover-fill);
}
&.is-active {
background-color: #5e6d82;
......@@ -55,13 +59,15 @@
}
}
}
& .el-submenu .el-menu-item {
background-color: #1f2d3d;
& .el-submenu .el-menu {
background-color: var(--dark-submenu-item-fill);
}
& .el-submenu .el-menu-item:not(.el-submenu__title) {
background-color: transparent;
color: #99a9bf;
&:hover {
background-color: #475669;
background-color: var(--dark-menu-item-hover-fill);
}
&.is-active {
background-color: #5e6d82;
......@@ -71,8 +77,8 @@
}
}
@b menu-item {
font-size: 16px;
color: #475669;
font-size: 14px;
color: var(--menu-item-color);
float: left;
height: 100%;
padding: 0 10px;
......@@ -81,6 +87,7 @@
position: relative;
transition: var(--md-fade-transition);
transform-origin: center center;
background-color: var(--menu-item-fill);
@e bar {
content: '';
......@@ -107,29 +114,20 @@
@b submenu {
& .el-menu {
height: auto;
background-color: darken(#eff2f7, 5%);
background-color: var(--submenu-item-fill);
}
& .el-menu-item {
& .el-menu-item:not(.el-submenu__title) {
padding-left: 46px;
}
@e title {
float: none;
height: 56px;
line-height: 56px;
margin: 0;
padding-left: 20px;
cursor: pointer;
position: relative;
color: #475669;
background-color: transparent;
&:hover {
background-color: #d3dce6;
background-color: var(--menu-item-hover-fill);
}
& [class^="el-icon-"] {
}
@e title [class^="el-icon-"] {
vertical-align: baseline;
margin-right: 10px;
}
}
@e icon-arrow {
position: absolute;
margin: 0;
......@@ -146,4 +144,17 @@
}
}
}
@b menu-item-group {
> ul {
padding: 0;
}
@e title {
padding-top: 15px;
line-height: normal;
font-size: 14px;
padding-left: 25px;
color: #99a9bf;
}
}
}
packages/theme-default/src/step.css
View file @ 8c71f100
......@@ -142,6 +142,7 @@
@e main {
white-space: normal;
padding-right: 10px;
text-align: left;
}
@e title {
......
packages/theme-default/src/steps.css
View file @ 8c71f100
......@@ -3,7 +3,6 @@
@component-namespace el {
@b steps {
overflow: hidden;
font-size: 0;
> :last-child .el-step__line {
......
packages/theme-default/src/tabs.css
View file @ 8c71f100
......@@ -19,7 +19,7 @@
height: 3px;
background-color: var(--color-primary);
z-index: 1;
transition: transform .3s cubic-bezier(.645,.045,.355,1);
/*transition: transform .3s cubic-bezier(.645,.045,.355,1);*/
list-style: none;
}
@e item {
......
scripts/cooking.component.js
View file @ 8c71f100
var cooking = require('cooking');
var path = require('path');
var Components = require('../components.json');
var entries = {};
Object.keys(Components).forEach(function (key) {
const compo = Components[key];
cooking.set({
entry: Components.map(function (compo) {
compo[0] = path.join(process.cwd(), compo[0]);
return compo;
}),
entries[key] = compo;
});
cooking.set({
entry: entries,
dist: './lib',
clean: true,
clean: false,
template: false,
format: 'umd',
moduleName: ['ELEMENT', '[name]'],
format: 'cjs',
extractCSS: '[name]/style.css',
extends: ['vue']
});
......@@ -26,18 +30,11 @@ cooking.add('resolve.alias', {
var externals = {};
Object.keys(Components).forEach(function(key) {
externals[`packages/${key}/index.js`] = {
root: `ELEMENT.${key}`,
commonjs: `element-ui/lib/${key}`,
commonjs2: `element-ui/lib/${key}`,
amd: `element-ui/lib/${key}`
};
externals[`packages/${key}/style.css`] = {
root: `ELEMENT.${key}/style.css`,
commonjs: `element-ui/lib/${key}/style.css`,
commonjs2: `element-ui/lib/${key}/style.css`,
amd: `element-ui/lib/${key}/style.css`
};
externals[`packages/${key}/index.js`] = `element-ui/lib/${key}`;
externals[`packages/${key}/style.css`] = `element-ui/lib/${key}/style.css`;
externals['main/utils/clickoutside'] = 'element-ui/src/utils/clickoutside';
externals['main/utils/popper'] = 'element-ui/src/utils/popper';
externals['main/utils/vue-popper'] = 'element-ui/src/utils/vue-popper';
});
cooking.add('externals', Object.assign({
......
scripts/cooking.demo.js
View file @ 8c71f100
......@@ -2,6 +2,14 @@ var cooking = require('cooking');
var path = require('path');
var md = require('markdown-it')();
var Components = require('../components.json');
var striptags = require('strip-tags');
function convert(str){
str = str.replace(/(&#x)(\w{4});/gi,function($0){
return String.fromCharCode(parseInt(encodeURIComponent($0).replace(/(%26%23x)(\w{4})(%3B)/g,"$2"),16));
});
return str;
}
cooking.set({
entry: {
......@@ -53,24 +61,26 @@ cooking.add('vueMarkdown', {
anchorLinkSymbol: '',
anchorClassName: 'anchor'
}],
[require('markdown-it-container'), 'code', {
[require('markdown-it-container'), 'demo', {
validate: function(params) {
return params.trim().match(/^code\s+(.*)$/);
return params.trim().match(/^demo\s*(.*)$/);
},
render: function (tokens, idx) {
var m = tokens[idx].info.trim().match(/^code\s+(.*)$/);
var m = tokens[idx].info.trim().match(/^demo\s*(.*)$/);
if (tokens[idx].nesting === 1) {
// opening tag
return '<div class="details">' +
`<div class="summary">${md.utils.escapeHtml(m[1])}</div>` +
'<div class="code">';
} else {
// closing tag
return '</div></div>\n';
var description = (m && m.length > 1) ? m[1] : '';
var html = convert(striptags(tokens[idx + 1].content, 'script'));
var descriptionHTML = description
? '<div class="description">' + md.render(description) + '</div>'
: '';
return `<demo-block class="demo-box">
<div class="source">${html}</div>
<div class="meta">
${descriptionHTML}
<div class="highlight">`;
}
return '</div></div></demo-block>\n';
}
}]
],
......
src/utils/vue-popper.js
View file @ 8c71f100
import PopperJS from './popper';
import PopperJS from 'main/utils/popper';
/**
* @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment