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"> <style lang="less">
#app { #app {
font-family: font-family:
'code',
'-apple-system', '-apple-system',
'BlinkMacSystemFont', 'BlinkMacSystemFont',
'Helvetica Neue', '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 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 [ export default [
{ {
@ -30,8 +30,8 @@ export default [
component: Chart component: Chart
}, },
{ {
path: 'table', path: 'other',
name: 'table', name: 'other',
component: Table component: Other
} }
] ]

3
src/router/index.js
View File

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

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

@ -1,46 +1,67 @@
<template> <template>
<div id="border-box"> <div id="border-box">
<border-box-1 class="border-box-item"> <border-box-1 class="border-box-item">
<highlight-code class="javascript"> <div class="title">Border-Box-1</div>
// html
@import wqe from './'
</highlight-code>
<highlight-code> <highlight-code>
&lt;body&gt;&lt;/body&gt; &lt;border-box-1&gt;&lt;/border-box-1&gt;
</highlight-code> </highlight-code>
</border-box-1> </border-box-1>
<border-box-2 class="border-box-item"> <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-2>
<border-box-3 class="border-box-item"> <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-3>
<border-box-4 class="border-box-item"> <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>
<border-box-4 class="border-box-item" :reverse="true"> <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-4>
<border-box-5 class="border-box-item"> <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>
<border-box-5 class="border-box-item" :reverse="true"> <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-5>
<border-box-6 class="border-box-item"> <border-box-6 class="border-box-item">
<border-box-6 class="bbi-6">border-box-6</border-box-6> <div class="title">Border-Box-6</div>
<border-box-6 class="bbi-6">border-box-6</border-box-6> <highlight-code>
<border-box-6 class="bbi-6">border-box-6</border-box-6> &lt;border-box-6&gt;&lt;/border-box-6&gt;
<border-box-6 class="bbi-6">border-box-6</border-box-6> </highlight-code>
</border-box-6> </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> </div>
</template> </template>
@ -55,6 +76,7 @@ export default {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
padding-bottom: 100px;
.border-box-item { .border-box-item {
position: relative; position: relative;
@ -62,27 +84,13 @@ export default {
height: 300px; height: 300px;
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: space-around; 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> </style>

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

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

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

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

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

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

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