通讯录字母点击放大

easonshaw · Jun 20, 2017 · 7c3362f · 7c3362f
1 parent 85f09c3
commit 7c3362f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 4 deletions.
diff --git a/src/frames/addressbook/addressbook.vue b/src/frames/addressbook/addressbook.vue
@@ -65,10 +65,16 @@
 				</ul>
 				<section class="list_guide">
 					<dl>
-						<dd v-for="(value, index) in sortlist" :key="index" @click="getHear(value)">{{value}}</dd>
+						<dd v-for="(value, index) in sortlist" :key="index" @touchstart="startThing(value)" @touchend="endThing">{{value}}</dd>
 					</dl>
 					<p>#</p>
 				</section>
+				<section class="big-letter" v-if="letter">
+					<div class="letter-bg"></div>
+					<div class="letter">
+						{{atpresent}}
+					</div>
+				</section>
 			</div>
 		</section>
 		<section class="peoplenum">{{peoplenum}}位联系人</section>
@@ -90,6 +96,7 @@
 			return{
 				contactList:{},		//所有通讯录列表
 				peoplenum:null,		//通讯录人数
+				letter:false,		//字母放大
 			}
 		},
 		created(){
@@ -142,7 +149,8 @@
 			detailMessage(item){
 				this.SAVE_MESSAGE(item);
 			},
-			getHear(value){
+			startThing(value){
+				this.letter=true;
 				this.atpresent=value;
 				this.$nextTick(() =>{ //滚动到通讯录分组的地方
 					const listArray = this.$refs.addlist.getElementsByClassName("addlistLi");
@@ -157,6 +165,9 @@
 					}
 					
 				})
+			},
+			endThing(){
+				this.letter=false
 			}
 		}
 	}
@@ -258,6 +269,34 @@
 					@include sizeColor(0.54rem,#585858);
 				}
 			}
+			.big-letter{
+				position: fixed;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%); 
+				width:3.3706666667rem;
+				height:3.3706666667rem;
+				.letter-bg{
+					position: absolute;
+					top:0;
+					left:0;
+					width:3.3706666667rem;
+					height:3.3706666667rem;
+					background:#000;
+					opacity: .6;
+					border-radius:5px;
+				}
+				.letter{
+					position: relative;
+					z-index: 10;
+					width:3.3706666667rem;
+					line-height:3.3706666667rem;
+					text-align:center;
+					font-size:2rem;
+					color:#fff;
+					font-family:SimSun !important;
+				}
+			}
 		}
 	}
 	.peoplenum{

diff --git a/src/frames/conversation/groupchat.vue b/src/frames/conversation/groupchat.vue
@@ -213,7 +213,6 @@
 
 	            	}
             		this.groupconversine = [...groupData.history, ...this.groupconversine]
-            		console.log(this.groupconversine)
             		this.allgroups=[...this.groupconversine]
 					Array.prototype.unique = function(){//数组去重
 						var res = [this[0]];

diff --git a/src/frames/dialogue/dialogue.vue b/src/frames/dialogue/dialogue.vue
@@ -56,7 +56,7 @@
 								<span class="right">12:07</span>
 							</div>
 							<div class="infordetail_bot ellipsis">
-								地点
+								请同学们文明交流~~~
 							</div>
 						</div>
 					</router-link>