<template>
  <div class="container">
    <AppHead/>
    <div class="banner">
      <div class="banner_main">
        <h2>企业安全生产</h2>
        <div class="s_tit">综合解决方案</div>
        <p>结合企业安全生产管理物联监测、个性化业务场景等需求为企业量身定制的解决方案</p>
      </div>
    </div>
    <div class="block1">
      <div class="block1_main">
        <div class="title">安全生产数智化管理平台</div>
        <div class="s_img1">
          <img src="@/assets/images/solution_img1.png" alt=""/>
        </div>
        <div class="block1_mid">
          <div class="top">
            <div
              v-for="(tab, index) in tabs"
              :key="index"
              class="item"
              :class="{ active: activeIndex === index }"
              @click="activeIndex = index"
            >
              <img src="@/assets/images/solution_img4.png" alt=""/>  <span>{{ tab.name }}</span>
            </div>
          </div>
          <div class="block1_wrap">
            <div class="info">
              <div class="title">{{ tabs[activeIndex].title }}</div>
              <div class="s_title">{{ tabs[activeIndex].sTitle }}</div>
              <div class="main">
                <p v-for="(item, idx) in tabs[activeIndex].items" :key="idx">
                  <img src="@/assets/images/solution_img10.png" alt=""/> <span>{{ item.text }}</span>
                </p>
              </div>
            </div>
            <div class="block1_img">
              <img src="@/assets/images/solution_img9.png" alt=""/>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="block2">
      <div class="block2_main">
        <div class="title">
          <div class="tit">靠谱的专业服务</div>
          <p>助力提升安全管理效益,满足多行业的安全生产需求</p>
        </div>
        <div class="block2_wrap">
          <div
            v-for="(item, index) in block2Items"
            :key="index"
            class="item"
            :class="{ active: block2ActiveIndex === index }"
            @mouseenter="block2ActiveIndex = index"
          >
            <div class="img"><img :src="item.img" alt=""/></div>
            <div class="title">{{ item.title }}</div>
            <div class="text">{{ item.text }}</div>
          </div>
        </div>
      </div>
    </div>

    <!--  解决方案-->
    <div class="solution">
      <div class="solution_container">
        <div class="title">
          <div class="tit">行业痛点</div>
          <p>助力提升安全管理效益,满足多行业的安全生产需求</p>
        </div>
        <div class="solution_main">
          <div class="item">
            <div class="img"> <img src="@/assets/images/img8.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">政府机构</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
          <div class="item">
            <div class="img"> <img src="@/assets/images/img9.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">民爆</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
          <div class="item">
            <div class="img"> <img src="@/assets/images/img10.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">机械</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
          <div class="item">
            <div class="img"> <img src="@/assets/images/img11.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">军工</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
          <div class="item">
            <div class="img"> <img src="@/assets/images/img16.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">水务</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
          <div class="item">
            <div class="img"> <img src="@/assets/images/img12.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">农牧</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
          <div class="item">
            <div class="img"> <img src="@/assets/images/img13.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">风电</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
          <div class="item">
            <div class="img"> <img src="@/assets/images/img14.png" alt="河北秦安安全科技股份有限公司"/></div>
            <div class="title">其他</div>
            <div class="info">
              <div>涉及民用爆破器材的生产、销售、流通及爆破服务的提供等领域</div>
              <div class="more"><img src="@/assets/images/img15.png" alt=""/></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <AppFoot/>
    <right/>
  </div>
</template>
<script setup lang="ts">
import solution_img12 from "@/assets/images/solution_img12.png";
import solution_img13 from "@/assets/images/solution_img13.png";
import solution_img14 from "@/assets/images/solution_img14.png";
import solution_img15 from "@/assets/images/solution_img15.png";

const activeIndex = ref(0);
const block2ActiveIndex = ref(0);

