身份选择方式的选择样式、对话消息样式完善

app/css/app.css

.authword{ padding:2px 6px; margin-left:6px;border-radius:4px; color: #FFFFFF; font-size: 12px;}
.authed{ background: #FF9900; }
/*认证中*/
.authing{background: #6bbf00;}
.authing{background: #0ee032;}
/*未认证*/
.unauth{background: #efefef;color: #CCCCCC;}
em.icon-renzheng span{position:relative;top:0px;font-size:8px;line-height:8px;margin-right:6px;vertical-align:middle;}
.authicon-mana{color:#ff9900;}/*认证在企高管*/
.authicon-staff{color:#007AFF;}/*认证在企职员*/
.authicon-stu{color:#6bbf00;}/*认证在读学生*/
.authicon-stu{color:#0ee032;}/*认证在读学生*/
/*****表单公共样式********/
/*input输入相关*/
ul.boxnav li:nth-child(3) span{border:1px solid #66cc00; color: #66cc00;}
ul.boxnav li.liactive{}
ul.boxnav li .icon-check {border: 1px solid;border-radius: 50%;font-size: 12px;margin-right: 3%;}
ul.boxnav li.set:nth-child(1) span{border:1px solid #ff9900; color: #fff; background: #ff9900;}
ul.boxnav li.set:nth-child(2) span{border:1px solid #6699ff; color: #fff; background: #6699ff;}
ul.boxnav li.set:nth-child(3) span{border:1px solid #66cc00; color: #fff; background: #66cc00;}
ul.boxnav li.set:nth-child(1) span{border:1px solid #ff9900; color: #fff; background: #ff9900; }
ul.boxnav li.set:nth-child(2) span{border:1px solid #6699ff; color: #fff; background: #6699ff; }
ul.boxnav li.set:nth-child(3) span{border:1px solid #66cc00; color: #fff; background: #66cc00; }
ul.boxnav li.set span:before{
  font-family:"iconfont" !important;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  content: "\e645";
  border:1px solid;
  border-radius: 50%;
  font-size:12px; 
  margin-right: 4%;}
/*.maincon .basicinfo>li:not(.basicfrm){ font-size: 13px; line-height: 42px;}*/
.maincon ul li.basicfrm{list-style: none; position: relative; overflow: hidden; line-height: 20px;border-bottom:1px #F0F0F0 solid;margin-left: 2%;padding-left:0; }
.maincon ul li.basicfrm .frmtype{ height: 26px; padding:0; padding-right:2%;line-height:20px;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;}
.operatebox{ width:100%;background: #FFFFFF;overflow: hidden;min-height: 60px;padding:10px;position: relative;}
.themespan{ width: 54%;}
.operatebtnbox{width:44%;position:absolute; top:50%; right:1%;margin-top:-13px;}
/*已评价*/.operated{width:30%; margin-top:-18px;}
.coutopicbox .aimlabel{background:#6CA8FF;}
.coutopicbox .status-1{background:#FF9900;}/*进行中*//*咨询状态*/
.coutopicbox .status-2{background:#dd524d;}/*待评价*/
.coutopicbox .status-3{background:#6bbf00;}/*已完成*/
.coutopicbox .status-3{background:#0ee032;}/*已完成*/
.thistime{ position: absolute; right:6px; font-size: 12px; color: #999999;}

app/html/chats.html

 			.msg-item .msg-user {
 				width: 38px;
 				height: 38px;
 				border: solid 1px #d3d3d3;
 				/*border: solid 1px #d3d3d3;*/
 				display: inline-block;
 				background: #fff;
 				border-radius: 3px;
 				vertical-align: top;
 				text-align: center;
 				float: left;
 				padding: 3px;
 				/*padding: 3px;*/
 				color: #ddd;
 			}
 			
 			.msg-item .msg-content {
 				display: inline-block;
 				border-radius: 5px;
 				border: solid 1px #d3d3d3;
 				border: solid 1px #E3E3E3;
 				background-color: #FFFFFF;
 				color: #333;
 				padding: 8px;
 			}
 			.msg-item .msg-content .msg-content-arrow {
 				position: absolute;
 				border: solid 1px #d3d3d3;
 				border: solid 1px #E3E3E3;
 				border-right: none;
 				border-top: none;
 				background-color: #FFFFFF;
 			}
 			.msg-item-self .msg-content,
 			.msg-item-self .msg-content .msg-content-arrow {
 				background-color: #4CD964;
 				background-color: #0ee032;
 				color: #fff;
 				border-color: #2AC845;
 				border-color: #0ee032;
 			}
 			footer .mui-icon {
 				color: #999999;
				</div>
				<!--收到咨询，进行中-->
				<div class="operatebtnbox mui-pull-right displayNone" id="waying" style="width:30%;">
					<div class="evabox"><span>进行中</span></div>
					<!--<div class="evabox"><span>进行中</span></div>-->
				</div>
				<!--收到咨询，对方已评价-->
				<div class="operatebtnbox mui-pull-right operated displayNone" id="that_assessed" style="cursor: pointer;">
 			
 			<div class="consult_content">
 				<ul class="mui-table-view" >
	 				<li class="mui-table-view-cell mui-collapse" id="mui-active" style="background-color:#fff;">
	 				<li class="mui-table-view-cell mui-collapse" id="mui-active" style="background-color:#fff;border-top:1px solid #f0f0f0;border-top:1px solid #f0f0f0;">
	 					<div class="mui-collapse-content" id="consultCon">
							可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，
							只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，

app/html/fillinfo.html

			<div class="mui-input-group mainbox fillbox" id="box">
					<h3 class="boxnav-title">请先选择您现在的身份<em class="requiredcon"></em></h3>
					<ul class="boxnav">
						<li id="boxnav1"><span data-num="1" class="liactive"><em class="mui-icon iconfont"></em>科研工作者</span></li>
						<li id="boxnav2"><span data-num="2"><em class="mui-icon iconfont"></em>在企人员</span></li>
						<li id="boxnav3"><span data-num="3"><em class="mui-icon iconfont"></em>在校生</span></li>
						<li id="boxnav1"><span data-num="1">科研工作者</span></li>
						<li id="boxnav2"><span data-num="2">在企人员</span></li>
						<li id="boxnav3"><span data-num="3">在校生</span></li>
					</ul>
					<div class="maincon" style="display: none;">
						<ul class="basicinfo" >

app/html/identity.html

		<div class="mui-content"  style="background: #fff; margin-top:10px;" id="navsub">
			<h3 class="boxnav-title">请确认您现在的身份:</h3>
			<ul class="boxnav">
				<li><span typenum="1" class="liactive"><em class="mui-icon iconfont"></em>科研工作者</span></li>
				<li><span typenum="2"><em class="mui-icon iconfont"></em>在企人员</span></li>
				<li><span typenum="3"><em class="mui-icon iconfont"></em>在校生</span></li>
				<li><span typenum="1">科研工作者</span></li>
				<li><span typenum="2">在企人员</span></li>
				<li><span typenum="3">在校生</span></li>
			</ul>
		</div>
		<div class="mui-content-padded frmbox" style="margin-top:40px;">
					}
				}
			}
			//鼠标点击联系目的li时添加liactive类
			mui(".boxnav").on('tap','li span',function(e){
				var aimlist = document.querySelector('.boxnav').querySelectorAll("li span");
				for(var i = 0 ; i < aimlist.length;i++){
					aimlist[i].classList.remove('liactive');
					aimlist[i].querySelector('em').classList.remove('icon-check');
				}
				this.classList.add('liactive');
				this.querySelector("em").classList.add("icon-check");
			});
		</script>
	</body>

app/js/fillinfo.js

		}
	});
	
	//鼠标点击联系目的li时添加liactive类
	mui(".boxnav").on('tap','li span',function(e){
		var aimlist = document.querySelector('.boxnav').querySelectorAll("li span");
		for(var i = 0 ; i < aimlist.length;i++){
			aimlist[i].classList.remove('liactive');
			aimlist[i].querySelector('em').classList.remove('icon-check');
		}
		this.classList.add('liactive');
		this.querySelector("em").classList.add("icon-check");
	});
});