CakeCN/hsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more css

Browse Source
This commit is contained in:
CakeCN
2025-09-15 19:35:01 +08:00
parent 0d622c4f0a
commit 90325a25a2
2 changed files with 47 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
code-server-like/static/css/index.css
View File

@@ -10,23 +10,45 @@ body {
background-color: #f1f1f1;
border-bottom: 1px solid #ddd;
}
#container {
display: flex;
flex-direction: column;
flex-grow: 1; /* 让容器填满剩余空间 */
/* 核心容器设置为 Flexbox */
#container {
display: flex;
height: 100vh; /* 高度占满整个视口 */
}
/* 文件树区域（左侧） */
#fileTree {
width: 20%; /* 固定宽度为 20% */
height: 100%;
border-right: 1px solid #ddd;
padding: 10px;
overflow-y: auto;
background-color: #f0f0f0; /* 背景颜色可调整 */
}
/* 右侧的内容区域，分为编辑器和终端 */
#contentArea {
display: flex;
flex-direction: column;
width: 80%; /* 右侧占据 80% */
}
/* 编辑器部分 */
#editorContainer {
flex-grow: 3; /* 让编辑器占据三分之二空间 */
border-bottom: 1px solid #ddd;
background-color: #f5f5f5; /* 可以调整编辑器背景颜色 */
flex-grow: 3; /* 编辑器占据大部分空间，3:1 */
border-bottom: 1px solid #ddd;
background-color: #f5f5f5; /* 可以调整编辑器背景颜色 */
padding: 10px;
}
/* 终端部分 */
#terminal {
flex-grow: 1; /* 让终端占据剩余的空间 */
border-top: 1px solid #ddd;
background-color: black;
flex-grow: 1; /* 终端占据剩余的空间 */
border-top: 1px solid #ddd;
background-color: black;
color: white; /* 终端文本颜色 */
padding: 10px;
overflow-y: auto;
}
#fileTree { width: 20%;height: 100%; border-right: 1px solid #ddd; padding: 10px; overflow-y: auto; }
#searchSidebar { border-left: 1px solid #ddd; display: none; overflow-y: auto; }

17
code-server-like/templates/index.html
View File

@@ -13,6 +13,7 @@
<link rel="stylesheet" href="/vsc-like/static/css/index.css">
</head>
<body>
<div id="container">
<div id="fileTree" onclick="selectEmpty(this)">
<div id="topbar">
<button id="newFileBtn"><i class="fas fa-file"></i></button>
@@ -39,9 +40,19 @@
</ul>
</div>
<div id="container">
<div id="editorContainer"></div> <!-- 这里是编辑器 -->
<div id="terminal"></div> <!-- 这里是终端 -->
<div id="contentArea">
<!-- 编辑器部分 -->
<div id="editorContainer">
<h3>Editor</h3>
<textarea style="width: 100%; height: 100%;"></textarea>
</div>
<!-- 终端部分 -->
<div id="terminal">
<h3>Terminal</h3>
<div id="terminalContent"></div>
</div>
</div>
</div>