Question

我正在尝试在index.vue页面中的vuetify中更改v卡的高度，但是更改没有显示出来，现在我卡的代码显示为：<v-card class="cards" elevation="0" shaped>，但是我尝试了class="elevation-0" as well. It doesn't work with any elevation but if I e.g. use the attribute: ```显示更改。
在我的其他页面中，海拔属性有效（在我的_slug.vue页面中），而在index.vue页面中则无效。我还尝试更改将卡的代码移动到自己的组件中，但效果不佳。

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>

我的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>

Answer 1

对于遇到相同问题的任何人：我忘记了<v-app>组件，从而导致海拔属性无法正常工作

Answer 2

if(var1 + var2 + var3 > 1){ console.log('multi'); } else if(var1){ console.log('var1'); } else if(var2){ console.log('var2'); } else if(var3){ console.log('var3'); } else { console.log('default'); } 属性可以很好地从大多数 vuetify 组件中删除高程

Vuetify v卡高度未显示，flat属性显示

2 个答案: