咨询页面和咨询对话列表的修改

src/main/webapp/consult.html

<!--  // 咨询-->
<div class="workconitem consublock">
    <div class="workcontit">咨询<span class="worksamlltit worksamlltit3 worksamlltitnow">收到咨询</span><span class="worksamlltit worksamlltit3">收到回复</span><span class="workset floatR">设置</span></div>
    <div class="workcontit">咨询<span class="worksamlltit worksamlltit3 worksamlltitnow">收到咨询</span><span class="worksamlltit worksamlltit3">收到回复</span><!-- <span class="workset floatR">设置</span> --></div>
    <div class="worksubcon"> 
    	<div class="workmysrc workmysrc3">	
             <div class="workmenubox clearfix">
                    <div class="workselectbox floatL">
                        <span onclick="hide('downbox')" id="showbox" class="workselectmenu" >全部</span>
                        <ul id="downbox" class="workdropdown" style="display:none;"> 
                            <li onclick="pick('全部')" class="cur">全部</li> 
                            <li onclick="pick('全部')" class="cur workcurrent">全部</li> 
                            <li onclick="pick('进行中')" class="cur">进行中</li> 
                            <li onclick="pick('待感谢')" class="cur">待感谢</li> 
                            <li onclick="pick('待评价')" class="cur">待评价</li> 
                    <div class="workselectbox floatL">
                        <span onclick="hide('downbox1')" id="showbox1" class="workselectmenu" >按发起时间排序</span>
                        <ul id="downbox1" class="workdropdown workdropdown2" style="display:none;"> 
                            <li onclick="pick1('按发起时间排序')" class="cur">按发起时间排序</li> 
                            <li onclick="pick1('按发起时间排序')" class="cur workcurrent">按发起时间排序</li> 
                            <li onclick="pick1('按最后回复时间排序')" class="cur">按最后回复时间排序</li> 
                            <li onclick="pick1('按完成时间排序')" class="cur">按完成时间排序</li> 
                       </ul> 
                                    <p class="rebackcon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tem</p>   
                                </div>
                                <div class="workhandle">
                                        <span class="coultstate">进行中</span>
                                        <span class="replybtn">回复/查看</span>
                                        <span class="moreopert">...</span>
                                        <ul class="moreopertbtn">
                                          	<li>投诉</li>
                                        </ul>
                                        <div class="rightopert floatR">
	                                        <span class="replybtn">回复/查看</span>
	                                        <span class="moreopert">...</span>
	                                        <ul class="moreopertbtn">
	                                          	<li>投诉</li>
	                                        </ul>
                                        </div>
                                        <div class="leftstate floatR">
                                        	<span class="coultstate"><i>进行中</i><em></em></span>
                                        </div>
                                </div> 
                            </td>
                        </tr>
                                    <p class="rebackcon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tem</p>   
                                </div>
                                <div class="workhandle">
                                        <span class="coultstate">进行中</span>
                                        <span class="replybtn">回复/查看</span>
                                        <span class="moreopert">...</span>
                                        <ul class="moreopertbtn">
                                          	<li>投诉</li>
                                        </ul>
                                		
                                        <div class="rightopert floatR">
	                                        <span class="replybtn">回复/查看</span>
	                                        <span class="moreopert">...</span>
	                                        <ul class="moreopertbtn">
	                                          	<li>投诉</li>
	                                        </ul>
                                        </div>
                                        <div class="leftstate floatR">
                                        	<span class="coultstate"><i>进行中</i><em></em></span>
                                        </div>
                                </div> 
                            </td>
                        </tr>
                                    <p class="rebackcon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tem</p>   
                                </div>
                                <div class="workhandle">
                                        <span class="coultstate">进行中</span>
                                        <span class="replybtn">回复/查看</span>
                                        <span class="moreopert">...</span>
                                        <ul class="moreopertbtn">
                                          	<li>投诉</li>
                                        </ul>
                                		<div class="rightopert floatR">
	                                        <span class="replybtn">回复/查看</span>
	                                        <span class="moreopert">...</span>
	                                        <ul class="moreopertbtn">
	                                          	<li>投诉</li>
	                                        </ul>
                                        </div>
                                        <div class="leftstate floatR">
                                        	<span class="coultstate"><i>咨询完成待评价</i><em></em></span>
                                        </div>
                                        
                                </div> 
                            </td>
                        </tr>
                    <div class="workselectbox floatL">
                        <span onclick="hide('downbox')" id="showbox" class="workselectmenu" >全部</span>
                        <ul id="downbox" class="workdropdown" style="display:none;"> 
                            <li onclick="pick('全部')" class="cur">全部</li> 
                            <li onclick="pick('全部')" class="cur workcurrent">全部</li> 
                            <li onclick="pick('进行中')" class="cur">进行中</li> 
                            <li onclick="pick('待感谢')" class="cur">待感谢</li> 
                            <li onclick="pick('待评价')" class="cur">待评价</li> 
                    <div class="workselectbox floatL">
                        <span onclick="hide('downbox1')" id="showbox1" class="workselectmenu" >按发起时间排序</span>
                        <ul id="downbox1" class="workdropdown workdropdown2" style="display:none;"> 
                            <li onclick="pick1('按发起时间排序')" class="cur">按发起时间排序</li> 
                            <li onclick="pick1('按发起时间排序')" class="cur workcurrent">按发起时间排序</li> 
                            <li onclick="pick1('按最后回复时间排序')" class="cur">按最后回复时间排序</li> 
                            <li onclick="pick1('按完成时间排序')" class="cur">按完成时间排序</li> 
                       </ul> 
                                    <p class="rebackcon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tem</p>   
                                </div>
                                <div class="workhandle">
                                        <span class="coultstate">进行中</span>
                                        <span class="replybtn">回复/查看</span>
                                        <span class="moreopert">...</span>
                                        <ul class="moreopertbtn">
                                          	<li>投诉</li>
                                        </ul>
                                        <div class="rightopert floatR">
	                                        <span class="replybtn">回复/查看</span>
	                                        <span class="moreopert">...</span>
	                                        <ul class="moreopertbtn">
	                                          	<li>投诉</li>
	                                        </ul>
                                        </div>
                                        <div class="leftstate floatR">
                                        	<span class="coultstate"><i>咨询完成待评价</i><em></em></span>
                                        </div>
                                </div> 
                            </td>
                        </tr>
                                    <p class="rebackcon">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viveorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tem</p>   
                                </div>
                                <div class="workhandle">
                                        <span class="coultstate">进行中</span>
                                        <span class="replybtn">回复/查看</span>
                                        <span class="moreopert">...</span>
                                        <ul class="moreopertbtn">
                                          	<li>投诉</li>
                                        </ul>
                                        <div class="rightopert floatR">
	                                        <span class="replybtn">回复/查看</span>
	                                        <span class="moreopert">...</span>
	                                        <ul class="moreopertbtn">
	                                          	<li>投诉</li>
	                                        </ul>
                                        </div>
                                        <div class="leftstate floatR">
                                        	<span class="coultstate"><i>咨询完成待评价</i><em></em></span>
                                        </div>
                                </div> 
                            </td>
                        </tr>
	/*排列顺序（正序、倒序）*/
	$(".orderedbtn").click(function(){
		$(this).find("div").css("background-position","-11px center");	
		$(this).find("div").css("background-position","-20px 1px");	
	})
	/*咨询菜单点击切换*/
	$(".worksamlltit3").click(function(){
		var index = $(this).index();	
		$(this).addClass("worksamlltitnow").siblings().removeClass("worksamlltitnow");	
		$(".workmysrc3").eq(index).show().siblings().hide();
	});
	

