在做登录页面时，引入了一个图片，设置的高度为100vh，但是出现了滚动条，body也设置了margin为0 和padding为0，这是哪里的问题呢，代码如下
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
</head>
<body style="margin: 0;padding: 0;">
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
AdminLogin.vue代码如下
<template>
<div class="all">
<el-image :src="backImage" class="back-image"></el-image>
</div>
</template>
<script lang="ts" setup>
import {getVerificationCode} from '@/views/api/login'
import {onBeforeMount, ref} from 'vue';
import * as url from "url";
onBeforeMount(() => {
getCode()
})
const backImage = new URL("@/assets/image/index-image.png", import.meta.url).href
//const verificationCode = ref()
const getCode = () => {
getVerificationCode("").then(function (res) {
// 处理成功情况
console.log(res);
// verificationCode.value = res.data.data.verificationCod
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.then(function () {
// 总是会执行
});
}
</script>
<style scoped>
.back-image {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}
.all {
margin: 0;
padding: 0;
}
</style>
页面效果如下
不知道是哪里的问题
