vue3+css布局模仿pc端微信聊天 ui交互代码-html代码-BFW代码库

代码语言：html

代码描述：vue3+css布局模仿pc端微信聊天 ui交互代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信 </title>
    <!-- Vue 3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.global.3.5.18.js"></script>
    <!-- Bootstrap Icons CDN -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap-icons.1.11.3.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
            background: #1e1e1e;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .wechat-container {
            width: 1000px;
            height: 680px;
            display: flex;
            background: #f5f5f5;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
        }

        /* 左侧导航栏 */
        .nav-sidebar {
            width: 54px;
            background: #2e2e2e;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
        }

        .nav-avatar {
            width: 36px;
            height: 36px;
            border-radius: 4px;
            margin-bottom: 25px;
            cursor: pointer;
            overflow: hidden;
        }

        .nav-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .nav-icon {
            width: 36px;
            height: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px 0;
            cursor: pointer;
            border-radius: 4px;
            color: #999; /* 稍微调浅一点灰色 */
            font-size: 18px; /* 调整图标大小 */
            transition: all 0.2s;
            position: relative;
        }

        .nav-icon:hover {
            color: #ccc;
        }

        .nav-icon.active {
            color: #07c160;
        }
        
        /* 针对不同图标微调 */
        .nav-icon i {
            display: block;
            line-height: 1;
        }

        .nav-icon .badge {
            position: absolute;
            top: 2px;
            right: 2px;
            background: #fa5151;
            color: white;
            font-size: 10px;
            min-width: 16px;
            height: 16px;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }

        .nav-bottom {
            margin-top: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* 联系人/会话列表 */
        .contact-panel {
            width: 250px;
            background: #e9e9e9;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #d6d6d6;
        }

        .search-box {
            padding: 20px 12px 10px;
        }

        .search-input {
            width: 100%;
            height: 28px;
            background: #dbdbdb;
            border: none;
            border-radius: 4px;
            padding: 0 30px 0 10px;
            font-size: 12px;
            outline: none;
        }

        .search-wrapper {
            position: relative;
        }

        .search-icon {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: #888;
            font-size: 12px;
        }

        .contact-list {
            flex: 1;
            overflow-y: auto;
        }

        .contact-list::-webkit-scrollbar {
            width: 6px;
        }

        .contact-list::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 3px;
        }

        .contact-item {
            display: flex;
            align-items: center;
            padding: 12px;
            cursor: pointer;
            transition: background 0.2s;
            position: relative;
        }

        .contact-item:hover {
            background: #d9d9d9;
        }

        .contact-item.active {
            background: #c4c4c4;
        }

        .contact-avatar {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            margin-right: 10px;
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
        }

        .contact-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* 特殊功能的头像容器 */
        .special-avatar {
            background: #07c160; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            color: white; 
            font-size: 20px;
        }
        .special-avatar.orange { background: #fa9d3b; }
        .special-avatar.blue { background: #2782d7; }

        .contact-info {
            flex: 1;
            overflow: hidden;
        }

        .contact-name {
            font-size: 14px;
            color: #1a1a1a;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .contact-msg {
            font-size: 12px;
            color: #999;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .contact-time {
            font-size: 11px;
            color: #b3b3b3;
            position: absolute;
            right: 12px;
            top: 14px;
        }

        .unread-badge {
            background: #fa5151;
            color: white;
            font-size: 10px;
            min-width: 18px;
            height: 18px;
            border-radius: 9px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
   .........完整代码请登录后点击上方下载按钮下载查看