miao/miaomiao/www/templates/home/index.html

<ion-view view-title="瞄喵">
    <ion-nav-buttons side="left">
        <button class="button button-clear" style="height: 30px; width: 30px;margin-top: 1.6px;margin-left: 8px;" ng-click="openPopover($event)">
            <img src="img/icon_menu.svg" style="height: 60%; width: 100%;">
        </button>
        <button class="button button-clear" style="height: 30px; width: 30px;font-size: 25px;" ng-click="toggleLeftSideMenu()">
            <img src="img/btn_filter.svg" style="height: 60%; width: 100%;">
        </button>
    </ion-nav-buttons>
    <ion-nav-buttons side="right">
        <button class="button button-clear" style="height: 30px; width: 30px; margin-top: 2px" ui-sref="app.home_search">
            <img src="img/icon_search.svg" style="height: 65%; width: 100%">
        </button>
        <button class="button button-clear" style="height: 37px; margin-top: 0.5px" ui-sref="app.message">
            <img src="img/icon_message_h.svg" style="height: 60%; width: 100%">
        </button>
    </ion-nav-buttons>
    <ion-side-menus>
        <ion-side-menu-content drag-content="false">
            <ion-content>
                    <!--下拉刷新-->
                    <ion-refresher pulling-text="下拉刷新" on-refresh="load(true)">
                    </ion-refresher>
                    <div class="tabs-striped tabs-top">
                        <div class="tabs" style="top:0">
                            <a ng-class="type=='hot'?'tab-item active':'tab-item'" ng-click="changetype('hot')">
                                热门
                            </a>
                            <a ng-class="type=='trend'?'tab-item active':'tab-item'" ng-click="changetype('trend')">
                                潮流
                            </a>
                            <a ng-class="type=='news'?'tab-item active':'tab-item'" ng-click="changetype('news')">
                                最新
                            </a>
                        </div>
                    </div>
                    <div class="icontent">
                        <ion-slides options="data.sliderOptions" slider="data.sliderDelegate">
                            <ion-slide-page ng-repeat="banner in index.banners">
                                <div class="box banner" style="height: 150px"><img ng-src="{{banner.value}}" style="width: 100%; height: 100%" /></div>
                            </ion-slide-page>
                        </ion-slides>
                        <div class="row" ng-if="index.users.length>0" style="background: #FAFAFA;height:70px;padding: 0 5px;">
                            <div class="col col-10" style="margin-top: 7%" ng-click="next(1)">
                                <i class="icon ion-ios-arrow-left" style="font-size: 1.5rem; color: #00C3DA; line-height: 100%"></i>
                            </div>
                            <div class="col" style="overflow: hidden;padding:0 5px;" on-drag-right="next(2)" on-drag-left="next(1)">
                                <span class="subcontent" ng-repeat="user in index.users">
                                    <img ng-click="clickAvatar($index)" ng-if="$index<4" ng-src="{{user.avatar |avator}}" ng-class="{'defaultClass':$index !=chosedIndex,'chosenClass':$index ==chosedIndex}" style="padding: 0.5%;" />
                                </span>
                            </div>
                            <div class="col col-10" style="margin-top: 7%; text-align: right" ng-click="next(2)">
                                <i class="icon ion-ios-arrow-right" style="font-size: 1.5rem; color: #00C3DA;"></i>
                            </div>
                        </div>
                        <div style="background:#E6E6E6;height:10px">
                        </div>
                        <div class="list">
                            <div class="item mainitem" ng-repeat="item in index.dreams">
                                <div class="row">
                                    <div class="col avatarCol">
                                        <div class="fl" style="width: 27%">
                                            <img ng-src="{{item.user.avatar | avator}}" ng-click="toUserDetail(item.user.id)" />
                                        </div>
                                        <div class="myblock">
                                            <div>{{item.user.nickname}}<span>{{item.user.birthday | getage}}岁</span></div>
                                            <div class="mysecond">{{item.user.city}}</div>
                                        </div>
                                    </div>
                                    <div class="col" style="text-align:right">
                                        <div style="margin-top:4px">
                                            <img ng-src="img/icon_follow.svg" class="iheart">
                                            <span style="color: #F16571">{{item.care_num}}</span>
                                            <span>人关注</span>
                                        </div>
                                        <div class="mysecond">剩余{{item.end_time | lastDate}}天</div>
                                    </div>
                                </div>
                                <div ng-click="toDetail(item.id)">
                                    <img ng-src="{{item.img.pic}}" />
                                    <div class="homeDream">
                                        <p style="font-size: 16px">{{ item.name }}</p>
                                        <p>{{ item.about }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--上拉更多-->
                    <ion-infinite-scroll ng-if="filter.hasMore" on-infinite="load(false)" distance="10%"></ion-infinite-scroll>
            </ion-content>
        </ion-side-menu-content>
        <!-- Left menu -->
        <ion-side-menu side="left" width="200">
            <ion-header-bar class="expanded" menu-close>
                喵喵
            </ion-header-bar>
            <ion-content class="stable-bg has-expanded-header">
                <ion-list>
                    <ion-item>
                        筛选
<div class="list">
    <!--<label class="item item-select item-select-width">
     <span class="input-label">
         性别
     </span>
     <select name="sex" ng-model="vm.sex">
         <option value="" selected>所有</option>
         <option value="0" selected>男</option>
         <option value="1">女</option>
     </select>
    </label>-->
   <div class="item">
       <button class="button button-stable {{filter.sex==1?'button-calm':''}}" ng-click="changeFilter('1')" style="min-width:3rem">
           男
       </button>
       <button class="button button-stable {{filter.sex==2?'button-calm':''}}" ng-click="changeFilter('2')" style="min-width:3rem">
           女
       </button>
   </div>
   <div class="item">
       <p>年龄</p>
       <div class="row">
           <div class="col">
               <button class="button button-stable {{filter.age==1?'button-calm':''}}" ng-click="changeFilter('18-21')"  style="min-width:3rem">
                   18-21
               </button>
           </div>
           <div class="col">
               <button class="button button-stable {{filter.age==2?'button-calm':''}}" ng-click="changeFilter('22-25')" style="min-width:3rem">
                   22-25
               </button>
           </div>
          
       </div>
       <div class="row">
           <div class="col">
               <button class="button button-stable {{filter.age==3?'button-calm':''}}" ng-click="changeFilter('26-29')" style="min-width:3rem">
                   26-29
               </button>
           </div>
           <div class="col">
               <button class="button button-stable  {{filter.age==4?'button-calm':''}}" ng-click="changeFilter('30-33')" style="min-width:3rem">
                   30-33
               </button>
           </div> 
          
       </div>
       <div class="row">
           <div class="col">
               <button class="button button-stable {{filter.age==5?'button-calm':''}}" ng-click="changeFilter('34-37')" style="min-width:3rem">
                   34-37
               </button>
           </div>
           <div class="col">
               <button class="button button-stable  {{filter.age==6?'button-calm':''}}" ng-click="changeFilter('>38')" style="min-width:3rem">
                   >38
               </button>
           </div> 
       </div>       
   </div>
  <label class="item item-select item-select-width">
    <span class="input-label">地区</span>
    <select name="city" ng-model="filter.city">
        <option value="" selected>所有</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
        <option value="成都">成都</option>
        <option value="杭州">杭州</option>
        <option value="武汉">武汉</option>
        <option value="重庆">重庆</option>
        <option value="南京">南京</option>
        <option value="天津">天津</option>
        <option value="苏州">苏州</option>
        <option value="西安">西安</option>
        <option value="长沙">长沙</option>
        <option value="沈阳">沈阳</option>
        <option value="青岛">青岛</option>
        <option value="郑州">郑州</option>
        <option value="大连">大连</option>
        <option value="东莞">东莞</option>
        <option value="宁波">宁波</option>
    </select>
  </label>
    <div class="padding">
        <button class="button button-block button-calm" menu-close ng-click="doFilter()">
            确定
        </button>
    </div>
</div>
                    </ion-item>
                </ion-list>
            </ion-content>
        </ion-side-menu>
    </ion-side-menus>
    <script id="my-popover.html" type="text/ng-template">
        <ion-popover-view class="pview">
            <ion-content>
                <div class="list">
                    <a class="item item-icon-left" ng-click="qrscan()">
                        <i class="icon ion-qr-scanner"></i>
                        扫一扫
                    </a>
                    <a class="item item-icon-left" ui-sref="app.home_add">
                        <i class="icon ion-plus"></i>
                        创造梦想
                    </a>
                    <a class="item item-icon-left" ui-sref="app.my">
                        <i class="icon ion-android-person"></i>
                        个人中心
                    </a>
                    <a class="item item-icon-left" ui-sref="app.home_collect">
                        <i class="icon ion-ios-folder-outline"></i>
                        我的收藏
                    </a>
                </div>
            </ion-content>
        </ion-popover-view>
    </script>
</ion-view>