DataStatistics数据显示页面---test.vue中测试全局弹窗提示

src/components/Settings.vue

@@ -1,17 +1,23 @@
 <template>
   <div class="settings-container">
+   
     <el-row class="popup-row">
-      <el-checkbox v-model="isPopupEnabled" @change="handleCheckboxChange">
+      <el-checkbox v-model="isPopupEnabled" @change="handleCheckboxChange" style="color: aliceblue;">
         开启弹窗
       </el-checkbox>
     </el-row>
+
+    <el-row class="channel-row">
+      <Channel/>
+    </el-row>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, inject, onMounted } from 'vue';
 import { ElMessageBox, ElMessage } from 'element-plus';
-import type { GlobalWebSocket } from '../utils/useGlobalWebSocket'; // 引入类型
+import type { GlobalWebSocket } from '../utils/useGlobalWebSocket';
+import  Channel from '@/components/Channel.vue';
 
 const isPopupEnabled = ref(false); // 控制弹窗状态
 const globalWebSocket = inject<GlobalWebSocket>('globalWebSocket'); // 指定类型
@@ -61,9 +67,30 @@ const handleCheckboxChange = () => {
 
 <style scoped>
 .settings-container {
-  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  background-color: #ffffff;
+  width: 100%;
+  height: 100%;
+
 }
 .popup-row {
   margin-bottom: 20px;
+  height: 20vh;
+  width: 80vw;
+  padding: 1vh 1vw;
+  margin: 1vh 2vw;
+  background-color: #001529;
+  border-radius: 8px;
+  color: white;
 }
+
+.channel-row{
+  margin: 1vh 2vw;
+  width: 80vw;
+  height: 70vh;
+  background-color: #001529;
+  border-radius: 8px;
+}
+
 </style>