zc100/template/pc/users/users_reg_field.htm

{eyou:volist name="$users_para" id="vo"}
        {eyou:switch name="vo.dtype"}
            {eyou:case value="hidden"}
                <!-- 隐藏域 start -->
                <div class="form-group group_z" style="display: none;">                
                    <div class="row">
                        <div class="ey-form-file-title col-md-3"></div>
                        <div class="col-md-9">
                            <input type="hidden" class="input-txt" id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" value="{$vo.dfvalue|default=''}">
                        </div>
                    </div>
                </div>
                <!-- 隐藏域 start -->
            {/eyou:case}

            {eyou:case value="mobile"}
                <!-- 手机文本框 start -->
                <div class="form-group group_z">
                    <div class="input-group">
                        {eyou:eq name="$vo.is_required" value="1"}<em class="tis">(必填)</em>{/eyou:eq}
                        <input type="text" class="form-control" required id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" maxlength="11" value="{$vo.dfvalue|default=''}" placeholder="{$vo.title}">
                    </div>
                </div>
                {eyou:if condition="isset($usersConfig['users_verification']) && 3 == $usersConfig['users_verification']"}
                <div class="form-group group_z">
                    <div class="input-group btn-direction">
                        <input type="hidden" name="__mobile_1_token__" value="{$Request.token.__mobile_1_token__}" />
                        <input type="text" class="form-control" id="{$vo.fieldArr}_{$vo.name|default=''}_code" name="{$vo.fieldArr}[{$vo.name|default=''}_code]" placeholder="手机验证码" autocomplete="off">
                        <input type="button" id="{$vo.fieldArr}_{$vo.name|default=''}_button" onclick="get_{$vo.fieldArr}{$vo.name|default=''}_code();" class="btn btn-primary sento" value="获取验证码"/>
                    </div>
                </div>
                <script type="text/javascript">
                    function get_{$vo.fieldArr}{$vo.name|default=''}_code() {
                        var mobile = $("#{$vo.fieldArr}_{$vo.name|default=''}").val();
                        // 手机号是否为空
                        if (!mobile) {
                            $("#{$vo.fieldArr}_{$vo.name|default=''}").focus();
                            layer.msg('请输入{$vo.title}！', {time: 1500});
                            return false;
                        }
                        
                        // 手机格式不正确
                        var reg = /^1[0-9]{10}$/i;
                        if (!reg.test(mobile)) {
                            $("#{$vo.fieldArr}_{$vo.name|default=''}").focus();
                            layer.msg('请输入正确的{$vo.title}！', {time: 1500});
                            return false;
                        }
                
                        // 设置为不可点击
                        $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('获取中…').attr('disabled', 'disabled');
                
                        var __mobile_1_token__ = $('input[name=__mobile_1_token__]').val();
                        $.ajax({
                            url: "{eyou:url link='api/Ajax/SendMobileCode' /}",
                            data: {type:'reg', mobile:mobile, is_mobile:true, title:'账号注册', source:0, __mobile_1_token__:__mobile_1_token__},
                            type:'post',
                            dataType:'json',
                            success:function(res){
                                if (res.code == 1) {
                                    {$vo.fieldArr}{$vo.name|default=''}_countdown();
                                    layer.msg(res.msg, {time: 1500});
                                } else {
                                    $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('获取验证码').removeAttr("disabled");
                                    layer.alert(res.msg, {icon: 2, title: false, closeBtn: 0});
                                }
                            },
                            error : function() {
                                $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('获取验证码').removeAttr("disabled");
                                layer.alert('发送失败，请尝试重新发送！', {icon: 5, title: false, closeBtn: 0});
                            }
                        });
                    }
                
                    function {$vo.fieldArr}{$vo.name|default=''}_countdown(){
                        // 倒计时
                        var setTime;
                        var time = 120;
                        setTime = setInterval(function() {
                            if(0 >= time) {
                                clearInterval(setTime);
                                return false;
                            }
                
                            time--;
                            $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val(time + '秒').attr('disabled', 'disabled');
                            if(time == 0) $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('获取验证码').removeAttr("disabled");
                        }, 1000);
                    }
                </script>
                {/eyou:if}
                <!-- 手机文本框 end --> 
                <!-- 手机文本框 end -->
            {/eyou:case}

            {eyou:case value="email"}
                <!-- 邮箱文本框 start -->
                <div class="form-group group_z">
                    <!-- {eyou:eq name="$vo.is_required" value="1"}<em class="tis">(必填)</em>{/eyou:eq} -->
                    <input type="text" class="form-control h60" required id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" value="{$vo.dfvalue|default=''}" placeholder="{$vo.title}" >
                </div>

                {eyou:if condition="isset($usersConfig['users_verification']) && 2 == $usersConfig['users_verification']"}
                <div class="form-group group_z">
                    <div class="input-group btn-direction">
                        <input type="text" class="form-control" id="{$vo.fieldArr}_{$vo.name|default=''}_code" name="{$vo.fieldArr}[{$vo.name|default=''}_code]" value="" placeholder="邮箱验证码">
                        <input type="button" id="{$vo.fieldArr}_{$vo.name|default=''}_button" onclick="get_{$vo.fieldArr}{$vo.name|default=''}_code();" class="btn btn-primary sento" value="点击发送" />
                    </div>
                </div>
                <script type="text/javascript">
                    function get_{$vo.fieldArr}{$vo.name|default=''}_code(){
                        var email = $("#{$vo.fieldArr}_{$vo.name|default=''}").val();
                        var reg = /^[a-z0-9]([a-z0-9\\.]*[-_]{0,4}?[a-z0-9-_\\.]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+([\.][\w_-]+){1,5}$/i;
                        // 邮箱格式不正确
                        if(!reg.test(email)){
                            layer.msg('请正确输入邮箱地址！', {time: 1500});
                            return false;
                        }

                        $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('发送中…');
                        $("#{$vo.fieldArr}_{$vo.name|default=''}_button").attr('disabled', 'disabled');
                        $.ajax({
                            // async:false,
                            url: "{eyou:url link='user/Smtpmail/send_email' /}",
                            data: {type:'reg',email:email,title:'账号注册',scene:2},
                            type:'post',
                            dataType:'json',
                            success:function(res){
                                if(res.code == 1){
                                    {$vo.fieldArr}{$vo.name|default=''}_countdown();
                                    layer.msg(res.msg, {time: 1500});
                                }else{
                                    $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('点击发送');
                                    $("#{$vo.fieldArr}_{$vo.name|default=''}_button").removeAttr("disabled");
                                    showErrorAlert(res.msg);
                                }
                            },
                            error : function(e) {
                                $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('点击发送');
                                $("#{$vo.fieldArr}_{$vo.name|default=''}_button").removeAttr("disabled");
                                showErrorAlert(e.responseText);
                            }
                        });
                    }

                    function {$vo.fieldArr}{$vo.name|default=''}_countdown(){
                        // 倒计时
                        var setTime;
                        var time = {php}echo config('global.email_send_time');{/php};
                        setTime = setInterval(function(){
                            if(0 >= time){
                                clearInterval(setTime);
                                return;
                            }
                            time--;
                            $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val(time+'秒');
                            $("#{$vo.fieldArr}_{$vo.name|default=''}_button").attr('disabled', 'disabled');

                            if(time == 0){
                                $("#{$vo.fieldArr}_{$vo.name|default=''}_button").val('点击发送');
                                $("#{$vo.fieldArr}_{$vo.name|default=''}_button").removeAttr("disabled");
                            }
                        },1000);
                    }
                </script>
                {/eyou:if}
                <!-- 邮箱文本框 end -->
            {/eyou:case}

            {eyou:case value="text"}
                <!-- 单行文本框 start -->

{eyou:if condition='($vo.title == "地区")'}

<!--引入城市-->
<link rel="stylesheet" href="https://www.zc10000.com/template/pc/js/city/style.css" media="all">
<script src="https://www.zc10000.com/template/pc/js/jquery-v3.1.1.min.js?t=544151"></script>
<script type="text/javascript" src="https://www.zc10000.com/template/pc/js/city/cityTemplate.js?t=225513619665"></script>
<script src="https://www.zc10000.com/template/pc/js/layer/3.1.1/layer.js"></script>


<div class="form-group group_z">
    <div class="input-group" style="position:relative;">
        {eyou:eq name="$vo.is_required" value="1"}<em class="tis">(必填)</em>{/eyou:eq}
        <input type="text" class="form-control" required id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" value="{$vo.dfvalue|default=''}" lay-verify="city" autocomplete="off"
               placeholder="请选择您的所在城市">

        <div id="in_city" style="display: none;"></div>

    </div>
</div>
<style>
    #in_city{
        position:absolute !important;top:60px !important;left:0px !important;
    }
    #in_city h1{
        font-size: 20px !important;
    }

    #quxiao{
        display: none !important;
    }
