chenghx
7 years ago
parent
263f3064a7
commit
f8483833f1
48 changed files with 205 additions and 246 deletions
@ -1,65 +0,0 @@ |
||||
<template> |
||||
<div style="text-align: center; margin-top: 48px"> |
||||
<color-check-box-group :defaultValues="['1']" @change="changeColor" :multiple="true" style="display: inline-block"> |
||||
<color-check-box color="rgb(245, 34, 45)" value="1" /> |
||||
<color-check-box color="rgb(250, 84, 28)" value="2" /> |
||||
<color-check-box color="rgb(250, 173, 20)" value="3" /> |
||||
<color-check-box color="rgb(19, 194, 194)" value="4" /> |
||||
<color-check-box color="rgb(82, 196, 26)" value="5" /> |
||||
<color-check-box color="rgb(24, 144, 255)" value="6" /> |
||||
<color-check-box color="rgb(47, 84, 235)" value="7" /> |
||||
<color-check-box color="rgb(114, 46, 209)" value="8" /> |
||||
<color-check-box color="rgb(256, 0, 0)" value="9" /> |
||||
<color-check-box color="rgb(0, 256, 0)" value="10" /> |
||||
<color-check-box color="rgb(0, 0, 256)" value="11" /> |
||||
<color-check-box color="rgb(256, 256, 0)" value="12" /> |
||||
</color-check-box-group> |
||||
<div></div> |
||||
<div class="view-color" :style="{backgroundColor: color}"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ColorCheckBox from './ColorCheckBox' |
||||
|
||||
const ColorCheckBoxGroup = ColorCheckBox.Group |
||||
|
||||
export default { |
||||
name: 'Index', |
||||
data () { |
||||
return { |
||||
color: 'rgb(245, 34, 45)' |
||||
} |
||||
}, |
||||
components: {ColorCheckBox, ColorCheckBoxGroup}, |
||||
methods: { |
||||
changeColor (values, colors) { |
||||
this.color = this.calculateColor(colors) |
||||
}, |
||||
calculateColor (colors) { |
||||
let red = 0 |
||||
let green = 0 |
||||
let blue = 0 |
||||
let values |
||||
colors.forEach(color => { |
||||
values = color.split('(')[1].split(')')[0].split(',') |
||||
red = Math.max(red, parseInt(values[0])) |
||||
green += Math.max(green, parseInt(values[1])) |
||||
blue += Math.max(blue, parseInt(values[2])) |
||||
}) |
||||
return 'rgb(' + red + ',' + green + ',' + blue + ')' |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.view-color{ |
||||
margin-top: 48px; |
||||
display: inline-block; |
||||
height: 96px; |
||||
width: 96px; |
||||
border-radius: 48px; |
||||
border: 1px dashed gray; |
||||
} |
||||
</style> |
||||
@ -1,36 +0,0 @@ |
||||
<template> |
||||
<div style="margin: -24px -24px 0px"> |
||||
<page-header :breadcrumb="breadcrumb"/> |
||||
<div style="margin: 24px 24px 0px"> |
||||
<router-view ref="page"/> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import PageHeader from '../page/PageHeader' |
||||
export default { |
||||
name: 'CommonPageLayout', |
||||
components: {PageHeader}, |
||||
data () { |
||||
return { |
||||
breadcrumb: [] |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getPageHeaderInfo() |
||||
}, |
||||
beforeUpdate () { |
||||
this.getPageHeaderInfo() |
||||
}, |
||||
methods: { |
||||
getPageHeaderInfo () { |
||||
this.breadcrumb = this.$route.matched |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,65 @@ |
||||
<template> |
||||
<div style="text-align: center; margin-top: 48px"> |
||||
<color-checkbox-group :defaultValues="['1']" @change="changeColor" :multiple="true" style="display: inline-block"> |
||||
<color-checkbox color="rgb(245, 34, 45)" value="1" /> |
||||
<color-checkbox color="rgb(250, 84, 28)" value="2" /> |
||||
<color-checkbox color="rgb(250, 173, 20)" value="3" /> |
||||
<color-checkbox color="rgb(19, 194, 194)" value="4" /> |
||||
<color-checkbox color="rgb(82, 196, 26)" value="5" /> |
||||
<color-checkbox color="rgb(24, 144, 255)" value="6" /> |
||||
<color-checkbox color="rgb(47, 84, 235)" value="7" /> |
||||
<color-checkbox color="rgb(114, 46, 209)" value="8" /> |
||||
<color-checkbox color="rgb(256, 0, 0)" value="9" /> |
||||
<color-checkbox color="rgb(0, 256, 0)" value="10" /> |
||||
<color-checkbox color="rgb(0, 0, 256)" value="11" /> |
||||
<color-checkbox color="rgb(256, 256, 0)" value="12" /> |
||||
</color-checkbox-group> |
||||
<div></div> |
||||
<div class="view-color" :style="{backgroundColor: color}"/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ColorCheckbox from '../../components/checkbox/ColorCheckbox' |
||||
|
||||
const ColorCheckboxGroup = ColorCheckbox.Group |
||||
|
||||
export default { |
||||
name: 'Palette', |
||||
data () { |
||||
return { |
||||
color: 'rgb(245, 34, 45)' |
||||
} |
||||
}, |
||||
components: {ColorCheckbox, ColorCheckboxGroup}, |
||||
methods: { |
||||
changeColor (values, colors) { |
||||
this.color = this.calculateColor(colors) |
||||
}, |
||||
calculateColor (colors) { |
||||
let red = 0 |
||||
let green = 0 |
||||
let blue = 0 |
||||
let values |
||||
colors.forEach(color => { |
||||
values = color.split('(')[1].split(')')[0].split(',') |
||||
red = Math.max(red, parseInt(values[0])) |
||||
green += Math.max(green, parseInt(values[1])) |
||||
blue += Math.max(blue, parseInt(values[2])) |
||||
}) |
||||
return 'rgb(' + red + ',' + green + ',' + blue + ')' |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less" scoped> |
||||
.view-color{ |
||||
margin-top: 48px; |
||||
display: inline-block; |
||||
height: 96px; |
||||
width: 96px; |
||||
border-radius: 48px; |
||||
border: 1px dashed gray; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue