qp_onemap_ui/src/views/skmh/index.vue

<template>
  <div class="dashboard-container">
    <!-- 顶部横幅 -->

    <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 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">较上月增长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>
        <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">本周新增12,34人</div>
        </div>
      </div>
    </div>

    <!-- 数据概览 -->
    <div class="data-overview">
      <div class="overview-header">
        <h2>数据概览</h2>
        <!-- <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 ref="deviceChart" class="chart-container"></div>
        </div>
        <!-- 服务分类占比饼图 -->
        <div class="chart-card">
          <div class="chart-title">服务分类占比</div>
          <div ref="statusChart" class="chart-container"></div>
        </div>
        <!-- 用户活跃度分析折线图 -->
        <!-- <div class="chart-card">
          <div class="chart-title">用户活跃度分析</div>
          <div ref="activityChart" class="chart-container"></div>
        </div> -->
        <!-- 数据量柱状图 -->
        <!-- <div class="chart-card">
          <div class="chart-title">数据量</div>
          <div ref="dataVolumeChart" class="chart-container"></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> -->
        <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">
      <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 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 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 class="demo-label">实际业务场景应用</div>
            <div class="demo-text">展示系统在行业中的实际应用案例</div>
          </div>
          
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'SpatialTemporalPortal',
  data() {
    return {
      deviceChart: null,
      statusChart: null,
      activityChart: null,
      dataVolumeChart: 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() {
    this.initCharts()
    window.addEventListener('resize', this.handleResize)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
    this.destroyCharts()
  },
  methods: {
    initCharts() {
      this.initDeviceChart()
      this.initStatusChart()
      // 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: '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%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110],
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#1E90FF' },
                { offset: 1, color: '#00BFFF' }
              ])
            }
          }
        ]
      }
      this.deviceChart.setOption(option)
    },
    
    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' } },
              { value: 100, name: '路径规划', itemStyle: { color: '#8C8C8C' } }
            ]
          }
        ]
      }
      this.statusChart.setOption(option)
    },
    
    initActivityChart() {
      this.activityChart = echarts.init(this.$refs.activityChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '活跃度',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#1E90FF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230]
          }
        ]
      }
      this.activityChart.setOption(option)
    },
    
    initDataVolumeChart() {
      this.dataVolumeChart = echarts.init(this.$refs.dataVolumeChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            data: [1200, 2000, 1500, 800, 700, 1100, 1300],
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              color: '#FF7F50'
            }
          }
        ]
      }
      this.dataVolumeChart.setOption(option)
    },
    
    initComparisonChart() {
      this.comparisonChart = echarts.init(this.$refs.comparisonChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 25, 50, 0.8)',
          borderColor: '#1E90FF',
          textStyle: {
            color: '#fff'
          }
        },
        legend: {
          data: ['设备A', '设备B', '设备C'],
          textStyle: {
            color: '#a3b6c7'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#a3b6c7'
          },
          axisLine: {
            lineStyle: {
              color: '#1E90FF'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(30, 144, 255, 0.2)'
            }
          }
        },
        series: [
          {
            name: '设备A',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#1E90FF'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(30, 144, 255, 0.6)' },
                { offset: 1, color: 'rgba(30, 144, 255, 0.1)' }
              ])
            },
            data: [120, 132, 101, 134, 90, 230]
          },
          {
            name: '设备B',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#52C41A'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(82, 196, 26, 0.6)' },
                { offset: 1, color: 'rgba(82, 196, 26, 0.1)' }
              ])
            },
            data: [220, 182, 191, 234, 290, 330]
          },
          {
            name: '设备C',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              color: '#FF7F50'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 127, 80, 0.6)' },
                { offset: 1, color: 'rgba(255, 127, 80, 0.1)' }
              ])
            },
            data: [150, 232, 201, 154, 190, 330]
          }
        ]
      }
      this.comparisonChart.setOption(option)
    },
    
    handleResize() {
      if (this.deviceChart) this.deviceChart.resize()
      if (this.statusChart) this.statusChart.resize()
      if (this.activityChart) this.activityChart.resize()
      if (this.dataVolumeChart) this.dataVolumeChart.resize()
      if (this.comparisonChart) this.comparisonChart.resize()
    },
    
    destroyCharts() {
      if (this.deviceChart) {
        this.deviceChart.dispose()
        this.deviceChart = null
      }
      if (this.statusChart) {
        this.statusChart.dispose()
        this.statusChart = null
      }
      if (this.activityChart) {
        this.activityChart.dispose()
        this.activityChart = null
      }
      if (this.dataVolumeChart) {
        this.dataVolumeChart.dispose()
        this.dataVolumeChart = null
      }
      if (this.comparisonChart) {
        this.comparisonChart.dispose()
        this.comparisonChart = null
      }
    }
  }
}
</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;
  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 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;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    
    .stat-card {
      width: 555px;
      height: 150px;
      border-radius: 12px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .stat-number {
        font-size: 36px;
        font-weight: bold;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #fff;
      }
      
      .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, #3B82F6 0%, #4F46E5 100%);
    }
    
    .card-2 {
      background: linear-gradient(135deg, #22C55E 0%, #059669 100%);
    }
    
    .card-3 {
      background: linear-gradient(135deg, #A855F7 0%, #7C3AED 100%);
    }
  }
}

