<template>
    <div class="Container">
        <div class="icon" @click="openphoneModel">
			<img src="@/assets/images/loginPage/phone.svg" alt="">
		</div>
		<phoneModel ref="phoneModel"></phoneModel>
    </div>
</template>
<script>
	import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs,router } from "vue";
	import phoneModel from "./phoneModel.vue";
    export default defineComponent({
        name: "login",
		components: {
		    phoneModel
		},
		setup() {
			let phoneDom = reactive({
				phoneModel:null
			})
			const openphoneModel = ()=>{
				phoneDom.phoneModel.init()
			}
			onMounted(()=>{
				
			})
			return {
				...toRefs(phoneDom),
				openphoneModel,
            }
		},
    })
</script>
<style scoped lang="less">
.Container{
	position: relative;
	.icon{
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #dadce0;
		border-radius: 50%;
		cursor: pointer;
		&:hover{
			background: #f8faff;
		}
		img{
			width: 18px;
			height: 18px;
		}
	}
	&.Container:hover{
	}
}
</style>
