div+css布实现手机简洁O2O旅游餐饮住宿App端ui原型图代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布实现手机简洁O2O旅游餐饮住宿App端ui原型图代码

代码标签： div css 手机 O2O 旅游餐饮住宿 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>O2O旅游餐饮住宿App UI原型图</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.0/css/all.min.css"/>
  <style>
    * { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',sans-serif; }
    body { overflow:hidden; background:#f5f5f5; }
    #canvas {
      position:absolute; top:0; left:0; width:100vw; height:100vh;
      transform-origin:0 0; cursor:grab; user-select:none;
      display:flex; flex-wrap:wrap; gap:30px; padding:40px;
    }
    #canvas:active { cursor:grabbing; }
    .module {
      width:375px; background:#fff; border:1px solid #ddd;
      border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08);
      overflow:hidden; position:relative; display:flex; flex-direction:column;
    }
    .module-title {
        text-align: center;
   background:#007AFF; color:#fff;
      font-size:13px; font-weight:600; padding:4px 10px; border-radius:6px;
      z-index:10; box-shadow:0 2px 6px rgba(0,123,255,.3);
    }
    .page {
      width:375px; height:812px; background:#fff; position:relative;
      overflow:hidden; display:flex; flex-direction:column;
      font-size:14px; color:#333;
    }
    .header { height:48px; background:#fff; border-bottom:1px solid #eee;
      display:flex; align-items:center; justify-content:center; position:relative; font-weight:600; font-size:16px; }
    .back { position:absolute; left:16px; font-size:20px; color:#007AFF; }
    .search-bar {
      margin:12px 16px; height:40px; background:#f2f2f7; border-radius:10px;
      display:flex; align-items:center; padding:0 12px; color:#888;
    }
    .search-bar i { margin-right:8px; }
    .search-bar input { border:none; background:none; flex:1; outline:none; font-size:15px; }
    .carousel { height:180px; position:relative; overflow:hidden; }
    .carousel img { width:100%; height:100%; object-fit:cover; }
    .carousel-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
      display:flex; gap:6px; }
    .carousel-dots span { width:6px; height:6px; background:#fff; border-radius:50%; opacity:.6; }
    .carousel-dots span.active { opacity:1; background:#007AFF; }
    .tabs { display:flex; background:#fff; border-bottom:1px solid #eee; }
    .tab { flex:1; text-align:center; padding:12px 0; font-size:14px; color:#666; }
    .tab.active { color:#007AFF; position:relative; }
    .tab.active::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#007AFF; }
    .card { margin:12px 16px; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.06); }
    .card-img { height:100px; overflow:hidden; }
    .card-img img { width:100%; height:100%; object-fit:cover; }
    .card-content { padding:12px; }
    .card-title { font-weight:600; font-size:15px; margin-bottom:4px; }
    .card-subtitle { font-size:13px; color:#888; margin-bottom:6px; }
    .card-price { color:#ff3b30; font-weight:600; }
    .card-price small { text-decoration:line-through; color:#aaa; font-weight:normal; margin-left:4px; }
    .btn { background:#007AFF; color:#fff; border:none; border-radius:8px; padding:10px; font-size:15px; font-weight:600; cursor:pointer; }
    .btn-sm { padding:6px 12px; font-size:13px; }
    .bottom-bar { height:60px; background:#fff; border-top:1px solid #eee;
      display:flex; justify-content:space-around; align-items:center; position:absolute; bottom:0; width:100%; }
    .bottom-bar-item { text-align:center; font-size:10px; color:#888; }
    .bottom-bar-item i { font-size:20px; display:block; margin-bottom:4px; }
    .bottom-bar-item.active { color:#007AFF; }
    .fixed-bottom {
      position:absolute; bottom:0; left:0; right:0; background:#fff;
      border-top:1px solid #eee; padding:12px 16px; display:flex; flex-direction:column; gap:8px;
    }
    .price-total { font-size:18px; font-weight:600; color:#ff3b30; }
    .price-total small { font-size:14px; color:#888; text-decoration:line-through; margin-left:6px; }
    .list-item { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid #eee; }
    .list-item img { width:50px; height:50px; border-radius:8px; margin-right:12px; object-fit:cover; }
    .list-item-title { flex:1; font-weight:600; font-size:15px; }
    .list-item-subtitle { font-size:13px; color:#888; }
    .tag { display:inline-block; background:#f0f0f0; color:#666; font-size:12px; padding:2px 6px; border-radius:4px; margin-right:6px; }
    .rating { color:#ffb800; font-size:13px; }
    .divider { height:8px; background:#f5f5f5; }
    .avatar { width:60px; height:60px; border-radius:50%; background:#ddd; overflow:hidden; }
    .avatar img { width:100%; height:100%; object-fit:cover; }
    .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px; }
    .grid-item { background:#f9f9f9; border-radius:10px; padding:12px; text-align:center; font-size:14px; }
    .grid-item i { font-size:24px; color:#007AFF; margin-bottom:8px; display:block; }
    .waterfall { column-count:2; column-gap:12px; padding:0 16px; }
    .waterfall-item { break-inside:avoid; margin-bottom:12px; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.05); }
    .waterfall-img { height:140px; overflow:hidden; }
    .waterfall-img img { width:100%; height:100%; object-fit:cover; }
    .waterfall-content { padding:10px; font-size:13px; }
    .coupon { margin:8px 16px; background:linear-gradient(135deg,#ff9a9e,#fad0c4); color:#fff; border-radius:10px; padding:12px; display:flex; justify-content:space-between; align-items:center; }
    .coupon-value { font-size:20px; font-weight:700; }
    .coupon-desc { font-size:12px; opacity:.9; }
    .input-group { margin:12px 16px; }
    .input-group label { display:block; font-size:13px; color:#666; margin-bottom:6px; }
    .input-group input, .input-group select { width:100%; height:44px; border:1px solid #ddd; border-radius:8px; padding:0 12px; font-size:15px; }
    .chart-placeholder { height:180px; background:#f0f8ff; border-radius:10px; margin:12px 16px; display:flex; align-items:center; justify-content:center; color:#007AFF;.........完整代码请登录后点击上方下载按钮下载查看