|
@@ -5,8 +5,15 @@ |
|
|
<div class="contnet"> |
|
|
<div class="contnet"> |
|
|
<!-- 头部 --> |
|
|
<!-- 头部 --> |
|
|
<div class="head"> |
|
|
<div class="head"> |
|
|
<img src="" alt=""> |
|
|
|
|
|
<div>退出聊天</div> |
|
|
|
|
|
|
|
|
<img src="../../assets/icon/icon-loginout.png" alt=""> |
|
|
|
|
|
<div class="head-exit"> |
|
|
|
|
|
<img src="../../assets/icon/icon-loginoutwhite.png" alt=""> |
|
|
|
|
|
退出聊天 |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<!-- 显示区 --> |
|
|
|
|
|
<div class="showBody"> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
@@ -58,4 +65,36 @@ export default { |
|
|
transform: translateX(0); |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
.contnet { |
|
|
|
|
|
|
|
|
|
|
|
.head { |
|
|
|
|
|
display: flex; |
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
padding: 4px 10px; |
|
|
|
|
|
>img { |
|
|
|
|
|
width: 36px; |
|
|
|
|
|
height: 36px; |
|
|
|
|
|
} |
|
|
|
|
|
&-exit { |
|
|
|
|
|
margin-top: 4px; |
|
|
|
|
|
width: 97px; |
|
|
|
|
|
height: 28px; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
line-height: 28px; |
|
|
|
|
|
background: #24A9FF; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2); |
|
|
|
|
|
border-radius: 33px; |
|
|
|
|
|
>img { |
|
|
|
|
|
margin-top: -2px; |
|
|
|
|
|
margin-right: 4px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.showBody { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: calc(100vh - 44px) ; |
|
|
|
|
|
background-color: red; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |