ykxiao
/
DemuMesDataV
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

some modify

This commit is contained in:
jiaming 2018-12-14 19:45:37 +08:00
parent 8e06964260
commit 5f8e6abff3
8 changed files with 114 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.vue
View File

@ -14,7 +14,6 @@ export default {
<style lang="less">
#app {
font-family:
'code',
'-apple-system',
'BlinkMacSystemFont',
'Helvetica Neue',

8
src/router/demo.js
View File

@ -6,7 +6,7 @@ const Decoration = r => require.ensure([], () => r(require('../views/demo/decora
const Chart = r => require.ensure([], () => r(require('../views/demo/chart.vue')), 'demo')
const Table = r => require.ensure([], () => r(require('../views/demo/table.vue')), 'datav')
const Other = r => require.ensure([], () => r(require('../views/demo/other.vue')), 'datav')
export default [
{
@ -30,8 +30,8 @@ export default [
component: Chart
},
{
path: 'table',
name: 'table',
component: Table
path: 'other',
name: 'other',
component: Other
}
]

3
src/router/index.js
View File

@ -18,6 +18,7 @@ export default new Router({
path: '/demo',
name: 'demo',
component: Demo,
redirect: { name: 'document' },
children: [
...demoChildren
]
@ -41,7 +42,7 @@ export default new Router({
},
{
path: '*',
redirect: { name: 'demo' }
redirect: { name: 'document' }
}
]
})

78
src/views/demo/borderBox.vue
View File

@ -1,46 +1,67 @@
<template>
<div id="border-box">
<border-box-1 class="border-box-item">
<highlight-code class="javascript">
// html
@import wqe from './'
</highlight-code>
<div class="title">Border-Box-1</div>
<highlight-code>
&lt;body&gt;&lt;/body&gt;
&lt;border-box-1&gt;&lt;/border-box-1&gt;
</highlight-code>
</border-box-1>
<border-box-2 class="border-box-item">
<border-box-2 class="bbi-2">border-box-2</border-box-2>
<div class="title">Border-Box-2</div>
<highlight-code>
&lt;border-box-2&gt;&lt;/border-box-2&gt;
</highlight-code>
</border-box-2>
<border-box-3 class="border-box-item">
border-box-3
<div class="title">Border-Box-3</div>
<highlight-code>
&lt;border-box-3&gt;&lt;/border-box-3&gt;
</highlight-code>
</border-box-3>
<border-box-4 class="border-box-item">
border-box-4
<div class="title">Border-Box-4</div>
<highlight-code>
&lt;border-box-4&gt;&lt;/border-box-4&gt;
</highlight-code>
</border-box-4>
<border-box-4 class="border-box-item" :reverse="true">
border-box-4(reverse)
<div class="title">Border-Box-4(reverse)</div>
<highlight-code>
&lt;border-box-4 :reverse="true" &gt;&lt;/border-box-4&gt;
</highlight-code>
</border-box-4>
<border-box-5 class="border-box-item">
border-box-5
<div class="title">Border-Box-5</div>
<highlight-code>
&lt;border-box-5&gt;&lt;/border-box-5&gt;
</highlight-code>
</border-box-5>
<border-box-5 class="border-box-item" :reverse="true">
border-box-5(reverse)
<div class="title">Border-Box-5(reverse)</div>
<highlight-code>
&lt;border-box-5 :reverse="true" &gt;&lt;/border-box-5&gt;
</highlight-code>
</border-box-5>
<border-box-6 class="border-box-item">
<border-box-6 class="bbi-6">border-box-6</border-box-6>
<border-box-6 class="bbi-6">border-box-6</border-box-6>
<border-box-6 class="bbi-6">border-box-6</border-box-6>
<border-box-6 class="bbi-6">border-box-6</border-box-6>
<div class="title">Border-Box-6</div>
<highlight-code>
&lt;border-box-6&gt;&lt;/border-box-6&gt;
</highlight-code>
</border-box-6>
<border-box-7 class="border-box-item">
<div class="title">Border-Box-7</div>
<highlight-code>
&lt;border-box-7&gt;&lt;/border-box-7&gt;
</highlight-code>
</border-box-7>
</div>
</template>
@ -55,6 +76,7 @@ export default {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding-bottom: 100px;
.border-box-item {
position: relative;
@ -62,27 +84,13 @@ export default {
height: 300px;
margin-bottom: 10px;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-direction: column;
align-items: center;
justify-content: center;
.highlight-code {
.title {
text-indent: 0px;
}
}
.bbi-2 {
position: absolute;
width: 200px;
height: 80px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 50px;
}
.bbi-6 {
width: 25%;
height: 100%;
float: left;
}
}
</style>

3
src/views/demo/chart.vue
View File

@ -672,8 +672,7 @@ export default {
labelLine: ['同期', '环期'],
circleColor: '#f92672',
rayLineColor: '#f92672',
rayLineOffset: Math.PI * 1,
rayLineOffset: Math.PI * 1
},
colors: ['#00baff', '#3de7c9']

82
src/views/demo/decoration.vue
View File

@ -1,39 +1,69 @@
<template>
<div id="decoration">
<border-box-6 class="decoration-container">
<border-box-7 class="decoration-container">
<decoration-1 class="decoration d1 center" />
decoration-1
</border-box-6>
<border-box-6 class="decoration-container">
<div class="title">Decoration-1</div>
<highlight-code>
&lt;decoration-1 /&gt;
</highlight-code>
</border-box-7>
<border-box-7 class="decoration-container">
<decoration-2 class="decoration d2 center" />
decoration-2
</border-box-6>
<div class="title">Decoration-2</div>
<highlight-code>
&lt;decoration-2 /&gt;
</highlight-code>
</border-box-7>
<border-box-6 class="decoration-container">
<border-box-7 class="decoration-container">
<decoration-2 class="decoration d2r center" :reverse="true" />
decoration-2(reverse)
</border-box-6>
<div class="title">Decoration-2(reverse)</div>
<highlight-code>
&lt;decoration-2 :reverse="true" /&gt;
</highlight-code>
</border-box-7>
<border-box-6 class="decoration-container">
<border-box-7 class="decoration-container">
<decoration-3 class="decoration d3 center" />
decoration-3
</border-box-6>
<div class="title">Decoration-3</div>
<highlight-code>
&lt;decoration-3 /&gt;
</highlight-code>
</border-box-7>
<border-box-6 class="decoration-container">
<border-box-7 class="decoration-container">
<decoration-4 class="decoration d4 center" />
decoration-4
</border-box-6>
<div class="title">Decoration-4</div>
<highlight-code>
&lt;decoration-4 /&gt;
</highlight-code>
</border-box-7>
<border-box-6 class="decoration-container">
<border-box-7 class="decoration-container">
<decoration-4 class="decoration d4r center" :reverse="true" />
decoration-4(reverse)
</border-box-6>
<div class="title">Decoration-4(reverse)</div>
<highlight-code>
&lt;decoration-4 :reverse="true" /&gt;
</highlight-code>
</border-box-7>
<border-box-6 class="decoration-container">
<border-box-7 class="decoration-container">
<decoration-5 class="decoration d4r center" :reverse="true" />
<div class="title">Decoration-5</div>
<highlight-code>
&lt;decoration-5 /&gt;
</highlight-code>
</border-box-7>
<border-box-7 class="decoration-container">
<loading class="decoration center" />
loading
</border-box-6>
<div class="title">Loading</div>
<highlight-code>
&lt;loading /&gt;
</highlight-code>
</border-box-7>
</div>
</template>
@ -49,6 +79,7 @@ export default {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
padding-bottom: 100px;
.decoration-container {
position: relative;
@ -58,7 +89,14 @@ export default {
margin-bottom: 20px;
text-align: center;
font-weight: bold;
line-height: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.title {
text-indent: 0;
}
}
.decoration {

7
src/views/demo/index.vue
View File

@ -40,8 +40,8 @@ export default {
routerName: 'chart'
},
{
title: 'Table',
routerName: 'table'
title: 'Other',
routerName: 'other'
}
]
}
@ -95,7 +95,8 @@ export default {
width: 100%;
height: 100%;
overflow: scroll;
padding-top: 70px;
padding: 70px 100px 0px 100px;
box-sizing: border-box;
}
}
</style>

0
src/views/demo/table.vue → src/views/demo/other.vue
View File