Página inicial Explorar Ajuda
Entrar
skyversation
/
qp_onemap_ui
8
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

时空门户及应用管理

mork 1 mês atrás
pai
0a9415734b
commit
0ea6df1836
14 arquivos alterados com 2109 adições e 92 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 1 1
      public/index.html
  2. BIN
      public/static/images/skmh-1.png
  3. BIN
      public/static/images/skmh-2.png
  4. BIN
      public/static/images/skmh-3.png
  5. 2 2
      src/components/AppVue/Footer.vue
  6. 2 2
      src/components/AppVue/Header.vue
  7. 2 5
      src/main.js
  8. 60 38
      src/router/index.js
  9. 258 44
      src/views/skmh/index.vue
  10. 107 0
      src/views/yygl/appCenter.vue
  11. 291 0
      src/views/yygl/index.vue
  12. 500 0
      src/views/yygl/manage/index.vue
  13. 493 0
      src/views/yygl/monitor/index.vue
  14. 393 0
      src/views/yygl/overview/index.vue

+ 1 - 1
public/index.html
Ver arquivo 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="">
 
+<html lang="" class="dark">
 
 
 <head>
 
   <meta charset="utf-8">

BIN
public/static/images/skmh-1.png
Ver arquivo


BIN
public/static/images/skmh-2.png
Ver arquivo


BIN
public/static/images/skmh-3.png
Ver arquivo


+ 2 - 2
src/components/AppVue/Footer.vue
Ver arquivo 

@@ -8,7 +8,7 @@ export default {};
 
 
 <style lang="less" scoped>
 
 .footer {
 
-  width: 1920px;
 
+  width: 100%;
 
   box-sizing: border-box;
 
   text-align: center;
 
   background: rgba(17, 16, 16, 1);
 
@@ -17,6 +17,6 @@ export default {};
 
   line-height: 50px;
 
   margin: 0 auto;
 
   position: absolute;
 
-  bottom: 90px;
 
+  bottom: 0px;
 
 }
 
 </style>

+ 2 - 2
src/components/AppVue/Header.vue
Ver arquivo 

@@ -51,13 +51,13 @@ export default {
 
           break;
 
         case 4:
 
           // this.$router.push("/function");
 
-          this.$router.push("/wgn/sksj");
 
+          this.$router.push("/skmh");
 
           break;
 
         case 5:
 
           this.$router.push("/wgn");
 
           break;
 
         case 6:
 
-          this.$router.push("/oamc");
 
+          this.$router.push("/yygl");
 
           break;
 
         case 7:
 
           this.$router.push("/yxgl");

+ 2 - 5
src/main.js
Ver arquivo 

@@ -6,16 +6,13 @@ import router from './router'
 
 initApp.use(router);
 
 import store from './store'
 
 initApp.use(store);
 
-
 
 import ElementPlus from 'element-plus'
 
 import zhCn from 'element-plus/es/locale/lang/zh-cn'
 
-
 
+import 'element-plus/dist/index.css' // 引入默认主题样式
 
+import 'element-plus/theme-chalk/dark/css-vars.css' // 引入暗色主题样式
 
 initApp.use(ElementPlus, {
 
     locale: zhCn,
 
 })
 
-import 'element-plus/dist/index.css'
 
-initApp.use(ElementPlus)
 
-
 
 // 如果您正在使用CDN引入，请删除下面一行。
 
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 import JsonViewer from 'vue-json-viewer'

+ 60 - 38
src/router/index.js
Ver arquivo 

@@ -27,6 +27,12 @@ const routes = [
 
           return import('../views/Wgn.vue')
 
         },
 
       },
 
+      {
 
+        path: 'skmh',
 
+        component: function () {
 
+          return import('../views/skmh/index.vue')
 
+        },
 
+      },
 
       {
 
         path: '/yxgl',
 
         name: 'yxgl',
 
@@ -42,38 +48,54 @@ const routes = [
 
           }
 
         ], // 子路由配置结束
 
       },
 
-    ],
 
-  },
 
-
 
-  /***************** 跳转单页面 ******************/
 
-  // 时空门户
 
-  {
 
-    path: '/skmh',
 
-    name: 'skmh',
 
-    component: function () {
 
-      return import('../views/skmh/index.vue')
 
-    },
 
-    children: [ // 子路由配置开始
 
+      //应用管理
 
       {
 
-        path: 'example',
 
+        path: '/yygl',
 
+        path: 'yygl',
 
         component: function () {
 
-          return import('../views/skmh/Example.vue')
 
+          return import('../views/yygl/index.vue')
 
         }
 
       },
 
+      //应用中心
 
       {
 
-        path: 'index',
 
+        path: 'appCenter',
 
+        path: 'appCenter',
 
         component: function () {
 
-          return import('../views/skmh/index.vue')
 
+          return import('../views/yygl/appCenter.vue')
 
         }
 
       },
 
-      {
 
-        path: 'scene',
 
-        component: function () {
 
-          return import('../views/skmh/scene/index.vue')
 
-        }
 
-      }
 
-    ], // 子路由配置结束
 
+    ],
 
   },
 
+
 
+  /***************** 跳转单页面 ******************/
 
+  // 时空门户
 
+  // {
 
+  //   path: '/skmh',
 
+  //   name: 'skmh',
 
+  //   component: function () {
 
+  //     return import('../views/skmh/index.vue')
 
+  //   },
 
+  //   children: [ // 子路由配置开始
 
+  //     {
 
+  //       path: 'example',
 
+  //       component: function () {
 
+  //         return import('../views/skmh/Example.vue')
 
+  //       }
 
+  //     },
 
+  //     {
 
+  //       path: 'index',
 
+  //       component: function () {
 
+  //         return import('../views/skmh/index.vue')
 
+  //       }
 
+  //     },
 
+  //     {
 
+  //       path: 'scene',
 
+  //       component: function () {
 
+  //         return import('../views/skmh/scene/index.vue')
 
+  //       }
 
+  //     }
 
+  //   ], // 子路由配置结束
 
+  // },
 
   // 微功能
 
   {
 
     path: '/wgnSingle',
 
@@ -83,21 +105,21 @@ const routes = [
 
     },
 
   },
 
   // 应用管理
 
-  {
 
-    path: '/yygl',
 
-    name: 'yygl',
 
-    component: function () {
 
-      return import('../views/Yygl.vue')
 
-    },
 
-    children: [ // 子路由配置开始
 
-      {
 
-        path: 'example',
 
-        component: function () {
 
-          return import('../views/yygl/Example.vue')
 
-        },
 
-      }
 
-    ], // 子路由配置结束
 
-  },
 
+  // {
 
+  //   path: '/yygl',
 
+  //   name: 'yygl',
 
+  //   component: function () {
 
+  //     return import('../views/Yygl.vue')
 
+  //   },
 
+  //   children: [ // 子路由配置开始
 
+  //     {
 
+  //       path: 'example',
 
+  //       component: function () {
 
+  //         return import('../views/yygl/Example.vue')
 
+  //       },
 
+  //     },
 
+  //   ], // 子路由配置结束
 
+  // },
 
   // 运行管理
 
   // {
 
   //   path: '/yxgl',

+ 258 - 44
src/views/skmh/index.vue
Ver arquivo 

@@ -1,28 +1,67 @@
 
 <template>
 
   <div class="dashboard-container">
 
     <!-- 顶部横幅 -->
 
-    <div class="banner">
 
+
 
+    <div class="server_title">
 
+      <el-image
 
+        style="width: 824px; height: 786px"
 
+        src="static/images/wgn_title.png"
 
+        fit="cover"
 
+      />
 
+      <div class="server_title_text">
 
+        <div class="server_title_text_title">时空门户</div>
 
+        <div class="server_title_text_content">
 
+          时空门户子系统为用户提供信息概览、导航入口及交互功能，帮助用户快速了解和使用平台服务。系统统计访问量（累计和日均）、用户使用时长及活跃时段；展示平台功能、核心能力及操作演示视频；统计并展示服务总数、分类占比及新上线服务；同时统计各委办平台的注册用户信息及用户总数。
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- <div class="banner">
 
       <div class="banner-content">
 
         <h1>时空门户</h1>
 
         <p>时空门户是一个集数据采集、分析、展示于一体的综合性平台，为用户提供全面的设备监控和数据分析服务</p>
 
         <button class="enter-btn">进入系统</button>
 
       </div>
 
-    </div>
 
+    </div> -->
 
 
     <!-- 平台数据统计 -->
 
     <div class="stats-section">
 
+      <div class="overview-header">
 
+        <h2>平台数据统计</h2>
 
+      </div>
 
       <div class="stats-grid">
 
         <div class="stat-card card-1">
 
+          <div class="stat-label">平台服务总数
 
+              <el-image
 
+              style="width: 20px; height: 20px"
 
+              src="static/images/skmh-1.png"
 
+              fit="cover"
 
+            />
 
+          </div>
 
           <div class="stat-number">1,248</div>
 
-          <div class="stat-label">在线设备数</div>
 
+          <div class="stat-label">较上月增长12.5%</div>
 
         </div>
 
         <div class="stat-card card-2">
 
+          <div class="stat-label">新上线服务统计
 
+            <el-image
 
+              style="width: 20px; height: 20px"
 
+              src="static/images/skmh-2.png"
 
+              fit="cover"
 
+            />
 
+          </div>
 
           <div class="stat-number">86</div>
 
