html - 如何在不妨碍 vue.js 中现有卡片的情况下应用背景颜色？

Question

我有一个包含登录和注册的页面我想给背景颜色[像这样] 1，当我试图给背景颜色它不反映有时它反映但它不符合我的要求（我正在做填充和边距的事情对于背景颜色，它不会出现），一旦看到我的输出。请帮我解决这个问题

Register.vue

<template>
<div class="main">

    <div class="container">
        <img src="../assets/picture.png" alt="notFound" />
        <p>Online Book Shopping</p>
        <div class="box">
            <div class="headings">
                <h5 class="signin">Login</h5>
                <h5 class="signup">signup</h5>
            </div>
            <form>
                <div class="fullname">
                    <p>FullName</p>
                    <input type="name" class="namebox" required v-model="name" pattern="[A-Za-z]{3,12}">
                </div>
                <div class="username">
                    <p>EmailID</p>
                    <input type="email" class="emailbox" required v-model="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$">
                </div>
                <div class="pass">
                    <p>Password</p>
                    <input type="password" class="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$" v-model="password" required>
                </div>

                <div class="mobile">
                    <p>MobileNumber</p>
                    <input type="tel" class="telephone">
                </div>
                <button class="btn-section" type="submit">Signup</button>
            </form>
        </div>
    </div>

</div>
</template>

<style lang="scss" scoped>
@import "@/styles/Register.scss";
</style>

Register.scss

@import "colors";
// *{  
//     top:0;
// height:768px;
// width:1366px;
// background: #000000 ;
// opacity: 0.3;
// }
.main .container{
    margin-top: 185px;
    left: 320px;
    width: 624px;
    height: 391px;
    background: #F5F5F5 0% 0% no-repeat padding-box;    
    border-radius: 21px;
    opacity: 1;
}
img{
    margin-top: 52px;
    margin-left: 53px;
    width: 245px;
    height: 245px;
    background: transparent  0% 0% no-repeat padding-box;
    opacity: 1;
    border-radius: 50%;
}
.container p{
    color:$light_black;
    margin-top: 31px;
    margin-left: 71px;
    margin-bottom: 39px;
    width: 309px;   
    height: 24px;
    text-align: left;
    font: normal normal medium 18px/24px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: uppercase;
    opacity: 1;
    font-weight: 500;
}
.box{
    background: $pale_white 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 15px #00000029;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    opacity: 1;
    height: 425px;
    width:389px;
    margin-top: -406px;
    margin-left: 358px;
}
.headings{
    display:flex;
  float:left;
  opacity: 1;
  padding-top: 28px;
  color: $light_black;
  text-transform: uppercase;
  padding-left:69px;
  width: 89px;
  height: 33px;
  text-align: left;
  font: normal normal medium 25px/33px Roboto;
  letter-spacing: 0px;
  color: $light_black;
  text-transform: uppercase;
}
.signup{
    padding-left: 92px; /* 82 */
}
.fullname p{
    margin-top: 91px;
    margin-left: 69px;
    width: 45px;
    height: 13px;
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: capitalize;
    opacity: 1;
    margin-bottom: 0px;
}
.namebox{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $dark_red;
    border-radius: 2px;
    opacity: 1;
    margin-left: 69px;
    width: 252px;
    height: 35px;
}
.username p{
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: capitalize;
    opacity: 1;
    width: 36px;
    height: 13px;
    margin-top: 15px;
    margin-left: 69px;
    margin-bottom: 0px;
}
.emailbox{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $dark_red;
    border-radius: 2px;
    opacity: 1;
    margin-left: 69px;
    width: 252px;
    height: 35px;
}
.pass p{
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: capitalize;
    opacity: 1;   
    width: 44px;
    height: 13px;
    margin-top: 15px;
    margin-left: 69px;
    margin-bottom: 0px;
}
input[type="password"]{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $border_clr;
    border-radius: 2px;
    opacity: 1;
    width: 252px;
    height: 35px;
    margin-left: 69px;
}
.mobile p{
    text-align: left;
    font: normal normal normal 12px/13px Roboto;
    letter-spacing: 0px;
    color: $light_black;
    text-transform: capitalize;
    opacity: 1;   
    margin-top: 15px;
    margin-left: 69px;
    margin-bottom: -7px;
}
.telephone{
    background: $pale_white 0% 0% no-repeat padding-box;
    border: 1px solid $border_clr;
    border-radius: 2px;
    opacity: 1;   
    width: 252px;
    height: 35px;
    margin-left: 69px;
    margin-bottom: 22px;
}
.btn-section{
    margin-left: 69px;
    width: 252px;
    height: 37px;
    background: #A03037 0% 0% no-repeat padding-box;
    border-radius: 3px;
    opacity: 1;
    color:white;
}
.headings{
    cursor:pointer;
}

标签： htmlcssvue.jssass