vue3 解决背景图与窗口留有间隙的问题

        需要实现一个登录界面，login.vue的代码如下：

<script>
import { ref } from 'vue';export default {setup() {return {};},
};
</script><template><div id="login-container" class="login-container"><div id="container-left" class="container-left"></div><div id="container-right" class="container-right"></div></div>
</template><style scoped>
.login-container {display: flex;flex-direction: row;background: url('../assets/loginBk.jpg') no-repeat center;background-size: cover;height: 100vh;width: 100vw;justify-content: center;align-items: center;
}.container-left {flex: 2;height: 100%;width: 100%;
}.container-right {flex: 1;height: 100%;width: 100%;
}
</style>

        可以看到已经把背景图的宽高分别设置为100vw和100vh了(占满整个可视窗口)，但实际运行时发现图片和窗口之间留一定间隙且出现了滚动条：

        于是去看一下检查页面，发现body标签的margin设置为了8px：

         想来应该是index.html中的body标签有默认的margin间隙，于是手动讲margin设置为0：

        改好后发现问题解决了：