qa_portal_vue/app/pages/about/about.vue

<template>
  <div class="container">
    <AppHead/>
    <div class="banner">
      <div class="banner_main">
        <h2>关于秦安</h2>
        <p>安全第一 预防为主 综合治理</p>
      </div>
    </div>
    <div class="new_container">
      <div class="left">
        <div class="top">关于秦安</div>
        <div class="main">
          <div
            v-for="(item, index) in aboutItems"
            :key="index"
            class="list"
            :class="{ active: activeIndex === index }"
            @click="activeIndex = index">
            {{item}}
          </div>
        </div>
      </div>
      <div class="right_main">
        <div v-if="activeIndex === 0">
          <div>
            <p>首先我代表河北秦安全体同仁对您的关注表示欢迎!</p>
            <p>河北秦安安全科技股份有限公司成立于2003年，经过十多年的发展，形成了安全评价评估、标准化评审、咨询、职业卫生检测与评价以及矿山设备检测等综合性技术服务的业务格局。公司于2017年8月3日在全国中小企业股份转让系统新三板成功上市，成为河北省首家挂牌新三板的安全技术服务综合提供商。</p>
            <p>安全生产是社会发展和国家稳定的坚强基石，事关人民生命财产安全和社会和谐稳定大局，受到党中央、国务院的高度重视。党的十九大报告中对安全生产提出了明确要求，把安全生产作为当前人民群众最关心、最直接、最现实的问题之一，采取了一系列重大举措加强安全生产工作。</p>
            <p>作为一家专业从事安全生产服务的企业，我们深知责任重大。企业需要安全，安全来自专业。为了提升安全技术水平，提升核心竞争力，持续提升精益化服务能力，公司加强开展技术研发、管理创新、产品创新、模式创新，不断提升自我健康发展能力，全方位为企业提供卓越的安全生产风险整体解决方案。</p>
            <p>同时公司积极适应外部环境变化，强化战略引领，以创新机制激发公司内生动力，探索多种资本相互促进、共同发展，先后与燕赵财产保险有限公司、河北环境工程学院签署战略合作协议，拓展新的合作模式。投资设立大连秦宇科技有限公司，开展了跨领域、跨地域的合作方式。</p>
            <p>作为一家富有社会责任感的企业，在自身不断发展壮大的同时，时刻不忘企业所应承担的社会责任，坚持实现对社会、员工共同发展的理念，促进公司与社会的协调、和谐与可持续发展。</p>
            <p>百舸争流千帆竞，乘风破浪待远航。伴随着中国安全技术服务行业的飞速发展，公司坚持"实现企业本质安全，与企业共享安全"的发展理念，"科学、严谨、真实、公正"的质量方针，将继续成为安全生产行业的一盏引航灯，为安全生产和人民生命财产保驾护航！</p>
            <p>在此，向多年来给予河北秦安大力关心、支持和帮助的有关部门、广大客户和社会各界朋友表示衷心的感谢！我们愿与社会各界朋友精诚合作，携手并进，广泛合作，互信互利，在新的征程中共同创造更加美好的明天！</p>
          </div>
        </div>
        <div v-if="activeIndex === 1">
          <div>
            <p>首先我代表河北秦安全体同仁对您的关注表示欢迎!</p>


            <p>河北秦安安全科技股份有限公司成立于2003年，经过十多年的发展，形成了安全评价评估、标准化评审、咨询、职业卫生检测与评价以及矿山设备检测等综合性技术服务的业务格局。公司于2017年8月3日在全国中小企业股份转让系统新三板成功上市，成为河北省首家挂牌新三板的安全技术服务综合提供商。</p>

            <p>安全生产是社会发展和国家稳定的坚强基石，事关人民生命财产安全和社会和谐稳定大局，受到党中央、国务院的高度重视。党的十九大报告中对安全生产提出了明确要求，把安全生产作为当前人民群众最关心、最直接、最现实的问题之一，采取了一系列重大举措加强安全生产工作。</p>
            <p>
              作为一家专业从事安全生产服务的企业，我们深知责任重大。企业需要安全，安全来自专业。为了提升安全技术水平，提升核心竞争力，持续提升精益化服务能力，公司加强开展技术研发、管理创新、产品创新、模式创新，不断提升自我健康发展能力，全方位为企业提供卓越的安全生产风险整体解决方案。2017年，公司受邀参与编制了河北省《工业企业可燃气体和有毒气体检测报警系统检查检测规范》、《危险场所电气防爆安全检测技术规范》、《金属非金属矿山在用危险性较大设备设施安全检测检验目录》等行业标准，安全技术影响力持续扩大，成为河北省安全技术服务行业的重要引导力之一。
            </p><p>
              同时公司积极适应外部环境变化，强化战略引领，以创新机制激发公司内生动力，探索多种资本相互促进、共同发展，先后与燕赵财产保险有限公司、河北环境工程学院签署战略合作协议，拓展新的合作模式。投资设立大连秦宇科技有限公司，开展了跨领域、跨地域的合作方式。
            </p><p>
              作为一家富有社会责任感的企业，在自身不断发展壮大的同时，时刻不忘企业所应承担的社会责任，坚持实现对社会、员工共同发展的理念，促进公司与社会的协调、和谐与可持续发展。
            </p><p>
              百舸争流千帆竞，乘风破浪待远航。伴随着中国安全技术服务行业的飞速发展，公司坚持“实现企业本质安全，与企业共享安全”的发展理念，“科学、严谨、真实、公正”的质量方针，将继续成为安全生产行业的一盏引航灯，为安全生产和人民生命财产保驾护航！
            </p><p>
              在此，向多年来给予河北秦安大力关心、支持和帮助的有关部门、广大客户和社会各界朋友表示衷心的感谢！我们愿与社会各界朋友精诚合作，携手并进，广泛合作，互信互利，在新的征程中共同创造更加美好的明天！
            </p>
          </div>
        </div>
        <div v-if="activeIndex === 1">
          <p>发展战略</p>
        </div>
        <div v-if="activeIndex === 2">
          <p>组织架构</p>
        </div>
        <div v-if="activeIndex === 3">
          <p>资质荣誉</p>
        </div>
        <div v-if="activeIndex === 4">
          <p>发展历程</p>
        </div>
      </div>
    </div>
    <AppFoot/>
    <right/>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const route = useRoute();