src/main/webapp/css/workspace.css

.workdropdown2 li{width:200px;}
.workcurrent{ background:url(../images/selected.png) no-repeat 90% center #f7f7f7; }
.orderedbtn{ padding:1px 20px;  cursor:pointer; }
.orderedbtn div{width:12px; height:18px; background:url(../images/order.png) no-repeat 0 center ;}
.orderedbtn{ padding:1px 6px;  cursor:pointer; }
.orderedbtn div{width:20px; height:20px; background:url(../images/order.png) no-repeat 0 1px #ff8400 ; border-radius:4px;}
.workselectcon{ padding:10px;}
.workselectitem{ overflow:hidden; margin:6px 0;}
.workitimg{ width:120px; height:120px; }
.messagebox{position:relative;}
.msgprompt{position:absolute; top:26px; left:16px; padding:0 10px;text-align:center;  border-radius:14px; background:#ff6432; color:#fff;}
.workhandle{ position:absolute; top:20px; right:20px;}
.workhandle{ position:absolute;  top:20px; right:20px;}
.workhandle span{ padding:2px 20px;border:1px #d7d7d7 solid;}
.workhandle .coultstate{background: #ff8400; position: relative;top:-10px;right: 20px; padding: 10px 30px; border-radius: 0 0 6px 6px;    border: solid 1px transparent;  box-shadow: 1px 1px 2px 1px #ccc; color: #fff; z-index: 20;}
.workhandle .coultstate em{ position: absolute; width: 0px; height: 0px;border-top: 6px solid transparent; border-bottom: 0px solid rgb(204, 106, 6); border-left: 0px solid transparent; border-right: 5px solid rgb(204, 106, 6);left: -6px; top: -1px;z-index: 10;}
.workhandle .replybtn:hover{ background:#ff8400;cursor:pointer;color:#fff;border:1px #ff8400 solid;}
.workhandle .moreopert:hover{ background:#ff8400;cursor:pointer;color:#fff;border:1px #ff8400 solid;}
/*咨询对话*/
.consultdialogbox{ width:100%; padding:20px; }
.dialoghead{ padding:20px; border-radius:10px 10px 0 0; text-align:center; border-bottom:1px #d6d6d6 solid; background-color:#FFFEE0; position:relative;}
.dialoghead{ padding:20px; border-radius:10px 10px 0 0; text-align:center; border-bottom:1px #d6d6d6 solid; background-color:#F3F3F3; position:relative;}
.dialoghead .backupbtn{ background:url(../images/backup.png) no-repeat center center; width:24px; height:24px; padding:20px; position:absolute; top:50%; left:16px; margin-top:-16px; cursor:pointer;}
.dialoghead .dheadtit{width:680px; margin:auto;}
.dialoghead .dheadtit .dialogpro{ padding:0 10px; font: 16px/30px; font-weight:600;}

src/main/webapp/diloags.html

        	<div class="dialoginfo">
                <div><span class="dialogtit">咨询主题：</span><span>XXXXXXXXXXXXXXXXXXXXXX</span></div>
                <div><span class="dialogtit">咨询类型：</span><span>技术咨询</span></div>
                <div class="dialogsurebtn"><span>点击确认完成咨询</span></div>
                <div class="dialogsurebtn" onclick="ConsultComment();"><span>点击确认完成咨询</span></div>
            </div>
            <div class="dialogstatus"><em></em><span>进行中</span></div>
        </div>