<style>
    .box-card {
        width: 380px;
        border: 1px solid rgb(220, 223, 230);
        border-radius: 40px;
        margin-right: 24px;
        padding: 37px 20px;
        min-height: 779px;
    }

    .phone-content {
        border: 1px solid rgb(220, 223, 230);
        height: 705px;
        overflow: hidden;
        position: relative;
        background: rgb(245, 245, 245);
    }

    .text {
        font-size: 16px;
        font-weight: 700;
        color: rgb(38, 38, 38);
        text-align: center;
        position: absolute;
        width: 100%;
        top: 50px;
        box-sizing: border-box;
    }

    .poem-block {
        width: 315px;
        height: 330px;
        margin: 0;
        padding: 0;
        position: absolute;
        text-align: center;
        top: 200px;
        left: 10px;
        border-radius: 5px;
        background: rgba(87, 78, 78, 0.6);
        box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .3);
        overflow: hidden;

        display: flex;
        flex-direction: column;
    }

    .poem-title {
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
        margin: 10px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .intro-title {
        color: #ffffff;
        font-size: 14px;
        font-weight: bold;
        margin: 10px;
        text-align: start;
    }

    .price{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
</style>
<div class="box-card">
    <div class="phone-content">
        <div class="text">会员页</div>
        <img src="{{asset('storage/images/mobile-head.png')}}" alt="" width="338" height="80">
        <div style="min-height: 625px;">
            <img width="338" height="625" class="bg_img" src="{{asset('storage/images/a5fe2ba2bd71b543cbf4c6fb3968ab64.png')}}">
        </div>
        <div class="poem-block">
            <div class="intro-title">开发者249d42a097c1944e进行了广播推送，这是一条广播</div>
            <div class="poem-title">
                <div> 连续包月 </div>
                <div class="price">
                    <span> 29 元 </span>
                    <span> / 月</span>
                </div>
                <button type="button" class="btn btn-primary">开通</button>
            </div>
            <div class="poem-title">
                <div> 连续包年 </div>
                <div class="price">
                    <span> 299 元 </span>
                    <span> / 月</span>
                </div>
                <button type="button" class="btn btn-primary">开通</button>
            </div>
            <div class="intro-title" style="min-height: 100px">开发者249d42a097c1944e进行了广播推送，这是一条广播</div>
            <div class="intro-title" style="text-align: center">服务协议 | 隐私政策 | 恢复购买</div>
        </div>
    </div>
</div>
<hr>
<button type="button" class="btn btn-primary sync"><i class="feather icon-repeat"></i> 同步基本设置</button>
<script>
    Dcat.ready(function () {
        var asset = "{{asset('/storage/')}}";

        $(document).off('click', '.sync').on('click', '.sync', function () {
            let ori_top = 80;
            let top = parseInt($('.field_top').val()) + ori_top;
            let left = $('.field_left').val();
            let font = $('.field_font_size').val();
            let content_size = 12 + parseInt(font);
            let title_size = 14 + parseInt(font);
            let text_color = $('.text_color').val() || 'whitesmoke';
            let text_bg_color = $('.text_bg_color').val() || '#5c6bc6';
            let opacity = parseInt($('.opacity').val()) / 100;

            $('.poem-block').css('top', top + 'px').css('left', left + 'px')
                .css('background-color', text_bg_color).css('opacity', opacity);
            $('.poem-title').css('font-size', title_size + 'px').css('color', text_color);
            $('.poem-content').css('font-size', content_size + 'px').css('color', text_color);


            let bg_img_url = $('.bg_img_url').find("input[type='hidden'][name='bg_url']").val();
            if (bg_img_url !== '') {
                $('.bg_img').attr('src', asset + '/' + bg_img_url).css('display', 'block');
            }

            let bg_video_url = $('.bg_video_url').find("input[type='hidden'][name='bg_url']").val();
            if (bg_video_url !== ''){
                $('#bg_video').attr('src', asset + '/' + bg_video_url).css('display', 'block');
                let bg_video = document.getElementById('bg_video');
                bg_video.autoplay = true;
                bg_video.loop = true;
            }

            let bgm_url = $('.bgm_url').find("input[type='hidden'][name='bgm_url']").val();
            if (bgm_url !== ''){
                $('#bg_audio').attr('src', asset + '/' + bgm_url);
                let bg_audio = document.getElementById('bg_audio');
                bg_audio.autoplay = true;
                bg_audio.loop = true;
            }
        })

    })
</script>