after the vue+typescript vue project is generated with vue-cli, it will cause style confusion when two components are introduced into one component, and one of the components will not display properly.

mainStatus main component

<template>
    <div class="main-status">
        <Header></Header>
        <div>
            <span>11</span>
            <!-- <SBlock></SBlock> -->
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
// 
import Header from "@/components/Header.vue"
// import SBlock from "@/components/SBlock.vue"
// 
@Component({
    components: {
        Header,
        // SBlock
    },
})

export default class MainStatus extends Vue {
    
}
</script>

<style lang="scss" scoped>
.main-status {
    background-image: linear-gradient(-180deg, -sharpF76B46 0%, -sharpF19166 100%);
    height: 182px;
    width: 100%;
}
</style>

header

<template>
    <div class="wrapper">
        <img :src="leftImg" class="img">
        <div class="title">
            <span>{{title}}</span>
        </div>
        <img :src="rightImg" alt="" class="img">
    </div>
</template>

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

export default class Header extends Vue{
    @Prop() leftImg: string = require("../assets/icon_back.png");
    @Prop() title: string = "123";
    @Prop() rightImg: string = require("../assets/icon_back.png");
    
}
</script>

<style lang="scss" scoped>
.wrapper {
    position: relative;
    width: 100%;
    height: 52px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    .title {
        span {
            font-family: PingFangSC-Regular;
            font-size: 18px;
            color: -sharpFFFFFF;
            letter-spacing: -1px;
            text-align: center;
        }
    }

    .img {
        height: 26px;
        width: 26px;
    }

}
</style>

SBlock

<template>
    <div>
        <span>123</span>
    </div>
</template>

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


export default class SBlock extends Vue {
    @Prop() private a: string = "11"
}
</script>