-          <div class="stat-label">重大隐患统计</div>
 
+          <div class="stat-label">本月新增服务</div>
 
         </div>
 
         <div class="stat-card card-3">
 
+          <div class="stat-label">注册用户总数
 
+            <el-image
 
+              style="width: 20px; height: 20px"
 
+              src="static/images/skmh-3.png"
 
+              fit="cover"
 
+            />
 
+          </div>
 
           <div class="stat-number">24,586</div>
 
-          <div class="stat-label">隐患排查人员</div>
 
+          <div class="stat-label">本周新增12,34人</div>
 
         </div>
 
       </div>
 
     </div>
 
@@ -31,66 +70,109 @@
 
     <div class="data-overview">
 
       <div class="overview-header">
 
         <h2>数据概览</h2>
 
-        <div class="time-tabs">
 
+        <!-- <div class="time-tabs">
 
           <div class="tab active">今日</div>
 
           <div class="tab">本周</div>
 
           <div class="tab">本月</div>
 
           <div class="tab">本年</div>
 
+        </div> -->
 
+      </div>
 
+       <div class="time-section">
 
+        <div class="time-card">
 
+          <div class="time-content">
 
+            <div style="">
 
+              <el-date-picker
 
+                class="el-date-picker"
 
+                v-model="fromTime.date"
 
+                type="daterange"
 
+                range-separator="-"
 
+                start-placeholder="开始日期"
 
+                end-placeholder="结束日期"
 
+                format="YYYY-MM-DD"
 
+                 @change="changeTime"
 
+                
+              />
 
+            </div>
 
+            <div class="button-row">
 
+              <el-button type="primary" @click="handleType(7)">最近7天</el-button>
 
+              <el-button type="primary" @click="handleType(30)">最近30天</el-button>
 
+              <el-button type="primary" @click="handleType(90)">最近90天</el-button>
 
+              <el-button type="primary" @click="handleType(365)">最近1年</el-button>
 
+          </div>
 
+          </div>
 
         </div>
 
       </div>
 
       <div class="charts-grid">
 
-        <!-- 设备统计柱状图 -->
 
+        <!-- 访问量统计柱状图 -->
 
         <div class="chart-card">
 
-          <div class="chart-title">设备统计</div>
 
+          <div class="chart-title">访问量统计</div>
 
           <div ref="deviceChart" class="chart-container"></div>
 
         </div>
 
-        <!-- 设备状态分布饼图 -->
 
+        <!-- 服务分类占比饼图 -->
 
         <div class="chart-card">
 
-          <div class="chart-title">设备状态分布</div>
 
+          <div class="chart-title">服务分类占比</div>
 
           <div ref="statusChart" class="chart-container"></div>
 
         </div>
 
         <!-- 用户活跃度分析折线图 -->
 
-        <div class="chart-card">
 
+        <!-- <div class="chart-card">
 
           <div class="chart-title">用户活跃度分析</div>
 
           <div ref="activityChart" class="chart-container"></div>
 
-        </div>
 
+        </div> -->
 
         <!-- 数据量柱状图 -->
 
-        <div class="chart-card">
 
+        <!-- <div class="chart-card">
 
           <div class="chart-title">数据量</div>
 
           <div ref="dataVolumeChart" class="chart-container"></div>
 
-        </div>
 
+        </div> -->
 
       </div>
 
     </div>
 
 
     <!-- 设备综合分析比较 -->
 
     <div class="comparison-section">
 
       <div class="chart-card full-width">
 
-        <div class="chart-title">设备综合分析比较</div>
 
-        <div ref="comparisonChart" class="chart-container"></div>
 
+        <div class="chart-title">各委办平台用户分布</div>
 
+        <!-- <div ref="comparisonChart" class="chart-container"></div> -->
 
+        <el-table :data="tableData" style="width: 100%">
 
+          <el-table-column prop="name" label="委办单位" />
 
+          <el-table-column prop="number" label="注册用户数" />
 
+          <el-table-column prop="activity" label="活跃度" />
 
+          <el-table-column prop="server" label="服务使用量" />
 
+        </el-table>
 
       </div>
 
     </div>
 
 
     <!-- 功能演示 -->
 
     <div class="demo-section">
 
-      <h2>功能演示</h2>
 
+      <div class="overview-header">
 
+        <h2>功能演示</h2>
 
+      </div>
 
       <div class="demo-grid">
 
         <div class="demo-card">
 
           <div class="demo-thumbnail">
 
             <div class="play-btn">▶</div>
 
           </div>
 
-          <div class="demo-title">设备监控演示</div>
 
+          <div class="demo-title">
 
+            <div class="demo-label">核心功能操作演示</div>
 
+            <div class="demo-text">展示系统核心功能操作流程与交互方式</div>
 
+          </div>
 
         </div>
 
         <div class="demo-card">
 
           <div class="demo-thumbnail">
 
             <div class="play-btn">▶</div>
 
           </div>
 
-          <div class="demo-title">数据分析演示</div>
 
+          <div class="demo-title">
 
+            <div class="demo-label">二三维一体化引擎</div>
 
+            <div class="demo-text">展示空间数据可视化与交互分析能力</div>
 
+          </div>
 
         </div>
 
         <div class="demo-card">
 
           <div class="demo-thumbnail">
 
             <div class="play-btn">▶</div>
 
           </div>
 
-          <div class="demo-title">隐患排查演示</div>
 
+          <div class="demo-title">
 
+            <div class="demo-label">实际业务场景应用</div>
 
+            <div class="demo-text">展示系统在行业中的实际应用案例</div>
 
+          </div>
 
+          
         </div>
 
       </div>
 
     </div>
 
