/* 创建一个包装器来控制主页面内容 */ #paiwise-main-wrapper { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; overflow-y: auto !important; overflow-x: hidden !important; transition: width 0.3s ease-in-out !important; } /* 当侧边栏打开时的主内容样式 */ #paiwise-main-wrapper.sidebar-open { width: 75% !important; } #paiwise-sidebar { position: fixed !important; top: 0 !important; right: -25% !important; /* 初始位置在屏幕外 */ width: 25% !important; height: 100vh !important; z-index: 2147483647 !important; border: none !important; background: #fff !important; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1) !important; transition: right 0.3s ease-in-out !important; opacity: 0; transform: translateX(20px); } /* 当侧边栏显示时的样式 */ #paiwise-sidebar.show { right: 0 !important; opacity: 1; transform: translateX(0); } /* 隐藏原始滚动条 */ body::-webkit-scrollbar { display: none !important; } body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; height: 100vh !important; } /* 添加动画关键帧 */ @keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(20px); } }