<!-- 账号与安全页面 -->
<view class="container">
    <!-- 顶部导航栏 - 使用动态高度 -->
    <view class="navbar" style="height: {{navbarHeight}}px; padding-top: {{statusBarHeight}}px;">
        <view class="back-btn" bindtap="navigateBack">
            <text class="icon">←</text>
        </view>
        <view class="title">账户与安全</view>
        <view class="back-btn"></view>
    </view>

    <!-- 主内容区 -->
    <scroll-view class="content" scroll-y style="padding-top: {{statusBarHeight + navbarHeight}}px;">
        <!-- 隐私部分 -->
        <view class="section">
            <text class="section-title">隐私</text>
            <view class="item" bindtap="viewPhone">
                <view class="item-icon phone">📞</view>
                <view class="item-content">
                    <text class="item-title">电话</text>
                    <text class="item-value">{{phone}}</text>
                </view>
                <view class="item-arrow">›</view>
            </view>
            <view class="item" bindtap="viewWechat">
                <view class="item-icon wechat">📱</view>
                <view class="item-content">
                    <text class="item-title">微信</text>
                    <text class="item-value">{{wechatStatus}}</text>
                </view>
                <view class="item-arrow">›</view>
            </view>
            <view class="item" bindtap="viewEmail">
                <view class="item-icon email">📧</view>
                <view class="item-content">
                    <text class="item-title">邮箱</text>
                    <text class="item-value">{{email}}</text>
                </view>
                <view class="item-arrow">›</view>
            </view>

        </view>

        <!-- 社交账户部分 -->
        <view class="section">
            <text class="section-title">社交账户</text>
            <view class="item" bindtap="recommendToFriend">
                <view class="item-icon recommend">👥</view>
                <view class="item-content">
                    <text class="item-title">推荐给好友</text>
                </view>
                <view class="item-arrow">›</view>
            </view>
            <view class="item" bindtap="viewBlockedAccounts">
                <view class="item-icon blocked">🚫</view>
                <view class="item-content">
                    <text class="item-title">已屏蔽账户</text>
                </view>
                <view class="item-arrow">›</view>
            </view>
        </view>
    </scroll-view>
</view>