利用bootstrap的modal和tab制作的联动自定义UI

最新推荐文章于 2022-06-16 07:33:32 发布
最新推荐文章于 2022-06-16 07:33:32 发布
阅读量233 收藏 1
点赞数
文章标签： ui javascript 移动开发 ViewUI
原文链接：http://www.cnblogs.com/jerryyj/p/9621575.html
版权

直接上代码。

 
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        var productTypeData = [{
            "codeId": 10043,
            "meaning": "服务",
            "parentCodeValueId": null,
        }, {
            "codeId": 10043,
            "meaning": "销售",
            "parentCodeValueMeaning": null
        }];
        var productCatalog1Data = [{
            "parentCategotyId": "-1",
            "categotyName": "Callidus",
            "categotyId": "101"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "MS",
            "categotyId": "102"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Offshore",
            "categotyId": "103"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Oracle",
            "categotyId": "104"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "SAP",
            "categotyId": "105"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "Siemens",
            "categotyId": "106"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "测试产品",
            "categotyId": "107"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "穆迪",
            "categotyId": "108"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "夏尔",
            "categotyId": "110"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "运维",
            "categotyId": "111"
        }, {
            "parentCategotyId": "-1",
            "categotyName": "test",
            "categotyId": "10023"
        }];
        var productCatalog2Data = [{
            "parentCategotyId": "101",
            "categotyName": "Callidus",
            "categotyId": "112"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Dynamics AX",
            "categotyId": "113"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Dynamics CRM",
            "categotyId": "114"
        }, {
            "parentCategotyId": "102",
            "categotyName": "Sharepoint",
            "categotyId": "115"
        }, {
            "parentCategotyId": "103",
            "categotyName": "JAVA开发",
            "categotyId": "116"
        }, {
            "parentCategotyId": "103",
            "categotyName": "Oracle开发",
            "categotyId": "117"
        }, {
            "parentCategotyId": "103",
            "categotyName": "SAP开发",
            "categotyId": "118"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Agile",
            "categotyId": "119"
        }, {
            "parentCategotyId": "104",
            "categotyName": "BI",
            "categotyId": "120"
        }, {
            "parentCategotyId": "104",
            "categotyName": "EBS ERP",
            "categotyId": "121"
        }, {
            "parentCategotyId": "104",
            "categotyName": "EBS HR",
            "categotyId": "122"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Hyperion",
            "categotyId": "123"
        }, {
            "parentCategotyId": "104",
            "categotyName": "Middleware",
            "categotyId": "124"
        }, {
            "parentCategotyId": "104",
            "categotyName": "PeopleSoft",
            "categotyId": "125"
        }, {
            "parentCategotyId": "104",
            "categotyName": "SIEBLE",
            "categotyId": "126"
        }, {
            "parentCategotyId": "104",
            "categotyName": "其他",
            "categotyId": "127"
        }, {
            "parentCategotyId": "105",
            "categotyName": "BO",
            "categotyId": "128"
        }, {
            "parentCategotyId": "105",
            "categotyName": "HANA",
            "categotyId": "129"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP ERP",
            "categotyId": "130"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP HR",
            "categotyId": "131"
        }, {
            "parentCategotyId": "105",
            "categotyName": "SAP CRM",
            "categotyId": "132"
        }, {
            "parentCategotyId": "106",
            "categotyName": "NX",
            "categotyId": "133"
        }, {
            "parentCategotyId": "106",
            "categotyName": "SolidEdge",
            "categotyId": "134"
        }, {
            "parentCategotyId": "106",
            "categotyName": "TeamCenter",
            "categotyId": "135"
        }, {
            "parentCategotyId": "106",
            "categotyName": "Techomatix",
            "categotyId": "136"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HCM",
            "categotyId": "137"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HEC费控系统",
            "categotyId": "138"
        }, {
            "parentCategotyId": "107",
            "categotyName": "HLS融资租赁系统",
            "categotyId": "139"
        }, {
            "parentCategotyId": "107",
            "categotyName": "IT规划",
            "categotyId": "140"
        }, {
            "parentCategotyId": "107",
            "categotyName": "MAS ERP",
            "categotyId": "141"
        }, {
            "parentCategotyId": "107",
            "categotyName": "SRM供应商关系管理系统",
            "categotyId": "142"
        },{
            "parentCategotyId": "108",
            "categotyName": "穆迪",
            "categotyId": "144"
        }, {
            "parentCategotyId": "109",
            "categotyName": "移动应用",
            "categotyId": "145"
        }, {
            "parentCategotyId": "109",
            "categotyName": "开发",
            "categotyId": "146"
        }, {
            "parentCategotyId": "110",
            "categotyName": "BPO",
            "categotyId": "147"
        }, {
            "parentCategotyId": "110",
            "categotyName": "ICast",
            "categotyId": "148"
        }, {
            "parentCategotyId": "110",
            "categotyName": "Ifile",
            "categotyId": "149"
        }, {
            "parentCategotyId": "111",
            "categotyName": "MAS",
            "categotyId": "150"
        }, {
            "parentCategotyId": "111",
            "categotyName": "ITO",
            "categotyId": "151"
        }, {
            "parentCategotyId": "111",
            "categotyName": "Oralce客服中心",
            "categotyId": "152"
        }, {
            "parentCategotyId": "111",
            "categotyName": "SAP CCC",
            "categotyId": "153"
        }, {
            "parentCategotyId": "104",
            "categotyName": "DSTEST",
            "categotyId": "10009"
        }
        ];

        $(function () {
            //根据数据源创建各个button按钮
            //产品类型
            var $tr=$("<tr></tr>");
            for(let i=0;i<Math.ceil(productTypeData.length);i++){
                var $td=$("<td></td>");
                var $btn=$("<button class=\"btn btn-default\"></button>").text(productTypeData[i].meaning);
                $btn.appendTo($td);
                $td.appendTo($tr)
                $tr.appendTo($("#productTypeTable"))
            }
            //一级产品
            for(var j=0;j<Math.ceil(productCatalog1Data.length/4);j++){
                var $tr1=$("<tr></tr>");
                for(let i=j*4;i<j*4+4&&i<productCatalog1Data.length;i++){
                    var $td1=$("<td></td>");
                    var $btn1=$("<button class=\"btn btn-default\"></button>").text(productCatalog1Data[i].categotyName);
                    $btn1.attr("id",productCatalog1Data[i].categotyId);
                    $btn1.appendTo($td1);
                    $td1.appendTo($tr1);
                    $tr1.appendTo($("#firstTable"));
                }
            }
            var item={};
            var itemList=[];
            $("#showModel").click(function () {//弹出modal框并且初始化
                item={};
                $("#myModal").modal();
                $("#error").text("");
                $('#myTab a:first').tab('show');
                $("#home button").removeClass('btn-primary');
                $("#firstTable button").removeClass('btn-primary');
                $("#secondTable button").removeClass('btn-primary');

            })
            $("#home button").click(function () {//给产品类型上的button添加点击事件
                item.n1=$(this).text();
                $("#home button").removeClass('btn-primary');
                $(this).addClass("btn btn-primary");
                $('#myTab li:eq(1) a').tab('show');//跳转到第二个标签页
            });
            $("#firstTable button").click(function () {//给一级产品上的button添加点击事件
                item.n2=$(this).text();
                $("#firstTable button").removeClass('btn-primary');
                $(this).addClass("btn btn-primary");
                var $fatherId=$(this).attr("id");
                //二级产品
                var filterData=productCatalog2Data.filter(function (i, index, arr) {
                    return i.parentCategotyId==$fatherId;
                });
                $("#secondTable").html("");
                for(var k=0;k<Math.ceil(filterData.length/4);k++){
                    var $tr2=$("<tr></tr>");
                    for(let q=k*4;q<k*4+4&&q<filterData.length;q++){
                        var $td2=$("<td style=\"border: 0px solid transparent\"></td>");
                        var $btn2=$("<button class=\"btn btn-default\"></button>").text(filterData[q].categotyName);
                        $btn2.appendTo($td2);
                        $td2.appendTo($tr2);
                        $tr2.appendTo($("#secondTable"));
                    }
                }
                $('#myTab li:eq(2) a').tab('show');//跳转到第二个标签页
                $("#secondTable button").click(function () {//给二级产品上的button添加点击事件
                    item.n3=$(this).text();
                    $("#secondTable button").removeClass('btn-primary');
                    $(this).addClass("btn btn-primary");
                });
            });
            $("#submit").click(function () {//确定按钮
                if(!item.n1){
                    $("#error").text('请选择产品类型');
                }else if(!item.n2){
                    $("#error").text('请选择一级产品');
                }else if(!item.n3){
                    $("#error").text('请选择二级产品');
                }else{
                    $("#myModal").modal('hide')
                    itemList.push(item);
                }
                var newList=$.map(itemList,function (obj) {
                   return  (obj.n1+"."+obj.n2+"."+obj.n3);
                })
               $("#choose").text(newList.join(";").toString());
            });
        });
    </script>
