Vue - компонент css классы не отображаются в приложении с использованием привязок в стиле класса

Question

Я новичок в использовании Vue. Я начал с использования синтаксиса привязки в стиле класса. Классы верхнего и нижнего колонтитула, которые я определил в CSS, не отображаются, несмотря на ссылки на них в тегах компонентов. Я не могу понять, почему.

Я пытался поместить классы в компонент, но они, похоже, там тоже не показываются. У меня такое чувство, что мне нужно как-то связать классы в инициализаторе приложения Vue?

Заранее спасибо!

Приложение. vue

<template>
  <div id="app">
    <div class="container">
        <section>
          <LauchLogo class="header" />
          <LauchSymbol class="footer" />
        </section>
        <section>
          <LauchLogo class="header" />
          <LauchSymbol class="footer" />
        </section>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import LauchLogo from "./components/LauchLogo.vue";
import LauchSymbol from "./components/LauchSymbol.vue";

@Component({
  components: {
    LauchLogo,
    LauchSymbol
  }
})
export default class App extends Vue {
  data() {
    return {
      logo: 'logo',
      symbol: 'symbol'
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
body {
  height: 100vh;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}
section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: center;
}
.footer {
  border: 2px green;
}
.header {
  border: 2px blue;
}
</style>

LauchSymbol. vue

<template>
  <div class="container">
      <img class="responsiveLauch alignMiddle bounce" src="../assets/JustLauch.png"/> 
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  //this is where you put your code

  // @Prop() private msg!: string;

  ScrollNext () {
    alert("hello");
  }
}



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .responsiveLauch {
        max-width: 5%;
        height: auto;
    }
    .bounce {
        animation: bounce 2s;
        /* animation-delay: 1s; */
        animation-iteration-count: infinite;
    }
    @keyframes bounce {
        0%,
        25%,
        50%,
        75%,
        100% {
           transform: translateY(0);
        }
        40% {
            transform: translateY(-80px);
        }
        60% {
            transform: translateY(-42px);
        }
    }
</style>

LauchLo go. vue

<template>
  <div class="container">
      <img class="responsiveLogo" src="../assets/LauchLogoTrimmed2.png"/> 
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
  //this is where you put your code

  // @Prop() private msg!: string;

  ScrollNext () {
    alert("hello");
  }
}



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .responsiveLogo {
        max-width: 55%;
        height: auto;
        padding-bottom: 300px;
    }
</style>

Answer 1

Возможно, вам просто нужно добавить свойство стиля рамки к вашему CSS. То, что вы добавили здесь, будет не отображать границу:

.footer {
  border: 2px green;
}
.header {
  border: 2px blue;
}

Но это будет:

.footer {
  border: 2px solid green;
}
.header {
  border: 2px solid blue;
}