心悦琴
2021-02-03 02:01
采纳率: 97.4%
浏览 184
已结题

求助!怎样实现css样式只应用于一个界面(全元素显示)

<template>
<div id="register">
  <div id="registerBox">
    <p id="registerText">注册页面</p>
    <form name="signupForm" id="signupForm">

      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" v-model="vmodel_username" id="username" placeholder="请输入中文用户名" @blur="check_username"/><br />
        <span v-show="vshow_username" style="color:red">用户名必须为中文</span>
      </div>

      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" v-model="vmodel_password" id="password" placeholder="请设置不少于6位字符的密码" @blur="check_password"/><br />
        <span v-show="vshow_password" style="color:red">密码长度不能小于 6 个字符</span>
      </div>

      <div class="form-group">
        <label for="comfirmPassword">确认密码</label>
        <input type="password" v-model="vmodel_comfirmPassword" id="comfirmPassword" placeholder="请再次输入密码" @blur="check_comfirmPassword"/><br />
        <span v-show="vshow_comfirmPassword" style="color:red">与上述密码不符</span>
      </div>

      <div class="form-group">
        <label for="phone">手机号</label>
        <input type="text" v-model="vmodel_phone" id="phone" placeholder="请输入有效的手机号" @blur="check_phone"/><br />
        <span v-show="vshow_phone" style="color:red">输入的手机号格式不正确</span>
      </div>

      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" v-model="vmodel_email" id="email" placeholder="请输入有效的邮箱地址" @blur="check_email"/><br />
        <span v-show="vshow_email" style="color:red">输入的邮箱无效</span>
      </div>

<!--      <div class="form-group">
        <label for="idNo">身份证号</label>
        <input type="text" v-model="vmodel_idNo" id="idNo" placeholder="请输入有效的身份证号" @blur="check_idNo"/><br />
        <span v-show="vshow_idNo" style="color:red">输入的身份证号无效</span>
      </div>-->

      <button type="button" id="submit" @click="submitForm">提交</button>
      <button type="reset" id="reset">重置</button>
    </form>
  </div>
</div>
</template>

<script>


export default {
  name: 'registerBox',
  components: {},
  data () {
    return {
      // 这里对应v-show
      vshow_username: false,
      vshow_password: false,
      vshow_comfirmPassword: false,
      vshow_phone: false,
      vshow_email: false,
      /*vshow_idNo: false,*/


      // 这里的变量对应v-model
      vmodel_username: '',
      vmodel_password:'',
      vmodel_comfirmPassword:'',
      vmodel_phone:'',
      vmodel_email:'',
      /*vmodel_idNo:'',*/


    };

  },
  methods:{
    // 这里对应@blur
    check_username:function(){
      // 检查正则匹配
      var re_username = /^[\u4e00-\u9fa5]+$/;
      if(re_username.test(this.vmodel_username)){
        this.vshow_username = false;
      }
      else{
        /*this.username_msg = '用户名必须为中文';*/
        this.vshow_username = true;
        return false;
      }
    },
    check_password:function(){
      // 检查正则匹配
      var re_password =/^[a-z0-9_-]{6,18}$/;
      if(re_password.test(this.vmodel_password)){
        this.vshow_password = false;
      }
      else{
        /*this.password_msg = '密码长度不能小于 6 个字符';*/
        this.vshow_password = true;
        return false;
      }
    },
    check_comfirmPassword:function(){
      // 检查是否与password一样
      if(this.vmodel_password == this.vmodel_comfirmPassword){
        this.vshow_comfirmPassword = false;
      }
      else{
        /*this.comfirmPassword_msg = '与上述密码不符';*/
        this.vshow_comfirmPassword = true;
        return false;
      }
    },
    check_phone:function(){
      // 检查正则
      var re_phone = /^1[345789]\d{9}$/;
      if(re_phone.test(this.vmodel_phone)){
        this.vshow_phone = false;
      }
      else{
        /*this.phone_msg = '输入的手机号格式不正确';*/
        this.vshow_phone = true;
        return false;
      }
    },
    check_email:function(){
      var re_email=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
      if (re_email.test(this.vmodel_email)){
        this.vshow_email = false;
      } else {
        /* this.email_msg = '输入的邮箱无效';*/
        this.vshow_email = true;
        return false;
      }
    },

   
    //检验非空
    isnull:function(newValue){
      if(newValue==""||newValue==null){
        return true;
      }
    },
    submitForm:function(){
      console.log(this.vmodel_username);
      console.log(this.vmodel_password);
      console.log(this.vmodel_comfirmPassword);
      console.log(this.vmodel_email);
      console.log(this.vmodel_phone);
    /*  console.log(this.vmodel_idNo);*/
      /* console.log(this.vmodel_allow); */
      var isRegister=true;
      //检验
      if(this.$options.methods.isnull(this.vmodel_username)){

        isRegister=false;
      }else if(this.$options.methods.check_username()){
        isRegister=false;
      }else if(this.$options.methods.isnull(this.vmodel_password)){
        isRegister=false;
      }else if(this.$options.methods.check_password()){
        isRegister=false;

      }else if(this.$options.methods.isnull(this.vmodel_comfirmPassword)){
        isRegister=false;

      }else if(this.$options.methods.check_comfirmPassword()){
        isRegister=false;

      }else if(this.$options.methods.isnull(this.vmodel_phone)){
        isRegister=false;

      }else if(this.$options.methods.check_phone()){
        isRegister=false;

      }else if(this.$options.methods.isnull(this.vmodel_email)){
        isRegister=false;

      }else if(this.$options.methods.check_email()){
        isRegister=false;

      }

      if(isRegister){
        alert("注册成功!");
        /* window.location.href="success.html"; */
      }else{
        alert("注册失败!");
      }

    }
  }
}
</script>


