以下是一个广东自动办公窗帘方案:
/* 窗帘样式 */
.curtain {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #333;
opacity: 0.8;
z-index: 9999;
display: none;
}
.curtain-content {
width: 80%;
max-width: 600px;
background-color: #fff;
padding: 20px;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin: 10px;
}
.btn:hover {
background-color: #45a049;
}
您好,欢迎使用自动办公窗帘系统。请选择您希望的操作:
function openCurtain() {
document.getElementById("curtain").style.display = "block";
}
function closeCurtain() {
document.getElementById("curtain").style.display = "none";
}
这个方案包括了一个全屏的窗帘界面,用户可以点击"打开窗帘"和"关闭窗帘"按钮来控制窗帘的开合。界面采用了深色背景和白色内容区的设计,整体看起来简洁大气。
窗帘的实现是通过CSS固定定位和JavaScript控制显示/隐藏实现的。这种方案不需要任何第三方库,可以直接嵌入到办公环境中使用。同时也具有较好的移动端适配性。
用户可以根据实际需求对界面样式和功能进行定制,例如增加定时开关、亮度调节等功能,以满足不同办公场景的需求。
查看详情
查看详情