<ion-view view-title="喵喵"> 
    <ion-nav-buttons side="right">
        <button class="button button-clear icon ion-email-unread"></button>
        <button class="button button-clear icon ion-ios-compose-outline" style="padding-left:10px"></button>
    </ion-nav-buttons>
    <ion-content style="background-color:#F3F3F3" ng-click="cancelsupport()">
        <div class="tabs-striped tabs-top">
            <div class="tabs" style="top:0">
                <a ng-class="type==1?'tab-item active':'tab-item'" ng-click="changetype(1)">
                    主页
                </a>
                <a ng-class="type==2?'tab-item active':'tab-item'" ng-click="changetype(2)">
                    互动
                </a>
                <a ng-class="type==3?'tab-item active':'tab-item'" ng-click="changetype(3)">
                    排行榜
                </a>
            </div>
        </div>
        <div class="icontent" ng-if="type==1">
            <ion-slides slider="data.slider">
                <ion-slide-page>
                    <div class="box banner"><img ng-src="img/demo/pict.png" /></div>
                </ion-slide-page>
                <ion-slide-page>
                    <div class="box banner"><img ng-src="img/demo/pict.png" /></div>
                </ion-slide-page>
                <ion-slide-page>
                    <div class="box banner"><img ng-src="img/demo/pict.png" /></div>
                </ion-slide-page>
            </ion-slides>
            <div class="list detail-list">
                <div class="item">
                    <h2>斯德哥尔摩奇遇</h2>
                    <p>在斯德哥尔摩，那个只有黑白和灰色的咖啡馆里面坐下，喝一杯地道的北欧咖啡。享受难得的北欧时光！</p>
                </div>
                <div class="item row detail-item2">
                    <div class="col" style="text-align:left">
                        <h2>1天</h2>
                        <p><i class="icon ion-clock"></i> 剩余时间</p>
                    </div>
                    <div class="col" style="text-align:right">
                        <h2>17000</h2>
                        <p><i class="icon ion-social-usd-outline"></i> 当前获得梦想分数</p>
                    </div>
                </div>
                <div class="item" style="padding:0">
                    <div class="reply-bar">
                        <div style="width: 30%;">
                        </div>
                    </div>
                    <div class="row" >
                        <div class="col" style="text-align:left">
                            <h2>3200</h2>
                            <p>目前以获梦想币</p>
                        </div>
                        <div class="col" style="text-align:right">
                            <h2>5000</h2>
                            <p>我要求的梦想币</p>
                        </div>
                    </div>
                </div>
                <div class="item row detail-head">
                    <div class="col"><img ng-src="img/demo/head7.jpg" /></div>
                    <div class="col"><img ng-src="img/demo/head6.jpg" /></div>
                    <div class="col"><img ng-src="img/demo/head5.jpg" /></div>
                </div>
                <div class="item">
                    <button class="button button-assertive" style="width:25%;white-space:normal;line-height:20px">支持乘数×2.8</button>
                    <button class="button button-calm" style="width:50%" ng-click="support($event)">支持</button>
                    <button class="button button-outline button-calm" style="width:25%">＋关注</button>
                </div>
            </div>
       
        </div>
        <div ng-if="type==2" class="hdcontent">
            <div style="border-bottom:5px solid #FAF2F5;">
                <div class="list">
                    <div class="item">
                        <img class="head" src="../../img/demo/head2.jpg" />
                        <span class="utitle">喵喵喵酱</span>
                        <span class="utitle kz">剩余5天</span>
                        <p class="subtile" style="white-space:normal">在斯德哥尔摩，那个只有黑白和灰色的咖啡馆里面坐下，喝一杯地道的北欧咖啡。享受难得北欧时光!</p>
                        <div class="picts">
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                        </div>
                    </div>
                </div>
                <div class="list" style="margin-top:-22px;">
                    <div class="item subitem">
                        <img ng-src="img/demo/head4.jpg" />
                        <span>百川</span>
                        <span class="kz">2016-08-08 11:11</span>
                        <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                    </div>
                    <div class="item subitem">
                        <img ng-src="img/demo/head4.jpg" />
                        <span>百川</span>
                        <span class="kz">2016-08-08 11:11</span>
                        <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                    </div>
                    <div class="item subitem">
                        <img ng-src="img/demo/head4.jpg" />
                        <span>百川</span>
                        <span class="kz">2016-08-08 11:11</span>
                        <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                    </div>
                </div>
            </div>
            <div style="border-bottom:5px solid #FAF2F5;">
                <div class="list">
                    <div class="item">
                        <img class="head" src="../../img/demo/head2.jpg" />
                        <span class="utitle">喵喵喵酱</span>
                        <span class="utitle kz">剩余5天</span>
                        <p class="subtile" style="white-space:normal">在斯德哥尔摩，那个只有黑白和灰色的咖啡馆里面坐下，喝一杯地道的北欧咖啡。享受难得北欧时光!</p>
                        <div class="picts">
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                            <img class="slt" src="../../img/demo/pict.png" />
                        </div>
                    </div>
                </div>
                <div class="list" style="margin-top:-22px;">
                    <div class="item subitem">
                        <img ng-src="img/demo/head4.jpg" />
                        <span>百川</span>
                        <span class="kz">2016-08-08 11:11</span>
                        <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                    </div>
                    <div class="item subitem">
                        <img ng-src="img/demo/head4.jpg" />
                        <span>百川</span>
                        <span class="kz">2016-08-08 11:11</span>
                        <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                    </div>
                    <div class="item subitem">
                        <img ng-src="img/demo/head4.jpg" />
                        <span>百川</span>
                        <span class="kz">2016-08-08 11:11</span>
                        <div>你确定是去哪里了吗？你确定是去哪里了吗？</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div ng-if="type==3" class="phbcontent">
            <div class="list">
                <div class="item">
                    <img style="width:30px" src="../../img/王冠.png" />
                    <span style="padding-left:20px">
                        <img style="width:40px;border-radius:100%" src="../../img/demo/head4.jpg" />
                        <span style="position:relative;top:-20px">喵喵喵酱</span>
                        <span style="color:#9E9E9E;position:relative;left:-68px">Lv.3</span>
                    </span>
                    <span style="padding-left:50px;">
                        <span style="position:relative;top:-20px;font-weight:500">20000</span>
                        <span style="color:#9E9E9E;position:relative;left:-50px">贡献</span>
                    </span>
                </div>
                <div class="item">
                    <img style="width:30px" src="../../img/王冠.png" />
                    <span style="padding-left:20px">
                        <img style="width:40px;border-radius:100%" src="../../img/demo/head4.jpg" />
                        <span style="position:relative;top:-20px">喵喵喵酱</span>
                        <span style="color:#9E9E9E;position:relative;left:-68px">Lv.3</span>
                    </span>
                    <span style="padding-left:50px;">
                        <span style="position:relative;top:-20px;font-weight:500">20000</span>
                        <span style="color:#9E9E9E;position:relative;left:-50px">贡献</span>
                    </span>
                </div>
                <div class="item">
                    <img style="width:30px" src="../../img/王冠.png" />
                    <span style="padding-left:20px">
                        <img style="width:40px;border-radius:100%" src="../../img/demo/head4.jpg" />
                        <span style="position:relative;top:-20px">喵喵喵酱</span>
                        <span style="color:#9E9E9E;position:relative;left:-68px">Lv.3</span>
                    </span>
                    <span style="padding-left:50px;">
                        <span style="position:relative;top:-20px;font-weight:500">20000</span>
                        <span style="color:#9E9E9E;position:relative;left:-50px">贡献</span>
                    </span>
                </div>
                <div class="item">
                    <img style="width:30px" src="../../img/王冠.png" />
                    <span style="padding-left:20px">
                        <img style="width:40px;border-radius:100%" src="../../img/demo/head4.jpg" />
                        <span style="position:relative;top:-20px">喵喵喵酱</span>
                        <span style="color:#9E9E9E;position:relative;left:-68px">Lv.3</span>
                    </span>
                    <span style="padding-left:50px;">
                        <span style="position:relative;top:-20px;font-weight:500">20000</span>
                        <span style="color:#9E9E9E;position:relative;left:-50px">贡献</span>
                    </span>
                </div>
                <div class="item">
                    <img style="width:30px" src="../../img/王冠.png" />
                    <span style="padding-left:20px">
                        <img style="width:40px;border-radius:100%" src="../../img/demo/head4.jpg" />
                        <span style="position:relative;top:-20px">喵喵喵酱</span>
                        <span style="color:#9E9E9E;position:relative;left:-68px">Lv.3</span>
                    </span>
                    <span style="padding-left:50px;">
                        <span style="position:relative;top:-20px;font-weight:500">20000</span>
                        <span style="color:#9E9E9E;position:relative;left:-50px">贡献</span>
                    </span>
                </div>
            </div>
            
        </div>
    </ion-content>
    <div class="detail-like" ng-if="tosupport">
        <div>
            <div class="row">
                <div class="col box {{index==1?'selected':''}}" ng-click="changeindex(1)">
                    <h2 class="calm">5个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==2?'selected':''}}" ng-click="changeindex(2)">
                    <h2 class="calm">10个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==3?'selected':''}}" ng-click="changeindex(3)">
                    <h2 class="calm">15个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
            </div>
            <div class="row">
                <div class="col box {{index==4?'selected':''}}" ng-click="changeindex(4)">
                    <h2 class="calm">20个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==5?'selected':''}}" ng-click="changeindex(5)">
                    <h2 class="calm">25个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i>虚拟币</p>
                </div>
                <div class="col box {{index==6?'selected':''}}" ng-click="changeindex(6)">
                    <h2 class="calm">30个</h2>
                    <p><i class="icon ion-social-codepen-outline calm"></i> 虚拟币</p>
                </div>
            </div>
            
        </div>
        <div class="send">
            <span>余额：<i class="calm">20000</i>梦想币</span>
            <span  style="padding:30px" class="calm"><i class="icon ion-card"></i>充值</span>
            <a class="button button-calm" style="height:100%;border-radius:0;width:80px;font-size:1.2em ">发送</a>
        </div>
    </div>
  
</ion-view>