const tabs = [
  {
    name: "一个大屏",
    title: "数智化大屏",
    sTitle: '可视化管理突出重点要素，紧盯异常情况实现"千企千面"',
    blockImg: "@/assets/images/solution_img9.png",
    items: [
      { img: "@/assets/images/solution_img6.png", text: "集团管理的重点内容，及时呈现，实时更新；" },
      { img: "@/assets/images/solution_img7.png", text: "下属各单位管理效果实时排名，优劣自现，一目了然；" },
      { img: "@/assets/images/solution_img8.png", text: "重点关注信息及时提醒，异常现象实时掌握，充分体现大数据的应用的优势。" },
    ],
  },
  {
    name: "3个体系",
    title: "三大体系",
    sTitle: "风险分级管控、隐患排查治理、安全教育培训",
    blockImg: "@/assets/images/solution_img9.png",
    items: [
      { img: "@/assets/images/solution_img6.png", text: "风险分级管控体系内容；" },
      { img: "@/assets/images/solution_img7.png", text: "隐患排查治理体系内容；" },
      { img: "@/assets/images/solution_img8.png", text: "安全教育培训体系内容。" },
    ],
  },
  {
    name: "多个建设方案",
    title: "建设方案",
    sTitle: "根据企业实际需求提供定制化建设方案",
    blockImg: "@/assets/images/solution_img9.png",
    items: [
      { img: "@/assets/images/solution_img6.png", text: "建设方案内容一；" },
      { img: "@/assets/images/solution_img7.png", text: "建设方案内容二；" },
      { img: "@/assets/images/solution_img8.png", text: "建设方案内容三。" },
    ],
  },
];

const block2Items = [
  { img: solution_img15, title: "风险辨识", text: "内置符合企业的风险辨识清单，勾勾选选完成风险辨识" },
  { img: solution_img12, title: "双重预防机制", text: "智能化风险辨识和隐患排查治理流程，源头管控安全生产风险" },
  { img: solution_img13, title: "监测预警系统", text: "结合物联网监测数据，智能分析异常行为、异常现象，提供预警信息" },
  { img: solution_img14, title: "作业管理规范化", text: "提供合规合法的作业流程管理，灵活高效进行安全作业管理" },
];

