131 lines
7.5 KiB
HTML
131 lines
7.5 KiB
HTML
<script src="__CDN__/assets/js/html5shiv.js"></script>
|
|
<style>
|
|
#poster { width: 800px !important; }
|
|
#poster .bg { width: 100%; height: auto; display: block; }
|
|
</style>
|
|
<div class="panel panel-default panel-intro">
|
|
<div class="panel-body" style="display: none;">
|
|
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
|
|
<div class="panel-heading flex justify-between align-center" style="background: #f5f5f5 !important;">
|
|
<div class="heading-title">设计电子证书</div>
|
|
<button type="submit" class="btn btn-info btn-embossed">保存数据</button>
|
|
</div>
|
|
<div style="display: flex;flex-wrap: wrap;">
|
|
<div style="width: 800px;min-height: 350px;margin-top: 15px;margin-right: 15px;">
|
|
<div id="poster" style="width: 800px;">
|
|
<img src="{$data.bg.img|default=''}" class="bg">
|
|
{notempty name="data.data"}
|
|
{foreach $data['data'] as $index=>$item}
|
|
<div class="drag" data-type="{$item['type']}" data-lab="{$item['lab']}" data-item="{$item['item']}" index="{$index+1}" style="z-index:{$index+1};left:{$item['left']};top:{$item['top']};width:{$item['width']};height:{$item['height']}" {in name="item.type" value="text" } size="{$item['size']}" color="{$item['color']|default='#000000'}" textAlign="{$item['textAlign']|default='left'}" fontStyle="{$item['fontStyle']|default='1'}" {/in}>
|
|
{if $item['item']=='qr'}
|
|
<img src="/assets/addons/wdsxh/img/qr.png" />
|
|
{elseif $item['item']=='avatar'}
|
|
<img src="/assets/addons/wdsxh/img/avatar.png" />
|
|
{elseif $item['type']=='text'}
|
|
<div class=text style="font-size:{$item['size']|default='16px'};color:{$item['color']|default='#000000'};line-height:{$item['height']|default='1.3'};text-align:{$item['textAlign']|default='left'};font-weight:{isset($item['fontStyle']) && ($item['fontStyle'] == 3 || $item['fontStyle'] == 4) ? 'bold' : 'normal'};font-style:{isset($item['fontStyle']) && ($item['fontStyle'] == 2 || $item['fontStyle'] == 4) ? 'italic' : 'normal'};">{$item['lab']|default='文本内容'}</div>
|
|
{/if}
|
|
<div class="rRightDown"> </div>
|
|
<div class="rLeftDown"> </div>
|
|
<div class="rRightUp"> </div>
|
|
<div class="rLeftUp"> </div>
|
|
<div class="rRight"> </div>
|
|
<div class="rLeft"> </div>
|
|
<div class="rUp"> </div>
|
|
<div class="rDown"> </div>
|
|
</div>
|
|
{/foreach}
|
|
{/notempty}
|
|
</div>
|
|
</div>
|
|
<div style="width:800px;" class="margin-top">
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">背景设置</div>
|
|
<div class="panel-body">
|
|
<div class="flex align-center">
|
|
<label class="control-label" style="min-width: 80px;padding: 0;">背景图片:</label>
|
|
<div class="flex align-center">
|
|
<input id="c-image" class="form-control" name="row[image]" type="text" value="{$data.bg.img|default=''}">
|
|
<span class="margin-left"><button type="button" id="faupload-image" class="btn btn-danger faupload 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="panel panel-default">
|
|
<div class="panel-heading">电子证书组件</div>
|
|
<div class="panel-body">
|
|
<div class="flex">
|
|
<button class='btn-success btn-poster btn btn-sm margin-left-xs' type='button' data-item="activity_name" data-type='text'><i class="fa fa-file-text-o" style="margin-right: 8px;"></i>活动名称
|
|
<button class='btn-success btn-poster btn btn-sm margin-left-xs' type='button' data-item="name" data-type='text'><i class="fa fa-file-text-o" style="margin-right: 8px;"></i>姓名
|
|
</button>
|
|
|
|
<button class='btn-success btn-poster btn btn-sm margin-left-xs' type='button' data-item='time' data-type='text'><i class="fa fa-file-text-o" style="margin-right: 8px;"></i>时间
|
|
</button>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel panel-default" id="styleset">
|
|
<div class="panel-heading">样式设置</div>
|
|
<div class="panel-body">
|
|
<div class="flex flex-wrap">
|
|
<div class="basis-df flex align-center padding-tb">
|
|
<label class="control-label" style="padding: 0;">距顶边距:</label>
|
|
<input class="form-control margin-left" id="item-top" style="flex: 1;" type="number">
|
|
</div>
|
|
<div class="basis-df flex align-center padding-tb padding-left">
|
|
<label class="control-label" style="padding: 0;">距左边距:</label>
|
|
<input class="form-control margin-left" id="item-left" style="flex: 1;" type="number">
|
|
</div>
|
|
<div class="basis-df flex align-center padding-tb">
|
|
<label class="control-label" style="padding: 0;">组件宽度:</label>
|
|
<input class="form-control margin-left" id="item-width" style="flex: 1;" type="number">
|
|
</div>
|
|
<div class="basis-df flex align-center padding-tb padding-left">
|
|
<label class="control-label" style="padding: 0;">组件高度:</label>
|
|
<input class="form-control margin-left" id="item-height" style="flex: 1;" type="number">
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap" id="textset">
|
|
<div class="basis-df flex align-center padding-tb">
|
|
<label class="control-label" style="padding: 0;">字体颜色:</label>
|
|
<div class="input-group margin-left flex align-center" style="flex: 1;">
|
|
<input style="display: none;" type="text" name="color">
|
|
<button id="colorpicker" style="width: 32px; height: 32px;border: 1px solid #d2d6de;border-radius: 4px;padding: 4px;background: #FFF;" type="button">
|
|
<div id="previewColor" style="width: 100%; height: 100%; border: 1px solid #999; background-color: rgb(0, 0, 0);"></div>
|
|
</button>
|
|
<button class="btn btn-default margin-left" id="colorclean" type="button">重置</button>
|
|
</div>
|
|
</div>
|
|
<div class="basis-df flex align-center padding-tb padding-left">
|
|
<label class="control-label" style="padding: 0;">字体大小:</label>
|
|
<input class="form-control margin-left" style="flex: 1;" type="number" id="namesize" placeholder="例如: 15">
|
|
</div>
|
|
<div class="basis-df flex align-center padding-tb">
|
|
<label class="control-label" style="padding: 0;">文字位置:</label>
|
|
<div class="control-radio-group flex margin-left" id="textAlign">
|
|
<div class="control-radio left" data-item="left">居左</div>
|
|
<div class="control-radio center" data-item="center">居中</div>
|
|
<div class="control-radio right" data-item="right">居右</div>
|
|
</div>
|
|
</div>
|
|
<div class="basis-df flex align-center padding-tb padding-left">
|
|
<label class="control-label" style="padding: 0;">文字样式:</label>
|
|
<div class="control-radio-group flex margin-left" id="fontStyle">
|
|
<div class="control-radio bold" data-item="bold">加粗</div>
|
|
<div class="control-radio italic" data-item="italic">斜体</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" id="poster-data" name="row[data]" value="">
|
|
</form>
|
|
</div>
|
|
<div id="loading" style="position: fixed;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;">
|
|
<img src="/assets/addons/wdsxh/img/loading.gif" width="96px" height="96px" alt="">
|
|
</div>
|
|
</div> |