const aboutItems=["领导致词","发展战略","组织架构","资质荣誉","发展历程"];
const activeIndex = ref(Number(route.query.tab) || 0);

// 监听路由变化，确保返回时正确高亮
watch(() => route.query.tab, newTab => {
  activeIndex.value = Number(newTab) || 0;
});
</script>

<style scoped lang="scss">
.container {
  background: #f6f8fa;
  .banner {
    width: 100%;
    height: 320px;
    background: url("@/assets/images/about1_banner.png") no-repeat top center;
    .banner_main {
      width: 1400px;
      margin: 0 auto;
      padding-top: 135px;
      h2 {
        font-size: 60px;
        color: #ffffff;
        margin: 0;
        padding: 0;
      }
      p {
        margin: 0;
        color: #ffffff;
      }
    }
  }
  .new_container {
    width: 1400px;
    margin: 20px auto;
    display: flex;
    .left{
      width: 250px;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 4px;
      .top{
        width: 100%;
        background: #3f79ff;
        text-align: center;
        color: #ffffff;
        line-height: 40px;
        border-radius: 4px 4px 0 0;
        font-weight: bold;
      }
      .main{
        padding: 10px;
        .list{
          padding: 10px;
          font-size: 14px;
          cursor: pointer;
          color: #222222;
          margin-bottom: 5px;
          border-radius: 4px;
          border-left: 4px solid #ffffff;
          &:hover{
            background: #e4ecff;
            border-left: 4px solid #3f79ff;
            color: #3f79ff;
          }
        }
        .active{
          background: #e4ecff;
          border-left: 4px solid #3f79ff;
          color: #3f79ff;
        }
        &:last-child{
          border-bottom: none;
        }
      }
    }
    .right_main{
      flex: 1;
      margin-left: 20px;
      background: #ffffff;
      padding: 10px;
      color: #333333;
      line-height: 2;
      text-indent: 2rem;
      min-height: 500px;

    }
  }
}


</style>