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

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

<template>
  <div class="oil-gas-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;

.oil-gas-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>