<extend name="public@base"/>
<block name="css">
    <style>
        body {background:white;}
        .header_image {width:100%;display:block;}
        .title {text-align:center;padding:0 10px;margin-top:20px;}
        .activity_time {padding:0 10px;font-size:12px;color:#aaa;text-align:right;}
        .content {padding:0 10px;margin-top:20px;}
        .footer {width:100%;position:fixed;left:0;bottom:0;display:flex;}
        .footer .item {flex:1;height:50px;line-height:50px;text-align:center;color:white;}
        .footer .people {background: linear-gradient(to right, #ffd01e, #ff8917);}
        .footer .rank {background: linear-gradient(to right, #ff6034, #ee0a24);}
    </style>
</block>
<block name="body">
    <van-nav-bar
            right-text="下一步"
            @click-right="onSubmit"
    >
        <template #title>
            <span>活动详情</span>
        </template>
    </van-nav-bar>

    <img :src="info.main_image" class="header_image"/>

    <h2 class="title">{{info.title}}</h2>
    <p class="activity_time">活动时间：{{info.start_time}} 到 {{info.end_time}}</p>
    <p class="content" v-html="info.content"></p>
    <div style="width:100%;height:50px;"></div>

    <div style="padding:16px;">
        <van-button block class="bg-pink" @click="onSubmit">下一步</van-button>
    </div>
</block>
<block name="script">
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    info:{$active}
                };
            },
            methods: {
                onSubmit() {
                    location.href = "{:url('idcard')}";
                },
            },
        });
    </script>
</block>