diff --git a/src/module/widget/bgcolor/bgcolor.css b/src/module/widget/bgcolor/bgcolor.css index 12a11cb..3e9b101 100644 --- a/src/module/widget/bgcolor/bgcolor.css +++ b/src/module/widget/bgcolor/bgcolor.css @@ -1,5 +1,30 @@ .w-bgcolor { + height: 40px; background: #cef; padding: 10px; +} + +.w-bgcolor_color { + height: 26px; + width: 26px; + border: 2px solid #000000; + margin: 7px 0 7px 7px; + float: left; +} + +.w-bgcolor_selected { + transform: scale(1.2); + animation: highlight 0.5s; +} +@keyframes highlight { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.5); + } + 100% { + transform: scale(1.2); + } } \ No newline at end of file diff --git a/src/module/widget/bgcolor/bgcolor.html b/src/module/widget/bgcolor/bgcolor.html index f2ba689..30c36a6 100644 --- a/src/module/widget/bgcolor/bgcolor.html +++ b/src/module/widget/bgcolor/bgcolor.html @@ -1,3 +1,7 @@
- 背景色拾取 +
\ No newline at end of file diff --git a/src/module/widget/bgcolor/bgcolor.js b/src/module/widget/bgcolor/bgcolor.js index b22031f..d7d98ca 100644 --- a/src/module/widget/bgcolor/bgcolor.js +++ b/src/module/widget/bgcolor/bgcolor.js @@ -2,5 +2,36 @@ // TODO module.exports = Vue.extend({ - template: __inline('bgcolor.html') + template: __inline('bgcolor.html'), + props: ['color'], + data: function() { + return { + colors: [{ + rgb: '#E50012' + }, { + rgb: '#EA5415' + }, { + rgb: '#F49EC0' + }, { + rgb: '#F6F08B' + }, { + rgb: '#C1D540' + }, { + rgb: '#60C3BA' + }, { + rgb: '#77CFF0' + }, { + rgb: '#980C7E' + }, { + rgb: '#FFFFFF' + }] + }; + }, + methods: { + onSelect: function(event, selected) { + if (this.color !== selected) { + this.color = selected; + } + } + } }); \ No newline at end of file