vue3实现液态玻璃风格的即时通讯聊天app的ui原型图代码
代码语言:html
所属分类:布局界面
代码描述:vue3实现液态玻璃风格的即时通讯聊天app的ui原型图代码
代码标签: vue 液态 玻璃 风格 即时 通讯 聊天 app 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>即时通讯App - 液态玻璃风格</title> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%); min-height: 100vh; overflow-x: hidden; color: white; } /* 核心液态玻璃风格 */ .glass { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); } /* 容器样式 */ .app-container { max-width: 400px; margin: 0 auto; min-height: 100vh; position: relative; background: rgba(0,0,0,0.1); } /* 登录注册页面样式 */ .auth-page { padding: 40px 20px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; } .logo { text-align: center; font-size: 32px; font-weight: 600; letter-spacing: 1px; margin-bottom: 40px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); } .auth-form { padding: 40px 30px; } .form-group { margin-bottom: 20px; } .form-input { width: 100%; padding: 16px 20px; border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.2); color: white; font-size: 16px; transition: background 0.3s ease; } .form-input::placeholder { color: rgba(255, 255, 255, 0.7); } .form-input:focus { outline: none; background: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); } .btn-primary { width: 100%; padding: 16px; background: linear-gradient(45deg, #56ab2f, #a8e063); color: white; border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px; } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .link-text { text-align: center; margin-top: 25px; color: rgba(255, 255, 255, 0.8); } .link-text a { color: white; text-decoration: none; font-weight: 600; } /* 主页面样式 */ .main-page, .contacts-page, .settings-page, .chat-detail { display: flex; flex-direction: column; min-height: 100vh; padding-bottom: 90px; /* 为底部导航栏留出空间 */ } /* 头部样式 */ .header { padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; margin: 20px 20px 10px; } .header-title { font-size: 24px; font-weight: 600; } .user-info { display: flex; align-items: center; gap: 15px; } .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); } /* 搜索框样式 */ .search-box { margin: 0 20px 20px; } .search-input { width: 100%; padding: 14px 20px; border: none; border-radius: 12px; background: rgba(255, 255, 255, 0.2); color: white; } .search-input::placeholder { color: rgba(255, 255, 255, 0.7); } .search-input:focus { outline: none; background: rgba(255, 255, 255, 0.3); } /* 列表项通用样式 */ .list-container { padding: 0 20px; flex: 1; overflow-y: auto; } .list-item { background: rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 15px; margin-bottom: 12px; display: flex; align-items: center; gap: 15px; cursor: pointer; transition: all 0.3s ease; } .list-item:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.02); } .item-avatar { width: 50px; height: 50px; border-radius: 15px; /* Apple风格圆角矩.........完整代码请登录后点击上方下载按钮下载查看
网友评论0