book_admin/application/admin/view/send/message/mini/add.html

<form id="add-form" class="form-horizontal" role="form" method="POST" action="">
    <div class="form-group">
        <label for="c-mini_page" class="control-label col-xs-12 col-sm-2">小程序页面:</label>
        <div class="col-xs-12 col-sm-8">

            <select  id="c-mini_page" class="form-control selectpicker" name="row[mini_page]">
                {foreach name="miniPages" item="vo"}
                <option value="{$key}" >{$vo}</option>
                {/foreach}
            </select>

        </div>
    </div>

    <div class="form-group">
        <label for="c-mini_type" class="control-label col-xs-12 col-sm-2">{:__('消息类型')}:</label>
        <div class="col-xs-12 col-sm-8">

            <div class="radio" id="c-mini_type">
                <label for=""><input  class="mini_type" name="row[mini_type]" type="radio" value="1" checked/> 文本类型</label>
                <label for=""><input  class="mini_type" name="row[mini_type]" type="radio" value="2" /> 图片</label>
                <label for=""><input  class="mini_type" name="row[mini_type]" type="radio" value="3" /> 小程序卡片</label>
                <label for=""><input class="mini_type" name="row[mini_type]" type="radio" value="4" /> 小程序码</label>
            </div>
        </div>
    </div>
    <div class="form-group mini-contect">
        <label for="c-mini_contect" class="control-label col-xs-12 col-sm-2">展示文字内容:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-mini_contect" class="form-control" name="row[mini_contect]" type="text" value="">
        </div>
    </div>
    <div class="form-group mini_img" style="display: none">
        <label for="c-mini_img" class="control-label col-xs-12 col-sm-2">{:__('上传图片')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-mini_img" data-rule="required" class="form-control" size="50" name="row[mini_img]" type="text">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-banner_img" class="btn btn-danger plupload" data-input-id="c-mini_img" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-mini_img"><i class="fa fa-upload"></i> 上传</button></span>
                    <span><button type="button" id="fachoose-banner_img" class="btn btn-primary fachoose" data-input-id="c-mini_img" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> 选择</button></span>
                </div>
                <span class="msg-box n-right" for="c-mini_img"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-mini_img"></ul>
        </div>
    </div>
    <div class="form-group mini-title" style="display: none">
        <label for="c-mini-title" class="control-label col-xs-12 col-sm-2">卡片标题:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-mini-title" class="form-control" name="row[mini-title]" type="text" value="">
        </div>
    </div>
    <div class="form-group mini-card" style="display: none">
        <label for="c-mini-title" class="control-label col-xs-12 col-sm-2">卡片图片:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="mini_content">
                <div class="card">
                    <div class="xcx_name">
                        <img src="{:asset('/img/backend/mini_logo.png')}" alt="">
                        <text>小程序名称</text>
                    </div>
                    <div class="card_name">卡片标题显示位置</div>
                    <div class="inner">
                        <div class="info">建议图片尺寸必须为1080*864,大小不超过2M,暂时不支持动图</div>
                        <div class="btn_file mini_plupload" id="mini_plupload" data-url="ajax/miniUpload" data-width="1080" data-height="864" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false">上传文件</div>
                    </div>
                    <div style="margin-top:20px;display: none" class="img_card" >
                        <img  class="btn_file card_img mini_plupload" id="mini_pluploads" data-url="ajax/miniUpload" data-width="1080" data-height="864" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" src="" alt="">
                    </div>
                    <div class="bot">
                        <img src="{:asset('/img/backend/mini_xcx.png')}" alt="">
                        <text>小程序</text>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label for="" class="control-label col-xs-12 col-sm-2"> </label>
        <div class="col-xs-12 col-sm-8">
            <a href="javascript:;" class="btn btn-success mini-subbmit" title="提交"  > 提交</a>
        </div>
    </div>



</form>
<style type="text/css">

    .mini-card .mini_content {
        width: 300px;
        height: 300px;
        display: flex;
    }
    .mini-card .mini_content .title {
        margin-right: 10px;
    }
    .mini-card .card {
        position: relative;
        width: 260px;
        background: #eee;
        height: 300px;
        padding: 10px 20px 0 20px;
    }
    .mini-card .card .xcx_name {
        vertical-align: middle;
        display: inline-block;
    }
    .mini-card .card .xcx_name img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
        border-radius: 50%;
    }
    .mini-card .card .xcx_name text {
        font-size: 10px;
        color: #333;
        vertical-align: middle;
    }
    .mini-card .card_name {
        margin-top: 10px;
        color: #666;
        font-size: 10px;
    }
    .mini-card .inner {
        width: 220px;
        height: 150px;
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 20px;
        background: #fff;
        margin-top: 20px;
        border-radius: 4px;
    }
    .mini-card .card_img{
        width: 220px;
        height: 150px;
    }
    .mini-card .inner .info {
        text-align: center;
        font-size: 10px;
        color: #999;
    }
    .mini-card .inner .btn_file {
        width: 100px;
        height: 30px;
        line-height: 30px;
        color: #333;
        text-align: center;
        font-size: 10px;
        background: #f9f9f9;
        border-radius: 4px;
        margin: 20px auto 0;
        cursor:pointer;
    }
    .mini-card .bot {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-top: 1px solid #c3c3c3;
        margin-top: 20px;
    }
    .mini-card .bot img{
        width: 15px;
        height: 15px;
        margin-left: 20px;
        vertical-align: middle;
    }
    .mini-card .bot text {
        font-size: 10px;
        color: #999;
    }

</style>