Home Explore Help
Register Sign In
bulomakaka
/
ekexiu.com.portal
Watch 7
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 108 Releases 0 Wiki
Browse Source

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

luyanan 8 years ago
parent
bad494742b
commit
a12bd5c9f9
5 changed files with 72 additions and 41 deletions
Split View Show Diff Stats
  1. 64 36
      src/main/webapp/consult.html
  2. 7 4
      src/main/webapp/css/workspace.css
  3. 1 1
      src/main/webapp/diloags.html
  4. BIN
      src/main/webapp/images/order.png
  5. BIN
      src/main/webapp/images/selected.png

+ 64 - 36
src/main/webapp/consult.html
View File 

@ -3,7 +3,7 @@
3 3
4 4 
<!--  // 咨询-->
5 5 
<div class="workconitem consublock">
6 
    <div class="workcontit">咨询<span class="worksamlltit worksamlltit3 worksamlltitnow">收到咨询</span><span class="worksamlltit worksamlltit3">收到回复</span><span class="workset floatR">设置</span></div>
6 
    <div class="workcontit">咨询<span class="worksamlltit worksamlltit3 worksamlltitnow">收到咨询</span><span class="worksamlltit worksamlltit3">收到回复</span><!-- <span class="workset floatR">设置</span> --></div>
7 7 
    <div class="worksubcon">
8 8 
    	<div class="workmysrc workmysrc3">
9 9 
             <div class="workmenubox clearfix">

@ -11,7 +11,7 @@
11 11 
                    <div class="workselectbox floatL">
12 12 
                        <span onclick="hide('downbox')" id="showbox" class="workselectmenu" >全部</span>
13 13 
                        <ul id="downbox" class="workdropdown" style="display:none;">
14 
                            <li onclick="pick('全部')" class="cur">全部</li>
14 
                            <li onclick="pick('全部')" class="cur workcurrent">全部</li>
15 15 
                            <li onclick="pick('进行中')" class="cur">进行中</li>
16 16 
                            <li onclick="pick('待感谢')" class="cur">待感谢</li>
17 17 
                            <li onclick="pick('待评价')" class="cur">待评价</li> 

@ -21,7 +21,7 @@
21 21 
                    <div class="workselectbox floatL">
22 22 
                        <span onclick="hide('downbox1')" id="showbox1" class="workselectmenu" >按发起时间排序</span>
23 23 
                        <ul id="downbox1" class="workdropdown workdropdown2" style="display:none;">
24 
                            <li onclick="pick1('按发起时间排序')" class="cur">按发起时间排序</li>
24 
                            <li onclick="pick1('按发起时间排序')" class="cur workcurrent">按发起时间排序</li>
25 25 
                            <li onclick="pick1('按最后回复时间排序')" class="cur">按最后回复时间排序</li>
26 26 
                            <li onclick="pick1('按完成时间排序')" class="cur">按完成时间排序</li>
27 27 
                       </ul> 

@ -48,12 +48,16 @@
48 48 
                                    <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>
49 49 
                                </div>
50 50 
                                <div class="workhandle">
51 
                                        <span class="coultstate">进行中</span>
52 
                                        <span class="replybtn">回复/查看</span>
53 
                                        <span class="moreopert">...</span>
54 
                                        <ul class="moreopertbtn">
55 
                                          	<li>投诉</li>
56 
                                        </ul>
51 
                                        <div class="rightopert floatR">
52 
	                                        <span class="replybtn">回复/查看</span>
53 
	                                        <span class="moreopert">...</span>
54 
	                                        <ul class="moreopertbtn">
55 
	                                          	<li>投诉</li>
56 
	                                        </ul>
57 
                                        </div>
58 
                                        <div class="leftstate floatR">
59 
                                        	<span class="coultstate"><i>进行中</i><em></em></span>
60 
                                        </div>
57 61 
                                </div>
58 62 
                            </td>
59 63 
                        </tr>

@ -73,12 +77,17 @@
73 77 
                                    <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>
74 78 
                                </div>
75 79 
                                <div class="workhandle">
76 
                                        <span class="coultstate">进行中</span>
77 
                                        <span class="replybtn">回复/查看</span>
78 
                                        <span class="moreopert">...</span>
79 
                                        <ul class="moreopertbtn">
80 
                                          	<li>投诉</li>
81 
                                        </ul>
80
81 
                                        <div class="rightopert floatR">
82 
	                                        <span class="replybtn">回复/查看</span>
