大数据库可视化模版22：全息档案平台中心

水深无声 2024-02-20 10:28 7阅读 0赞

> **博主介绍：**《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。  
> 所有项目都配有从入门到精通的基础知识视频课程，免费  
> 项目配有对应开发文档、开题报告、任务书、PPT、论文模版等
> 
> 项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！  
> **在文章末尾可以获取联系方式**

## 效果图 ##

![0a48cbe0ca734aba840c32853c99b876.png][]

## 代码 ##

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>全息档案</title>
        
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    	<meta http-equiv="refresh" content="50;url='https://blog.csdn.net/qq_31766533/article/details/119274641'">
    	
        <link rel="stylesheet" href="../content/ui/global/bootstrap/css/bootstrap.css">
       	<link rel="stylesheet" href="../js/public/liMarquee.css">
       	<link rel="stylesheet" href="../css/test.css">
        
        <link href="../content/ui/global/font-awesome/css/font-awesome.css" rel="stylesheet" />
        
        <link rel="stylesheet" href="../content/adminlte/dist/css/AdminLTE.css">
        <link rel="stylesheet" href="../content/adminlte/dist/css/skins/_all-skins.min.css">
        <link href="../content/min/css/supershopui.common.min.css" rel="stylesheet"/>
    
        <link rel="stylesheet" href="../content/plugins/iCheck/flat/blue.css">
        
        
        
     	
      	  
      	
    <meta charset="utf-8" />
    	
    <style>
    	html{
    		overflow-x: auto;
    	}
    	body{
    		/*background:url(../images/sy/bg.png) repeat;*/
    		color:#D4D7DC;
    		padding: 0;
    		width: 1920px;
    		margin: 0px;
    		font-size: 16px;
    		overflow-x: auto;
    	}
    	.col-md-9{
    		padding: 0;
    	}
    	.content{
    		padding: 0;
    		margin: 0;
    	}
    	.row{
    		margin: 0;
    		padding: 0;
    	}
    	.ssk{
    		float: left;
    		color:#05D6AC;
    	}
    	#table_1 li{
    		list-style: none;
    		width: 1184px;
    		height: 34px;
    		background: url('../img/qxda/blt.png') no-repeat 0 0;
    		background-size:100% 100%;
    		margin-bottom: 10px;
    		padding-top: 5px;
    	}
    	#xwsx li{
    		list-style: none;
    		height: 30px;
    		clear: both;
    	}
    	#rcxw li{
    		list-style: none;
    		height: 30px;
    		clear: both;
    	}
    	#jbsx li{
    		list-style: none;
    		height: 30px;
    		clear: both;
    	}
    	
    	#shsj li{
    		list-style: none;
    		height: 30px;
    		clear: both;
    	}
    	
    	#gjdx li{
    		list-style: none;
    		height: 30px;
    		clear: both;
    	}
    	
    	#gxry li{
    		list-style: none;
    		height: 30px;
    		clear: both;
    	}
    	.col-md-3{
    		padding: 0;
    	}
    	#pmd_1{
    		height: 1px;
    		width: 20px;
    		opacity: .3;
    		box-shadow: 0px 3px 6px white;
    		background: white;
    		/*border: 1px solid red;*/
    		top: 35px;
        	left: 56px;
        	animation:3s linear 0s normal infinite rotate;
        	animation-direction: alternate;
        	border-radius: 3px;
    	}
    #pmd_2{
    		height: 1px;
    		width: 20px;
    		opacity: .3;
    		box-shadow: 0px 3px 6px white;
    		background: white;
    		/*border: 1px solid red;*/
    		top: 78px;
        	left: 56px;
        	animation:3s linear 0s normal infinite rotate;
        	animation-direction: alternate;
        	border-radius: 3px;
    	}
    @keyframes rotate{
    	0%{
      	left: 56px;
      	height: 1px;
      }
    50%{
      	left: 176px;
      	height: 3px;
      }
      100%{
      	left: 282px;
      	height: 1px;
      }
    }
    /*
     * 人头
     */
    #rt{
    	animation:2s linear 0s normal rt;
    }
    @keyframes rt{
    	0%{
      	transform: scale(.3);
      }
      100%{
      	transform: scale(.8);
      }
    }
    /*
     * 小人头
     */
    .rt_1{
    	width: 20px;
    	height: 20px;
    	position: absolute;
    	margin-left: 10px;
    	    cursor: pointer;
    }
    .rt_2{
    	width: 20px;
    	height: 20px;
    	position: absolute;
    	margin-left: 50px;
    	    cursor: pointer;
    }
    .rt_1:hover,.rt_2:hover{
    	width: 100px;
    	height: 100px;
    	position: absolute;
    	z-index:100;
    }
    /*水波纹*/
    @-webkit-keyframes opac{  
            from {  
                opacity: 1;  
                width:0;  
                height:0;  
                top:115px;  
                left:875px;  
            }  
            to {  
                opacity : 0;  
                width:100%;  
                height:100%;  
                top:0;  
                left:0;  
            }  
        }  
        .animate #q1{  
            -webkit-animation-delay:0s;  
        }  
        .animate #q2{  
            -webkit-animation-delay:1s;  
        }  
        .animate #q3{  
            -webkit-animation-delay:2s;  
        } 
        .animate #q4{  
            -webkit-animation-delay:3s;  
        }   
        .animate #q5{  
            -webkit-animation-delay:4s;  
        }  
        .animate #q6{  
            -webkit-animation-delay:5s;  
        } 
        /*.animate #q7{  
            -webkit-animation-delay:7s;  
        } */
        .wave{  
            width: 1750px;
        	height: 230px;
            position: absolute;  
            top: 291px;  
            left: 0px;  
            right: 0;  
            margin: 0 auto;  
        }
        .wave *{  
            position:absolute;  
            -webkit-animation:opac 5s infinite;  
            opacity: 0;
        } 
        
        .jbsx_bak,.shsj_bak,.rcxw_bak,.gjdx_bak,.xwsx_bak,.gxry_bak{  
            opacity: 0;
        }
        
        /*基本属性*/
        #pmd_jbsx{
    		        height: 20px;
    				width: 3px;
    				opacity: .5;
    				box-shadow: 0px 11px 12px #7afc62;
    				background: #7afc62;
    		    /* border: 1px solid red; */
    		    top: 79px;
    		    left: 151px;
    		    animation: 3s linear 0s normal infinite rotate_jbsx;
    		    animation-direction: alternate;
    		    border-radius: 3px;
    		    z-index: 99;
    	} 
    	@keyframes rotate_jbsx{
    		0%{
    	  	top: 79px;
    	  }
    	  100%{
    	  	top: 310px;
    	  }
    	}
    	/*日常行为*/
    	 #pmd_rcxw{
    		    height: 20px;
    		    width: 3px;
    		    opacity: .5;
        		box-shadow: 0px 11px 12px #7afc62;
    		    background: #7afc62;
    		    /* border: 1px solid red; */
    		    top: 79px;
    		    left: 152px;
    		    animation: 3s linear 0s normal infinite rotate_rcxw;
    		    animation-direction: alternate;
    		    border-radius: 3px;
    		    z-index: 99;
    	} 
    	@keyframes rotate_rcxw{
    		0%{
    	  	top: 79px;
    	  }
    	  100%{
    	  	top: 270px;
    	  }
    	}
    	/*行为属性*/
    	#pmd_xwsx{
    		    height: 20px;
    		    width: 3px;
    		    /* opacity: .5; */
    		    box-shadow: 0px 11px 12px #7afc62;
    		    background: #7afc62;
    		    /* border: 1px solid red; */
    		    top: 79px;
    		    left: 152px;
    		    animation: 3s linear 0s normal infinite rotate_xwsx;
    		    animation-direction: alternate;
    		    border-radius: 3px;
    		    z-index: 99;
    	} 
    	@keyframes rotate_xwsx{
    		0%{
    	  	top: 79px;
    	  }
    	  100%{
    	  	top: 230px;
    	  }
    	}
    	/*生活数据*/
    	#pmd_shsj{
    		    height: 20px;
    		    width: 3px;
    		    opacity: .5;
        		box-shadow: 0px 11px 12px #7afc62;
    		    background: #7afc62;
    		    /* border: 1px solid red; */
    		    top: 79px;
    		    left: 22px;
    		     animation: 3s linear 0s normal infinite rotate_shsj;
    		    animation-direction: alternate;
    		    border-radius: 3px;
    		    z-index: 99;
    	} 
    	@keyframes rotate_shsj{
    		0%{
    	  	top: 79px;
    	  }
    	  100%{
    	  	top: 275px;
    	  }
    	}
    	/*轨迹动向*/
    	#pmd_gjdx{
    		    height: 20px;
    		    width: 3px;
    		    opacity: .5;
        		box-shadow: 0px 11px 12px #7afc62;
    		    background: #7afc62;
    		    /* border: 1px solid red; */
    		    top: 79px;
    		    left: 22px;
    		     animation: 3s linear 0s normal infinite rotate_gjdx;
    		    animation-direction: alternate;
    		    border-radius: 3px;
    		    z-index: 99;
    	} 
    	@keyframes rotate_gjdx{
    		0%{
    	  	top: 79px;
    	  }
    	  100%{
    	  	top: 275px;
    	  }
    	}
    	/*关系人员*/
    	#pmd_gxry{
    		    height: 20px;
    		    width: 3px;
    		    opacity: .5;
        		box-shadow: 0px 11px 12px #7afc62;
    		    background: #7afc62;
    		    /* border: 1px solid red; */
    		    top: 79px;
    		    left: 22px;
    		     animation: 3s linear 0s normal infinite rotate_gxry;
    		    animation-direction: alternate;
    		    border-radius: 3px;
    		    z-index: 99;
    	} 
    	@keyframes rotate_gxry{
    		0%{
    	  	top: 79px;
    	  }
    	  100%{
    	  	top: 230px;
    	  }
    	}
    	
    	/*文字抖动*/
    @-webkit-keyframes shake {
         0%{
             -webkit-transform:translate(2px, 2px);
         }
         25%{
             -webkit-transform:translate(-2px, -2px);
         }
         50%{
         	         -webkit-transform:translate(0px, 0px);
         }
         75%{
             -webkit-transform:translate(2px, -2px);
         }
         100%{
             -webkit-transform:translate(-2px, 2px);
         }
     }	
     @keyframes shake {
         0%{
             transform:translate(2px, 2px);
         }
         25%{
             transform:translate(-2px, -2px);
         }
         50%{
             transform:translate(0px, 0px);
         }
         75%{
             transform:translate(2px, -2px);
         }
         100%{
             transform:translate(-2px, 2px);
         }
     }
     .shake_qxda{
         position: relative;
         z-index: 99;
         cursor: pointer;
     }
     /*.shake_qxda:hover{
         -webkit-animation:shake 0.2s forwards;
         animation:shake 0.2s forwards;
         color: #05D6AC;
     }*/
    </style>
    
    
    
    </head>
    <body>
    
    <section class="content">
     <div class="row" style="width: 1920px;height: 1080px;background: red;padding: 0px;background: url('../img/qxda/qxbj.png') no-repeat 0 0;background-size:100% 100%;">
     	<div class="row" style="height: 150px;width: 100%;">
     		<div style="width: 100%;height: 94px;background: transparent;text-align: center;">
     			
     		</div>
    		<div style="width: 833px;height: 25px;background: url('../img/qxda/ssk.png') no-repeat 0 0;background-size:100% 100%;margin: 0 auto;";>
    			<div class="ssk" style="width: 303px;padding-top: 3px;">
    				<span style="margin-left: 20px;">数据范围</span>
    				<span style="margin-left: 30px;">2017-12-01</span>
    			</div>
    			<div class="ssk" style="margin-left: 13px;height: 24px;width: 303px;text-align: center;padding-top: 3px;">
    				2017-12-07
    			</div>
    			<div class="ssk" style="margin-left: 13px;height: 24px;width: 185px;text-align: center;padding-top: 3px;"> 
    				查询
    			</div>
    		</div>
     	</div>
    	<div class="row wd" style="height: 551px;width: 100%;">
    		<div style="width: 90%;height: 100%;margin: 0 auto;">
    			<div style="width: 40%;float: left;">
    				<div class="col-md-3 col-md-offset-2 xwsx_bak" >
    					<div class="row" style="height: 80px;text-align: right;padding-top: 50px;">
    						行为属性
    					</div>
    					<div id="pmd_xwsx" style="position: absolute;">
    					</div>
    					<div class="row" style="height: 441px;">
    						<ul id="xwsx" style="padding-left: 0px;">
    							<li>
    								<div class="col-md-9" style="text-align: right;"></div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">话单记录</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">邮寄物流</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">消费记录</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9" style="text-align: right;"></div>
    								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
    							</li>
    						</ul>
    					</div>
    				</div>
    				<div class="col-md-3 rcxw_bak">
    					<div class="row" style="height: 80px;text-align: right;padding-top: 50px;">
    						日常行为
    					</div>
    					<div id="pmd_rcxw" style="position: absolute;">
    					</div>
    					<div class="row" style="height: 441px;">
    						<ul id="rcxw" style="padding-left: 0px;">
    							<li>
    								<div class="col-md-9" style="text-align: right;"></div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">经常活动地</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">车辆往返地</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">经常消费地</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">节点上访地</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9" style="text-align: right;"></div>
    								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
    							</li>
    						</ul>
    					</div>
    				</div>
    				<div class="col-md-3 jbsx_bak">
    					<div class="row" style="height: 80px;text-align: right;padding-top: 50px;">
    						基本属性
    					</div>
    					<div id="pmd_jbsx" style="position: absolute;">
    					</div>
    					<div class="row" style="height: 441px;">
    						<ul id="jbsx" style="padding-left: 0px;">
    							<li>
    								<div class="col-md-9" style="text-align: right;"></div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">联系方式</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">居住地址</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">工作单位</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">证件号码</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9 shake_qxda" style="text-align: right;">虚拟身份</div>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    							</li>
    							<li>
    								<div class="col-md-9" style="text-align: right;"></div>
    								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
    							</li>
    						</ul>
    					</div>
    				</div>
    			</div>
    			<div style="width: 20%;float: left;">
    				<div class="row" style="height: 80px;position: relative;">
    					<div style="text-align: center;">
    						<span style="font-size: 18px">彭西晏/男/吸毒人员/已关注</span>
    						<img class="rt_1" src="../img/qxda/person.jpg" />
    						<img class="rt_2" src="../img/qxda/person2.jpg" />
    					</div>
    					<div style="text-align: center;">
    						<img  src="../img/qxda/hx.png"/></br>
    						<span style="font-size: 16px">321234567342112</span></br>
    						<img  src="../img/qxda/hx.png"/>
    					</div>
    					<div id="pmd_1" style="position: absolute;">
    					</div>
    					<div id="pmd_2" style="position: absolute;">
    					</div>
    				</div>
    				<div class="row" style="height: 441px;text-align: center;">
    					<img id="rt" src="../img/qxda/rt.png" style="transform:scale(.8)"/>
    				</div>
    			</div>
    			<div style="width: 40%;float: left;">
    				<div class="col-md-3 col-md-offset-1 shsj_bak">
    					<div class="row" style="height: 80px;text-align: left;padding-top: 50px;">
    						生活数据
    					</div>
    					<div id="pmd_shsj" style="position: absolute;">
    					</div>
    					<div class="row" style="height: 441px;">
    						<ul id="shsj" style="padding-left: 0px;">
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9" style="text-align: left;"></div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">医保卡号</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">房屋信息</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">车辆信息</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">燃气缴费</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
    								<div class="col-md-9" style="text-align: right;"></div>
    							</li>
    						</ul>
    					</div>
    				</div>
    				<div class="col-md-3 gjdx_bak">
    					<div class="row" style="height: 80px;text-align: left;padding-top: 50px;">
    						轨迹动向
    					</div>
    					<div id="pmd_gjdx" style="position: absolute;">
    					</div>
    					<div class="row" style="height: 441px;">
    						<ul id="gjdx" style="padding-left: 0px;">
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9" style="text-align: left;"></div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">室内活动</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">流入流出</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">敏感时段动向</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">重点部位</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
    								<div class="col-md-9" style="text-align: right;"></div>
    							</li>
    						</ul>
    					</div>
    				</div>
    				<div class="col-md-3 gxry_bak">
    					<div class="row" style="height: 80px;text-align: left;padding-top: 50px;">
    						关系人员
    					</div>
    					<div id="pmd_gxry" style="position: absolute;">
    					</div>
    					<div class="row" style="height: 441px;">
    						<ul id="gxry" style="padding-left: 0px;">
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9" style="text-align: left;"></div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">亲属关系</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">社会关系</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_center.png"></div>
    								<div class="col-md-9 shake_qxda" style="text-align: left;">同行同住</div>
    							</li>
    							<li>
    								<div class="col-md-3"><img src="../img/qxda/sx_bottom.png"></div>
    								<div class="col-md-9" style="text-align: right;"></div>
    							</li>
    						</ul>
    					</div>
    				</div>
    			</div>
    			<div style="position: absolute;" >
    				<div class="animate wave">
    					<img id="q1" src="../img/qxda/q1.png"  style="position: absolute;top: 360px;left: 395px;"/>
    					<img id="q2" src="../img/qxda/q2.png" style="position: absolute;top: 345px;left: 325px;"/>
    					<img id="q3" src="../img/qxda/q3.png" style="position: absolute;top: 333px;left: 255px;"/>
    					<img id="q4" src="../img/qxda/q4.png" style="position: absolute;top: 320px;left: 185px;"/>
    					<img id="q5" src="../img/qxda/q5.png" style="position: absolute;top: 306px;left: 90px;"/>
    					<img id="q6" src="../img/qxda/q6.png" style="position: absolute;top: 275px;left: -39px;"/>
    				</div>
    				
    				
    				
    				
    			</div>
    			<div style="position: absolute;">
    				<img id="q7" src="../img/qxda/gq.png" style="position: absolute;top: 227px;left: -24px;"/>
    			</div>
    		</div>
    	</div>
    	<div class="row" style="height: 379px;width: 100%;">
    		<div style="width: 1205px;height: 323px;background: url('../img/qxda/blk.png') no-repeat 0 0;background-size:100% 100%;margin: 0 auto;">
    			<div style="width: 1184px;padding-left: 10px;height: 55px;padding-top: 20px;">
    				<div class="col-md-2">姓名</div>
    				<div class="col-md-1">性别</div>
    				<div class="col-md-4">身份证号码</div>
    				<div class="col-md-1">出发地</div>
    				<div class="col-md-1">目的地</div>
    				<div class="col-md-1">发现地点</div>
    				<div class="col-md-1">发现时间</div>
    				<div class="col-md-1">轨迹类型</div>
    			</div>
    			<ul style="padding-left: 10px;" id="table_1">
    				
    			</ul>
    		</div>
    		<div style="width: 1920px;height: 56px;background: url('../img/qxda/bottom_bak.png') no-repeat 0 0;background-size:100% 100%;text-align: center;">
    			<div style="padding-top: 20px;width: 253px;margin: 0 auto;">
    				<div style="float: left;margin-left: 85px;" class="titles">流入流出</div>
    			</div>
    			
    		</div>
    	</div>
          
          
         
    			
     </div>
            
    
    </section>
    
    
     
     
     
     
    
    <script src="../content/ui/global/jQuery/jquery.min.js"></script>
    <script src="../js/echarts/echartsNew.min.js"></script>
    
    
    <script src="../js/function/pie_mode.js" charset="utf-8"></script> 
    <script src="../js/function/bar_model.js" charset="utf-8"></script> 
    <script src="../js/public/num.js" charset="utf-8"></script> 
    
    <script src="../js/jquery.liMarquee.js" charset="utf-8"></script> 
    
    
     
    
    
     
    
    <script type="text/javascript">
    	/*6个维度依次显示*/
    	$(".jbsx_bak").animate({opacity: 1},1000);
    	$(".rcxw_bak").animate({opacity:1},2000);
    	$(".xwsx_bak").animate({opacity:1},3000);
    	$(".shsj_bak").animate({opacity: 1},1000);
    	$(".gjdx_bak").animate({opacity:1},2000);
    	$(".gxry_bak").animate({opacity:1},3000);
    	//文字点击效果
    	$(".shake_qxda").click(function(){
    		$('.shake_qxda').css({color: 'white',animation:''});
    		$(this).css({animation:'shake 1s forwards',color: '#05D6AC'})
    		getTable_1($(this).text());
    		$(".titles").html($(this).text())
    	})
    getTable_1('');	
    function getTable_1(t){
    	var html_data='';
    	for(var i=0;i<6;i++){
    		html_data+='<li>'+
    					'<div class="col-md-2">彭西晏_'+t+'</div>'+
    					'<div class="col-md-1">男</div>'+
    					'<div class="col-md-4">321234567342112</div>'+
    					'<div class="col-md-1">银川</div>'+
    					'<div class="col-md-1">北京</div>'+
    					'<div class="col-md-1">宾馆</div>'+
    					'<div class="col-md-1">2018/5/04</div>'+
    					'<div class="col-md-1">飞机</div>'+
    				'</li>';
    	}
    	$("#table_1").html(html_data)
    }
    </script>
    </body>
    </html>

[0a48cbe0ca734aba840c32853c99b876.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/998c912bbd0c459cbd92a767819dfcbf.png