1.粉丝数数据量统计 2.点赞设置为0

陶杰

2024-09-11 8840efb29d8818afcfd2176914bcf4811d9c60fe

 components/top-tabs.vue

@@ -1,76 +1,91 @@
<template>
  <view class="flex top-tabs">
    <view class="top-tab t-grey p10" v-for="(item,index) of tabs" @tap="changeIndex(index)"
          :class="[''+index==flg?'active':'']">
      {{ item.name || item.label || '' }}
    </view>
  </view>
   <view class="flex top-tabs" :class="[type]">
      <view class="top-tab t-grey p10" v-for="(item,index) of tabs" @tap="changeIndex(index)"
         :class="[''+index==flg?'active':'']">
         {{ item.name || item.label || '' }}
      </view>
   </view>
</template>

<script>
export default {
  name: "top-tabs",
  data() {
    return {};
  },
  props: {
    tabs: {
      type: Array,
      default: []
    },
    flg: ""
  },
  methods: {
    changeIndex(index) {
      if (index == this.flg) {
   export default {
      name: "top-tabs",
      data() {
         return {};
      },
      props: {
         tabs: {
            type: Array,
            default: []
         },
         flg: "",
         type: '',
      },
      methods: {
         changeIndex(index) {
            if (index == this.flg) {

      } else {
        this.$emit('update:flg', index)
        this.$emit('change', index)
      }
            } else {
               this.$emit('update:flg', index)
               this.$emit('change', index)
            }

    }
  }
}
         }
      }
   }
</script>

<style lang="scss">
.top-tabs {
  .top-tab {
    color: #ffffff;
    flex: 1;
    text-align: center;
  }
<style lang="scss" scoped>
   .top-tabs.coupon {
      .top-tab {
         color: var(----topicdarkgray);
      }

  .top-tab.active {
    color: #ffffff;
    font-weight: 600;
    // border-bottom: 8rpx solid #000;
    // 底部的线条
      .top-tab.active {
         color: var(--topicolor);
      }

    font-weight: 600;
    font-size: 36rpx;
    color: #ffffff;
    line-height: 32rpx;
    text-align: center;
    font-style: normal;
    // padding: 0rpx;
    width: fit-content;
    position: relative;
  }
      .top-tab.active::before {
         background: var(--topicolor);
         bottom: 0rpx;
      }
   }

  .top-tab.active::before {
    position: absolute;
    content: " ";
    left: 16rpx;
    right: 16rpx;
    bottom: 8rpx;
    // width: 110rpx;
    height: 8rpx;
    // background: #04BA97;
   background: #ffffff;
	
    border-radius: 4rpx;
  }
}
</style>
   .top-tabs {
      .top-tab {
         color: #ffffff;
         flex: 1;
         text-align: center;
      }

      .top-tab.active {
         color: #ffffff;
         font-weight: 600;
         // border-bottom: 8rpx solid #000;
         // 底部的线条

         font-weight: 600;
         font-size: 36rpx;
         line-height: 32rpx;
         text-align: center;
         font-style: normal;
         // padding: 0rpx;
         width: fit-content;
         position: relative;
      }

      .top-tab.active::before {
         position: absolute;
         content: " ";
         left: 16rpx;
         right: 16rpx;
         bottom: 8rpx;
         // width: 110rpx;
         height: 8rpx;
         // background: #04BA97;
         background: #ffffff;

         border-radius: 4rpx;
      }
   }
</style>