爱好
读书
1
ul { list-style:none; } body { background:#fff; } body,input,button,textarea,select { font-family:"Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif; } * { margin:0; padding:0; } a { text-decoration:none; color:#666; } /*去除原样式*/ a,input,button,textarea,img { -webkit-tap-highlight-color:rgba(0,0,0,0); outline:none; -moz-outline-style:none; -webkit-appearance:none; } input { margin-top:-1px; } table { border-collapse:collapse; } .nonei { display:none !important; } .fl { float:left !important; } .fr { float:right !important; } /* 清浮动 */ .clearfix::after { content:"020"; display:block; height:0; clear:both; visibility:hidden; } .clearfix { /* 触发 hasLayout */ zoom:1; } .none { display:none !important; } .block { display:block !important; } .oV { overflow:hidden !important; } .center { text-align:center !important; } .left { text-align:left !important; } .right { text-align:right !important; } .block { display:block; } .opa0 { opacity:0; } .w100 { width:100% !important; } .wauto { width:auto !important; } .hauto { height:auto !important; } .fnone { float:none !important; } .border0 { border:0 !important; } .fw300 { font-weight:300; } .tl { text-align:left !important; } .tr { text-align:right !important; } .tc { text-align:center !important; } .pops { position:absolute; display:block; width:100%; z-index:15; } .pos { position:absolute; width:100%; display:block; } input::-webkit-input-placeholder { /* WebKit browsers */ color:rgb(156,156,156); font-size:14px; letter-spacing:2px; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:rgb(156,156,156); font-size:14px; letter-spacing:2px; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color:rgb(156,156,156); font-size:14px; letter-spacing:2px; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color:rgb(156,156,156); font-size:14px; letter-spacing:2px; } * { touch-action:pan-y; } /* 框架更改 */ body { background:#fff; font-family:'PingFang SC',Helvetica,'STHeiti STXihei','Microsoft YaHei',Tohoma,Arial,sans-serif; } /* 头部导航 */ .m-navbar { background:linear-gradient(120deg,#f13529,#f13529); color:#000000; } .m-navbar:after { height:0; border:none } .navbar-center .navbar-title,.navbar-item,.navbar-item .back-ico:before,.navbar-item .next-ico:before { color:#000000; } .tabbar-item.tabbar-active { color:#ffc317; } .tabbar-txt { font-size:14px; } .m-navbar,.navbar-center,.navbar-item { height:1.3rem; } /* 网格 */ .m-grids-2:before,.grids-item:after { height:0; border:none; } .m-grids-2 .grids-item:not(:nth-child(2n)):before { border:none; } /* 按钮 */ .btnBox { width:80%; margin:1.3rem auto; } .mybtn { background:#fc5050; color:#fff; height:1.3rem; font-size:.45rem; } /* 提示 */ .demo-tip { color:rgb(76,75,75); padding-left:.8rem; } .demo-tip:after { height:0; border:none; } /* 弹出菜单 */ .actionsheet-item,.actionsheet-action { font-size:16px; } /* 进度 */ .step { height:1.3rem; line-height:1.1rem; background-color:#fff; border-bottom:10px solid #f0f0f0; text-indent:1em; } /* 进度 */ .main { position:relative; height:auto; } .topAnimate { background:url(../images/5.png)no-repeat top; background-size:100%; height:5.6rem; } .title-index { width:100%; height:auto; margin:1.3rem auto 2.3rem; text-align:center; } /* CANVAS */ /* loan-money */ .loan-money canvas,.loan-date canvas { width:300px; display:block; margin:0 auto; position:relative; z-index:1; } .boxPosition { position:relative; top:-77px; } .textStyle { width:1rem; color:#dbdbdb; text-align:center; } .pos1 { top:62px; left:30px; } .pos2 { top:62px; right:30px; } .pos3 { top:76px; left:30px; } .pos4 { top:76px; right:30px; } .myBox { position:absolute; width:100%; z-index:-1; background:url(../images/7.png) no-repeat 98% 60%,url(../images/6.png)no-repeat 2% 60%; background-size:20px 20px; } .myBox p { width:4rem; font-size:.45rem; color:#f5352a; border:1px #f5352a solid; border-radius:25px; padding:0.3rem .4rem; text-align:center; margin:.2rem auto; font-weight:bold; } .myBox h5 { color:#646464; text-align:center } /* loan-money */ /* CANVAS */ .s-btn { padding:0 15px; width:100%; margin:.5rem auto 0; } .submit-now { width:100%; height:40px; color:rgb(255,255,255); font-size:14px; margin:0rem auto 0; border:0; background:linear-gradient(to right,#f13529,#f13529); border-radius:25px; -webkit-border-radius:25px; -moz-border-radius:25px; -ms-border-radius:25px; -o-border-radius:25px; } /* ========================== index ========================================= */
更新时间:2020-01-08 10:32:32
用jq和canvas,实现移动端双拖动注释详细