</head>
<body>

<!-- 按钮触发模态框 -->
<button class="btn btn-success btn-lg" id="showModel">
    开始演示模态框
</button>
<div id="choose"></div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header" style="border: none;height: 15px">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h5  style="color: red" class="modal-title" id="error"></h5>
                </div>
            <div class="modal-body">
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab">产品类型
                        </a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">一级产品</a></li>
                    <li><a href="#jmeter" data-toggle="tab">二级产品</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <table class="table" id="productTypeTable">
                        </table>
                    </div>
                    <div class="tab-pane fade" id="ios">
                        <table class="table" id="firstTable">
                        </table>
                    </div>
                    <div class="tab-pane fade" id="jmeter">
                        <table class="table" style="border: 0px solid transparent" id="secondTable">
                        </table>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" id="submit">
                                确定
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
</html>
 
 
 
 
 效果图： 
 
 
 

 
 
 
 
选中后如图：
 
 
 
 
注意事项：
 
 
1. 模态框里面的各个按钮是button标签，在应用到项目中的时候，点击的话可能会出现页面刷新的情况。这时候要将动态生成的button标签改成type=button的input标签；
 
 
2.由于项目需要，这里的产品类型和一级产品之间并没有级联关系；
 
 
3.这里的例子带有校验功能，即产品类型、一级产品和二级产品都是必选项，有任意一个没有选择的话弹出框左上角会有错误提示；
 
 
4.这里的级联操作没有使用远程数据做演示，性质是一样的，只不过我在级联的时候用的是js中的filter函数作为过滤，而ajax的方式是用过滤的参数作为请求下一级数据的参数；
 
 
5.其实项目中选中的效果是这样的：。有时间的话会在下一章继续完善成这样的样式。
 
 
6.如果发现bug或待改进的地方，希望多多指正，谢谢！
 
 

 

 

