示例代码：
<template><view class="container"><!-- 遮罩层 --><view class="mask" v-if="showSidebar" @click="closeSidebar"></view><!-- 侧边栏 --><view class="sidebar" :class="{ active: showSidebar }"><!-- 用户信息区域 --><view class="user-info"><image class="avatar" src="/static/default-avatar.png"></image><view class="user-details"><text class="username">用户名</text><text class="company">公司名称</text></view></view><!-- 菜单列表 --><view class="sidebar-content"><view class="sidebar-item"><text class="iconfont icon-message"></text><text class="item-text">消息</text></view><view class="sidebar-item"><text class="iconfont icon-contacts"></text><text class="item-text">通讯录</text></view><view class="sidebar-item"><text class="iconfont icon-workbench"></text><text class="item-text">工作台</text></view><view class="sidebar-item"><text class="iconfont icon-profile"></text><text class="item-text">我的</text></view></view></view><!-- 主内容区域包装器 --><view class="main-content" :class="{ 'content-shifted': showSidebar }"><!-- 主页面内容 --><button @click="openSidebar" class="menu-button"><u-icon name="list" size="28"></u-icon></button><!-- 这里可以放置其他主页面内容 --></view></view>
</template><script>
export default {data() {return {showSidebar: false}},methods: {openSidebar() {this.showSidebar = true},closeSidebar() {this.showSidebar = false}}
}
</script><style>
.container {position: relative;width: 100%;height: 100vh;
}.mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.3);z-index: 998;
}/* 主内容区域样式 */
.main-content {position: relative;min-height: 100vh;background-color: #fff;transition: transform 0.3s ease-in-out; /* 确保与sidebar使用相同的过渡时间 */z-index: 997;
}.content-shifted {transform: translateX(70%);
}/* 修改sidebar的样式 */
.sidebar {position: fixed;top: 0;left: 0;width: 70%;height: 100vh;background-color: #2f2f2f;z-index: 999;transition: transform 0.3s ease-in-out; /* 确保与main-content使用相同的过渡时间 */color: #fff;transform: translateX(-100%);
}.sidebar.active {transform: translateX(0);
}.user-info {padding: 20px;background-color: #393939;display: flex;align-items: center;
}.avatar {width: 60px;height: 60px;border-radius: 6px;margin-right: 15px;
}.user-details {flex: 1;
}.username {font-size: 18px;font-weight: 500;margin-bottom: 5px;display: block;
}.company {font-size: 14px;color: #999;display: block;
}.sidebar-content {padding: 10px 0;
}.sidebar-item {padding: 16px 20px;display: flex;align-items: center;
}.sidebar-item:active {background-color: #393939;
}.iconfont {font-size: 24px;margin-right: 12px;
}.item-text {font-size: 16px;
}.menu-button {position: absolute;top: 15px;left: 15px;background: none;border: none;padding: 10px;z-index: 997;
}.menu-button::after {border: none;
}/* 注意：需要引入iconfont字体文件 */
@font-face {font-family: 'iconfont';src: url('/static/iconfont.ttf') format('truetype');
}.iconfont {font-family: 'iconfont';
}
</style>效果展示：
