| <template> |
| <scroller style="overflow-x:hidden;"> |
| <style-box></style-box> |
| <style-flex></style-flex> |
| <panel title="opacity" type="primary"> |
| <div style="flex-direction:row;"> |
| <style-item style="opacity:1" value="1"></style-item> |
| <style-item style="opacity:0.9" value="0.9"></style-item> |
| <style-item style="opacity:0.5" value="0.5"></style-item> |
| <style-item style="opacity:0.2" value="0.2"></style-item> |
| </div> |
| </panel> |
| <panel title="background-color" type="primary"> |
| <div> |
| <style-item class="bg-item" style="background-color: #333;" value="#333"></style-item> |
| <style-item class="bg-item" style="background-color: #333333;" value="#333333"></style-item> |
| <style-item class="bg-item" style="background-color: rgb(238, 162, 54);" value="rgb()"></style-item> |
| <style-item class="bg-item" style="background-color: rgba(238, 162, 54, 0.5);" value="rgba()"></style-item> |
| <style-item class="bg-item" style="background-color: red;" value="red"></style-item> |
| </div> |
| </panel> |
| </scroller> |
| </template> |
| |
| <style scoped> |
| .bg-item { |
| width: 690px; |
| margin-bottom: 10px; |
| } |
| </style> |
| |
| <script> |
| module.exports = { |
| components: { |
| panel: require('../include/panel.vue'), |
| styleBox: require('./style-box.vue'), |
| styleFlex: require('./style-flex.vue'), |
| styleItem: require('./style-item.vue') |
| } |
| } |
| </script> |