功能开发

rk

6 天以前 38d111cb6defedff3bf06314ca30d22a01faae22

 mini-program/pages/ranking-list/ranking-list.vue

@@ -1,16 +1,13 @@
<template>
   <view class="box">
      <view class="cate">
         <view class="cate-item active">
            获客类
            <view class="cate-item-xian"></view>
         </view>
         <view class="cate-item">市场类</view>
         <view class="cate-item">设计类</view>
         <view class="cate-item">培训类</view>
         <u-tabs :list="list1" :current="current" @click="clickItem" activeStyle="color: #2E68C4; font-weight: 600;" lineColor="#2E68C4"></u-tabs>
      </view>
      <view class="content">
         <image class="wu" src="/static/default_noranking@2x.png" mode="widthFix"></image>
      <view class="content" v-if="list1.length > 0">
         <view class="content-image" v-if="list1[current].fileList && list1[current].fileList.length > 0">
            <image :src="item.url" mode="widthFix" v-for="(item, index) in list1[current].fileList" :key="index"></image>
         </view>
         <image class="wu" src="/static/default_noranking@2x.png" mode="widthFix" v-else></image>
      </view>
   </view>
</template>
@@ -19,8 +16,26 @@
   export default {
      data() {
         return {
				
            list1: [],
            current: 0
         };
      },
      onLoad() {
         this.getAll()
      },
      methods: {
         getAll() {
            this.$u.api.categoryList({ type: 1, rank: 1 })
               .then(res => {
                  if (res.code === 200) {
                     res.data.active = false
                     this.list1 = res.data
                  }
               })
         },
         clickItem(e) {
            this.current = e.index
         }
      }
   }
</script>
@@ -38,6 +53,14 @@
         display: flex;
         align-items: center;
         justify-content: center;
         .content-image {
            width: 100%;
            display: flex;
            flex-direction: column;
            image {
               width: 100%;
            }
         }
         .wu {
            width: 200rpx;
            height: 200rpx;
@@ -47,37 +70,11 @@
      .cate {
         width: 100%;
         height: 88rpx;
         display: flex;
         align-items: center;
         background: #FFFFFF;
         position: sticky;
         top: 0;
         left: 0;
         z-index: 9;
         .active {
            color: #2E68C4 !important;
         }
         .cate-item {
            flex: 1;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 400;
            font-size: 30rpx;
            color: #666666;
            position: relative;
            .cate-item-xian {
               position: absolute;
               bottom: 0;
               left: 50%;
               transform: translate(-50%, 0);
               width: 40rpx;
               height: 6rpx;
               background: #2E68C4;
               border-radius: 3rpx;
            }
         }
      }
   }
</style>