Vue.js Vuetify v型卡高度不小于'；不显示，平面属性显示

我正在尝试在我的index.vue页面的vuetify中更改我的v卡的标高，但更改没有显示出来，现在我的卡的代码是：

，但我也尝试了

class=“标高-0”。它不适用于任何高程，但如果使用属性：

``则会显示更改。
在我的其他页面中，提升属性起作用（在我的_slug.vue页面中），而在index.vue页面中则不起作用。我还尝试将卡的代码更改为自己的组件，但效果不太好

my index.vue文件中的组件：

<template>
  <NuxtLink :to="'/' + Link">

    /* This is the card I'm talking about */
    <v-card class="cards" elevation="0" shaped>
      <img class="thumbnail" :src="Image" />
      <h3 class="video-title">{{ Title }}</h3>
      <h3 class="video-type">Most {{ Name }}:</h3>
    </v-card>
  </NuxtLink>
</template>
<script>
export default {
  name: "ThumbnailCard",
  props: {
    Image: String,
    Title: String,
    Link: String,
    Name: String,
  },
};
</script>
<style scoped>
.cards {
  margin-top: 15vh;
  margin-left: 1vw;
  margin-right: 1vw;
  height: 30vh;
  text-align: center;
}
.thumbnail {
  width: 100%;
  height: 30vh;
}
.video-type {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 9vh;
}
.video-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: 18vh;
}
@media only screen and (max-width: 599px) {
  .cards {
    margin-top: 2vh;
    margin-bottom: 2vh;
    margin-left: 15vw;
    margin-right: 15vw;
    height: 14.5vh;
  }
  .thumbnail {
    height: 14.5vh;
  }
  .video-type {
    margin-top: 4vh;
  }
  .video-title {
    margin-top: 8vh;
  }
}
</style>

/*这就是我说的那张卡*/
{{Title}}
大多数{{Name}}：
导出默认值{
姓名：“拇指指甲卡”，
道具：{
图像：字符串，
标题：字符串，
链接：字符串，
名称：String，
},
};
.卡片{
边缘顶部：15vh；
左边距：1vw；
保证金权利：1vw；
高度：30vh；
文本对齐：居中；
}
.缩略图{
宽度：100%；
高度：30vh；
}
.视频类型{
位置：绝对位置；
排名：0；
左：0；
右：0；
边际上限：9vh；
}
.视频标题{
位置：绝对位置；
排名：0；
左：0；
右：0；
边际上限：18vh；
}
@仅介质屏幕和（最大宽度：599px）{
.卡片{
边际上限：2vh；
边缘底部：2vh；
左边距：15vw；
保证金权利：15vw；
高度：14.5vh；
}
.缩略图{
高度：14.5vh；
}
.视频类型{
边际上限：4vh；
}
.视频标题{
边际上限：8vh；
}
}

my index.vue的全部代码：

<template id="main">
  <div>
    <div id="title-section">
      <h1 id="title">Title</h1>
      <h2 id="description">This Site is awesome, have a look</h2>
    </div>
    <v-container id="content-wrapper">
      <v-row no-gutters>
        <v-col cols="12" sm="4">
          <ThumbnailCard
            :Image="recentImage"
            :Title="recentTitle"
            :Link="recentLink"
            Name="Recent"
          />
        </v-col>
        <v-col cols="12" sm="4">
          <ThumbnailCard
            :Image="popularImage"
            :Title="popularTitle"
            :Link="popularLink"
            Name="Popular"
          />
        </v-col>
        <v-col cols="12" sm="4">
          <ThumbnailCard
            :Image="relevantImage"
            :Title="relevantTitle"
            :Link="relevantLink"
            Name="Recent"
          />
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import ThumbnailCard from "@/components/global/ThumbnailCard";

export default {
  name: "index",
  components: {
    ThumbnailCard: ThumbnailCard,
  },
  async asyncData({ $content, params }) {
    const articles = await $content("articles")
      .only(["date", "slug", "title", "img"])
      .fetch();
    const datesArr = articles.map((a) => {
      return new Date(a.date).getTime() / 1000;
    });
    const recentTitle = articles[datesArr.indexOf(Math.min(...datesArr))].title;
    const recentLink = articles[datesArr.indexOf(Math.min(...datesArr))].slug;
    const recentImage = articles[datesArr.indexOf(Math.min(...datesArr))].img;

    const popularTitle = articles[0].title;
    const popularLink = articles[0].slug;
    const popularImage = articles[0].img;

    const relevantTitle = articles[0].title;
    const relevantLink = articles[0].slug;
    const relevantImage = articles[0].img;

    return {
      recentTitle,
      recentLink,
      recentImage,
      popularTitle,
      popularLink,
      popularImage,
      relevantTitle,
      relevantLink,
      relevantImage,
    };
  },
};
</script>

<style>
html {
  overflow-y: auto;
}
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
#title-section {
  background: black;
  width: 100%;
  height: 40vh;
  text-align: center;
}
#title {
  color: white;
  font-size: 4rem;
}
#description {
  color: white;
}
#content-wrapper {
  height: 60vh;
  width: 100%;
}
</style>

标题
这个网站太棒了，看看吧
从“@/components/global/ThumbnailCard”导入缩略图卡；
导出默认值{
名称：“索引”，
组成部分：{
指钉卡：指钉卡，
},
异步数据（{$content，params}）{
const articles=等待$content（“articles”）
.仅限（[“日期”、“slug”、“标题”、“img”]）
.fetch（）；
const datesArr=articles.map（（a）=>{
返回新日期（a.Date）.getTime（）/1000；
});
const recentTitle=文章[datesArr.indexOf（Math.min（…datesArr））].title；
const-recentLink=articles[datesArr.indexOf（Math.min（…datesArr））].slug；
const recentImage=articles[datesArr.indexOf（Math.min（…datesArr））].img；
const popularTitle=文章[0]。标题；
const popularLink=articles[0]。slug；
const popularImage=articles[0]。img；
const relevantTitle=文章[0]。标题；
const relevantLink=articles[0]。slug；
const relevantImage=articles[0]。img；
返回{
最近的标题，
最近链接，
最近的图像，
大众，
大众链接，
大众化，
相关名称，
相关链接，
相关图片，
};
},
};
html{
溢出y：自动；
}
：-webkit滚动条{
宽度：5px；
}
：-webkit滚动条轨迹{
背景#f1f1；
}
：-webkit滚动条拇指{
背景：#888；
}
：-webkit滚动条拇指：悬停{
背景:#555；
}
#标题部分{
背景：黑色；
宽度：100%；
高度：40vh；
文本对齐：居中；
}
#头衔{
颜色：白色；
字号：4rem；
}
#描述{
颜色：白色；
}
#内容包装器{
高度：60vh；
宽度：100%；
}

对于任何有相同问题的人：我忘记了

组件，它不知何故导致了高程属性不起作用平面属性可以很好地从大多数vuetify组件中移除高程缺少

v-app

会破坏很多东西。很高兴你解决了你的问题。这如何回答OP的问题？