sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化首屏加载

Browse Source 
Former-commit-id: fd7950a8a68a49c53f36d423fe0b298593a52b9b
Former-commit-id: 3f101ce3fd1393a4e218fa29cb6074ef1b7adc79
Former-commit-id: 801c1e8b41b3f15cffba421160b2b0529084dcbb
Former-commit-id: 1da627eb3dba8426f5134112bdac6a0d7ae995f1 [formerly eed4473502064e2953411e965e4c4db6986870b6]
Former-commit-id: 6521ed46633aa4c4f9c4f48b7059b1e42d0b5c8f
Former-commit-id: 2ae023459c3201e66f65c8d650ef302abe52d001
Former-commit-id: 9d06f049d6ebf6171ef56ca9608cf9ed9032ad00
Former-commit-id: e326a6c04f10b64f232367b0759499acbe0d4cdf
Former-commit-id: 8d4564fc2f1d7eb7b23d84429f780761110ca3da
This commit is contained in:
FairyEver
2019-12-13 22:17:57 +08:00
parent cb36d15714
commit dd8d79676b
364 changed files with 149021 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/views/demo/charts/list/_data/beijing.json Normal file
View File

File diff suppressed because one or more lines are too long

1
src/views/demo/charts/list/_data/beijing.json.REMOVED.git-id
View File

@@ -1 +0,0 @@
8a2b03e0745b33a15d68fd8c98c73b68ba057482

1
src/views/demo/charts/list/_data/china.json Normal file
View File

File diff suppressed because one or more lines are too long

1
src/views/demo/charts/list/_data/china.json.REMOVED.git-id
View File

@@ -1 +0,0 @@
28bbf7a8cf2cd33dc30fba1bd876a43acd4743f5

3
src/views/demo/components/editor-ueditor/index.vue
View File

