feat:优化页面显示效果

src/components/Delete/index.vue

 <template>
   <el-dialog v-model="deleteDialogVisible" title="删除" width="250" center align-center @close="close" draggable>
     <div class="text-center">
-			<span style="color: #fff;font-size: 15px;">确定删除吗？</span>
+      <span style="color: #fff; font-size: 15px">确定删除吗？</span>
     </div>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="close">取消</el-button>
-				<el-button type="primary" @click="handleDelelte">
-					确定
-				</el-button>
+        <el-button type="primary" @click="handleDelelte"> 确定 </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { defineProps } from 'vue';
-import { getUserList, addUser, deleteUser, updateUser, batchDeleteUser } from '@/api/user.ts'
-import { DeleteMode } from '@/components/Delete/enum.ts'
+import { ref, watch } from "vue";
+import { defineProps } from "vue";
+import { deleteUser, batchDeleteUser } from "@/api/user.ts";
+import { DeleteMode } from "@/components/Delete/enum.ts";
 interface deleteDialogPropType {
-	dialogVisible: boolean,
-	deleteMode: DeleteMode,
-	id: number,
-	ids: number[],
+  dialogVisible: boolean;
+  deleteMode: DeleteMode;
+  id: number;
+  ids: number[];
 }
-const props = defineProps<deleteDialogPropType>()
-const emit = defineEmits(['update:dialogVisible', 'confirm', 'getUserList', 'update:deleteMode'])
-const deleteDialogVisible = ref(props.dialogVisible)
-const deleteMode = ref(props.deleteMode)
+const props = defineProps<deleteDialogPropType>();
+const emit = defineEmits(["update:dialogVisible", "confirm", "getUserList", "update:deleteMode"]);
+const deleteDialogVisible = ref(props.dialogVisible);
+const deleteMode = ref(props.deleteMode);
 // 删除方法
 const handleDelelte = async () => {
   if (props.deleteMode == DeleteMode.SINGLE_DELETE) {
-		await deleteUser({ id: props.id })
-		emit('getUserList')
-		deleteDialogVisible.value = false
-	}
-	else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
+    await deleteUser({ id: props.id });
+    emit("getUserList");
+    deleteDialogVisible.value = false;
+  } else if (props.deleteMode == DeleteMode.BATCH_DELETE) {
     console.log(props.ids);
-		await batchDeleteUser({ ids: props.ids })
-		emit('getUserList')
-		deleteDialogVisible.value = false
+    await batchDeleteUser({ ids: props.ids });
+    emit("getUserList");
+    deleteDialogVisible.value = false;
   }
-}
+};
 // 关闭弹窗的方法
 const close = () => {
-	deleteDialogVisible.value = false
-}
+  deleteDialogVisible.value = false;
+};
 // 监听父组件传过来的值
-watch(() => props.dialogVisible,
+watch(
+  () => props.dialogVisible,
   (newVal) => {
-		deleteDialogVisible.value = newVal
+    deleteDialogVisible.value = newVal;
   }
-)
+);
 // 监听组件内的值并向父组件更新
-watch(() => deleteDialogVisible.value,
+watch(
+  () => deleteDialogVisible.value,
   (newVal) => {
-		emit('update:dialogVisible', newVal)
+    emit("update:dialogVisible", newVal);
   }
-)
+);
 // 监听父组件传过来的值
-watch(() => props.deleteMode,
+watch(
+  () => props.deleteMode,
   (newVal) => {
-		deleteMode.value = newVal
+    deleteMode.value = newVal;
   }
-)
+);
 // 监听组件内的值并向父组件更新
-watch(() => deleteMode.value,
+watch(
+  () => deleteMode.value,
   (newVal) => {
-		emit('update:deleteMode', newVal)
+    emit("update:deleteMode", newVal);
   }
-)
+);
 </script>

src/views/os-dataDisplay/components/dsnData/dsnDataTab.vue