转载于:https://www.cnblogs.com/jerryyj/p/9621575.html

                

        

        




    




    

      

        

            

              
                
                  weixin_30828379
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
如何使用Bootstrap的modal组件自定义alert，confirm和modal对话框

				
			

			

				

					01-19
				

			

		

		

			
				
本文我将为大家介绍Bootstrap中的弹出窗口组件Modal,此组件简单易用，效果大气漂亮且很实用！
由于浏览器提供的alert和confirm框体验不好，而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数，所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验，相对比较简单实用，希望能对你有所参考价值。
1. 实例展示

详细的代码可通过前面给出的下载链接下载源码去了解，代码量不大，这三个组件加起来只有200多行

如果你有javascript的组件开发经验，我这个层级的

			
		

	



                

              
                



	

		

			

				
					
基于Bootstrap的标签页组件bootstrap-tab

				
			

			

				

					极客神殿
				

				

					08-17
					
					7877
					
				

			

		

		

			
				
bootstrap-tab组件是对原生的bootstrap-tab组件的封装，方便开发者更方便地使用，主要包含以下功能：

tab页初始化
关闭tab页
新增tab
显示tab页
获取tab页ID


使用

Step1 ：引入样式

 
 
 


1
2
3
4


Step2：引入脚本





    1
    2
    3

