vue 2.5.21 引入多个组件后冲突

Question

用vue-cli生成了vue+typescript的vue项目后，在一个组件引入2个组件时会导致样式混乱，其中一个组件无法正常显示。

mainStatus 主组件

<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, #F76B46 0%, #F19166 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: #FFFFFF;
            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>