前言：
协助项目需要实现一个签名的功能。
功能说明：1.有文本签名和头像签名。2.头像签名需要实现可拖拽功能。3.需要展示的是pdf的文件并需要获取签名位于pdf文件的相对位置。
功能一：实现拖拽
思路：H5拖拽及构造函数实现拖拽及缩放
要点：1.需要设置拖拽元素属性
draggable="true"
2.可拖拽的元素设置ondragstart获取数据
3.对可放置拖拽元素的设置ondragover函数
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
4.ondrop函数
设置放置后需要执行的方法。
1 /*H5拖拽并复制*/ 2 var moveDemo=null; 3 var _type; 4 var divs=document.querySelectorAll(".left_list li"); 5 var showBox=document.querySelector(".section_main_pdf"); 6 for(var i=0;i<divs.length;i++){ 7 divs[i].ondragstart=function(e){ 8 moveDemo=this.querySelector("img"); 9 _type=this.querySelector('.list_name').innerText; 10 } 11 }; 12 showBox.ondragover =function(e){ 13 e.preventDefault(); 14 //console.log('x:'+ e.pageX+';y:'+ e.pageY); 15 }; 16 showBox.ondrop=function(e){ 17 var _clone=moveDemo.cloneNode(); 18 this.append(_clone); 19 console.log(_clone); 20 _clone.className='dragIcon'; 21 $(_clone).css({ 22 'width':'100%', 23 'height':'100%' 24 }).attr('draggable',false); 25 $(_clone).wrap('<span class="img_outer"></span>'); 26 if(_type=='Signature'){ 27 $(_clone).parent().css({ 28 'position':'absolute', 29 'top': e.pageY, 30 'left': e.pageX, 31 'cursor':'move', 32 'display':'inline-block', 33 'border':'2px solid' 34 }).append('<span class="iconResize" style="position:absolute;display: inline-block; 10px;height: 10px;' + 35 'cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;' + 36 'border:2px solid;border-radius:50%"></span>').attr({ 37 'data-icon':'signature', 38 'data-page':config.defaultPage 39 }); 40 } 41 else if(_type=='PIN'){ 42 $(_clone).parent().css({ 43 'position':'absolute', 44 'top': e.pageY, 45 'left': e.pageX, 46 'cursor':'move', 47 'display':'inline-block', 48 'border':'2px solid' 49 }).attr({ 50 'data-icon':'pin', 51 'data-page':config.defaultPage 52 }); 53 } 54 };
功能二：构造拖拽及缩放函数
思路：通过获取鼠标事件及元素位置
1 /*构造拖拽及缩放函数*/ 2 $(document).mousemove(function(e) { 3 if (!!this.move) { 4 var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix, 5 callback = document.call_down || function() { 6 $(this.move_target).css({ 7 'top': e.pageY - posix.y, 8 'left': e.pageX - posix.x 9 }); 10 }; 11 callback.call(this, e, posix); 12 } 13 }).mouseup(function(e) { 14 if (!!this.move) { 15 var callback = document.call_up || function(){}; 16 callback.call(this, e); 17 $.extend(this, { 18 'move': false, 19 'move_target': null, 20 'call_down': false, 21 'call_up': false 22 }); 23 } 24 });
备注于2017/7/26
而在拖拽过程中，由于说拖拽中也要限制不能拖拽出canvas画布外，于是又在构造函数这里添加了判断实现不可拖拽出canvas
附带如下代码：
1 $(document).mousemove(function(e) { 2 if (!!this.move) { 3 var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix, 4 callback = document.call_down || function() { 5 var _toTop=e.pageY-posix.y, 6 _toLeft=e.pageX-posix.x; 7 8 /*获取canvas左下角位置*/ 9 var canvasHigh=$("#canvas").height();//pdf高 10 var canvasWid=$("#canvas").width();//pdf宽 11 var canvasPosTop=$("#canvas").offset().top;//pdf距离顶部 12 var canvasPosBottom=$("#canvas").offset().top+canvasHigh;//pdf底部距离顶部 13 var canvasPosLeft=$("#canvas").offset().left;//pdf距离左边 14 var canvasPosRight=canvasPosLeft+canvasWid;//pdf右边距离左边 15 16 if(_toTop < canvasPosTop){ 17 _toTop = canvasPosTop 18 } 19 if(_toTop > (canvasPosBottom - $(this.move_target).height()) ){ 20 _toTop = (canvasPosBottom - $(this.move_target).height()) 21 } 22 if(_toLeft < canvasPosLeft){ 23 _toLeft = canvasPosLeft 24 } 25 if(_toLeft > (canvasPosRight - $(this.move_target).width()) ){ 26 _toLeft =(canvasPosRight - $(this.move_target).width()) 27 } 28 29 $(this.move_target).css({ 30 'top': _toTop ,//e.pageY - posix.y, 31 'left': _toLeft//e.pageX - posix.x 32 }); 33 }; 34 callback.call(this, e, posix); 35 } 36 })
功能三：pdf展示
要点：引入pdf.js和pdf.worker.js进行API解析和核心解析
说明：1.pdf.js不能打开本地文件，需要服务器启动
2.需要Firefox下运行报错才有提示(firefox的pdf解析)
1 var loadingTask=PDFJS.getDocument(config.url); 2 loadingTask.promise.then( 3 function getPdf(pdf){ 4 pdf.getPage(config.defaultPage).then( 5 function getPage(page){ 6 var scale=1; 7 var viewport=page.getViewport(scale); 8 var canvas=document.getElementById('canvas'); 9 var context=canvas.getContext('2d'); 10 canvas.height=config.outerHigh; 11 canvas.width=config.outerWid; 12 var renderContext={ 13 canvasContext:context, 14 viewport:viewport 15 }; 16 page.render(renderContext); 17 }, 18 function pageError(msg){ 19 console.log(msg); 20 } 21 ) 22 }, 23 function pdfError(msg){ 24 alert(msg); 25 } 26 );
备注于2017/7/26
由于pdf文件的大小各异，于是进行了如下调整，是canvas展示的pdf进行缩放显示
调整上段代码后的结果：
1 var loadingTask=PDFJS.getDocument(config.url); 2 loadingTask.promise.then( 3 function getPdf(pdf){ 4 pdf.getPage(config.defaultPage).then( 5 function getPage(page){ 6 var scale=1; 7 var viewport=page.getViewport(scale); 8 var canvas=document.getElementById('canvas'); 9 var context=canvas.getContext('2d'); 10 var ch2vh=(config.outerHigh/viewport.height).toFixed(2), 11 cw2vw=(config.outerWid/viewport.width).toFixed(2); 12 if(ch2vh < cw2vw){ 13 viewport=page.getViewport(ch2vh); 14 }else{ 15 viewport=page.getViewport(cw2vw); 16 } 17 canvas.height=config.outerHigh; 18 canvas.width=config.outerWid; 19 var renderContext={ 20 canvasContext:context, 21 viewport:viewport 22 }; 23 page.render(renderContext); 24 }, 25 function pageError(msg){ 26 console.log(msg); 27 } 28 ) 29 }, 30 function pdfError(msg){ 31 alert(msg); 32 } 33 );
汇总：
1.签名js文件
备注：在交付的时候那边发现了在ie下拖拽时获取的图片有问题，然后又来找到了我，经过一轮的调试(ps：ie调试真不爽)，
发现获取字符串时候，ie好像默认添加了空格符，所以进不了if语句，现见if判断调整为：
if(
(_type).toLowerCase().trim()=='signature'
)
elseif同理。
再则ie报错不支持append()，所以将this.append()调整为this.appendChild()。
(备注：调整于2017/07/05)
1 $(function(){ 2 3 /*H5拖拽并复制*/ 4 var moveDemo=null; 5 var _type; 6 var divs=document.querySelectorAll(".left_list li"); 7 var showBox=document.querySelector(".section_main_pdf"); 8 for(var i=0;i<divs.length;i++){ 9 divs[i].ondragstart=function(e){ 10 moveDemo=this.querySelector("img"); 11 _type=this.querySelector('.list_name').innerText; 12 } 13 }; 14 showBox.ondragover =function(e){ 15 e.preventDefault(); 16 //console.log('x:'+ e.pageX+';y:'+ e.pageY); 17 }; 18 showBox.ondrop=function(e){ 19 var _clone=moveDemo.cloneNode(); 20 this.append(_clone); 21 console.log(_clone); 22 _clone.className='dragIcon'; 23 $(_clone).css({ 24 'width':'100%', 25 'height':'100%' 26 }).attr('draggable',false); 27 $(_clone).wrap('<span class="img_outer"></span>'); 28 if(_type=='Signature'){ 29 $(_clone).parent().css({ 30 'position':'absolute', 31 'top': e.pageY, 32 'left': e.pageX, 33 'cursor':'move', 34 'display':'inline-block', 35 'border':'2px solid' 36 }).append('<span class="iconResize" style="position:absolute;display: inline-block; 10px;height: 10px;' + 37 'cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;' + 38 'border:2px solid;border-radius:50%"></span>').attr({ 39 'data-icon':'signature', 40 'data-page':config.defaultPage 41 }); 42 } 43 else if(_type=='PIN'){ 44 $(_clone).parent().css({ 45 'position':'absolute', 46 'top': e.pageY, 47 'left': e.pageX, 48 'cursor':'move', 49 'display':'inline-block', 50 'border':'2px solid' 51 }).attr({ 52 'data-icon':'pin', 53 'data-page':config.defaultPage 54 }); 55 } 56 }; 57 58 /*构造拖拽及缩放函数*/ 59 $(document).mousemove(function(e) { 60 if (!!this.move) { 61 var posix = !document.move_target ? {'x': 0, 'y': 0} : document.move_target.posix, 62 callback = document.call_down || function() { 63 $(this.move_target).css({ 64 'top': e.pageY - posix.y, 65 'left': e.pageX - posix.x 66 }); 67 }; 68 callback.call(this, e, posix); 69 } 70 }).mouseup(function(e) { 71 if (!!this.move) { 72 var callback = document.call_up || function(){}; 73 callback.call(this, e); 74 $.extend(this, { 75 'move': false, 76 'move_target': null, 77 'call_down': false, 78 'call_up': false 79 }); 80 } 81 }); 82 83 /*实例化*/ 84 $(document).on('mousedown','.img_outer',function(e){ 85 var offset=$(this).offset(); 86 this.posix={ 87 'x': e.pageX-offset.left, 88 'y': e.pageY-offset.top 89 }; 90 $.extend(document,{ 91 'move':true, 92 'move_target':this 93 }); 94 }); 95 $(document).on('mousedown','.iconResize',function(e){ 96 var that=this; 97 var posix = { 98 'w': $(this).parent().width(), 99 'h': $(this).parent().height(), 100 'x': e.pageX, 101 'y': e.pageY 102 }; 103 $.extend(document, {'move': true, 'call_down': function(e) { 104 $(that).parent().css({ 105 'width': Math.max(30, e.pageX - posix.x + posix.w), 106 'height': Math.max(30, e.pageY - posix.y + posix.h) 107 }); 108 }}); 109 return false; 110 }); 111 112 113 //获取选中元素 114 $(document).on('click','.img_outer',function(e){ 115 $(".img_outer").removeClass("active"); 116 var _active=$(this).hasClass("active"); 117 if(_active){ 118 $(this).removeClass("active"); 119 }else{ 120 $(this).addClass("active"); 121 } 122 }); 123 124 /*渲染PDF*/ 125 /* var _container=$(".section_main_pdf"); 126 PDFJS.workerSrc='js/pdf.worker.js'; 127 128 var config={ 129 //url:'txt/userAgreeDoc.pdf',//pdf路径 130 url:'txt/webpack.pdf', 131 outerHigh:_container.height(),//容器高 132 outerWid:_container.width(),//容器宽 133 defaultPage:1,//默认第一页 134 totalPage:6//总页数 135 };*/ 136 137 renderPdf(); 138 /*上一页*/ 139 $("input.page_pre").on('click',function(){ 140 if(config.defaultPage>1){ 141 --config.defaultPage; 142 $(".page_num_cur").text(config.defaultPage); 143 renderPdf(); 144 } 145 }); 146 /*下一页*/ 147 $("input.page_next").on('click',function(){ 148 if(config.defaultPage<config.totalPage){ 149 ++config.defaultPage; 150 $(".page_num_cur").text(config.defaultPage); 151 renderPdf(); 152 } 153 }); 154 /*GO*/ 155 $("input.page_go_val").on('click',function(){ 156 var _val=$("input.page_val").val(); 157 if(_val>0 && _val<=config.totalPage){ 158 config.defaultPage=parseInt(_val);//pdf不会自动转换字符串为数字 159 console.log(config.defaultPage); 160 $(".page_num_cur").text(_val); 161 renderPdf(); 162 } 163 }); 164 165 function renderPdf(){ 166 var loadingTask=PDFJS.getDocument(config.url); 167 loadingTask.promise.then( 168 function getPdf(pdf){ 169 pdf.getPage(config.defaultPage).then( 170 function getPage(page){ 171 var scale=1; 172 var viewport=page.getViewport(scale); 173 var canvas=document.getElementById('canvas'); 174 var context=canvas.getContext('2d'); 175 canvas.height=config.outerHigh; 176 canvas.width=config.outerWid; 177 var renderContext={ 178 canvasContext:context, 179 viewport:viewport 180 }; 181 page.render(renderContext); 182 }, 183 function pageError(msg){ 184 console.log(msg); 185 } 186 ) 187 }, 188 function pdfError(msg){ 189 alert(msg); 190 } 191 ); 192 193 //对不在当前页面的签名进行隐藏或显示 194 var lists=$(".section_main_pdf .img_outer"); 195 for(var i=0;i<lists.length;i++){ 196 if(lists.eq(i).data('page')==config.defaultPage){ 197 lists.eq(i).css({ 198 'visibility':'visible' 199 }); 200 }else{ 201 lists.eq(i).css({ 202 'visibility':'hidden' 203 }); 204 } 205 } 206 } 207 }); 208 209 //选择头像 210 $(document).on('change','#selectUser',function(e){ 211 //通过字符串拼接选中值来实现切换图片 212 var _val=$(this).find('option:selected').val(); 213 var _imgVal=$(".img_outer.active"); 214 if(_val=='spouse'){ 215 _imgVal.find('img').attr({ 216 'src':'images/pin.png' 217 }); 218 _imgVal.attr('data-id',_val); 219 } 220 }); 221 222 //保存信息 223 $(document).on('click','#saveMsg',function(e){ 224 /*获取canvas左下角位置*/ 225 var canvasHigh=$("#canvas").height();//pdf高 226 var canvasWid=$("#canvas").width();//pdf宽 227 //console.log('canvasHigh:'+canvasHigh); 228 var canvasPosTop=$("#canvas").offset().top;//pdf距离顶部 229 var canvasPosBottom=$("#canvas").offset().top+canvasHigh;//pdf底部距离顶部 230 var canvasPosLeft=$("#canvas").offset().left;//pdf距离左边 231 var canvasPosRight=canvasPosLeft+canvasWid;//pdf右边距离左边 232 //console.log('canvasPosTop:'+canvasPosTop+';canvasPosLeft:'+canvasPosLeft); 233 234 /*遍历获取每个签名的位置*/ 235 var obj=new Array(); 236 var lists=$(".section_main_pdf .img_outer"); 237 for(var i=0;i<lists.length;i++){ 238 var _left=parseInt(lists.eq(i).css('left')); 239 if(_left<canvasPosLeft || _left> canvasPosRight){ 240 alert('请在文件中签名'); 241 return; 242 } 243 var _top=parseInt(lists.eq(i).css('top')); 244 if(_top<canvasPosTop || _top>canvasPosBottom){ 245 alert('请在文件中签名'); 246 return; 247 } 248 var arr={ 249 type:lists.eq(i).data('icon'),//签名类型 250 wid:lists.eq(i).width(),//签名的宽 251 high:lists.eq(i).height(),//签名的高 252 id:lists.eq(i).data('id'),//用户id 253 x:_left-canvasPosLeft,//距离pdf左下角的x, 254 y:Math.abs(_top+lists.eq(i).height()-canvasPosBottom),//距离pdf左下角的y, 255 page:lists.eq(i).data('page'),//签名所在页 256 }; 257 obj.push(arr); 258 } 259 console.log('obj:'+JSON.stringify(obj)); 260 //下一步：异步提交 261 });
2.签名html文件
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>签名</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/signature.css"> 8 </head> 9 <body> 10 <div class="container"> 11 <div class="header"> 12 <div class="header_inner clearfix"> 13 <div class="header_left"> 14 <span class="header_left_name">webpack中文指南.pdf</span> 15 </div> 16 <div class="header_right"> 17 <input id="saveMsg" type="button" value="Save" class="header_right_save"> 18 </div> 19 </div> 20 </div> 21 <div class="section clearfix"> 22 <div class="section_left"> 23 <h3 class="left_title">Select and Drag Icon</h3> 24 <ul class="left_list"> 25 <li draggable="true"> 26 <span class="img_outer"> 27 <img src="images/signature.png"> 28 </span> 29 <span class="list_name"> 30 Signature 31 </span> 32 </li> 33 <li draggable="true"> 34 <span class="img_outer"> 35 <img src="images/pin.png"> 36 </span> 37 <span class="list_name"> 38 PIN 39 </span> 40 </li> 41 </ul> 42 </div> 43 <div class="section_main"> 44 <div class="section_main_pdf"> 45 <canvas id="canvas"></canvas> 46 </div> 47 <div class="section_main_page"> 48 <div class="page clearfix"> 49 <div class="page_detail"> 50 <input type="button" value="<" class="page_pre"> 51 <span class="page_num"> 52 <span class="page_num_cur">1</span> 53 / 54 <span class="total_page">29</span> 55 </span> 56 <input type="button" value=">" class="page_next active"> 57 </div> 58 <div class="page_go"> 59 <span class="page_go_page">Page</span> 60 <input type="text" class="page_val"> 61 <input type="button" value="GO" class="page_go_val"/> 62 </div> 63 </div> 64 </div> 65 </div> 66 <div class="section_right"> 67 <h3 class="right_title">Select the Signature</h3> 68 <div class="right_select"> 69 <select id="selectUser"> 70 <option>Please Select</option> 71 <option value="spouse">Spouse</option> 72 </select> 73 </div> 74 </div> 75 </div> 76 </div> 77 78 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> 79 <!--API解析--> 80 <script src="js/pdf.js"></script> 81 <!--核心解析--> 82 <!--<script src="js/pdf.worker.js"></script>--> 83 <script src="js/signature.js"></script> 84 <script> 85 /*渲染PDF*/ 86 var _container=$(".section_main_pdf"); 87 PDFJS.workerSrc='js/pdf.worker.js'; 88 89 var config={ 90 //url:'txt/userAgreeDoc.pdf',//pdf路径 91 url:'txt/webpack.pdf', 92 outerHigh:_container.height(),//容器高 93 outerWid:_container.width(),//容器宽 94 defaultPage:1,//默认第一页 95 totalPage:29//总页数 96 }; 97 </script> 98 <script src="js/responseData.js"></script> 99 <script> 100 </script> 101 </body> 102 </html>
3.签名已存在时的反显
备注：之前上传的版本后来发现了位置反显有误，调整了.img_outer的top位置：
top:'+(this.canvasBottom-resData[i].y-resData[i].high)+'px;
(修改时间：17/06/30)
1 /** 2 * Created by aaron on 2017/6/16. 3 */ 4 5 //var data=[{"type":"pin","wid":44,"high":44,"x":332,"y":379,"page":1},{"type":"signature","wid":44,"high":44,"x":187,"y":608,"page":1}]; 6 7 (function($,window,undefined){ 8 var resData={ 9 canvasLeft:$(".section_main_pdf").offset().left, 10 canvasBottom:$(".section_main_pdf").height()+$(".section_main_pdf").offset().top, 11 init:function(){ 12 this.getData(); 13 }, 14 getData:function(){ 15 var that=this; 16 $.ajax({ 17 url:'./data/signature.json', 18 type:'post', 19 dataType:'json', 20 async:false, 21 success:function(data){ 22 console.log(data); 23 if(data.isSuccess){ 24 that.resolveData(data.dataList); 25 } 26 } 27 }) 28 }, 29 resolveData:function(data){ 30 console.log(this); 31 console.log(JSON.stringify(data)); 32 var html=''; 33 var resData=data; 34 console.log('resData:'+resData.length); 35 for(var i=0;i<resData.length;i++){ 36 html+='<span class="img_outer" data-icon="'+resData[i].type+'" data-page="'+resData[i].page+'" ' + 37 'style="position:absolute;cursor:move;display:inline-block;border:2px solid;top:'+(resData[i].y+this.canvasBottom-resData[i].high)+'px;' + 38 'left:'+(resData[i].x+this.canvasLeft)+'px;'+(resData[i].wid+4)+'px;height:'+(resData[i].high+4)+'px;">' ; 39 if(resData[i].type=='signature'){ 40 html+='<img src="" class="dragIcon" style=" 100%;height: 100%"/>'+ 41 '<span class="iconResize" style="display: inline-block;10px;position:absolute;' + 42 'height:10px;cursor:se-resize;right:-5px;bottom:-5px;background-color:#fff;border:2px solid ;border-radius:50%"></span>'; 43 }else{ 44 html+='<img src="" class="dragIcon" style=" 100%;height: 100%"/>'; 45 } 46 html+='</span>'; 47 } 48 $(".section_main_pdf").append(html); 49 } 50 }; 51 resData.init(); 52 })(jQuery,window,undefined);
4.样式css
1 /*CSS RESET*/ 2 @charset "utf-8"; 3 html, body, div, span, 4 h1, h2, h3, h4, h5, h6, p, 5 img, small, strong, 6 b, i, 7 dl, dt, dd, ol, ul, li, 8 fieldset, form, label, legend, 9 table, caption, tbody, tfoot, thead, tr, th, td, 10 article, aside, canvas, details, figcaption, figure, 11 footer, header, menu, nav, section, summary, 12 time, mark, audio, video { 13 margin:0; 14 padding:0; 15 border:0; 16 outline:0; 17 font-size:100%; 18 vertical-align:baseline; 19 background:transparent; 20 } 21 /*重置界面字体字号色号*/ 22 body { 23 font-family:'Microsoft YaHei',"Trebuchet MS",Verdana,Helvetica,Arial,sans-serif; 24 font-size:16px; 25 color:#000000; 26 min-width:1200px; 27 } 28 dl li,ul li{ 29 list-style-type: none; 30 } 31 a { 32 margin:0; 33 padding:0; 34 font-size:100%; 35 text-decoration: none; 36 vertical-align:baseline; 37 background:transparent; 38 } 39 table { 40 border-collapse:collapse; 41 border-spacing:0; 42 } 43 i,b{ 44 font-style: normal; 45 font-weight: normal; 46 } 47 img{ 48 border:0; 49 vertical-align: middle; 50 } 51 *{ 52 box-sizing: border-box; 53 } 54 /*清除浮动*/ 55 .clearfix:after{ 56 content:''; 57 display:block; 58 height:0; 59 visibility:hidden; 60 clear:both; 61 } 62 .clearfix{ 63 zoom:1; 64 } 65 66 /*重置input/select样式*/ 67 input,select{ 68 -webkit-appearance: none; 69 -moz-appearance: none; 70 appearance: none; 71 } 72 73 ::-webkit-input-placeholder { 74 color: #d2d2d2; } 75 :-moz-placeholder { 76 color: #d2d2d2; } 77 ::-moz-placeholder { 78 color: #d2d2d2; } 79 :-ms-input-placeholder { 80 color: #d2d2d2; } 81 input:focus::-webkit-input-placeholder{ color:#d2d2d2;}
1 @charset "utf-8"; 2 body{ 3 background-color: #e2e2ee; 4 } 5 .header{ 6 width: 100%; 7 background-color:#3d62ad; 8 } 9 .header .header_inner,.section{ 10 width: 1200px; 11 margin:0 auto; 12 } 13 .header .header_inner{ 14 line-height: 60px; 15 } 16 .header .header_left{ 17 float: left; 18 } 19 .header .header_left_name{ 20 font-size: 18px; 21 color:#ffffff; 22 } 23 .header .header_right{ 24 float: right; 25 } 26 .header input.header_right_save{ 27 font-size: 16px; 28 width: 140px; 29 height: 34px; 30 line-height: 34px; 31 background-color: #ffffff; 32 color:#3d62ad; 33 border: 0; 34 -webkit-border-radius: 4px; 35 -moz-border-radius: 4px; 36 border-radius: 4px; 37 cursor: pointer; 38 } 39 40 .section .section_left{ 41 float: left; 42 width: 230px; 43 background-color: #ffffff; 44 margin-right: 20px; 45 min-height: 840px; 46 } 47 .section .section_main{ 48 float: left; 49 width: 700px; 50 background-color: #ffffff; 51 min-height: 840px; 52 } 53 .section .section_right{ 54 float: right; 55 width: 230px; 56 background-color: #ffffff; 57 min-height: 840px; 58 } 59 60 .section h3.left_title, 61 .section h3.right_title{ 62 line-height: 55px; 63 text-align: center; 64 } 65 /*实现可拖拽*/ 66 .section ul.left_list li{ 67 display: inline-block; 68 width: 230px; 69 height: 45px; 70 line-height: 45px; 71 padding-left: 25px; 72 margin:10px 0; 73 color:#3d62ad; 74 cursor: move; 75 } 76 .section span.list_name{ 77 margin-left:15px; 78 } 79 .section ul.left_list li:first-child{ 80 margin-top:0; 81 } 82 83 .section_main .section_main_pdf{ 84 width: 550px; 85 height: 755px; 86 margin: 15px auto; 87 box-shadow: 0 1px 3px 0 rgba(0,0,0,0.30); 88 } 89 .section_main .page{ 90 width: 310px; 91 height: 45px; 92 line-height: 45px; 93 margin: 0 auto; 94 } 95 .section_main .page_detail{ 96 float: left; 97 } 98 .section_main .page_go{ 99 float: right; 100 } 101 .section_main input.page_pre, 102 .section_main input.page_next{ 103 width: 22px; 104 height: 22px; 105 line-height: 22px; 106 color:#a7a7a7; 107 background-color:#e9edf5; 108 border:0; 109 cursor: pointer; 110 } 111 .section_main input.page_pre.active, 112 .section_main input.page_next.active{ 113 color:#3d62ad; 114 } 115 .section_main span.page_num{ 116 padding:0 10px; 117 } 118 .section_main span.page_num_cur{ 119 color:#3d62ad; 120 } 121 122 .section_main input.page_val{ 123 width: 35px; 124 height: 20px; 125 line-height: 20px; 126 margin:0 2px 0 10px; 127 text-align: center; 128 border:1px solid #3d62ad; 129 } 130 .section_main input.page_go_val{ 131 font-weight: 800; 132 color:#3d62ad; 133 background-color: transparent; 134 border: 0; 135 font-size: 16px; 136 cursor: pointer; 137 } 138 input:focus{ 139 outline: none; 140 } 141 142 .section_right{ 143 text-align: center; 144 } 145 .section_right .right_select{ 146 width: 185px; 147 height: 29px; 148 line-height: 29px; 149 margin: 0 auto; 150 position: relative; 151 } 152 .section_right .right_select:after{ 153 position: absolute; 154 content: ''; 155 right: 1px; 156 top: 1px; 157 display: inline-block; 158 width: 34px; 159 height: 27px; 160 background:url("../images/arrow_bottom.png") no-repeat center; 161 color:#ffffff; 162 z-index: 0; 163 } 164 .section_right .right_select select{ 165 width: 185px; 166 height: 29px; 167 padding:0 34px 0 15px ; 168 border:1px solid #6b6e82; 169 outline: none; 170 background-color: transparent; 171 position: absolute; 172 left: 0; 173 top: 0; 174 z-index: 1; 175 } 176 177 .img_outer.active{ 178 border-color:#3d62ad !important; 179 }
5.文件结构
