<?xml version="1.0" encoding="UTF-8"?>

<ui namespace="VankeTopMenuBoardCell_iPhone">
    <linear class="wrapper">
        <image class="bg" />
        <linear orientation="h" class="top-menu">
            <linear orientation="v" class="menu-item">
                <button class="menu" id="menuCommunity">社区2049</button>
            </linear>
            <linear orientation="v" class="menu-item">
                <button class="menu" id="menuCenter">万科中心</button>
            </linear>
            <linear orientation="v" class="menu-item">
                <button class="menu" id="menuSqure">万科广场</button>
            </linear>
            <image id="indictor" class="indictor community" />
        </linear>
    </linear>
    
    <style type="text/css">
        .wrapper {
            width: 100%;
            height: 100%;
        }
        
        .wrapper .bg {
            image-mode: fit;
            position: absolute;
            left: 0;
            top: 0;
            background-color:#d3d3d3;
        }
        
        .top-menu {
            heith: 100%;
            width: 100%;
        }
        
        .menu-item {
            width: 33.33%;
            height: 100%;
        }
        
        .menu-item > .menu {
            text-align: center;
            font-size: 18px;
            color: #646467;
            font-weight: bold;
            background-color: #e8e8e8;
        }
        
        #menuCommunity, #menuCenter {
            padding-right: 1px;
        }

        #menuCommunity.active {
            background-color: #ed1b23;
            color: white;
        }
        
        #menuCenter.active {
            background-color: #5435ad;
            color: white;
        }
        
        #menuSqure.active {
            background-color: #ea6402;
            color: white;
        }
        
        .top-menu .indictor {
            display: none;
            image-src: url(right_icon.png);
            position: absolute;
            top: 50%;
        }
    
        .top-menu .indictor.community {
            display: block;
            left: -33.33%;
        }
        
        .top-menu .indictor.center {
            display: block;
            left: 0;
        }
        
        .top-menu .indictor.squre {
            display: block;
            left: 33.33%;
        }
        
    </style>
</ui>
