xh-erp.7in6.com/application/admin/view/procuremensms/edit.html

<style>
    body.is-dialog .content {
        padding: 12px 14px 0;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .procuremen-sms-edit-wrap {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 460px;
        overflow: hidden;
    }
    .procuremen-sms-edit-layout {
        display: flex;
        align-items: stretch;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }
    .procuremen-sms-edit-left {
        flex: 1 1 58%;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        padding-right: 14px;
    }
    .procuremen-sms-edit-right {
        flex: 0 0 38%;
        max-width: 360px;
        min-width: 220px;
        border-left: 1px solid #e8e8e8;
        padding-left: 14px;
        overflow-x: hidden;
        overflow-y: auto;
        background: #fafbfc;
    }
    .procuremen-sms-edit-right .var-guide-title {
        margin: 0 0 10px;
        font-weight: 600;
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }
    .procuremen-sms-edit-right .var-guide-table {
        margin: 0;
        background: #fff;
        font-size: 13px;
        table-layout: fixed;
        width: 100%;
    }
    .procuremen-sms-edit-right .var-guide-table code {
        color: #c7254e;
        cursor: pointer;
        user-select: all;
        word-break: break-all;
    }
    #edit-form {
        width: 100%;
        max-width: 100%;
    }
    #edit-form .sms-edit-field {
        margin-bottom: 14px;
    }
    #edit-form .sms-edit-field > label {
        display: block;
        margin-bottom: 6px;
        font-weight: normal;
        color: #333;
    }
    #edit-form .sms-edit-field textarea.form-control {
        min-height: 160px;
        resize: vertical;
    }
    #edit-form .form-group.layer-footer {
        display: none;
    }
</style>

<form id="edit-form" class="procuremen-sms-edit-wrap" role="form" data-toggle="validator" method="POST" action="">
    <input type="hidden" name="row[scene]" value="{$row.scene|htmlentities}">
    <div class="procuremen-sms-edit-layout">
        <div class="procuremen-sms-edit-left">
            <div class="sms-edit-field">
                <label>模版名称:</label>
                <input class="form-control" name="row[title]" type="text" value="{$row.title|htmlentities}" data-rule="required">
            </div>
            <div class="sms-edit-field">
                <label>{if $isEmailScene}邮箱正文{else /}短信正文{/if}:</label>
                <textarea id="sms-template-content" class="form-control" name="row[content]" rows="8" data-rule="required">{$row.content|htmlentities}</textarea>
            </div>
            <div class="sms-edit-field">
                <label>备注:</label>
                <input class="form-control" name="row[remark]" type="text" value="{$row.remark|htmlentities}">
            </div>
        </div>
        <aside class="procuremen-sms-edit-right">
            <p class="var-guide-title">模版变量<br><span style="font-weight:400;font-size:12px;color:#666;">复制或点击左侧变量名插入到正文（四个场景说明相同，改 model 一处即可）</span></p>
            <table class="table table-bordered table-condensed var-guide-table">
                <thead>
                <tr style="background:#f5f5f5;">
                    <th style="width:42%;">变量</th>
                    <th>说明</th>
                </tr>
                </thead>
                <tbody>
                {volist name="smsVarGuide" id="vg"}
                <tr>
                    <td><code class="sms-var-tag" data-tag="{$vg.tag|htmlentities}" title="点击插入">{$vg.tag|htmlentities}</code></td>
                    <td>{$vg.label|htmlentities}</td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </aside>
    </div>
    <div class="form-group layer-footer">
        <div class="row procuremen-sms-footer-row">
            <div class="col-xs-12 procuremen-sms-footer-btns">
                <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
                <button type="button" class="btn btn-default btn-embossed btn-procuremen-sms-close">关闭</button>
            </div>
        </div>
    </div>
</form>