Question

我目前正在遵循vuetify SPA示例，我认为v-parallax还没有为vue-cli v3做好准备。当前结构在顶部显示v工具栏，使用v-navigation-drawerr，然后显示不同视图的v-content ...

App.vue

DF2 <- within(DF2, {
  ind <- match(Name2, DF1$Name)
  new_code <- DF1$Code[ind]
  Code_fixed <- ifelse(is.na(ind), as.character(Code2), as.character(new_code))
  rm(ind, new_code)
})
DF2

Section1.vue

    <template>
      <v-app light>
        <div id="app">
          <v-navigation-drawer absolute class="hidden-sm-and-up" v-model="sideNav">
            <v-toolbar flat>
              ....
            </v-toolbar>
            <v-list>
             ....
            </v-list>
          </v-navigation-drawer>
          <v-toolbar>
           ....
          </v-toolbar>
          <v-content>
            <router-view/>
          </v-content>
        </div>
      </v-app>
    </template>

我想在视差背景图像上显示v工具栏，这意味着它应该是透明的，背景图像应该显示在v工具栏下方的顶部

目前是不可能的CSS还是我不应该使用vuetify并回到简单的html / css模板编码？

感谢您的反馈和建议

Answer 1

为什么导航抽屉中有第二个工具栏？我会删除它。

使工具栏透明非常简单：

<v-toolbar flat color="transparent">

要将背景移到顶部，只需从所有父div中删除填充。您可以执行此操作，例如此class="pa-0"或class="ma-0 pa-0"，以删除边距和填充。很可能你会在你的App.vue中做到这一点：

<template>
  <v-app>

    <Toolbar/>

    <Home class="pa-0"/>

    <MyFooter/>

  </v-app>
</template>

Vuetify CSS布局问题

1 个答案: