uniapp 仿企微左邊公司切換頁

示例代碼:

<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>

效果展示:

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/77244.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/77244.shtml
英文地址,請注明出處:http://en.pswp.cn/web/77244.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

pyqt中以鼠標所在位置為錨點縮放圖片

在編寫涉及到圖片縮放的pyqt程序時&#xff0c;如果以鼠標為錨點縮放圖片&#xff0c;圖片上處于鼠標所在位置的點&#xff08;通常也是用戶關注的圖片上的點&#xff09;不會移動&#xff0c;更不會消失在圖片顯示區域之外&#xff0c;可以提高用戶體驗&#xff0c;是一個值得…

巧記英語四級單詞 Unit5-中【曉艷老師版】

ignore v.無視&#xff0c;不理睬 發音“一個鬧”&#xff0c;對付一個無理取鬧的孩子&#xff0c;最好的方式就是無視 不理睬ignorant a.無知的&#xff0c;不禮貌的 對于什么事都無視&#xff0c;中國第一個不平等條約問也不知道就是無知的neglect n.忽視 negative消極的&a…

go 編譯的 windows 進程(exe)以管理員權限啟動(UAC)

引言 windows 系統&#xff0c;在打開某些 exe 的時候&#xff0c;會彈出“用戶賬戶控制(UAC)”的彈窗 “你要允許來自xx發布者的此應用對你的設備進行更改嗎&#xff1f;” UAC&#xff08;User Account Control&#xff0c;用戶賬戶控制&#xff09;是 Windows 操作系統中的…

go.mod介紹

在 Go 項目中&#xff0c;.mod 文件&#xff08;全稱 go.mod&#xff09;是 Go 語言模塊&#xff08;Module&#xff09;系統的核心配置文件&#xff0c;用于定義和管理項目的依賴關系、模塊名稱及兼容性規則。以下是其核心作用與結構的詳細說明&#xff1a; 一、go.mod 文件的…

基于CATIA參數化管道建模的自動化插件開發實踐——NX建模之管道命令的參考與移植

引言 在機械設計領域&#xff0c;CATIA作為行業領先的CAD軟件&#xff0c;其強大的參數化建模能力備受青睞。本文介紹如何利用Python的PySide6框架與CATIA二次開發技術&#xff0c;開發一款智能管狀體生成工具。該工具借鑒了同類工業軟件NX的建模的管道命令&#xff0c;通過Py…

centos7使用yum快速安裝最新版本Jenkins-2.462.3

Jenkins支持多種安裝方式&#xff1a;yum安裝、war包安裝、Docker安裝等。 官方下載地址&#xff1a;https://www.jenkins.io/zh/download 本次實驗使用yum方式安裝Jenkins LTS長期支持版&#xff0c;版本為 2.462.3。 一、Jenkins基礎環境的安裝與配置 1.1&#xff1a;基本…

BiliNote:開源的AI視頻筆記生成工具,讓知識提取與分享更高效——跨平臺自動生成結構化筆記,實現從視頻到Markdown的智能轉化

引言:視頻學習的痛點與BiliNote的解決方案 隨著知識視頻化趨勢的加速,B站、YouTube等平臺成為學習與信息獲取的重要渠道,但手動記錄筆記耗時低效、信息碎片化等問題依然突出。BiliNote的出現,通過AI驅動的自動化流程,將視頻內容轉化為結構清晰的Markdown筆記,支持截圖插…

DAX Studio將PowerBI與EXCEL連接

DAX Studio將PowerBI與EXCEL連接 具體步驟如下&#xff1a; 第一步&#xff1a;先打開一個PowerBI的文件&#xff0c;在外部工具欄里打開DAXStudio&#xff0c;如圖&#xff1a; 第二步&#xff1a;DAXStudio界面&#xff0c;點擊Advanced選項卡-->Analyze in Excel&#…

Redis-cli常用參數及功能的詳細說明

Redis-cli常用參數及功能的詳細說明 相關參考知識書籍 <<Redis運維與開發>> 以下是Redis-cli常用參數及功能的詳細說明 1. **-r?&#xff08;重復執行命令&#xff09;** 作用&#xff1a;重復執行指定命令多次。 示例&#xff1a;執行3次PING?命令&#xff1…

百度文心4.5 Turbo與DeepSeek、豆包、元寶對比:技術路徑與市場格局分析??

