标签

xuxueyang

2024-08-14 a587937ce53f79b4680e930b5d5f7fee33de5311

 components/top-tabs.vue

@@ -1,76 +1,76 @@
<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">
    <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 {
export default {
  name: "top-tabs",
  data() {
    return {};
  },
  props: {
    tabs: {
      type: Array,
      default: []
    },
    flg: ""
  },
  methods: {
    changeIndex(index) {
      if (index == this.flg) {

         };
      },
      props: {
         tabs: {
            type: Array,
            default: []
         },
         flg: ""
      },
      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: #000000;
         // flex: 1;
      }
.top-tabs {
  .top-tab {
    color: #ffffff;
    flex: 1;
    text-align: center;
  }

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

         font-family: PingFangSC, PingFang SC;
         font-weight: 600;
         font-size: 36rpx;
         color: #000000;
         line-height: 32rpx;
         text-align: left;
         font-style: normal;
         // padding: 0rpx;
         width: fit-content;
         position: relative;
      }
    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 {
         position: absolute;
         content: " ";
         left: 16rpx;
         right: 16rpx;
         bottom: 8rpx;
         // width: 110rpx;
         height: 8rpx;
         background: #04BA97;
         border-radius: 4rpx;
      }
   }
  .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>