tnbapp/src/views/vip/index.vue

<template>
  <v-container>
    <v-row>
      <v-col cols="2">
        <v-sheet rounded="lg">
          <v-list color="transparent">
            <router-link v-for="item in items" :key="item.text" :to="item.link">
              <v-list-item
                link
              >
                <v-list-item-action>
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-action>
                <v-list-item-content>
                  <v-list-item-title>
                    {{ item.text }}
                  </v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </router-link>

            <v-divider class="my-2" />

            <v-list-item
              link
              color="grey lighten-4"
            >
              <v-list-item-content>
                <v-list-item-title>
                  Refresh
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-sheet>
      </v-col>
      <v-col>
        <v-sheet
          min-height="70vh"
          rounded="lg"
        >
          <router-view />
        </v-sheet>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import CheckPower from '@/utils/check-power.vue'

export default {
  data: () => ({
    CheckPower,
    items: [
      { icon: 'mdi-wrench', text: '套餐', link: '/vip/plan' },
      { icon: 'mdi-account-multiple', text: '订单', link: '/vip/order' }
    ]
  }),
  mounted() {
  },
  created() {
  },
  methods: {
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
}
</style>