123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552 |
- {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" style="display: none;"></div>
-
- </div>
- </div>
- <style>
- #in_city{
- position:absolute !important;top:30px !important;left:0px !important;
- padding-top: 10px;
- }
- #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;
- }
- </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));
- })
-
- inCity.place(pla); //出发地
- inCity.destination(dest); //目的地
- inCity.cityClick(cityA); //显示赋值城市
-
-
-
- $(document).on('click','#quxiao',function(){
-
- $("#in_city").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();
- }
- });
-
-
- /*
- $(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;">
- <!-- <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%;">
- <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>
|