personalhubs/src/components/pc/index.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter, useRoute } from 'vue-router'
import Header from './header.vue'
import Footer from './footer.vue'
const { locale: language, t } = useI18n()
const router = useRouter();
const route = useRoute()
console.log(route, 'route')
const normalSettings = [
  {
    name: t('manage.information.nameArr.information'),
    icon: 'nav_my',
    to: { name: 'information' }
  },
  {
    name: t('manage.information.nameArr.scene'),
    icon: 'nav_scene',
    to: { name: 'scene' }
  },
  {
    name: t('manage.information.nameArr.device'),
    icon: 'nav_cam',
    to: { name: 'device' }
  },
  {
    name: t('manage.information.nameArr.order'),
    icon: 'nav_order',
    to: { name: 'order' }
  },
  {
    name: t('manage.information.nameArr.products'),
    icon: 'nav_data',
    to: { name: 'appProduct' }
  }
]
const active = ref({
  name: 'information',
  to: { name: 'information' }
})
active.value = normalSettings.find(item => item.to.name === route.name) || normalSettings[0]
function tabHandle(sub) {
    active.value = sub
    router.push(sub.to) 
}
</script>

<template>
  <div class="personalCenter">
    <Header />
    <div class="main_container">
      <div class="manage-body flex justify-center">
        <div class="mc-left">
          <div>
            <ul class="list-items">
              <li
                @click="tabHandle(sub)"
                v-for="(sub, i) in normalSettings"
                :key="i"
                :class="{
                  active: active.to.name === sub.to.name,
                  'logout-span': sub.name === '退出登录' || sub.name === 'Log out'
                }"
              >
                <span
                  ><h-icon class="nav-icon" v-if="sub.icon" :type="sub.icon"></h-icon
                  >{{ sub.name }}</span
                >
              </li>
            </ul>
          </div>
        </div>
        <div class="mc-right">
          <router-view class="pcMianPage" />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<style lang="less" scoped>
.manage-body {
  min-height: 676px;
  padding: 80px 0;
  background-color: #f4f4f6;
  .container {
    display: flex;
  }
  .mc-left {
    flex-shrink: 0;
    margin-right: 30px;
    .list-items {
      font-size: 16px;
      display: inline-block;
      margin-bottom: 50px;
      width: 100%;
      padding: 30px 0;
      background: #fff;
      width: 274px;
      li {
        width: 100%;
        line-height: 48px;
        padding-left: 50px;
        color: #909090;
        cursor: pointer;
        &.active {
          color: #323233;
          background: #ebebeb;
        }
        .nav-icon {
          margin-right: 9px;
        }
        span {
          display: inline-block;
          position: relative;
          vertical-align: middle;
          display: flex;
          align-items: center;
        }

        .logout-span {
          &::before {
            display: none;
          }
        }
      }
    }
  }
  .mc-right {
    .mc-title {
      margin-left: 40px;
      margin-top: 34px;
      font-size: 28px;
      color: #2d2d2d;
      font-weight: bold;
    }
  }
  .pcMianPage{
    padding: 30px 0;
    width: 972px;
    min-height: 676px;
    background: #fff;
  }
}
</style>