caimei-authentic-www/components/SimpleTabs/index.vue

<template>
  <div class="tabbar">
    <div class="tab">
      <div
        class="item"
        :class="{ active: current === item.id }"
        v-for="item in tabs"
        :key="item.id"
        v-text="item.name"
        @click="$emit('change', item)"
      ></div>
    </div>
    <div class="tab-search">
      <input
        type="text"
        class="control"
        placeholder="搜索名称"
        @keyup.enter="($event) => $emit('search', $event.target.value)"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'SimpleTabs',
  props: {
    tabs: {
      type: Array,
      default: () => [],
    },
    current: {
      type: Number,
      default: 0,
    },
  },
}
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) {
  .tabbar {
    @include useTheme() {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 24px;
      .tab-search {
        position: relative;
        width: 430px;
        height: 40px;
        border: 1px solid #d8d8d8;
        border-radius: 4px;
        padding: 0 16px;
        padding-left: 46px;
        &::after {
          position: absolute;
          top: 4px;
          left: 8px;
          content: '';
          width: 30px;
          height: 30px;
          background: url(~assets/theme-images/common/pc-icon-search.png)
            no-repeat center;
          background-size: 30px;
        }
        .control {
          width: 100%;
          height: 36px;
          display: block;
          border: 0;
          outline: none;
          line-height: 36px;
          background: #fff;
        }
      }
      .tab {
        overflow-x: auto;
        white-space: nowrap;
        height: 64px;
        &::-webkit-scrollbar {
          display: none;
        }
        .item {
          position: relative;
          display: inline-block;
          font-size: 20px;
          line-height: 64px;
          color: #101010;
          padding: 0 32px;
          cursor: pointer;
          &::after {
            position: absolute;
            content: '';
            width: 40px;
            height: 2px;
            background-color: #fff;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }

          &.active {
            color: fetch('color');
            &::after {
              background-color: fetch('color');
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .tabbar {
    @include useTheme() {
      .tab-search {
        display: none;
      }
      .tab {
        overflow-x: auto;
        white-space: nowrap;
        padding-top: 4vw;
        &::-webkit-scrollbar {
          display: none;
        }
        .item {
          position: relative;
          display: inline-block;
          font-size: 4.2vw;
          line-height: 8vw;
          color: #101010;
          padding: 0 6vw;
          padding-bottom: 1.2vw;
          &::after {
            position: absolute;
            content: '';
            width: 8vw;
            height: 0.4vw;
            background-color: #fff;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
          }

          &.active {
            font-size: 4.6vw;
            color: fetch('color');
            &::after {
              background-color: fetch('color');
            }
          }
        }
      }
    }
  }
}
</style>