大屏页面初始化

screen-vue/src/views/screen/index.vue

@@ -31,6 +31,7 @@
             value-format="YYYY"
           ></el-date-picker>
           <button class="query-btn" @click="handleQuery">查询</button>
+		  <img src="@/assets/images/setting.png"  class="setting-btn" @click="handleSetting" />
         </div>
       </div>
     </header>
@@ -50,7 +51,7 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElMessageBox } from 'element-plus';
 import { getHomeModuleList } from '@/api/bizApi'
 import HomePage from './Home/index.vue'
 
@@ -112,6 +113,11 @@ const handleQuery = () => {
   });
 };
 
+// 新增设置按钮点击事件
+const handleSetting = () => {
+  router.push('/screen/Setting/index');
+};
+
 async function getList() {
   try {
     const res = await getHomeModuleList();
@@ -186,6 +192,24 @@ onMounted(() => {
 .dark-date-popper .el-date-table td.in-range .el-date-table-cell::before {
   background-color: rgba(60, 156, 255, 0.25) !important;
 }
+
+/* 新增设置弹窗样式 */
+.dark-message-box {
+  background-color: #0f3460 !important;
+  border: 1px solid #1a508b !important;
+}
+.dark-message-box .el-message-box__header,
+.dark-message-box .el-message-box__content {
+  background-color: #0f3460 !important;
+  color: #e0e6ff !important;
+}
+.dark-message-box .el-message-box__title {
+  color: #e0e6ff !important;
+}
+.confirm-btn {
+  background: linear-gradient(90deg, #1a508b, #3c9cff) !important;
+  border: 1px solid #1a508b !important;
+}
 </style>
 
 <style scoped>
@@ -350,6 +374,26 @@ onMounted(() => {
   background: linear-gradient(90deg, #154580, #2b8ed8);
 }
 
+.setting-btn {
+  height: 36px;
+  width: 36px;
+  border-radius: 8px;
+  background: linear-gradient(90deg, #1a508b, #3c9cff);
+  border: 1px solid #1a508b;
+  color: #fff;
+  font-size: 18px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.setting-btn:hover {
+  box-shadow: 0 2px 8px rgba(60, 156, 255, 0.6);
+  background: linear-gradient(90deg, #154580, #2b8ed8);
+}
+
 .screen-content {
   flex: 1;
   padding: 1px;
@@ -396,11 +440,15 @@ onMounted(() => {
     height: 32px;
     line-height: 32px;
   }
-  .query-btn {
+  .query-btn, .setting-btn {
     height: 32px;
     font-size: 14px;
     padding: 0 18px;
   }
+  .setting-btn {
+    width: 32px;
+    font-size: 16px;
+  }
 }
 
 @media (max-height: 900px) {
@@ -414,9 +462,12 @@ onMounted(() => {
     height: 32px;
     line-height: 32px;
   }
-  .query-btn {
+  .query-btn, .setting-btn {
     height: 32px;
   }
+  .setting-btn {
+    width: 32px;
+  }
   .screen-content {
     padding: 10px;
     height: calc(100vh - 65px);