83 
	                                        <span class="moreopert">...</span>
84 
	                                        <ul class="moreopertbtn">
85 
	                                          	<li>投诉</li>
86 
	                                        </ul>
87 
                                        </div>
88 
                                        <div class="leftstate floatR">
89 
                                        	<span class="coultstate"><i>进行中</i><em></em></span>
90 
                                        </div>
82 91 
                                </div>
83 92 
                            </td>
84 93 
                        </tr>

@ -98,12 +107,17 @@
98 107 
                                    <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>
99 108 
                                </div>
100 109 
                                <div class="workhandle">
101 
                                        <span class="coultstate">进行中</span>
102 
                                        <span class="replybtn">回复/查看</span>
103 
                                        <span class="moreopert">...</span>
104 
                                        <ul class="moreopertbtn">
105 
                                          	<li>投诉</li>
106 
                                        </ul>
110 
                                		<div class="rightopert floatR">
111 
	                                        <span class="replybtn">回复/查看</span>
112 
	                                        <span class="moreopert">...</span>
113 
	                                        <ul class="moreopertbtn">
114 
	                                          	<li>投诉</li>
115 
	                                        </ul>
116 
                                        </div>
117 
                                        <div class="leftstate floatR">
118 
                                        	<span class="coultstate"><i>咨询完成待评价</i><em></em></span>
119 
                                        </div>
120
107 121 
                                </div>
108 122 
                            </td>
109 123 
                        </tr>

@ -119,7 +133,7 @@
119 133 
                    <div class="workselectbox floatL">
120 134 
                        <span onclick="hide('downbox')" id="showbox" class="workselectmenu" >全部</span>
121 135 
                        <ul id="downbox" class="workdropdown" style="display:none;">
122 
                            <li onclick="pick('全部')" class="cur">全部</li>
136 
                            <li onclick="pick('全部')" class="cur workcurrent">全部</li>
123 137 
                            <li onclick="pick('进行中')" class="cur">进行中</li>
124 138 
                            <li onclick="pick('待感谢')" class="cur">待感谢</li>
125 139 
                            <li onclick="pick('待评价')" class="cur">待评价</li> 

@ -129,7 +143,7 @@
129 143 
                    <div class="workselectbox floatL">
130 144 
                        <span onclick="hide('downbox1')" id="showbox1" class="workselectmenu" >按发起时间排序</span>
131 145 
                        <ul id="downbox1" class="workdropdown workdropdown2" style="display:none;">
132 
                            <li onclick="pick1('按发起时间排序')" class="cur">按发起时间排序</li>
146 
                            <li onclick="pick1('按发起时间排序')" class="cur workcurrent">按发起时间排序</li>
133 147 
                            <li onclick="pick1('按最后回复时间排序')" class="cur">按最后回复时间排序</li>
134 148 
                            <li onclick="pick1('按完成时间排序')" class="cur">按完成时间排序</li>
135 149 
                       </ul> 

@ -156,12 +170,16 @@
156 170 
                                    <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>
157 171 
                                </div>
158 172 
                                <div class="workhandle">
159 
                                        <span class="coultstate">进行中</span>
160 
                                        <span class="replybtn">回复/查看</span>
161 
                                        <span class="moreopert">...</span>
162 
                                        <ul class="moreopertbtn">
163 
                                          	<li>投诉</li>
164 
                                        </ul>
173 
                                        <div class="rightopert floatR">
174 
	                                        <span class="replybtn">回复/查看</span>
175 
	                                        <span class="moreopert">...</span>
176 
	                                        <ul class="moreopertbtn">
177 
	                                          	<li>投诉</li>
178 
	                                        </ul>
179 
                                        </div>
180 
                                        <div class="leftstate floatR">
181 
                                        	<span class="coultstate"><i>咨询完成待评价</i><em></em></span>
182 
                                        </div>
165 183 
                                </div>
166 184 
                            </td>
167 185 
                        </tr>

@ -181,12 +199,16 @@
181 199 
                                    <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>
182 200 
                                </div>
183 201 
                                <div class="workhandle">
184 
                                        <span class="coultstate">进行中</span>
185 
                                        <span class="replybtn">回复/查看</span>
186 
                                        <span class="moreopert">...</span>
187 
                                        <ul class="moreopertbtn">
188 
                                          	<li>投诉</li>
189 
                                        </ul>
202 
                                        <div class="rightopert floatR">
203 
	                                        <span class="replybtn">回复/查看</span>
204 
	                                        <span class="moreopert">...</span>
