Home Explore Help
Register Sign In
YFKJ_EmbeddedSoftwareTeam
/
rtu_linux_services
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

上传网络连接页面的html和css样式

niujiuru 1 month ago
parent
78810809c7
commit
ca4b844910
2 changed files with 237 additions and 6 deletions
Split View Show Diff Stats
  1. 75 6
      web-ui.service/web/pages/page2.html
  2. 162 0
      web-ui.service/web/static/css/page2.css

+ 75 - 6
web-ui.service/web/pages/page2.html
View File 

@@ -11,13 +11,82 @@
 
 
 <body>
 
 <div class="app">
 
-  <div class="card">
 
-    <div class="icon">🚧</div>
 
-      <h1>页面2</h1>
 
-      <h1>敬请期待</h1>
 
-    <p class="subtitle">该功能正在开发中，敬请期待...</p>
 
-  </div>
 
+  <main class="view page-network">
 
+    <div class="status-bar">
 
+      <div class="status-item">
 
+        <span class="label">联网服务</span>
 
+        <span class="value" id="var1">--</span>
 
+      </div>
 
+      <div class="status-item">
 
+        <span class="label">联网状态</span>
 
+        <span class="value" id="var2">--</span>
 
+      </div>
 
+      <div class="status-item">
 
+        <span class="label">联网类型</span>
 
+        <span class="value" id="var3">--</span>
 
+      </div>
 
+      <div class="status-item">
 
+        <span class="label">4G信号强度</span>
 
+        <span class="value" id="var4">--</span>
 
+      </div>
 
+      <div class="status-item">
 
+        <span class="label">SIM卡的ID</span>
 
+        <span class="value" id="var5">--</span>
 
+      </div>
 
+    </div>
 
+
 
+    <div class="panes">
 
+      <!-- 左栏 -->
 
+      <div class="left-pane">
 
+        <div class="card">
 
+          <div class="card-header">
 
+            <h2>网卡信息</h2>
 
+            <button class="btn" title="点击刷新最新数据" onclick="getNetInfo1()">🔄</button>
 
+          </div>
 
+          <pre class="output" id="text1">点击刷新获取数据...</pre>
 
+        </div>
 
+
 
+        <div class="card">
 
+          <div class="card-header">
 
+            <h2>路由信息</h2>
 
+            <button class="btn" title="点击刷新最新数据" onclick="getNetInfo3()">🔄</button>
 
+          </div>
 
+          <pre class="output" id="text2">点击刷新获取数据...</pre>
 
+        </div>
 
+
 
+        <div class="card">
 
+          <div class="card-header">
 
+            <h2>域名解析</h2>
 
+            <button class="btn" title="点击刷新最新数据" onclick="getNetInfo3()">🔄</button>
 
+          </div>
 
+          <pre class="output" id="text3">点击刷新获取数据...</pre>
 
+        </div>
 
+      </div>
 
+      <!-- 右栏 -->
 
+      <div class="right-pane">
 
+        <div class="card log-card">
 
+          <div class="card-header">
 
+            <h2>联网服务</h2>
 
+            <div class="log-actions">
 
+              <select class="log-level-select" id="logLevel">
 
+                <option value="trace">trace</option>
 
+                <option value="debug">debug</option>
 
+                <option value="info" selected>info</option>
 
+                <option value="error">error</option>
 
+                <option value="fatal">fatal</option>
 
+              </select>
 
+              <button class="btn" title="点击设置日志级别" onclick="setLogLevel()">📝</button>
 
+              <button class="btn" title="点击重启联网服务" onclick="restartNSvc()">🔄</button>
 
+            </div>
 
+          </div>
 
+          <pre class="output log-output" id="text4">自动实时获取数据...</pre>
 
+        </div>
 
+      </div>
 
+      <!-- 结束 -->
 
+    </div>
 
+  </main>
 
 </div>
 
+<script src="static/js/page2.js"></script>
 
 </body>
 
 
 </html>

+ 162 - 0
web-ui.service/web/static/css/page2.css
View File 

