aftermarket-h5/src/views/home/index.vue

<template>
  <div class="page">
    <van-tabs v-model:active="active" color="#00B3EC" title-active-color="#00B3EC">
      <van-tab title="设备报修">
        <SubmitPage @set-active="changeActive" />
      </van-tab>
      <van-tab title="报修记录">
        <List :active="active" @set-active="changeActive" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts" setup name="homePage">
  import { ref } from 'vue';
  // import { useUserStore } from '/@/store/modules/user';
  import SubmitPage from './submit.vue';
  import List from './list.vue';
  const active = ref(0);
  // const userStore = useUserStore();
  // const getUserInfo = computed(() => {
  //   const { name = '' } = userStore.getUserInfo() || {};
  //   return name;
  // });
  // const onClickTab = (title) => {};
  const changeActive = (type) => {
    document.documentElement.scrollTo({ top: 0, behavior: 'smooth' });
    active.value = type;
  };
</script>
<style lang="scss" scoped>
  .page {
    background-color: #f5f5f5;
  }
  .header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    font-size: 40px;
    img {
      width: 90px;
      height: 90px;
    }
  }

  .intro-header {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .supportList {
    margin: 0 16px;

    .nut-cell-group__title {
      margin-top: 30px;
    }
    .nut-icon {
      color: green;
    }
  }

  .btn-wrap {
    margin: 20px;
  }
  .btn-confirm {
    // @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
  }
</style>