<template>
    <div class="headers">
        <div class="js_snap js_intro is_top is_started" data-snap-needs-cancel="" data-enable-bit-scroll="" data-top="">
            <div id="header">
                <div class="inner">
                    <div class="hflex acent jbetween">
                        <div class="header_home point" @click="toDetail(0)">绿巍仿真植物有限公司</div>
                        <div class="hflex acent" style="margin-right: 150px">
                            <div class="headers_text point" @click="toDetail(2)">新闻资讯</div>
                            <div class="headers_text point" @click="toDetail(1)">产品服务</div>
                            <div class="headers_text point" @click="toDetail(3)">跨境贸易</div>
                            <div class="headers_text point" @click="toDetail(4)">关于我们</div>
                            <div class="headers_text point" @click="toDetail(5)">联系我们</div>
                        </div>      
                    </div>
                    <div class="btn menu absolutes"> 
                        <button class="fit" @mouseover="mouseOver()" @mouseleave="mouseLeave()" :class="over?'over':''" @click="toshow()">
                            <ul class="absolute full__w" v-if="!show" style="left: 0">
                                <li class="absolute" :class="over?'absolute1':''"></li>
                                <li class="absolute" :class="over?'absolute2':''"></li>
                                <li class="absolute" :class="over?'absolute3':''"></li>
                            </ul>
                            <ul class="absolute full__w" v-if="show">
                                <li class="absolute_1" :class="over?'absolute_11':''"></li>
                                <li class="absolute_2"></li>
                                <li class="absolute_3" :class="over?'absolute_33':''"></li>
                            </ul>
                        </button>
                    </div>
                    <div class="inner_line"></div>
                </div>

                <!-- 点击弹出的黑框 -->
                <div id="floating_menu" ref="floating_menu">
                    <div class="inner">
                        <div class="frame">
                            <div class="title1">绿巍仿真植物有限公司</div>
                            <div class="line"></div>
                            <div class="text_box point" @click="toDetail(1)">
                                <div class="text1">产品服务</div>
                                <div class="text2">Product Services</div>
                            </div>
                            <div class="text_box point" @click="toDetail(2)">
                                <div class="text1">新闻资讯</div>
                                <div class="text2">News</div>
                            </div>
                            <div class="text_box point" @click="toDetail(3)">
                                <div class="text1">跨境贸易</div>
                                <div class="text2">Cross-border Trade</div>
                            </div>
                            <div class="text_box point" @click="toDetail(4)">
                                <div class="text1">关于我们</div>
                                <div class="text2">About us</div>
                            </div>
                            <div class="text_box point" @click="toDetail(5)">
                                <div class="text1">联系我们</div>
                                <div class="text2">Contact us</div>
                            </div>
                            <div class="line"></div>
                        </div>
                    </div>
                </div>
            </div>
           
            
        </div>
    </div>
</template>
<script>
    var that = ""
    export default {
        
        data() {
            return {
                show: false,
                over: false,
            }
        },
        created() {
            that = this
        },
        methods: {
            // 显示/隐藏菜单
            toshow() {
                if(this.show) {
                    this.$refs.floating_menu.style.display = 'none';
                    this.show = false
                } else {
                    this.$refs.floating_menu.style.display = 'block';
                    this.show = true
                }
            
            },
            // 鼠标移入
            mouseOver() {
                this.over = true
            },
            // 鼠标移出
            mouseLeave() {
                this.over = false
            },
            // 点击进入菜单详情
            toDetail(index) {
                if(index == '0') {
                    that.$router.push('./index')
                }else if(index == '1') {
                    that.$router.push('/product')
                } else if(index == '2') {
                    that.$router.push('/news')
                } else if(index == '3') {
                    that.$router.push('/trade')
                } else if(index == '4') {
                    that.$router.push('/about')
                } else if(index == '5') {
                    that.$router.push('/contact')
                }
            }
        }
    }
    
</script>
<style scoped>
@import '../assets/css/common.css';
@import '../assets/css/top.css';
@import '../assets/css/index.css';

.headers {
    position: absolute;
    top: 83px;
    width: 100%;
}
.headers .header_home {
    font-size: 38px;
    font-weight: 600;
    color: #FFFFFF;
    white-space: nowrap;

}
.headers .header_home:hover {
    color: #666;

}
.headers .headers_text:hover {
    color: #666;

}

.headers .headers_text {
    font-size: 28px;
    font-weight: 600;
    color: #FFFFFF;
    padding: 0 25px;
    white-space: nowrap;
}
@media screen and (max-width: 750px) {
    .headers .headers_text {
        display: none;
    }
    .absolutes {
        position: absolute;
        top: 20px !important;
    }
}
.inner_line {
    margin-top: 33px;
    width: 100%;
    height: 4px;
    background: #FFFFFF;
}
.absolutes {
    position: absolute;
    top: 20px !important;
}
</style>