console
$(document).click(function(e){
var target = $(e.target);
if(target.closest(".editControl").length != 0) return;
$(".editControl").hide();
})
$(function(){
$('.icon_ApprovalItemClose').off('click').on('click',deleteitem);
$("body").delegate("#noAdd","click",function(event){
event.stopPropagation();
$(".editControl").show();
$(".widget_dialog").css({
top:"218px",
left:"232px"
})
})
$("body").delegate("#yesAdd","click",function(event){
event.stopPropagation();
$(".editControl").show();
$(".widget_dialog").css({
top:"288px",
left:"88px"
})
})
$('.dialog_item').off('click').on('click', function () {
var that = $(this);
appendTemplate(that);
})
$('.notetemplate').on('click', function () {
var that = $(this);
appendTemplate(that);
})
$('.achievetemplate').on('click', function () {
var that = $(this);
appendTemplate(that);
})
$('.meetingtemplate').on('click', function () {
var that = $(this);
appendTemplate(that);
})
function appendTemplate(that){
var type = that.data('type');
var title = that.data('title');
$('.Edit_scroll').append('<li class="Edit-element"> ' + $('.Edit_scroll_content>.' + title).html() + '</li>');
var panel_title= $(that).children(".dialog_item_text").text();
$(".Edit_scroll li").last().find(".panel_title").html(panel_title);
$(".Edit_scroll li").last().find(".approvalEdit_panel").attr("data-title",panel_title);
$(".Edit_scroll li").last().find(".type").attr("data-type",type);
$(".Edit_scroll").sortable('disable');
$('.editControl').hide();
$('.approvalEdit_empty').hide();
$('.approvalEdit_addWidget').show();
allitem(type,panel_title, "");
$(".Edit_scroll li").last().find(".line").addClass("Selected");
$(".Edit_scroll li").last().find(".icon_ApprovalItemClose").show();
addSelect(type);
$('.icon_ApprovalItemClose').off('click').on('click',deleteitem);
}
$("body").delegate(".Edit_scroll .Edit-element","click",function(){
var that = $(this);
var type = that.find('.approvalEdit_panel').data('type');
var panel_title = $(that).find('.panel_title').text().replace("*", '');
var placehold = $(that).find('.panel_title').next().text().trim();
allitem(type,panel_title, placehold);
if($(that).find('.panel_title').html().indexOf("*") > -1){
$(".js_validate").attr("checked" , "checked");
}else{
$(".js_validate").removeAttr("checked");
}
$(that).find(".line").addClass("Selected");
$(that).find(".icon_ApprovalItemClose").show();
$(".editItem_checkboxItemWrap").empty();
if(type == "select" || type == "checkbox"){
var selectVal = $(that).find(".Selected").find("div").html();
var arrVal = selectVal.split(",");
var htmlStr = '';
for(var i=0; i<arrVal.length; i++){
htmlStr = selectHtml(arrVal[i])
$(".editItem_checkboxItemWrap").append(htmlStr);
}
}
})
function allitem(type,panel_title, panel_placeholder) {
$('.line').removeClass('Selected');
$('.icon_ApprovalItemClose').hide();
$('.item_edit').show();
$(".checkbox").hide();
$('.item_edit').find(".input1").val(panel_title);
$(".item_edit").find(".qui_textarea").val(panel_placeholder);
$(".item_edit").find(".qui_textarea").attr("placeholder", "请输入");
$(".editWidget_wrap:last-child .Edit_editItem:first-child").show();
$(".explain").show();
if(type == "select" || type == "checkbox"){
$(".checkbox").show();
}
if(type == "tips" || type == "file"|| type == "note" || type == "achieve" || type == "meeting"){
$(".explain").hide();
}
if(type == "note"){
$(".notetemplate").unbind();
$(".notetemplate").children(".ww_icon_ApprovalNote").addClass("noteUnbind");
$(".notetemplate").children(".dialog_item_text").css("color","#cccc");
}
if(type == "achieve"){
$(".achievetemplate").unbind();
$(".achievetemplate").children(".ww_icon_Approvalachieve").addClass("achieveUnbind");
$(".achievetemplate").children(".dialog_item_text").css("color","#cccc");
}
if(type == "meeting"){
$(".meetingtemplate").unbind();
$(".meetingtemplate").children(".ww_icon_Approvalmeeting").addClass("meetingUnbind");
$(".meetingtemplate").children(".dialog_item_text").css("color","#cccc");
}
}
function deleteitem() {
var that = $(this);
var parent = that.parent();
parent.remove();
$('.item_edit').hide();
if($('.Edit_scroll li').length==0){
$('.approvalEdit_empty').show();
$('.item_edit').hide();
}
var title= parent.children(".approvalEdit_panel").data("title");
if(title == "发票"){
$(".notetemplate").children(".ww_icon_ApprovalNote").removeClass("noteUnbind");
$(".notetemplate").children(".dialog_item_text").css("color","#4A5159");
$('.notetemplate').on('click', function () {
var that = $(this);
appendTemplate(that);
})
}
if(title == "成果模板"){
$(".achievetemplate").children(".ww_icon_Approvalachieve").removeClass("achieveUnbind");
$(".achievetemplate").children(".dialog_item_text").css("color","#4A5159");
$('.achievetemplate').on('click', function () {
var that = $(this);
appendTemplate(that);
})
}
if(title == "会议模板"){
$(".meetingtemplate").children(".ww_icon_Approvalmeeting").removeClass("meetingUnbind");
$(".meetingtemplate").children(".dialog_item_text").css("color","#4A5159");
$('.meetingtemplate').on('click', function () {
var that = $(this);
appendTemplate(that);
})
}
}
function addSelect(type){
if(type != "select" && type != "checkbox") return;
$(".editItem_checkboxItemWrap").html('');
$(".editItem_checkboxItemWrap").append(selectHtml("选项1"));
$(".editItem_checkboxItemWrap").append(selectHtml("选项2"));
$(".Selected").children("div").html("选项1,选项2");
}
function selectHtml(name){
var htmlStr = '<div content="'+name+'" class="editItem_selectItem">' +
'<div class="editItem_select">' +
'<input type="text" class="qui_inputText ww_inputText ww_inputText_Big editItem_input" value="'+name+'" placeholder="选项名称" maxlength="28" onblur="blurInput();">' +
' <span class="ww_icon icon_ApprovalItemDel editItem_icon select-delete" onclick="radioRemoveBtn(this);"></span>' +
'<span class="ww_icon icon_ApprovalItemAdd editItem_icon select-add" onclick="radioAddBtn(this);"></span>' +
'<div class="inputWithTips_tips"></div>' +
'</div>'
'</div>';
return htmlStr;
}
})
var requiredHtml = '<span class="red">*</span>';
$(function(){
$("#temp_name").bind('blur', function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
var temp_name = $("#temp_name").val();
var default_name = "未命名模板";
if(temp_name.length == 0){
$("#top_title").html(default_name);
$("#temp_name").val(default_name);
}else if(temp_name.length <= 28){
$("#top_title").html($("#temp_name").val());
}
});
$(".input1, .ww_textarea").bind('blur', function(event){
console.log("----blur------这个传值处修改-----------");
var textval = $(this).val();
if(textval.length == 0){
textval = curClick().attr("data-title");
if($(this).hasClass("ww_inputText")){
$(this).val(textval);
}else{
$(this).attr("placeholder", "请输入") ;
textval = $(this).attr("placeholder");
}
}
if($(this).hasClass("ww_inputText")){
detailHtml(textval, "input");
}else if($(this).hasClass("ww_textarea")){
detailHtml(textval, "text");
}
});
$(".ww_checkbox").click(function(){
var html = $(".Selected").children(":first").html();
if($(this).is(':checked')){
if(html.indexOf(requiredHtml) == -1){
html += requiredHtml;
}
}else{
html = html.replace(requiredHtml, '');
}
$(".Selected").children(":first").html(html);
});
});
function blurInput(){
var node = curClick();
getSelectVal(node);
}
function curClick(){
var obj = $(".Selected").parent();
return obj;
}
function hasCheck(obj){
if(obj == undefined){ return false;}
else if(obj.get(0) == null || obj.get(0) == undefined){
return false;
}else{
return true;
}
}
function detailHtml(val, tag){
var curObj = curClick();
var tagVal = curObj.attr("data-title");
var obj = curObj.find(".Selected");
if(tag == 'input'){
var validateFlag = hasCheck(obj.find("label").children());
if(validateFlag){
val = val + requiredHtml;
}
}
if(tagVal == '文本' || tagVal == "数字" || tagVal == "日期" || tagVal == "日期+时间" || tagVal == "金额"){
if(tag == 'input'){
obj.find("label").html(val);
}else{
obj.children("span").html(val);
}
}else if(tagVal == '多行文本' || tagVal == '说明文字'){
if(tag == 'input'){
obj.find("label").html(val);
}else{
obj.find(".panel_textarea").html(val);
}
}else if(tagVal == '附件'){
if(tag == 'input'){
obj.find("label").html(val);
}
}else if(tagVal == '明细'){
if(tag == 'input'){
obj.find(".panel_list_title").html(val);
}
} else if(tagVal == "单选框"){
if(tag == 'input'){
obj.find("label").html(val);
}else{
obj.find(".panel_input").html(val);
}
}else if(tagVal == "多选框"){
if(tag == 'input'){
obj.find("label").html(val);
}else{
obj.find(".panel_input").html(val);
}
}
}
function radioRemoveBtn(node){
$(node).parents(".editItem_selectItem").hide();
blurInput();
}
function radioAddBtn(node){
var i = $(".editItem_content").children().length;
var html = '<div content="选项'+i+'" class="editItem_selectItem"> ' +
'<div class="editItem_select"> ' +
'<input type="text" class="qui_inputText ww_inputText ww_inputText_Big editItem_input" value="选项'+i+'" placeholder="选项名称" maxlength="28" onblur="blurInput();"> ' +
'<span class="ww_icon icon_ApprovalItemDel editItem_icon select-delete" onclick="radioRemoveBtn(this);"></span> ' +
'<span class="ww_icon icon_ApprovalItemAdd editItem_icon select-add" onclick="radioAddBtn(this);"></span>' +
'<div class="inputWithTips_tips"></div>' +
'</div>' +
'</div>';
$(".editItem_checkboxItemWrap").append(html);
blurInput();
}
function getSelectVal(node){
var val = '';
$(".editItem_checkboxItemWrap").children(".editItem_selectItem").each(function(){
if(!$(this).is(":hidden")){
val += $(this).find("input").val()+",";
}
});
if(!checkNull(val)){
val = val.substring(0, val.length - 1);
}
$(node).children("div").find("div").html(val);
}
function checkNull(val){
if (val == null || "" === val) return true;
return false;
}
<div class="main" id="topContanier" style="min-width:1100px;">
<div class="wrapper">
<div class="container fadeInUp">
<input type="hidden" id="maxSort" value="90" />
<div class="layout clearfix">
<div class="crumbLink1 clearfix">
<div class="r-date-box m-t-10">
<div class="template">
<div class="template_cont">
<div class="customTemplate">
<div class="Edit">
<div class="Edit_content">
<div class="Edit_content_p">
<span class="Edit_content_title">
未命名模板
</span>
</div>
<div class="Edit_scroll">
<li>
<div class="approvalEdit_panel type" data-title="用户">
<div class="panel_wrap">
<label class="panel_title">
用户
<span class="red">
*
</span>
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
</li>
<li>
<div class="approvalEdit_panel type" data-title="手机号">
<div class="panel_wrap">
<label class="panel_title">
手机号
<span class="red">
*
</span>
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
</li>
</div>
<div class="Edit_scroll_content" style="display: none;">
<li class="Edit-element text">
<div class="approvalEdit_panel type" data-title="文本">
<div class="panel_wrap line">
<label class="panel_title">
文本
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
<li class="Edit-element textarea">
<div class="approvalEdit_panel type" data-title="多行文本">
<div class="panel_wrap HasContent line">
<label class="panel_title">
多行文本
</label>
<div class="panel_content">
<div class="panel_textarea">
请输入
</div>
</div>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
<li class="Edit-element file">
<div class="approvalEdit_panel type" data-title="附件">
<div class="panel_wrap HasContent line">
<label class="panel_title">
附件
</label>
<div class="panel_content">
<span class="panel_textarea">
</span>
<div class="approvaledit_panel_image">
<span class="icon_AddFileBtnPreview">
</span>
</div>
</div>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
<li class="Edit-element select">
<div class="approvalEdit_panel type" data-title="单选" data-type="select">
<div class="panel_wrap line">
<label class="panel_title">
单选
</label>
<span class="panel_input">
请选择
</span>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
<li class="Edit-element tips">
<div class="approvalEdit_panel_tips type" data-title="说明">
<div class="panel_wrap line">
<span class="approvaledit_tips_value panel_title">
请输入说明文字
</span>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
<li class="Edit-element note">
<div class="approvalEdit_panel type">
<div class="line">
<div class="approvalEdit_panel_list_title panel_title">
发票
</div>
<div class="approvalEdit_panel" data-title="付款单位名称">
<div class="panel_wrap">
<label class="">
付款单位名称
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="付款单位纳税人识别号">
<div class="panel_wrap">
<label class="">
付款单位纳税人识别号
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="付款单位地址">
<div class="panel_wrap">
<label class="">
付款单位地址
</label>
<span class="panel_input">
请选择
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="详细地址">
<div class="panel_wrap">
<label class="">
详细地址
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="电话">
<div class="panel_wrap">
<label class="">
电话
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="付款单位开户银行">
<div class="panel_wrap">
<label class="">
付款单位开户银行
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="账号">
<div class="panel_wrap">
<label class="">
账号
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
<li class="Edit-element achieve">
<div class="approvalEdit_panel type">
<div class="line">
<div class="approvalEdit_panel_list_title panel_title">
成果
</div>
<div class="achieve-table">
<div class="achieve-table-index">
<div class="approvalEdit_panel" data-title="序号">
<div class="panel_wrap">
<label class="">
序号
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="人员姓名">
<div class="panel_wrap">
<label class="">
人员姓名
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="职务/职称">
<div class="panel_wrap">
<label class="">
职务/职称
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="联系电话">
<div class="panel_wrap">
<label class="">
联系电话
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="收件人电话">
<div class="panel_wrap">
<label class="">
收件人电话
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="table-option">
<span class="optionAddBtn">
新增
</span>
<span class="optionDelBtn">
删除
</span>
</div>
</div>
</div>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
<li class="Edit-element meeting">
<div class="approvalEdit_panel type">
<div class="line">
<div class="approvalEdit_panel_list_title panel_title">
会议
</div>
<div class="meeting-table">
<div class="meeting-table-index">
<div class="approvalEdit_panel" data-title="姓名">
<div class="panel_wrap">
<label class="">
姓名
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="职务">
<div class="panel_wrap">
<label class="">
职务
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="approvalEdit_panel" data-title="手机">
<div class="panel_wrap">
<label class="">
手机
</label>
<span class="panel_input">
请输入
</span>
</div>
</div>
<div class="table-option">
<span class="optionAddBtn">
新增
</span>
<span class="optionDelBtn">
删除
</span>
</div>
</div>
</div>
</div>
</div>
<span class="panel_close icon_ApprovalItemClose">
</span>
</li>
</div>
<div class="approvalEdit_addWidget js_addWidget edit" id="yesAdd">
<i class="approvalEdit_add_icon">
</i>
添加控件
</div>
</div>
</div>
<div class="template_edit">
<div class="editWidget_wrap">
<div class="Edit_editItem">
<div class="editItem_title">
模板名称
</div>
<div class="editItem_content">
<input type="text" class="qui_inputText ww_inputText ww_inputText_Big js_template_name"
placeholder="请输入" value="未命名模板">
<div class="ww_inputWithTips_tips" style="display: none;">
请输入模板名称
</div>
</div>
</div>
</div>
<div class="item_edit" style="display: none;">
<li class="draggable-element">
<div class="editWidget_wrap">
<div class="Edit_editItem">
<div class="editItem_title">
控件类型
</div>
<div class="editItem_content item">
文本
</div>
</div>
<div class="Edit_editItem">
<div class="editItem_title">
控件名称
</div>
<div class="editItem_content">
<input type="text" class="input1 qui_inputText ww_inputText ww_inputText_Big js_title"
placeholder="请输入" value="文本">
<div class="ww_inputWithTips_tips">
</div>
</div>
</div>
<div class="Edit_editItem explain">
<div class="editItem_title">
控件说明
</div>
<div class="editItem_content">
<textarea name="" class="qui_textarea ww_textarea js_placeholder" placeholder="请输入">
</textarea>
<div class="ww_inputWithTips_tips">
</div>
</div>
</div>
<div class="Edit_editItem checkbox" style="display: none;">
<div class="editItem_title">
添加选项
</div>
<div class="editItem_content editItem_checkboxItemWrap">
<div content="选项1" class="editItem_selectItem">
<div class="editItem_select">
<input type="text" class="qui_inputText ww_inputText ww_inputText_Big editItem_input"
value="选项1" placeholder="选项名称">
<span class="ww_icon icon_ApprovalItemDel editItem_icon select-delete">
</span>
<span class="ww_icon icon_ApprovalItemAdd editItem_icon select-add">
</span>
<div class="inputWithTips_tips">
</div>
</div>
</div>
<div content="选项2" class="editItem_selectItem">
<div class="editItem_select">
<input type="text" class="qui_inputText ww_inputText ww_inputText_Big editItem_input"
value="选项2" placeholder="选项名称">
<span class="ww_icon icon_ApprovalItemDel editItem_icon select-delete">
</span>
<span class="ww_icon icon_ApprovalItemAdd editItem_icon select-add">
</span>
<div class="inputWithTips_tips">
</div>
</div>
</div>
</div>
</div>
<div class="Edit_editItem">
<div class="editItem_title">
其他
</div>
<div class="editItem_content">
<label class="ww_label ww_label_Middle approvalEdit_templateEdit_editItem_label">
<input class="ww_checkbox js_validate" type="checkbox">
<span>
必填
</span>
</label>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="editControl" style="display: none;">
<div class="widget_dialog">
<div class="dialog_title">
控件库
</div>
<div class="dialog_content">
<div class="dialog_item" data-type="text" data-title="text">
<span class="ww_icon ww_icon_ApprovalText dialog_item_icon">
</span>
<span class="dialog_item_text">
文本
</span>
</div>
<div class="dialog_item" data-type="textarea" data-title="textarea">
<span class="ww_icon ww_icon_ApprovalTextarea dialog_item_icon">
</span>
<span class="dialog_item_text">
多行文本
</span>
</div>
<div class=" dialog_item" data-type="number" data-title="text">
<span class="ww_icon ww_icon_ApprovalNumber dialog_item_icon">
</span>
<span class="dialog_item_text">
数字
</span>
</div>
<div class="dialog_item" data-type="date" data-title="text">
<span class="ww_icon ww_icon_ApprovalDate dialog_item_icon">
</span>
<span class="dialog_item_text">
日期
</span>
</div>
<div class="dialog_item" data-type="datehour" data-title="text">
<span class="ww_icon ww_icon_ApprovalDatehour dialog_item_icon">
</span>
<span class="dialog_item_text">
日期+时间
</span>
</div>
<div class="dialog_item" data-type="file" data-title="file">
<span class="ww_icon ww_icon_ApprovalFile dialog_item_icon">
</span>
<span class="dialog_item_text">
附件
</span>
</div>
<div class="dialog_item" data-type="price" data-title="select">
<span class="ww_icon ww_icon_ApprovalPirce dialog_item_icon">
</span>
<span class="dialog_item_text">
金额
</span>
</div>
<div class="dialog_item" data-type="select" data-title="select">
<span class="ww_icon ww_icon_ApprovalSelect dialog_item_icon">
</span>
<span class="dialog_item_text">
单选框
</span>
</div>
<div class="dialog_item" data-type="checkbox" data-title="select">
<span class="ww_icon ww_icon_ApprovalCheckbox dialog_item_icon">
</span>
<span class="dialog_item_text">
多选框
</span>
</div>
<div class="notetemplate" data-type="note" data-title="note">
<span class="ww_icon ww_icon_ApprovalNote dialog_item_icon">
</span>
<span class="dialog_item_text">
发票
</span>
</div>
<div class="achievetemplate " data-type="achieve" data-title="achieve">
<span class="ww_icon ww_icon_Approvalachieve dialog_item_icon">
</span>
<span class="dialog_item_text">
成果模板
</span>
</div>
<div class="meetingtemplate" data-type="meeting" data-title="meeting">
<span class="ww_icon ww_icon_Approvalmeeting dialog_item_icon">
</span>
<span class="dialog_item_text">
会议模板
</span>
</div>
</div>
</div>
</div>
li {
list-style: none;
}
.frame_cnt {
width: 1080px;
margin: 0 auto 20px;
background-color: #FFF;
border-radius: 4px;
min-height: 592px;
-webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
}
.ww_normalCntHead {
position: relative;
height: 40px;
padding: 0 18px;
background-color: #F5F5F5;
border-bottom: 1px solid #DCE1E6;
border-radius: 4px 4px 0 0;
}
.ww_normalCntHead_left {
position: relative;
z-index: 2;
float: left;
}
.ww_normalCntHead_left .ww_btn {
margin-top: 7px;
}
a.qui_btn,
a.qui_btn:hover {
text-decoration: none;
}
.ww_btn_Back {
padding: 0 6px;
}
.ww_btn {
cursor: default;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#F8F8F8));
background-image: -webkit-linear-gradient(top, #fff 0, #F8F8F8 100%);
background-image: -o-linear-gradient(top, #fff 0, #F8F8F8 100%);
background-image: linear-gradient(to bottom, #fff 0, #F8F8F8 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFFFF", endColorstr="#FFF8F8F8", GradientType=0);
border-radius: 2px;
vertical-align: middle;
border: 1px solid #AAA;
}
.ww_btn,
.ww_btn:hover {
background-repeat: repeat-x;
}
.qui_btn {
display: inline-block;
margin: 0;
-webkit-box-sizing: content-box;
box-sizing: content-box;
min-width: 24px;
height: 24px;
padding: 0 12px;
background: #F5F5F5;
border: 1px solid #B4BEC8;
line-height: 24px;
outline: 0;
cursor: pointer;
text-align: center;
font-size: 12px;
color: #222;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.ww_normalCntHead_title {
position: absolute;
left: 18px;
right: 18px;
top: 0;
z-index: 1;
height: 40px;
line-height: 40px;
font-size: 16px;
text-align: center;
}
.ww_normalCntHead_title_content {
vertical-align: top;
}
.template_cont {
padding: 30px 120px;
}
.app_approval .app_approval_custom_template {
margin: 0 -20px;
}
.app_approval .app_stage_section {
border-bottom: none;
}
.app_stage_section {
padding-bottom: 28px;
margin-bottom: 28px;
border-bottom: 1px solid #E4E6E9;
position: relative;
}
.Edit {
position: relative;
overflow: hidden;
float: left;
width: 350px;
}
.Edit_content {
background: #f5f5f5;
border: 1px solid #d6d6d6;
}
.Edit_content_p {
position: relative;
height: 40px;
line-height: 40px;
background-color: #4F77AA;
}
.Edit_content_title {
font-size: 16px;
color: #fff;
position: absolute;
width: 100%;
text-align: center;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
word-break: break-all;
word-wrap: normal;
}
.Edit_scroll {
position: relative;
height: 517px;
overflow: hidden;
overflow-y: auto;
font-size: 12px;
}
.approvalEdit_panel {
position: relative;
margin-top: 12px;
background-color: #FFF;
font-size: 14px;
display: block;
margin-bottom: 1px;
}
.approvalEdit_panel:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 1px;
background-color: #D9D9D9;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.approvalEdit_panel:after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background-color: #D9D9D9;
-webkit-transform: scaleY(.5);
-ms-transform: scaleY(.5);
transform: scaleY(.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.Selected {
border: 1px solid #007ED3!important;
}
.panel_wrap {
padding: 10px 15px;
line-height: 24px;
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
display: flex;
align-items: center;
font-size: 14px;
}
.panel_title {
word-break: break-all;
line-height: 20px;
flex: 1;
}
.panel_input,
.panel_title,
.panel_wrap:hover .panel_close,
.HasContent,
.Selected .panel_close {
display: block;
}
.panel_input {
color: #868C98;
white-space: nowrap;
padding-left: 10px;
overflow: hidden;
text-align: right;
height: 24px;
flex: 1;
}
.panel_close {
position: absolute;
top: 0;
right: 0;
display: none;
cursor: pointer;
}
.icon_ApprovalItemClose {
background-image: url(http://www.gdaec.com.cn/resources/img/min/icon.png);
background-position: -645px -594px;
width: 18px;
overflow: hidden;
font-size: 0;
line-height: 0;
height: 18px;
}
.ww_icon {
display: inline-block;
overflow: hidden;
font-size: 0;
line-height: 0;
}
.approvalEdit_addWidget {
position: relative;
background: #fff;
height: 42px;
line-height: 42px;
text-align: center;
color: #416991;
-webkit-box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .2);
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .2);
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
vertical-align: middle;
font-size: 14px;
}
.approvalEdit_add_icon {
display: inline-block;
position: relative;
vertical-align: 2px;
margin-left: 16px;
}
.approvalEdit_add_icon:before {
width: 12px;
height: 2px;
top: -5px;
left: -14px;
}
.approvalEdit_add_icon:after {
width: 2px;
height: 12px;
left: -9px;
top: -10px;
}
.approvalEdit_add_icon:after,
.approvalEdit_add_icon:before {
position: absolute;
background-color: #2C6FB3;
content: "";
}
.template_edit {
float: left;
margin-left: 40px;
}
.Edit_editItem {
margin-bottom: 20px;
}
.editItem_title {
display: inline-block;
text-align: right;
float: left;
width: 60px;
font-size: 14px;
color: #787878;
line-height: 26px;
height: 26px;
margin-right: 20px;
}
.editItem_content {
display: inline-block;
line-height: 26px;
font-size: 14px;
}
.ww_btnWithMenu .smart_menu_a,
.ww_btnWithMenu .ww_dropdownMenu_itemLink,
.ww_groupSelBtn_item_text,
.ww_inputText,
.ww_pointLoading_stage,
.ww_searchResult li,
.ww_telInput_zipCode .smart_menu_a,
.ww_telInput_zipCode .ww_dropdownMenu_itemLink,
.ww_treeMenu_item {
white-space: nowrap;
}
.ww_inputText,
.ww_table_TextEllipsis td,
.ww_table_td_TextEllipsis {
word-wrap: normal;
}
.app_approval .app_approval_custom_template .ww_inputWithTips_tips {
display: none;
}
.Edit_editItem .ww_inputWithTips_tips {
display: block;
}
.ww_inputWithTips_remindTips,
.ww_inputWithTips_tips,
.ww_manual_inputWithTips_tips {
font-size: 12px;
color: #787878;
min-height: 16px;
padding-top: 4px;
line-height: 16px;
}
.item_edit {
position: relative;
margin-top: 30px;
padding-top: 30px;
}
.editWidget_wrap {
max-width: 490px;
}
.Edit_editItem {
margin-bottom: 20px;
}
.editItem_title {
display: inline-block;
text-align: right;
float: left;
width: 60px;
font-size: 14px;
color: #787878;
line-height: 26px;
height: 26px;
margin-right: 20px;
}
.editItem_content {
display: inline-block;
line-height: 26px;
font-size: 14px;
}
.ww_inputText {
font-size: 12px;
word-break: keep-all;
}
.ww_btnWithMenu .smart_menu_a,
.ww_btnWithMenu .ww_dropdownMenu_itemLink,
.ww_groupSelBtn_item_text,
.ww_inputText,
.ww_pointLoading_stage,
.ww_searchResult li,
.ww_telInput_zipCode .smart_menu_a,
.ww_telInput_zipCode .ww_dropdownMenu_itemLink,
.ww_treeMenu_item {
white-space: nowrap;
}
.qui_inputText {
height: 18px;
}
.app_approval .app_approval_custom_template .ww_inputWithTips_tips {
display: none;
}
.Edit_editItem .ww_inputWithTips_tips {
display: block;
}
.ww_inputWithTips_remindTips,
.ww_inputWithTips_tips,
.ww_manual_inputWithTips_tips {
font-size: 12px;
color: #787878;
min-height: 16px;
padding-top: 4px;
line-height: 16px;
}
.editItem_content .ww_textarea {
resize: none;
height: 70px;
word-break: break-all;
}
.Edit_editItem .ww_inputText,
.approvalEdit_templateEdit_editItem .ww_textarea {
width: 270px;
font-size: 14px;
}
.ww_textarea {
font-size: 14px;
}
.qui_textarea {
height: 42px;
}
.qui_inputText,
.qui_textarea {
display: block;
width: 270px;
line-height: 18px;
padding: 3px 6px;
background: #FFF;
border: 1px solid #C7C7C7;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.approvalEdit_templateEdit_editItem_label {
margin-right: 20px;
}
.ww_label_Middle {
font-size: 13px;
}
.ww_label {
font-size: 14px;
line-height: 1.5;
}
.isWin .ww_label .ww_checkbox,
.isWin .ww_label .ww_radio {
vertical-align: -3px;
}
.app_approval .app_approval_custom_template input {
font-size: 13px;
}
.ww_label_Middle .ww_checkbox {
margin-right: 5px;
vertical-align: 0;
}
.ww_label .ww_checkbox {
margin-right: 8px;
vertical-align: 0;
}
.ww_checkbox,
.ww_radio {
width: 14px;
height: 14px;
}
.ww_label span {
vertical-align: middle;
}
.ww_label_Middle {
font-size: 13px;
}
.ww_label {
font-size: 14px;
line-height: 1.5;
}
.item_edit:after {
content: " ";
position: absolute;
top: 0;
right: 0;
left: 0;
background-color: #E4E6E9;
height: 1px;
-webkit-transform: scaleY(.5);
-ms-transform: scaleY(.5);
transform: scaleY(.5);
}
.approvalEdit_save_btn {
clear: both;
position: relative;
padding-top: 65px;
text-align: left;
}
.approvalEdit_save_btn:before {
content: " ";
position: absolute;
top: 44px;
right: 0;
height: 1px;
background-color: #E4E6E9;
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scaleY(.5);
-ms-transform: scaleY(.5);
transform: scaleY(.5);
left: 0;
}
a.qui_btn,
a.qui_btn:hover {
text-decoration: none;
}
.ww_btn_Blue {
border-color: #2084CA;
color: #fff!important;
background-image: -webkit-gradient(linear, left top, left bottom, from(#4490D6), to(#357FB8));
background-image: -webkit-linear-gradient(top, #4490D6 0, #357FB8 100%);
background-image: -o-linear-gradient(top, #4490D6 0, #357FB8 100%);
background-image: linear-gradient(to bottom, #4490D6 0, #357FB8 100%);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FF4490D6", endColorstr="#FF357FB8", GradientType=0);
}
.ww_btn {
cursor: default;
border-radius: 2px;
vertical-align: middle;
border: 1px solid #AAA;
}
.ww_btn,
.ww_btn:hover {
background-repeat: repeat-x;
}
.qui_btn {
display: inline-block;
margin: 0;
-webkit-box-sizing: content-box;
box-sizing: content-box;
min-width: 24px;
height: 24px;
padding: 0 12px;
border: 1px solid #B4BEC8;
line-height: 24px;
outline: 0;
cursor: pointer;
text-align: center;
font-size: 12px;
color: #222;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
a.qui_btn,
a.qui_btn:hover {
text-decoration: none;
}
.ww_btn_Blue:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#61A6E6), to(#4890C7));
background-image: -webkit-linear-gradient(top, #61A6E6 0, #4890C7 100%);
background-image: -o-linear-gradient(top, #61A6E6 0, #4890C7 100%);
background-image: linear-gradient(to bottom, #61A6E6 0, #4890C7 100%);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#FF61A6E6", endColorstr="#FF4890C7", GradientType=0);
border-color: #2971A2;
color: #fff;
}
.panel_content {
display: block;
clear: both;
padding-top: 8px;
padding-bottom: 5px;
line-height: 20px;
color: #868C98;
}
.panel_textarea {
color: #868C98;
word-break: break-all;
line-height: 20px;
}
.icon_AddFileBtnPreview {
background-position: 0 -397px;
}
.icon_AddBtnGray,
.icon_AddFileBtnPreview {
background-image: url(http://www.gdaec.com.cn/resources/img/min/icon.png);
width: 40px;
height: 40px;
display: block;
overflow: hidden;
font-size: 0;
line-height: 0;
}
.ww_icon {
display: inline-block;
overflow: hidden;
font-size: 0;
line-height: 0;
}
.approvalEdit_panel_WithArrow .panel_wrap:before {
content: " ";
display: inline-block;
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #C8C8CD;
border-style: solid;
-webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);
-ms-transform: matrix(.71, .71, -.71, .71, 0, 0);
transform: matrix(.71, .71, -.71, .71, 0, 0);
position: absolute;
top: 50%;
margin-top: -4px;
right: 13px;
}
.approvalEdit_panel_WithArrow .panel_input {
padding-right: 10px;
}
.approvalEdit_panel_tips {
margin-top: 10px;
}
.approvalEdit_panel_tips .panel_wrap {
color: #868C98;
white-space: pre-wrap;
word-break: break-all;
}
.approvalEdit_panel_list_content {
background-color: #fff;
margin-top: 0;
}
.approvalEdit_panel_list_title {
padding-left: 15px;
background-color: #f5f5f5;
color: #777E8A;
height: 32px;
line-height: 28px;
}
.approvalEdit_panel_list_emptyTips {
text-align: center;
color: #787878;
padding-top: 25px;
background-color: #fff;
}
.approvalEdit_panel_list_addItem {
padding: 11px 0;
color: #416991;
text-align: center;
font-size: 13px;
cursor: pointer;
}
.approvalEdit_panel_list_footer {
position: relative;
font-size: 14px;
color: #787878;
line-height: 38px;
height: 38px;
background-color: #fff;
padding-left: 15px;
margin-bottom: 1px;
}
.approvalEdit_panel_list_footer:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 1px;
background-color: #D9D9D9;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.approvalEdit_panel_list_footer_icon {
position: relative;
top: 4px;
margin-right: 4px;
}
.ww_icon_ApprovalItemAdd {
background-image: url(http://www.gdaec.com.cn/resources/img/min/icon.png);
background-position: -645px -566px;
width: 18px;
height: 18px;
}
.approvalEdit_smart_wrap {
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
cursor: move;
margin-top: 12px;
}
.approvalEdit_panel_list {
position: relative;
margin-top: 12px;
border: 0;
background-color: #fff;
}
.approvalEdit_panel_list_close {
position: absolute;
top: 0;
right: 0;
display: none;
cursor: pointer;
}
.panel_list_content {
background-color: #fff;
margin-top: 0;
}
.panel_list_title {
padding-left: 15px;
background-color: #f5f5f5;
color: #777E8A;
height: 32px;
line-height: 28px;
}
.panel_list_emptyTips {
text-align: center;
color: #787878;
padding-top: 25px;
background-color: #fff;
}
.panel_list_addItem {
padding: 11px 0;
color: #416991;
text-align: center;
font-size: 13px;
cursor: pointer;
}
.panel_list_footer {
position: relative;
font-size: 14px;
color: #787878;
line-height: 38px;
height: 38px;
background-color: #fff;
padding-left: 15px;
margin-bottom: 1px;
}
.panel_list_footer:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 1px;
background-color: #D9D9D9;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
.panel_list_footer_icon {
position: relative;
top: 4px;
margin-right: 4px;
}
.ww_icon_ApprovalItemAdd {
background-image: url(http://www.gdaec.com.cn/resources/img/min/icon.png);
background-position: -645px -566px;
width: 18px;
height: 18px;
}
.smart_wrap {
position: relative;
border: 1px solid rgba(0, 0, 0, 0);
cursor: move;
margin-top: 12px;
}
.panel_list {
margin-top: 0;
border: 0;
background-color: #fff;
}
.panel_list_close {
position: absolute;
top: 0;
right: 0;
display: none;
cursor: pointer;
}
.widget_dialog {
position: absolute;
z-index: 100;
background: #FDFDFD;
border: 0;
border-radius: 4px;
-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3);
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3);
width: 383px;
padding: 15px 15px 0;
}
.dialog_title {
text-align: left;
font-size: 14px;
line-height: 20px;
margin-left: 10px;
color: #000;
}
.dialog_content {
margin-top: 10px;
text-align: left;
}
.dialog_item {
display: inline-block;
width: 70px;
height: 58px;
border: 1px solid #E4E6E9;
text-align: center;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
cursor: pointer;
}
.dialog_item_icon {
display: block;
margin: 8px auto 0;
}
.ww_icon_ApprovalText {
background-position: -577px -170px;
}
.ww_icon_ApprovalTextarea {
background-position: -611px -34px;
}
.ww_icon_ApprovalNumber {
background-position: -34px -549px;
}
.ww_icon_ApprovalDate {
background-position: -540px -448px;
}
.ww_icon_ApprovalDatehour {
background-position: -540px -312px;
}
.ww_icon_ApprovalFile {
background-position: -306px -549px;
}
.ww_icon_ApprovalList {
background-position: -510px -549px;
}
.ww_icon_ApprovalPirce {
background-position: -540px -380px;
}
.ww_icon_ApprovalSelect {
background-position: -577px -102px;
}
.ww_icon_ApprovalCheckbox {
background-position: -577px 0;
}
.ww_icon_ApprovalDesc {
background-position: -340px -549px;
}
.ww_icon_ApprovalSelect,
.ww_icon_ApprovalText,
.ww_icon_ApprovalTextarea,
.ww_icon_ApprovalList,
.ww_icon_ApprovalNumber,
.ww_icon_ApprovalDate,
.ww_icon_ApprovalDatehour,
.ww_icon_ApprovalFile,
.ww_icon_ApprovalPirce,
.ww_icon_ApprovalCheckbox,
.ww_icon_ApprovalDesc {
background-image: url(http://www.gdaec.com.cn/resources/img/min/icon.png);
width: 24px;
height: 24px;
}
.dialog_item_text {
display: block;
font-size: 12px;
margin-top: 4px;
color: #4A5159;
}
.approvalEdit_empty {
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
margin: auto;
text-align: center;
color: #787878;
font-size: 13px;
}
.approvalEdit_empty_icon {
margin: 0 auto;
width: 57px;
height: 69px;
background-image: url(http://www.gdaec.com.cn/resources/img/min/empty_icon.png);
background-size: contain;
}
.approvalEdit_empty_text {
margin-top: 18px;
}
.approvalEdit_empty_btn {
position: relative;
width: 97px;
height: 32px;
line-height: 32px;
border: 1px solid #4F77AA;
border-radius: 3px;
color: #4F77AA;
margin: 35px auto;
padding-left: 13px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
cursor: pointer;
}
.approvalEdit_empty_btn:before {
width: 12px;
height: 2px;
top: 14px;
left: 12px;
}
.approvalEdit_empty_btn:after {
width: 2px;
height: 12px;
left: 17px;
top: 9px;
}
.approvalEdit_empty_btn:after,
.approvalEdit_empty_btn:before {
position: absolute;
background-color: #2C6FB3;
content: "";
}
.Edit_scroll li {
position: relative;
}
.Edit_scroll li:hover .line {
border: 1px dotted #007ED3 !important;
}
.editItem_checkboxItemWrap {
max-width: 350px;
}
.editItem_selectItem {
display: inline-block;
margin-right: 20px;
margin-bottom: 10px;
vertical-align: top;
}
.editItem_selectItem .editItem_input {
width: 208px;
}
.editItem_icon,
.editItem_input {
display: inline-block;
}
.ww_inputText_Big,
.ww_textarea_Big {
width: 252px;
padding: 5px 6px;
font-size: 14px;
}
.editItem_icon {
margin-top: 5px;
margin-left: 7px;
vertical-align: top;
cursor: pointer;
}
.icon_ApprovalItemDel {
background-image: url(http://www.gdaec.com.cn/resources/img/min/icon.png);
background-position: 0 -637px;
width: 18px;
height: 18px;
}
.icon_ApprovalItemAdd {
background-image: url(http://www.gdaec.com.cn/resources/img/min/icon.png);
background-position: -645px -566px;
width: 18px;
height: 18px;
}
.ww_icon_ApprovalNote {
width: 24px;
height: 24px;
background-image: url("http://www.gdaec.com.cn/resources/img/min/icon-new.png");
background-repeat: no-repeat;
}
.notetemplate {
display: inline-block;
width: 70px;
height: 58px;
border: 1px solid #E4E6E9;
text-align: center;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
cursor: pointer;
}
.noteUnbind {
background-image: url("http://www.gdaec.com.cn/resources/img/min/icon-new-unbind.png")
}
.ww_icon_Approvalachieve {
width: 24px;
height: 24px;
background-image: url("http://www.gdaec.com.cn/resources/img/min/icon-achieve.png");
background-repeat: no-repeat;
}
.achievetemplate {
display: inline-block;
width: 70px;
height: 58px;
border: 1px solid #E4E6E9;
text-align: center;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
cursor: pointer;
}
.achieveUnbind {
background-image: url("http://www.gdaec.com.cn/resources/img/min/icon-achieve-unbind.png")
}
.ww_icon_Approvalmeeting {
width: 24px;
height: 24px;
background-image: url("http://www.gdaec.com.cn/resources/img/min/icon-meeting.png");
background-repeat: no-repeat;
}
.meetingtemplate {
display: inline-block;
width: 70px;
height: 58px;
border: 1px solid #E4E6E9;
text-align: center;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 20px;
cursor: pointer;
}
.meetingUnbind {
background-image: url("http://www.gdaec.com.cn/resources/img/min/icon-meeting-unbind.png")
}
.table-option {
position: relative;
background-color: #f5f5f5;
margin-bottom: 1px;
display: flex;
align-items: center;
justify-content: center;
}
.optionAddBtn,
.optionDelBtn {
cursor: pointer;
color: #20a4f9;
padding: 5px 0;
margin-right: 14px
}