| |
| <template> |
| <div class="wrapper" onclick="update"> |
| <div style=" height:60px;background-color: #FFE4C4; box-shadow:{{bs}};width:{{w}};"> |
| <text class="title" style="text-align: center">Hello {{target}}</text> |
| </div> |
| <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow: 20px 10px 5px rgba(255, 69, 0, 0.8);"> |
| <text class="title" style="text-align: center">Hello {{target}}</text> |
| </div> |
| <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgba(255, 69, 0, 0.8);"> |
| <text class="title" style="text-align: center">Hello {{target}}</text> |
| </div> |
| <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:inset 20px 10px 5px rgb(255, 69, 0);"> |
| <text class="title" style="text-align: center">Hello {{target}}</text> |
| </div> |
| <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px black;"> |
| <text class="title" style="text-align: center">Hello {{target}}</text> |
| </div> |
| <div style="margin-top: 80px;width:400px; height:60px;background-color: #FFE4C4; box-shadow:20px 10px 5px #008B00;"> |
| <text class="title" style="text-align: center">Hello {{target}}</text> |
| </div> |
| </div> |
| </template> |
| |
| <style> |
| .wrapper {align-items: center; margin-top: 120px;} |
| .title {font-size: 48px;} |
| </style> |
| |
| <script> |
| module.exports = { |
| data: { |
| logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png', |
| target: 'World', |
| w:'400', |
| bs:'20px 10px 5px rgb(255, 69, 0)' |
| }, |
| methods: { |
| update: function (e) { |
| this.target = 'Weex'; |
| this.w = 600; |
| this.bs='inset 20px 10px 5px rgba(0, 0, 0, 0.5)'; |
| } |
| } |
| } |
| </script> |