<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-12-27 10:02:02
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-12-30 09:45:10
 * @FilePath: /huaxin-web/src/views/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="index-container">
    <div class="top"></div>
    <div class="bottom"></div>

    <Left @clickShow="clickShow"/>
    <Right :show="show"/>

    <div class="mapChange">
      <div :class="{ active: mapStyle }" @click="mapChange(2)">全景地图</div>
      <div :class="{ active: !mapStyle }" @click="mapChange(1)">三维地图</div>
    </div>
    <!-- 3d地图 -->
    <Map3d :show="show" v-if="!mapStyle" />
    <!-- 高德地图 -->
    <GaodeMap :show="show" v-if="mapStyle" />
    <!-- 临检设备 -->
    <!--<CloseInspectDevice/>-->
  </div>
</template>

<script>
import Left from "@/views/indexcomponents/index/Left";
import Right from "@/views/indexcomponents/index/Right";
import Map3d from "./indexcomponents/3dmap";
import GaodeMap from "./indexcomponents/gaodemap";
// import CloseInspectDevice from "./indexcomponents/closeinspectdevice";

export default {
  name: "index",
  components: {
    Map3d,
    GaodeMap,
    Left,
    Right
  },
  data() {
    return {
      mapStyle: true,
      show:true,
    };
  },
  mounted() {},
  methods: {
    mapChange(num) {
      if (num == 1) {
        this.mapStyle = false;
      } else {
        this.mapStyle = true;
      }
    },
    clickShow(show){
      this.show=show;
    }
  },
};
</script>

<style scoped lang="scss">
.index-container {
  width: 100%;
  height: 100vh;
  position: relative;
  .top {
    position: absolute;
    left: 0;
    right: 0;
    top: -15px;
    height: 116px;
    background: url("~@/assets/indexImg/topBg.png") no-repeat center;
    z-index: 100;
  }
  .bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom:0;
    height: 44px;
    background: url("~@/assets/indexImg/bottomBg.png") no-repeat center;
    z-index: 100;
  }
}
.mapChange {
  left: 60px;
  top: 40px;
  color: #fff;
  padding: 5px;
  position: absolute;
  display: flex;
  z-index: 9999;
  div {
    border: 1px solid #339cc9;
    padding: 3px 6px;
    margin-left: 8px;
    color: #339cc9;
    cursor: pointer;
    font-size: 14px;
    &.active,
    &:hover {
      background-color: #053b6a;
      color: #2cd5db;
    }
  }
}
</style>