Step3：使用




    (&amp;amp;amp;quot;#tabContai...

			
		

	



                


  
              

                


	

		

			

				
					
Bootstrap ACE模板实现sidebar菜单联动tabs页签（你值得拥有）

				
			

			

				

					aodian4630的博客
				

				

					04-24
					
					1146
					
				

			

		

		

			
				
说在前面的话：


    该组件主要使用ace admin实现Tab页联动sidebar。实现的目标是： 1、不改动ace admin的模板框架（Bootstrap v3.3.6）； 2、tab页的加载默认使用ajax，get方式，详见(bootstrap.addtabs.js)；不用iframe； 3、sideb...

			
		

	





	

		

			

				
					
bootstrap的tabs标签页：实现a页面指定的tab，点击more，跳去b页面指定的tab

				
			

			

				

					电鳗的博客
				

				

					05-16
					
					1万+
					
				

			

		

		

			
				
如图。
实现目标： a页面的tab1标签页中点击more 跳去b页面的tab1
这里为什么是more跳过去的呢，因为tab nav上面的tab1，tab2，tab3，是用来对应自己在同个页面的标签页的。
使用框架： bootstrap的v3版本的tabs标签页

			
		

	



		

			
		



	

		

			

				
					
Bootstrap导航栏和标签页tab 联动问题

				
			

			

				

					qq_34188012的博客
				

				

					04-16
					
					1687
					
				

			

		

		

			
				
Bootstrap导航栏和标签页tab 联动问题

分三步：

1.头部移动设备 data-target目标值 #demo-navbar 和 导航栏id值相同





2。标签页设置id=" tab-list"

3.脚本


//    标签页和导航栏联动
    $(document).ready(function(){
        $("#demo-navbar .dropdown-...

			
		

	





	

		

			

				
					
Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页

				
			

			

				

					好玩的事情要记录下来~
				

				

					01-21
					
					3600
					
				

			

		

		

			
				
Bootstrap对于不会设计的童鞋很有用。
Twitter设计师的前台框架
中文官网:http://v3.bootcss.com/




导入包等信息:








<%--源语句
    
    
        
        
    
 --%>



        /js/html5shiv.min.js">
        /js/respond.min.

			
		

	





	

		

			

				
					
JS组件系列——基于Bootstrap Ace模板的菜单Tab页效果优化

				
			

			

				

					weixin_33729196的博客
				

				

					09-29
					
					647
					
				

			

		

		

			
				
前言：之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享（你值得拥有） ，收到很多园友的反馈，当然也包括很多诟病，因为上篇只是将功能实现了，很多细节都没有处理，这篇博主将带领大家一起来优化这里的效果，使之成为一个可以在项目里面使用的成品。
说点题外话，本来，在互联网模式下，Tab页+iframe的组合是不能被大多数平台接受的，从这些年推出的一些好的产品可...

			
		

	





	

		

			

				
					
Bootstrap布局 菜单栏+选项卡

				
			

			

				

					PSW_CSDN的博客
				

				

					12-06
					
					2057
					
				

			

		

		

			
				
Bootstrap布局: 菜单+选项卡组合

			
		

	





	

		

			

				
					
基于Bootstrap和CSS3的响应式UI框架

				
			

			

				

					04-16
				

			

		

		

			
				
解压密码：RJ4587 还记得之前我们分享过的Metro...今天我们要来分享一组基于Bootstrap和CSS3的响应式UI框架，这个UI框架中，包含了自定义CSS3按钮、自定义CSS3复选框和单选框、自定义CSS3下拉框等等，外观非常漂亮。

			
		

	





	

		

			

				
					
jquery ui bootstrap 实现自定义风格

				
			

			

				

					10-25
				

			

		

		

			
				
本文主要是给大家分享了jQuery UI bootstrap的自定义风格，以及自定义的方法，非常的实用，有需要的小伙伴千万不要错过

			
		

	





	

		

			

				
					
学习使用bootstrap的modal和carousel

				
			

			

				

					09-01
				

			

		

		

			
				
主要教大家学会用bootstrap的modal和carousel,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
Bootstrap简单Tabs选项卡切换插件

				
			

			

				

					ICode联盟
				

				

					02-21
					
					444
					
				

			

		

		

			
				
下载地址

Bootstrap简单Tabs选项卡切换插件是一款在原生Bootstrap Tabs选项卡的基础上，通过css3来对它进行了一些美化效果。



dd:


			
		

	





	

		

			

				
					
Bootstrap-table实现下拉框三级联动查询，分页，参数设置表格，以及分页显示。

				
			

			

				

					wlf_wzx的博客
				

				

					10-15
					
					1997
					
				

			

		

		

			
				
1.Bootstrap-table的效果图如下：

2.添加boostrap的样式。可通过bootstrap官网下载。bootstrap-table页面布局样式:
<link rel="stylesheet" href="../static/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://un...

			
		

	





	

		

			

				
					
BootStrap实现左侧或右侧竖式tab选项卡

				
			

			

				

					w1366352655的博客
				

				

					12-27
					
					1711
					
				

			

		

		

			
				

		
			BootStrap实现左侧或右侧竖式tab选项卡
		
		
		
			BootStrap实现左侧或右侧竖式tab选项卡
代码如下：

&amp;lt;div style="height: 100px;"&amp;gt;
    &amp;lt;div class="col-xs-2"&amp;gt;
        &amp;lt;ul class="nav nav-...

			
		

	





	

		

			

				
					
vue + iview 页面Modal中内嵌Tabs，重新显示Modal时默认选中Tabs的第一项

				
			

			

				

					票票的博客
				

				

					07-19
					
					674
					
				

			

		

		

			
				
<Modal v-model="modal.visible" width="80%" transfer :title="modal.title" footer-hide>
	<Tabs ref="tabs" :animated="false">
		<TabPane name="name1" ></TabPane>
		<TabPane name="name2" ></TabPane>
		<TabPane name="name3

			
		

	





	

		

			

				
					
Bootstrap系列之模态框（Modal）

				
			

			

				

					老__L的博客
				

				

					06-16
					
					1万+
					
				

			

		

		

			
				
模态框（Modal）

			
		

	





	

		

			

				
					
初次 使用RuoYi 若依框架总结（前端）

					
热门推荐

				
			

			

				

					贝小木
				

				

					12-03
					
					6万+
					
				

			

		

		

			
				
本人是做java开发的小白，偶然间看到了一篇关于若依框架的文章，顿时吸引过来，经过自己的摸索，从无知到认知，到现在能简单的使用，在此把自己用到的前端页面用到的东西做了一个小小总结，给大家做个分享（本人小白，有错误地方希望提出，本人能及时改正，相互成长！！叩谢）
1.	th:if
<span th:if="${cusSecond.marriage} eq 1">已婚</span&g...

			
		

	





	

		

			

				
					
bootstrap 模态框modal 传值问题

				
			

			

				

					微微一芯的博客
				

				

					01-20
					
					1万+
					
				

			

		

		

			
				
后台管理的项目常会使用到bootstrap里面的模态框modal，因此编辑的时候就需要将页面上的值传到模态框里面并显示，如：
html代码：


       
          
          编号发票类型发票开头发票明细
          纳税人识别号营业电话营业地址银行
          开户地区开户支行银行账号
          操作

			
		

	





	

		

			

				
					
bootstrap 模态框生成标签页

				
			

			

				

					内沐的博客
				

				

					06-05
					
					2479
					
				

			

		

		

			
				
1，先补充bootstrap标签页的设置方式
参考文章：点击打开链接
模态框增加
	<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog"
	aria-labelledby="passwordModalLabel" aria-hidden="true">
	
		
			
				
				我的设置

			
		

	





	

		

			

				
					
利用bootstrap和css制作待办事项管理系统

					
最新发布

				
			

			

				

					05-14
				

			

		

		

			
				
好的，以下是一个简单的待办事项管理系统的示例代码，使用了Bootstrap和CSS进行样式设计：  HTML代码：  ``` <!DOCTYPE html>   	待办事项管理系统 	<!-- 引入Bootstrap样式文件 --> 	...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值