zc100/template/mobile/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" 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="wx-form-group">
                    <input type="text" class="wx-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>
                {eyou:if condition="isset($usersConfig['users_verification']) && 3 == $usersConfig['users_verification']"}
                <div class="wx-form-group">
                    <div class="field">
                        <input type="hidden" name="__mobile_1_token__" value="{$Request.token.__mobile_1_token__}" />
                        <input type="text" class="wx-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="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 -->
            {/eyou:case}

            {eyou:case value="email"}
                <!-- 邮箱文本框 start -->
                <div class="wx-form-group">
                    <input type="text" class="wx-form-control" 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="wx-form-group">
                    <div class="field">
                        <input type="text" class="wx-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="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" style="margin-top: 33px;">
    <div class="input-group" style="position:relative;width: 100%;">
        {eyou:eq name="$vo.is_required" value="1"}<!--<em class="tis">(必填)</em>-->{/eyou:eq}
        <input style="    color: rgb(51, 51, 51);font-size: 15px;padding:0; border: none;
    border-bottom: 1px solid #eee;"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_bak"></div>
        <div id="in_city" style="display: none;"></div>

    </div>
</div>
<style>

    .city_a_le1:first-child{
        overflow-y: auto !important;
    }
    #in_city_bak{
        position: fixed;
        top:0;left: 0;z-index: 500;
        display: none;
        background: #000;
        opacity: 0.8;
        width: 100%;height: 100%;
    }
    #in_city{
        position:fixed !important;top:8%  !important;left:5% !important;z-index: 1000;
        padding-top: 10px;
        width: 90%;height:80%;
    }
    #in_city h1{
        font-size: 20px !important;
    }

    .screen a {
        padding: 1px 5px;
        font-size: 12px;
    }
    .city_a_le1 a{
        font-size: 12px;
    }

    #quxiao{
   /*     display: none !important;*/
    }
    .city_a_le1{
        height: 100%;
    }

    .screen a {
        padding: 10px 10px;
        font-size: 12px;
        width: 100%;
        margin: 0 auto;
/*        line-height: 15px;*/
        word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
        word-break:break-all;
        display: block;float: left;
        border-bottom:none !important;
    }
    .screen .shar {
        border: none !important;
/*        border-right: solid 1px #c92436;*/
        color: red;
    }

    .city_a_le1{
        padding: 10px 0px;
    }

    .screen{
        float: left;
        width: 20%;
        height: 100%;
    }
    .city_pos{
        float: left;
        width: 80%;
        height: 100%;
    }
    #quxiao{
        bottom: -40px !important;
    }


</style>
<script type="text/javascript">


    var cityA = $(".city_a_le1 a"); //城市
    var pla = $("#{$vo.fieldArr}_{$vo.name|default=''}");  //出发地
    var dest = $("#destination");  //目的地
    // 默认值
    inCity.width = "100%";  //城市选择框  宽
    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));
        $('#in_city_bak').show();
    })

    inCity.place(pla); //出发地
    inCity.destination(dest);  //目的地
    inCity.cityClick(cityA); //显示赋值城市



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

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

    });


    $(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();
            $('#in_city_bak').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" style="width:100%;    ">
        {eyou:eq name="$vo.is_required" value="1"}<!--<em class="tis">(必填)</em>-->{/eyou:eq}
        <input style="font-size: 15px;padding:0;border: none;
    border-bottom: 1px solid #eee;" 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="width:100%;">
    <fieldset style="    padding: 0; border:none;height: 36px;line-height: 36px; ">
        <!-- <legend>{$vo.title}{eyou:if condition="1 == $vo.is_required"}(必填){/eyou:if}</legend>-->
        {eyou:volist name="$vo.dfvalue" id="v2"}
        <label class="radio-label" style="margin-right: 5%;margin-bottom:0px;">
            <span style="font-size: 15px;color: #999;">{$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>