模板修改 让你的红包样式更好看

[岁暮流年]

后台搜索

mjc_bonus_list

<xf:if is="$post.getBonus() is not empty">
    <div class="bonus_message">
        <xf:form action="{{ link('posts/openBonus',$post)}}"  ajax="true" data-skip-overlay-redirect="true">
            <div class="red-packet">
                <main>
                    <header>
                        <!--<xf:avatar user="$post.User" size="xxs" />-->
                    </header>
                    <h1>
                        {{$post.getBonusMessage().message}}
                    </h1>
                    <button class="open">开</button>
                </main>
            </div>
            <xf:formrow rowtype="input" label="{{ phrase('mjc_message') }}">
                <input name="bonus_message" type="text" class="input" style="width:300px" maxlength="20"
                       onkeyup="javascript:setShowLength(this, 20, 'message_length');"
                       value="{{ phrase('感谢楼主的红包！') }}"
                       placeholder="{{ phrase('感谢楼主的红包！') }}">
                <span class="formRow-explain" id="message_length">{{ phrase('还可以输入20字数。') }}</span>
            </xf:formrow>
        </xf:form>

    
    <xf:elseif is="{$post.getBonus()} == {$post.thread_id}" />       
        {{ phrase('红包已经领完啦!') }}
    </div>
</xf:if>

<xf:js>
    function setShowLength(obj, maxlength, id) {
        var rem = maxlength - obj.value.length;
        var wid = id;
        if (rem < 0) {
            rem = 0;
        }
        document.getElementById(wid).innerHTML = "还可以输入" + rem + "个字";
    }
</xf:js>
<xf:css>
    .red-packet {
        color: #fff;
        padding: 1em;
        height: 9em;
        margin: auto;
        max-width: 18em;
        overflow: hidden;
        position: relative;
        border-radius: 1em;
        background: #fe7a77;
    }
    
    .red-packet header{
        top: -2em;
        left: 0;
        right: 0;
        height: 5em;
        position: absolute;
        border-radius: 100%;
        background: #ff6763;
    }
    
    .red-packet main {
        margin-top: 1em;
        text-align: center;
    }
    
    h1 {
        font-size: 1em;
        margin: 3em 0;
        position: relative;
    }
    
    .red-packet .avatar.avatar--xxs {
        position: relative;
        top: 60px;
    }
    
    .red-packet .avatar.avatar--xxs img
    {
        left: 0;
        right: 0;
        margin: auto;
        max-width: 2.2em;
        position: absolute;
        border-radius: 100%;
        border: .1em solid #fff;
    }
    
    .red-packet .author
    {
        opacity: .7;
        top: -40px;
        position: relative;
    }

    .red-packet .open
    {
        outline: 0;
        width: 3em;
        height: 3em;
        color: #fff;
        border: none;
        display: block;
        font-size: 1em;
        cursor: pointer;
        margin: 1em auto;
        background: #ffb03a;
        border-radius: 100%;
        transform: translate(0, -35px); /* 向上移动5px */
        transition: background .3s, transform .3s;
    }
    .red-packet .open:hover {
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* 鼠标滑过时的阴影 */
}
animation: red-packet .75s both cubic-bezier(0.68, -0.55, 0.27, 1.55);
</xf:css>

替换成以上内容，大功告成