陶杰
2025-01-13 efa9bfe98ba906e4c9b8f49c89f5da162a46bb0f
components/top-tabs.vue
@@ -1,8 +1,8 @@
<template>
   <view class="flex top-tabs">
   <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 || ''}}
         {{ item.name || item.label || '' }}
      </view>
   </view>
</template>
@@ -11,22 +11,21 @@
   export default {
      name: "top-tabs",
      data() {
         return {
         };
         return {};
      },
      props: {
         tabs: {
            type: Array,
            default: []
         },
         flg: ""
         flg: "",
         type: '',
      },
      methods: {
         changeIndex(index) {
            if(index==this.flg){
            }else{
            if (index == this.flg) {
            } else {
               this.$emit('update:flg', index)
               this.$emit('change', index)
            }
@@ -36,25 +35,39 @@
   }
</script>
<style lang="scss">
   .top-tabs {
<style lang="scss" scoped>
   .top-tabs.coupon {
      .top-tab {
         color: #000000;
         // flex: 1;
         color: var(----topicdarkgray);
      }
      .top-tab.active {
         color: #000;
         color: var(--topicolor);
      }
      .top-tab.active::before {
         background: var(--topicolor);
         bottom: 0rpx;
      }
   }
   .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-family: PingFangSC, PingFang SC;
         font-weight: 600;
         font-size: 36rpx;
         color: #000000;
         line-height: 32rpx;
         text-align: left;
         text-align: center;
         font-style: normal;
         // padding: 0rpx;
         width: fit-content;
@@ -69,8 +82,10 @@
         bottom: 8rpx;
         // width: 110rpx;
         height: 8rpx;
         background: #04BA97;
         // background: #04BA97;
         background: #ffffff;
         border-radius: 4rpx;
      }
   }
</style>
</style>