Блог

Я пытаюсь изменить высоту своих v-карт в vuetify на своей странице index.vue, но изменения не отображаются, прямо сейчас код для моей карты гласит: <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>
  

Для тех, у кого такая же проблема: я забыл <v-app> компонент, который каким-то образом привел к тому, что атрибут высоты не работает

flat атрибут хорошо работает для удаления высоты из большинства компонентов vuetify