<template>
    <div class="ht-base-layout-top-demo">
        <div class="layout">
            <ht-base-header class="demo-layout-header">
                <div class="demo-layout-logo">
                    <img class="logo-img" src="http://39.106.250.14:8082/base-components/static/layout_logo.svg" alt="">
                </div>
                <div class="demo-layout-nav">
                    <ht-base-menu mode="horizontal" theme="primary" active-name="1">
                        <ht-base-menu-item name="1">
                            <ht-base-icon type='LiRa_telephone' size=14 />
                            顶部导航菜单
                        </ht-base-menu-item>
                        <ht-base-menu-item name="2">
                            <ht-base-icon type='LiRa_comment' size=14 />
                            顶部导航菜单
                        </ht-base-menu-item>
                        <ht-base-submenu name="3">
                            <span slot="title">
                              <ht-base-icon type='LiRa_user' size=14 />
                              顶部导航菜单
                            </span>
                            <ht-base-menu-group title="标题">
                                <ht-base-menu-item name="3-2">导航菜单3-1</ht-base-menu-item>
                                <ht-base-menu-item name="3-2">导航菜单3-2</ht-base-menu-item>
                            </ht-base-menu-group>
                            <ht-base-menu-group title="标题">
                                <ht-base-menu-item name="3-3" disabled>导航菜单3-3</ht-base-menu-item>
                            </ht-base-menu-group>
                        </ht-base-submenu>
                        <ht-base-menu-item name="4">
                            顶部导航菜单
                        </ht-base-menu-item>
                        <ht-base-submenu name="5">
                            <span slot="title" class="submenu-title-wrapper">
                              顶部导航菜单
                            </span>
                            <ht-base-menu-item name="5-1">导航菜单5-1</ht-base-menu-item>
                            <ht-base-menu-item name="5-2">导航菜单5-2</ht-base-menu-item>
                            <ht-base-menu-item name="5-3" disabled>导航菜单5-3</ht-base-menu-item>
                        </ht-base-submenu>
                    </ht-base-menu>
                </div>
            </ht-base-header>
            <ht-base-content class="demo-layout-content">
                <ht-base-breadcrumb class="demo-layout-breadcrumb">
                    当前位置：
                    <ht-base-breadcrumb-item to="/">首页</ht-base-breadcrumb-item>
                    <ht-base-breadcrumb-item to="/component/base-form-demo">商品列表</ht-base-breadcrumb-item>
                    <ht-base-breadcrumb-item>商品详情</ht-base-breadcrumb-item>
                </ht-base-breadcrumb>
                <div :style="{margin: '20px 20px 0 20px', background: '#fff', minHeight: '500px'}">content</div>
                <ht-base-footer class="demo-layout-footer-center">2019 &copy; Tydic UX and Interactive Design Center</ht-base-footer>
            </ht-base-content>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseLayoutTopDemo',
        data() {
            return {
                current: ['phone']
            }
        }
    }
</script>
<style lang="less">
    .ht-base-layout-top-demo {
        overflow-x: scroll;
        .layout {
            min-width: 960px;
            border: 1px solid #d7dde4;
            background: #f5f7f9;
            position: relative;
            border-radius: 4px;
            overflow: hidden;

            .demo-layout-header {
                background: #228EF8;
                padding: 0 16px;
                display: flex;
                align-items: center;
                box-sizing: border-box;

                .demo-layout-logo .logo-img {
                    width: 176px;
                    height: 30px;
                }

                .demo-layout-nav {
                    margin-left: auto;
                }
            }

            .demo-layout-content {
                height: 200px;
                overflow-y: scroll;

                .demo-layout-breadcrumb {
                    margin: 20px;
                }

                .demo-layout-footer-center {
                    text-align: center;
                }
            }
        }
    }
</style>

