div+css布局实现移动生鲜超市app的完整ui交互页面代码-html代码-BFW代码库

代码语言：html

代码描述：div+css布局实现移动生鲜超市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, maximum-scale=1.0, user-scalable=no">
    <title>鲜乐送 - 终极完整版</title>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
    <style>
        /* --- 1. 核心变量与重置 --- */
        :root {
            --primary-green: #2eb85c;
            --primary-dark: #249149;
            --bg-color: #f4f8f6;
            --text-dark: #1f2937;
            --text-gray: #9ca3af;
            --white: #ffffff;
            --red: #ef4444;
            --orange: #f59e0b;
            --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
            --shadow-float: 0 10px 30px rgba(46, 184, 92, 0.2);
        }

        * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; outline: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
        body { background-color: #eefcf5; display: flex; justify-content: center; align-items: center; min-height: 100vh; }

        /* --- 2. 手机外壳容器 --- */
        #app-container {
            width: 375px; height: 812px; background-color: var(--bg-color);
            position: relative; overflow: hidden; border-radius: 40px;
            box-shadow: 0 0 60px rgba(0,0,0,0.15); border: 8px solid #111;
        }

        /* 顶部状态栏 */
        .status-bar {
            height: 44px; width: 100%; display: flex; justify-content: space-between; align-items: center;
            padding: 0 24px; position: absolute; top: 0; z-index: 100; font-size: 14px; font-weight: 600; color: #333; pointer-events: none;
        }

        /* --- 3. 屏幕切换系统 --- */
        .screen {
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-color); display: flex; flex-direction: column;
            opacity: 0; pointer-events: none; transform: translateX(50px);
            transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.35s;
            z-index: 10;
        }
        .screen.active { opacity: 1; pointer-events: all; transform: translateX(0); z-index: 20; }
        .scroll-content { flex: 1; overflow-y: auto; padding-bottom: 100px; scrollbar-width: none; }
        .scroll-content::-webkit-scrollbar { display: none; }

        /* --- 4. 通用组件 --- */
        /* 头部 */
        .page-header { padding: 50px 20px 15px; display: flex; align-items: center; justify-content: center; position: relative; background: var(--bg-color); z-index: 30; }
        .page-header.white-bg { background: var(--white); }
        .page-header .title { font-size: 18px; font-weight: 700; color: var(--text-dark); }
        .back-btn {
            position: absolute; left: 20px; width: 36px; height: 36px; border-radius: 50%;
            background: var(--white); display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; color: #333; transition: transform 0.2s;
        }
        .back-btn:active { transform: scale(0.9); }

        /* 卡片 */
        .card { background: var(--white); border-radius: 20px; padding: 16px; margin: 0 20px 16px; box-shadow: var(--shadow-sm); }
        
        /* 按钮 */
        .btn-primary {
            width: 100%; background: var(--primary-green); color: white; border: none;
            padding: 16px; border-radius: 25px; font-size: 16px; font-weight: 600;
            cursor: pointer; box-shadow: var(--shadow-float); transition: transform 0.2s;
            display: flex; justify-content: center; align-items: center; gap: 8px;
        }
        .btn-primary:active { transform: scale(0.98); }
        
        /* 标签 */
        .badge { padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; }
        .badge-green { background: #dcfce7; color: var(--primary-dark); }
        .badge-orange { background: #fef3c7; color: #d97706; }
        .badge-gray { background: #f3f4f6; color: #6b7280; }

        /* --- 5. 页面特定样式 --- */
        
        /* 引导页 */
        #screen-onboarding { background: #dcfce7; }
        .onboarding-img { width: 100%; height: 60%; object-fit: cover; object-position: center bottom; mask-image: linear-gradient(to bottom, black 80%, transparent 100%); }
        .bottom-sheet { position: absolute; bottom: 0; width: 100%; height: 45%; background: white; border-radius: 40px 40px 0 0; padding: 40px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; }
        
        /* 登录页 */
        .input-box { background: #f9fafb; border-radius: 16px; padding: 16px; display: flex; align-items: center; margin-bottom: 16px; border: 1px solid transparent; transition: border 0.3s; }
        .input-box:focus-within { border-color: var(--primary-green); background: white; }
        .input-box input { border: none; background: transparent; flex: 1; margin-left: 10px; font-size: 15px; color: #333; }

        /* 首页 */
        .home-search { margin: 0 20px 20px; background: white; border-radius: 16px; padding: 12px 16px; di.........完整代码请登录后点击上方下载按钮下载查看