@@ -108,7 +190,36 @@ export default {
 
       statusChart: null,
 
       activityChart: null,
 
       dataVolumeChart: null,
 
-      comparisonChart: null
 
+      comparisonChart: null,
 
+      fromTime:{
 
+        date:[new Date(),new Date()]
 
+      },
 
+      tableData:[
 
+        {
 
+          number: '1234',
 
+          name: 'tom',
 
+          activity:'87',
 
+          server: '2324',
 
+        },
 
+        {
 
+          number: '1234',
 
+          name: 'canver',
 
+          activity:'78',
 
+          server: '2324',
 
+        },
 
+        {
 
+          number: '1234',
 
+          name: 'lina',
 
+          activity:'88',
 
+          server: '2324',
 
+        },
 
+        {
 
+          number: '1234',
 
+          name: 'wang',
 
+          activity:'86',
 
+          server: '2324',
 
+        },
 
+      ]
 
     }
 
   },
 
   mounted() {
 
@@ -123,22 +234,44 @@ export default {
 
     initCharts() {
 
       this.initDeviceChart()
 
       this.initStatusChart()
 
-      this.initActivityChart()
 
-      this.initDataVolumeChart()
 
-      this.initComparisonChart()
 
+      // this.initActivityChart()
 
+      // this.initDataVolumeChart()
 
+      // this.initComparisonChart()
 
+    },
 
+    handleType(param){
 
+      const end = new Date()
 
+      const start = new Date()
 
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * param) //天计算
 
+      end.setTime(end.getTime() - 3600 * 1000 * 24 * 1) //天计算
 
+      // start.setMonth(start.getMonth() - 6)
 
+      this.fromTime.date = [start,end]
 
+    },
 
+    changeTime(v){
 
+      debugger
 
+      console.log('[ eee ] >', v)
 
+      this.fromTime.date=v
 
+      
     },
 
     
     initDeviceChart() {
 
       this.deviceChart = echarts.init(this.$refs.deviceChart)
 
       const option = {
 
         tooltip: {
 
-          trigger: 'axis',
 
+          trigger: 'item',
 
           backgroundColor: 'rgba(0, 25, 50, 0.8)',
 
           borderColor: '#1E90FF',
 
           textStyle: {
 
             color: '#fff'
 
           }
 
         },
 
+        legend: {
 
+          orient: 'horizontal',
 
+          // bottom: 0,
 
+          top:0,
 
+          textStyle: {
 
+            color: '#a3b6c7'
 
+          }
 
+        },
 
         grid: {
 
           left: '3%',
 
           right: '4%',
 
@@ -210,7 +343,7 @@ export default {
 
         },
 
         series: [
 
           {
 
-            name: '设备状态',
 
+            name: '服务分类占比',
 
             type: 'pie',
 
             radius: ['40%', '70%'],
 
             avoidLabelOverlap: false,
 
@@ -235,10 +368,10 @@ export default {
 
               show: false
 
             },
 
             data: [
 
-              { value: 400, name: '正常', itemStyle: { color: '#52C41A' } },
 
-              { value: 300, name: '警告', itemStyle: { color: '#FAAD14' } },
 
-              { value: 200, name: '异常', itemStyle: { color: '#F5222D' } },
 
-              { value: 100, name: '离线', itemStyle: { color: '#8C8C8C' } }
 
+              { value: 400, name: '空间分析', itemStyle: { color: '#52C41A' } },
 
+              { value: 300, name: '数据查询', itemStyle: { color: '#FAAD14' } },
 
+              { value: 200, name: '三维可视化', itemStyle: { color: '#F5222D' } },
 
+              { value: 100, name: '路径规划', itemStyle: { color: '#8C8C8C' } }
 
             ]
 
           }
 
         ]
 
@@ -517,12 +650,45 @@ export default {
 
 </script>
 
 
 <style lang="less" scoped>
 
+
 
+/* 确保你的自定义样式优先级更高 */
 
+.el-date-picker {
 
+    /* 重置为期望的样式 */
 
+    color: initial !important; /* 使用 !important 来确保优先级 */
 
+    background-color: white !important; /* 确保背景色正确 */
 
+}
 
 .dashboard-container {
 
   background-color: #0A192F;
 
   min-height: 100vh;
 
   color: #fff;
 
 }
 
 
+.server_title {
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+}
 
+.server_title_text {
 
+  width: calc(100vw - 824px);
 
+  height: 786px;
 
+  background-color: #1c2631;
 
+  color: #fff;
 
+  padding: 0 160px 0 60px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  justify-content: center;
 
+  overflow: hidden;
 
+  &_title {
 
+    font-size: 64px;
 
+    font-weight: bold;
 
+    letter-spacing: 0.5rem;
 
+  }
 
+  &_content {
 
+    margin-top: 77px;
 
+    font-size: 22px;
 
+  }
 
+}
 
+
 
 /* 顶部横幅 */
 
 .banner {
 
   position: relative;
 
@@ -585,6 +751,18 @@ export default {
 
 /* 平台数据统计 */
 
 .stats-section {
 
   padding: 40px 20px;
 
+  .overview-header {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    margin-bottom: 30px;
 
+    
+    h2 {
 
+      font-size: 24px;
 
+      color: #fff;
 
+      margin: 0;
 
+    }
 
+  }
 
   
   .stats-grid {
 
     display: flex;
 
@@ -593,14 +771,14 @@ export default {
 
     flex-wrap: wrap;
 
     
     .stat-card {
 
-      width: 300px;
 
+      width: 555px;
 
       height: 150px;
 
       border-radius: 12px;
 
       padding: 20px;
 
       display: flex;
 
       flex-direction: column;
 
       justify-content: center;
 
-      align-items: center;
 
+      align-items: flex-start;
 
       box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
       transition: transform 0.3s ease;
 
       
@@ -611,6 +789,7 @@ export default {
 
       .stat-number {
 
         font-size: 36px;
 
         font-weight: bold;
 
+        margin-top: 10px;
 
         margin-bottom: 10px;
 
         color: #fff;
 
       }
 
@@ -618,19 +797,22 @@ export default {
 
       .stat-label {
 
         font-size: 16px;
 
         color: rgba(255, 255, 255, 0.8);
 
+        width: 100%;
 
+        justify-content: space-between;
 
+        display: flex;
 
       }
 
     }
 
     
     .card-1 {
 
-      background: linear-gradient(135deg, #1E90FF 0%, #00BFFF 100%);
 
+      background: linear-gradient(135deg, #3B82F6 0%, #4F46E5 100%);
 
     }
 
     
     .card-2 {
 
-      background: linear-gradient(135deg, #52C41A 0%, #95DE64 100%);
 
+      background: linear-gradient(135deg, #22C55E 0%, #059669 100%);
 
     }
 
     
     .card-3 {
 
-      background: linear-gradient(135deg, #9370DB 0%, #BA55D3 100%);
 
+      background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
 
     }
 
   }
 
 }
 
@@ -689,7 +871,7 @@ export default {
 
         font-size: 18px;
 
         color: #fff;
 
         margin-bottom: 20px;
 
-        text-align: center;
 
+        text-align: left;
 
       }
 
       
       .chart-container {
 
@@ -699,6 +881,22 @@ export default {
 
     }
 
   }
 
 }
 
+// 时间筛选
 
+.time-section{
 
+  padding: 0 0px 40px;
 
+  .time-card {
 
+    background-color: rgba(30, 41, 59, 0.6);
 
+    border-radius: 12px;
 
+    padding: 20px;
 
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
 
+  }
 
+  .time-content{
 
+    display: flex;
 
+    justify-content: space-between;
 
+    width: 100%;
 
+  }
 
+}
 
+
 
 
 /* 设备综合分析比较 */
 
 .comparison-section {
 
@@ -718,7 +916,7 @@ export default {
 
       font-size: 18px;
 
       color: #fff;
 
       margin-bottom: 20px;
 
-      text-align: center;
 
+      text-align: left;
 
     }
 
     
     .chart-container {
 
@@ -730,18 +928,24 @@ export default {
 
 
 /* 功能演示 */
 
 .demo-section {
 
-  padding: 0 20px 40px;
 
+  padding: 0 20px 100px;
 
   
-  h2 {
 
-    font-size: 24px;
 
-    color: #fff;
 
+ .overview-header {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
     margin-bottom: 30px;
 
-    text-align: center;
 
+    
+    h2 {
 
+      font-size: 24px;
 
+      color: #fff;
 
+      margin: 0;
 
+    }
 
   }
 
   
   .demo-grid {
 
     display: flex;
 
-    justify-content: center;
 
+    justify-content: space-between;
 
     gap: 30px;
 
     flex-wrap: wrap;
 
     
@@ -787,9 +991,19 @@ export default {
 
       
       .demo-title {
 
         padding: 15px;
 
+        color: #fff;
 
+        text-align: left;
 
+      }
 
+      .demo-label {
 
         font-size: 16px;
 
         color: #fff;
 
-        text-align: center;
 
+        padding-bottom: 10px;
 
+        text-align: left;
 
+      }
 
+      .demo-text {
 
+        font-size: 12px;
 
+        color: #fff;
 
+        text-align: left;
 
       }
 
     }
 
   }

+ 107 - 0
src/views/yygl/appCenter.vue
Ver arquivo 

@@ -0,0 +1,107 @@
 
+<template>
 
+  <div class="app-center">
 
+    <!-- 左侧导航栏 -->
 
+    <div class="sidebar">
 
+      <div class="sidebar-menu">
 
+        <div class="menu-item" :class="{'active': menuValue === 1}" @click="handleMenuClick(1)">
 
+          <el-icon><Menu /></el-icon>
 
+          <span>应用概览</span>
 
+        </div>
 
+        <div class="menu-item" :class="{'active': menuValue === 2}" @click="handleMenuClick(2)">
 
+          <el-icon><Grid /></el-icon>
 
+          <span>应用管理</span>
 
+        </div>
 
+        <div class="menu-item" :class="{'active': menuValue === 3}" @click="handleMenuClick(3)">
 
+          <el-icon><Monitor /></el-icon>
 
+          <span>应用监测</span>
 
+        </div>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 右侧主内容区 -->
 
+    <div class="main-content">
 
+        <AppOverview v-if="menuValue === 1" />
 
+        <AppManagement v-if="menuValue === 2" />
 
+        <AppMonitoring v-if="menuValue === 3" />
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import AppOverview from "@/views/yygl/overview/index.vue";
 
+import AppManagement from "@/views/yygl/manage/index.vue";
 
+import AppMonitoring from "@/views/yygl/monitor/index.vue";
 
+export default {
 
+  name: "AppCenter",
 
+  components: {
 
+    AppOverview,
 
+    AppManagement,
 
+    AppMonitoring,
 
+  },
 
+  data() {
 
+    return {
 
+        menuValue:1
 
+    }
 
+  },
 
+  methods: {
 
+    handleMenuClick(value) {
 
+      this.menuValue = value;
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.app-center {
 
+  display: flex;
 
+  width: 100%;
 
+//   min-height: 100vh;
 
+  height: calc(100% - 50px);
 
+  background-color: #08224a;
 
+  color: #ffffff;
 
+}
 
+
 
+/* 左侧导航栏样式 */
 
+.sidebar {
 
+  width: 200px;
 
+  background-color: #0a2a5a;
 
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
 
+  
+  .sidebar-menu {
 
+    padding: 20px 0;
 
+    
+    .menu-item {
 
+      display: flex;
 
+      align-items: center;
 
+      padding: 15px 20px;
 
+      cursor: pointer;
 
+      transition: all 0.3s ease;
 
+      color: rgba(255, 255, 255, 0.8);
 
+      
+      i {
 
+        margin-right: 12px;
 
+        font-size: 18px;
 
+      }
 
+      
+      &:hover {
 
+        background-color: rgba(24, 144, 255, 0.2);
 
+        color: #ffffff;
 
+      }
 
+      
+      &.active {
 
+        background-color: rgba(24, 144, 255, 0.3);
 
+        color: #ffffff;
 
+        border-right: 3px solid #1890ff;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/* 右侧主内容区 */
 
+.main-content {
 
+  flex: 1;
 
+  padding: 20px 30px;
 
+  overflow-y: auto;
 
+}
 
+
 
+</style>

+ 291 - 0
src/views/yygl/index.vue
Ver arquivo 

@@ -0,0 +1,291 @@
 
+<template>
 
+  <div class="application-center">
 
+    <!-- 顶部横幅区域 -->
 
+    <div class="banner">
 
+      <div class="banner-content">
 
+        <h1 class="banner-title">应用中心</h1>
 
+        <p class="banner-description">
 
+          收集、管理区级应用的访问地址、使用单位、使用情况等。
 
+          区委办局、街镇、居村应基于区级节点开展区级时空应用建设。
 
+        </p>
 
+        <el-button type="primary" class="enter-button" @click="handleEnterClick">点击进入</el-button>
 
+      </div>
 
+    </div>
 
+
 
+    <!-- 示范应用区域 -->
 
+    <div class="demo-applications">
 
+      <div class="section-title">
 
+        <h2>示范应用</h2>
 
+        <div class="title-line"></div>
 
+      </div>
 
+
 
+      <div class="applications-grid">
 
+        <!-- 应用卡片1 -->
 
+        <div class="application-card">
 
+          <div class="card-image">
 
+            <img src="~@/assets/images/common/app-bg-1.png" alt="青浦区环境自动监测信息化平台" />
 
+          </div>
 
+          <h3 class="card-title">青浦区环境自动监测信息化平台</h3>
 
+          <div class="card-info">
 
+            <p><strong>访问类型：</strong>公开</p>
 
+            <p><strong>建设单位：</strong>青浦区环境局</p>
 
+            <p><strong>建设时间：</strong>2024.10.25</p>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 应用卡片2 -->
 
+        <div class="application-card">
 
+          <div class="card-image">
 
+            <img src="~@/assets/images/common/app-bg-2.png" alt="青浦区燃气行业监管平台" />
 
+          </div>
 
+          <h3 class="card-title">青浦区燃气行业监管平台</h3>
 
+          <div class="card-info">
 
+            <p><strong>访问类型：</strong>公开</p>
 
+            <p><strong>建设单位：</strong>青浦区环境局</p>
 
+            <p><strong>建设时间：</strong>2024.10.25</p>
 
+          </div>
 
+        </div>
 
+
 
+      </div>
 
+       <div class="applications-grid">
 
+        <!-- 应用卡片3 -->
 
+            <div class="application-card">
 
+            <div class="card-image">
 
+                <img src="~@/assets/images/common/app-bg-3.png" alt="青浦区环境自动监测信息化平台" />
 
+            </div>
 
+            <h3 class="card-title">青浦区环境自动监测信息化平台</h3>
 
+            <div class="card-info">
 
+                <p><strong>访问类型：</strong>公开</p>
 
+                <p><strong>建设单位：</strong>青浦区环境局</p>
 
+                <p><strong>建设时间：</strong>2024.10.25</p>
 
+            </div>
 
+            </div>
 
+
 
+            <!-- 应用卡片4 -->
 
+            <div class="application-card">
 
+            <div class="card-image">
 
+                <img src="~@/assets/images/common/app-bg-4.png" alt="青浦区消防救援支队一网统管平台" />
 
+            </div>
 
+            <h3 class="card-title">青浦区消防救援支队一网统管平台</h3>
 
+            <div class="card-info">
 
+                <p><strong>访问类型：</strong>公开</p>
 
+                <p><strong>建设单位：</strong>青浦区环境局</p>
 
+                <p><strong>建设时间：</strong>2024.10.25</p>
 
+            </div>
 
+            </div>
 
+       </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "ApplicationCenter",
 
+  data() {
 
+    return {}
 
+  },
 
+  methods: {
 
+    handleEnterClick() {
 
+      this.$router.push('appCenter');
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.application-center {
 
+  width: 100%;
 
+  min-height: 100vh;
 
+  background-color: #08224a;
 
+  color: #ffffff;
 
+  overflow-x: hidden;
 
+}
 
+
 
+/* 顶部横幅样式 */
 
+.banner {
 
+  width: 100%;
 
+  height: 786px;
 
+  background: url(~@/assets/images/common/u720.png) no-repeat center center;
 
+  background-size: cover;
 
+  display: flex;
 
+  justify-content: center;
 
+  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;
 
+  }
 
+
 
+  .banner-content {
 
+    position: relative;
 
+    z-index: 2;
 
+    text-align: center;
 
+    max-width: 800px;
 
+    padding: 0 20px;
 
+  }
 
+
 
+  .banner-title {
 
+    font-size: 64px;
 
+    font-weight: bold;
 
+    letter-spacing: 0.5rem;
 
+    margin-bottom: 20px;
 
+    color: #ffffff;
 
+    text-align: left;
 
+    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
 
+  }
 
+
 
+  .banner-description {
 
+    font-size: 22px;
 
+    line-height: 1.8;
 
+    margin-bottom: 40px;
 
+    margin-top: 70px;
 
+    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);
 
+    }
 
+  }
 
+}
 
+
 
+/* 示范应用区域样式 */
 
+.demo-applications {
 
+  padding: 60px 20px;
 
+  max-width: 1400px;
 
+  margin: 0 auto;
 
+
 
+  .section-title {
 
+    text-align: center;
 
+    margin-bottom: 60px;
 
+
 
+    h2 {
 
+      font-size: 36px;
 
+      font-weight: bold;
 
+      margin-bottom: 15px;
 
+      color: #ffffff;
 
+    }
 
+
 
+    .title-line {
 
+      width: 80px;
 
+      height: 3px;
 
+      background-color: #1890ff;
 
+      margin: 0 auto;
 
+    }
 
+  }
 
+
 
+  .applications-grid {
 
+    display: grid;
 
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 
+    gap: 30px;
 
+    margin: 60px 0 60px 0px;
 
+    .application-card {
 
+      background: rgba(24, 144, 255, 0.1);
 
+      border: 1px solid rgba(24, 144, 255, 0.3);
 
+      border-radius: 8px;
 
+      overflow: hidden;
 
+      transition: all 0.3s ease;
 
+
 
+      &:hover {
 
+        transform: translateY(-5px);
 
+        box-shadow: 0 10px 30px rgba(24, 144, 255, 0.3);
 
+        border-color: rgba(24, 144, 255, 0.6);
 
+      }
 
+
 
+      .card-image {
 
+        width: 100%;
 
+        height: 200px;
 
+        overflow: hidden;
 
+
 
+        img {
 
+          width: 100%;
 
+          height: 100%;
 
+          object-fit: cover;
 
+          transition: transform 0.3s ease;
 
+        }
 
+
 
+        &:hover img {
 
+          transform: scale(1.05);
 
+        }
 
+      }
 
+
 
+      .card-title {
 
+        font-size: 18px;
 
+        font-weight: bold;
 
+        padding: 20px 20px 15px;
 
+        margin: 0;
 
+        color: #ffffff;
 
+        border-bottom: 1px solid rgba(24, 144, 255, 0.3);
 
+      }
 
+
 
+      .card-info {
 
+        padding: 15px 20px 20px;
 
+        font-size: 14px;
 
+        // color: rgba(255, 255, 255, 0.8);
 
+        color: #ffffff;
 
+
 
+        p {
 
+          margin: 8px 0;
 
+          line-height: 1.6;
 
+
 
+          strong {
 
+            // color: rgba(24, 144, 255, 0.9);
 
+            color: #ffffff;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/* 响应式设计 */
 
+@media (max-width: 768px) {
 
+  .banner {
 
+    height: 400px;
 
+
 
+    .banner-title {
 
+      font-size: 36px;
 
+    }
 
+
 
+    .banner-description {
 
+      font-size: 14px;
 
+    }
 
+
 
+    .enter-button {
 
+      padding: 10px 28px;
 
+      font-size: 16px;
 
+    }
 
+  }
 
+
 
+  .demo-applications {
 
+    padding: 40px 15px;
 
+
 
+    .section-title h2 {
 
+      font-size: 28px;
 
+    }
 
+
 
+    .applications-grid {
 
+      grid-template-columns: 1fr;
 
+      gap: 20px;
 
+    }
 
+  }
 
+}
 
+</style>

+ 500 - 0
src/views/yygl/manage/index.vue
Ver arquivo 

@@ -0,0 +1,500 @@
 
+<template>
 
+  <div class="application-management">
 
+    <!-- 右侧主内容区 -->
 
+    <div class="main-content">
 
+      <!-- 过滤条件区域 -->
 
+      <div class="filter-section">
 
+        <!-- 应用范围过滤 -->
 
+        <div class="filter-group">
 
+          <span class="filter-title">应用范围：</span>
 
+          <el-radio-group v-model="scopeFilter" size="small">
 
+            <el-radio-button label="all">全部</el-radio-button>
 
+            <el-radio-button label="district">区级</el-radio-button>
 
+            <el-radio-button label="street">街道</el-radio-button>
 
+            <el-radio-button label="community">社区</el-radio-button>
 
+          </el-radio-group>
 
+        </div>
 
+
 
+        <!-- 应用状态过滤 -->
 
+        <div class="filter-group">
 
+          <span class="filter-title">应用状态：</span>
 
+          <el-radio-group v-model="statusFilter" size="small">
 
+            <el-radio-button label="all">全部</el-radio-button>
 
+            <el-radio-button label="online">在等</el-radio-button>
 
+            <el-radio-button label="offline">在建</el-radio-button>
 
+            <el-radio-button label="suspended">在维</el-radio-button>
 
+            <el-radio-button label="expired">停用</el-radio-button>
 
+          </el-radio-group>
 
+        </div>
 
+
 
+        <!-- 应用标签过滤 -->
 
+        <div class="filter-group">
 
+          <span class="filter-title">应用标签：</span>
 
+          <el-radio-group v-model="tagFilter" size="small">
 
+            <el-radio-button label="all">全部</el-radio-button>
 
+            <el-radio-button label="special">特色应用</el-radio-button>
 
+            <el-radio-button label="code">代码平台</el-radio-button>
 
+            <el-radio-button label="government">仅供演示</el-radio-button>
 
+            <el-radio-button label="demo">示范应用</el-radio-button>
 
+            <el-radio-button label="water">水务</el-radio-button>
 
+            <el-radio-button label="test">测试</el-radio-button>
 
+          </el-radio-group>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 搜索栏区域 -->
 
+      <div class="search-section">
 
+        <el-input 
+          placeholder="请输入应用名称模块相关关键字" 
+          v-model="searchKeyword" 
+          class="search-input" 
+          clearable
 
+        >
 
+          <template #prepend><el-icon><search /></el-icon></template>
 
+        </el-input>
 
+        <el-button type="primary" class="search-btn">搜索</el-button>
 
+        <el-button class="reset-btn">重置</el-button>
 
+        <el-button type="success" class="add-btn">+ 应用介入</el-button>
 
+      </div>
 
+
 
+      <!-- 应用列表区域 -->
 
+      <div class="applications-section">
 
+        <div class="section-header">
 
+          <span class="total-count">共检索43个应用</span>
 
+          <div class="sort-control">
 
+            <span>排序：</span>
 
+            <el-select v-model="sortBy" size="small" style="width: 120px;">
 
+              <el-option label="上架时间" value="publishTime"></el-option>
 
+              <el-option label="下架时间" value="romveTime"></el-option>
 
+            </el-select>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 应用列表 -->
 
+        <div class="applications-list">
 
+          <div class="application-item" v-for="(app, index) in applications" :key="index">
 
+            <div class="app-info">
 
+              <div class="app-logo">
 
+                <img :src="app.logo" :alt="app.name" />
 
+              </div>
 
+              <div class="app-details">
 
+                <div class="app-header">
 
+                  <h3 class="app-name">{{ app.name }}</h3>
 
+                  <span class="app-version">{{ app.version }}</span>
 
+                </div>
 
+                <div class="app-tags">
 
+                  <el-tag size="small" type="primary" v-if="app.isPublic">区属应用</el-tag>
 
+                  <el-tag size="small" v-if="app.tag">{{ app.tag }}</el-tag>
 
+                </div>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="app-metrics">
 
+              <div class="metric-item">
 
+                <span class="metric-label">应用范围</span>
 
+                <span class="metric-value">{{ app.buff }}</span>
 
+              </div>
 
+              <div class="metric-item">
 
+                <span class="metric-label">状态</span>
 
+                <span class="metric-value" :class="`status-${app.status}`">{{ app.statusText }}</span>
 
+              </div>
 
+              <div class="metric-item">
 
+                <span class="metric-label">使用单位</span>
 
+                <span class="metric-value">{{ app.usingUnit }}</span>
 
+              </div>
 
+              <div class="metric-item">
 
+                <span class="metric-label">访问量</span>
 
+                <span class="metric-value">{{ app.visitCount }}</span>
 
+              </div>
 
+              <div class="metric-item">
 
+                <span class="metric-label">上架时间</span>
 
+                <span class="metric-value">{{ app.createDate }}</span>
 
+              </div>
 
+            </div>
 
+
 
+            <div class="app-actions">
 
+              <!-- <span class="app-date">{{ app.createDate }}</span> -->
 
+              <el-button type="primary" size="small" class="detail-btn">查看详情</el-button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 分页控件 -->
 
+        <div class="pagination-section">
 
+          <span class="total-text">共43个应用</span>
 
+          <el-pagination
 
+            layout="prev, pager, next, jumper, total"
 
+            :total="43"
 
+            :current-page="currentPage"
 
+            :page-size="10"
 
+            @current-change="handleCurrentChange"
 
+          >
 
+          </el-pagination>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "ApplicationManagement",
 
+  data() {
 
+    return {
 
+      // 过滤条件
 
+      scopeFilter: 'all',
 
+      statusFilter: 'all',
 
+      tagFilter: 'all',
 
+      searchKeyword: '',
 
+      
+      // 排序条件
 
+      sortBy: 'publishTime',
 
+      
+      // 分页信息
 
+      currentPage: 1,
 
+      
+      // 应用列表数据
 
+      applications: [
 
+        {
 
+          logo: require('@/assets/images/common/app-bg-1.png'),
 
+          name: '水系统综合管理',
 
+          version: 'v1.0',
 
+          isPublic: true,
 
+          tag: '水务',
 
+          buff: '市级',
 
+          status: 'offline',
 
+          statusText: '在维',
 
+          usingUnit: '暂无',
 
+          visitCount: 64,
 
+          createDate: '2025-10-29 16:10:17'
 
+        },
 
+        {
 
+          logo: require('@/assets/images/common/app-bg-2.png'),
 
+          name: '虹口区历史脉管理系统开发',
 
+          version: 'v1.0',
 
+          isPublic: true,
 
+          tag: '',
 
+          buff: '区级',
 
+          status: 'online',
 
+          statusText: '在线',
 
+          usingUnit: '虹口区文旅局',
 
+          visitCount: 8,
 
+          createDate: '2025-09-15 18:02:32'
 
+        },
 
+        {
 
+          logo: require('@/assets/images/common/app-bg-3.png'),
 
+          name: '虹口区智慧环卫监管平台',
 
+          version: 'v1.0',
 
+          isPublic: true,
 
+          tag: '',
 
+          buff: '街道',
 
+          status: 'offline',
 
+          statusText: '在维',
 
+          usingUnit: '虹口区城管局',
 
+          visitCount: 14,
 
+          createDate: '2025-09-15 18:01:57'
 
+        },
 
+        {
 
+          logo: require('@/assets/images/common/app-bg-4.png'),
 
+          name: '上海市虹口区一网统管平台',
 
+          version: 'v1.0',
 
+          isPublic: true,
 
+          tag: '',
 
+          buff: '街道',
 
+          status: 'online',
 
+          statusText: '在线',
 
+          usingUnit: '虹口区政府办',
 
+          visitCount: 15,
 
+          createDate: '2025-09-15 18:01:09'
 
+        },
 
+        {
 
+          logo: require('@/assets/images/common/u661.png'),
 
+          name: '上海公共交通服务保障',
 
+          version: 'v1.0',
 
+          isPublic: true,
 
+          tag: '',
 
+          buff: '社区',
 
+          status: 'offline',
 
+          statusText: '在维',
 
+          usingUnit: '虹口区体育局',
 
+          visitCount: 13,
 
+          createDate: '2025-09-15 18:00:22'
 
+        }
 
+      ]
 
+    }
 
+  },
 
+  methods: {
 
+    // 处理分页变化
 
+    handleCurrentChange(page) {
 
+      this.currentPage = page;
 
+      // 这里可以添加分页数据加载逻辑
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.application-management {
 
+  width: 100%;
 
+  background-color: #08224a;
 
+  color: #ffffff;
 
+}
 
+
 
+/* 右侧主内容区 */
 
+.main-content {
 
+  padding: 20px 30px;
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 过滤条件区域 */
 
+.filter-section {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  gap: 20px;
 
+  margin-bottom: 20px;
 
+  padding-bottom: 15px;
 
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
+}
 
+
 
+.filter-group {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+}
 
+
 
+.filter-title {
 
+  font-size: 14px;
 
+  color: rgba(255, 255, 255, 0.8);
 
+}
 
+
 
+/* 搜索栏区域 */
 
+.search-section {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+  margin-bottom: 25px;
 
+}
 
+
 
+.search-input {
 
+  width: 400px;
 
+  margin-right: 10px;
 
+}
 
+
 
+.search-btn, .reset-btn, .add-btn {
 
+  padding: 8px 16px;
 
+  font-size: 14px;
 
+}
 
+
 
+/* 应用列表区域 */
 
+.applications-section {
 
+  background-color: rgba(255, 255, 255, 0.05);
 
+  border-radius: 8px;
 
+  padding: 20px;
 
+}
 
+
 
+.section-header {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.total-count {
 
+  font-size: 14px;
 
+  color: rgba(255, 255, 255, 0.8);
 
+}
 
+
 
+.sort-control {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 5px;
 
+  font-size: 14px;
 
+  color: rgba(255, 255, 255, 0.8);
 
+}
 
+
 
+/* 应用列表 */
 
+.applications-list {
 
+  margin-bottom: 20px;
 
+}
 
+
 
+.application-item {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  padding: 15px;
 
+  margin-bottom: 10px;
 
+  background-color: rgba(255, 255, 255, 0.05);
 
+  border: 1px solid rgba(255, 255, 255, 0.1);
 
+  border-radius: 6px;
 
+  transition: all 0.3s ease;
 
+  
+  &:hover {
 
+    border-color: rgba(24, 144, 255, 0.4);
 
+    background-color: rgba(24, 144, 255, 0.05);
 
+  }
 
+}
 
+
 
+.app-info {
 
+  display: flex;
 
+  align-items: center;
 
+  // flex: 1;
 
+  width: 500px;
 
+  gap: 15px;
 
+}
 
+
 
+.app-logo {
 
+  width: 60px;
 
+  height: 60px;
 
+  border-radius: 6px;
 
+  overflow: hidden;
 
+  
+  img {
 
+    width: 100%;
 
+    height: 100%;
 
+    object-fit: cover;
 
+  }
 
+}
 
+
 
+.app-details {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 5px;
 
+}
 
+
 
+.app-header {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+}
 
+
 
+.app-name {
 
+  font-size: 16px;
 
+  font-weight: bold;
 
+  margin: 0;
 
+  color: #ffffff;
 
+}
 
+
 
+.app-version {
 
+  font-size: 12px;
 
+  color: rgba(255, 255, 255, 0.6);
 
+  background-color: rgba(255, 255, 255, 0.1);
 
+  padding: 2px 6px;
 
+  border-radius: 4px;
 
+}
 
+
 
+.app-tags {
 
+  display: flex;
 
+  gap: 5px;
 
+}
 
+
 
+/* 应用指标 */
 
+.app-metrics {
 
+  display: flex;
 
+  gap: 40px;
 
+  flex: 1;
 
+  justify-content: space-around;
 
+}
 
+
 
+.metric-item {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  gap: 3px;
 
+}
 
+
 
+.metric-label {
 
+  font-size: 12px;
 
+  color: rgba(255, 255, 255, 0.6);
 
+}
 
+
 
+.metric-value {
 
+  font-size: 14px;
 
+  font-weight: bold;
 
+  color: #ffffff;
 
+}
 
+
 
+.status-online {
 
+  color: #67c23a;
 
+}
 
+
 
+.status-offline {
 
+  color: #e6a23c;
 
+}
 
+
 
+.status-suspended {
 
+  color: #909399;
 
+}
 
+
 
+.status-expired {
 
+  color: #f56c6c;
 
+}
 
+
 
+/* 应用操作 */
 
+.app-actions {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 20px;
 
+}
 
+
 
+.app-date {
 
+  font-size: 12px;
 
+  color: rgba(255, 255, 255, 0.6);
 
+}
 
+
 
+.detail-btn {
 
+  padding: 4px 12px;
 
+  font-size: 12px;
 
+}
 
+
 
+/* 分页控件 */
 
+.pagination-section {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  padding-top: 15px;
 
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
 
+}
 
+
 
+.total-text {
 
+  font-size: 14px;
 
+  color: rgba(255, 255, 255, 0.8);
 
+}
 
+
 
+/* 响应式设计 */
 
+@media (max-width: 1200px) {
 
+  .app-metrics {
 
+    gap: 20px;
 
+  }
 
+}
 
+
 
+@media (max-width: 992px) {
 
+  .main-content {
 
+    padding: 15px 20px;
 
+  }
 
+  
+  .filter-section {
 
+    flex-direction: column;
 
+    align-items: flex-start;
 
+  }
 
+  
+  .search-input {
 
+    width: 300px;
 
+  }
 
+  
+  .application-item {
 
+    flex-direction: column;
 
+    align-items: flex-start;
 
+    gap: 15px;
 
+  }
 
+  
+  .app-metrics {
 
+    width: 100%;
 
+    justify-content: space-around;
 
+  }
 
+  
+  .app-actions {
 
+    width: 100%;
 
+    justify-content: space-between;
 
+  }
 
+}
 
+</style>

+ 493 - 0
src/views/yygl/monitor/index.vue
Ver arquivo 

@@ -0,0 +1,493 @@
 
+<template>
 
+  <div class="application-monitor">
 
+    <!-- 右侧主内容区 -->
 
+    <div class="main-content">
 
+      <!-- 应用统计卡片 -->
 
+      <div class="stats-cards">
 
+        <div class="stat-card">
 
+          <div class="stat-icon approved">
 
+            <el-icon><CircleCheckFilled /></el-icon>
 
+          </div>
 
+          <div class="stat-content">
 
+            <div class="stat-label">已审批应用</div>
 
+            <div class="stat-number">490个</div>
 
+          </div>
 
+        </div>
 
+        <div class="stat-card">
 
+          <div class="stat-icon pending">
 
+            <el-icon><Clock /></el-icon>
 
+          </div>
 
+          <div class="stat-content">
 
+            <div class="stat-label">待上架应用</div>
 
+            <div class="stat-number">168个</div>
 
+          </div>
 
+        </div>
 
+        <div class="stat-card">
 
+          <div class="stat-icon online">
 
+            <el-icon><UploadFilled /></el-icon>
 
+          </div>
 
+          <div class="stat-content">
 
+            <div class="stat-label">已上架应用</div>
 
+            <div class="stat-number">43个</div>
 
+          </div>
 
+        </div>
 
+        <div class="stat-card">
 
+          <div class="stat-icon offline">
 
+            <el-icon><DeleteFilled /></el-icon>
 
+          </div>
 
+          <div class="stat-content">
 
+            <div class="stat-label">已下架应用</div>
 
+            <div class="stat-number">20个</div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 内容模块 -->
 
+      <div class="content-modules">
 
+        <!-- 应用状态分布 -->
 
+        <div class="module">
 
+          <div class="module-header">
 
+            <h3 class="module-title">应用状态分布</h3>
 
+          </div>
 
+          <div class="module-content">
 
+            <div ref="statusChart" class="chart-container"></div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 快捷应用 -->
 
+        <div class="module">
 
+          <div class="module-header">
 
+            <h3 class="module-title">快捷应用</h3>
 
+            <a href="#" class="module-more">更多</a>
 
+          </div>
 
+          <div class="module-content">
 
+            <div class="quick-app" v-for="(app, index) in quickApps" :key="index">
 
+              <div class="app-item">
 
+                <span class="app-icon" :style="{ backgroundColor: getAppColor(app.type) }"><el-icon><Promotion /></el-icon></span>
 
+                <span class="app-name">{{ app.name }}</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 应用上新 -->
 
+        <div class="module">
 
+          <div class="module-header">
 
+            <h3 class="module-title">应用上新</h3>
 
+            <a href="#" class="module-more">更多</a>
 
+          </div>
 
+          <div class="module-content">
 
+            <div class="new-app" v-for="(app, index) in newApps" :key="index">
 
+              <div class="app-info">
 
+                <span class="app-name">{{ app.name }}</span>
 
+                <span class="app-date">{{ app.date }}</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+
 
+        <!-- 应用热度排行TOP5 -->
 
+        <div class="module">
 
+          <div class="module-header">
 
+            <h3 class="module-title">应用热度排行TOP5</h3>
 
+            <a href="#" class="module-more">更多</a>
 
+          </div>
 
+          <div class="module-content">
 
+            <div class="hot-app" v-for="(app, index) in hotApps" :key="index">
 
+              <div class="app-rank">
 
+                <span class="rank-number">{{ index + 1 }}</span>
 
+                <span class="app-name">{{ app.name }}</span>
 
+              </div>
 
+              <div class="app-stats">
 
+                <!-- <div class="stat-bar" :style="{ width: app.percentage + '%' }"></div> -->
 
+                 <div style="width: 100%;">
 
+                    <el-progress :percentage="app.percentage" />
 
+                 </div>
 
+                <span class="stat-count">{{ app.count }}次</span>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+import * as echarts from 'echarts'
 
+export default {
 
+  name: "ApplicationMonitor",
 
+  data() {
 
+    return {
 
+      statusChart: null,
 
+      // 快捷应用数据
 
+      quickApps: [
 
+        { name: '农产品安全管控示范应用场', type: 'green' },
 
+        { name: '崇明区乡村振兴一张图', type: 'yellow' },
 
+        { name: '数字孪生黄浦', type: 'blue' }
 
+      ],
 
+      
+      // 应用上新数据
 
+      newApps: [
 
+        { name: '水系综合管理系统', date: '2023-10-29' },
 
+        { name: '虹口历史文脉管理系统开发', date: '2023-09-15' },
 
+        { name: '虹口智慧环卫监管平台', date: '2023-09-15' },
 
+        { name: '上海虹口区一网统管平台', date: '2023-09-15' },
 
+        { name: '上海公共交通服务保障', date: '2023-09-15' }
 
+      ],
 
+      
+      // 应用热度排行数据
 
+      hotApps: [
 
+        { name: '崇明区乡村振兴一张图', count: 128, percentage: 100 },
 
+        { name: '数字孪生浦江', count: 65, percentage: 50.8 },
 
+        { name: '上海"一张图"大数据', count: 62, percentage: 48.4 },
 
+        { name: '黄浦智慧城管系统', count: 45, percentage: 35.2 },
 
+        { name: '上海生态环境管理', count: 38, percentage: 29.7 }
 
+      ]
 
+    }
 
+  },
 
+   mounted() {
 
+    this.initCharts()
 
+    window.addEventListener('resize', this.handleResize)
 
+  },
 
+  beforeUnmount() {
 
+    window.removeEventListener('resize', this.handleResize)
 
+    this.destroyCharts()
 
+  },
 
+  methods: {
 
+    initCharts() {
 
+      this.initStatusChart()
 
+    },
 
+    handleResize() {
 
+      if (this.statusChart) this.statusChart.resize()
 
+    },
 
+    destroyCharts() {
 
+      if (this.statusChart) {
 
+        this.statusChart.dispose()
 
+        this.statusChart = null
 
+      }
 
+    },
 
+    initStatusChart() {
 
+      this.statusChart = echarts.init(this.$refs.statusChart)
 
+      const option = {
 
+        tooltip: {
 
+          trigger: 'item',
 
+          backgroundColor: 'rgba(0, 25, 50, 0.8)',
 
+          borderColor: '#1E90FF',
 
+          textStyle: {
 
+            color: '#fff'
 
+          }
 
+        },
 
+        legend: {
 
+          orient: 'horizontal',
 
+          bottom: 0,
 
+          textStyle: {
 
+            color: '#a3b6c7'
 
+          }
 
+        },
 
+        series: [
 
+          {
 
+            name: '应用状态分布',
 
+            type: 'pie',
 
+            radius: ['40%', '70%'],
 
+            avoidLabelOverlap: false,
 
+            itemStyle: {
 
+              borderRadius: 10,
 
+              borderColor: '#0A192F',
 
+              borderWidth: 2
 
+            },
 
+            label: {
 
+              show: false,
 
+              position: 'center'
 
+            },
 
+            emphasis: {
 
+              label: {
 
+                show: true,
 
+                fontSize: 20,
 
+                fontWeight: 'bold',
 
+                color: '#fff'
 
+              }
 
+            },
 
+            labelLine: {
 
+              show: false
 
+            },
 
+            data: [
 
+              { value: 400, name: '在维', itemStyle: { color: '#52C41A' } },
 
+              { value: 300, name: '在筹', itemStyle: { color: '#FAAD14' } },
 
+              { value: 200, name: '停用', itemStyle: { color: '#F5222D' } }
 
+            ]
 
+          }
 
+        ]
 
+      }
 
+      this.statusChart.setOption(option)
 
+    },
 
+    // 获取应用图标的背景颜色
 
+    getAppColor(type) {
 
+      const colorMap = {
 
+        green: 'rgba(103, 194, 58, 0.2)',
 
+        yellow: 'rgba(230, 162, 60, 0.2)',
 
+        blue: 'rgba(64, 158, 255, 0.2)'
 
+      }
 
+      return colorMap[type] || 'rgba(64, 158, 255, 0.2)'
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.application-monitor {
 
+  width: 100%;
 
+  background-color: #08224a;
 
+  color: #ffffff;
 
+}
 
+
 
+/* 右侧主内容区 */
 
+.main-content {
 
+  flex: 1;
 
+  padding: 20px 30px;
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 统计卡片 */
 
+.stats-cards {
 
+  display: flex;
 
+  gap: 20px;
 
+  margin-bottom: 20px;
 
+  flex-wrap: wrap;
 
+}
 
+
 
+.stat-card {
 
+  flex: 1;
 
+  min-width: 200px;
 
+  height: 100px;
 
+  background-color: rgba(255, 255, 255, 0.05);
 
+  border-radius: 8px;
 
+  padding: 20px;
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 15px;
 
+  transition: all 0.3s ease;
 
+  
+  &:hover {
 
+    background-color: rgba(255, 255, 255, 0.08);
 
+  }
 
+}
 
+
 
+.stat-icon {
 
+  width: 60px;
 
+  height: 60px;
 
+  border-radius: 50%;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 24px;
 
+  
+  &.approved {
 
+    background-color: rgba(64, 158, 255, 0.2);
 
+    color: #409EFF;
 
+  }
 
+  
+  &.pending {
 
+    background-color: rgba(230, 162, 60, 0.2);
 
+    color: #E6A23C;
 
+  }
 
+  
+  &.online {
 
+    background-color: rgba(103, 194, 58, 0.2);
 
+    color: #67C23A;
 
+  }
 
+  
+  &.offline {
 
+    background-color: rgba(245, 108, 108, 0.2);
 
+    color: #F56C6C;
 
+  }
 
+}
 
+
 
+.stat-content {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 5px;
 
+}
 
+
 
+.stat-label {
 
+  font-size: 14px;
 
+  color: rgba(255, 255, 255, 0.6);
 
+}
 
+
 
+.stat-number {
 
+  font-size: 28px;
 
+  font-weight: bold;
 
+  color: #ffffff;
 
+}
 
+
 
+/* 内容模块 */
 
+.content-modules {
 
+  display: grid;
 
+  grid-template-columns: 1fr 1fr;
 
+  grid-template-rows: 1fr 1fr;
 
+  gap: 20px;
 
+}
 
+
 
+/* 模块通用样式 */
 
+.module {
 
+  background-color: rgba(255, 255, 255, 0.05);
 
+  border-radius: 8px;
 
+  overflow: hidden;
 
+}
 
+
 
+.module-header {
 
+  padding: 15px 20px;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 
+}
 
+
 
+.module-title {
 
+  font-size: 16px;
 
+  font-weight: bold;
 
+  margin: 0;
 
+  color: #ffffff;
 
+}
 
+
 
+.module-more {
 
+  font-size: 12px;
 
+  color: rgba(255, 255, 255, 0.6);
 
+  text-decoration: none;
 
+  
+  &:hover {
 
+    color: #409EFF;
 
+  }
 
+}
 
+
 
+.module-content {
 
+  padding: 20px;
 
+}
 
+
 
+/* 应用状态分布图 */
 
+.chart-container {
 
+  width: 100%;
 
+  height: 300px;
 
+}
 
+
 
+/* 快捷应用 */
 
+.quick-app {
 
+  margin-bottom: 15px;
 
+}
 
+
 
+.app-item {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+  padding: 10px;
 
+  background-color: rgba(255, 255, 255, 0.05);
 
+  border-radius: 6px;
 
+  transition: all 0.3s ease;
 
+  
+  &:hover {
 
+    background-color: rgba(255, 255, 255, 0.08);
 
+  }
 
+}
 
+
 
+.app-icon {
 
+  width: 32px;
 
+  height: 32px;
 
+  border-radius: 4px;
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  color: #ffffff;
 
+  font-size: 14px;
 
+}
 
+
 
+.app-name {
 
+  font-size: 14px;
 
+  color: rgba(255, 255, 255, 0.8);
 
+}
 
+
 
+/* 应用上新 */
 
+.new-app {
 
+  margin-bottom: 15px;
 
+  padding-bottom: 15px;
 
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 
+  
+  &:last-child {
 
+    margin-bottom: 0;
 
+    padding-bottom: 0;
 
+    border-bottom: none;
 
+  }
 
+}
 
+
 
+.app-info {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+
 
+.app-date {
 
+  font-size: 12px;
 
+  color: rgba(255, 255, 255, 0.6);
 
+}
 
+
 
+/* 使用热度排行 */
 
+.hot-app {
 
+  margin-bottom: 20px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 8px;
 
+}
 
+
 
+.app-rank {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+}
 
+
 
+.rank-number {
 
+  width: 20px;
 
+  height: 20px;
 
+  border-radius: 50%;
 
+  background-color: rgba(255, 255, 255, 0.1);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: center;
 
+  font-size: 12px;
 
+  font-weight: bold;
 
+}
 
+
 
+.app-stats {
 
+  display: flex;
 
+  align-items: center;
 
+  gap: 10px;
 
+}
 
+
 
+.stat-bar {
 
+  flex: 1;
 
+  height: 6px;
 
+  background-color: #409EFF;
 
+  border-radius: 3px;
 
+}
 
+
 
+.stat-count {
 
+  font-size: 12px;
 
+  color: rgba(255, 255, 255, 0.6);
 
+  min-width: 50px;
 
+  text-align: right;
 
+}
 
+
 
+/* 响应式设计 */
 
+@media (max-width: 1200px) {
 
+  .content-modules {
 
+    grid-template-columns: 1fr;
 
+    grid-template-rows: repeat(4, auto);
 
+  }
 
+  
+  .stats-cards {
 
+    flex-direction: column;
 
+  }
 
+  
+  .stat-card {
 
+    min-width: auto;
 
+  }
 
+}
 
+</style>

+ 393 - 0
src/views/yygl/overview/index.vue
Ver arquivo 

@@ -0,0 +1,393 @@
 
+<template>
 
+  <div class="application-overview">
 
+    <!-- 右侧主内容区 -->
 
+    <div class="main-content">
 
+        <div style="display: flex;justify-content: space-between;">
 
+            <!-- 搜索栏 -->
 
+            <div class="search-bar">
 
+                <el-input
 
+                placeholder="请输入应用名称关键字"
 
+                v-model="searchKeyword"
 
+                class="search-input"
 
+               
+                >
 
+                <!-- <template #prepend>
 
+                    <Search />
 
+                </template> -->
 
+                </el-input>
 
+            </div>
 
+
 
+            <!-- 应用范围过滤 -->
 
+            <div class="filter-tabs">
 
+                <el-radio-group v-model="activeTab" size="medium">
 
+                    <el-radio-button label="all">全部(41)</el-radio-button>
 
+                    <el-radio-button label="district">区级(19)</el-radio-button>
 
+                    <el-radio-button label="street">街镇(8)</el-radio-button>
 
+                </el-radio-group>
 
+            </div>
 
+        </div>
 
+      <!-- 应用卡片网格 -->
 
+      <div class="applications-grid">
 
+        <div class="application-card" v-for="(app, index) in applications" :key="index">
 
+          <div class="card-image">
 
+            <img :src="app.image" :alt="app.name" />
 
+          </div>
 
+          <div class="card-content">
 
+            <div class="app-header">
 
+              <h3 class="app-name">{{ app.name }}</h3>
 
+              <span class="app-version">{{ app.version }}</span>
 
+            </div>
 
+            <div class="app-tags">
 
+              <el-tag size="small" type="success">{{ app.status }}</el-tag>
 
+              <el-tag size="small" v-for="tag in app.tags" :key="tag">{{ tag }}</el-tag>
 
+            </div>
 
+            <p class="app-description">{{ app.description }}</p>
 
+            <div class="app-footer">
 
+              <span class="app-date">{{ app.date }}</span>
 
+              <el-button type="primary" size="small" class="visit-button">访问</el-button>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+
 
+      <!-- 加载更多按钮 -->
 
+      <!-- <div class="load-more">
 
+        <el-button type="primary" size="medium">查看更多</el-button>
 
+      </div> -->
 
+    </div>
 
+  </div>
 
+</template>
 
+
 
+<script>
 
+export default {
 
+  name: "ApplicationOverview",
 
+  data() {
 
+    return {
 
+      searchKeyword: '',
 
+      activeTab: 'all',
 
+      applications: [
 
+        {
 
+          image: require('@/assets/images/common/app-bg-1.png'),
 
+          name: '智慧园区',
 
+          version: 'v1.0',
 
+          status: '待审核',
 
+          tags: [],
 
+          description: '智慧园区运维管理平台',
 
+          date: '2025-12-09 11:09:07'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/app-bg-2.png'),
 
+          name: '上海市一图一网一屏',
 
+          version: 'v1.0',
 
+          status: '待审核',
 
+          tags: [],
 
+          description: '城市综合数据可视化平台',
 
+          date: '2025-12-09 11:09:06'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/app-bg-3.png'),
 
+          name: '水系综合管理',
 
+          version: 'v1.0',
 
+          status: '未完成',
 
+          tags: ['水务'],
 
+          description: '汇聚各类水务水务等专业数据，构建综合业务平台',
 
+          date: '2025-11-30 15:17:17'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/app-bg-4.png'),
 
+          name: '数字孪生黄浦江',
 
+          version: 'v1.0',
 
+          status: '待发布',
 
+          tags: ['未完成', '水务'],
 
+          description: '利用大数据、物联网、BIM、三维可视化技术构建数字孪生平台',
 
+          date: '2025-12-08 15:11:36'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/u661.png'),
 
+          name: '上海市生态环境管理',
 
+          version: 'v1.0',
 
+          status: '待审核',
 
+          tags: [],
 
+          description: '生态环境综合监测与管理平台',
 
+          date: '2025-11-30 15:43:56'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/app-bg-1.png'),
 
+          name: '智慧园区',
 
+          version: 'v1.0',
 
+          status: '待审核',
 
+          tags: [],
 
+          description: '智慧园区运维管理平台',
 
+          date: '2025-12-09 11:09:07'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/app-bg-2.png'),
 
+          name: '上海市一图一网一屏',
 
+          version: 'v1.0',
 
+          status: '待审核',
 
+          tags: [],
 
+          description: '城市综合数据可视化平台',
 
+          date: '2025-12-09 11:09:06'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/app-bg-3.png'),
 
+          name: '水系综合管理',
 
+          version: 'v1.0',
 
+          status: '未完成',
 
+          tags: ['水务'],
 
+          description: '汇聚各类水务水务等专业数据，构建综合业务平台',
 
+          date: '2025-11-30 15:17:17'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/app-bg-4.png'),
 
+          name: '数字孪生黄浦江',
 
+          version: 'v1.0',
 
+          status: '待发布',
 
+          tags: ['未完成', '水务'],
 
+          description: '利用大数据、物联网、BIM、三维可视化技术构建数字孪生平台',
 
+          date: '2025-12-08 15:11:36'
 
+        },
 
+        {
 
+          image: require('@/assets/images/common/u661.png'),
 
+          name: '上海市生态环境管理',
 
+          version: 'v1.0',
 
+          status: '待审核',
 
+          tags: [],
 
+          description: '生态环境综合监测与管理平台',
 
+          date: '2025-11-30 15:43:56'
 
+        }
 
+      ]
 
+    }
 
+  }
 
+}
 
+</script>
 
+
 
+<style lang="less" scoped>
 
+.application-overview {
 
+  display: flex;
 
+  width: 100%;
 
+  background-color: #08224a;
 
+  color: #ffffff;
 
+}
 
+
 
+/* 右侧主内容区 */
 
+.main-content {
 
+  flex: 1;
 
+  padding: 20px 30px;
 
+  overflow-y: auto;
 
+}
 
+
 
+/* 搜索栏样式 */
 
+.search-bar {
 
+  margin-bottom: 20px;
 
+  
+  .search-input {
 
+    width: 400px;
 
+    
+    // ::v-deep .el-input__inner {
 
+    //   background-color: rgba(255, 255, 255, 0.1);
 
+    //   border: 1px solid rgba(255, 255, 255, 0.2);
 
+    //   color: #ffffff;
 
+      
+    //   &::placeholder {
 
+    //     color: rgba(255, 255, 255, 0.6);
 
+    //   }
 
+    // }
 
+    
+    // ::v-deep .el-input__prepend {
 
+    //   background-color: rgba(255, 255, 255, 0.1);
 
+    //   border-color: rgba(255, 255, 255, 0.2);
 
+    //   color: rgba(255, 255, 255, 0.8);
 
+    // }
 
+  }
 
+}
 
+
 
+/* 过滤标签样式 */
 
+.filter-tabs {
 
+  margin-bottom: 30px;
 
+  
+  ::v-deep .el-radio-group {
 
+    .el-radio-button {
 
+      background-color: rgba(255, 255, 255, 0.1);
 
+      border-color: rgba(255, 255, 255, 0.2);
 
+      color: rgba(255, 255, 255, 0.8);
 
+      
+      &:first-child .el-radio-button__inner {
 
+        border-left-color: rgba(255, 255, 255, 0.2);
 
+      }
 
+      
+      .el-radio-button__inner {
 
+        background-color: transparent;
 
+        border-color: rgba(255, 255, 255, 0.2);
 
+        color: rgba(255, 255, 255, 0.8);
 
+      }
 
+      
+      &.is-active {
 
+        background-color: #1890ff;
 
+        
+        .el-radio-button__inner {
 
+          background-color: #1890ff;
 
+          border-color: #1890ff;
 
+          color: #ffffff;
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+/* 应用卡片网格样式 */
 
+.applications-grid {
 
+  display: grid;
 
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
 
+  gap: 25px;
 
+}
 
+
 
+/* 应用卡片样式 */
 
+.application-card {
 
+  background-color: rgba(255, 255, 255, 0.05);
 
+  border: 1px solid rgba(255, 255, 255, 0.1);
 
+  border-radius: 8px;
 
+  overflow: hidden;
 
+  transition: all 0.3s ease;
 
+  
+  &:hover {
 
+    transform: translateY(-5px);
 
+    box-shadow: 0 10px 30px rgba(24, 144, 255, 0.2);
 
+    border-color: rgba(24, 144, 255, 0.4);
 
+  }
 
+  
+  .card-image {
 
+    width: 100%;
 
+    height: 160px;
 
+    overflow: hidden;
 
+    
+    img {
 
+      width: 100%;
 
+      height: 100%;
 
+      object-fit: cover;
 
+      transition: transform 0.3s ease;
 
+    }
 
+    
+    &:hover img {
 
+      transform: scale(1.05);
 
+    }
 
+  }
 
+  
+  .card-content {
 
+    padding: 15px;
 
+  }
 
+  
+  .app-header {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    margin-bottom: 10px;
 
+    
+    .app-name {
 
+      font-size: 16px;
 
+      font-weight: bold;
 
+      margin: 0;
 
+      color: #ffffff;
 
+    }
 
+    
+    .app-version {
 
+      font-size: 12px;
 
+      color: rgba(255, 255, 255, 0.6);
 
+      background-color: rgba(255, 255, 255, 0.1);
 
+      padding: 2px 6px;
 
+      border-radius: 4px;
 
+    }
 
+  }
 
+  
+  .app-tags {
 
+    margin-bottom: 10px;
 
+    
+    .el-tag {
 
+      margin-right: 5px;
 
+      margin-bottom: 5px;
 
+    }
 
+  }
 
+  
+  .app-description {
 
+    font-size: 13px;
 
+    line-height: 1.6;
 
+    color: rgba(255, 255, 255, 0.7);
 
+    margin-bottom: 15px;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
+    display: -webkit-box;
 
+    -webkit-line-clamp: 2;
 
+    -webkit-box-orient: vertical;
 
+  }
 
+  
+  .app-footer {
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    
+    .app-date {
 
+      font-size: 12px;
 
+      color: rgba(255, 255, 255, 0.5);
 
+    }
 
+    
+    .visit-button {
 
+      padding: 4px 12px;
 
+      font-size: 12px;
 
+      border-radius: 4px;
 
+    }
 
+  }
 
+}
 
+
 
+/* 加载更多按钮 */
 
+.load-more {
 
+  text-align: center;
 
+  margin-bottom: 30px;
 
+  
+  .el-button {
 
+    padding: 10px 30px;
 
+    background-color: rgba(24, 144, 255, 0.2);
 
+    border-color: rgba(24, 144, 255, 0.4);
 
+    color: #1890ff;
 
+    
+    &:hover {
 
+      background-color: rgba(24, 144, 255, 0.3);
 
+      border-color: rgba(24, 144, 255, 0.6);
 
+    }
 
+  }
 
+}
 
+
 
+/* 响应式设计 */
 
+@media (max-width: 1200px) {
 
+  .applications-grid {
 
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 
+    gap: 20px;
 
+  }
 
+}
 
+
 
+@media (max-width: 992px) {
 
+  .sidebar {
 
+    width: 180px;
 
+    
+    .sidebar-menu .menu-item {
 
+      padding: 12px 15px;
 
+      
+      i {
 
+        font-size: 16px;
 
+      }
 
+    }
 
+  }
 
+  
+  .main-content {
 
+    padding: 15px 20px;
 
+  }
 
+  
+  .search-input {
 
+    width: 300px !important;
 
+  }
 
+  
+  .applications-grid {
 
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
 
+    gap: 15px;
 
+  }
 
+}
 
+</style>