| 
				
				
					
				
				
				 | 
			
			 | 
			@@ -19,19 +19,14 @@ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    <div class="controlBox" :style="'width:' + screenWidth + 'px;'"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <div :class="isExpend ? 'chatBox' : 'chatBox expand'"> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item top">聊天记录</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item left">我:{{ 123456 }}</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item right">{{ 123456 }}:你</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item left">我:{{ 123456 }}</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item right">{{ 123456 }}:你</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item left">我:{{ 123456 }}</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item right">{{ 123456 }}:你</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item left">我:{{ 123456 }}</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item right">{{ 123456 }}:你</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item left">我:{{ 123456 }}</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item right">{{ 123456 }}:你</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item left">我:{{ 123456 }}</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item right">{{ 123456 }}:你</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div class="item center">已经到底啦</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          v-for="item in chatList" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          :class="item.type == 0 ? 'item left' : 'item right'" | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        > | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          {{ item.type == 0 ? `我:${item.msg}` : `${item.msg}:你` }} | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div v-if="chatList.length > 0" class="item center">已经到底啦</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        <div v-if="chatList.length == 0" class="item noMsg">暂无聊天记录哦</div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      </div> | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      <div class="itemBox left" @click="sendMessage"> | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -90,6 +85,24 @@ export default { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      screenWidth: document.documentElement.clientWidth, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      screenHeight: document.documentElement.clientHeight, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      socket: null, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      chatList: [ | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          type: 0, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          msg: "你好!", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          type: 1, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          msg: "你好!", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          type: 0, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          msg: "你好!", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          type: 1, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          msg: "你好!", | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      ], | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			    }; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  }, | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			  computed: { | 
		
		
	
	
		
			
				| 
				
					
				
				
					
				
				
				 | 
			
			 | 
			@@ -183,6 +196,14 @@ export default { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &.center { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          margin-top: 40px; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        &.noMsg { | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          position: absolute; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          left: 50%; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          bottom: 0; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          transform: translateX(-50%); | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			          text-align: center; | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			        } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			      } | 
		
		
	
		
			
			 | 
			 | 
			
			 | 
			
  | 
		
		
	
	
		
			
				| 
				
					
				
				
				
				 | 
			
			 | 
			
  |