<!-- <template>
  <iframe src="http://localhost:8080" frameborder="0" width="100%" height="1000px"></iframe>
</template> -->
<template>
  <div id="index">
    <!-- 汽车列表 -->
    <router-view name="Car"></router-view>
    <!-- 导航栏 -->
    <Nav></Nav>
    <!-- 地图 -->
    <Map @click.native="goToIndex"></Map>
    <!-- 用户信息 -->
    <div id="user" :class="{open: show}">
      <router-view></router-view>
      <router-view name="Safe"></router-view>
    </div>
  </div>
</template>

<script>
import Map from '@/views/maps/index'
import Nav from '@/components/Nav/Nav'
export default {
    name: 'Index',
    components: {
        Map,
        Nav
    },
    computed: {
      show() {
        return this.$route.name === 'Index' ? false : true
      },
      
    },
    methods: {
      goToIndex() {
        this.$router.push({path: '/'})
      }
    },
}
</script>

<style lang="scss" scoped>
    #index {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        #user {
          position: fixed;
          right: -408px;
          top: 0;
          bottom: 0;
          width: 408px;
          height: 100%;
          overflow: hidden;
          transition: all	.3s ease 0s;
          &.open {
            right: 0;
          }
        }
    }
</style>