编辑页面

HTML内容
<!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>我的 - YU.NI</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background-color: #fff;
            max-width: 430px;
            margin: 0 auto;
            padding-bottom: 70px;
        }
        .my-header {
            padding: 30px 20px;
        }
        .user-greeting {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin-bottom: 4px;
        }
        .user-welcome {
            font-size: 13px;
            color: #999;
        }
        .quick-actions {
            display: flex;
            background: #f8f8f8;
            margin: 0 20px;
            border-radius: 12px;
            overflow: hidden;
        }
        .quick-action {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 15px;
            cursor: pointer;
        }
        .quick-action:first-child {
            border-right: 1px solid #eee;
        }
        .quick-action-icon {
            width: 36px;
            height: 36px;
            margin-bottom: 8px;
        }
        .quick-action-icon svg {
            width: 100%;
            height: 100%;
            fill: #333;
        }
        .quick-action span {
            font-size: 13px;
            color: #333;
        }
        .menu-section {
            margin-top: 30px;
            padding: 0 20px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        .menu-item:last-child {
            border-bottom: none;
        }
        .menu-icon {
            width: 22px;
            height: 22px;
            margin-right: 14px;
        }
        .menu-icon svg {
            width: 100%;
            height: 100%;
            fill: #333;
        }
        .menu-text {
            flex: 1;
            font-size: 15px;
            color: #333;
        }
        .menu-arrow {
            width: 16px;
            height: 16px;
            opacity: 0.3;
        }
        .menu-arrow svg {
            width: 100%;
            height: 100%;
            fill: #333;
        }
        .float-buttons {
            position: fixed;
            right: 15px;
            bottom: 90px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            z-index: 100;
        }
        .float-btn {
            width: 44px;
            height: 44px;
            background: #fff;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border: 1px solid #f0f0f0;
        }
        .float-btn svg {
            width: 18px;
            height: 18px;
            fill: #333;
        }
        .float-label {
            position: absolute;
            right: 54px;
            font-size: 12px;
            color: #333;
            white-space: nowrap;
            background: #fff;
            padding: 4px 10px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            opacity: 0;
            transition: opacity 0.2s;
        }
        .float-btn:hover .float-label {
            opacity: 1;
        }
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 60px;
            background: #fff;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 100;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: #999;
            padding: 6px 18px;
        }
        .nav-item.active { color: #c9a96e; }
        .nav-item svg {
            width: 22px;
            height: 22px;
            fill: #999;
            margin-bottom: 3px;
        }
        .nav-item.active svg { fill: #c9a96e; }
        .nav-item span { font-size: 10px; }
    </style>
</head>
<body>
    <!-- 用户信息 -->
    <div class="my-header">
        <div class="user-greeting">Hi, 用户 3460413</div>
        <div class="user-welcome">welcome back!</div>
    </div>

    <!-- 快捷功能 -->
    <div class="quick-actions">
        <div class="quick-action">
            <div class="quick-action-icon">
                <svg viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
            </div>
            <span>我喜欢的</span>
        </div>
        <div class="quick-action">
            <div class="quick-action-icon">
                <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
            </div>
            <span>门店导航</span>
        </div>
    </div>

    <!-- 功能菜单 -->
    <div class="menu-section">
        <div class="menu-item">
            <div class="menu-icon">
                <svg viewBox="0 0 24 24"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/></svg>
            </div>
            <span class="menu-text">联系我们</span>
            <div class="menu-arrow">
                <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
            </div>
        </div>
        <div class="menu-item">
            <div class="menu-icon">
                <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
            </div>
            <span class="menu-text">添加到手机桌面</span>
            <div class="menu-arrow">
                <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
            </div>
        </div>
        <div class="menu-item">
            <div class="menu-icon">
                <svg viewBox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 5.79 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/></svg>
            </div>
            <span class="menu-text">分享小程序</span>
            <div class="menu-arrow">
                <svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg>
            </div>
        </div>
    </div>

    <!-- 右侧悬浮按钮 -->
    <div class="float-buttons">
        <div class="float-btn">
            <span class="float-label">微信</span>
            <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg>
        </div>
        <div class="float-btn">
            <span class="float-label">位置</span>
            <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
        <a href="index.html" class="nav-item">
            <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
            <span>首页</span>
        </a>
        <a href="works.html" class="nav-item">
            <svg viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
            <span>作品</span>
        </a>
        <a href="index.html#brand" class="nav-item">
            <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
            <span>品牌</span>
        </a>
        <a class="nav-item active">
            <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
            <span>我的</span>
        </a>
    </div>
</body>
</html>