怪谈诡异录（一）：vue前端全局页面不能缩放，局部可以

一、问题描述

网页在缩放时，整个网页没有在缩放，但是登录框却在缩放。

一开始我们可以看到网页缩放为100%

接着网页缩放值为80%，竟然只有登录框在缩放

二、代码展示

App.vue里的css代码

login/index.vue的css代码

<template>
    <div class="login">
        <div class="login-box">
            <img src="@/assets/login/login-l.png" alt="" />
            <div class="login-form">
                <el-form>
                    <div class="login-form-title">
                        <img src="@/assets/login/icon_logo.png" alt="" />
                        <!-- <span class="title-label">苍穹外卖</span> -->
                    </div>
                    <el-form-item>
                        <el-input type="text" auto-complete="off" placeholder="账号" />
                    </el-form-item>
                    <el-form-item>
                        <el-input type="password" placeholder="密码" />
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login-btn" size="medium" type="primary">
                            <span v-if="!loading">登录</span>
                            <span v-else>登录中...</span>
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script lang="ts">

</script>

<style lang="scss" scoped>
.login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    background-color: #333;
}

.login-box {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

.login-box img {
    width: 70%;
    height: 100%;
}

.login-form {
    background: #dabfbf;
    width: 600px;
    height: 400px;
    border-radius: 0px 8px 8px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form .el-form {
    width: 200px;
    height: 100px;
}

.login-form .el-form-item {
    margin-bottom: 30px;
}

.login-form .el-input__inner {
    box-sizing: border-box;
    border: 0;
    border-bottom: 1px solid #e9e9e8;
    border-radius: 0;
    font-size: 12px;
    font-weight: 400;
    color: #333333;
    height: 32px;
    line-height: 32px;
}

.login-form .el-input__inner::placeholder {
    color: #aeb5c4;
}

.login-btn {
    border-radius: 17px;
    padding: 11px 20px !important;
    margin-top: 10px;
    font-weight: 500;
    font-size: 12px;
    border: 0;
    color: #333333;
    background-color: #ffc200;
}

.login-btn:hover,
.login-btn:focus {
    background-color: #ffc200;
    color: #ffffff;
}

.login-form-title {
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}
</style>