@@ -23,6 +23,9 @@
</template>
<script>
import Vue from 'vue'
import VueUeditorWrap from 'vue-ueditor-wrap'
Vue.component('VueUeditorWrap', VueUeditorWrap)
export default {
data () {
return {

1004
src/views/demo/components/icon/data/index.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
src/views/demo/components/icon/data/index.js.REMOVED.git-id
View File

@@ -1 +0,0 @@
3283c245146c8130af1352a64561e780a3f585c5

3
src/views/demo/components/json-tree/index.vue
View File

@@ -5,6 +5,9 @@
</template>
<script>
import Vue from 'vue'
import vueJsonTreeView from 'vue-json-tree-view'
Vue.use(vueJsonTreeView)
import packJson from '../../../../../package.json'
export default {
data () {

3
src/views/demo/components/layout/splitpane.vue
View File

@@ -16,6 +16,9 @@
</template>
<script>
import Vue from 'vue'
import SplitPane from 'vue-splitpane'
Vue.component('SplitPane', SplitPane)
export default {
mounted () {
// 加载完成后显示提示

322
src/views/demo/element/form-input/index.vue Normal file
View File

@@ -0,0 +1,322 @@
<template>
<d2-container>
<h1 class="d2-mt-0">基础用法</h1>
<el-input v-model="input" placeholder="请输入内容" class="input-demo-200"></el-input>
<h1>禁用状态</h1>
<el-input
placeholder="请输入内容"
v-model="input1"
:disabled="true"
class="input-demo-200">
</el-input>
<h1>可清空</h1>
<el-input
placeholder="请输入内容"
v-model="input10"
clearable
class="input-demo-200">
</el-input>
<h1>带 icon 的输入框</h1>
<el-row>
<el-col :span="12">
<p class="d2-mt-0">属性方式</p>
<el-input
placeholder="请选择日期"
suffix-icon="el-icon-date"
v-model="input2"
class="input-demo-200 d2-mr-10">
</el-input>
<el-input
placeholder="请输入内容"
prefix-icon="el-icon-search"
v-model="input21"
class="input-demo-200 d2-mt-10">
</el-input>
</el-col>
<el-col :span="12">
<p class="d2-mt-0">slot 方式</p>
<el-input
placeholder="请选择日期"
v-model="input22"
class="input-demo-200 d2-mr-10">
<i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
placeholder="请输入内容"
v-model="input23"
class="input-demo-200 d2-mt-10">
<i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>
</el-col>
</el-row>
<h1>文本域</h1>
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea"
class="input-demo-400">
</el-input>
<h1>可自适应文本高度的文本域</h1>
<div>
<el-input
type="textarea"
autosize
placeholder="请输入内容"
v-model="textarea2"
class="input-demo-400">
</el-input>
</div>
<div>
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入内容"
v-model="textarea3"
class="d2-mt-10 input-demo-400">
</el-input>
</div>
<h1>复合型输入框</h1>
<div>
<el-input placeholder="请输入内容" v-model="input3" class="input-demo-400">
<template slot="prepend">Http://</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input4" class="input-demo-400">
<template slot="append">.com</template>
</el-input>
</div>
<div style="margin-top: 15px;">
<el-input placeholder="请输入内容" v-model="input5" class="input-demo-400">
<el-select v-model="select" slot="prepend" placeholder="请选择" style="width: 120px;">
<el-option label="餐厅名" value="1"></el-option>
<el-option label="订单号" value="2"></el-option>
<el-option label="用户电话" value="3"></el-option>
</el-select>
<el-button slot="append" icon="el-icon-search"></el-button>
</el-input>
</div>
<h1>尺寸</h1>
<div>
<el-input
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input6"
class="input-demo-200 d2-mr-10">
</el-input>
<el-input
size="medium"
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input7"
class="input-demo-200 d2-mr-10">
</el-input>
<el-input
size="small"
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input8"
class="input-demo-200 d2-mr-10">
</el-input>
<el-input
size="mini"
placeholder="请输入内容"
suffix-icon="el-icon-date"
v-model="input9"
class="input-demo-200">
</el-input>
</div>
<h1>输入建议</h1>
<el-row class="demo-autocomplete">
<el-col :span="12">
<p class="d2-mt-0">激活即列出输入建议</p>
<el-autocomplete
class="input-demo-200"
v-model="state1"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect">
</el-autocomplete>
</el-col>
<el-col :span="12">
<p class="d2-mt-0">输入后匹配输入建议</p>
<el-autocomplete
class="input-demo-200"
v-model="state2"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
:trigger-on-focus="false"
@select="handleSelect">
</el-autocomplete>
</el-col>
</el-row>
<h1>自定义模板</h1>
<el-autocomplete
v-model="state3"
:fetch-suggestions="querySearch"
placeholder="请输入内容"
@select="handleSelect"
class="input-demo-400">
<i
class="el-icon-edit el-input__icon"
slot="suffix"
@click="handleIconClick">
</i>
<template slot-scope="{ item }">
<div style="text-overflow: ellipsis; overflow: hidden;">{{ item.value }}</div>
<span style="font-size: 12px; color: #b4b4b4;">{{ item.address }}</span>
</template>
</el-autocomplete>
<h1>远程搜索</h1>
<el-autocomplete
v-model="state4"
:fetch-suggestions="querySearchAsync"
placeholder="请输入内容"
@select="handleSelect"
class="input-demo-200">
</el-autocomplete>
</d2-container>
</template>
<script>
export default {
data () {
return {
textarea: '',
textarea2: '',
textarea3: '',
input: '',
input1: '',
input2: '',
input3: '',
input4: '',
input5: '',
input6: '',
input7: '',
input8: '',
input9: '',
input10: '',
input21: '',
input22: '',
input23: '',
select: '',
restaurants: [],
state1: '',
state2: '',
state3: '',
state4: '',
timeout: null
}
},
methods: {
querySearch (queryString, cb) {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
// 调用 callback 返回建议列表的数据
cb(results)
},
createFilter (queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
loadAll () {
return [
{ value: '三全鲜食（北新泾店）', address: '长宁区新渔路144号' },
{ value: 'Hot honey 首尔炸鸡（仙霞路）', address: '上海市长宁区淞虹路661号' },
{ value: '新旺角茶餐厅', address: '上海市普陀区真北路988号创邑金沙谷6号楼113' },
{ value: '泷千家(天山西路店)', address: '天山西路438号' },
{ value: '胖仙女纸杯蛋糕（上海凌空店）', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
{ value: '贡茶', address: '上海市长宁区金钟路633号' },
{ value: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
{ value: '茶芝兰（奶茶，手抓饼）', address: '上海市普陀区同普路1435号' },
{ value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
{ value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
{ value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
{ value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
{ value: 'Monica摩托主题咖啡店', address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
{ value: '浮生若茶（凌空soho店）', address: '上海长宁区金钟路968号9号楼地下一层' },
{ value: 'NONO JUICE 鲜榨果汁', address: '上海市长宁区天山西路119号' },
{ value: 'CoCo都可(北新泾店）', address: '上海市长宁区仙霞西路' },
{ value: '快乐柠檬（神州智慧店）', address: '上海市长宁区天山西路567号1层R117号店铺' },
{ value: 'Merci Paul cafe', address: '上海市普陀区光复西路丹巴路28弄6号楼819' },
{ value: '猫山王（西郊百联店）', address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
{ value: '枪会山', address: '上海市普陀区棕榈路' },
{ value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
{ value: '钱记', address: '上海市长宁区天山西路' },
{ value: '壹杯加', address: '上海市长宁区通协路' },
{ value: '唦哇嘀咖', address: '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
{ value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
{ value: '爱茜茜里(近铁广场)', address: '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
{ value: '鲜果榨汁（金沙江路和美广店）', address: '普陀区金沙江路2239号金沙和美广场B1-10-6' },
{ value: '开心丽果（缤谷店）', address: '上海市长宁区威宁路天山路341号' },
{ value: '超级鸡车（丰庄路店）', address: '上海市嘉定区丰庄路240号' },
{ value: '妙生活果园（北新泾店）', address: '长宁区新渔路144号' },
{ value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
{ value: '凡仔汉堡（老真北路店）', address: '上海市普陀区老真北路160号' },
{ value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '蜀香源麻辣香锅（剑河路店）', address: '剑河路443-1' },
{ value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
{ value: '饭典*新简餐（凌空SOHO店）', address: '上海市长宁区金钟路968号9号楼地下一层9-83室' },
{ value: '焦耳·川式快餐（金钟路店）', address: '上海市金钟路633号地下一层甲部' },
{ value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
{ value: '浏阳蒸菜', address: '天山西路430号' },
{ value: '四海游龙（天山西路店）', address: '上海市长宁区天山西路' },
{ value: '樱花食堂（凌空店）', address: '上海市长宁区金钟路968号15楼15-105室' },
{ value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
{ value: '福荣祥烧腊（平溪路店）', address: '上海市长宁区协和路福泉路255弄57-73号' },
{ value: '速记黄焖鸡米饭', address: '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
{ value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
{ value: '(小杨生煎)西郊百联餐厅', address: '长宁区仙霞西路88号百联2楼' },
{ value: '阳阳麻辣烫', address: '天山西路389号' },
{ value: '南拳妈妈龙虾盖浇饭', address: '普陀区金沙江路1699号鑫乐惠美食广场A13' }
]
},
querySearchAsync (queryString, cb) {
var restaurants = this.restaurants
var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
cb(results)
}, 3000 * Math.random())
},
createStateFilter (queryString) {
return (state) => {
return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
}
},
handleSelect (item) {
console.log(item)
},
handleIconClick (ev) {
console.log(ev)
}
},
mounted () {
this.restaurants = this.loadAll()
}
}
</script>
<style lang="scss" scoped>
.page {
.input-demo-200 {
width: 200px;
}
.input-demo-400 {
width: 400px;
}
}
</style>

1
src/views/demo/element/form-input/index.vue.REMOVED.git-id
View File

@@ -1 +0,0 @@
08273e04f8e05e4179e8d487d595fc7af0ad72e3

BIN
src/views/demo/playground/log/console/image/demo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 65 KiB

1
src/views/demo/playground/log/console/image/demo.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
35a5c716cffd640daf38b058ac428e434cd440bc

2162
src/views/system/index/components/d2-help/image/qq.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

1
src/views/system/index/components/d2-help/image/qq.svg.REMOVED.git-id
View File

@@ -1 +0,0 @@
0ff3f882f9e99f9c56657863a926d44efeebb574

707
src/views/system/index/components/d2-help/image/we.svg Normal file
View File

@@ -0,0 +1,707 @@
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" width="468" height="468" viewBox="0 0 468 468">
<desc></desc>
<rect width="468" height="468" fill="#ffffff" cx="0" cy="0" />
<defs>
<rect id="p" width="12" height="12" />
</defs>
<g fill="#000000">
<use x="12" y="12" xlink:href="#p" />
<use x="24" y="12" xlink:href="#p" />
<use x="36" y="12" xlink:href="#p" />
<use x="48" y="12" xlink:href="#p" />
<use x="60" y="12" xlink:href="#p" />
<use x="72" y="12" xlink:href="#p" />
<use x="84" y="12" xlink:href="#p" />
<use x="108" y="12" xlink:href="#p" />
<use x="144" y="12" xlink:href="#p" />
<use x="156" y="12" xlink:href="#p" />
<use x="180" y="12" xlink:href="#p" />
<use x="204" y="12" xlink:href="#p" />
<use x="240" y="12" xlink:href="#p" />
<use x="264" y="12" xlink:href="#p" />
<use x="276" y="12" xlink:href="#p" />
<use x="288" y="12" xlink:href="#p" />
<use x="300" y="12" xlink:href="#p" />
<use x="348" y="12" xlink:href="#p" />
<use x="372" y="12" xlink:href="#p" />
<use x="384" y="12" xlink:href="#p" />
<use x="396" y="12" xlink:href="#p" />
<use x="408" y="12" xlink:href="#p" />
<use x="420" y="12" xlink:href="#p" />
<use x="432" y="12" xlink:href="#p" />
<use x="444" y="12" xlink:href="#p" />
<use x="12" y="24" xlink:href="#p" />
<use x="84" y="24" xlink:href="#p" />
<use x="108" y="24" xlink:href="#p" />
<use x="132" y="24" xlink:href="#p" />
<use x="144" y="24" xlink:href="#p" />
<use x="168" y="24" xlink:href="#p" />
<use x="192" y="24" xlink:href="#p" />
<use x="216" y="24" xlink:href="#p" />
<use x="228" y="24" xlink:href="#p" />
<use x="240" y="24" xlink:href="#p" />
<use x="264" y="24" xlink:href="#p" />
<use x="276" y="24" xlink:href="#p" />
<use x="336" y="24" xlink:href="#p" />
<use x="348" y="24" xlink:href="#p" />
<use x="372" y="24" xlink:href="#p" />
<use x="444" y="24" xlink:href="#p" />
<use x="12" y="36" xlink:href="#p" />
<use x="36" y="36" xlink:href="#p" />
<use x="48" y="36" xlink:href="#p" />
<use x="60" y="36" xlink:href="#p" />
<use x="84" y="36" xlink:href="#p" />
<use x="108" y="36" xlink:href="#p" />
<use x="120" y="36" xlink:href="#p" />
<use x="180" y="36" xlink:href="#p" />
<use x="192" y="36" xlink:href="#p" />
<use x="204" y="36" xlink:href="#p" />
<use x="216" y="36" xlink:href="#p" />
<use x="240" y="36" xlink:href="#p" />
<use x="252" y="36" xlink:href="#p" />
<use x="264" y="36" xlink:href="#p" />
<use x="276" y="36" xlink:href="#p" />
<use x="324" y="36" xlink:href="#p" />
<use x="372" y="36" xlink:href="#p" />
<use x="396" y="36" xlink:href="#p" />
<use x="408" y="36" xlink:href="#p" />
<use x="420" y="36" xlink:href="#p" />
<use x="444" y="36" xlink:href="#p" />
<use x="12" y="48" xlink:href="#p" />
<use x="36" y="48" xlink:href="#p" />
<use x="48" y="48" xlink:href="#p" />
<use x="60" y="48" xlink:href="#p" />
<use x="84" y="48" xlink:href="#p" />
<use x="120" y="48" xlink:href="#p" />
<use x="144" y="48" xlink:href="#p" />
<use x="168" y="48" xlink:href="#p" />
<use x="192" y="48" xlink:href="#p" />
<use x="204" y="48" xlink:href="#p" />
<use x="216" y="48" xlink:href="#p" />
<use x="288" y="48" xlink:href="#p" />
<use x="300" y="48" xlink:href="#p" />
<use x="312" y="48" xlink:href="#p" />
<use x="324" y="48" xlink:href="#p" />
<use x="336" y="48" xlink:href="#p" />
<use x="372" y="48" xlink:href="#p" />
<use x="396" y="48" xlink:href="#p" />
<use x="408" y="48" xlink:href="#p" />
<use x="420" y="48" xlink:href="#p" />
<use x="444" y="48" xlink:href="#p" />
<use x="12" y="60" xlink:href="#p" />
<use x="36" y="60" xlink:href="#p" />
<use x="48" y="60" xlink:href="#p" />
<use x="60" y="60" xlink:href="#p" />
<use x="84" y="60" xlink:href="#p" />
<use x="132" y="60" xlink:href="#p" />
<use x="144" y="60" xlink:href="#p" />
<use x="156" y="60" xlink:href="#p" />
<use x="168" y="60" xlink:href="#p" />
<use x="180" y="60" xlink:href="#p" />
<use x="192" y="60" xlink:href="#p" />
<use x="204" y="60" xlink:href="#p" />
<use x="240" y="60" xlink:href="#p" />
<use x="276" y="60" xlink:href="#p" />
<use x="300" y="60" xlink:href="#p" />
<use x="324" y="60" xlink:href="#p" />
<use x="372" y="60" xlink:href="#p" />
<use x="396" y="60" xlink:href="#p" />
<use x="408" y="60" xlink:href="#p" />
<use x="420" y="60" xlink:href="#p" />
<use x="444" y="60" xlink:href="#p" />
<use x="12" y="72" xlink:href="#p" />
<use x="84" y="72" xlink:href="#p" />
<use x="108" y="72" xlink:href="#p" />
<use x="168" y="72" xlink:href="#p" />
<use x="180" y="72" xlink:href="#p" />
<use x="192" y="72" xlink:href="#p" />
<use x="228" y="72" xlink:href="#p" />
<use x="264" y="72" xlink:href="#p" />
<use x="288" y="72" xlink:href="#p" />
<use x="300" y="72" xlink:href="#p" />
<use x="324" y="72" xlink:href="#p" />
<use x="336" y="72" xlink:href="#p" />
<use x="348" y="72" xlink:href="#p" />
<use x="372" y="72" xlink:href="#p" />
<use x="444" y="72" xlink:href="#p" />
<use x="12" y="84" xlink:href="#p" />
<use x="24" y="84" xlink:href="#p" />
<use x="36" y="84" xlink:href="#p" />
<use x="48" y="84" xlink:href="#p" />
<use x="60" y="84" xlink:href="#p" />
<use x="72" y="84" xlink:href="#p" />
<use x="84" y="84" xlink:href="#p" />
<use x="108" y="84" xlink:href="#p" />
<use x="132" y="84" xlink:href="#p" />
<use x="156" y="84" xlink:href="#p" />
<use x="180" y="84" xlink:href="#p" />
<use x="204" y="84" xlink:href="#p" />
<use x="228" y="84" xlink:href="#p" />
<use x="252" y="84" xlink:href="#p" />
<use x="276" y="84" xlink:href="#p" />
<use x="300" y="84" xlink:href="#p" />
<use x="324" y="84" xlink:href="#p" />
<use x="348" y="84" xlink:href="#p" />
<use x="372" y="84" xlink:href="#p" />
<use x="384" y="84" xlink:href="#p" />
<use x="396" y="84" xlink:href="#p" />
<use x="408" y="84" xlink:href="#p" />
<use x="420" y="84" xlink:href="#p" />
<use x="432" y="84" xlink:href="#p" />
<use x="444" y="84" xlink:href="#p" />
<use x="108" y="96" xlink:href="#p" />
<use x="180" y="96" xlink:href="#p" />
<use x="192" y="96" xlink:href="#p" />
<use x="216" y="96" xlink:href="#p" />
<use x="240" y="96" xlink:href="#p" />
<use x="276" y="96" xlink:href="#p" />
<use x="300" y="96" xlink:href="#p" />
<use x="312" y="96" xlink:href="#p" />
<use x="348" y="96" xlink:href="#p" />
<use x="36" y="108" xlink:href="#p" />
<use x="48" y="108" xlink:href="#p" />
<use x="60" y="108" xlink:href="#p" />
<use x="84" y="108" xlink:href="#p" />
<use x="108" y="108" xlink:href="#p" />
<use x="120" y="108" xlink:href="#p" />
<use x="144" y="108" xlink:href="#p" />
<use x="180" y="108" xlink:href="#p" />
<use x="192" y="108" xlink:href="#p" />
<use x="204" y="108" xlink:href="#p" />
<use x="228" y="108" xlink:href="#p" />
<use x="276" y="108" xlink:href="#p" />
<use x="312" y="108" xlink:href="#p" />
<use x="324" y="108" xlink:href="#p" />
<use x="348" y="108" xlink:href="#p" />
<use x="360" y="108" xlink:href="#p" />
<use x="372" y="108" xlink:href="#p" />
<use x="384" y="108" xlink:href="#p" />
<use x="420" y="108" xlink:href="#p" />
<use x="432" y="108" xlink:href="#p" />
<use x="444" y="108" xlink:href="#p" />
<use x="24" y="120" xlink:href="#p" />
<use x="36" y="120" xlink:href="#p" />
<use x="72" y="120" xlink:href="#p" />
<use x="168" y="120" xlink:href="#p" />
<use x="204" y="120" xlink:href="#p" />
<use x="252" y="120" xlink:href="#p" />
<use x="276" y="120" xlink:href="#p" />
<use x="288" y="120" xlink:href="#p" />
<use x="300" y="120" xlink:href="#p" />
<use x="312" y="120" xlink:href="#p" />
<use x="336" y="120" xlink:href="#p" />
<use x="348" y="120" xlink:href="#p" />
<use x="444" y="120" xlink:href="#p" />
<use x="36" y="132" xlink:href="#p" />
<use x="84" y="132" xlink:href="#p" />
<use x="108" y="132" xlink:href="#p" />
<use x="120" y="132" xlink:href="#p" />
<use x="132" y="132" xlink:href="#p" />
<use x="144" y="132" xlink:href="#p" />
<use x="180" y="132" xlink:href="#p" />
<use x="192" y="132" xlink:href="#p" />
<use x="204" y="132" xlink:href="#p" />
<use x="216" y="132" xlink:href="#p" />
<use x="228" y="132" xlink:href="#p" />
<use x="252" y="132" xlink:href="#p" />
<use x="312" y="132" xlink:href="#p" />
<use x="324" y="132" xlink:href="#p" />
<use x="336" y="132" xlink:href="#p" />
<use x="372" y="132" xlink:href="#p" />
<use x="384" y="132" xlink:href="#p" />
<use x="396" y="132" xlink:href="#p" />
<use x="420" y="132" xlink:href="#p" />
<use x="432" y="132" xlink:href="#p" />
<use x="444" y="132" xlink:href="#p" />
<use x="48" y="144" xlink:href="#p" />
<use x="120" y="144" xlink:href="#p" />
<use x="156" y="144" xlink:href="#p" />
<use x="180" y="144" xlink:href="#p" />
<use x="216" y="144" xlink:href="#p" />
<use x="228" y="144" xlink:href="#p" />
<use x="240" y="144" xlink:href="#p" />
<use x="264" y="144" xlink:href="#p" />
<use x="276" y="144" xlink:href="#p" />
<use x="288" y="144" xlink:href="#p" />
<use x="324" y="144" xlink:href="#p" />
<use x="336" y="144" xlink:href="#p" />
<use x="372" y="144" xlink:href="#p" />
<use x="384" y="144" xlink:href="#p" />
<use x="396" y="144" xlink:href="#p" />
<use x="432" y="144" xlink:href="#p" />
<use x="444" y="144" xlink:href="#p" />
<use x="24" y="156" xlink:href="#p" />
<use x="36" y="156" xlink:href="#p" />
<use x="60" y="156" xlink:href="#p" />
<use x="84" y="156" xlink:href="#p" />
<use x="168" y="156" xlink:href="#p" />
<use x="192" y="156" xlink:href="#p" />
<use x="204" y="156" xlink:href="#p" />
<use x="240" y="156" xlink:href="#p" />
<use x="264" y="156" xlink:href="#p" />
<use x="300" y="156" xlink:href="#p" />
<use x="312" y="156" xlink:href="#p" />
<use x="324" y="156" xlink:href="#p" />
<use x="360" y="156" xlink:href="#p" />
<use x="372" y="156" xlink:href="#p" />
<use x="384" y="156" xlink:href="#p" />
<use x="396" y="156" xlink:href="#p" />
<use x="408" y="156" xlink:href="#p" />
<use x="420" y="156" xlink:href="#p" />
<use x="432" y="156" xlink:href="#p" />
<use x="444" y="156" xlink:href="#p" />
<use x="24" y="168" xlink:href="#p" />
<use x="36" y="168" xlink:href="#p" />
<use x="48" y="168" xlink:href="#p" />
<use x="60" y="168" xlink:href="#p" />
<use x="96" y="168" xlink:href="#p" />
<use x="120" y="168" xlink:href="#p" />
<use x="192" y="168" xlink:href="#p" />
<use x="216" y="168" xlink:href="#p" />
<use x="228" y="168" xlink:href="#p" />
<use x="240" y="168" xlink:href="#p" />
<use x="252" y="168" xlink:href="#p" />
<use x="312" y="168" xlink:href="#p" />
<use x="324" y="168" xlink:href="#p" />
<use x="336" y="168" xlink:href="#p" />
<use x="348" y="168" xlink:href="#p" />
<use x="360" y="168" xlink:href="#p" />
<use x="384" y="168" xlink:href="#p" />
<use x="408" y="168" xlink:href="#p" />
<use x="420" y="168" xlink:href="#p" />
<use x="12" y="180" xlink:href="#p" />
<use x="36" y="180" xlink:href="#p" />
<use x="84" y="180" xlink:href="#p" />
<use x="96" y="180" xlink:href="#p" />
<use x="108" y="180" xlink:href="#p" />
<use x="120" y="180" xlink:href="#p" />
<use x="132" y="180" xlink:href="#p" />
<use x="144" y="180" xlink:href="#p" />
<use x="168" y="180" xlink:href="#p" />
<use x="180" y="180" xlink:href="#p" />
<use x="192" y="180" xlink:href="#p" />
<use x="204" y="180" xlink:href="#p" />
<use x="228" y="180" xlink:href="#p" />
<use x="240" y="180" xlink:href="#p" />
<use x="252" y="180" xlink:href="#p" />
<use x="264" y="180" xlink:href="#p" />
<use x="276" y="180" xlink:href="#p" />
<use x="288" y="180" xlink:href="#p" />
<use x="300" y="180" xlink:href="#p" />
<use x="312" y="180" xlink:href="#p" />
<use x="324" y="180" xlink:href="#p" />
<use x="336" y="180" xlink:href="#p" />
<use x="348" y="180" xlink:href="#p" />
<use x="372" y="180" xlink:href="#p" />
<use x="408" y="180" xlink:href="#p" />
<use x="432" y="180" xlink:href="#p" />
<use x="444" y="180" xlink:href="#p" />
<use x="12" y="192" xlink:href="#p" />
<use x="24" y="192" xlink:href="#p" />
<use x="60" y="192" xlink:href="#p" />
<use x="96" y="192" xlink:href="#p" />
<use x="108" y="192" xlink:href="#p" />
<use x="120" y="192" xlink:href="#p" />
<use x="156" y="192" xlink:href="#p" />
<use x="180" y="192" xlink:href="#p" />
<use x="192" y="192" xlink:href="#p" />
<use x="204" y="192" xlink:href="#p" />
<use x="216" y="192" xlink:href="#p" />
<use x="228" y="192" xlink:href="#p" />
<use x="288" y="192" xlink:href="#p" />
<use x="300" y="192" xlink:href="#p" />
<use x="324" y="192" xlink:href="#p" />
<use x="360" y="192" xlink:href="#p" />
<use x="372" y="192" xlink:href="#p" />
<use x="384" y="192" xlink:href="#p" />
<use x="396" y="192" xlink:href="#p" />
<use x="432" y="192" xlink:href="#p" />
<use x="72" y="204" xlink:href="#p" />
<use x="84" y="204" xlink:href="#p" />
<use x="132" y="204" xlink:href="#p" />
<use x="144" y="204" xlink:href="#p" />
<use x="156" y="204" xlink:href="#p" />
<use x="180" y="204" xlink:href="#p" />
<use x="216" y="204" xlink:href="#p" />
<use x="240" y="204" xlink:href="#p" />
<use x="264" y="204" xlink:href="#p" />
<use x="276" y="204" xlink:href="#p" />
<use x="300" y="204" xlink:href="#p" />
<use x="312" y="204" xlink:href="#p" />
<use x="324" y="204" xlink:href="#p" />
<use x="360" y="204" xlink:href="#p" />
<use x="372" y="204" xlink:href="#p" />
<use x="396" y="204" xlink:href="#p" />
<use x="420" y="204" xlink:href="#p" />
<use x="432" y="204" xlink:href="#p" />
<use x="444" y="204" xlink:href="#p" />
<use x="24" y="216" xlink:href="#p" />
<use x="36" y="216" xlink:href="#p" />
<use x="48" y="216" xlink:href="#p" />
<use x="72" y="216" xlink:href="#p" />
<use x="120" y="216" xlink:href="#p" />
<use x="168" y="216" xlink:href="#p" />
<use x="180" y="216" xlink:href="#p" />
<use x="192" y="216" xlink:href="#p" />
<use x="276" y="216" xlink:href="#p" />
<use x="288" y="216" xlink:href="#p" />
<use x="348" y="216" xlink:href="#p" />
<use x="360" y="216" xlink:href="#p" />
<use x="384" y="216" xlink:href="#p" />
<use x="12" y="228" xlink:href="#p" />
<use x="24" y="228" xlink:href="#p" />
<use x="36" y="228" xlink:href="#p" />
<use x="60" y="228" xlink:href="#p" />
<use x="84" y="228" xlink:href="#p" />
<use x="96" y="228" xlink:href="#p" />
<use x="132" y="228" xlink:href="#p" />
<use x="156" y="228" xlink:href="#p" />
<use x="168" y="228" xlink:href="#p" />
<use x="180" y="228" xlink:href="#p" />
<use x="204" y="228" xlink:href="#p" />
<use x="228" y="228" xlink:href="#p" />
<use x="252" y="228" xlink:href="#p" />
<use x="264" y="228" xlink:href="#p" />
<use x="276" y="228" xlink:href="#p" />
<use x="288" y="228" xlink:href="#p" />
<use x="312" y="228" xlink:href="#p" />
<use x="336" y="228" xlink:href="#p" />
<use x="432" y="228" xlink:href="#p" />
<use x="444" y="228" xlink:href="#p" />
<use x="24" y="240" xlink:href="#p" />
<use x="48" y="240" xlink:href="#p" />
<use x="60" y="240" xlink:href="#p" />
<use x="108" y="240" xlink:href="#p" />
<use x="120" y="240" xlink:href="#p" />
<use x="168" y="240" xlink:href="#p" />
<use x="180" y="240" xlink:href="#p" />
<use x="192" y="240" xlink:href="#p" />
<use x="264" y="240" xlink:href="#p" />
<use x="276" y="240" xlink:href="#p" />
<use x="300" y="240" xlink:href="#p" />
<use x="324" y="240" xlink:href="#p" />
<use x="348" y="240" xlink:href="#p" />
<use x="396" y="240" xlink:href="#p" />
<use x="432" y="240" xlink:href="#p" />
<use x="444" y="240" xlink:href="#p" />
<use x="12" y="252" xlink:href="#p" />
<use x="24" y="252" xlink:href="#p" />
<use x="72" y="252" xlink:href="#p" />
<use x="84" y="252" xlink:href="#p" />
<use x="108" y="252" xlink:href="#p" />
<use x="120" y="252" xlink:href="#p" />
<use x="132" y="252" xlink:href="#p" />
<use x="144" y="252" xlink:href="#p" />
<use x="156" y="252" xlink:href="#p" />
<use x="168" y="252" xlink:href="#p" />
<use x="216" y="252" xlink:href="#p" />
<use x="252" y="252" xlink:href="#p" />
<use x="264" y="252" xlink:href="#p" />
<use x="288" y="252" xlink:href="#p" />
<use x="300" y="252" xlink:href="#p" />
<use x="324" y="252" xlink:href="#p" />
<use x="360" y="252" xlink:href="#p" />
<use x="372" y="252" xlink:href="#p" />
<use x="384" y="252" xlink:href="#p" />
<use x="396" y="252" xlink:href="#p" />
<use x="408" y="252" xlink:href="#p" />
<use x="420" y="252" xlink:href="#p" />
<use x="432" y="252" xlink:href="#p" />
<use x="444" y="252" xlink:href="#p" />
<use x="12" y="264" xlink:href="#p" />
<use x="48" y="264" xlink:href="#p" />
<use x="60" y="264" xlink:href="#p" />
<use x="72" y="264" xlink:href="#p" />
<use x="96" y="264" xlink:href="#p" />
<use x="120" y="264" xlink:href="#p" />
<use x="180" y="264" xlink:href="#p" />
<use x="192" y="264" xlink:href="#p" />
<use x="204" y="264" xlink:href="#p" />
<use x="216" y="264" xlink:href="#p" />
<use x="228" y="264" xlink:href="#p" />
<use x="252" y="264" xlink:href="#p" />
<use x="276" y="264" xlink:href="#p" />
<use x="360" y="264" xlink:href="#p" />
<use x="384" y="264" xlink:href="#p" />
<use x="432" y="264" xlink:href="#p" />
<use x="12" y="276" xlink:href="#p" />
<use x="24" y="276" xlink:href="#p" />
<use x="60" y="276" xlink:href="#p" />
<use x="72" y="276" xlink:href="#p" />
<use x="84" y="276" xlink:href="#p" />
<use x="144" y="276" xlink:href="#p" />
<use x="156" y="276" xlink:href="#p" />
<use x="192" y="276" xlink:href="#p" />
<use x="216" y="276" xlink:href="#p" />
<use x="228" y="276" xlink:href="#p" />
<use x="240" y="276" xlink:href="#p" />
<use x="252" y="276" xlink:href="#p" />
<use x="288" y="276" xlink:href="#p" />
<use x="312" y="276" xlink:href="#p" />
<use x="324" y="276" xlink:href="#p" />
<use x="336" y="276" xlink:href="#p" />
<use x="372" y="276" xlink:href="#p" />
<use x="444" y="276" xlink:href="#p" />
<use x="48" y="288" xlink:href="#p" />
<use x="60" y="288" xlink:href="#p" />
<use x="96" y="288" xlink:href="#p" />
<use x="132" y="288" xlink:href="#p" />
<use x="144" y="288" xlink:href="#p" />
<use x="168" y="288" xlink:href="#p" />
<use x="192" y="288" xlink:href="#p" />
<use x="216" y="288" xlink:href="#p" />
<use x="372" y="288" xlink:href="#p" />
<use x="384" y="288" xlink:href="#p" />
<use x="432" y="288" xlink:href="#p" />
<use x="444" y="288" xlink:href="#p" />
<use x="12" y="300" xlink:href="#p" />
<use x="36" y="300" xlink:href="#p" />
<use x="48" y="300" xlink:href="#p" />
<use x="84" y="300" xlink:href="#p" />
<use x="96" y="300" xlink:href="#p" />
<use x="108" y="300" xlink:href="#p" />
<use x="132" y="300" xlink:href="#p" />
<use x="144" y="300" xlink:href="#p" />
<use x="216" y="300" xlink:href="#p" />
<use x="228" y="300" xlink:href="#p" />
<use x="240" y="300" xlink:href="#p" />
<use x="252" y="300" xlink:href="#p" />
<use x="264" y="300" xlink:href="#p" />
<use x="300" y="300" xlink:href="#p" />
<use x="312" y="300" xlink:href="#p" />
<use x="324" y="300" xlink:href="#p" />
<use x="348" y="300" xlink:href="#p" />
<use x="372" y="300" xlink:href="#p" />
<use x="396" y="300" xlink:href="#p" />
<use x="420" y="300" xlink:href="#p" />
<use x="444" y="300" xlink:href="#p" />
<use x="12" y="312" xlink:href="#p" />
<use x="24" y="312" xlink:href="#p" />
<use x="72" y="312" xlink:href="#p" />
<use x="108" y="312" xlink:href="#p" />
<use x="132" y="312" xlink:href="#p" />
<use x="144" y="312" xlink:href="#p" />
<use x="192" y="312" xlink:href="#p" />
<use x="204" y="312" xlink:href="#p" />
<use x="228" y="312" xlink:href="#p" />
<use x="240" y="312" xlink:href="#p" />
<use x="264" y="312" xlink:href="#p" />
<use x="300" y="312" xlink:href="#p" />
<use x="336" y="312" xlink:href="#p" />
<use x="348" y="312" xlink:href="#p" />
<use x="360" y="312" xlink:href="#p" />
<use x="384" y="312" xlink:href="#p" />
<use x="444" y="312" xlink:href="#p" />
<use x="12" y="324" xlink:href="#p" />
<use x="48" y="324" xlink:href="#p" />
<use x="84" y="324" xlink:href="#p" />
<use x="108" y="324" xlink:href="#p" />
<use x="120" y="324" xlink:href="#p" />
<use x="132" y="324" xlink:href="#p" />
<use x="156" y="324" xlink:href="#p" />
<use x="168" y="324" xlink:href="#p" />
<use x="216" y="324" xlink:href="#p" />
<use x="240" y="324" xlink:href="#p" />
<use x="264" y="324" xlink:href="#p" />
<use x="300" y="324" xlink:href="#p" />
<use x="324" y="324" xlink:href="#p" />
<use x="336" y="324" xlink:href="#p" />
<use x="348" y="324" xlink:href="#p" />
<use x="372" y="324" xlink:href="#p" />
<use x="384" y="324" xlink:href="#p" />
<use x="396" y="324" xlink:href="#p" />
<use x="432" y="324" xlink:href="#p" />
<use x="444" y="324" xlink:href="#p" />
<use x="12" y="336" xlink:href="#p" />
<use x="48" y="336" xlink:href="#p" />
<use x="60" y="336" xlink:href="#p" />
<use x="108" y="336" xlink:href="#p" />
<use x="168" y="336" xlink:href="#p" />
<use x="180" y="336" xlink:href="#p" />
<use x="204" y="336" xlink:href="#p" />
<use x="240" y="336" xlink:href="#p" />
<use x="252" y="336" xlink:href="#p" />
<use x="300" y="336" xlink:href="#p" />
<use x="324" y="336" xlink:href="#p" />
<use x="336" y="336" xlink:href="#p" />
<use x="348" y="336" xlink:href="#p" />
<use x="360" y="336" xlink:href="#p" />
<use x="384" y="336" xlink:href="#p" />
<use x="432" y="336" xlink:href="#p" />
<use x="12" y="348" xlink:href="#p" />
<use x="36" y="348" xlink:href="#p" />
<use x="48" y="348" xlink:href="#p" />
<use x="60" y="348" xlink:href="#p" />
<use x="72" y="348" xlink:href="#p" />
<use x="84" y="348" xlink:href="#p" />
<use x="96" y="348" xlink:href="#p" />
<use x="120" y="348" xlink:href="#p" />
<use x="132" y="348" xlink:href="#p" />
<use x="168" y="348" xlink:href="#p" />
<use x="180" y="348" xlink:href="#p" />
<use x="204" y="348" xlink:href="#p" />
<use x="216" y="348" xlink:href="#p" />
<use x="240" y="348" xlink:href="#p" />
<use x="252" y="348" xlink:href="#p" />
<use x="264" y="348" xlink:href="#p" />
<use x="276" y="348" xlink:href="#p" />
<use x="300" y="348" xlink:href="#p" />
<use x="312" y="348" xlink:href="#p" />
<use x="348" y="348" xlink:href="#p" />
<use x="360" y="348" xlink:href="#p" />
<use x="372" y="348" xlink:href="#p" />
<use x="384" y="348" xlink:href="#p" />
<use x="396" y="348" xlink:href="#p" />
<use x="420" y="348" xlink:href="#p" />
<use x="432" y="348" xlink:href="#p" />
<use x="108" y="360" xlink:href="#p" />
<use x="132" y="360" xlink:href="#p" />
<use x="144" y="360" xlink:href="#p" />
<use x="180" y="360" xlink:href="#p" />
<use x="192" y="360" xlink:href="#p" />
<use x="204" y="360" xlink:href="#p" />
<use x="240" y="360" xlink:href="#p" />
<use x="252" y="360" xlink:href="#p" />
<use x="276" y="360" xlink:href="#p" />
<use x="312" y="360" xlink:href="#p" />
<use x="336" y="360" xlink:href="#p" />
<use x="348" y="360" xlink:href="#p" />
<use x="396" y="360" xlink:href="#p" />
<use x="432" y="360" xlink:href="#p" />
<use x="12" y="372" xlink:href="#p" />
<use x="24" y="372" xlink:href="#p" />
<use x="36" y="372" xlink:href="#p" />
<use x="48" y="372" xlink:href="#p" />
<use x="60" y="372" xlink:href="#p" />
<use x="72" y="372" xlink:href="#p" />
<use x="84" y="372" xlink:href="#p" />
<use x="132" y="372" xlink:href="#p" />
<use x="144" y="372" xlink:href="#p" />
<use x="168" y="372" xlink:href="#p" />
<use x="216" y="372" xlink:href="#p" />
<use x="264" y="372" xlink:href="#p" />
<use x="276" y="372" xlink:href="#p" />
<use x="324" y="372" xlink:href="#p" />
<use x="336" y="372" xlink:href="#p" />
<use x="348" y="372" xlink:href="#p" />
<use x="372" y="372" xlink:href="#p" />
<use x="396" y="372" xlink:href="#p" />
<use x="408" y="372" xlink:href="#p" />
<use x="432" y="372" xlink:href="#p" />
<use x="444" y="372" xlink:href="#p" />
<use x="12" y="384" xlink:href="#p" />
<use x="84" y="384" xlink:href="#p" />
<use x="120" y="384" xlink:href="#p" />
<use x="156" y="384" xlink:href="#p" />
<use x="168" y="384" xlink:href="#p" />
<use x="180" y="384" xlink:href="#p" />
<use x="228" y="384" xlink:href="#p" />
<use x="324" y="384" xlink:href="#p" />
<use x="348" y="384" xlink:href="#p" />
<use x="396" y="384" xlink:href="#p" />
<use x="12" y="396" xlink:href="#p" />
<use x="36" y="396" xlink:href="#p" />
<use x="48" y="396" xlink:href="#p" />
<use x="60" y="396" xlink:href="#p" />
<use x="84" y="396" xlink:href="#p" />
<use x="108" y="396" xlink:href="#p" />
<use x="132" y="396" xlink:href="#p" />
<use x="168" y="396" xlink:href="#p" />
<use x="180" y="396" xlink:href="#p" />
<use x="192" y="396" xlink:href="#p" />
<use x="204" y="396" xlink:href="#p" />
<use x="216" y="396" xlink:href="#p" />
<use x="228" y="396" xlink:href="#p" />
<use x="240" y="396" xlink:href="#p" />
<use x="252" y="396" xlink:href="#p" />
<use x="264" y="396" xlink:href="#p" />
<use x="276" y="396" xlink:href="#p" />
<use x="300" y="396" xlink:href="#p" />
<use x="312" y="396" xlink:href="#p" />
<use x="336" y="396" xlink:href="#p" />
<use x="348" y="396" xlink:href="#p" />
<use x="360" y="396" xlink:href="#p" />
<use x="372" y="396" xlink:href="#p" />
<use x="384" y="396" xlink:href="#p" />
<use x="396" y="396" xlink:href="#p" />
<use x="420" y="396" xlink:href="#p" />
<use x="432" y="396" xlink:href="#p" />
<use x="12" y="408" xlink:href="#p" />
<use x="36" y="408" xlink:href="#p" />
<use x="48" y="408" xlink:href="#p" />
<use x="60" y="408" xlink:href="#p" />
<use x="84" y="408" xlink:href="#p" />
<use x="108" y="408" xlink:href="#p" />
<use x="180" y="408" xlink:href="#p" />
<use x="252" y="408" xlink:href="#p" />
<use x="264" y="408" xlink:href="#p" />
<use x="300" y="408" xlink:href="#p" />
<use x="312" y="408" xlink:href="#p" />
<use x="372" y="408" xlink:href="#p" />
<use x="396" y="408" xlink:href="#p" />
<use x="408" y="408" xlink:href="#p" />
<use x="12" y="420" xlink:href="#p" />
<use x="36" y="420" xlink:href="#p" />
<use x="48" y="420" xlink:href="#p" />
<use x="60" y="420" xlink:href="#p" />
<use x="84" y="420" xlink:href="#p" />
<use x="108" y="420" xlink:href="#p" />
<use x="120" y="420" xlink:href="#p" />
<use x="168" y="420" xlink:href="#p" />
<use x="180" y="420" xlink:href="#p" />
<use x="204" y="420" xlink:href="#p" />
<use x="228" y="420" xlink:href="#p" />
<use x="264" y="420" xlink:href="#p" />
<use x="276" y="420" xlink:href="#p" />
<use x="300" y="420" xlink:href="#p" />
<use x="324" y="420" xlink:href="#p" />
<use x="336" y="420" xlink:href="#p" />
<use x="348" y="420" xlink:href="#p" />
<use x="360" y="420" xlink:href="#p" />
<use x="384" y="420" xlink:href="#p" />
<use x="420" y="420" xlink:href="#p" />
<use x="444" y="420" xlink:href="#p" />
<use x="12" y="432" xlink:href="#p" />
<use x="84" y="432" xlink:href="#p" />
<use x="144" y="432" xlink:href="#p" />
<use x="168" y="432" xlink:href="#p" />
<use x="180" y="432" xlink:href="#p" />
<use x="192" y="432" xlink:href="#p" />
<use x="228" y="432" xlink:href="#p" />
<use x="240" y="432" xlink:href="#p" />
<use x="252" y="432" xlink:href="#p" />
<use x="276" y="432" xlink:href="#p" />
<use x="300" y="432" xlink:href="#p" />
<use x="336" y="432" xlink:href="#p" />
<use x="348" y="432" xlink:href="#p" />
<use x="360" y="432" xlink:href="#p" />
<use x="372" y="432" xlink:href="#p" />
<use x="444" y="432" xlink:href="#p" />
<use x="12" y="444" xlink:href="#p" />
<use x="24" y="444" xlink:href="#p" />
<use x="36" y="444" xlink:href="#p" />
<use x="48" y="444" xlink:href="#p" />
<use x="60" y="444" xlink:href="#p" />
<use x="72" y="444" xlink:href="#p" />
<use x="84" y="444" xlink:href="#p" />
<use x="132" y="444" xlink:href="#p" />
<use x="168" y="444" xlink:href="#p" />
<use x="204" y="444" xlink:href="#p" />
<use x="216" y="444" xlink:href="#p" />
<use x="240" y="444" xlink:href="#p" />
<use x="252" y="444" xlink:href="#p" />
<use x="276" y="444" xlink:href="#p" />
<use x="288" y="444" xlink:href="#p" />
<use x="300" y="444" xlink:href="#p" />
<use x="324" y="444" xlink:href="#p" />
<use x="336" y="444" xlink:href="#p" />
<use x="372" y="444" xlink:href="#p" />
<use x="384" y="444" xlink:href="#p" />
<use x="408" y="444" xlink:href="#p" />
<use x="420" y="444" xlink:href="#p" />
<use x="432" y="444" xlink:href="#p" />
<use x="444" y="444" xlink:href="#p" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

1
src/views/system/index/components/d2-help/image/we.svg.REMOVED.git-id
View File

@@ -1 +0,0 @@
7aa2a79d23a7d4293f2bdd0d4c09191ed15fd4de

BIN
src/views/system/index/components/d2-page-cover/image/darkblue@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

BIN
src/views/system/index/image/qr@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

1
src/views/system/index/image/qr@2x.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
2ef12d88b2011063784c37f8b8490336503a5f88

BIN
src/views/system/login/image/login-code.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
src/views/system/login/image/logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

1
src/views/system/login/image/logo@2x.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
f37e18711a040d8dd2ad2af9cfb9f4ea6760c07a

485
src/views/system/login/page.vue Normal file
View File

@@ -0,0 +1,485 @@
<template>
<div class="page-login">
<div class="page-login--layer page-login--layer-area">
<ul class="circles">
<li v-for="n in 10" :key="n"></li>
</ul>
</div>
<div
class="page-login--layer page-login--layer-time"
flex="main:center cross:center">
{{time}}
</div>
<div class="page-login--layer">
<div
class="page-login--content"
flex="dir:top main:justify cross:stretch box:justify">
<div class="page-login--content-header">
<p class="page-login--content-header-motto">
时间是一切财富中最宝贵的财富
</p>
</div>
<div
class="page-login--content-main"
flex="dir:top main:center cross:center">
<!-- logo -->
<img class="page-login--logo" src="./image/logo@2x.png">
<!-- form -->
<div class="page-login--form">
<el-card shadow="never">
<el-form
ref="loginForm"
label-position="top"
:rules="rules"
:model="formLogin"
size="default">
<el-form-item prop="username">
<el-input
type="text"
v-model="formLogin.username"
placeholder="用户名">
<i slot="prepend" class="fa fa-user-circle-o"></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="formLogin.password"
placeholder="密码">
<i slot="prepend" class="fa fa-keyboard-o"></i>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input
type="text"
v-model="formLogin.code"
placeholder="验证码">
<template slot="append">
<img class="login-code" src="./image/login-code.png">
</template>
</el-input>
</el-form-item>
<el-button
size="default"
@click="submit"
type="primary"
class="button-login">
登录
</el-button>
</el-form>
</el-card>
<p
class="page-login--options"
flex="main:justify cross:center">
<span><d2-icon name="question-circle"/> 忘记密码</span>
<span>注册用户</span>
</p>
<!-- quick login -->
<el-button class="page-login--quick" size="default" type="info" @click="dialogVisible = true">
快速选择用户（测试功能）
</el-button>
</div>
</div>
<div class="page-login--content-footer">
<p class="page-login--content-footer-locales">
<a
v-for="language in $languages"
:key="language.value"
@click="onChangeLocale(language.value)">
{{ language.label }}
</a>
</p>
<p class="page-login--content-footer-copyright">
Copyright
<d2-icon name="copyright"/>
2018 D2 Projects 开源组织出品
<a href="https://github.com/FairyEver">
@FairyEver
</a>
</p>
<p class="page-login--content-footer-options">
<a href="#">帮助</a>
<a href="#">隐私</a>
<a href="#">条款</a>
</p>
</div>
</div>
</div>
<el-dialog
title="快速选择用户"
:visible.sync="dialogVisible"
width="400px">
<el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
<el-col v-for="(user, index) in users" :key="index" :span="8">
<div class="page-login--quick-user" @click="handleUserBtnClick(user)">
<d2-icon name="user-circle-o"/>
<span>{{user.name}}</span>
</div>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
import dayjs from 'dayjs'
import { mapActions } from 'vuex'
import localeMixin from '@/locales/mixin.js'
export default {
mixins: [
localeMixin
],
data () {
return {
timeInterval: null,
time: dayjs().format('HH:mm:ss'),
// 快速选择用户
dialogVisible: false,
users: [
{
name: 'Admin',
username: 'admin',
password: 'admin'
},
{
name: 'Editor',
username: 'editor',
password: 'editor'
},
{
name: 'User1',
username: 'user1',
password: 'user1'
}
],
// 表单
formLogin: {
username: 'admin',
password: 'admin',
code: 'v9am'
},
// 表单校验
rules: {
username: [
{
required: true,
message: '请输入用户名',
trigger: 'blur'
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
}
],
code: [
{
required: true,
message: '请输入验证码',
trigger: 'blur'
}
]
}
}
},
mounted () {
this.timeInterval = setInterval(() => {
this.refreshTime()
}, 1000)
},
beforeDestroy () {
clearInterval(this.timeInterval)
},
methods: {
...mapActions('d2admin/account', [
'login'
]),
refreshTime () {
this.time = dayjs().format('HH:mm:ss')
},
/**
* @description 接收选择一个用户快速登录的事件
* @param {Object} user 用户信息
*/
handleUserBtnClick (user) {
this.formLogin.username = user.username
this.formLogin.password = user.password
this.submit()
},
/**
* @description 提交表单
*/
// 提交登录信息
submit () {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// 登录
// 注意 这里的演示没有传验证码
// 具体需要传递的数据请自行修改代码
this.login({
username: this.formLogin.username,
password: this.formLogin.password
})
.then(() => {
// 重定向对象不存在则返回顶层路径
this.$router.replace(this.$route.query.redirect || '/')
})
} else {
// 登录表单校验失败
this.$message.error('表单校验失败，请检查')
}
})
}
}
}
</script>
<style lang="scss">
.page-login {
@extend %unable-select;
$backgroundColor: #F0F2F5;
// ---
background-color: $backgroundColor;
height: 100%;
position: relative;
// 层
.page-login--layer {
@extend %full;
overflow: auto;
}
.page-login--layer-area {
overflow: hidden;
}
// 时间
.page-login--layer-time {
font-size: 24em;
font-weight: bold;
color: rgba(0, 0, 0, 0.03);
overflow: hidden;
}
// 登陆页面控件的容器
.page-login--content {
height: 100%;
min-height: 500px;
}
// header
.page-login--content-header {
padding: 1em 0;
.page-login--content-header-motto {
margin: 0px;
padding: 0px;
color: $color-text-normal;
text-align: center;
font-size: 12px;
}
}
// main
.page-login--logo {
width: 240px;
margin-bottom: 2em;
margin-top: -2em;
}
// 登录表单
.page-login--form {
width: 280px;
// 卡片
.el-card {
margin-bottom: 15px;
}
// 登录按钮
.button-login {
width: 100%;
}
// 输入框左边的图表区域缩窄
.el-input-group__prepend {
padding: 0px 14px;
}
.login-code {
height: 40px - 2px;
display: block;
margin: 0px -20px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
// 登陆选项
.page-login--options {
margin: 0px;
padding: 0px;
font-size: 14px;
color: $color-primary;
margin-bottom: 15px;
font-weight: bold;
}
.page-login--quick {
width: 100%;
}
}
// 快速选择用户面板
.page-login--quick-user {
@extend %flex-center-col;
padding: 10px 0px;
border-radius: 4px;
&:hover {
background-color: $color-bg;
i {
color: $color-text-normal;
}
span {
color: $color-text-normal;
}
}
i {
font-size: 36px;
color: $color-text-sub;
}
span {
font-size: 12px;
margin-top: 10px;
color: $color-text-sub;
}
}
// footer
.page-login--content-footer {
padding: 1em 0;
.page-login--content-footer-locales {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: $color-text-normal;
a {
color: $color-text-normal;
margin: 0 .5em;
&:hover {
color: $color-text-main;
}
}
}
.page-login--content-footer-copyright {
padding: 0px;
margin: 0px;
margin-bottom: 10px;
font-size: 12px;
line-height: 12px;
text-align: center;
color: $color-text-normal;
a {
color: $color-text-normal;
}
}
.page-login--content-footer-options {
padding: 0px;
margin: 0px;
font-size: 12px;
line-height: 12px;
text-align: center;
a {
color: $color-text-normal;
margin: 0 1em;
}
}
}
// 背景
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: #FFF;
animation: animate 25s linear infinite;
bottom: -200px;
@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100%{
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
&:nth-child(1) {
left: 15%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
&:nth-child(2) {
left: 5%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
&:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
&:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
&:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
&:nth-child(6) {
left: 75%;
width: 150px;
height: 150px;
animation-delay: 3s;
}
&:nth-child(7) {
left: 35%;
width: 200px;
height: 200px;
animation-delay: 7s;
}
&:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
&:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
&:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
}
}
}
</style>

1
src/views/system/login/page.vue.REMOVED.git-id
View File

@@ -1 +0,0 @@
1233019702184e7285e070b183c86ba6f3fb4be0