
<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>