<template>
    <div class="ht-base-menu-custom1-demo" style="overflow-x: scroll">
        <div class="ht-menu-page-top" style="width: 900px;">
            <div class="ht-menu-wrapper">
                <div class="wrapper-left">
                    <div class="wrapper-item item-user"><span>用户名：</span><span>管理员</span></div>
                    <div class="wrapper-spacer"></div>
                    <div class="wrapper-item">
                        <ht-base-icon type='LiRa_information' size=14 />
                        <span>消息（20）</span>
                        <ht-base-badge status="error" style="top: -10px;left: -5px;"/>
                    </div>
                </div>
                <div class="wrapper-right">
                    <div class="wrapper-item">
                        <ht-base-icon type='LiRa_home' size=14 />
                        <span>网站首页</span></div>
                    <div class="wrapper-spacer"></div>
                    <div class="wrapper-item">
                        <ht-base-icon type='LiRa_user' size=14 />
                        <span>会员中心</span></div>
                    <div class="wrapper-spacer"></div>
                    <div class="wrapper-item">
                        <ht-base-icon type='LiRa_help' size=14 />
                        <span>帮助中心</span></div>
                    <div class="wrapper-spacer"></div>
                    <div class="wrapper-item download-box">
                        <ht-base-icon type='LiRa_phone' size=14 />
                        <span>下载</span>
                        <div class="download-container">
                            <div class="download-wrapper">
                                <div class="d-left">
                                    <img width="80px" height="80px" src="http://39.106.250.14:8082/base-components/static/u5810.svg"
                                         alt="二维码">
                                </div>
                                <div class="d-right">
                                    <div>扫一扫，下载客户端</div>
                                    <div>
                                        <div class="ios">
                                            <ht-base-icon type='LiRa_apple' size=14 />
                                        </div>
                                        <div class="android">
                                            <ht-base-icon type='LiRa_android' size=14 />
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wrapper-spacer"></div>
                    <div class="wrapper-item">
                        <ht-base-icon type='LiRa_star' size=14 />
                        <span>收藏网站</span></div>
                    <div class="wrapper-spacer"></div>
                    <div class="wrapper-item item-tel"><span>客服电话：</span><span>400-400-4000</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseMenuCustom1Demo'
    }
</script>

<style lang="less">
    .ht-base-menu-custom1-demo {
        height: 150px;
        .wrapper-item {
            /deep/.ivu-badge-status-dot{
                width: 6px;
                height: 6px;
            }
            .ht-base-icon {
                font-size: 16px;
                padding: 0 8px 0 0;
            }
            .ios, .android {
                .ht-base-icon {
                    font-size: 30px;
                    padding: 8px 0 0 0;
                }
            }
        }
    }
    .ht-menu-page-top {
        width: 100%;
        height: 30px;
        line-height: 30px;
        border-bottom: 1px solid #d7d7d7;
        background-color: #fafafa;
        .ht-menu-wrapper {
            width: 90%;
            margin: 0 auto;
            .wrapper-left {
                float: left;
                overflow: hidden;
            }

            .wrapper-right {
                float: right;
            }
            .wrapper-item {
                float: left;
                font-size: 12px;
                cursor: pointer;

                &:hover {
                    color: #228ef8;
                }
            }
            .wrapper-spacer {
                float: left;
                width: 1px;
                height: 12px;
                margin: 9px 10px 0 10px;
                padding: 0;
                background: #ccc;
            }
            .item-user, .item-tel {
                color: #228ef8;
            }
            .download-box {
                position: relative;
                &:hover .download-container {
                    display: block;
                }
                .download-container {
                    position: absolute;
                    top: 30px;
                    left: -10px;
                    height: 130px;
                    padding-top: 10px;
                    display: none;
                    .download-wrapper {
                        width: 240px;
                        height: 120px;
                        padding: 10px;
                        border: 1px solid #d7d7d7;
                        & > div {
                            float: left;
                            width: 100px;
                            height: 100px;
                        }
                        .d-left {
                            img {
                                margin-top: 10px;
                            }
                        }
                        .d-right {
                            color: #595959;
                            width: 110px;
                            margin-left: 5px;
                            .ios, .android {
                                color: #cccccc;
                                float: left;
                                width: 55px;
                                height: 60px;
                                font-size: 30px;
                                text-align: center;
                                line-height: 60px;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