@@ -330,6 +330,15 @@ onMounted(async () => {
 .item {
   color: #eee;
 }
+
+.table-content {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px !important;
+}
 </style>
 
 <style>

src/views/os-dataDisplay/components/esDataTab.vue

@@ -727,6 +727,15 @@ onMounted(() => {
   display: flex;
   gap: 10px;
 }
+
+.table-content {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px !important;
+}
 </style>
 
 <style>

src/views/os-dataDisplay/components/ituDataTab.vue

@@ -374,9 +374,6 @@ onMounted(() => {
 }
 // 调整表单项间距
 .detailForm {
-  // background-image: url("@/assets/picture/dialog1.png");
-  // background-size: 100% 100%;
-  // background-repeat: no-repeat;
   .el-dialog-title {
     font-size: 180px;
   }
@@ -394,7 +391,12 @@ onMounted(() => {
 }
 
 .itu-table {
-  padding: 0 10px;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px;
 }
 
 /* 表格样式 */
@@ -428,7 +430,7 @@ onMounted(() => {
 }
 
 .item-title {
-  color: #b0dfff;
+  color: #fff;
 }
 
 .item {

src/views/os-dataDisplay/components/stDataTab.vue

@@ -141,17 +141,35 @@
             <el-divider style="margin: 0"></el-divider>
             <el-row>
               <el-col>
-                <div class="info-item">
+                <div class="info-item-tle">
+                  <el-row>
+                    <el-col :span="4">
                       <span class="item-title">TLE第一行数据：</span>
+                    </el-col>
+                    <el-col :span="20">
                       <span class="item">{{ tleLine0 }}</span>
+                    </el-col>
+                  </el-row>
                 </div>
-                <div class="info-item">
+                <div class="info-item-tle">
+                  <el-row>
+                    <el-col :span="4">
                       <span class="item-title">TLE第二行数据：</span>
+                    </el-col>
+                    <el-col :span="20">
                       <span class="item">{{ tleLine1 }}</span>
+                    </el-col>
+                  </el-row>
                 </div>
-                <div class="info-item">
+                <div class="info-item-tle">
+                  <el-row>
+                    <el-col :span="4">
                       <span class="item-title">TLE第三行数据：</span>
+                    </el-col>
+                    <el-col :span="20">
                       <span class="item">{{ tleLine2 }}</span>
+                    </el-col>
+                  </el-row>
                 </div>
               </el-col>
             </el-row>
@@ -357,6 +375,19 @@ onMounted(() => {
   justify-content: space-between;
 }
 
+.info-item-tle {
+  margin: 10px 0;
+}
+
+.table-content {
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px !important;
+}
+
 .item-title {
   color: #b0dfff;
 }

src/views/os-spiderManager/index.vue

@@ -25,7 +25,6 @@
           </template>
         </el-table-column>
       </el-table>
-    </div>
       <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
         <Pagination
           :total="pageObj.total"
@@ -34,6 +33,7 @@
           @pagination="getData"
         />
       </div>
+    </div>
 
     <el-dialog style="z-index: 999999" draggable v-model="editDialogVisible" title="指定下载以下卫星" width="400">
       <div class="No-Content" ref="noContentRef">
@@ -237,6 +237,12 @@ onMounted(() => {
 .table-content {
   padding: 10px;
   margin-top: 30px;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 15px;
 }
 
 .title {

src/views/os-status/components/dataCard.vue

 <template>
   <div class="flex">
     <span class="textStyle" :class="{ toRight0: slideState }">数据统计</span>
-    <div class="dataCard" @click="goToAllDataPage">
+    <div class="dataCard" @click="goToAllDataPage" style="cursor: pointer">
       <div class="titleStyle">
         <span>数据统计</span>
       </div>
@@ -23,7 +23,7 @@
         </div>
       </div>
     </div>
-    <div class="dataCard" @click="goToTaskRecordPage">
+    <div class="dataCard" @click="goToTaskRecordPage" style="cursor: pointer">
       <div class="titleStyle">
         <span>任务执行统计</span>
       </div>
@@ -211,7 +211,7 @@ onMounted(() => {
 }
 
 .loading {
-  width: 45px;
+  width: 40px;
   aspect-ratio: 2;
   margin-right: 30px;
   --_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);

src/views/os-status/components/taskCard.vue

@@ -181,6 +181,7 @@ onMounted(() => {
   width: 500px;
   height: 100%;
   border-radius: 5px;
+  cursor: pointer;
 }
 
 .titleStyle {
@@ -235,7 +236,7 @@ onMounted(() => {
 }
 
 .loading {
-  width: 45px;
+  width: 40px;
   aspect-ratio: 2;
   margin-right: 30px;
   --_g: no-repeat radial-gradient(circle closest-side, #4edaff 90%, #0000);

src/views/os-system/index.vue

@@ -203,6 +203,11 @@ onMounted(async () => {
 }
 
 .table-content {
-  padding: 0 10px;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px !important;
 }
 </style>

src/views/os-taskRecord/index.vue

@@ -190,7 +190,12 @@ onMounted(() => {
 }
 
 .table-content {
-  padding: 0 10px;
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(78, 237, 255, 0.2);
+  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
+  border-radius: 8px;
+  padding: 10px !important;
   margin-top: 18px;
 }