移动聊天UI实现

handlebars 复制代码
<!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>
效果图：