vue3实现移动端酒店预定app的ui原型图代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue3实现移动端酒店预定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, user-scalable=no">
    <title>酒店预订 App</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
    <style>
        :root {
            --primary-color: #007bff;
            --secondary-color: #ff6f61;
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
            --text-primary: #212529;
            --text-secondary: #6c757d;
            --border-color: #dee2e6;
            --star-color: #ffc107;
        }
        * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: var(--bg-color); color: var(--text-primary); font-size: 14px; }
        
        #app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

        /* --- 页面容器与转场 --- */
        .page-container { flex-grow: 1; overflow-y: auto; position: relative; }
        .page {
            position: absolute; top: 0; left: 0; width: 100%; min-height: 100%;
            background-color: var(--bg-color);
            display: flex; flex-direction: column;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .page-enter-from, .page-leave-to { transform: translateX(100%); }
        .page-enter-to, .page-leave-from { transform: translateX(0); }
        .page-leave-active { z-index: 0; }
        .page-enter-active { z-index: 1; }
        
        /* --- 通用组件 --- */
        .page-header {
            display: flex; align-items: center; justify-content: space-between;
            height: 50px; padding: 0 15px; background-color: var(--card-bg);
            border-bottom: 1px solid var(--border-color); flex-shrink: 0; position: sticky; top: 0; z-index: 10;
        }
        .page-header h2 { font-size: 18px; position: absolute; left: 50%; transform: translateX(-50%); }
        .icon-btn { cursor: pointer; background: none; border: none; padding: 5px; }
        .icon-btn svg { width: 24px; height: 24px; color: var(--text-primary); }
        .btn {
            padding: 12px 20px; border: none; border-radius: 8px; font-size: 16px;
            font-weight: bold; cursor: pointer; text-align: center;
            background-color: var(--primary-color); color: white;
        }
        .btn-secondary { background-color: var(--secondary-color); }
        .section-title { font-size: 18px; font-weight: bold; margin: 20px 15px 15px; }

        /* --- 首页 --- */
        .home-header { padding: 40px 20px; background: linear-gradient(135deg, #007bff, #0056b3); color: white; text-align: center; }
        .search-form { background: var(--card-bg); margin: -30px 15px 20px; padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; color: var(--text-secondary); }
        .form-group input { width: 100%; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; font-size: 16px; }

        /* --- 酒店列表卡片 --- */
        .hotel-list { padding: 0 15px; }
        .hotel-card {
            display: flex; background: var(--card-bg); margin-bottom: 15px;
            border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer;
        }
        .hotel-card img { width: 120px; height: 120px; object-fit: cover; }
        .hotel-info { padding: 10px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
        .hotel-info h3 { font-size: 16px; margin-bottom: 5px; }
        .rating-stars { color: var(--star-color); font-size: 13px; }
        .hotel-price { font-size: 18px; font-weight: bold; color: var(--secondary-color); text-align: right; }
        .hotel-price span { font-size: 12px; font-weight: normal; color: var(--text-secondary); }
        .no-data { text-align: center; padding: 50px; color: var(--text-secondary); }
        
        /* --- 酒店详情页 --- */
        .detail-gallery img { width: 100%; height: 250px; object-fit: cover; }
        .detail-content { padding: 20px; }
        .detail-header h1 { font-size: 24px; }
        .detail-header .rating-stars { font-size: 16px; margin: 10px 0; }
        .amenities-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin: 20px 0; }
        .amenity-item { text-align: center; background: #f1f3f5; padding: 10px; border-radius: 8px; font-size: 13px; }
        .room-card { display: flex; justify-content: space-between; align-items: center; background: var(--primary.........完整代码请登录后点击上方下载按钮下载查看