vue3实现移动端上门按摩服务可交互式UI原型图代码
代码语言:html
所属分类:其他
代码描述:vue3实现移动端上门按摩服务可交互式UI原型图代码
代码标签: vue 移动端上门 按摩 服务 交互式 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, maximum-scale=1.0, user-scalable=no"> <title>上门按摩服务平台</title> <!-- 引入外部资源 --> <link rel="stylesheet" href="https://repo.bfw.wiki/bfwrepo/css/bootstrap-icons.1.11.3.css"> <script src="https://repo.bfw.wiki/bfwrepo/js/vue.global.3.2.37.js"></script> <script src="https://repo.bfw.wiki/bfwrepo/js/echarts.5.5.0.js"></script> <style> /* 全局样式与设计 */ :root { --primary-color: #4A90E2; /* 主题色 - 温和的蓝色 */ --primary-light: #EAF2FB; --secondary-color: #50E3C2; /* 强调色/成功色 - 薄荷绿 */ --danger-color: #D0021B; /* 危险/拒绝色 */ --text-primary: #333; --text-secondary: #777; --bg-color: #F8F9FA; --card-bg: #FFFFFF; --border-color: #EAEAEA; } /* 基础重置 */ body, html { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-primary); -webkit-tap-highlight-color: transparent; } #app { max-width: 600px; margin: 0 auto; background-color: var(--bg-color); min-height: 100vh; padding-bottom: 70px; /* 为底部导航栏留出空间 */ box-sizing: border-box; position: relative; } /* 页面切换动画 */ .page-enter-active, .page-leave-active { transition: opacity 0.3s ease; } .page-enter-from, .page-leave-to { opacity: 0; } /* 公共组件样式 */ .page-container { padding: 20px 15px; box-sizing: border-box; } .page-header { font-size: 24px; font-weight: 600; margin-bottom: 20px; color: var(--text-primary); } .card { background: var(--card-bg); border-radius: 12px; padding: 15px; margin-bottom: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid var(--border-color); } .btn { display: inline-block; padding: 12px 20px; border-radius: 25px; border: none; font-size: 16px; font-weight: 600; cursor: pointer; text-align: center; transition: all 0.3s ease; } .btn-primary { background-color: var(--primary-color); color: white; } .btn-primary:hover { opacity: 0.9; } .btn-secondary { background-color: var(--secondary-color); color: white; } .btn-danger { background-color: var(--danger-color); color: white; } .btn-outline { background-color: transparent; color: var(--primary-color); border: 1px solid var(--primary-color); } .btn-full { width: 100%; display: block; box-sizing: border-box; } .input-group { margin-bottom: 20px; position: relative; } .input-group i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); } .input-field { width: 100%; padding: 15px 15px 15px 45px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; box-sizing: border-box; background-color: white; } .input-field:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); } .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; max-width: 600px; margin: 0 auto; display: flex; justify-content: space-around; background: var(--card-bg); padding: 10px 0; border-top: 1px solid var(--border-color); box-shadow: 0 -2px 10px rgba(0,0,0,0.05); z-index: 100; } .nav-item { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--text-secondary); cursor: pointer; flex: 1; } .nav-item.active { color: var(--primary-color); } .nav-item i { font-size: 24px; margin-bottom: 2px; } .avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .avatar-large { width: 80px; height: 80px; } .rating { color: #FFC107; } .tag { display: inline-block; padding: 4px 10px; background-color: var(--primary-light); color: var(--primary-color); border-radius: 15px; font-size: 12px; margin-right: 5px; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000; } .modal-content { background: white; padding: 20px; border-radius: 12px; width: 80%; max-width: 400px; } .timeline { position: relative; padding-left: 30px; } .timeline-item { position: relative; padding-bottom: 20px; border-left: 2px solid var(--border-color); } .timeline-item:last-child { border-left: none; } .timeline-item::before { content: ''; position: absolute; left: -8px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--border-color); border: 2px solid white; } .timeline-item.active::before { background: var(--primary-color); } .timeline-item-content { margin-left: 20px; } .timeline-item-title { font-weight: 600; } .timeline-item-time { font-size: 12px; color: var(--text-secondary); } /* 特定页面样式 */ .login-container { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box; } .login-title { font-size: 32px; font-weight: 700; color: var(--primary-color); margin-bottom: 40px; } .tech-card { display: flex; align-items: center; gap: 15px; } .tech-info { flex: 1; } .tech-info h3 { margin: 0 0 5px 0; } .tech-detail-header { text-align: center; padding: 20px; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: 0 0 25px 25px; } .tech-detail-header h2 { margin: 10px 0 5px; } .service-item { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); } .service-item:last-child { border: none; } .service-price { font-weight: 600; color: var(--primary-color); } .order-status-tag { padding: 5px 12px; border-radius: 15px; font-size: 12px; font-weight: 600; color: white; } .map-placeholder { width: 100%; height: 200px; background: #E9ECEF url('https://picsum.photos/600/200?grayscale') no-repeat center center; background-size: cover; border-radius: 12px; display: flex; justify-content: center; align-items: center; color: var(--text-secondary); } </style> </head> <body> <div id="app"> <!-- 全局加载动画 --> <div v-if="isLoading" class="modal-overlay" style="background: rgba(255,255,255,0.8);"> <div style="text-align: center;"> <i class="bi bi-hourglass-split" style="font-size: 40px; color: var(--primary-color);"></i> <p style="color: var(--primary-color); margin-top: 10px;">加载中...</p> </div> </div> <!-- 主体内容 --> <transition name="page" mode="out-in"> <div :key="currentPage"> <!-- 登录页面 --> <div v-if="currentPage === 'login'" class="login-container"> <h1 class="login-t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0