<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="keywords"
      content="海外工程 一带一路 国际工程 援外报价软件 成本测算 成本管控 BIM 智慧工地 云文档 BIM轻量化"
    />
    <meta
      name="description"
      content="北京虹晟信息科技有限公司成立于2016年，是一家专业从事建筑、装饰装修以及基础设施领域的软件产品和信息化系统研发与应用的高新技术企业，主营业务为相关软件产品和信息化解决方案的研发与推广。公司的宗旨是借助于云计算、BIM、物联网、人工智能以及大数据等技术，为用户提供更好的产品和服务，为行业带来新的价值和增长点，公司的愿景是成为行业领先的创新型高新科技企业。"
    />
    <title>首页-北京虹晟信息科技有限公司</title>
    <script type="text/javascript">
      var browser = {
        versions: (function () {
          var u = navigator.userAgent,
            app = navigator.appVersion;
          return {
            trident: u.indexOf("Trident") > -1, //IE内核
            presto: u.indexOf("Presto") > -1, //opera内核
            webKit: u.indexOf("AppleWebKit") > -1, //苹果、谷歌内核
            gecko: u.indexOf("Gecko") > -1 && u.indexOf("KHTML") == -1, //火狐内核
            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
            android: u.indexOf("Android") > -1 || u.indexOf("Linux") > -1, //android终端或者uc浏览器
            iPhone: u.indexOf("iPhone") > -1, //是否为iPhone
            iPad: u.indexOf("iPad") > -1, //是否iPad
          };
        })(),
        language: (
          navigator.browserLanguage || navigator.language
        ).toLowerCase(),
      };
      if (browser.versions.mobile) {
        window.location.href = "index-m.html";
      }
      console.log(" 是否为移动终端: " + browser.versions.mobile);
    </script>
    <!-- 最新vue版本 cdn -->
    <!-- <script src="http://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -->
    <!-- <script src="http://cdn.jsdelivr.net/npm/vue"></script> -->
    <!-- 最新vue版本 文件 -->
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/swiper.js"></script>
    <link href="css/swiper.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="icon" href="image/favicon.ico" />
    <script
      src="js/components.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <!-- 侧边栏 -->
    <link rel="stylesheet" href="css/sidebar.css" />
    <script src="js/sidebar.js" type="text/javascript"></script>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/element.js"></script>
    <link rel="stylesheet" href="./css/element.css" />

    <style>
      [v-cloak] {
        display: none;
      }

      .swiper-container img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
      }

      .list {
        width: 49%;
        margin: 16px 0px;
        height: 352px;
        float: left;
        box-sizing: border-box;
        color: #fff;
        position: relative;
      }

      .list:hover {
        cursor: pointer;
      }

      .sss {
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(0, 0, 0, 0.6);
        height: 100%;
      }

      .first {
        background: url("image/list-1.webp") no-repeat;
        background-size: 100% 100%;
      }

      .second {
        background: url("image/list-2.webp") no-repeat;
      }

      .third {
        background: url("image/list-3.webp") no-repeat;
      }

      .four {
        background: url("image/list-4.webp") no-repeat;
      }

      .list-wrapper {
        overflow: hidden;
        width: 85%;
        margin: 0 auto;
        margin-top: 110px;
        margin-bottom: 130px;
      }

      @media screen and (min-width: 1200px) and (max-width: 1400px) {
        /*.container{*/
        /*width: 1200px;*/
        /*}*/
        .list-wrapper {
          width: 1200px;
        }
      }

      @media (max-width: 1200px) {
        .list-wrapper {
          width: 1200px;
        }
      }

      .inner {
        /*position: absolute;top: 120px;*/
        text-align: center;
        /*margin-left: 70px;*/
        width: 316px;
        margin: auto;
      }

      .inner > img {
        margin-top: 50px;
      }

      /*.others{position: absolute;top: 50px;text-align: center;margin-left: 70px;width: 280px}*/
      .hover-list {
        width: 100%;
        height: 100%;
        display: block;
        background: rgba(65, 81, 247, 0.6);
        height: 100%;
      }

      .hover-list .inner {
        position: absolute;
        top: 150px;
      }

      /*.hover-list .others{position: absolute;top:90px;}*/
      /*.hover-list .others div{margin: 70px 0}*/
      .inner div {
        margin: 70px 0;
        text-align: center;
      }

      /*.hover-list .others p{text-align: left;text-indent: 2em;line-height: 24px}*/
      .list-title {
        font-size: 24px;
        /*width:320px;*/
        margin: auto;
        margin-top: 20px;
      }

      .list-text {
        font-size: 18px;
        /*width:400px;*/
        padding: 0px 5px;
        line-height: 30px;
        margin: auto;
        margin-top: 150px;
        text-indent: 36px;
      }

      .others > .left {
        float: left;
        width: 40%;
        text-align: center;
      }

      .others > .left > img {
        margin-top: 90px;
      }

      .others > .right {
        float: left;
        width: 60%;
      }

      /*.container{margin-top: 70px}*/
      .container {
        margin-top: 70px;
      }

      .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
      }

      /*.swiper-wrapper, .swiper-slide{*/
      /*width:100%;*/
      /*height: 600px;*/
      /*}*/
      .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .swiper-lazy-preloader {
        --swiper-preloader-color: #409eff;
      }
      .swiper-container img {
        width: 100%;
        height: 100%;
      }

      .marginNone {
        float: right;
      }

      #imgLeft {
        margin-top: 70px;
      }

      #list-zheng {
        /*width: 280px;*/
      }
    </style>
  </head>

  <body>
    <div id="app" v-cloak>
      <my-header :active="active"></my-header>
      <div class="container">
        <div>
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="image/banner-5.webp" alt="" />
              </div>

              <div class="swiper-slide">
                <img
                  class="swiper-lazy"
                  data-src="image/banner-0.webp"
                  alt=""
                />
                <div class="swiper-lazy-preloader"></div>
              </div>

              <div class="swiper-slide">
                <img
                  class="swiper-lazy"
                  data-src="image/banner-1.webp"
                  alt=""
                />
                <div class="swiper-lazy-preloader"></div>
              </div>

              <div class="swiper-slide">
                <img
                  class="swiper-lazy"
                  data-src="image/banner-2.webp"
                  alt=""
                />
                <div class="swiper-lazy-preloader"></div>
              </div>

              <div class="swiper-slide">
                <img
                  class="swiper-lazy"
                  data-src="image/banner-3.webp"
                  alt=""
                />
                <div class="swiper-lazy-preloader"></div>
              </div>
            </div>

            <div class="swiper-pagination"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
          </div>
        </div>
        <div class="list-wrapper">
          <div
            class="list first"
            @mouseenter="enter('first')"
            @mouseleave="leave('first')"
            @click="detail('first')"
          >
            <div class="sss" v-if="first">
              <div class="inner">
                <img src="image/list-icon-1.webp" alt="" />
                <div class="list-title">
                  海外工程投标报价与成本管控整体解决方案
                </div>
              </div>
            </div>
            <div class="hover-list" v-if="!first">
              <div class="others">
                <div class="left">
                  <img id="imgLeft" src="image/list-icon-1.webp" alt="" />
                  <div class="list-title" id="list-zheng">
                    海外工程投标报价与成本管控整体解决方案
                  </div>
                </div>
                <div class="right">
                  <p class="list-text">
                    为“一带一路”倡议背景下积极“走出去”从事海外工程承包的企业用户提供投标标价与成本管控的信息化整体解决方案。
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="list marginNone second"
            @mouseenter="enter('second')"
            @mouseleave="leave('second')"
            @click="detail('second')"
          >
            <div class="sss" v-if="second">
              <div class="inner">
                <img src="image/list-icon-2.webp" alt="" />
                <div class="list-title">BIM轻量化云平台</div>
              </div>
            </div>
            <div class="hover-list" v-if="!second">
              <div class="others">
                <div class="left">
                  <img src="image/list-icon-2.webp" alt="" />
                  <div class="list-title">BIM轻量化云平台</div>
                </div>
                <div class="right">
                  <p class="list-text">
                    基于BIM理念，结合3D图形渲染、移动互联
                    网、云计算等技术，以模型轻量化展示与应用为核心的三维可视化云平台。
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="list third"
            @mouseenter="enter('third')"
            @mouseleave="leave('third')"
            @click="detail('third')"
          >
            <div class="sss" v-if="third">
              <div class="inner">
                <img src="image/list-icon-3.webp" alt="" />
                <div class="list-title">工程项目云文档管理系统</div>
              </div>
            </div>
            <div class="hover-list" v-if="!third">
              <div class="others">
                <div class="left">
                  <img src="image/list-icon-3.webp" alt="" />
                  <div class="list-title">工程项目云文档管理系统</div>
                </div>
                <div class="right">
                  <p class="list-text">
                    基于云存储架构的图文档管理平台，满足工程项目全生命周期的多场景应用需求。
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="list marginNone third four"
            @mouseenter="enter('four')"
            @mouseleave="leave('four')"
            @click="detail('four')"
          >
            <div class="sss" v-if="four">
              <div class="inner">
                <img src="image/list-icon-4.webp" alt="" />
                <div class="list-title">智慧工地解决方案</div>
              </div>
            </div>
            <div class="hover-list" v-if="!four">
              <div class="others">
                <div class="left">
                  <img src="image/list-icon-4.webp" alt="" />
                  <div class="list-title">智慧工地解决方案</div>
                </div>
                <div class="right">
                  <p class="list-text">
                    满足政府监管、企业级管理以及项目级应用等不同场景需求的智慧工地集成化解决方案。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <my-footer></my-footer>

      <!-- 侧边栏 -->
      <my-sidebar />
    </div>
  </body>
  <script>
    var app = new Vue({
      el: "#app",
      data: function () {
        return {
          active: "0",
          first: true,
          second: true,
          third: true,
          four: true,
        };
      },
      mounted: function () {
        this.init();
      },
      methods: {
        detail: function (val) {
          console.log(val);
          window.location.href = "./product.html?section=" + val;
        },
        init: function () {
          var swiper = new Swiper(".swiper-container", {
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },

            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },

            effect: "fade",

            loop: false,

            autoplay: {
              delay: 3000,
              disableOnInteraction: false,
            },

            preloadImages: false,

            lazy: {
              loadPrevNext: true,
              loadPrevNextAmount: 1,
              loadOnTransitionStart: true,
            },

            watchSlidesVisibility: true,

            observer: true,
            observeParents: true,
          });
        },
        enter: function (val) {
          if (val == "first") {
            this.first = false;
          } else if (val == "second") {
            this.second = false;
          } else if (val == "third") {
            this.third = false;
          } else if (val == "four") {
            this.four = false;
          }
        },
        leave: function (val) {
          if (val == "first") {
            this.first = true;
          } else if (val == "second") {
            this.second = true;
          } else if (val == "third") {
            this.third = true;
          } else if (val == "four") {
            this.four = true;
          }
        },
      },
      components: {
        "my-header": myHeader,
        "my-footer": myFooter,
      },
    });
  </script>
</html>
