移动聊天UI实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
font-family: "PingFang SC", sans-serif;
}
* {
box-sizing: border-box;
}
ul,
li {
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.page {
width: 375px;
height: 812px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
margin: 48px 0;
}
/* 背景 */
.main-panel {
background: #0061c4;
max-height: 100%;
display: flex;
flex-direction: column;
}
/* 导航 */
nav {
padding: 48px 24px 30px 24px;
}
.buttons {
display: flex;
justify-content: space-between;
color: white;
}
.menu {
display: flex;
justify-content: space-between;
}
.menu li {
list-style: none;
color: rgba(255, 255, 255, 0.68);
font-size: 18px;
margin-top: 48px;
}
.menu .active {
color: white
}
/* 常用联系人 */
.middle-panel {
background: #f2f8fc;
border-radius: 34rpx;
padding: 30px 24px 100px 24px;
margin-bottom: -80px;
}
.favorite-menu {
display: flex;
justify-content: space-between;
}
.favorite-menu span {
font-size: 16px;
color: #6f6f6f;
}
.favorite-menu i.fas {
color: #6f6f6f;
}
.people {
display: flex;
justify-content: space-between;
overflow: auto;
flex-shrink: 0;
margin-right: -20px;
}
.profile:first-child {
padding-left: 0;
}
.profile:last-child {
padding-right: 0;
}
.profile {
text-align: center;
padding: 20px 10px 0 20px;
}
.profile img,
.message img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.profile .profile-name {
font-size: 14px;
color: #a5a9ad;
margin-top: 6px;
}
/* 聊天面板 */
.message-panel {
background: white;
position: relative;
border-radius: 48px 48px 0 0;
overflow: hidden;
display: flex;
}
.mask {
width: 100%;
height: 64px;
border-radius: 48px 48px 0 0;
position: absolute;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0) 100%);
}
.messages {
overflow: auto;
padding-right: 12px;
padding-bottom: 24px;
width: 100%;
}
.message {
display: flex;
align-items: center;
padding: 10px 12px 10px 24px;
}
.message .info {
color: #a5a9ad;
padding-left: 20px;
font-size: 14px;
min-width: 0;
}
.message .infos {
display: flex;
justify-content: space-between;
flex: 1;
}
.message .info .name {
color: #a5a9ad;
padding-bottom: 8px;
}
.message .info .content {
color: #657081;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.message .time {
font-size: 14px;
color: #858a98;
padding-top: 4px;
align-self: flex-start;
text-align: right;
}
.message.new {
background: rgba(27, 131, 245, 0.05);
border-radius: 0 24px 24px 0;
}
.message .new-message-icon {
background: rgba(239, 102, 102, 1);
border-radius: 7px;
font-size: 12px;
color: white;
padding: 3px 6px;
margin-top: 6px;
text-wrap: nowrap;
}
</style>
</head>
<body>
<div class="container">
<div class="page">
<div class="main-panel">
<nav>
<div class="buttons">
<i class="fas fa-chevron-left fa-lg">
</i>
<i class="fas fa-search fa-lg"></i>
</div>
<ul class="menu">
<li class="active">消息列表</li>
<li>我的好友</li>
<li>我的群聊</li>
</ul>
</nav>
<!-- 常用联系人面板 -->
<section class="middle-panel">
<div class="favorite">
<div class="favorite-menu">
<span>常用联系人</span>
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="people">
<div class="profile">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.CEDwspcmgXkgKY82RiC2_gAAAA?w=289&h=217&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="头像" class="profile-image">
<div class="profile-name">李佳</div>
</div>
<div class="profile">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.CEDwspcmgXkgKY82RiC2_gAAAA?w=289&h=217&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="头像" class="profile-image">
<div class="profile-name">李佳</div>
</div>
<div class="profile">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.CEDwspcmgXkgKY82RiC2_gAAAA?w=289&h=217&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="头像" class="profile-image">
<div class="profile-name">李佳</div>
</div>
<div class="profile">
<img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.CEDwspcmgXkgKY82RiC2_gAAAA?w=289&h=217&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="头像" class="profile-image">
<div class="profile-name">李佳</div>
</div>
</div>
</div>
</section>
<!-- 聊天面板 -->
<section class="message-panel">
<div class="mask"></div>
<div class="messages">
<div class="message ">
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mmDNZvQcPEBMQlT42x-xLwAAAA&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="">
<div class="infos">
<div class="info">
<div class="name">张三</div>
<div class="content">哈喽！今天打算干什么？</div>
</div>
<div class="time">09:34 </div>
</div>
</div>
<div class="message ">
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mmDNZvQcPEBMQlT42x-xLwAAAA&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="">
<div class="infos">
<div class="info">
<div class="name">张三</div>
<div class="content">哈喽！今天打算干什么？</div>
</div>
<div class="time">09:34 </div>
</div>
</div>
<div class="message ">
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mmDNZvQcPEBMQlT42x-xLwAAAA&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="">
<div class="infos">
<div class="info">
<div class="name">张三</div>
<div class="content">哈喽！今天打算干什么？</div>
</div>
<div class="time">09:34 </div>
</div>
</div>
<div class="message new ">
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.mmDNZvQcPEBMQlT42x-xLwAAAA&w=176&h=185&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="">
<div class="infos">
<div class="info">
<div class="name">张三</div>
<div class="content">哈喽！今天打算干什么？</div>
</div>
<div class="time">09:34
<div class="new-message-icon">新消息</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
效果图：