<style scoped>
@import "../assets/register.css";

</style>

上为register.vue项目,下为register.css

button {
  height:15px;
  width: 10px;
  margin:35px;  /*margin是四个边距,所有四个边距都是 10px*/
  /*padding:18px;*/		/*padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。*/
  border-radius: 10px;
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 20px;
  float: right;
  border: 1px solid #269ABC;
  outline: none; /*设置元素周围的轮廓*/
  /*color: #fff;*/
  /*background-color: #269ABC;*/
  margin-left: 18%;
  /*position: absolute;*/
}
button:hover{
  font-weight: bold;
  color: #020002ab;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}
button:active {

  transform: translateY(4px);
}
#register{
  background: #2c3e50;
 /* background-size: cover;
  background-attachment: fixed;

  background-image: linear-gradient(lightskyblue, lightblue);*/
}
#registerBox{
  /* background-color: #54a2c1; */
  background-color: rgba(215, 223, 226, 0.7);
  /*background-color:#ffffff;*/
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  text-align: center;
  width:400px;
  padding-bottom: 2px;
  border-radius: 15px;
  /*opacity:0.6;
  filter:alpha(opacity=60); */


  /*width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); !* IE8 及更早版本 *!*/
  /*position:relative;*/
 /* animation-name:myfirst;
  animation-duration:2s;
  animation-timing-function:linear;
  animation-delay:0s;
  animation-iteration-count:1;

  animation-play-state:running;*/
  /* Safari and Chrome: */

}

@keyframes myfirst
{
  0%   {left:0px; top:0px;}
  25%  {left:200px; top:0px;}

}

form{
  padding:0px 20px;
}
label{
  display:inline-block;
  width:80px;
  text-align:left;
  text-size:50px;
}
input{
  width:250px;
  height:25px;
  /*display: block;*//*设置成块级元素,独占一行*/
  margin: 5px auto;/*外边距30px,输入框居中*/
  padding: 8px;/*设置内边距*/
  text-align: center;/*文字居中*/
  border: 1px solid #EBEBEB;/*把输入框包起来,变成长方形*/
  border-radius: 10px;/*让长方形的4个角弯一点,*/
  font-family: 'Source Sans Pro', sans-serif;/*字体类型*/
  font-size: 18px;/*字体大小*/
  outline: none;

}
#submit,#reset{
  margin-top:10px;
  background-color: #fff;
  width:80px;
  height:30px;
}
#registerText{
  margin-top:18px;	/*margin-top 属性设置元素的上外边距*/
  padding-bottom: 10px;	/*下内边距*/
  border-bottom: 1px solid rgb(240, 240, 245);	/*设置下边框的样式width,style,color*/
  font-size:25px;
  text-shadow: 5px 5px 5px skyblue;
}
/*hover 鼠标移动到div上时*/
div:hover {
  -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
  /*鼠标移动是过渡*/
  box-shadow: 0px 0px 100px #FFFFFF/*四边出现阴影,效果发光*/
}


如何让该背景显示,望解答,不胜感激!

  • 好问题 提建议
  • 收藏

5条回答 默认 最新

  • xiaozhuge_S 2021-02-07 16:41
    已采纳

    <style scoped></style> style标签里加scoped

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • 代码的灵魂是bug! 2021-02-03 09:23

    html和body标签都设置宽高100%,register也一样

    评论
    解决 无用
    打赏 举报
  • 空城机 2021-02-03 10:56

    这个不是子元素设置绝对定位,造成父元素高度坍塌了吗

    要不就用JavaScript设置,或者背景色直接在子元素里面设置吧

    评论
    解决 无用
    打赏 举报
  • weixin_43939111 2021-02-03 14:15

    需添加css代码如下:

    *{margin:0;}

    html,body,#register{height:100%;}

    评论
    解决 无用
    打赏 举报
  • ksw000 2021-02-04 16:52

    打开开发者部分工具看看检查元素,看看这个背景是什么,还是因为被覆盖了

    评论
    解决 无用
    打赏 举报