</script>
<style scoped lang="scss">
.container{
  background: #f0f9ff;
  .banner {
    width: 100%;
    height: 494px;
    background: url("@/assets/images/solution_banner.png") no-repeat top center;
    .banner_main {
      width: 1400px;
      margin: 0 auto;
      padding-top: 230px;
      h2 {
        font-size: 60px;
        color: #ffffff;
        margin: 0;
        padding: 0;
      }
      .s_tit{
        font-size: 28px;
        color: #ffffff;
      }
      p {
        color: #ffffff;
        margin-top: 5px;
      }
    }
  }
  .block1{
    width: 100%;
    margin-top: 30px;
    .block1_main{
      width: 100%;
      text-align: center;



      .title{
        font-size: 38px;
        color: #2c2c2c;
      }
      .s_img1{
        margin-top: 20px;
      }
      .block1_mid{
        width: 1440px;
        margin: 0 auto;
        padding-bottom: 50px;
        padding-top: 50px;


        .top{
          width: 100%;
          background: #ffffff;
          display: flex;
          justify-content: space-around;
          height: 62px;
          border-radius: 4px;
          box-shadow: 0px 0px 10px 0px rgba(203, 203, 203, 0.32);
          line-height: 62px;
          .item{
            width: 33.34%;
            text-align: center;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;


            &:hover{
              background: #1c4eff url("@/assets/images/solution_img5.png") no-repeat top center;
              color: #ffffff;
              background-size: 100% 100%;
            }
            &.active{
              background: #1c4eff url("@/assets/images/solution_img5.png") no-repeat top center;
              color: #ffffff;
              background-size: 100% 100%;
            }
          }
        }
        .block1_wrap{
          width: 100%;
          background: #ffffff;
          border-radius: 4px;
          padding: 50px;
          box-sizing: border-box;
          margin-top: 20px;
          display: flex;
          align-items: center;
          .info{
            width: 60%;
            text-align: left;
            .title{
              font-size: 48px;
              color: #2a6df9;
              font-weight: bold;
            }
            .s_title{
              margin-top: 30px;
              color: #444444;
            }
            .main{
              margin-top: 40px;
              p{
                display: flex;
                align-items: center;
                color: #666666;
                img{
                  margin-right: 10px;
                }
              }
            }
          }
          .block1_img{
            flex: 1;
          }
        }
      }
    }
  }

.block2{
  width: 100%;
  padding-top: 30px;
  .block2_main{
    width: 1400px;
    margin: 0 auto;

    .title{
      text-align: center;
      .tit{
        color: #181818;
        font-size: 36px;
      }
      p{
        font-size: 16px;
        color: #999999;
        margin: 0;
      }
    }
    .block2_wrap{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 40px;
      padding-bottom: 60px;
      .item{
        width: 268px;
        background: #ffffff;
        border-style: solid;
        border-width: 1px;
        border-color: rgb(231 240 255);
        border-radius: 6px;
        background-image: -moz-linear-gradient( 120deg, rgb(238,245,255) 0%, rgb(255,255,255) 100%);
        background-image: -webkit-linear-gradient( 120deg, rgb(238,245,255) 0%, rgb(255,255,255) 100%);
        background-image: -ms-linear-gradient( 120deg, rgb(238,245,255) 0%, rgb(255,255,255) 100%);
        padding: 30px 30px;
        box-sizing: border-box;
        box-shadow: 0 0 10px 0 rgba(203, 203, 203, 0.32);
        transition: all 0.5s ease;
        text-align: left;

        .img{
          transition: opacity 0.3s ease, visibility 0.3s ease;
          opacity: 1;
          visibility: visible;
        }
        .title{
          transition: color 0.3s ease;
          font-size: 24px;
          color: #222222;
          margin: 30px auto  50px;

        }
        .text{
          color: #666666;
          transition: color 0.3s ease;
        }

        &:hover{
          color: #ffffff;
          width: 548px;
          background: url("@/assets/images/solution_img11.png") no-repeat top center;
          text-align: left;
          padding: 30px;
          .img{
            opacity: 0;
            visibility: hidden;
          }
          .title{
            font-size: 24px;
            color: #ffffff;
            margin: 30px auto  50px;
            text-align: left;
          }
          .text{
            color: #ffffff;
            text-align: left;
          }
        }

      }
      .active{
        color: #ffffff;
        width: 548px;
        background: url("@/assets/images/solution_img11.png") no-repeat top center;
        text-align: left;
        padding: 30px;
        .img{
          opacity: 0;
          visibility: hidden;
        }
        .title{
          font-size: 24px;
          color: #ffffff;
          margin: 30px auto  50px;
          text-align: left;
        }
        .text{
          color: #ffffff;
          text-align: left;
        }
      }
    }
  }

}

  .solution{
    width:100% ;
    background: #ffffff;
    padding: 50px;
    box-sizing: border-box;
    .solution_container{
      width: 1400px;
      margin: 0 auto;
      .title{
        text-align: center;
        .tit{
          margin: 0;
          padding: 0;
          font-size: 36px;
          color: #4c4b4b;

        }
        p{
          margin: 0;
          padding: 0;
          color: #999999;
          font-size: 14px;
        }
      }
      .solution_main{
        width: 100%;
        display: flex;
        margin-top: 30px;
        flex-wrap: wrap;
        .item{
          width: 330px;
          height: 195px;
          position: relative;
          margin: 10px;
          overflow: hidden;
          .img{
            width: 100%;
            height: 100%;
            img{
              width: 100%;
              height: 100%;
              border-radius: 10px;
            }
          }

          .title{
            position: absolute;
            top:15px;
            left: 15px;
            background: rgba(0,0,0,0.23);
            padding: 10px 20px;
            border-radius: 50px;
            color: #ffffff;
            font-weight: bold;
            z-index: 2;
            transition: background 0.3s ease;
          }
          .info{
            width: 100%;
            height: 100%;
            background: rgba(0,22,60,0.6);
            border-radius: 10px;
            position: absolute;
            left: 0;
            top: 0;
            box-sizing: border-box;
            color: #ffffff;
            padding: 80px 20px;
            z-index: 1;
            opacity: 0;
            transform: translateY(100%);
            transition: all 0.4s ease;
            .more{
              text-align: right;
              margin-top: 20px;
            }
          }
          &:hover{
            .info{
              opacity: 1;
              transform: translateY(0);
            }
            .title{
              background: #1d78ff;
            }
          }
        }
      }
    }
  }


}

</style>
