qp_onemap_ui/src/views/yygl/overview/index.vue

<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 #append>
                        <el-button type="primary" class="search-btn">搜索</el-button>
                    </template> -->
                    
                </el-input>
                <el-button type="primary" class="search-btn">搜索</el-button>
            </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="app-content">
        <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>
      <!-- 加载更多按钮 -->
      <!-- <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);
    // }
  }
  .search-btn {
    margin-left: 10px;
  }
}

/* 过滤标签样式 */
.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;
        }
      }
    }
  }
}
.app-content{
    // height: 640px;
    height: calc(100vh - 266px);
    overflow: auto;
}

/* 应用卡片网格样式 */
.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>