205 
	                                        <ul class="moreopertbtn">
206 
	                                          	<li>投诉</li>
207 
	                                        </ul>
208 
                                        </div>
209 
                                        <div class="leftstate floatR">
210 
                                        	<span class="coultstate"><i>咨询完成待评价</i><em></em></span>
211 
                                        </div>
190 212 
                                </div>
191 213 
                            </td>
192 214 
                        </tr>

@ -262,9 +284,15 @@
262 284
263 285 
	/*排列顺序（正序、倒序）*/
264 286 
	$(".orderedbtn").click(function(){
265 
		$(this).find("div").css("background-position","-11px center");
287 
		$(this).find("div").css("background-position","-20px 1px");
266 288 
	})
267 289
290 
	/*咨询菜单点击切换*/
291 
	$(".worksamlltit3").click(function(){
292 
		var index = $(this).index();
293 
		$(this).addClass("worksamlltitnow").siblings().removeClass("worksamlltitnow");
294 
		$(".workmysrc3").eq(index).show().siblings().hide();
295 
	});
268 296
269 297
270 298

+ 7 - 4
src/main/webapp/css/workspace.css
View File 

@ -116,8 +116,8 @@
116 116 
.workdropdown2 li{width:200px;}
117 117 
.workcurrent{ background:url(../images/selected.png) no-repeat 90% center #f7f7f7; }
118 118
119 
.orderedbtn{ padding:1px 20px;  cursor:pointer; }
120 
.orderedbtn div{width:12px; height:18px; background:url(../images/order.png) no-repeat 0 center ;}
119 
.orderedbtn{ padding:1px 6px;  cursor:pointer; }
120 
.orderedbtn div{width:20px; height:20px; background:url(../images/order.png) no-repeat 0 1px #ff8400 ; border-radius:4px;}
121 121
122 122 
.workselectcon{ padding:10px;}
123 123 
.workselectitem{ overflow:hidden; margin:6px 0;}

@ -131,8 +131,11 @@
131 131 
.workitimg{ width:120px; height:120px; }
132 132 
.messagebox{position:relative;}
133 133 
.msgprompt{position:absolute; top:26px; left:16px; padding:0 10px;text-align:center;  border-radius:14px; background:#ff6432; color:#fff;}
134 
.workhandle{ position:absolute; top:20px; right:20px;}
134 
.workhandle{ position:absolute;  top:20px; right:20px;}
135 135 
.workhandle span{ padding:2px 20px;border:1px #d7d7d7 solid;}
136 
.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;}
137 
.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;}
138
136 139 
.workhandle .replybtn:hover{ background:#ff8400;cursor:pointer;color:#fff;border:1px #ff8400 solid;}
137 140
138 141 
.workhandle .moreopert:hover{ background:#ff8400;cursor:pointer;color:#fff;border:1px #ff8400 solid;}

@ -154,7 +157,7 @@
154 157 
/*咨询对话*/
155 158
156 159 
.consultdialogbox{ width:100%; padding:20px; }
157 
.dialoghead{ padding:20px; border-radius:10px 10px 0 0; text-align:center; border-bottom:1px #d6d6d6 solid; background-color:#FFFEE0; position:relative;}
160 
.dialoghead{ padding:20px; border-radius:10px 10px 0 0; text-align:center; border-bottom:1px #d6d6d6 solid; background-color:#F3F3F3; position:relative;}
158 161 
.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;}
159 162 
.dialoghead .dheadtit{width:680px; margin:auto;}
160 163 
.dialoghead .dheadtit .dialogpro{ padding:0 10px; font: 16px/30px; font-weight:600;}

+ 1 - 1
src/main/webapp/diloags.html
View File 

@ -10,7 +10,7 @@
10 10 
        	<div class="dialoginfo">
11 11 
                <div><span class="dialogtit">咨询主题：</span><span>XXXXXXXXXXXXXXXXXXXXXX</span></div>
12 12 
                <div><span class="dialogtit">咨询类型：</span><span>技术咨询</span></div>
13 
                <div class="dialogsurebtn"><span>点击确认完成咨询</span></div>
13 
                <div class="dialogsurebtn" onclick="ConsultComment();"><span>点击确认完成咨询</span></div>
14 14 
            </div>
15 15 
            <div class="dialogstatus"><em></em><span>进行中</span></div>
16 16 
        </div>

BIN
src/main/webapp/images/order.png
View File


BIN
src/main/webapp/images/selected.png
View File