当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: h5手机端合同签名兼容案例

     最近客户需要修改一个手机端合同签约样子，但是他们的合同内容是后端加载过来的，为了保留他们原有的功能，尽可能的让手机端的样子和PC端一致，我使用了css中的transform属性，因为他们合同的正常显示的宽度大概是900px，所以将外层的div进行transform的缩放，并且为了兼容高度用js重新计算一个transform缩放后的高度的，下面是大概的场景和解决方案

<style>
@media only screen and (max-width: 767px) {
  /* 移动设备样式 */
   .treary_box{
        width: 900px;
        transform-origin: top left;
		transform: scale(0.37);
    }
    .cons{
      display: inline-block; /* 用于包裹所有元素，但不撑开.height */
      overflow: hidden;
}
}
   
    .treary_name{font-size: 25px;text-align: center}
    .treary_content{margin-top: 5px}
    .treary_content img{max-width: 100%!important;}
    .form_tip{font-size: 20px;text-align: center;color: red}
    .my_form{margin-top: 15px}
    .signature_tip{text-align: center;font-weight: bold;font-size: 18px}
    .signature{background-color: #eeeeee;margin: 20px auto}
    .signature_but_box{margin: 20px;height: 25px;}
    .signature_but{height: 25px;width: 50%;float: left;}
    .img_box{max-width: 95%;display: block;margin: 0 auto}
    .n-default .msg-wrap{position: relative;}
    /*.login-section{min-height: 550px}*/
    .showproduct {
    margin: 10px;
	font-size: 18px;
}
span.txt.flex1 {
    text-align: center;
}
.showproduct {
    background: #fff;
    font-family: 'Microsoft Yahei';
    padding: .25rem .3rem;
    position: relative;
}

    .popupBox{background: rgba(0, 0, 0, 0.3);position: fixed;top: 0;bottom: 0;right: 0;left: 0;display: none;justify-content: center;align-items: center;}
    .popup{background: #fff;border-radius: 10px;overflow: hidden;}
    .btnBox{height: 50px;display: flex;font-size: 22px;align-items: center;}
    .btnBox div{flex: 1;text-align: center;}
    .signature_img{height: 40px;width: 80px;border-style: dashed;  border-width: 1px;border-color: red;}
</style&gt;

<div id="content-container" class="container" style="background-color: #8c8a8a;">
    <div class="showproduct" >
        <div class="logon-tab clearfix">  </div>
        <div class="login-main">
            <div class="cons">
            <div class="treary_box" id="myDiv">
                <div class="treary_item treary_name">
                  合同的标题
                </div>
                <div >
                   这里是合同的内容
                </div>
            </div>
            </div>
            <div class="popupBox">
                <div class="popup">
                    <div id="signature" class="signature" ></div>
                    <!--                    <canvas id="signName" width="500" height="250">-->
                    <!--                        您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作-->
                    <!--                    </canvas>-->
                    <div class="btnBox">
                        <div id="createImage">确定</div>
                        <div id="clearCanvas">取消</div>
                    </div>
                </div>
            </div>
            <hr/>
            <div >
                {:token()}
                <input type="hidden" name="category_id" id="category_id" value="{$treaty_info.id}" />
                <input type="hidden" name="image" id="image" value="" />
                <div class="form-group">
                    <button class="btn btn-primary btn-lg btn-block btn-submit">{:__('提交')}</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="__ADDON__/js/index.js"></script>
<script>
    
    $(document).ready(function(){
    var innerDiv = document.querySelector("#myDiv");
    var innerHeight = innerDiv.offsetHeight;

    // 获取缩放比例并计算高度
    var transformValue = window.getComputedStyle(innerDiv).getPropertyValue("transform");
    var values = transformValue.split("(")[1].split(")")[0].split(",");
    var scaleX = values[0];
    var scaleY = values[3];
    var transformedHeight = innerHeight * scaleY;
    // 将父级DIV元素的高度设置为内部DIV元素的高度
    var container = document.querySelector(".cons");
    container.style.height = transformedHeight+100+ "px";
        var index = 0;
        var images = [];
        var tag_name = '';
        console.log("初始化",images);
        //初始化签名样式
        var arguments = {
            width: '400px',
            height: '250px',
            cssclass: 'signature',
            signatureLine: false,//去除默认画布上那条横线
            lineWidth: '5',
        };
        $("#signature").jSignature(arguments);


        //清除重写
        $('#clearCanvas').on('click',function(){
            $("#signature").jSignature("reset");
            //清除重写调用方式
            // $('#signName').clearSignature();
            $('.popupBox').css('display' , 'none')
        });
        //点击唤起签名
        $('.signClass' ).on('click', function(e) {
            tag_name = e.currentTarget.dataset.tag_name;//每个签名的标志
            index = $(this).index()
            $('.popupBox').css('display' , 'flex')
        })
        //确认按钮
        $('#createImage').on('click',function(){
            // console.log(tag_name)
            //标准格式但是base64会被tp框架过滤，所不校验，但是jSignature默认是使用png
            var datapair = $("#signature").jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            i.image = datapair[1];
            $.ajax({
                url: "/addons/treaty/index/upload",
                data: {'image_data':encodeURIComponent(i.src)},
                type: "post",
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg);
                        // console.log("tag_name",tag_name);
                        // console.log("开始",images);
                        var is_replace = 0;
                        $.each(images, function (index, item) {
                            if(item['name'] == tag_name){
                                images[index] = {name:tag_name,url:res.data.url};
                                is_replace = 1
                            }
                        })
                        if(!is_replace){
                            images.push({name:tag_name,url:res.data.url});
                        }
                        // console.log("结束",images);
                        $('#newImage').attr('src',res.data.url);
                        var className = ".sign_"+tag_name
                        $(className).html(' <img  class="signature_img" src="' +res.data.url  + '" />')
                        $("#signature").jSignature("reset");
                        $('.popupBox').css('display' , 'none')
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        });



        $(".btn-submit").click(function () {
            var category_id = $("#category_id").val();
            var token = $("input[name='__token__']").val();
            $.ajax({
                url: "/addons/treaty/index/index",
                data: {__token__:token,images:images,category_id:category_id},
                type: "post",
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            window.location.href=res.url;
                        },1000)

                    } else {
                        $("input[name='__token__']").val(res.data.token)
                        layer.msg(res.msg);
                        return false;
                    }
                }
            })
        });


        $("img").click(function () {
            var src = $(this).attr("src");
            // layer.open({
            //     type: 1,
            //     title: false,
            //     closeBtn: 1,
            //     shadeClose: false,
            //     skin: 'img_box',
            //     content: '<img style="display: block;margin: 0 auto;max-width: 85%" src="'+$(this).attr("src")+'">'
            // });
        });
    });