今日&#xff0c;百度發布文心大模型4.5 Turbo與X1 Turbo&#xff0c;主打多模態能力提升與成本優化&#xff0c;成為AI搜索領域的重要技術迭代。與此同時&#xff0c;DeepSeek、豆包&#xff08;字節跳動&#xff09;、騰訊元寶等競品憑借差異化定位持續搶占市場。本文將從技術…

施工配電箱巡檢二維碼應用

在過去&#xff0c;施工配電箱的巡檢主要依賴于紙質記錄方式。巡檢人員每次巡檢時&#xff0c;都要在紙質表格上詳細填寫配電箱的各項參數、運行狀況以及巡檢時間等信息。這種方式在實際操作中暴露出諸多嚴重問題&#xff0c;信息易出現錯誤、數據會有造假現象、數據量龐大整理…

國產AI大模型超深度橫評:技術參數全解、商業落地全場景拆解

評測方法論與指標體系 評測框架設計 采用三層評估體系&#xff0c;涵蓋技術性能、商業價值、社會效益三大維度&#xff0c;細分為12個二級指標、36個三級指標&#xff1a; 測試環境配置 項目配置詳情硬件平臺8NVIDIA H100集群&#xff0c;NVLink全互聯&#xff0c;3TB內存軟…

施工安全巡檢二維碼制作

進入新時代以來&#xff0c;人們對安全的重視程度越來越高。特別在建筑施工行業&#xff0c;安全不僅是關乎著工人的性命&#xff0c;更是承載著工人背后家庭的幸福生活。此時就誕生了安全巡檢的工作&#xff0c;而巡檢過程中內容龐雜&#xff0c;安全生產檢查、隱患排查、施工…

【AI平臺】n8n入門3:第二個工作流,鏈接網上大模型(含三種方式)

前言 n8n是一款開源的低代碼自動化工具&#xff0c;專注于AI工作流構建&#xff0c;支持靈活的自定義與集成。 就是可以把大模型和其他工具聯合起來&#xff0c;這就厲害了。而且&#xff0c;免費功能又強大&#xff0c;目前很火&#xff0c;來研究一下。 功能說明 本節目標…

【Test】單例模式?

文章目錄 1. 單例模式2. 單例模式簡單示例3. 懶漢模式4. 餓漢模式5. 懶漢式和餓漢式的區別 1. 單例模式 &#x1f427;定義&#xff1a;保證一個類僅有一個實例&#xff0c;并提供一個訪問它的全局訪問點。 單例模式是一種常用的軟件設計模式&#xff0c;在它的核心結構中只包…

Kotlin 協程在 LiveData 中的完美封裝:CoroutineLiveData 全解

&#x1f300; 什么是 CoroutineLiveData&#xff1f; CoroutineLiveData 是 liveData 構造器創建出來的 LiveData 對象&#xff0c;它是 Jetpack 中為協程量身打造的 LiveData 版本&#xff0c;主要用來讓我們在 LiveData 的作用域內&#xff0c;安全、方便地使用協程。 它的…

在 Java 項目中搭建和部署 Docker 的詳細流程

引言 在現代軟件開發中&#xff0c;Docker 已成為一種流行的工具&#xff0c;用于簡化應用的部署和運行環境的一致性。本文將詳細介紹如何在 Java 項目中搭建和部署 Docker&#xff0c;包括配置文件、代碼示例以及流程圖。 一、整體工作流程 以下是整個流程的概覽&#xff1a…

阿里云域名遷移至Amazon Route 53的完整指南

在當今的云計算時代,域名管理和DNS服務的選擇對于網站性能和可用性至關重要。本文將詳細介紹如何將阿里云上的域名遷移至Amazon Route 53,以充分利用AWS生態系統的優勢。 1. 簡介 Amazon Route 53是一種可用性高、可擴展性強的域名系統(DNS)web服務。它為開發者和企業提供了一…

AI網絡滲透kali應用(gptshell)

kali安裝gptshell 一、shellGPT 工具介紹 ShellGPT?是一款由AI大型語言模型&#xff08;LLM&#xff09;驅動的終端命令行工具。它能幫助用戶直接在終端與AI交互&#xff0c;自動生成、解釋、執行各類 Linux 命令&#xff0c;大大提升了運維和開發效率。ShellGPT 支持接入 O…

STM32 I2C總線通信協議

引言 在嵌入式系統開發領域&#xff0c;I2C&#xff08;Inter-Integrated Circuit&#xff09;總線作為經典的雙線制串行通信協議&#xff0c;憑借其簡潔的物理層設計和靈活的通信機制&#xff0c;在傳感器互聯、存儲設備控制、顯示模塊驅動等場景中占據重要地位。本文將深入剖…