移动聊天UI实现

最新推荐文章于 2024-04-26 16:33:52 发布
最新推荐文章于 2024-04-26 16:33:52 发布
阅读量229 收藏
点赞数 1
文章标签： ui css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932157/article/details/135052782
版权 
<!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>

效果图：

在这里插入图片描述

你的美，让我痴迷
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
⭐UI自动化工具轻松实现微信消息收发⚡朋友圈爬取⁉️
小小明-代码实体的专栏
08-24 4万+
UI自动化轻松实现微信聊天记录提取、群聊轰炸机和朋友圈爬取 ????当前微信聊天窗口聊天记录提取???? ????自动发送微信消息???? ????朋友圈爬取????
【APICloud平台融云模块教程第一弹】聊天会话的实现及UI
05-14
【APICloud平台融云模块教程第一弹】聊天会话的实现及UI
html5移动聊天demo,h5简易聊天室websocket实现
weixin_34259909的博客
06-18 754
packagecom.ht.chat;importjava.io.IOException;importjava.util.concurrent.CopyOnWriteArraySet;importjavax.websocket.*;importjavax.websocket.server.ServerEndpoint;/***@ServerEndpoint注解是一个类层次的注解，它的...
用 SwiftUI 实现 AI 聊天对话 app - iChatGPT
iOSTeam37的博客
12-09 2952
关于 ChatGPT 的话题，大家都不陌生，我们直入话题，因为 ChatGPT 目前限制中国访问服务，所以如果直接使用 ChatGPT 网页进行对话，还是不太方便。通过 ChatGPT SessionToken 就可以不限制网络访问，所以大家发挥想象力实现各种的聊天机器人、小程序，而原生 app 可能体验更好！所以就有了 iChatGPT！一款用 SwiftUI 实现的开源 ChatGPT app，欢迎大家关注和提 PR。首先，需要点击 app 右上角图标，添加密钥才能使用，否则无法请求。获取。
ArkTS编写的HarmonyOS原生聊天UI框架
1
03-21 746
ChatUI，是一个ArkTS编写的HarmonyOS原生聊天UI框架，提供了开箱即用的聊天对话组件。
java如何实现web页面聊天_Java和websocket实现网页聊天室
weixin_30036893的博客
02-28 2408
WebSocket protocol 是HTML5一种新的协议，它实现了浏览器与服务器全双工通信(full-duplex)。接下来将实现一个websocket的网页聊天室的demo，前端框架会使用amazeUI，后台使用Java，网页编辑器使用UMEditor。涉及知识网页前端(HTML+CSS+JS)和Java软件环境tomcat7jdk7eclipse javaee现代浏览器(推荐chrome...
Android智能聊天机器人
03-24
基于图灵api完成Android的机器人聊天软件。不是单纯的内置聊天信息，机器人会根据你输入的信息，智能...UI模仿QQ聊天气泡对话模式。代码简单清晰（附注释），涉及到的技术有异步通信、数据封装、json解析、布局实现。
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
01-19
以上所述是小编给大家介绍的利用HTML5+css3+jquery+weui实现仿微信聊天界面功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
android智能聊天机器人-语言kotlin；内附演示app
11-17
借鉴《android移动应用基础教程》ui界面，使用kotlin语言，采用mvvm架构，涉及livedata、viewmodel、sqlite、retrofit等技术，实现和图灵机器人聊天的功能，使用sqlite保存历史聊天记录
电子相册-UI设计.docx
02-27
设计目标的确立 3-2 层次化任务分析 3-3 细分任务步骤 第三部分：设计实现 硬件部分设计 软件部分设计 第四部分：小结 电子相册-UI设计全文共21页，当前为第2页。 电子相册-UI设计全文共21页，当前为第2页。 第一...
Avalonia UI跨平台WPF
最新发布
qq_38190993的博客
04-26 175
它使用自己的渲染引擎绘制UI控件，确保在Windows、macOS、Linux、Android、iOS和WebAssembly等不同平台上具有一致的外观和行为。Avalonia是一个强大的框架，使开发人员能够使用.NET创建跨平台应用程序。
Flutter 之 Widget
XT4625的专栏
04-25 664
无论是简单的文本、按钮、图标，还是复杂的布局、列表、滑动容器，甚至包括动画效果、手势处理、主题样式等，一切都是以 Widget 的形式来实现和组织的。Widget 类通常包含一系列可设置的属性（通过构造函数参数），用于定制其外观、行为和与其他 Widget 或系统资源的交互。总的来说，Widget 是 Flutter 中用来构建和管理用户界面的核心概念，它封装了界面元素的结构、样式、行为以及响应状态变化的能力，通过组合和配置各种 Widget，开发者可以高效地构建出丰富多样的跨平台应用程序。
vue 实现级联选择器功能
清音的博客
04-22 541
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
SystemServer启动SystemUI
我的博客
04-23 330
SystemServer启动SystemUI
MIS微调SAM模型实时交互UI界面
weixin_57506268的博客
04-25 1290
关于使用MIS微调SAM大模型的交互界面程序的使用介绍
NodeRed节点编辑用于边缘计算和规则引擎，能做带UI界面和业务逻辑的上位机或前端应用吗？
IOTOS的博客
04-21 845
不论是web组态还是节点编辑器，都没有封装性而言，简单说，一个页面或者画布，做的界面或者逻辑，跟其他页面是完全独立的。NodeRed如果要实现复杂业务逻辑+UI界面和交互逻辑，必然要求考虑到如何将部分UI组件或者功能模板的连线，封装到一个独立的画布或页面中，再引入到当前页面上使用，且完全不受影响，跟直接在当前页上效果一样。在WEB编辑器中，就直接页面复制即可。要实现这点，NodeRed在构建复杂业务逻辑，或者搭建带有UI界面和业务逻辑的上位机或前端应用，才有一定的可能性，否则反而是开倒车，最终华而不实！
鸿蒙应用开发-初见：入门知识、应用模型
m0_71524094的博客
04-24 806
需要特别说明的是：在应用上架到应用市场时，需要把应用包含的所有.hap文件（即Bundle）打包为一个.app后缀的文件用于上架，这个.app文件称为App Pack（Application Package），其中同时包含了描述App Pack属性的pack.info文件；在云端（服务器）分发和终端设备安装时，都是以HAP为单位进行分发和安装的。
C# winfrom 超详细UI创建过程 实现双色球选号器UI界面设计过程
qq_40127080的博客
04-21 737
C# winfrom 超详细UI创建过程 实现双色球选号器UI界面设计过程
docker安装【zookeeper】&【kafka】&【provectuslabs/kafka-ui】记录
crazy_rays的专栏
04-25 221
端口映射和kafka集群服务器地址及端口。
webrtc实现视频聊天的案例
05-05
2. 创建一个 `index.html` 文件，包含一个视频聊天界面的UI元素。 ```html <!DOCTYPE html> <title>WebRTC Video Chat <div id="app"></div> <script src="bundle.js"></script> ``` 3. 创建一个 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你的美，让我痴迷

你的好，我会永远记住你的。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值