pendulum/web/src/views/Enterprise/PublicSafety/Water.vue

<script setup lang="ts">
</script>

<template>
  <div class="water-view">
    <h2>水利解决方案</h2>
    <div class="content-section">
      <h3>方案概述</h3>
      <p>为水利行业提供全面的智能化监测和管理解决方案，保障水资源安全和高效利用。</p>

      <h3>核心功能</h3>
      <ul class="feature-list">
        <li>
          <strong>水库监测</strong>
          <p>实时监测水库水位、水质和周边地质状况</p>
        </li>
        <li>
          <strong>河道巡检</strong>
          <p>无人机自动化巡检河道，监测水质和违法排污</p>
        </li>
        <li>
          <strong>防汛预警</strong>
          <p>基于大数据分析的洪水预测和预警系统</p>
        </li>
        <li>
          <strong>水资源调度</strong>
          <p>智能化水资源调度管理，优化水资源利用</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
@use '@/assets/styles/variables' as v;
@use '@/assets/styles/mixins' as m;

.water-view {
  padding: v.$spacing-xl;
  background: white;
  border-radius: v.$border-radius-lg;
  box-shadow: v.$shadow-md;

  h2 {
    font-size: v.$font-size-xl;
    color: v.$text-primary;
    margin-bottom: v.$spacing-xl;
    padding-bottom: v.$spacing-md;
    border-bottom: 2px solid v.$primary-color;
  }

  .content-section {
    h3 {
      font-size: v.$font-size-lg;
      color: v.$text-primary;
      margin: v.$spacing-xl 0 v.$spacing-md;
    }

    p {
      color: v.$text-secondary;
      line-height: 1.6;
    }

    .feature-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: v.$spacing-lg;
      margin-top: v.$spacing-lg;
      padding: 0;
      list-style: none;

      li {
        padding: v.$spacing-lg;
        background: v.$background-light;
        border-radius: v.$border-radius-md;
        transition: transform v.$transition-fast;

        &:hover {
          transform: translateY(-4px);
        }

        strong {
          display: block;
          color: v.$primary-color;
          margin-bottom: v.$spacing-sm;
        }

        p {
          margin: 0;
          font-size: v.$font-size-sm;
        }
      }
    }
  }
}
</style>