<template>
|
<!-- 顾问排行榜 -->
|
<view>
|
<!-- #ifndef H5 -->
|
<view class="status_bar"></view>
|
<!-- #endif -->
|
<view class="drop-down gray font-12" v-show="isShow">
|
<view class="drop-down-row center" v-for="item in Crunchies">
|
<text>{{item}}</text>
|
</view>
|
</view>
|
<view class="header flex justify-around">
|
<view class="flex flex-v align-center mt-20">
|
<view class="img-box flex align-center justify-center">
|
<image class="header-img" src="../../static/images/head-img.jpg"></image>
|
<image class="ranking-img" mode="widthFix" src="../../static/images/small-medal2.png"></image>
|
</view>
|
<text class="font-12 white mt-5">妍妍</text>
|
<text class="font-16 white mt-5">￥9,020</text>
|
</view>
|
<view class="flex flex-v align-center">
|
<view class="img-box flex align-center justify-center">
|
<image class="header-img" src="../../static/images/head-img.jpg"></image>
|
<image class="ranking-img" mode="widthFix" src="../../static/images/small-medal1.png"></image>
|
<image class="crown-img" mode="widthFix" src="../../static/images/crown.png"></image>
|
</view>
|
<text class="font-12 white mt-5">倩倩</text>
|
<text class="font-16 white mt-5">￥12,020</text>
|
</view>
|
<view class="flex flex-v align-center mt-20">
|
<view class="img-box flex align-center justify-center">
|
<image class="header-img" src="../../static/images/head-img.jpg"></image>
|
<image class="ranking-img" mode="widthFix" src="../../static/images/small-medal3.png"></image>
|
</view>
|
<text class="font-12 white mt-5">雯雯</text>
|
<text class="font-16 white mt-5">￥6,020</text>
|
</view>
|
</view>
|
<view class="content">
|
<view class="content-row flex align-center justify-between">
|
<view class="flex align-center">
|
<image class="content-img ml-30" src="../../static/images/head-img.jpg"></image>
|
<view class="ml-20 flex flex-v">
|
<text class="font-14">我的</text>
|
<text class="font-12 gray mt-5">第32名</text>
|
</view>
|
</view>
|
<text>￥6,020</text>
|
</view>
|
</view>
|
<view class="content">
|
<view class="content-row flex align-center justify-between" v-for="item in 4">
|
<view class="flex align-center">
|
<text class="font-16">4</text>
|
<image class="content-img ml-20" src="../../static/images/head-img.jpg"></image>
|
<text class="font-14 ml-20">冯丽妍</text>
|
</view>
|
<text>￥6,020</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
data(){
|
return{
|
isShow:false,
|
Crunchies:['年榜','月榜','日榜']
|
}
|
},
|
methods:{
|
onNavigationBarButtonTap(e) {
|
this.isShow=!this.isShow
|
},
|
}
|
}
|
</script>
|
|
<style>
|
.header{
|
background: #518EFF;
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
padding: 15px 0;
|
}
|
.img-box{
|
width: 72px;
|
height: 72px;
|
position: relative;
|
border-radius: 50%;
|
background: #a8c6ff;
|
}
|
.header-img{
|
width: 64px;
|
height: 64px;
|
border-radius: 50%;
|
}
|
.ranking-img{
|
width: 18px;
|
position: absolute;
|
bottom: 0;
|
left: 45px;
|
}
|
.crown-img{
|
width: 35px;
|
position: absolute;
|
top: -15px;
|
left: 40px;
|
}
|
.content{
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
margin: 10px;
|
padding: 0 15px;
|
}
|
.content-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 10px 0;
|
}
|
.content-row:nth-last-child(1){
|
border: 0;
|
}
|
.content-img{
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
}
|
.drop-down{
|
width: 56px;
|
background: #FFFFFF;
|
border-radius: 4px;
|
padding: 0 5px;
|
position: absolute;
|
right: 15px;
|
top: -10px;
|
z-index: 999;
|
}
|
.drop-down-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 5px 0;
|
}
|
.drop-down-row:nth-last-child(1){
|
border: 0;
|
}
|
</style>
|
