| @@ -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> | ||||