</style>
<script type="text/javascript">


    var cityA = $(".city_a_le1 a"); //城市
    var pla = $("#{$vo.fieldArr}_{$vo.name|default=''}");  //出发地
    var dest = $("#destination");  //目的地
    // 默认值
    inCity.width = "381";  //城市选择框  宽
    inCity.height = "";  //城市选择框  高
    inCity.id = "#in_city";  //城市选择框  父级ID
    inCity.Children = '.city_a_le1';  //城市名box
    // 初始化 城市HTML模板
    $(inCity.id).prepend(inCity._template.join(''));
    inCity.Hot(cityA);
    
    //城市 导航
    var apay = $(".screen a");
    
    var placeThis; //当前选择标签
    apay.click(function (obj) {  //城市导航
        inCity.payment($(this));
    })
    
    inCity.place(pla); //出发地
    inCity.destination(dest);  //目的地
    inCity.cityClick(cityA); //显示赋值城市


    $(document).on('click',function(e) {
        var $target = $(e.target);
        if (!$target.closest('#in_city').length && !$target.is('#in_city')) {
            /* alert('You clicked outside the div!');*/
            $("#in_city").hide();
        }
    });


  /*  $(document).on('click','#quxiao',function(){

        $("#in_city").hide();

    });*/
/*
    $(document).on('click','.container',function(){

        $("#in_city").hide();

    });

    $(document).on('click','.screen a',function(){

        $("#in_city").show();

    });
*/




    //改为layer弹窗
   /* $(document).on('focus','#users__para_5',function(){

        console.log('dfdf');


        layer.open({
            title: '在线调试'
            ,content: $("#city_div").html()
            ,area: ['500px','300px']
        });

    });*/