/* 数据概览 */
.data-overview {
  padding: 0 20px 40px;
  
  .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      color: #fff;
      margin: 0;
    }
    
    .time-tabs {
      display: flex;
      gap: 20px;
      
      .tab {
        padding: 8px 16px;
        cursor: pointer;
        color: #a3b6c7;
        border-radius: 20px;
        transition: all 0.3s ease;
        
        &:hover {
          color: #409eff;
        }
        
        &.active {
          background-color: #409eff;
          color: #fff;
        }
      }
    }
  }
  
  .charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    
    .chart-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);
      
      .chart-title {
        font-size: 18px;
        color: #fff;
        margin-bottom: 20px;
        text-align: left;
      }
      
      .chart-container {
        height: 300px;
        width: 100%;
      }
    }
  }
}
// 时间筛选
.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 {
  padding: 0 20px 40px;
  
  .chart-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);
    
    &.full-width {
      max-width: 100%;
    }
    
    .chart-title {
      font-size: 18px;
      color: #fff;
      margin-bottom: 20px;
      text-align: left;
    }
    
    .chart-container {
      height: 400px;
      width: 100%;
    }
  }
}

/* 功能演示 */
.demo-section {
  padding: 0 20px 100px;
  
 .overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    
    h2 {
      font-size: 24px;
      color: #fff;
      margin: 0;
    }
  }
  
  .demo-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    
    .demo-card {
      width: 350px;
      background-color: rgba(30, 41, 59, 0.6);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .demo-thumbnail {
        height: 200px;
        background-color: #1E90FF;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        
        .play-btn {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.8);
          color: #1E90FF;
          font-size: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          transition: all 0.3s ease;
          
          &:hover {
            background-color: #fff;
            transform: scale(1.1);
          }
        }
      }
      
      .demo-title {
        padding: 15px;
        color: #fff;
        text-align: left;
      }
      .demo-label {
        font-size: 16px;
        color: #fff;
        padding-bottom: 10px;
        text-align: left;
      }
      .demo-text {
        font-size: 12px;
        color: #fff;
        text-align: left;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .banner {
    padding-right: 5%;
    
    .banner-content {
      h1 {
        font-size: 32px;
      }
    }
  }
  
  .stats-section {
    .stats-grid {
      gap: 20px;
      
      .stat-card {
        width: 100%;
        max-width: 300px;
      }
    }
  }
  
  .data-overview {
    .overview-header {
      flex-direction: column;
      gap: 20px;
      
      h2 {
        text-align: center;
      }
    }
    
    .charts-grid {
      grid-template-columns: 1fr;
      
      .chart-card {
        .chart-container {
          height: 250px;
        }
      }
    }
  }
  
  .comparison-section {
    .chart-card {
      .chart-container {
        height: 300px;
      }
    }
  }
  
  .demo-section {
    .demo-grid {
      gap: 20px;
      
      .demo-card {
        width: 100%;
        max-width: 350px;
      }
    }
  }
}
</style>