book_admin/application/admin/view/referral/many/add.html

<form id="add-form" class="form-horizontal form-ajax" role="form" data-toggle="validator" method="POST" action="">
<!--    <a class="btn btn-info" id="select">选择</a>-->
    <div class="form-group">
        <label for="module" class="control-label col-xs-12 col-sm-2">推广标题:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="text" class="form-control" id="title" name="row[title]" value="" data-rule="required" />
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('类型')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input type="radio" name="row[short_url_type]" value="1" sval="qq" id="type-image" checked />
            <label for="type-image">腾讯短链接</label>
            <input type="radio" name="row[short_url_type]" value="2" sval="weibo" id="type-news" />
            <label for="type-news">新浪短链接</label>
        </div>
    </div>

    <!--分类型处理 start-->
    <!-- 腾讯短链接 -->
    <div class="form-group group-type" id="group-type-qq">
        <input type="hidden" name="row[referral_ids]" />
        <label class="control-label col-xs-12 col-sm-2">腾讯短链接:</label>
        <div class="col-xs-12 col-sm-8 new-template-wrap">
            <div class="img_txt_box" style="margin-bottom: 20px;">
                <div class="img_txt_list">
                <!--
                    <div class="img_txt_one img_txt_main">
                        <i class="fa fa-trash img_txt_edit_tit" title="删除"></i>
                        <div class="img_txt_one_tit">
                            <div class="img_txt_one_h3"><p>腾讯短链接，竟看到女老师不为人知的一面！</p></div>
                            <a href="javascript:;">http://m3.mp.koread.cn/admin/referral/many?ref=addtabs</a>
                        </div>
                    </div>
                -->
                </div>
				<a href="javascript:;" class="img_txt_add_but"><i class="fa fa-plus-square-o"></i> 添加链接</a>
            </div>
            <a class="btn btn-info many_copy">复制腾讯短链接</a>
        </div>
    </div>
    <!-- 新浪短链接 -->
    <div class="form-group group-type hide" id="group-type-weibo">
        <input type="hidden" name="row[referral_ids]" disabled />
        <label class="control-label col-xs-12 col-sm-2">新浪短链接:</label>
        <div class="col-xs-12 col-sm-8 new-template-wrap">
            <div class="img_txt_box" style="margin-bottom: 20px;">
                <div class="img_txt_list">
                <!--
                    <div class="img_txt_one img_txt_main">
                        <i class="fa fa-trash img_txt_edit_tit" title="删除"></i>
                        <div class="img_txt_one_tit">
                            <div class="img_txt_one_h3"><p>新浪短链接，竟看到女老师不为人知的一面！</p></div>
                            <a href="javascript:;">http://m3.mp.koread.cn/admin/referral/many?ref=addtabs</a>
                        </div>
                    </div>
                -->
                </div>
				<a href="javascript:;" class="img_txt_add_but"><i class="fa fa-plus-square-o"></i> 添加链接</a>
            </div>
            <a class="btn btn-info many_copy">复制新浪短链接</a>
        </div>
    </div>
    <!--分类型处理 end-->
    
    <div id="many_copy_dom" style="position: fixed;left: -10000px;max-width: 5000px;"></div>
    <div class="form-group {:input('get.callback')?'':'hidden layer-footer'}">
        <div class="col-xs-2"></div>
        <div class="col-xs-12 col-sm-8">
            <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>
<style type="text/css">
    .img_txt_box{
        padding: 20px;
        width: 380px;
        background-color: #f1f1f1;
        box-sizing: border-box;
    }
    .img_txt_list{
        padding: 10px 0;
        background-color: #fff;
    }
    .img_txt_list > div:last-child{
        border-bottom: 0;
    }
    .img_txt_one{
        position: relative;
        left: 0;
        top: 0;
        padding: 10px 20px;
        border-bottom: 1px solid #e9e9e9;
    }
    .img_txt_one_tit{
        margin-right: 30px;
        overflow: hidden;
        cursor: pointer;
    }
    .img_txt_one i{
        position: absolute;
        right: 20px;
        top: 50%;
        margin: -21px 0 0;
        height: 42px;
        width: 22px;
        background: none;
        text-align: center;
        font-size: 18px;
        color: #18bc9c;
        line-height: 42px;
        cursor: pointer;
    }
    .img_txt_one_h3,
    .img_txt_li_h3{
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-size: 14px;
        color: rgba(0,0,0,0.6);
        line-height: 22px;
    }
    .img_txt_li_h3{
        margin:0 0 5px;
        height: 44px;
    }
    .img_txt_one_h3 p,
    .img_txt_li_h3 p{
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        width: 100%;
        font-size: 14px;
        color: rgba(0,0,0,0.6);
        outline: none;
        line-height: 18px;
    }
    .img_txt_one_img{
        overflow: hidden;
        cursor: pointer;
    }
    .img_txt_one_img img{
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        width:100%;
    }
    
    .img_txt_li{
        position: relative;
        left: 0;
        top: 0;
        overflow: hidden;
        padding: 10px 20px;
        border-bottom: 1px solid #e9e9e9;
    }
    .img_txt_li_img{
        overflow: hidden;
        float: right;
        height: 78px;
        width: 78px;
    }
    .img_txt_li_img img{
        display: block;
        width: 78px;
        height: 78px;
    }
    .img_txt_li_txt{
        position: relative;
        left: 0;
        top: 0;
        margin: 0 88px 0 0;
        overflow: hidden;
    }
    .img_txt_li_txt a,
    .img_txt_one_tit a{
        display: block;
        margin: 0;
        overflow: hidden;
        padding: 3px 0;
        font-size: 14px;
        color: #1581ff;
        line-height: 18px;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        box-sizing: border-box;
    }
    
    .img_txt_add_but{
        display: block;
        margin-top: 20px;
        height: 40px;
        font-size: 16px;
        color: #1581ff;
        text-align: center;
        line-height: 40px;
    }
    .img_txt_add_but i{
        font-size: 16px;
        vertical-align: middle;
    }
    .img_txt_remvoe{
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        height: 36px;
        width: 36px;
        cursor: pointer;
    }
    .img_txt_li:hover .img_txt_remvoe{
        display: block;
    } 
    .img_txt_remvoe:before {
        content: "";
        width: 0;
        height: 0;
        overflow: hidden;
        border: 18px solid transparent;
        border-bottom-color: #d0021b;
        border-right-color: #d0021b;
        _border-bottom-style: solid;
        _border-right-style: solid;
        position: absolute;
        left: 0;
        top: 0;
    }
    .img_txt_remvoe:after {
        content: "\f1f8";
        position: absolute;
        right: 2px;
        bottom: 2px;
        color: #fff;
        font-size: 16px;
    }
</style>
<script>
    var datas = {};
</script>