背景样式全菜单里添加

src/components/AppVue/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="header">
-    <div class="logo">为青浦区“一张图”区级节点</div>
+    <div class="logo">青浦区“一张图”区级节点</div>
     <div class="userdropdown">
       <User />
     </div>
@@ -51,7 +51,8 @@ export default {
   .logo {
     display: inline-block;
     height: 70px;
-    width: 200px;
+    // width: 200px;
+    padding: 0 20px;
     text-align: center;
     line-height: 70px;
     font-size: 24px;

src/views/Root.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="main">
-    <!-- <Header /> -->
+    <Header />
     <el-scrollbar ref="pagescrollbar" class="el-scrollbar">
       <router-view />
     </el-scrollbar>
-    <!-- <Footer></Footer> -->
+    <Footer></Footer>
   </div>
 </template>
 
@@ -49,16 +49,17 @@ export default {
   width: 100%;
   height: 100%;
   margin: 0 auto;
-  overflow: hidden;
+  //overflow: hidden;
 
   .el-scrollbar {
     position: relative;
     width: 100%;
     height: 100%;
-    // height: calc(100% - 120px);
+    height: calc(100% - 120px);
     box-sizing: border-box;
     overflow: hidden;
     overflow: auto;
+    // padding-bottom: 50px
   }
 }
 </style>

src/views/Sksjgl.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sksjgl container">
-    <div class="server_title">
+    <!-- <div class="server_title">
       <el-image
         style="width: 50%; height: calc(100vh - 120px)"
         src="static/images/sksjgl/sksjgl_title.png"
@@ -12,7 +12,21 @@
           二维数据服务是围绕二维地理信息数据展开的综合服务体系。它涵盖以像元阵列形式存储的栅格服务，广泛应用于影像地图展示、地形分析等;通过将地图切割成小图片进行快速加载的瓦片服务，提升地图浏览流畅度;能够精确表达地理要素几何形状和属性的矢量时空数据服务，记录地理对象随时间的变化;以及包含特定主题数据集合的专题库服务，如交通专题库、土地利用专题库等，满足不同行业对特定地理信息的深度挖掘与分析需求，为城市规划、资源管理、环境监测等领域提供有力的数据支撑。
         </div>
       </div>
+    </div> -->
+
+    <!-- 顶部横幅区域 -->
+    <div class="banner">
+      <div class="banner-content">
+        <h1 class="banner-title">时空数据管理</h1>
+        <p class="banner-description">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;二维数据服务是围绕二维地理信息数据展开的综合服务体系。它涵盖以像元阵列形式存储的栅格服务，广泛应用于影像地图展示、地形分析等;通过将地图切割成小图片进行快速加载的瓦片服务，提升地图浏览流畅度;能够精确表达地理要素几何形状和属性的矢量时空数据服务，记录地理对象随时间的变化;以及包含特定主题数据集合的专题库服务，如交通专题库、土地利用专题库等，满足不同行业对特定地理信息的深度挖掘与分析需求，为城市规划、资源管理、环境监测等领域提供有力的数据支撑。
+        </p>
+        <!-- <div>
+          <el-button type="primary" class="enter-button" @click="handleEnterClick">立即体验</el-button>
+        </div> -->
+      </div>
     </div>
+
     <div class="checkModule">
       <!-- 流程步骤 -->
       <div class="process-bar">
@@ -225,7 +239,7 @@ export default {
 
   .checkModule {
     width: 100%;
-    background-color: #0f2545;
+    background-color: #00002e;
 
     /* 流程步骤样式 */
     .process-bar {
@@ -453,4 +467,61 @@ export default {
     }
   }
 }
+
+/* 顶部横幅样式 */
+.banner {
+  width: 100%;
+  // height: calc(100vh - 120px);
+  height: 552px;
+  background: url('@static/images/sjgl/bg.png');
+  background-size: cover;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+
+  .banner-content {
+    position: relative;
+    z-index: 2;
+    text-align: right;
+    max-width: 500px;
+    padding: 0 10%;
+    justify-content: right;
+    display: grid;
+  }
+
+  .banner-title {
+    font-size: 56px;
+    font-weight: bold;
+    letter-spacing: 0.5rem;
+    // margin-bottom: 20px;
+    color: #ffffff;
+    text-align: right;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .banner-description {
+    font-size: 16px;
+    line-height: 1.8;
+    margin: 40px 0px;
+    text-align: left;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .enter-button {
+    padding: 12px 36px;
+    font-size: 18px;
+    border-radius: 10px;
+    background-color: #1890ff;
+    border: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #40a9ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+    }
+  }
+}
 </style>

src/views/Wgn.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wgn_box">
-    <div class="server_title">
+    <!-- <div class="server_title">
       <el-image
         style="width: 50%; height: calc(100vh - 120px)"
         src="static/images/wgn_title.png"
@@ -14,14 +14,30 @@
           两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现
           “计算 - 分析 - 展示” 闭环。
         </div>
-        <div class="server_title_text_btu" v-if="$getUserType() == 3">
+        <div class="server_title_text_btu" v-if="$getUserType() == 3"> -->
           <!-- 先打开弹窗，然后上传文件保存信息到DMS的任务表，同时发送任务到微功能子系统，微功能子系统处理完成后，更新任务状态 -->
-          <el-button type="primary" round plain size="large" @click="createTask"
+          <!-- <el-button type="primary" round plain size="large" @click="createTask"
+            >大批量数据处理任务<el-icon><Position /></el-icon
+          ></el-button>
+        </div>
+      </div>
+    </div> -->
+
+    <!-- 顶部横幅区域 -->
+    <div class="banner">
+      <div class="banner-content">
+        <h1 class="banner-title">微功能服务</h1>
+        <p class="banner-description">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦“精准计算 + 灵活处理”两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现“计算 - 分析 - 展示” 闭环。
+        </p>
+        <div v-if="$getUserType() == 3">
+           <el-button type="primary" round plain size="large" @click="createTask"
             >大批量数据处理任务<el-icon><Position /></el-icon
           ></el-button>
         </div>
       </div>
     </div>
+
     <div class="server_list_box">
       <div class="server_list_box_title">微功能列表</div>
       <el-affix :offset="80">
@@ -797,7 +813,7 @@ export default {
 }
 .server_list_box {
   width: 100vw;
-  background-color: rgba(0, 0, 0, 0.15);
+  background-color: #00002e;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -899,4 +915,60 @@ export default {
     }
   }
 }
+/* 顶部横幅样式 */
+.banner {
+  width: 100%;
+  // height: calc(100vh - 120px);
+  height: 552px;
+  background: url('@static/images/wgn/bg.png');
+  background-size: cover;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+
+  .banner-content {
+    position: relative;
+    z-index: 2;
+    text-align: right;
+    max-width: 500px;
+    padding: 0 10%;
+    justify-content: right;
+    display: grid;
+  }
+
+  .banner-title {
+    font-size: 56px;
+    font-weight: bold;
+    letter-spacing: 0.5rem;
+    // margin-bottom: 20px;
+    color: #ffffff;
+    text-align: right;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .banner-description {
+    font-size: 16px;
+    line-height: 1.8;
+    margin: 40px 0px;
+    text-align: left;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .enter-button {
+    padding: 12px 36px;
+    font-size: 18px;
+    border-radius: 10px;
+    background-color: #1890ff;
+    border: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #40a9ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+    }
+  }
+}
 </style>

src/views/skmh/index.vue

@@ -2,7 +2,7 @@
   <div class="dashboard-container">
     <!-- 顶部横幅 -->
 
-    <div class="server_title">
+    <!-- <div class="server_title">
       <el-image
         style="width: 50%; height: calc(100vh - 120px)"
         src="static/images/wgn_title.png"
@@ -14,15 +14,21 @@
           时空门户子系统为用户提供信息概览、导航入口及交互功能，帮助用户快速了解和使用平台服务。系统统计访问量（累计和日均）、用户使用时长及活跃时段；展示平台功能、核心能力及操作演示视频；统计并展示服务总数、分类占比及新上线服务；同时统计各委办平台的注册用户信息及用户总数。
         </div>
       </div>
-    </div>
+    </div> -->
 
-    <!-- <div class="banner">
+    <!-- 顶部横幅区域 -->
+    <div class="banner">
       <div class="banner-content">
-        <h1>时空门户</h1>
-        <p>时空门户是一个集数据采集、分析、展示于一体的综合性平台，为用户提供全面的设备监控和数据分析服务</p>
-        <button class="enter-btn">进入系统</button>
+        <h1 class="banner-title">时空门户</h1>
+        <p class="banner-description">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时空门户子系统为用户提供信息概览、导航入口及交互功能，帮助用户快速了解和使用平台服务。系统统计访问量（累计和日均）、用户使用时长及活跃时段；展示平台功能、核心能力及操作演示视频；统计并展示服务总数、分类占比及新上线服务；同时统计各委办平台的注册用户信息及用户总数。
+        </p>
+        <!-- <div>
+          <el-button type="primary" class="enter-button" @click="handleEnterClick">立即体验</el-button>
+        </div> -->
       </div>
-    </div> -->
+    </div>
+
 
     <!-- 平台数据统计 -->
     <div class="stats-section">
@@ -897,6 +903,63 @@ export default {
 
 <style lang="less" scoped>
 
+/* 顶部横幅样式 */
+.banner {
+  width: 100%;
+  // height: calc(100vh - 120px);
+  height: 552px;
+  background: url('@static/images/skmh/bg.png');
+  background-size: cover;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+
+  .banner-content {
+    position: relative;
+    z-index: 2;
+    text-align: right;
+    max-width: 500px;
+    padding: 0 10%;
+    justify-content: right;
+    display: grid;
+  }
+
+  .banner-title {
+    font-size: 56px;
+    font-weight: bold;
+    letter-spacing: 0.5rem;
+    // margin-bottom: 20px;
+    color: #ffffff;
+    text-align: right;
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+  }
+
+  .banner-description {
+    font-size: 16px;
+    line-height: 1.8;
+    margin: 40px 0px;
+    text-align: left;
+    color: rgba(255, 255, 255, 0.9);
+  }
+
+  .enter-button {
+    padding: 12px 36px;
+    font-size: 18px;
+    border-radius: 10px;
+    background-color: #1890ff;
+    border: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #40a9ff;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
+    }
+  }
+}
+
 /* 确保你的自定义样式优先级更高 */
 .el-date-picker {
     /* 重置为期望的样式 */
@@ -904,9 +967,15 @@ export default {
     background-color: white !important; /* 确保背景色正确 */
 }
 .dashboard-container {
-  background-color: #0A192F;
+  // background-color: #0A192F;
+  // min-height: 100vh;
+  // color: #fff;
+
+  width: 100%;
   min-height: 100vh;
-  color: #fff;
+  background-color: #01012f;
+  color: #ffffff;
+  overflow-x: hidden;
 }
 
 .server_title {
@@ -935,65 +1004,6 @@ export default {
   }
 }
 
-/* 顶部横幅 */
-.banner {
-  position: relative;
-  height: 500px;
-  background: url('@/assets/images/common/home-bg1.png') center/cover no-repeat;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 10%;
-  
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(to right, rgba(10, 25, 47, 0.9), rgba(10, 25, 47, 0.7));
-  }
-  
-  .banner-content {
-    position: relative;
-    max-width: 600px;
-    text-align: left;
-    padding: 0 20px;
-    
-    h1 {
-      font-size: 42px;
-      font-weight: bold;
-      margin-bottom: 20px;
-      color: #fff;
-    }
-    
-    p {
-      font-size: 14px;
-      line-height: 1.8;
-      margin-bottom: 30px;
-      color: #a3b6c7;
-    }
-    
-    .enter-btn {
-      background-color: transparent;
-      color: #409eff;
-      border: 1px solid #409eff;
-      padding: 8px 30px;
-      font-size: 16px;
-      border-radius: 20px;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      
-      &:hover {
-        background-color: #409eff;
-        color: #fff;
-        transform: translateY(-2px);
-      }
-    }
-  }
-}
-
 /* 平台数据统计 */
 .stats-section {
   padding: 40px 10%;

src/views/yygl/index.vue

@@ -5,10 +5,11 @@
       <div class="banner-content">
         <h1 class="banner-title">应用中心</h1>
         <p class="banner-description">
-          收集、管理区级应用的访问地址、使用单位、使用情况等。
-          区委办局、街镇、居村应基于区级节点开展区级时空应用建设。
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收集、管理区级应用的访问地址、使用单位、使用情况等。区委办局、街镇、居村应基于区级节点开展区级时空应用建设。
         </p>
-        <el-button type="primary" class="enter-button" @click="handleEnterClick">点击进入</el-button>
+        <div>
+          <el-button type="primary" class="enter-button" @click="handleEnterClick">立即体验</el-button>
+        </div>
       </div>
     </div>
 
@@ -110,7 +111,7 @@ export default {
 .application-center {
   width: 100%;
   min-height: 100vh;
-  background-color: #08224a;
+  background-color: #01012f;
   color: #ffffff;
   overflow-x: hidden;
 }
@@ -118,49 +119,51 @@ export default {
 /* 顶部横幅样式 */
 .banner {
   width: 100%;
-  height: calc(100vh - 120px);
-  background: url(~@/assets/images/common/u720.png) no-repeat center center;
+  // height: calc(100vh - 120px);
+  height: 552px;
+  background: url('@static/images/yyzx/bg.png');
   background-size: cover;
   display: flex;
-  justify-content: center;
+  justify-content: right;
   align-items: center;
   position: relative;
   overflow: hidden;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(8, 34, 74, 0.7);
-    z-index: 1;
-  }
+  // &::before {
+  //   content: '';
+  //   position: absolute;
+  //   top: 0;
+  //   left: 0;
+  //   width: 100%;
+  //   height: 100%;
+  //   background: rgba(8, 34, 74, 0.7);
+  //   z-index: 1;
+  // }
 
   .banner-content {
     position: relative;
     z-index: 2;
-    text-align: center;
-    max-width: 800px;
-    padding: 0 20px;
+    text-align: right;
+    max-width: 500px;
+    padding: 0 10%;
+    justify-content: right;
+    display: grid;
   }
 
   .banner-title {
-    font-size: 64px;
+    font-size: 56px;
     font-weight: bold;
     letter-spacing: 0.5rem;
-    margin-bottom: 20px;
+    // margin-bottom: 20px;
     color: #ffffff;
-    text-align: left;
+    text-align: right;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
   }
 
   .banner-description {
-    font-size: 22px;
+    font-size: 16px;
     line-height: 1.8;
-    margin-bottom: 40px;
-    margin-top: 70px;
+    margin: 40px 0px;
     text-align: left;
     color: rgba(255, 255, 255, 0.9);
   }