<template>
  <div class="fullHeight">
    <!-- 导航条 -->
    <div class="home_title flex">
      <div class="title_l flex">
        <img
          v-if="LOGO_white"
          :src="'./img/logo/' + LOGO_white + '.png'"
          class="icon"
        />
        <span>{{ $t("message.homeLayout.title") }}</span>
      </div>
      <div class="title_c flex_space_b">
        <div v-for="item in navigationList" :key="item.id">
          <p
            :class="checked == item.id && 'checkedColor'"
            @click="
              () => {
                checked = item.id;
              }
            "
          >
            {{ item.name }}
          </p>
          <p></p>
        </div>
      </div>
      <div class="title_r">
        <el-button
          class="login_btn"
          size="small"
          type="primary"
          @click="loginBtn"
        >
          {{ $t("message.homeLayout.login") }}
        </el-button>
      </div>
    </div>
    <div class="content">
      <vue-scroll>
        <div class="content_mod1">
          <div class="mark"></div>
          <div class="title">工地管理专家</div>
          <div class="mod_content">
            帮助建设单位、施工方或工地管理者快速搭建标准化智慧工地管理平台，实现工地科技智慧管理，高效节能，构建建筑工地管理新生态。通过7X24小时不间断监控，可提供高质量数据并支持多种业务模式，实现大数据应用分析，更加有效、有针对性的管理。
          </div>
        </div>
        <div class="content_mod2">
          <div class="content_title">
            <div>平台核心功能</div>
            <div class="subhead">Platform core functions</div>
          </div>
          <el-carousel
            trigger="click"
            height="150px"
            :autoplay="false"
            arrow="never"
            class="carousel"
            indicator-position="none"
          >
            <el-carousel-item class="carousel-item">
              <div class="flex_space_b carousel_content">
                <div
                  class="item"
                  v-for="(item, index) in functionsList"
                  :key="index"
                >
                  <div class="flex">
                    <img :src="item.icon" class="icon" />
                    <span class="name">{{ item.name }}</span>
                  </div>
                  <div class="item_content">{{ item.content }}</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content_mod3">
          <div class="content_title">
            <div>智慧工地云平台应用场景图</div>
            <div class="subhead">Smart site application scenario</div>
          </div>
          <div class="scenario_wrap">
            <img src="@/assets/images/homeIntro/scene.png" class="scene_img" />
          </div>
        </div>
        <div class="content_mod4">
          <div class="content_title">
            <div>智慧工地云平台应用案例</div>
            <div class="subhead">Smart site application case</div>
          </div>
          <el-carousel
            trigger="click"
            height="150px"
            :autoplay="false"
            arrow="never"
            class="carousel"
            indicator-position="none"
          >
            <el-carousel-item class="carousel-item">
              <div class="carousel_content">
                <div
                  class="item"
                  v-for="(item, index) in caseList"
                  :key="index"
                >
                  <div class="flex">
                    <img :src="item.icon" class="icon" />
                  </div>
                  <div class="item_content">{{ item.content }}</div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="content_mod5">
          <div class="content_title">
            <div>市场与客户</div>
            <div class="subhead">
              多年积淀，拥有接入客户5000+，其中百强企业100+，国际客户30+
            </div>
          </div>
          <img src="@/assets/images/homeIntro/client.png" class="client_img" />
        </div>
      </vue-scroll>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      navigationList: [
        { name: "产品服务", id: 1 },
        { name: "SDK&工具", id: 2 },
        { name: "文档", id: 3 },
      ],
      checked: 1,
      LOGO_white: LOGO_white,

      functionsList: [
        {
          id: 1,
          name: "劳务管理",
          icon: require("@/assets/images/homeIntro/icon/icon1.png"),
          content:
            "工地人员信息录入、考勤统计。随时随地了解工地用工情况、提高安全管理及对工地整体的把控能力。",
        },
        {
          id: 2,
          name: "视频监控",
          icon: require("@/assets/images/homeIntro/icon/icon2.png"),
          content:
            "施工现场安装摄像点,进行不间断监控，实时掌握工地施工形象面貌和工程进度,及时发现施工过程中存在的安全风险。",
        },
        {
          id: 3,
          name: "安全教育",
          icon: require("@/assets/images/homeIntro/icon/icon3.png"),
          content:
            "三维动态的形式逼真模拟出多项VR应用场景，微信扫码视频学习、在线考试，提升安全意识。",
        },
        {
          id: 4,
          name: "进度管理",
          icon: require("@/assets/images/homeIntro/icon/icon4.png"),
          content:
            "统计分项进度情况，逾期任务预警推送，实时把控各进度的走向，确保整体工程在计划的项目周期内完工。",
        },
        {
          id: 5,
          name: "环境监测",
          icon: require("@/assets/images/homeIntro/icon/icon5.png"),
          content:
            "将工地的PM10，PM2.5，噪声等数据进行实时监测，当工地环境超标时，可主动开启降尘炮/围挡喷淋进行及时抑尘。",
        },
        {
          id: 6,
          name: "塔吊监控",
          icon: require("@/assets/images/homeIntro/icon/icon6.png"),
          content:
            "实时监测超载，超重等违规行为。加装虹膜识别/人脸识别设备，杜绝无证操作，降低事故发生风险。",
        },
        {
          id: 7,
          name: "升降机监控",
          icon: require("@/assets/images/homeIntro/icon/icon7.png"),
          content:
            "获取实时施工升降机运行数据，维保数据，满载声光报警，超载自动切断电路，提升对升降机设备的信息化管理，效预防事故发生。",
        },
        {
          id: 8,
          name: "工地广播",
          icon: require("@/assets/images/homeIntro/icon/icon8.png"),
          content:
            "智能广播系统。对工地现场不定时的播岀通知,应急疏散通知等。 具有分区点对点广播功能，实现精准警报，及时处理警告。",
        },
        {
          id: 9,
          name: "深基坑高支模",
          icon: require("@/assets/images/homeIntro/icon/icon9.png"),
          content:
            "基坑、高支模在线监测、基坑稳定性、压力、渗流量、支护等监测预警，可数据自动实时采集，无线传输实时预警。",
        },
        {
          id: 10,
          name: "AI识别",
          icon: require("@/assets/images/homeIntro/icon/icon10.png"),
          content:
            "安全帽识别、车辆识别、烟火检测工服识别、升降机人数检测、入侵检测、吸烟检测等多种AI算法。",
        },
        {
          id: 11,
          name: "能耗管理",
          icon: require("@/assets/images/homeIntro/icon/icon11.png"),
          content:
            "降低能耗使用,促进行为节能,減少浪费并限制不合理消耗,实现持续节能;提高智能管理水平。",
        },
        {
          id: 12,
          name: "安全质量",
          icon: require("@/assets/images/homeIntro/icon/icon12.png"),
          content:
            "记录工地日常安全质量情况，发现问题，立即上报，随时拍、随时传；电子档永久保存，支持在线打印下载。",
        },
      ],

      caseList: [
        {
          id: 1,
          icon: require("@/assets/images/homeIntro/case1.png"),
          content: "宜恩县今典城市之星(一期)项目",
        },
        {
          id: 2,
          icon: require("@/assets/images/homeIntro/case2.png"),
          content: "内蒙古赤峰市住建局智慧工地",
        },
        {
          id: 3,
          icon: require("@/assets/images/homeIntro/case3.png"),
          content: "珠玑城际轨道智慧工地平台",
        },
        {
          id: 4,
          icon: require("@/assets/images/homeIntro/case4.png"),
          content: "南方电网云南省智慧工地",
        },
        {
          id: 5,
          icon: require("@/assets/images/homeIntro/case5.png"),
          content: "恩施荆南建设工程有限公司“智慧工地”",
        },
        {
          id: 6,
          icon: require("@/assets/images/homeIntro/case6.png"),
          content: "武汉东西湖区智慧工地项目",
        },
        {
          id: 7,
          icon: require("@/assets/images/homeIntro/case7.png"),
          content: "中国建筑深圳智慧工地",
        },
        {
          id: 8,
          icon: require("@/assets/images/homeIntro/case8.png"),
          content: "上海宝冶集团智慧工地项目",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    loginBtn() {
      this.$router.push({ path: "/login" });
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
  align-items: center;
}

.flex_space_b {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.home_title {
  box-sizing: border-box;
  padding: 0 65px 0 23px;
  background: @--bg-color-primary;
  height: 61px;
}

.checkedColor {
  color: @--color-primary;
  position: relative;
}
.checkedColor::before {
  content: "";
  width: 20px;
  height: 3px;
  background: @--color-primary;
  position: absolute;
  bottom: -8px;
  left: calc(50% - 10px);
  border-radius: 2px;
}

.title_l {
  flex-grow: 2;
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 0;

  .icon {
    margin-right: 14px;
    width: auto;
    height: 25px;
  }
}

.title_c {
  flex-grow: 2;
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #feffff;
  letter-spacing: 0;
  cursor: pointer;
}

.title_r {
  flex-grow: 8;
  text-align: right;
}

.content {
  height: calc(100% - 61px);
  background: #f3f4f7;
  width: 100%;
  .content_mod1 {
    box-sizing: border-box;
    padding: 153px 0 0 304px;
    color: #fff;
    width: 100%;
    height: 505px;
    background-image: url("../../assets/images/homeIntro/title_bg.gif");
    background-repeat: no-repeat;
    margin-bottom: 80px;
    .mark {
      width: 23px;
      height: 7px;
      background: #fff;
    }
    .title {
      font-size: 22px;
      background: rgba(0, 0, 0, 0);
      text-align: left;
      font-family: PingFangSC-Regular;
      margin: 10px 0 28px;
    }
    .mod_content {
      width: 534px;
      height: 179px;
      line-height: 31px;
      color: rgba(255, 255, 255, 1);
      font-size: 15px;
      text-align: justify;
      font-family: PingFangSC-Regular;
    }
  }

  .content_title {
    text-align: center;
    color: rgba(38, 45, 73, 1);
    font-size: 28px;
    font-family: PingFangSC-Medium;
    .subhead {
      opacity: 0.4;
      color: rgba(38, 45, 73, 1);
      font-size: 15px;
      line-height: 28px;
      font-family: PingFangSC-Light;
    }
  }

  .content_mod2 {
    .carousel {
      width: calc(100% - 608px);
      height: 770px;
      margin: 64px auto 0;
    }
    /deep/.el-carousel__container {
      width: 100% !important;
      height: 100% !important;
    }
    .carousel_content {
      width: 100%;
      height: 100%;
      flex-wrap: wrap;
      align-items: initial;
      .item {
        width: 282px;
        height: 205px;
        border-radius: 5px;
        background-color: #ffffff;
        box-shadow: 0px 8px 9px 0px rgba(239, 243, 249, 1);
        border: 2px solid rgba(255, 255, 255, 1);
        box-sizing: border-box;
        background: linear-gradient(#eeeff0, #fefefe);
        padding: 20px 30px;
        .name {
          color: rgba(0, 0, 0, 1);
          font-size: 20px;
          text-align: center;
          font-family: PingFangSC-Medium;
          margin-left: 6px;
        }
        .icon {
          width: 51px;
          height: 39px;
        }
        .item_content {
          margin-top: 10px;
          line-height: 28px;
          color: rgba(138, 150, 168, 1);
          font-size: 14px;
          text-align: justify;
          font-family: PingFangSC-Regular;
        }
      }
    }
  }

  .content_mod3 {
    margin-top: 50px;
    width: 100%;
    height: 1000px;
    background-color: rgba(236, 240, 249, 0.3);
    box-sizing: border-box;
    padding-top: 60px;
    .scenario_wrap {
      width: 1311px;
      height: 763px;
      box-sizing: border-box;
      padding: 38px 60px 24px;
      border-radius: 5px;
      box-shadow: 0px 8px 9px 0px rgba(239, 243, 249, 1),
        0px 12px 21px 0px rgba(255, 255, 255, 0);
      margin: 36px auto 0;
      background: linear-gradient(#f5f6f9, #ffffff);
      .scene_img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .content_mod4 {
    width: 100%;
    height: 715px;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    padding-top: 60px;
    .carousel {
      width: calc(100% - 608px);
      height: 480px;
      margin: 50px auto 0;
    }
    /deep/.el-carousel__container {
      width: 100% !important;
      height: 100% !important;
    }
    .carousel_content {
      width: 100%;
      height: 480px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      align-items: initial;
      .item {
        width: 295px;
        height: 195px;
        text-align: center;
        .icon {
          width: 100%;
          height: 161px;
        }
        .item_content {
          margin-top: 14px;
          color: rgba(138, 150, 168, 1);
          font-size: 14px;
          font-family: PingFangSC-Regular;
          text-align: center;
        }
      }
    }
  }

  .content_mod5 {
    margin-top: 71px;
    height: 503px;
    text-align: center;
    .client_img {
      margin-top: 52px;
      width: calc(100% - 608px);
      height: auto;
    }
  }
}
</style>