Bladeren bron

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

luyanan 8 jaren geleden
bovenliggende
commit
2765ddd8fa
5 gewijzigde bestanden met toevoegingen van 32 en 43 verwijderingen
  1. 18 8
      app/css/app.css
  2. 8 8
      app/html/chats.html
  3. 3 3
      app/html/fillinfo.html
  4. 3 13
      app/html/identity.html
  5. 0 11
      app/js/fillinfo.js

+ 18 - 8
app/css/app.css

@ -99,7 +99,7 @@ body{ color: #666666; font-size:14px;line-height:20px;}
99 99
.authword{ padding:2px 6px; margin-left:6px;border-radius:4px; color: #FFFFFF; font-size: 12px;}
100 100
.authed{ background: #FF9900; }
101 101
/*认证中*/
102
.authing{background: #6bbf00;}
102
.authing{background: #0ee032;}
103 103
/*未认证*/
104 104
.unauth{background: #efefef;color: #CCCCCC;}
105 105
@ -115,7 +115,7 @@ em.icon-renzheng{position:absolute;border:1px solid;margin-top:2px;margin-left:2
115 115
em.icon-renzheng span{position:relative;top:0px;font-size:8px;line-height:8px;margin-right:6px;vertical-align:middle;}
116 116
.authicon-mana{color:#ff9900;}/*认证在企高管*/
117 117
.authicon-staff{color:#007AFF;}/*认证在企职员*/
118
.authicon-stu{color:#6bbf00;}/*认证在读学生*/
118
.authicon-stu{color:#0ee032;}/*认证在读学生*/
119 119
120 120
/*****表单公共样式********/
121 121
/*input输入相关*/
@ -193,10 +193,20 @@ ul.boxnav li:nth-child(2) span{border:1px solid #6699ff; color: #6699ff;}
193 193
ul.boxnav li:nth-child(3) span{border:1px solid #66cc00; color: #66cc00;}
194 194
ul.boxnav li.liactive{}
195 195
ul.boxnav li .icon-check {border: 1px solid;border-radius: 50%;font-size: 12px;margin-right: 3%;}
196
ul.boxnav li.set:nth-child(1) span{border:1px solid #ff9900; color: #fff; background: #ff9900;}
197
ul.boxnav li.set:nth-child(2) span{border:1px solid #6699ff; color: #fff; background: #6699ff;}
198
ul.boxnav li.set:nth-child(3) span{border:1px solid #66cc00; color: #fff; background: #66cc00;}
199
196
ul.boxnav li.set:nth-child(1) span{border:1px solid #ff9900; color: #fff; background: #ff9900; }
197
ul.boxnav li.set:nth-child(2) span{border:1px solid #6699ff; color: #fff; background: #6699ff; }
198
ul.boxnav li.set:nth-child(3) span{border:1px solid #66cc00; color: #fff; background: #66cc00; }
199
ul.boxnav li.set span:before{
200
  font-family:"iconfont" !important;
201
  font-style:normal;
202
  -webkit-font-smoothing: antialiased;
203
  -webkit-text-stroke-width: 0.2px;
204
  -moz-osx-font-smoothing: grayscale;
205
  content: "\e645";
206
  border:1px solid;
207
  border-radius: 50%;
208
  font-size:12px; 
209
  margin-right: 4%;}
200 210
/*.maincon .basicinfo>li:not(.basicfrm){ font-size: 13px; line-height: 42px;}*/
201 211
.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; }
202 212
.maincon ul li.basicfrm .frmtype{ height: 26px; padding:0; padding-right:2%;line-height:20px;font-size: 14px; }
@ -457,7 +467,7 @@ ul.boxnav li.set:nth-child(3) span{border:1px solid #66cc00; color: #fff; backgr
457 467
.consultinfo tr td.sendbox{text-align: right;position: relative;}
458 468
.consultinfo tr td .sendbtn{width: 20%;font-size: 13px; padding: 4px 10px;margin:0;position:absolute;right:0; top:0; }
459 469
460
.operatebox{ width:100%;background: #FFFFFF;overflow: hidden; padding:10px;position: relative;}
470
.operatebox{ width:100%;background: #FFFFFF;overflow: hidden;min-height: 60px;padding:10px;position: relative;}
461 471
.themespan{ width: 54%;}
462 472
.operatebtnbox{width:44%;position:absolute; top:50%; right:1%;margin-top:-13px;}
463 473
/*已评价*/.operated{width:30%; margin-top:-18px;}
@ -483,7 +493,7 @@ ul.boxnav li.set:nth-child(3) span{border:1px solid #66cc00; color: #fff; backgr
483 493
.coutopicbox .aimlabel{background:#6CA8FF;}
484 494
.coutopicbox .status-1{background:#FF9900;}/*进行中*//*咨询状态*/
485 495
.coutopicbox .status-2{background:#dd524d;}/*待评价*/
486
.coutopicbox .status-3{background:#6bbf00;}/*已完成*/
496
.coutopicbox .status-3{background:#0ee032;}/*已完成*/
487 497
488 498
.thistime{ position: absolute; right:6px; font-size: 12px; color: #999999;}
489 499

+ 8 - 8
app/html/chats.html

@ -95,14 +95,14 @@
95 95
 			.msg-item .msg-user {
96 96
 				width: 38px;
97 97
 				height: 38px;
98
 				border: solid 1px #d3d3d3;
98
 				/*border: solid 1px #d3d3d3;*/
99 99
 				display: inline-block;
100 100
 				background: #fff;
101 101
 				border-radius: 3px;
102 102
 				vertical-align: top;
103 103
 				text-align: center;
104 104
 				float: left;
105
 				padding: 3px;
105
 				/*padding: 3px;*/
106 106
 				color: #ddd;
107 107
 			}
108 108
 			
@ -120,7 +120,7 @@
120 120
 			.msg-item .msg-content {
121 121
 				display: inline-block;
122 122
 				border-radius: 5px;
123
 				border: solid 1px #d3d3d3;
123
 				border: solid 1px #E3E3E3;
124 124
 				background-color: #FFFFFF;
125 125
 				color: #333;
126 126
 				padding: 8px;
@ -137,7 +137,7 @@
137 137
 			}
138 138
 			.msg-item .msg-content .msg-content-arrow {
139 139
 				position: absolute;
140
 				border: solid 1px #d3d3d3;
140
 				border: solid 1px #E3E3E3;
141 141
 				border-right: none;
142 142
 				border-top: none;
143 143
 				background-color: #FFFFFF;
@ -160,9 +160,9 @@
160 160
 			}
161 161
 			.msg-item-self .msg-content,
162 162
 			.msg-item-self .msg-content .msg-content-arrow {
163
 				background-color: #4CD964;
163
 				background-color: #0ee032;
164 164
 				color: #fff;
165
 				border-color: #2AC845;
165
 				border-color: #0ee032;
166 166
 			}
167 167
 			footer .mui-icon {
168 168
 				color: #999999;
@ -391,7 +391,7 @@
391 391
				</div>
392 392
				<!--收到咨询,进行中-->
393 393
				<div class="operatebtnbox mui-pull-right displayNone" id="waying" style="width:30%;">
394
					<div class="evabox"><span>进行中</span></div>
394
					<!--<div class="evabox"><span>进行中</span></div>-->
395 395
				</div>
396 396
				<!--收到咨询,对方已评价-->
397 397
				<div class="operatebtnbox mui-pull-right operated displayNone" id="that_assessed" style="cursor: pointer;">
@ -412,7 +412,7 @@
412 412
 			
413 413
 			<div class="consult_content">
414 414
 				<ul class="mui-table-view" >
415
	 				<li class="mui-table-view-cell mui-collapse" id="mui-active" style="background-color:#fff;">
415
	 				<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;">
416 416
	 					<div class="mui-collapse-content" id="consultCon">
417 417
							可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,
418 418
							只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可;mui官网中的方法说明,

+ 3 - 3
app/html/fillinfo.html

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

+ 3 - 13
app/html/identity.html

@ -18,9 +18,9 @@
18 18
		<div class="mui-content"  style="background: #fff; margin-top:10px;" id="navsub">
19 19
			<h3 class="boxnav-title">请确认您现在的身份:</h3>
20 20
			<ul class="boxnav">
21
				<li><span typenum="1" class="liactive"><em class="mui-icon iconfont"></em>科研工作者</span></li>
22
				<li><span typenum="2"><em class="mui-icon iconfont"></em>在企人员</span></li>
23
				<li><span typenum="3"><em class="mui-icon iconfont"></em>在校生</span></li>
21
				<li><span typenum="1">科研工作者</span></li>
22
				<li><span typenum="2">在企人员</span></li>
23
				<li><span typenum="3">在校生</span></li>
24 24
			</ul>
25 25
		</div>
26 26
		<div class="mui-content-padded frmbox" style="margin-top:40px;">
@ -69,16 +69,6 @@
69 69
					}
70 70
				}
71 71
			}
72
			//鼠标点击联系目的li时添加liactive类
73
			mui(".boxnav").on('tap','li span',function(e){
74
				var aimlist = document.querySelector('.boxnav').querySelectorAll("li span");
75
				for(var i = 0 ; i < aimlist.length;i++){
76
					aimlist[i].classList.remove('liactive');
77
					aimlist[i].querySelector('em').classList.remove('icon-check');
78
				}
79
				this.classList.add('liactive');
80
				this.querySelector("em").classList.add("icon-check");
81
			});
82 72
		</script>
83 73
	</body>
84 74

+ 0 - 11
app/js/fillinfo.js

@ -164,16 +164,5 @@ mui.ready(function() {
164 164
		}
165 165

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

179 168
});