Vuie.js-如何在Vuetify上放置2行导航标题

如何解决Vuie.js-如何在Vuetify上放置2行导航标题

我正在尝试创建包含2行组件的导航标题。每个都有自己的背景色。这与此处使用的类似：

这是我当前设置App.vue的方式：

<v-app-bar height="100px" flat app dark flex wrap>
        <v-container>
            <v-layout row>
                test
            </v-layout>
            <v-layout row class="second-layer">
                <div class="center d-flex">
                    <div class="d-flex align-center">
                        <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
                        <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="200" />
                    </div>
                    <v-spacer></v-spacer>
                    <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
                        <span class="mr-2">Latest Release</span>
                        <v-icon>mdi-open-in-new</v-icon>
                    </v-btn>
                </div>
            </v-layout>
        </v-container>
    </v-app-bar>

这是该类的作用域CSS：

    .second-layer {
       z-index: 999;
    }
   .second-layer:before {
       content: ' ';
       background-color: rgb(214,214,55);
       position: absolute;
       height: 70px;
       width: 4000px;
       left: -2000px;
       z-index: -1;
    }

有了这个，我设法做到了：

在Vuetify中还有更好的方法吗？

解决方法

我认为您应该在页面顶部使用这些组件v-system-bar，并在其下面使用v-app-bar：

var app = new Vue({
  el: '#app',vuetify: new Vuetify(),})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <div>
      <v-system-bar window dark>

        <span>Test</span>
        <v-spacer></v-spacer>

      </v-system-bar>
      <v-app-bar color="deep-purple accent-4" dense dark>


        <div class="d-flex align-center">
          <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
          <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="200" />
        </div>
        <v-spacer></v-spacer>
        <v-btn href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" text>
          <span class="mr-2">Latest Release</span>
          <v-icon>mdi-open-in-new</v-icon>
        </v-btn>




      </v-app-bar>
    </div>
  </v-app>
</div>