添加咨询对话界面

app/css/app.css

@@ -47,6 +47,7 @@ body{ color: #666666; font-size:14px;}
}
.topsave{color: #FFFFFF; line-height: 42px; cursor: pointer;}
.toptit{color: #FFFFFF; font-size: 20px;}
.personhead{color: #FFFFFF;}
/*底部导航栏*/
.footbox{ background: #FFFFFF;}
.footbox .mui-tab-item.mui-active{ color: #FF9900;}
@@ -57,10 +58,10 @@ body{ color: #666666; font-size:14px;}
.frmtype{ width: 100%; margin: auto; padding:2%;font-size: 14px;}
.frmbtn{margin:4% 0;  font-size: 16px; padding:2%;border:1px solid #FF9900; border-radius: 6px; color:#FF9900 ;}
/*.frmbtn:hover{border:1px solid #FF9900; color:#FFFFFF;background-color:#FF9900;}*/
.frmbox{ border:none; width: 90%; height: 100%; }
.frmactive{color:#fff;background-color:#FF9900;}
.frmbox{ border:none; width: 90%; height: 100%; } 
.frmactive2{color:#fff;background-color:#ccc; border:1px solid #ccc;}
.frmactive{color:#fff;background-color:#FF9900; border:1px solid #FF9900;}
.frmactiveok{color:#fff;background-color:#FF9900; border:1px solid #FF9900;}
.exitbtn{ border:none; margin: 0; color:#FF0000; border-radius: 0;}
/*///////////////common公共样式///////////////////////*/
@@ -175,9 +176,12 @@ body{ color: #666666; font-size:14px;}
.gotonext2{ width: 110px;}
.gotonext em{display: block; width: 20px; height: 20px; margin-left:6px ; background:url(../images/goto.png) center center no-repeat; background-size:100% 100% ; }
.dialogbtn{margin: auto; overflow: hidden; width: 130px;padding: 12px;}
.dialogbtn{ overflow: hidden; width:80%;padding: 12px;}
.dialogbtn div{ width: 100px;overflow: hidden;margin: auto; }
.dialogbtn span{font-size: 14px; line-height: 24px; padding: 0 3px; color: #FF9900; font-weight: 600;}
.dialogbtn em{display: block; width: 24px; height: 24px; background: url(../images/dialogue.png) center center no-repeat; background-size:100% 100% ; margin-right:6px;}
.attentbtn{margin: auto; overflow: hidden; width:20%;padding: 12px; border-left:1px solid #F0F0F0;}
.attentbtn em{display: block; margin: auto; width: 22px; height: 22px; background: url(../images/attenticon.png) center center no-repeat; background-size:100% 100% ;}
.listitembox{ position: static;width: 108%;}
.listitembox .listitem{ position: static;padding:10px; margin-right: 2%;}
@@ -201,6 +205,7 @@ body{ color: #666666; font-size:14px;}
.wallteicon{background: url(../images/wallter.png) center center no-repeat;background-size:100% 100% ;}
.addicon{background: url(../images/personadd.png) center center no-repeat;background-size:100% 100% ;}
.seticon{background: url(../images/set.png) center center no-repeat;background-size:100% 100% ;}
.attenticon{background: url(../images/attenticon.png) center center no-repeat;background-size:100% 100% ;}
.rightword{ position: absolute; right:40px; font-size:13px;}
/*已认证*/
.verified{ color: #FF9900;}
@@ -272,10 +277,10 @@ body{ color: #666666; font-size:14px;}
.consultbox{ padding:20px 0px 60px 0px;}
.consultaim{ text-align: center; margin: auto; }
.consultaim ul{padding: 0; margin: 0; width:96%; overflow: hidden; margin:1% auto;}
.consultaim ul li{ list-style: none;float: left; padding:1% 4%;border:#CCCCCC 1px solid;border-radius: 6px; margin:1%; font-size: 13px;}
.consultaim ul .liactive{ border:1px solid #6CA8FF;padding:1% 2%;padding-left:6%; color: #6CA8FF;position: relative;}
.consultaim ul .liactive em{ display:block;position: absolute; left:5%; top:50%;margin-top: -8px; width:16px; height:16px;background: url(../images/selected.png) center center no-repeat; background-size:100% 100% ;}
.consultaim ul{padding: 0; margin: 0; overflow: hidden; margin:1% auto; padding:0 4%; }
.consultaim ul li{ list-style: none;float: left; padding:2px 16px;border:#CCCCCC 1px solid;border-radius: 6px; margin:1%; font-size: 13px;}
.consultaim ul .liactive{ border:1px solid #6CA8FF;padding-left:28px; color: #6CA8FF;position: relative;}
.consultaim ul .liactive em{ display:block;position: absolute; left:10px; top:50%;margin-top: -8px; width:16px; height:16px;background: url(../images/selected.png) center center no-repeat; background-size:100% 100% ;}
.divline{border-top:1px solid #F0F0F0; width: 100%; height: 1px;} 
.consultinfo{ width: 96%; margin: auto; margin-top:6px;}
@@ -286,4 +291,27 @@ body{ color: #666666; font-size:14px;}
.consultinfo tr td.sendbox{text-align: right;position: relative;}
.consultinfo tr td .sendbtn{width: 20%;font-size: 13px; padding: 4px 10px;margin:0;position:absolute;right:0; top:0; }
.operatebox{ width:100%;background: #FFFFFF;overflow: hidden; padding:10px;position: relative;}
.themespan{ width: 54%;}
.operatebtnbox{width:44%;position:absolute; top:50%; right:1%;margin-top:-14px;}
.operatebtn{padding:1% 4%; margin: 0; position: absolute;right:0;}
.filterbox2{}
.filterblock2{padding:0; margin: 0; margin-top:2px ; background:#FFFFFF;overflow: hidden;}
.filterblock2 li{list-style:none; position: relative; float: left; border-right:1px solid #F0F0F0;} 
.filterblock2 li select{  margin:0 2px;}
.filterlist2{ padding:0; margin: 0; border:none; border-radius:0;padding:6px 6px 6px 12px;font-size: 14px;}
.coutopicbox{ position: relative; background: #F0F0F0; margin-bottom: 10px; width:110%; margin-left:-16px; padding:4%; overflow: hidden;}
.coutopicbox .coutheme{ max-width: 60%;}
.coutopicbox .coustatus span{ font-size: 12px; padding:4px 10px; color: #FFFFFF; border-radius: 6px;}
.coutopicbox .aimlabel{background:#6CA8FF;}
.coutopicbox .status-1{background:#FF9900;}/*咨询状态*/
.coutopicbox .status-2{background:#dd524d;}
.coutopicbox .status-3{background:#4cd964;}
.thistime{ position: absolute; right:2px; font-size: 12px; color: #999999;}
.mui-table-view-cell>.proinfor>.mui-badge{top: 20px;left:10px; right:auto;}
/*********************** 咨询*******************/

app/css/mui.imageviewer.css

@@ -0,0 +1,123 @@
.mui-imageviewer {
	position: absolute;
	position: fixed;
	background-color: rgba(0, 0, 0, 0.9);
	width: 100%;
	height: 100%;
	z-index: 99;
	left: 0px;
	top: 0px;
	display: none;
	opacity: 0;
	-webkit-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	overflow: hidden;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
.mui-imageviewer-mask {
	position: absolute;
	z-index: 11;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	display: none;
}
.mui-imageviewer .mui-imageviewer-header {
	position: absolute;
	height: 45px;
	width: 100%;
	left: 0px;
	top: 0px;
	z-index: 10;
	background-color: rgba(0, 0, 0, 0.5);
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}
.mui-imageviewer .mui-imageviewer-state {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 100%;
	color: #eee;
	text-align: center;
	font-size: 16px;
	padding: 15px;
}
.mui-imageviewer .mui-imageviewer-header .mui-imageviewer-close {
	position: absolute;
	top: 5px;
	right: 5px;
	font-size: 32px;
	color: #aaa;
}
.mui-imageviewer .mui-imageviewer-header .mui-imageviewer-close:active {
	color: #FF5053;
}
.mui-imageviewer .mui-imageviewer-item {
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	position: absolute;
	z-index: 0;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	-webkit-transition: -webkit-transform 500ms ease-in-out;
	transition: transform 500ms ease-in-out;
	display: table;
	overflow: hidden;
}
.mui-imageviewer .mui-imageviewer-item-center {
	-webkit-transform: translateX(0);
	transform: translateX(0);
}
.mui-imageviewer .mui-imageviewer-item-left {
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
}
.mui-imageviewer .mui-imageviewer-item-right {
	-webkit-transform: translateX(100%);
	transform: translateX(100%);
}
.mui-imageviewer .mui-imageviewer-item span {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	line-height: 100%;
	font-size: 100%;
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	overflow: auto;
}
.mui-imageviewer .mui-imageviewer-item img {
	backface-visibility: hidden;
	transform-origin: 50% 50% 0px;
	max-width: 100%;
}
.mui-imageviewer-left,
.mui-imageviewer-right {
	position: absolute;
	z-index: 2;
	color: #aaa;
	top: 50%;
	margin-top: -18px;
	font-size: 36px;
}
.mui-imageviewer-left {
	left: 5px;
}
.mui-imageviewer-right {
	right: 5px;
}
.mui-imageviewer-left:active,
.mui-imageviewer-right:active {
	color: #fff;
}

app/html/chatover.html

@@ -0,0 +1,358 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.imageviewer.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px;
				background-color: #fafafa;
			}
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
 				padding: 12px 4px;
 			}
 			.footer-right {
 				position: absolute;
 				width: 50px;
 				height: 50px;
 				right: 0px;
 				bottom: 0px;
 				text-align: center;
 				vertical-align: middle;
 				line-height: 100%;
 				padding: 12px 5px;
 				display: inline-block;
 			}
 			.footer-center {
 				height: 100%;
 				padding: 5px 0px;
 			}
 			.footer-center [class*=input] {
 				width: 100%;
 				height: 100%;
 				border-radius: 5px;
 			}
 			.footer-center .input-text {
 				background: #fff;
 				border: solid 1px #ddd;
 				padding: 10px !important;
 				font-size: 16px !important;
 				line-height: 18px !important;
 				font-family: verdana !important;
 				overflow: hidden;
 			}
 			.footer-center .input-sound {
 				background-color: #eee;
 			}
 			.mui-content {
 				height: 100%;
 				padding: 44px 0px 50px 0px;
 				overflow: auto;
 				background-color: #eaeaea;
 			}
 			#msg-list {
 				height: 100%;
 				overflow: auto;
 				-webkit-overflow-scrolling: touch;
 			}
 			.msg-item {
 				padding: 8px;
 				clear: both;
 			}
 			.msg-item .mui-item-clear {
 				clear: both;
 			}
 			.msg-item .msg-user {
 				width: 38px;
 				height: 38px;
 				border: solid 1px #d3d3d3;
 				display: inline-block;
 				background: #fff;
 				border-radius: 3px;
 				vertical-align: top;
 				text-align: center;
 				float: left;
 				padding: 3px;
 				color: #ddd;
 			}
 			
 			.msg-item .msg-user-img{
 				width: 38px;
 				height: 38px;
 				display: inline-block;
 				border-radius: 3px;
 				vertical-align: top;
 				text-align: center;
 				float: left;
 				color: #ddd;
 			}
 			
 			.msg-item .msg-content {
 				display: inline-block;
 				border-radius: 5px;
 				border: solid 1px #d3d3d3;
 				background-color: #FFFFFF;
 				color: #333;
 				padding: 8px;
 				vertical-align: top;
 				font-size: 15px;
 				position: relative;
 				margin: 0px 8px;
 				max-width: 75%;
 				min-width: 35px;
 				float: left;
 			}
 			.msg-item .msg-content .msg-content-inner {
 				overflow-x: hidden;
 			}
 			.msg-item .msg-content .msg-content-arrow {
 				position: absolute;
 				border: solid 1px #d3d3d3;
 				border-right: none;
 				border-top: none;
 				background-color: #FFFFFF;
 				width: 10px;
 				height: 10px;
 				left: -5px;
 				top: 12px;
 				-webkit-transform: rotateZ(45deg);
 				transform: rotateZ(45deg);
 			}
 			.msg-item-self .msg-user,
 			.msg-item-self .msg-content {
 				float: right;
 			}
 			.msg-item-self .msg-content .msg-content-arrow {
 				left: auto;
 				right: -5px;
 				-webkit-transform: rotateZ(225deg);
 				transform: rotateZ(225deg);
 			}
 			.msg-item-self .msg-content,
 			.msg-item-self .msg-content .msg-content-arrow {
 				background-color: #4CD964;
 				color: #fff;
 				border-color: #2AC845;
 			}
 			footer .mui-icon {
 				color: #999999;
 			}
 			footer .mui-icon:active {
 				color: #FF9900 !important;
 			}/*#007AFF*/
 			footer .mui-icon-paperplane:before {
 				content: "发送";
 			}
 			footer .mui-icon-paperplane {
 				/*-webkit-transform: rotateZ(45deg);
 				transform: rotateZ(45deg);*/
 				
 				font-size: 16px;
 				word-break: keep-all;
 				line-height: 100%;
 				padding-top: 6px;
 				color: rgba(0, 135, 250, 1);
 			}
 			#msg-sound {
 				-webkit-user-select: none !important;
 				user-select: none !important;
 			}
 			.rprogress {
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				width: 140px;
 				height: 140px;
 				margin-left: -70px;
 				margin-top: -70px;
 				background-image: url(../images/arecord.png);
 				background-repeat: no-repeat;
 				background-position: center center;
 				background-size: 30px 30px;
 				background-color: rgba(0, 0, 0, 0.7);
 				border-radius: 5px;
 				display: none;
 				-webkit-transition: .15s;
 			}
 			.rschedule {
 				background-color: rgba(0, 0, 0, 0);
 				border: 5px solid rgba(0, 183, 229, 0.9);
 				opacity: .9;
 				border-left: 5px solid rgba(0, 0, 0, 0);
 				border-right: 5px solid rgba(0, 0, 0, 0);
 				border-radius: 50px;
 				box-shadow: 0 0 15px #2187e7;
 				width: 46px;
 				height: 46px;
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				margin-left: -23px;
 				margin-top: -23px;
 				-webkit-animation: spin 1s infinite linear;
 				animation: spin 1s infinite linear;
 			}
 			.r-sigh{
 				display: none;
 				border-radius: 50px;
 				box-shadow: 0 0 15px #2187e7;
 				width: 46px;
 				height: 46px;
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				margin-left: -23px;
 				margin-top: -23px;
 				text-align: center;
 				line-height: 46px;
 				font-size: 40px;
 				font-weight: bold;
 				color: #2187e7;
 			}
 			.rprogress-sigh{
 				background-image: none !important;
 			}
 			.rprogress-sigh .rschedule{
 				display: none !important;
 			}
 			.rprogress-sigh .r-sigh{
 				display: block !important;
 			}
 			.rsalert {
 				font-size: 12px;
 				color: #bbb;
 				text-align: center;
 				position: absolute;
 				border-radius: 5px;
 				width: 130px;
 				margin: 5px 5px;
 				padding: 5px;
 				left: 0px;
 				bottom: 0px;
 			}
 			@-webkit-keyframes spin {
 				0% {
 					-webkit-transform: rotate(0deg);
 				}
 				100% {
 					-webkit-transform: rotate(360deg);
 				}
 			}
 			@keyframes spin {
 				0% {
 					transform: rotate(0deg);
 				}
 				100% {
 					transform: rotate(360deg);
 				}
 			}
 			#h {
 				background: #fff;
 				border: solid 1px #ddd;
 				padding: 10px !important;
 				font-size: 16px !important;
 				font-family: verdana !important;
 				line-height: 18px !important;
 				overflow: visible;
 				position: absolute;
 				left: -1000px;
 				right: 0px;
 				word-break: break-all;
 				word-wrap: break-word;
 			}
 			.cancel {
 				background-color: darkred;
 			}
 		</style>
 	</head>
  	<body contextmenu="return false;">
 		<header class="mui-bar mui-bar-nav toptitbox">
 			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></span>
 			<h1 class="mui-title toptit">对方姓名</h1>
 			<span class="mui-icon mui-icon-contact mui-pull-right personhead"></span>
 		</header>
 		<pre id='h'></pre>
 		<script id='msg-template' type="text/template">
 			<% for(var i in record){ var item=record[i]; %>
 				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
 					<% if(item.sender=='self' ) { %>
 						<i class="msg-user mui-icon mui-icon-person"></i>
 					<% } else { %>
 						<img class="msg-user-img" src="../images/logo.png" alt="" />
 					<% } %>
 					<div class="msg-content">
 						<div class="msg-content-inner">
 							<% if(item.type=='text' ) { %>
 								<%=( item.content|| '&nbsp;&nbsp;') %>
 							<% } else if(item.type=='image' ) { %>
 								<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
 							<% } else if(item.type=='sound' ) { %>
 								<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
 								<span class="play-state">点击播放</span>
 							<% } %>
 						</div>
 						<div class="msg-content-arrow"></div>
 					</div>
 					<div class="mui-item-clear"></div>
 				</div>
 			<% } %>
 		</script>
 		<div class="mui-content">
 			<div class="operatebox">
 				<div class="themespan mui-pull-left" style="width:70%;">
 					<span class="">关于XXXXXX的咨询</span>
 				</div>
 				
 				<div class="operatebtnbox mui-pull-right">
 					<!--未评价-->
	                <button class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn" style="width:80px;">去评价</button>
 					<!--已评价-->
 					<div class="">
 						<span></span>
 						<div>
 							
 						</div>
 					</div>
 				</div>
 			</div>
 			<div id='msg-list'>
 			</div>
 		</div>
 				
 		<script src="../js/public/mui.min.js"></script>
 		<script src="../js/public/mui.imageViewer.js"></script>
 		<script src="../js/public/arttmpl.js"></script>
 		<script type="text/javascript" charset="utf-8">
		</script>
	</body>
</html>

app/html/chats.html

@@ -0,0 +1,689 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.imageviewer.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			footer {
				position: fixed;
				width: 100%;
				height: 50px;
				min-height: 50px;
				border-top: solid 1px #bbb;
				left: 0px;
				bottom: 0px;
				overflow: hidden;
				padding: 0px 50px;
				background-color: #fafafa;
			}
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
 				padding: 12px 4px;
 			}
 			.footer-right {
 				position: absolute;
 				width: 50px;
 				height: 50px;
 				right: 0px;
 				bottom: 0px;
 				text-align: center;
 				vertical-align: middle;
 				line-height: 100%;
 				padding: 12px 5px;
 				display: inline-block;
 			}
 			.footer-center {
 				height: 100%;
 				padding: 5px 0px;
 			}
 			.footer-center [class*=input] {
 				width: 100%;
 				height: 100%;
 				border-radius: 5px;
 			}
 			.footer-center .input-text {
 				background: #fff;
 				border: solid 1px #ddd;
 				padding: 10px !important;
 				font-size: 16px !important;
 				line-height: 18px !important;
 				font-family: verdana !important;
 				overflow: hidden;
 			}
 			.footer-center .input-sound {
 				background-color: #eee;
 			}
 			.mui-content {
 				height: 100%;
 				padding: 44px 0px 50px 0px;
 				overflow: auto;
 				background-color: #eaeaea;
 			}
 			#msg-list {
 				height: 100%;
 				overflow: auto;
 				-webkit-overflow-scrolling: touch;
 			}
 			.msg-item {
 				padding: 8px;
 				clear: both;
 			}
 			.msg-item .mui-item-clear {
 				clear: both;
 			}
 			.msg-item .msg-user {
 				width: 38px;
 				height: 38px;
 				border: solid 1px #d3d3d3;
 				display: inline-block;
 				background: #fff;
 				border-radius: 3px;
 				vertical-align: top;
 				text-align: center;
 				float: left;
 				padding: 3px;
 				color: #ddd;
 			}
 			
 			.msg-item .msg-user-img{
 				width: 38px;
 				height: 38px;
 				display: inline-block;
 				border-radius: 3px;
 				vertical-align: top;
 				text-align: center;
 				float: left;
 				color: #ddd;
 			}
 			
 			.msg-item .msg-content {
 				display: inline-block;
 				border-radius: 5px;
 				border: solid 1px #d3d3d3;
 				background-color: #FFFFFF;
 				color: #333;
 				padding: 8px;
 				vertical-align: top;
 				font-size: 15px;
 				position: relative;
 				margin: 0px 8px;
 				max-width: 75%;
 				min-width: 35px;
 				float: left;
 			}
 			.msg-item .msg-content .msg-content-inner {
 				overflow-x: hidden;
 			}
 			.msg-item .msg-content .msg-content-arrow {
 				position: absolute;
 				border: solid 1px #d3d3d3;
 				border-right: none;
 				border-top: none;
 				background-color: #FFFFFF;
 				width: 10px;
 				height: 10px;
 				left: -5px;
 				top: 12px;
 				-webkit-transform: rotateZ(45deg);
 				transform: rotateZ(45deg);
 			}
 			.msg-item-self .msg-user,
 			.msg-item-self .msg-content {
 				float: right;
 			}
 			.msg-item-self .msg-content .msg-content-arrow {
 				left: auto;
 				right: -5px;
 				-webkit-transform: rotateZ(225deg);
 				transform: rotateZ(225deg);
 			}
 			.msg-item-self .msg-content,
 			.msg-item-self .msg-content .msg-content-arrow {
 				background-color: #4CD964;
 				color: #fff;
 				border-color: #2AC845;
 			}
 			footer .mui-icon {
 				color: #999999;
 			}
 			footer .mui-icon:active {
 				color: #FF9900 !important;
 			}/*#007AFF*/
 			footer .mui-icon-paperplane:before {
 				content: "发送";
 			}
 			footer .mui-icon-paperplane {
 				/*-webkit-transform: rotateZ(45deg);
 				transform: rotateZ(45deg);*/
 				
 				font-size: 16px;
 				word-break: keep-all;
 				line-height: 100%;
 				padding-top: 6px;
 				color: rgba(0, 135, 250, 1);
 			}
 			#msg-sound {
 				-webkit-user-select: none !important;
 				user-select: none !important;
 			}
 			.rprogress {
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				width: 140px;
 				height: 140px;
 				margin-left: -70px;
 				margin-top: -70px;
 				background-image: url(../images/arecord.png);
 				background-repeat: no-repeat;
 				background-position: center center;
 				background-size: 30px 30px;
 				background-color: rgba(0, 0, 0, 0.7);
 				border-radius: 5px;
 				display: none;
 				-webkit-transition: .15s;
 			}
 			.rschedule {
 				background-color: rgba(0, 0, 0, 0);
 				border: 5px solid rgba(0, 183, 229, 0.9);
 				opacity: .9;
 				border-left: 5px solid rgba(0, 0, 0, 0);
 				border-right: 5px solid rgba(0, 0, 0, 0);
 				border-radius: 50px;
 				box-shadow: 0 0 15px #2187e7;
 				width: 46px;
 				height: 46px;
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				margin-left: -23px;
 				margin-top: -23px;
 				-webkit-animation: spin 1s infinite linear;
 				animation: spin 1s infinite linear;
 			}
 			.r-sigh{
 				display: none;
 				border-radius: 50px;
 				box-shadow: 0 0 15px #2187e7;
 				width: 46px;
 				height: 46px;
 				position: absolute;
 				left: 50%;
 				top: 50%;
 				margin-left: -23px;
 				margin-top: -23px;
 				text-align: center;
 				line-height: 46px;
 				font-size: 40px;
 				font-weight: bold;
 				color: #2187e7;
 			}
 			.rprogress-sigh{
 				background-image: none !important;
 			}
 			.rprogress-sigh .rschedule{
 				display: none !important;
 			}
 			.rprogress-sigh .r-sigh{
 				display: block !important;
 			}
 			.rsalert {
 				font-size: 12px;
 				color: #bbb;
 				text-align: center;
 				position: absolute;
 				border-radius: 5px;
 				width: 130px;
 				margin: 5px 5px;
 				padding: 5px;
 				left: 0px;
 				bottom: 0px;
 			}
 			@-webkit-keyframes spin {
 				0% {
 					-webkit-transform: rotate(0deg);
 				}
 				100% {
 					-webkit-transform: rotate(360deg);
 				}
 			}
 			@keyframes spin {
 				0% {
 					transform: rotate(0deg);
 				}
 				100% {
 					transform: rotate(360deg);
 				}
 			}
 			#h {
 				background: #fff;
 				border: solid 1px #ddd;
 				padding: 10px !important;
 				font-size: 16px !important;
 				font-family: verdana !important;
 				line-height: 18px !important;
 				overflow: visible;
 				position: absolute;
 				left: -1000px;
 				right: 0px;
 				word-break: break-all;
 				word-wrap: break-word;
 			}
 			.cancel {
 				background-color: darkred;
 			}
 		</style>
 	</head>
  	<body contextmenu="return false;">
 		<header class="mui-bar mui-bar-nav toptitbox">
 			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></span>
 			<h1 class="mui-title toptit">对方姓名</h1>
 			<span class="mui-icon mui-icon-contact mui-pull-right personhead"></span>
 		</header>
 		<pre id='h'></pre>
 		<script id='msg-template' type="text/template">
 			<% for(var i in record){ var item=record[i]; %>
 				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
 					<% if(item.sender=='self' ) { %>
 						<i class="msg-user mui-icon mui-icon-person"></i>
 					<% } else { %>
 						<img class="msg-user-img" src="../images/logo.png" alt="" />
 					<% } %>
 					<div class="msg-content">
 						<div class="msg-content-inner">
 							<% if(item.type=='text' ) { %>
 								<%=( item.content|| '&nbsp;&nbsp;') %>
 							<% } else if(item.type=='image' ) { %>
 								<img class="msg-content-image" src="<%=(item.content)%>" style="max-width: 100px;" />
 							<% } else if(item.type=='sound' ) { %>
 								<span class="mui-icon mui-icon-mic" style="font-size: 18px;font-weight: bold;"></span>
 								<span class="play-state">点击播放</span>
 							<% } %>
 						</div>
 						<div class="msg-content-arrow"></div>
 					</div>
 					<div class="mui-item-clear"></div>
 				</div>
 			<% } %>
 		</script>
 		<div class="mui-content">
 			<div class="operatebox">
 				<div class="themespan mui-pull-left">
 					<span class="">关于XXXXXX的咨询关于XXXXXX的咨fhj</span>
 				</div>
 				<div class="operatebtnbox mui-pull-right">
 					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn">点击确认完成咨询</button>
 				</div>
 			</div>
 			<div id='msg-list'>
 			</div>
 		</div>
 		<footer>
 			<div class="footer-left">
 				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
 			</div>
 			<div class="footer-center">
 				<textarea id='msg-text' type="text" class='input-text'></textarea>
 				<button id='msg-sound' type="button" class='input-sound' style="display: none;">按住说话</button>
 			</div>
 			<label for="" class="footer-right">
 				<i id='msg-type' class="mui-icon mui-icon-mic"></i>
 			</label>
 		</footer>
 		<div id='sound-alert' class="rprogress">
 			<div class="rschedule"></div>
 			<div class="r-sigh">!</div>
 			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
 		</div>
 		<script src="../js/public/mui.min.js"></script>
 		<script src="../js/public/mui.imageViewer.js"></script>
 		<script src="../js/public/arttmpl.js"></script>
 		<script type="text/javascript" charset="utf-8">
 			(function($, doc) {
 				var MIN_SOUND_TIME = 800;
 				$.init({
 					gestureConfig: {
 						tap: true, //默认为true
 						doubletap: true, //默认为false
 						longtap: true, //默认为false
 						swipe: true, //默认为true
 						drag: true, //默认为true
 						hold: true, //默认为false，不监听
 						release: true //默认为false，不监听
 					}
 				});
 				template.config('escape', false);
 				//$.plusReady=function(fn){fn();};
 				$.plusReady(function() {
 					plus.webview.currentWebview().setStyle({
 						softinputMode: "adjustResize"
 					});
 					var showKeyboard = function() {
 						if ($.os.ios) {
 							var webView = plus.webview.currentWebview().nativeInstanceObject();
 							webView.plusCallMethod({
 								"setKeyboardDisplayRequiresUserAction": false
 							});
 						} else {
 							var Context = plus.android.importClass("android.content.Context");
 							var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
 							var main = plus.android.runtimeMainActivity();
 							var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
 							imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
 							//var view = ((ViewGroup)main.findViewById(android.R.id.content)).getChildAt(0);
 							imm.showSoftInput(main.getWindow().getDecorView(), InputMethodManager.SHOW_IMPLICIT);
 							//alert("ll");
 						}
 					};
   					var record = [{
   						sender: 'zs',
   						type: 'text',
   						content: 'Hi，我是 科袖 小管家！'
   					}];
 					var ui = {
 						body: doc.querySelector('body'),
 						footer: doc.querySelector('footer'),
 						footerRight: doc.querySelector('.footer-right'),
 						footerLeft: doc.querySelector('.footer-left'),
 						btnMsgType: doc.querySelector('#msg-type'),
 						boxMsgText: doc.querySelector('#msg-text'),
 						boxMsgSound: doc.querySelector('#msg-sound'),
 						btnMsgImage: doc.querySelector('#msg-image'),
 						areaMsgList: doc.querySelector('#msg-list'),
 						boxSoundAlert: doc.querySelector('#sound-alert'),
 						h: doc.querySelector('#h'),
 						content: doc.querySelector('.mui-content')
 					};
 					ui.h.style.width = ui.boxMsgText.offsetWidth+'px';
 					//alert(ui.boxMsgText.offsetWidth );
 					var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
 					var msgItemTap = function(msgItem, event) {
 						var msgType = msgItem.getAttribute('msg-type');
 						var msgContent = msgItem.getAttribute('msg-content')
 						if (msgType == 'sound') {
 							player = plus.audio.createPlayer(msgContent);
 							var playState = msgItem.querySelector('.play-state');
 							playState.innerText = '正在播放...';
 							player.play(function() {
 								playState.innerText = '点击播放';
 							}, function(e) {
 								playState.innerText = '点击播放';
 							});
 						}
 					};
 					var imageViewer = new $.ImageViewer('.msg-content-image', {
 						dbl: false
 					});
 					var bindMsgList = function() {
 						//绑定数据:
 						/*tp.bind({
 							template: 'msg-template',
 							element: 'msg-list',
 							model: record
 						});*/
 						ui.areaMsgList.innerHTML = template('msg-template', {
 							"record": record
 						});
 						var msgItems = ui.areaMsgList.querySelectorAll('.msg-item');
 						[].forEach.call(msgItems, function(item, index) {
 							item.addEventListener('tap', function(event) {
 								msgItemTap(item, event);
 							}, false);
 						});
 						imageViewer.findAllImage();
 						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight +  ui.areaMsgList.offsetHeight;
 					};
 					bindMsgList();
 					window.addEventListener('resize', function() {
 						ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight +  ui.areaMsgList.offsetHeight;
 					}, false);
 					var send = function(msg) {
 						record.push(msg);
 						bindMsgList();
 						toRobot(msg.content);
 					};
 					var toRobot = function(info) {
 						var apiUrl = 'http://www.tuling123.com/openapi/api';
 						$.getJSON(apiUrl, {
 							"key": 'acfbca724ea1b5db96d2eef88ce677dc',
 							"info": info,
 							"userid": plus.device.uuid
 						}, function(data) {
 							//alert(JSON.stringify(data));
 							record.push({
 								sender: 'zs',
 								type: 'text',
 								content: data.text
 							});
 							bindMsgList();
 						});
 					};
  					function msgTextFocus() {
 							ui.boxMsgText.focus();
 							setTimeout(function() {
 								ui.boxMsgText.focus();
 							}, 150);
 						}
 						//解决长按“发送”按钮，导致键盘关闭的问题；
 					ui.footerRight.addEventListener('touchstart', function(event) {
 						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
 							msgTextFocus();
 							event.preventDefault();
 						}
 					});
 					//解决长按“发送”按钮，导致键盘关闭的问题；
 					ui.footerRight.addEventListener('touchmove', function(event) {
 						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
 							msgTextFocus();
 							event.preventDefault();
 						}
 					});
 					//					ui.footerRight.addEventListener('touchcancel', function(event) {
 					//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
 					//							msgTextFocus();
 					//							event.preventDefault();
 					//						}
 					//					});
 					//					ui.footerRight.addEventListener('touchend', function(event) {
 					//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
 					//							msgTextFocus();
 					//							event.preventDefault();
 					//						}
 					//					});
 					ui.footerRight.addEventListener('release', function(event) {
 						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
 							//showKeyboard();
 							ui.boxMsgText.focus();
 							setTimeout(function() {
 								ui.boxMsgText.focus();
 							}, 150);
 							//							event.detail.gesture.preventDefault();
 							send({
 								sender: 'self',
 								type: 'text',
 								content: ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>')
 							});
 							ui.boxMsgText.value = '';
 							$.trigger(ui.boxMsgText, 'input', null);
 						} else if (ui.btnMsgType.classList.contains('mui-icon-mic')) {
 							ui.btnMsgType.classList.add('mui-icon-compose');
 							ui.btnMsgType.classList.remove('mui-icon-mic');
 							ui.boxMsgText.style.display = 'none';
 							ui.boxMsgSound.style.display = 'block';
 							ui.boxMsgText.blur();
 							document.body.focus();
 						} else if (ui.btnMsgType.classList.contains('mui-icon-compose')) {
 							ui.btnMsgType.classList.add('mui-icon-mic');
 							ui.btnMsgType.classList.remove('mui-icon-compose');
 							ui.boxMsgSound.style.display = 'none';
 							ui.boxMsgText.style.display = 'block';
 							//--
 							//showKeyboard();
 							ui.boxMsgText.focus();
 							setTimeout(function() {
 								ui.boxMsgText.focus();
 							}, 150);
 						}
 					}, false);
 					ui.footerLeft.addEventListener('tap', function(event) {
 						var btnArray = [{
 							title: "拍照"
 						}, {
 							title: "从相册选择"
 						}];
 						plus.nativeUI.actionSheet({
 							title: "选择照片",
 							cancel: "取消",
 							buttons: btnArray
 						}, function(e) {
 							var index = e.index;
 							switch (index) {
 								case 0:
 									break;
 								case 1:
 									var cmr = plus.camera.getCamera();
 									cmr.captureImage(function(path) {
 										send({
 											sender: 'self',
 											type: 'image',
 											content: "file://" +  plus.io.convertLocalFileSystemURL(path)
 										});
 									}, function(err) {});
 									break;
 								case 2:
 									plus.gallery.pick(function(path) {
 										send({
 											sender: 'self',
 											type: 'image',
 											content: path
 										});
 									}, function(err) {}, null);
 									break;
 							}
 						});
 					}, false); 
 					var setSoundAlertVisable=function(show){
 						if(show){
 							ui.boxSoundAlert.style.display = 'block';
 							ui.boxSoundAlert.style.opacity = 1;
 						}else{
 							ui.boxSoundAlert.style.opacity = 0;
 							//fadeOut完成再真正隐藏
 							setTimeout(function(){
 								ui.boxSoundAlert.style.display = 'none';
 							},200);
 						}
 					};
 					var recordCancel = false;
 					var recorder = null;
 					var audio_tips = document.getElementById("audio_tips");
					var startTimestamp = null;
					var stopTimestamp = null;
					var stopTimer = null;
					ui.boxMsgSound.addEventListener('hold', function(event) {
						recordCancel = false;
						if(stopTimer)clearTimeout(stopTimer);
						audio_tips.innerHTML = "手指上划，取消发送";
						ui.boxSoundAlert.classList.remove('rprogress-sigh');
						setSoundAlertVisable(true);
						recorder = plus.audio.getRecorder();
						if (recorder == null) {
							plus.nativeUI.toast("不能获取录音对象");
							return;
						}
						startTimestamp = (new Date()).getTime();
						recorder.record({
							filename: "_doc/audio/"
						}, function(path) {
							if (recordCancel) return;
							send({
								sender: 'self',
								type: 'sound',
								content: path
							});
						}, function(e) {
							plus.nativeUI.toast("录音时出现异常: " +  e.message);
						});
					}, false);
					ui.body.addEventListener('drag', function(event) {
						//console.log('drag');
						if (Math.abs(event.detail.deltaY) > 50) {
							if (!recordCancel) {
								recordCancel = true;
								if (!audio_tips.classList.contains("cancel")) {
									audio_tips.classList.add("cancel");
								}
								audio_tips.innerHTML = "松开手指，取消发送";
							}
						} else {
							if (recordCancel) {
								recordCancel = false;
								if (audio_tips.classList.contains("cancel")) {
									audio_tips.classList.remove("cancel");
								}
								audio_tips.innerHTML = "手指上划，取消发送";
							}
						}
					}, false);
					ui.boxMsgSound.addEventListener('release', function(event) {
						//console.log('release');
						if (audio_tips.classList.contains("cancel")) {
							audio_tips.classList.remove("cancel");
							audio_tips.innerHTML = "手指上划，取消发送";
						}
						//
						stopTimestamp = (new Date()).getTime();
						if (stopTimestamp - startTimestamp < MIN_SOUND_TIME) {
							audio_tips.innerHTML = "录音时间太短";
							ui.boxSoundAlert.classList.add('rprogress-sigh');
							recordCancel = true;
							stopTimer=setTimeout(function(){
								setSoundAlertVisable(false);
							},800);
						}else{
							setSoundAlertVisable(false);
						}
						recorder.stop();
					}, false);
					ui.boxMsgSound.addEventListener("touchstart", function(e) {
						//console.log("start....");
						e.preventDefault();
					});
					ui.boxMsgText.addEventListener('input', function(event) {
						ui.btnMsgType.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');
						ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');
						ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';
						ui.footer.style.height = (ui.h.offsetHeight +  footerPadding) +  'px';
						ui.content.style.paddingBottom = ui.footer.style.height;
					});
					ui.boxMsgText.addEventListener('tap', function(event) {
						ui.boxMsgText.focus();
						setTimeout(function() {
							ui.boxMsgText.focus();
						}, 0);
					}, false);
				});
			}(mui, document));
		</script>
	</body>
</html>

app/html/consultapply.html

@@ -52,7 +52,6 @@
					<ul class="aimclass">
						<li class="liactive"><em></em>技术咨询</li>
						<li><em></em>资源咨询</li>
						<li><em></em>会议邀请</li>
						<li><em></em>其他事务</li>
					</ul>
				</div>

app/html/consultlist.html

@@ -0,0 +1,203 @@
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="../css/mui.min.css" rel="stylesheet"/>
    <link href="../css/app.css" rel="stylesheet"/>
    
    <style>
    /*跨webview需要手动指定位置*/
			
			.mui-plus header.mui-bar {
				display: none!important;
			}
			.mui-plus .mui-bar-nav~.mui-content {
				padding: 0!important;
			}
			
			.mui-plus .plus{
				display: inline;
			}
			
			.plus{
				display: none;
			}
			
			#topPopover {
				position: fixed;
				top: 16px;
				right: 6px;
			}
			#topPopover .mui-popover-arrow {
				left: auto;
				right: 6px;
			}
			
			span.mui-icon {
				font-size: 14px;
				color: #007aff;
				margin-left: -15px;
				padding-right: 10px;
			}
			.mui-popover {
				height: 300px;
			}
    </style>
</head>
<body>
	<!-- 主页面标题 -->
	<header class="mui-bar mui-bar-nav toptitbox">
	    <h1 class="mui-title toptit">咨询</h1>
	</header>
	<!--主页面底部菜单-->
    <nav class="mui-bar mui-bar-tab footbox">
	    <a class="mui-tab-item mui-active" href="index.html">
	        <span class="mui-icon mui-icon-home"></span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-chat"></span>
	    </a>
	    <a class="mui-tab-item">
	        <span class="mui-icon mui-icon-email"></span>
	    </a>
	    <a class="mui-tab-item" href="html/myaccount.html">
	        <span class="mui-icon mui-icon-person"></span>
	    </a>
	</nav>
    <!-- 主页面内容容器 -->
    <div class="mui-content">
    	<!-- 主界面具体展示内容 -->
    	<div class="filterbox2">
			<ul class="filterblock2">
				<li>
					<select class="filterlist2">
						<option>全部</option>
						<option>我的需求</option>
						<option>向我咨询</option>
					</select>
					<span class="mui-icon mui-icon-arrowdown downarrow"></span>
				</li>
				<li>
					<a href="#middlePopover" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined filterlist" >学术领域<em class="mui-icon mui-icon-arrowdown"></em></a>
				</li>
				<li>
					<button class="mui-btn mui-btn-block filterlist" type='button'>应用行业<em class="mui-icon mui-icon-arrowdown"></em></button>
				</li>
			</ul>
		</div>
        <!--图文列表-->
        <div class="mui-card-content conblock">
        	
	        <ul class="mui-table-view protable">
	            <li class="mui-table-view-cell mui-media">
	            	<div class="coutopicbox">
	            		<span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
	            		<div class="coustatus mui-pull-right">
	            			<span class="aimlabel">技术</span>
	            			<span class="status-1">进行中</span>
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
	            		</div>
	            		
	            	</div>
	                <a class="proinfor" href="chats.html">
						<span class="mui-badge mui-badge-danger">45</span>
		                <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
	                    <div class="mui-media-body">
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>	
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
	                    	<p class="listtit3">专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名专家姓名</p>
	                    </div>
	                </a>
	            </li>
	            <li class="mui-table-view-cell mui-media">
	            	<div class="coutopicbox">
	            		<span class="coutheme mui-ellipsis mui-pull-left"><span>回复：</span>关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
	            		<div class="coustatus mui-pull-right">
	            			<span class="aimlabel">其它</span>
	            			<span class="status-2">待评价</span>
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
	            		</div>
	            		
	            	</div>
	                <a class="proinfor" href="chats.html">
	                	<span class="mui-badge mui-badge-danger">1</span>
	                    <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
	                    <div class="mui-media-body">
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>	
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
	                    	<p class="listtit3">专家姓名专家姓名专家姓名专家</p>
	                    </div>
	                </a>
	            </li>
				<li class="mui-table-view-cell mui-media">
	            	<div class="coutopicbox">
	            		<span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
	            		<div class="coustatus mui-pull-right">
	            			<span class="aimlabel">资源</span>
	            			<span class="status-3">已完成</span>
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
	            		</div>
	            		
	            	</div>
	                <a class="proinfor" href="chats.html">
	                    <img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">
	                    <div class="mui-media-body">
	                        <span class="listtit">专家姓名<img class="smallicon authicon" src="../images/authicon.png"/><span class="thistime">今天 10:20</span></span>	
	                        <p class="listtit2"><span>职称</span>，<span>职务</span>，<span>所属机构</span> | <span>所在地</span></p>
	                    	<p class="listtit3">专家姓名专姓名专家姓名专家姓名专姓名专家姓名专家姓名</p>
	                    </div>
	                </a>
	            </li>
	        </ul>
		</div>
    </div>
	
	<div id="middlePopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell"><a href="#">Item1</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item2</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item3</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item4</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item5</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item6</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item7</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item8</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item9</a>
						</li>
						<li class="mui-table-view-cell"><a href="#">Item10</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	<script src="../js/public/mui.min.js"></script>
    <script type="text/javascript" charset="utf-8">
      	mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('.mui-scroll-wrapper').scroll();
			mui('body').on('shown', '.mui-popover', function(e) {
				//console.log('shown', e.detail.id);//detail为当前popover元素
			});
			mui('body').on('hidden', '.mui-popover', function(e) {
				//console.log('hidden', e.detail.id);//detail为当前popover元素
			});
    </script>	
</body>
</html>

app/html/myaccount.html

@@ -51,11 +51,17 @@
		    </div>
			<div class="mui-input-group  marginbox">
				<ul class="mui-table-view">
				    <!--<li class="mui-table-view-cell">
				        <a class="mui-navigate-right walltebox">
				        	<em class="actionicon wallteicon mui-pull-left"></em>
				        	<span class="mui-pull-left">我的钱包</span>
				        	<span class="rightword">￥0.00</span>
				        </a>
				    </li>-->
				    <li class="mui-table-view-cell">
				        <a class="mui-navigate-right walltebox">
				        	<em class="actionicon wallteicon mui-pull-left"></em>
				        	<span class="mui-pull-left">我的钱包</span>
				        	<span class="rightword">￥0.00</span>
				        <a class="mui-navigate-right" href="attentions.html">
				        	<em class="actionicon attenticon mui-pull-left"></em>
				        	<span class="mui-pull-left">我的关注</span>
				        </a>
				    </li>
				    <li class="mui-table-view-cell">
@@ -64,6 +70,7 @@
				        	<span class="mui-pull-left">邀请新用户</span>
				        </a>
				    </li>
				    
				</ul>
		    </div>
		    <div class="mui-input-group  marginbox">

app/html/proinforbrow-more.html

@@ -16,10 +16,15 @@
		</header>
		
		<!--主页面底部菜单-->
	    <nav class="mui-bar mui-bar-tab footbox">
		    <div class="dialogbtn">
		    	<em class="mui-pull-left"></em>
				<span class="mui-pull-left">联系专家</span>
	    <nav class="mui-bar mui-bar-tab mui-clearfix footbox">
		    <div class="dialogbtn mui-pull-left btnactive">
		    	<div>
			    	<em class="mui-pull-left"></em>
					<span class="mui-pull-left">联系专家</span>
				</div>
			</div>
			<div class="attentbtn mui-pull-left">
				<em></em>
			</div>
		</nav>
		<!-- 主页面内容容器 -->

app/html/proinforbrow.html

@@ -16,10 +16,15 @@
		</header>
		
		<!--主页面底部菜单-->
	    <nav class="mui-bar mui-bar-tab footbox">
		    <div class="dialogbtn">
		    	<em class="mui-pull-left"></em>
				<span class="mui-pull-left">联系专家</span>
	    <nav class="mui-bar mui-bar-tab mui-clearfix footbox">
		    <div class="dialogbtn mui-pull-left btnactive">
		    	<div>
			    	<em class="mui-pull-left"></em>
					<span class="mui-pull-left">联系专家</span>
				</div>
			</div>
			<div class="attentbtn mui-pull-left">
				<em></em>
			</div>
		</nav>
		<!-- 主页面内容容器 -->

app/js/public/arttmpl.js

@@ -0,0 +1,2 @@
/*!art-template - Template Engine | http://aui.github.com/artTemplate/*/
!function(){function a(a){return a.replace(t,"").replace(u,",").replace(v,"").replace(w,"").replace(x,"").split(y)}function b(a){return"'"+a.replace(/('|\\)/g,"\\$1").replace(/\r/g,"\\r").replace(/\n/g,"\\n")+"'"}function c(c,d){function e(a){return m+=a.split(/\n/).length-1,k&&(a=a.replace(/\s+/g," ").replace(/<!--[\w\W]*?-->/g,"")),a&&(a=s[1]+b(a)+s[2]+"\n"),a}function f(b){var c=m;if(j?b=j(b,d):g&&(b=b.replace(/\n/g,function(){return m++,"$line="+m+";"})),0===b.indexOf("=")){var e=l&&!/^=[=#]/.test(b);if(b=b.replace(/^=[=#]?|[\s;]*$/g,""),e){var f=b.replace(/\s*\([^\)]+\)/,"");n[f]||/^(include|print)$/.test(f)||(b="$escape("+b+")")}else b="$string("+b+")";b=s[1]+b+s[2]}return g&&(b="$line="+c+";"+b),r(a(b),function(a){if(a&&!p[a]){var b;b="print"===a?u:"include"===a?v:n[a]?"$utils."+a:o[a]?"$helpers."+a:"$data."+a,w+=a+"="+b+",",p[a]=!0}}),b+"\n"}var g=d.debug,h=d.openTag,i=d.closeTag,j=d.parser,k=d.compress,l=d.escape,m=1,p={$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1},q="".trim,s=q?["$out='';","$out+=",";","$out"]:["$out=[];","$out.push(",");","$out.join('')"],t=q?"$out+=text;return $out;":"$out.push(text);",u="function(){var text=''.concat.apply('',arguments);"+t+"}",v="function(filename,data){data=data||$data;var text=$utils.$include(filename,data,$filename);"+t+"}",w="'use strict';var $utils=this,$helpers=$utils.$helpers,"+(g?"$line=0,":""),x=s[0],y="return new String("+s[3]+");";r(c.split(h),function(a){a=a.split(i);var b=a[0],c=a[1];1===a.length?x+=e(b):(x+=f(b),c&&(x+=e(c)))});var z=w+x+y;g&&(z="try{"+z+"}catch(e){throw {filename:$filename,name:'Render Error',message:e.message,line:$line,source:"+b(c)+".split(/\\n/)[$line-1].replace(/^\\s+/,'')};}");try{var A=new Function("$data","$filename",z);return A.prototype=n,A}catch(B){throw B.temp="function anonymous($data,$filename) {"+z+"}",B}}var d=function(a,b){return"string"==typeof b?q(b,{filename:a}):g(a,b)};d.version="3.0.0",d.config=function(a,b){e[a]=b};var e=d.defaults={openTag:"<%",closeTag:"%>",escape:!0,cache:!0,compress:!1,parser:null},f=d.cache={};d.render=function(a,b){return q(a,b)};var g=d.renderFile=function(a,b){var c=d.get(a)||p({filename:a,name:"Render Error",message:"Template not found"});return b?c(b):c};d.get=function(a){var b;if(f[a])b=f[a];else if("object"==typeof document){var c=document.getElementById(a);if(c){var d=(c.value||c.innerHTML).replace(/^\s*|\s*$/g,"");b=q(d,{filename:a})}}return b};var h=function(a,b){return"string"!=typeof a&&(b=typeof a,"number"===b?a+="":a="function"===b?h(a.call(a)):""),a},i={"<":"&#60;",">":"&#62;",'"':"&#34;","'":"&#39;","&":"&#38;"},j=function(a){return i[a]},k=function(a){return h(a).replace(/&(?![\w#]+;)|[<>"']/g,j)},l=Array.isArray||function(a){return"[object Array]"==={}.toString.call(a)},m=function(a,b){var c,d;if(l(a))for(c=0,d=a.length;d>c;c++)b.call(a,a[c],c,a);else for(c in a)b.call(a,a[c],c)},n=d.utils={$helpers:{},$include:g,$string:h,$escape:k,$each:m};d.helper=function(a,b){o[a]=b};var o=d.helpers=n.$helpers;d.onerror=function(a){var b="Template Error\n\n";for(var c in a)b+="<"+c+">\n"+a[c]+"\n\n";"object"==typeof console&&console.error(b)};var p=function(a){return d.onerror(a),function(){return"{Template Error}"}},q=d.compile=function(a,b){function d(c){try{return new i(c,h)+""}catch(d){return b.debug?p(d)():(b.debug=!0,q(a,b)(c))}}b=b||{};for(var g in e)void 0===b[g]&&(b[g]=e[g]);var h=b.filename;try{var i=c(a,b)}catch(j){return j.filename=h||"anonymous",j.name="Syntax Error",p(j)}return d.prototype=i.prototype,d.toString=function(){return i.toString()},h&&b.cache&&(f[h]=d),d},r=n.$each,s="break,case,catch,continue,debugger,default,delete,do,else,false,finally,for,function,if,in,instanceof,new,null,return,switch,this,throw,true,try,typeof,var,void,while,with,abstract,boolean,byte,char,class,const,double,enum,export,extends,final,float,goto,implements,import,int,interface,long,native,package,private,protected,public,short,static,super,synchronized,throws,transient,volatile,arguments,let,yield,undefined",t=/\/\*[\w\W]*?\*\/|\/\/[^\n]*\n|\/\/[^\n]*$|"(?:[^"\\]|\\[\w\W])*"|'(?:[^'\\]|\\[\w\W])*'|\s*\.\s*[$\w\.]+/g,u=/[^\w$]+/g,v=new RegExp(["\\b"+s.replace(/,/g,"\\b|\\b")+"\\b"].join("|"),"g"),w=/^\d[^,]*|,\d[^,]*/g,x=/^,+|,+$/g,y=/^$|,+/;"function"==typeof define?define(function(){return d}):"undefined"!=typeof exports?module.exports=d:this.template=d}();

app/js/public/mui.imageViewer.js

@@ -0,0 +1,268 @@
/**
 * 图片预览组件
 * varstion 0.4.0
 * by Houfeng
 * Houfeng@DCloud.io
 */
(function($, document) {
	$.init({
		gestureConfig: {
			tap: true, //默认为true
			doubletap: true, //默认为false
			longtap: true, //默认为false
			swipe: true, //默认为true
			drag: true, //默认为true
			hold: true, //默认为false，不监听
			release: true //默认为false，不监听
		}
	});
	var touchSupport = ('ontouchstart' in document);
	var tapEventName = touchSupport ? 'tap' : 'click';
	var enterEventName = touchSupport ? 'tap' : 'click';
	var imageClassName = $.className('image');
	//创建DOM (此函数是否可放在 mui.js 中)
	$.dom = function(str) {
		if (!$.__create_dom_div__) {
			$.__create_dom_div__ = document.createElement('div');
		}
		$.__create_dom_div__.innerHTML = str;
		return $.__create_dom_div__.childNodes;
	};
	//图片预览组件类
	var ImageViewer = $.ImageViewer = $.Class.extend({
		//构造函数
		init: function(selector, options) {
			var self = this;
			self.options = options || {};
			self.selector = selector || 'img';
			if (self.options.dbl) {
				enterEventName = touchSupport ? 'doubletap' : 'dblclick';
			}
			self.findAllImage();
			self.createViewer();
			self.bindEvent();
		},
		//创建图片预览组件的整体 UI
		createViewer: function() {
			var self = this;
			self.viewer = $.dom("<div class='mui-imageviewer'><div class='mui-imageviewer-mask'></div><div class='mui-imageviewer-header'><i class='mui-icon mui-icon-closeempty mui-imageviewer-close'></i><span class='mui-imageviewer-state'></span></div><i class='mui-icon mui-icon-arrowleft  mui-imageviewer-left'></i><i class='mui-icon mui-icon-arrowright mui-imageviewer-right'></i></div>");
			self.viewer = self.viewer[0] || self.viewer;
			//self.viewer.style.height = screen.height;
			self.closeButton = self.viewer.querySelector('.mui-imageviewer-close');
			self.state = self.viewer.querySelector('.mui-imageviewer-state');
			self.leftButton = self.viewer.querySelector('.mui-imageviewer-left');
			self.rightButton = self.viewer.querySelector('.mui-imageviewer-right');
			self.mask = self.viewer.querySelector('.mui-imageviewer-mask');
			document.body.appendChild(self.viewer);
		},
		//查找所有符合的图片
		findAllImage: function() {
			var self = this;
			self.images = [].slice.call($(self.selector));
		},
		//检查图片是否为启动预览的图片
		checkImage: function(target) {
			var self = this;
			if (target.tagName !== 'IMG') return false;
			return self.images.some(function(image) {
				return image == target;
			});
		},
		//绑定事件
		bindEvent: function() {
			var self = this;
			//绑定图片 tap 事件
			document.addEventListener(enterEventName, function(event) {
				if (!self.viewer) return;
				var target = event.target;
				if (!self.checkImage(target)) return;
				self.viewer.style.display = 'block';
				setTimeout(function() {
					self.viewer.style.opacity = 1;
				}, 0);
				self.index = self.images.indexOf(target);
				self.currentItem = self.createImage(self.index);
			}, false);
			//关系按钮事件
			self.closeButton.addEventListener(tapEventName, function(event) {
				self.viewer.style.opacity = 0;
				setTimeout(function() {
					self.viewer.style.display = 'none';
					self.disposeImage(true);
				}, 600);
				event.preventDefault();
				event.cancelBubble = true;
			}, false);
			//处理左右按钮
			self.leftButton.addEventListener(tapEventName, function() {
				self.prev();
			}, false);
			self.rightButton.addEventListener(tapEventName, function() {
				self.next();
			}, false);
			//处理划动
			self.mask.addEventListener($.EVENT_MOVE, function(event) {
				event.preventDefault();
				event.cancelBubble = true;
			}, false);
			self.viewer.addEventListener('swipeleft', function(event) {
				if (self.scaleValue == 1) self.next();
				event.preventDefault();
				event.cancelBubble = true;
			}, false);
			self.viewer.addEventListener('swiperight', function(event) {
				if (self.scaleValue == 1) self.prev();
				event.preventDefault();
				event.cancelBubble = true;
			}, false);
			//处理缩放开始
			self.viewer.addEventListener($.EVENT_START, function(event) {
				var touches = event.touches;
				if (touches.length == 2) {
					var p1 = touches[0];
					var p2 = touches[1];
					var x = p1.pageX - p2.pageX; //x1-x2
					var y = p1.pageY - p2.pageY; //y1-y2
					self.scaleStart = Math.sqrt(x * x + y * y);
					self.isMultiTouch = true;
				} else if (touches.length = 1) {
					self.dragStart = touches[0];
				}
			}, false);
			self.viewer.addEventListener($.EVENT_MOVE, function(event) {
				var img = self.currentItem.querySelector('img');
				var touches = event.changedTouches;
				if (touches.length == 2) {
					event.preventDefault();
					event.cancelBubble = true;
					var p1 = touches[0];
					var p2 = touches[1];
					var x = p1.pageX - p2.pageX;
					var y = p1.pageY - p2.pageY;
					self.scaleEnd = Math.sqrt(x * x + y * y);
					self._scaleValue = (self.scaleValue * (self.scaleEnd / self.scaleStart));
					//self.state.innerText = self._scaleValue;
					img.style.webkitTransform = "scale(" + self._scaleValue + "," + self._scaleValue + ") "; // + " translate(" + self.dragX || 0 + "px," + self.dragY || 0 + "px)";
				} else if (!self.isMultiTouch && touches.length == 1 && self.scaleValue != 1) {
					event.preventDefault();
					event.cancelBubble = true;
					self.dragEnd = touches[0];
					self._dragX = self.dragX + (self.dragEnd.pageX - self.dragStart.pageX);
					self._dragY = self.dragY + (self.dragEnd.pageY - self.dragStart.pageY);
					img.style.marginLeft = self._dragX + 'px';
					img.style.marginTop = self._dragY + 'px';
					//img.style.transform = "translate(" + self._dragX + "px," + self._dragY + "px) " + " scale(" + self.scaleValue || 1 + "," + self.scaleValue || 1 + ")";
				}
			}, false);
			self.viewer.addEventListener($.EVENT_END, function() {
				self.scaleValue = self._scaleValue || self.scaleValue;
				self._scaleValue = null;
				self.dragX = self._dragX;
				self.dragY = self._dragY;
				self._dragX = null;
				self._dragY = null;
				var touches = event.touches;
				self.isMultiTouch = (touches.length != 0);
			});
			// doubletap 好像不能用
			self.viewer.addEventListener('doubletap', function() {
				var img = self.currentItem.querySelector('img');
				if (self.scaleValue === 1) {
					self.scaleValue = 2;
				} else {
					self.scaleValue = 1;
				}
				self.dragX = 0;
				self.dragY = 0;
				img.style.marginLeft = self.dragX + 'px';
				img.style.marginTop = self.dragY + 'px';
				img.style.webkitTransform = "scale(" + self.scaleValue + "," + self.scaleValue + ") "; //+ " translate(" + self.dragX || 0 + "px," + self.dragY || 0 + "px)";
				self.viewer.__tap_num = 0;
			}, false);
			//处理缩放结束
		},
		//下一张图片
		next: function() {
			var self = this;
			self.mask.style.display = 'block';
			self.index++;
			var newItem = self.createImage(self.index, 'right');
			setTimeout(function() {
				self.currentItem.classList.remove('mui-imageviewer-item-center');
				self.currentItem.classList.add('mui-imageviewer-item-left');
				newItem.classList.remove('mui-imageviewer-item-right');
				newItem.classList.add('mui-imageviewer-item-center');
				self.oldItem = self.currentItem;
				self.currentItem = newItem;
				// TODO: 临时,稍候将调整
				setTimeout(function() {
					self.disposeImage();
					self.mask.style.display = 'none';
				}, 600);
			}, 25);
		},
		//上一张图片
		prev: function() {
			var self = this;
			self.mask.style.display = 'block';
			self.index--;
			var newItem = self.createImage(self.index, 'left');
			setTimeout(function() {
				self.currentItem.classList.remove('mui-imageviewer-item-center');
				self.currentItem.classList.add('mui-imageviewer-item-right');
				newItem.classList.remove('mui-imageviewer-item-left');
				newItem.classList.add('mui-imageviewer-item-center');
				self.oldItem = self.currentItem;
				self.currentItem = newItem;
				// TODO: 临时,稍候将调整
				setTimeout(function() {
					self.disposeImage();
					self.mask.style.display = 'none';
				}, 600);
			}, 25);
		},
		//释放不显示的图片
		disposeImage: function(all) {
			var sel = '.mui-imageviewer-item-left,.mui-imageviewer-item-right';
			if (all) sel += ",.mui-imageviewer-item";
			var willdisposes = $(sel);
			willdisposes.each(function(i, item) {
				if (item.parentNode && item.parentNode.removeChild)
					item.parentNode.removeChild(item, true);
			});
		},
		//创建一个图片
		createImage: function(index, type) {
			var self = this;
			type = type || 'center';
			if (index < 0) index = self.images.length - 1;
			if (index > self.images.length - 1) index = 0;
			self.index = index;
			var item = $.dom("<div class='mui-imageviewer-item'></div>")[0];
			item.appendChild($.dom('<span><img src="' + self.images[self.index].src + '"/></span>')[0]);
			item.classList.add('mui-imageviewer-item-' + type);
			self.viewer.appendChild(item);
			self.state.innerText = (self.index + 1) + "/" + self.images.length;
			//重置初始缩放比例
			self.scaleValue = 1;
			self.dragX = 0;
			self.dragY = 0;
			return item;
		}
	});
	$.imageViewer = function(selector, options) {
		return new ImageViewer(selector, options);
	};
	$.ready(function() {
		$.imageViewer('.' + imageClassName);
	});
}(mui, document));