gganli/application/admin/view/weixin/news/add.html

<style>
    .news-left{left:20px;width:320px;position:absolute}
    .panel{border-radius:0;padding:0;margin-bottom:20px;background-color:#fff;border:1px solid transparent;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-default{border-color:#ddd}
    .panel-heading{color:#333;background-color:#f5f5f5;border-color:#ddd;padding:10px 15px;border-bottom:1px solid transparent;border-top-left-radius:3px;border-top-right-radius:3px}
    .news-left .news-item{position:relative;width:280px;height:150px;max-width:270px;overflow:hidden;border:1px solid #ccc;background-size:cover;background-position:center center}
    .transition{-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear}
    .news-left .news-item.active{border:1px solid #44b549!important}
    .news-right{position:absolute;right:20px;left: 360px;}
    .panel-body{padding:14px;height: 430px; overflow-y: scroll; overflow-x: hidden;}
    .form-horizontal .form-group{margin-right:-15px;margin-left:-15px}
    .form-group{margin-bottom:15px}
    .input-group{position:relative;display:table;border-collapse:separate}
    .news-right .input-group-addon{background:#fff;border-radius:0;border-color:#e5e6e7}
    .input-group-addon:first-child{border-right:0}
    label{font-size:100%;font-weight:500;margin-bottom:0}
    label{display:inline-block;max-width:100%;margin-bottom:5px;font-weight:700}
    .row{margin-right:-15px;margin-left:-15px}
    .btn{outline:none!important}
    .btn-group-sm>.btn,.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}
    .btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}
    a{color:#06C;cursor:pointer}
    a{color:#333;text-decoration:none}
    a{color:#337ab7;text-decoration:none}
    a{background-color:transparent}
    .float-e-margins .btn{margin-bottom:5px}
    .btn-success{background-color:#1c84c6;border-color:#1c84c6;color:#FFF}
    .btn{border-radius:3px}
    .btn-success{color:#fff;background-color:#5cb85c;border-color:#4cae4c}
    .btn{display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px}
    button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}
    button.btn-success.dim:active{box-shadow:inset 0 0 0 #1872ab,0 2px 0 0 #1872ab,0 5px 3px #999}
    .btn-success.active,.btn-success:active,.open .dropdown-toggle.btn-success{background-image:none}
    .btn-success.active,.btn-success:active,.btn-success:focus,.btn-success:hover,.open .dropdown-toggle.btn-success{background-color:#1a7bb9;border-color:#1a7bb9;color:#FFF}
    .operation-item{float: right;font-size: 14px;cursor: pointer}
    .add-news-items{cursor:pointer;text-align: center;font-size: 40px;height: 54px;line-height: 54px;border-top: 1px solid #ccc;}
    .news-item-title{position: relative;  width: 280px;  height: 70px;  max-width: 270px;  overflow: hidden;  border: 1px solid #ccc;  background-size: cover;  background-position: center center;  }
    .right-text{float: left;  width: 200px;  height: 100%;  padding: 10px;  overflow: hidden;  text-overflow: ellipsis;  }
    .left-image {width: 50px;  height: 50px;  float: left;  overflow: hidden;  position: relative;  background-size: 100%;  background-position: center center;  }
    .active {border: 1px solid #44b549!important;  }
</style>
<div class="row" style="width: 100%">
    <div class="col-sm-12" style="margin-left: 20px;min-height: 200px">
        <div class="col-sm-2 panel panel-default news-left">
            <form id="add-form" action="" role="form" data-toggle="validator" method="POST">
                <div class="panel-heading">效果预览</div>
                <div class="panel-body news-box type-all">
                    <div>
                        <div class="operation-item newsrow-del" data-id="0">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        </div>
                        <div class="newsrow news-item-title transition news-image list_0" style="margin-bottom: 15px">
                            <input class="list_0" type="hidden" name="list[0]" value='{"cate_name":"","description":"","image":"","url":"","sort":"0"}' data-id="0">
                            <div class="right-text newsrow-title"></div>
                            <img class="left-image" onerror="this.src='/assets/addons/weixin/images/image.png'" src=""/>
                        </div>
                    </div>
                </div>
                <div class="add-news-items"><span>+</span></div>
                <div class="form-group layer-footer">
                    <label class="control-label col-xs-12 col-sm-5"></label>
                    <div class="col-xs-12 col-sm-5">
                        <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                        <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-8 panel panel-default news-right">
            <div class="panel-heading">内容编辑</div>
            <form id="data-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="" style="margin-top:20px;">
                <input type="hidden" class="select_index" value="0">
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Cate_name')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-cate_name" data-rule="required" class="form-control" name="cate_name" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Description')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <textarea id="c-description" style="height: 106px;" data-rule="required" class="form-control" name="description"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Image')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div class="input-group">
                            <input id="c-image" data-rule="required" class="form-control" size="50" name="image" type="text" value="">
                            <div class="input-group-addon no-border no-padding">
                                <span><button type="button" id="plupload-image" class="btn btn-danger plupload" data-input-id="c-image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                                <span><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="c-image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                            </div>
                            <span class="msg-box n-right" for="c-image"></span>
                        </div>
                        <ul class="row list-inline plupload-preview" id="p-image"></ul>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Url')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-url" data-rule="required" class="form-control" name="url" type="text" value="">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">{:__('Sort')}:</label>
                    <div class="col-xs-12 col-sm-8">
                        <input id="c-sort" data-rule="required" class="form-control" name="sort" type="number" value="0">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>