<template>
    <div>
        <div class="menu-fade" v-if="flag" @click="flag=false"></div>
        <div class="menu clr">
            <b class="iconfont icon-liedanbiao fr" @click="flag=!flag" :style="{color:color}"></b>
            <div v-if="flag">
                <i class="popover-arrow"></i>
                <ul class="menu-view">
                    <li>
                        <a href="/v3?ptag=selfshop-topnav"><i class="icon iconfont icon-shouye"></i>首页</a></li>
                    <li>
                        <a href="/v3/lxshop?ptag=selfshop-topnav"><i class="icon iconfont icon-lianying"></i>联营商城</a>
                    </li>
                    <li>
                        <a href="/v3/xianhuo?ptag=selfshop-topnav"><i class="icon iconfont icon-liexinziying"></i>自营现货</a>
                    </li>
                    <li>
                        <a href="/v3/brand/map?ptag=selfshop-topnav"><i class="icon iconfont icon-pinpai"></i>品牌之家</a>
                    </li>
                    <li class="mui-table-view-cell ">
                        <a class="zytabgo" href="/v3/joincart?ptag=selfshop-topnav"><i class="icon iconfont icon-gouwuche1"></i>购物车</a>
                    </li>
                    <li>
                        <a href="/v3/user?ptag=selfshop-topnav"><i class="icon iconfont icon-huiyuanzhongxin"></i>会员中心</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

  export default {
    name: 'menus',
    props: {
      color: {
        type: String,
        default: '#666'
      },
    },
    data() {
      return {
        flag: false
      }
    }
  }
</script>


<style lang="scss">
    .menu-fade {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .3);
    }

    .menu {
        position: fixed;
        right: 10px;
        top: 13px;
        z-index: 999;
        b {
            font-size: 18px;
            color: #666;
        }
        .popover-arrow {
            position: absolute;
            z-index: 1000;
            top: 11px;
            right: 0px;
            overflow: hidden;
            width: 26px;
            height: 26px;
            &:after {
                position: absolute;
                top: 19px;
                left: 0;
                width: 26px;
                height: 26px;
                content: ' ';
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                border-radius: 3px;
                background: #333;
            }
        }
        .menu-view {
            margin-top: 36px;
            background: #333;
            font-size: 15px;
            border-radius: 2px;
            max-height: 300px;
            li {
                position: relative;
                overflow: hidden;
                padding: 11px 15px;
                transform-style: preserve-3d;
                a {
                    color: #fff;
                    i {
                        margin-right: .1rem;
                    }
                }
            }
        }
    }
</style>