@@ -0,0 +1,162 @@
 
+/* 页面整体布局 */
 
+.page-network {
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 15px;
 
+    height: 100%;
 
+    overflow: hidden;
 
+}
 
+
 
+/* 顶部的状态栏 */
 
+.status-bar {
 
+    display: flex;
 
+    gap: 24px;
 
+    padding: 12px 16px;
 
+    background: transparent;
 
+    border: none;
 
+    border-radius: 0;
 
+    flex-shrink: 0;
 
+}
 
+
 
+.status-item {
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 4px;
 
+}
 
+
 
+.status-item .label {
 
+    font-size: 11px;
 
+    color: #94a3b8;
 
+}
 
+
 
+.status-item .value {
 
+    font-size: 13px;
 
+    color: #e5e7eb;
 
+    font-family: ui-monospace, monospace;
 
+}
 
+
 
+/* 左右拆分的栏 */
 
+.panes {
 
+    display: flex;
 
+    gap: 15px;
 
+    flex: 1;
 
+    min-height: 0;
 
+    overflow: hidden;
 
+}
 
+
 
+/* 展示网络信息 */
 
+.left-pane {
 
+    flex: 1;
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 15px;
 
+    overflow: hidden;
 
+    min-width: 0;
 
+}
 
+
 
+.left-pane .card {
 
+    flex: 1;
 
+    display: flex;
 
+    flex-direction: column;
 
+    min-height: 0;
 
+    overflow: hidden;
 
+}
 
+
 
+.left-pane .output {
 
+    flex: 1;
 
+    overflow: auto;
 
+    max-height: none;
 
+}
 
+
 
+/* 展示服务日志 */
 
+.right-pane {
 
+    flex: 1;
 
+    display: flex;
 
+    flex-direction: column;
 
+    min-width: 0;
 
+    overflow: hidden;
 
+}
 
+
 
+.log-card {
 
+    height: 100%;
 
+    display: flex;
 
+    flex-direction: column;
 
+}
 
+
 
+.log-card .output {
 
+    flex: 1;
 
+    display: flex;
 
+    flex-direction: column;
 
+    height: auto;
 
+}
 
+
 
+.log-actions {
 
+    display: flex;
 
+    align-items: center;
 
+    gap: 8px;
 
+}
 
+
 
+.log-level-select {
 
+    background: #0f172a;
 
+    border: 1px solid rgba(148, 163, 184, 0.25);
 
+    border-radius: 6px;
 
+    color: #e5e7eb;
 
+    font-size: 12px;
 
+    padding: 6px 8px;
 
+    height: 30px;
 
+    min-width: 80px;
 
+    cursor: pointer;
 
+    outline: none;
 
+    -webkit-appearance: none;
 
+    appearance: none;
 
+}
 
+
 
+.log-level-select:hover {
 
+    border-color: rgba(148, 163, 184, 0.45);
 
+}
 
+
 
+.log-level-select:focus {
 
+    border-color: #3b82f6;
 
+}
 
+
 
+/* 卡片基础样式 */
 
+.card {
 
+    background: #0f172a;
 
+    border: 1px solid #1f2937;
 
+    border-radius: 8px;
 
+    padding: 15px;
 
+}
 
+
 
+.card-header {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    margin-bottom: 12px;
 
+}
 
+
 
+.card-header h2 {
 
+    font-size: 14px;
 
+    font-weight: 500;
 
+    color: #e2e8f0;
 
+    margin: 0;
 
+}
 
+
 
+/* 输出日志区域 */
 
+.output {
 
+    background: #020617;
 
+    border: 1px solid #1f2937;
 
+    border-radius: 6px;
 
+    padding: 10px;
 
+    font-size: 12px;
 
+    font-family: ui-monospace, monospace;
 
+    color: #cbd5e1;
 
+    max-height: 200px;
 
+    overflow: auto;
 
+    white-space: pre-wrap;
 
+    line-height: 1.6;
 
+}
 
+
 
+/* 取消高度限制 */
 
+.right-pane .log-output {
 
+    max-height: none;
 
+}