123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350 |
- <template>
- <view class="content">
- <view class="nav flex">
- <view class="nav-item" v-for="(item,index) in navList" @click="navClick(index)"
- :class="{'action': index == currentIndex}">
- {{item.title}}
- </view>
- </view>
- <view class="ph-top">
- <view class="ph-m"></view>
- <view class="ph flex">
- <view class="ph-item flex">
- <view class="item-logo yj-logo">
- <image src="" mode="" class="avt"></image>
- </view>
- <view class="item-name">
- 李淡淡
- </view>
- <view class="item-id">
- ID: 09124
- </view>
- <view class="item-tit">
- 团队数
- </view>
- <view class="item-val">
- 40215
- </view>
- </view>
- <view class="ph-item flex">
- <view class="item-logo gj-logo">
- <image src="" mode="" class="avt"></image>
- </view>
- <view class="item-name">
- 李淡淡
- </view>
- <view class="item-id">
- ID: 09124
- </view>
- <view class="item-tit">
- 团队数
- </view>
- <view class="item-val">
- 40215
- </view>
- </view>
- <view class="ph-item flex">
- <view class="item-logo jj-logo">
- <image src="" mode="" class="avt"></image>
- </view>
- <view class="item-name">
- 李淡淡
- </view>
- <view class="item-id">
- ID: 09124
- </view>
- <view class="item-tit">
- 团队数
- </view>
- <view class="item-val">
- 40215
- </view>
- </view>
- </view>
- <image src="../../static/icon/yy.png" mode="" class="yy"></image>
- </view>
- <scroll-view scroll-y="true" class="grop-list" :style="{'height': max_height}">
- <view class="grop-item flex" v-for="item in 10">
- <view class="item-xh">
- 4
- </view>
- <image src="" mode="" class="item-logo"></image>
- <view class="item-info">
- <view class="info-name">
- 李淡淡
- </view>
- <view class="info-id">
- ID: 09124
- </view>
- </view>
- <view class="item-tg">
- <view class="tg-val">
- 233
- </view>
- <view class="tg-tit">
- 团队数
- </view>
- </view>
- </view>
- </scroll-view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- max_height: '',
- navList: [{
- title: '周排行',
- state: 0
- }, {
- title: '月排行',
- state: 1
- }],
- currentIndex: 0,
- }
- },
- onLoad() {
- },
- onShow() {
- },
- onReachBottom() {
- },
- onReady() {
- var obj = this;
- uni.getSystemInfo({
- success: resu => {
- const query = uni.createSelectorQuery();
- query.select('.grop-list').boundingClientRect();
- query.exec(function(res) {
- obj.max_height = resu.windowHeight - res[0].top + 'px';
- });
- },
- fail: res => {}
- });
- },
- methods: {
- navClick(index) {
- this.currentIndex = index
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .nav {
- width: 750rpx;
- height: 88rpx;
- .nav-item {
- line-height: 88rpx;
- width: 50%;
- text-align: center;
- font-size: 30rpx;
- font-weight: 500;
- color: #333333;
- height: 100%;
- }
- .action {
- font-weight: bold;
- position: relative;
- &::after {
- content: '';
- width: 50rpx;
- height: 6rpx;
- background: #FE5B38;
- border-radius: 3rpx;
- position: absolute;
- left: 0;
- right: 0;
- bottom: 6rpx;
- margin: auto;
- }
- }
- background-color: #fff;
- }
- .ph-top {
- width: 750rpx;
- height: 555rpx;
- background-color: #fc6795;
- position: relative;
- .yy {
- width: 261rpx;
- height: 195rpx;
- position: absolute;
- top: 131rpx;
- left: 0;
- right: 0;
- margin: auto;
- }
- .ph-m {
- width: 233rpx;
- height: 100rpx;
- border-radius: 20rpx 20rpx 0 0;
- background-color: #fff;
- position: absolute;
- top: 70rpx;
- left: 0;
- right: 0;
- margin: auto;
- }
- .ph {
- height: 360rpx;
- width: 702rpx;
- background-color: #fff;
- border-radius: 20rpx;
- align-items: flex-end;
- position: absolute;
- bottom: 65rpx;
- left: 0;
- right: 0;
- margin: auto;
- .ph-item {
- flex-grow: 1;
- flex-direction: column;
- justify-content: flex-end;
- padding-bottom: 30rpx;
- .item-logo {
- width: 90rpx;
- height: 90rpx;
- position: relative;
- .avt {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- background-color: #eee;
- }
- }
- .gj-logo {
- width: 120rpx;
- height: 120rpx;
- background-color: #eee;
- border-radius: 50%;
- &::after {
- content: '';
- width: 51rpx;
- height: 49rpx;
- position: absolute;
- top: -15rpx;
- right: -15rpx;
- background: url($base-url + '/resource/icon/gj.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- .yj-logo {
- &::after {
- content: '';
- width: 37rpx;
- height: 35rpx;
- position: absolute;
- top: -12rpx;
- right: -12rpx;
- background: url($base-url + '/resource/icon/yj.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- .jj-logo {
- &::after {
- content: '';
- width: 37rpx;
- height: 35rpx;
- position: absolute;
- top: -12rpx;
- right: -12rpx;
- background: url($base-url + '/resource/icon/jj.png') no-repeat;
- background-size: 100% 100%;
- }
- }
- .item-name {
- font-size: 28rpx;
- font-weight: bold;
- color: #3F454B;
- margin: 15rpx 0 10rpx;
- }
- .item-id {
- font-size: 24rpx;
- font-weight: 400;
- color: #606972;
- }
- .item-tit {
- font-size: 24rpx;
- font-weight: 500;
- color: #999999;
- margin: 25rpx 0 15rpx;
- }
- .item-val {
- font-size: 30rpx;
- font-weight: 500;
- color: #FA2740;
- }
- }
- }
- }
- .grop-item {
- margin: auto;
- width: 702rpx;
- height:150rpx;
- border-bottom: 1px solid #F0F0F0;
- .item-logo {
- width: 90rpx;
- height: 90rpx;
- border-radius: 50%;
- background-color: #eee;
- margin: 0 20rpx;
- }
- .item-info {
- flex-grow: 1;
- }
- .item-info {
- .info-name {
- margin-bottom: 10rpx;
- font-size: 28rpx;
- font-weight: bold;
- color: #3F454B;
- }
- .info-id {
- font-size: 24rpx;
- font-weight: 400;
- color: #606972;
- }
- }
- .item-tg {
- flex-shrink: 0;
- .tg-tit {
- font-size: 24rpx;
- font-weight: 500;
- color: #999999;
- }
- .tg-val {
- font-size: 28rpx;
- font-weight: 500;
- color: #FA2740;
- margin-bottom: 10rpx;
- }
- }
-
- }
- </style>
|