</script>
{eyou:else /}
<div class="form-group group_z">
    <div class="input-group">
        {eyou:eq name="$vo.is_required" value="1"}<em class="tis">(必填)</em>{/eyou:eq}
        <input type="text" class="form-control" required id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" value="{$vo.dfvalue|default=''}" placeholder="{$vo.title}">
    </div>
</div>
{/eyou:if}



                
                <!-- 单行文本框 end -->
            {/eyou:case}

            {eyou:case value="multitext"}
                <!-- 多行文本框 start -->
                <div class="form-group group_z">
                    <div class="input-group">
                        <textarea rows="5" cols="60" class="form-control" id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" {eyou:eq name="$vo.is_required" value="1"} placeholder="{$vo.title}（必填)" {eyou:else/} placeholder="{$vo.title}" {/eyou:eq}>{$vo.dfvalue|default=''}</textarea>
                    </div>
                </div>
                <!-- 多行文本框 end -->
            {/eyou:case}

            {eyou:case value="checkbox"}
                <!-- 复选框 start -->
                <div class="form-group group_z">
                    <fieldset>
                        <legend>{$vo.title}{eyou:if condition="1 == $vo.is_required"}(必填){/eyou:if}</legend>
                        {eyou:volist name="$vo.dfvalue" id="v2"}
                            <label class="checkbox-label">
                            	<span>{$v2}</span>
                            	<input type="checkbox" class="checkbox" name="{$vo.fieldArr}[{$vo.name|default=''}][]" value="{$v2}" {eyou:if condition="isset($vo['trueValue']) AND in_array($v2, $vo['trueValue'])"}checked="checked"{/eyou:if}>
                                <span class="check-mark"></span>
                            </label>
                        {/eyou:volist}
                    </fieldset>
                </div>
                <!-- 复选框 end -->
            {/eyou:case}

            {eyou:case value="radio"}
                <!-- 单选项 start -->
                <div class="form-group group_z" style="height: 60px;">
                    <fieldset style="height: 60px;    padding: 0.75em 0.625em 0.5em;">
                       <!-- <legend>{$vo.title}{eyou:if condition="1 == $vo.is_required"}(必填){/eyou:if}</legend>-->
                            {eyou:volist name="$vo.dfvalue" id="v2"}
                            <label class="radio-label">
                            	<span>{$v2}</span>
                            	<input type="radio" class="radio" name="{$vo.fieldArr}[{$vo.name|default=''}]" value="{$v2}" {eyou:if condition="isset($vo['trueValue']) AND in_array($v2, $vo['trueValue'])"}checked="checked"{/eyou:if}>
                                <span class="check-mark"></span>
                            </label>
                         {/eyou:volist}
                    </fieldset>
                </div>
                <!-- 单选项 end -->
            {/eyou:case}

            {eyou:case value="select"}
                <!-- 下拉框 start -->
                <div class="form-group group_z">
                    <fieldset>
                    <legend>{$vo.title}{eyou:if condition="1 == $vo.is_required"}(必填){/eyou:if}</legend>
                    <div class="select">
                        <div class="dd">
                            <select name="{$vo.fieldArr}[{$vo.name|default=''}]" id="{$vo.fieldArr}_{$vo.name|default=''}" class="form-control">
                                <option value="">请选择</option>
                                {eyou:volist name="$vo.dfvalue" id="v2"}
                                    <option value="{$v2}" {eyou:if condition="isset($vo['trueValue']) AND in_array($v2, $vo['trueValue'])"}selected{/eyou:if}>{$v2}</option>
                                {/eyou:volist}
                            </select>
                        </div>
                    </div>
                    </fieldset>
                </div>
                <!-- 下拉框 end -->
            {/eyou:case}
            <!-- 扩展 start -->
            <!-- 扩展 -->
            {eyou:case value="img"}
                <!-- 单张图 start -->
                <div class="form-group group_z">
                    <div class="input-group input-group-icon">
                        <input type="text" class="  form-control" id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" value="" style="display: none;"><!--{$vo.info|default=''}-->
                        <input class=" form-control {$vo.fieldArr}_{$vo.name|default=''}_input" placeholder="{$vo.title}" onClick="GetUploadify(1,'','allimg','{$vo.fieldArr}_{$vo.name|default=''}_call_back','{:url('user/Uploadify/upload',['resource'=>'reg'])}')">
                    </div>
                </div>
                <script type="text/javascript">
                    function {$vo.fieldArr}_{$vo.name|default=''}_call_back(fileurl_tmp)
                    {
                        $("#{$vo.fieldArr}_{$vo.name|default=''}").val(fileurl_tmp);
                        $(".{$vo.fieldArr}_{$vo.name|default=''}_input").val(fileurl_tmp);
                    }
                </script>
                <!-- 单张图 end -->
            {/eyou:case}
            
            {eyou:case value="imgs"}
            <!-- 多张图 start -->
            <div class="form-group group_z images_upload_main">
                <div class="input-group">
                    <button type="button" style="text-align: left;" class="form-control" onClick="GetUploadify(100,'','allimg','{$vo.fieldArr}_{$vo.name|default=''}_call_back', '', '{$vo.title}');">
                        {$vo.title}<span style="float: right;font-size: 16px;">点击上传</span>
                    </button>
                </div>
                <div style="margin: 5px 0;padding: 3px;border: 1px dashed #ebeced;display: none;" id="upload_imgs_{$vo.fieldArr}_{$vo.name|default=''}">
                    <!--上传填充-->
                </div>
                
                <!-- 上传图片显示的样板 start -->
                <div class="{$vo.fieldArr}_{$vo.name|default=''}_upload_tpl" style="display: none;">
                    <div class="fieldext_upload fieldext_upload_html">
                        <div class="images_upload_item">
                            <input type="hidden" name="{$vo.fieldArr}[{$vo.name|default=''}][]" value="">
                            <a  href="" >
                                <img src="__STATIC__/admin/images/add-button.jpg" width="42" height="42">
                            </a>
                            <a  class="delete" href="javascript:void(0)" title="删除"></a>
                        </div>
                    </div>
                </div>
                <!-- 上传图片显示的样板 end -->
            </div>
            <script type="text/javascript">
                var GetUploadify_url = "{:url('user/Uploadify/upload',['resource'=>'reg'])}";
            
                // 上传多图回调函数
                function {$vo.fieldArr}_{$vo.name|default=''}_call_back(paths){
                    var  last_div = $(".{$vo.fieldArr}_{$vo.name|default=''}_upload_tpl").html();
                    for (var i=0;i<paths.length ;i++ )
                    {
                        if ($("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''} .fieldext_upload_html").length == 0) {
                            $("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''}").css('display','');
                        }
                        $("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''}").append(last_div);  // 插入一个 新图片
            
            
                        $("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''} .fieldext_upload_html:last").find('a:eq(0)').attr('href',paths[i]).attr('onclick','').attr('target', "_blank");// 修改他的链接地址
                        $("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''} .fieldext_upload_html:last").find('img').attr('src',paths[i]);// 修改他的图片路径
                        $("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''} .fieldext_upload_html:last").find('a:eq(1)').attr('onclick',"{$vo.fieldArr}_{$vo.name|default=''}_ClearPicArr2(this,'"+paths[i]+"')").text('');
                        $("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''} .fieldext_upload_html:last").find('input').val(paths[i]); // 设置隐藏域 要提交的值
                    }
                }
                /*
             * 上传之后删除组图input
             * @access   public
             * @val      string  删除的图片input
             */
                function {$vo.fieldArr}_{$vo.name|default=''}_ClearPicArr2(obj,path)
                {
                    $(obj).parent().parent().remove();
                    if ($("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''} .fieldext_upload_html").length == 0) {
                        $("#upload_imgs_{$vo.fieldArr}_{$vo.name|default=''}").css('display','none');
                    }
                }
            </script>
            <!-- 多张图 end -->
            {/eyou:case}
            
            {case value="file"}
            {eyou:static file="/public/plugins/layui/css/layui.css" /}
            {eyou:static file="/public/plugins/layui/layui.js" /}
            <!-- 单个文件 start -->
            <div class="form-group group_z">
                <div class="input-group">
                    <input type="text" id="{$vo.fieldArr}_{$vo.name|default=''}" name="{$vo.fieldArr}[{$vo.name|default=''}]" value="{$vo.dfvalue|default=''}" style="display: none;">
                    <button type="button" style="text-align: left;" class="form-control" id="upload_{$vo.fieldArr}_{$vo.name|default=''}" >{$vo.title}<span style="float: right;font-size: 16px;" id="btntxt_file_{$vo.fieldArr}_{$vo.name|default=''}">点击上传</span></button>
                    <!-- <a  id="download_file_{$vo.fieldArr}_{$vo.name|default=''}" style="margin-left: 10px;text-decoration: underline;{eyou:notempty name='$vo.dfvalue' /}display: 'block';{eyou:else /}display: none;{/eyou:notempty}" {eyou:notempty name='$vo.dfvalue' /} href="{$vo.dfvalue|default=''}"  download="{$vo.dfvalue|get_filename=###}" {/eyou:notempty}>
                        <img src="__STATIC__/common/images/file.png" alt="" style="width: 16px;height:  16px;">下载附件
                    </a> -->
                </div>
            </div>
            
            <script>
                $(function(){
                    layui.use('upload', function(){
                        var upload = layui.upload;
            
                        //执行实例
                        upload.render({
                            elem: "#upload_{$vo.fieldArr}_{$vo.name|default=''}" //绑定元素
                            ,url: "{:url('user/Uploadify/DownloadUploadFileAjax')}"
                            ,exts: '{$vo.ext}'
                            ,size: {$vo.filesize} //限制文件大小，单位 KB
                            ,accept: 'file' //普通文件
                            ,done: function(res){
                                //上传完毕回调
                                if (res.state=="SUCCESS"){
                                    layer.msg('上传成功!')
                                    $("#btntxt_file_{$vo.fieldArr}_{$vo.name|default=''}").text('已上传');
                                    // $("#{$vo.fieldArr}_{$vo.name|default=''}").val(res.url);
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").css('display','');
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").attr('href',res.url);
                                    // var arr = res.url.split("/");
                                    // var download = arr[arr.length-1];
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").attr('download',download);
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").css('color','#000');
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").html('<img src="__STATIC__/common/images/file.png" alt="" style="width: 16px;height:  16px;">下载附件');
                                }else {
                                    $("#btntxt_file_{$vo.fieldArr}_{$vo.name|default=''}").text('点击上传');
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").css('display','');
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").css('color','red');
                                    // $("#download_file_{$vo.fieldArr}_{$vo.name|default=''}").text(res.state);
                                }
                            }
                            ,error: function(){
                                //请求异常回调
                            }
                        });
                    });
                })
            </script>
            <!-- 单个文件 end -->
            {/case}
            <!-- 扩展 end -->
        {/eyou:switch}
{/eyou:volist}

<style>

    /* 整个滚动条 */
    ::-webkit-scrollbar {
        width: 12px;               /* 滚动条的宽度 */
        height: 12px;              /* 滚动条的高度，对水平滚动条有效 */
        background-color: #f9f9fd; /* 滚动条的背景颜色 */
    }

    /* 滚动条轨道 */
    ::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #e1e1e1; /* 轨道的背景颜色 */
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #c1c1c1; /* 滑块的背景颜色 */
        border: 3px solid #e1e1e1; /* 滑块的边框和轨道相同的颜色，可以制造“边距”的效果 */
    }

    /* 滚动条滑块：悬停效果 */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #a8a8a8; /* 滑块的悬停颜色 */
    }

    /* 滚动条滑块：激活时的效果 */
    ::-webkit-scrollbar-thumb:active {
        background-color: #888888; /* 滑块的激活颜色 */
    }

    /* 滚动条按钮（上下箭头） */
    ::-webkit-scrollbar-button {
        display: none; /* 通常情况下不显示滚动条按钮 */
    }

    /* Firefox */
    html {
        scrollbar-width: thin; /* "auto" | "thin" | "none" */
        scrollbar-color: #c1c1c1 #e1e1e1; /* 滑块颜色 轨道颜色 */
    }


</style>