</script>

第二版，第一版兼容性很差，补充一下后续兼容方案


<style>
:root {
  --scale-ratio: 0.37;
}
@media (min-width: 300px) and (max-width: 767px) {
  /* 此处为你要应用的 CSS 样式代码 */
     .treary_box{
       width: 900px;
        transform-origin: top left;
		transform: scale(var(--scale-ratio));
    }
    .cons{
      display: inline-block; /* 用于包裹所有元素，但不撑开.height */
      overflow: hidden;
}
}

.bot {
			background-color: #e5e2e2;
			font-family: Arial, sans-serif;
			line-height: 1.5;
		}
   
		.showproduct:before {
			content: "";
			display: block;
			position: absolute;
			top: -30px;
			left: -20px;
			width: 80px;
			height: 80px;
			background-color: #e5e2e2;
			transform: rotate(-45deg);
			z-index: -1;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		}
    .treary_name{font-size: 25px;text-align: center}
    .treary_content{margin-top: 5px}
    .treary_content img{max-width: 100%!important;}
    .form_tip{font-size: 20px;text-align: center;color: red}
    .my_form{margin-top: 15px}
    .signature_tip{text-align: center;font-weight: bold;font-size: 18px}
    .signature{background-color: #eeeeee;margin: 20px auto}
    .signature_but_box{margin: 20px;height: 25px;}
    .signature_but{height: 25px;width: 50%;float: left;}
    .img_box{max-width: 95%;display: block;margin: 0 auto}
    .n-default .msg-wrap{position: relative;}
    /*.login-section{min-height: 550px}*/
    .showproduct {
        	margin: 0 auto;
			padding: 50px;
			background-color: white;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			border-radius: 5px;
			position: relative;
    margin: 10px;
	font-size: 18px;
}
span.txt.flex1 {
    text-align: center;
}

.showproduct {
    background: #fff;
    font-family: 'Microsoft Yahei';
    padding: .25rem .3rem;
    position: relative;
        border-radius: 15px;
}

    .popupBox{background: rgba(0, 0, 0, 0.3);position: fixed;top: 0;bottom: 0;right: 0;left: 0;display: none;justify-content: center;align-items: center;}
    .popup{background: #fff;border-radius: 10px;overflow: hidden;}
    .btnBox{height: 50px;display: flex;font-size: 22px;align-items: center;}
    .btnBox div{flex: 1;text-align: center;}
    .signature_img{height: 60px;width: 100px;border-style: dashed;  border-width: 1px;border-color: red;}
</style>
<body>
    <div class="bot">
<div id="content-container" class="container" style="background-color: #e5e2e2;">
    <div class="showproduct" >
        <div class="logon-tab clearfix">  </div>
        <div class="login-main">
            <div class="cons">
            <div class="treary_box" id="myDiv">
                <div class="treary_item treary_name" style="margin-top: 35px">
                    {$treaty_info.name?:"没有名称"}
                </div>
                <div >
                    {$treaty_info.content?:"没有内容"}
                </div>
            </div>
            </div>
            <div class="popupBox">
                <div class="popup">
                    <div id="signature" class="signature" ></div>
                    <!--                    <canvas id="signName" width="500" height="250">-->
                    <!--                        您的浏览器当前不支持canvas画布，请更换别的浏览器进行签名操作-->
                    <!--                    </canvas>-->
                    <div class="btnBox">
                        <div id="createImage">确定</div>
                        <div id="clearCanvas">取消</div>
                    </div>
                </div>
            </div>
            <hr/>
            <div >
                {:token()}
                <input type="hidden" name="category_id" id="category_id" value="{$treaty_info.id}" />
                <input type="hidden" name="image" id="image" value="" />
                <div class="form-group">
                    <button class="btn btn-primary btn-lg btn-block btn-submit">{:__('提交')}</button>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<script src="__ADDON__/js/index.js"></script>
<script>
  function handleResize() {
    const widthRatio = $(window).width() / 1100;
    $('body').css('--scale-ratio', widthRatio);
    document.body.style.setProperty('--scale-ratio', widthRatio);
    var innerDiv = document.querySelector("#myDiv");
    var innerHeight = innerDiv.offsetHeight;
    
    // 获取缩放比例并计算高度
    var transformValue = window.getComputedStyle(innerDiv).getPropertyValue("transform");
    console.log(transformValue);
    if(transformValue=='none'){
        var transformedHeight = innerHeight;
    // 将父级DIV元素的高度设置为内部DIV元素的高度
        var container = document.querySelector(".cons");
        container.style.height = transformedHeight+ "px";
    }else{
        var values = transformValue.split("(")[1].split(")")[0].split(",");
        var scaleX = values[0];
        var scaleY = values[3];
        var transformedHeight = innerHeight * scaleY;
        // 将父级DIV元素的高度设置为内部DIV元素的高度
        var container = document.querySelector(".cons");
        container.style.height = transformedHeight+100+ "px"; 
    }
    
}
function debounce(callback, delay) {
  let timerId;
  return function() {
    const args = arguments;
    const context = this;
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback.apply(context, args);
    }, delay);
  }
}
$(window).resize(debounce(handleResize,250));
    $(document).ready(function(){
      handleResize();
        var index = 0;
        var images = [];
        var tag_name = '';
        console.log("初始化",images);
        //初始化签名样式
        var arguments = {
            width: '800px',
            height: '250px',
            cssclass: 'signature',
            signatureLine: false,//去除默认画布上那条横线
            lineWidth: '5',
        };
        $("#signature").jSignature(arguments);


        //清除重写
        $('#clearCanvas').on('click',function(){
            $("#signature").jSignature("reset");
            //清除重写调用方式
            // $('#signName').clearSignature();
            $('.popupBox').css('display' , 'none')
        });
        //点击唤起签名
        $('.signClass' ).on('click', function(e) {
            tag_name = e.currentTarget.dataset.tag_name;//每个签名的标志
            index = $(this).index()
            $('.popupBox').css('display' , 'flex')
        })
        //确认按钮
        $('#createImage').on('click',function(){
            // console.log(tag_name)
            //标准格式但是base64会被tp框架过滤，所不校验，但是jSignature默认是使用png
            var datapair = $("#signature").jSignature("getData", "image");
            var i = new Image();
            i.src = "data:" + datapair[0] + "," + datapair[1];
            i.image = datapair[1];
            $.ajax({
                url: "/addons/treaty/index/upload",
                data: {'image_data':encodeURIComponent(i.src)},
                type: "post",
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg);
                        // console.log("tag_name",tag_name);
                        // console.log("开始",images);
                        var is_replace = 0;
                        $.each(images, function (index, item) {
                            if(item['name'] == tag_name){
                                images[index] = {name:tag_name,url:res.data.url};
                                is_replace = 1
                            }
                        })
                        if(!is_replace){
                            images.push({name:tag_name,url:res.data.url});
                        }
                        // console.log("结束",images);
                        $('#newImage').attr('src',res.data.url);
                        var className = ".sign_"+tag_name
                        $(className).html(' <img  class="signature_img" src="' +res.data.url  + '" />')
                        $("#signature").jSignature("reset");
                        $('.popupBox').css('display' , 'none')
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        });



        $(".btn-submit").click(function () {
            var category_id = $("#category_id").val();
            var token = $("input[name='__token__']").val();
            $.ajax({
                url: "/addons/treaty/index/index",
                data: {__token__:token,images:images,category_id:category_id},
                type: "post",
                success: function (res) {
                    if (res.code == 1) {
                        layer.msg(res.msg);
                        setTimeout(function () {
                            window.location.href=res.url;
                        },1000)

                    } else {
                        $("input[name='__token__']").val(res.data.token)
                        layer.msg(res.msg);
                        return false;
                    }
                }
            })
        });


        $("img").click(function () {
            var src = $(this).attr("src");
            // layer.open({
            //     type: 1,
            //     title: false,
            //     closeBtn: 1,
            //     shadeClose: false,
            //     skin: 'img_box',
            //     content: '<img style="display: block;margin: 0 auto;max-width: 85%" src="'+$(this).attr("src")+'">'
            // });
        });
    });
</script>

 

原文地址:https://blog.csdn.net/u014692298/article/details/130255521

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_16457.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

上一篇 认识 CSS pointer-events 属性
下一篇 CSS3:nth-child选择器基本用法简述

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。