XBMemberWeb
/
setting-watermark.html

<!--
 * @Description:
 * @Author: lijiajin
 * @Date: 2020-07-06 09:04:53
 * @LastEditTime: 2020-07-10 08:49:56
 * @LastEditors: lijiajin
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,address=no">
    <title>水印设置</title>
    <link rel="stylesheet" href="./icon/iconfont.css">
    <link rel="stylesheet" href="./plugins/layui/css/layui.css">
    <link rel="stylesheet" href="./css/nanoscroller.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/style.css">
    <script src="./js/JQuery2.1.4.js"></script>
    <script src="./plugins/layui/layui.js"></script>
    <script src="./js/spin.min.js"></script>
    <script src="./js/loading.js"></script>

</head>

<body>
<div class="wrap-box wrap-watermark">
    <p class="title-h1">水印设置</p>
    <div class="content-scroll-box content-scroll-box-border nano">
        <form class="content-scroll nano-content ajax-form" onsubmit="return false;" action="">
            <div class="item-box no-pdt item-box-bac mgt10">
                <p class="item-title fl">是否开启</p>
                <div class="turn-btn-div fl">
                    <a href="javascript:;" class="icon iconfont iconswitch-off"><input type="checkbox"
                                                                                       name="watermarkbtn"
                                                                                       class="turn-btn-input"/></a>
                </div>
            </div>
            <div class="left-box fl">
                <div class="item-box">
                    <p class="item-title">选择栏目</p>
                    <div class="item mgt10">
                        <div class="check-box-div">
                            <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong"><input
                                    class="checkbox-input" type="checkbox" name="checkbox" value="1"/></a>
                            <span class="text">产品</span>
                        </div>
                        <div class="check-box-div">
                            <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong"><input
                                    class="checkbox-input" type="checkbox" name="checkbox" value="2"/></a>
                            <span class="text">新闻</span>
                        </div>
                        <div class="check-box-div">
                            <a href="javascript;:" class="icon iconfont iconduoxuanweixuanzhong"><input
                                    class="checkbox-input" type="checkbox" name="checkbox" value="3"/></a>
                            <span class="text">案例</span>
                        </div>
                    </div>
                </div>
                <div class="item-box">
                    <p class="item-title">水印图片<span>（建议上传png格式）</span></p>
                    <div class="item mgt15">
                        <div class="bank-pic-list-box">
                            <ul class="bank-pic-list" data-maxNum="1" data-necessary="true" data-minNum="1"
                                data-empty="请上传水印图片">
                                <li class="pic-item add-pic-btn" onclick="showPicBankDialog(this)"></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="item-box">
                    <p class="item-title">水印透明度</p>
                    <div class="item mgt15">
                        <div class="watermark-slide" id="slide"></div>
                        <input type="hidden" name="percent" id="percent" value="0"/>
                    </div>
                </div>

                <div class="item-box">
                    <p class="item-title">水印图片位置</p>
                    <div class="item mgt10 watermark-position-radio">
                        <div class="radio-box-div">
                            <a href="javascript;:" class="icon iconfont icondanxuanxuanzhong"><input
                                    class="radiobox-input" type="radio" name="radio" value="1" checked/></a>
                            <span class="text">左上角</span>
                        </div>
                        <div class="radio-box-div">
                            <a href="javascript;:" class="icon iconfont icondanxuanxuanzhong-copy"><input
                                    class="radiobox-input" type="radio" name="radio" value="2"/></a>
                            <span class="text">右上角</span>
                        </div>
                        <div class="radio-box-div">
                            <a href="javascript;:" class="icon iconfont icondanxuanxuanzhong-copy"><input
                                    class="radiobox-input" type="radio" name="radio" value="3"/></a>
                            <span class="text">居中</span>
                        </div>
                        <div class="radio-box-div">
                            <a href="javascript;:" class="icon iconfont icondanxuanxuanzhong-copy"><input
                                    class="radiobox-input" type="radio" name="radio" value="4"/></a>
                            <span class="text">左下角</span>
                        </div>
                        <div class="radio-box-div">
                            <a href="javascript;:" class="icon iconfont icondanxuanxuanzhong-copy"><input
                                    class="radiobox-input" type="radio" name="radio" value="5"/></a>
                            <span class="text">右下角</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right-box fr">
                <div class="item-box" style="padding: 0">
                    <p class="item-title">预览</p>
                </div>
                <div class="preview">
                    <div class="img-bac"><img onload="watermarkPicLoaded(this)"/></div>
                </div>
            </div>
            <div class="clear"></div>

            <div class="item-box item-btn">
                <div class="item">
                    <button type="button" class="layui-btn ajax-form-commit">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>

<script src="./js/echarts.min.js"></script>
<script src="./js/jquery.nanoscroller.js"></script>
<script src="./js/check.js"></script>
<script src="./js/common.js"></script>
<script src="./js/form-commit.js"></script>
<script>
    layui.use('slider', function () {
        var slider = layui.slider;
        slider.render({
            elem: '#slide'
            , min: 0 //最小值
            , max: 100 //最大值
            , value: 0
            , tips: true
            , input: false
            , change: function (value) { //回调实时显示当前值
                $("#percent").val(value);
            }
            , setTips: function (value) { //自定义提示文本
                return value + '%';
            }
        });
    });
</script>
</body>

</html>