<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link>
            <span> | </span>
            <router-link to="/123">123</router-link>
        </div>
        <router-view/>
    </div>
</template>

<script>
	import tooltip from './components/tooltip'
	export default {
		name: 'app',
		mounted() {
			document.body.addEventListener('click',() => {
				this.$popup({
                    // mask:false,
                    position:{
                    	left: 150,
                        top: 150
                    },
                    transitionName: 'fadeout',
					// blur: 10,    // 弹窗背景虚化
					// outline: {  // 框线和四个角的样式
					// 	mode:'0',
					// 	color:'#25d4ff',
					// 	size:'15',
					// 	margin:'-24',
					// 	showBorder: false,
					// 	border:'1px solid #25d4ff'
					// },
					component: tooltip,
					monopoly: 'xixi',
					// trackMouse: true,  // 弹窗是否追随鼠标位置
                    closeImg: '123'
				})
			})

		}
	}
</script>

<style lang="scss">
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    *{
        padding: 0;
        margin: 0;
    }
    .fadeout-enter,.fadeout-leave-to{
        transform: translateX(50%);
    }
    .fadeout-enter-to,.fadeout-leave{
        transform: translateX(0);
    }
    .fadeout-enter-active,.fadeout-leave-active{
        transition: all .6s;
    }
</style>
