前端页面

wang

2024-03-26 9e9e7b3bd346f5189becc20fb6ac127c320ec1ee

 UI-Project/src/views/RegisterView.vue

@@ -4,7 +4,8 @@
  import type { FormProps,FormInstance, FormRules } from 'element-plus'
  import {ElMessage,ElMessageBox} from "element-plus";
  import request from "@/utils/request";
  import {Avatar, UserFilled} from "@element-plus/icons-vue";
import { Lock,Avatar } from '@element-plus/icons-vue'
  // import {Avatar, UserFilled} from "@element-plus/icons-vue";

  const router = useRouter()
  const route = useRoute()
@@ -101,6 +102,12 @@
      }
    })
  }
  const toLogin = () => {
              router.push({
                path:'/login',
              })
  }




@@ -108,76 +115,141 @@
</script>

<template>
  <h2 style="color: #1890FF">
    <span>
      <el-icon><UserFilled /></el-icon>
      <p>北玻ERP用户注册</p>
    </span>
  </h2>
  <div id="main-div">

    <div id="register">
  <div class="mainDiv" >
    <div id="main-login">
     <div>
      <div style="position: absolute; left: 8vw; top: 6vw; ">
        <img src="../../src/assets/3.png">
      </div> 
       <div style="position: absolute; left: 15vw; top: 22vw; font-size: 55px;color: rgba(29, 33, 41, 1);">
        北玻MES系统
      </div>
    </div>
    <div id="div-login">
      <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="register"
            @submit.native.prevent
          ref="ruleFormRef"
            :model="register"
          status-icon
          :rules="rules"
            label-width="75px"
      >
        <el-form-item label="姓名：" prop="userName">
          <el-input v-model="register.userName" />
          <div id="title">注册新用户</div>
        <div id="center">
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">姓名</div> -->
          <el-form-item prop="userName" label="姓名:">
            <el-input
            style="width: 200px;"
                v-model="register.userName"
                type="text"
                autocomplete="off"
                :prefix-icon="Avatar"
                placeholder="请输入姓名"
            />
        </el-form-item>
<!--        <el-form-item label="登陆名：" prop="loginName">-->
<!--          <el-input v-model="register.loginName" />-->
<!--        </el-form-item>-->
        <el-form-item label="密码：" prop="passWord">
          <el-input type="password" v-model="register.passWord" />
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">密码</div> -->
          <el-form-item prop="passWord" label="密码:">
            <el-input
            style="width: 200px;"
                v-model="register.passWord"
                type="password"
                autocomplete="off"
                :prefix-icon="Lock"
                placeholder="请输入密码"
                show-password
            />
        </el-form-item>
        <el-form-item label="确认密码：" prop="confirmPassword">
          <el-input type="password" v-model="register.confirmPassword" />
            <!-- <div style="color: rgba(78, 89, 105, 1);margin-bottom: 10px;">确认密码</div> -->
          <el-form-item prop="confirmPassword" label="确认密码:">
            <el-input
            style="width: 200px;"
                v-model="register.confirmPassword" 
                type="password"
                :prefix-icon="Lock"
                autocomplete="off"
                show-password
                placeholder="请确认密码"
            />
        </el-form-item>
        <el-form-item >
          <el-form-item id="submitForm">
          <el-button
              :loading="loginLoadings"
              type="primary"
              @click="submitForm(ruleFormRef)"
          >注册
                plain
            >确认注册
          </el-button>
            <el-button
                type="primary"
                @click="toLogin"
                plain
            >取消
            </el-button>

        </el-form-item>
        </div>
      </el-form>
    </div>
  </div>

</div>
</template>

<style scoped>
#main-div{
  //overflow: hidden;
/* #main-div{
  position: absolute;
  left:50%;
  top:50%;
  left:75%;
  top:45%;
  transform: translate(-50%, -50%);

}
h2{
  text-align: center;
  width: 100vw;
  margin-top: 10vh;
}
#register{
  background-color: #FAFAFA;
  width: 50vw;
  height: 50vh;
  border-radius: 12px;
} */
/* #register{
  background-color: #fff;
  width: 32vw;
  height: 35vh;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 280px;
}
.el-form{
} */
/* .el-form{
  max-width: 300px;
} */
#div-login{
  margin-top: 5%;
  /* margin-top: 20%; */
  /* margin-left: 650px; */
  background-color: #fff;
  border-radius: 4px;
  float: right;
  width: 40%;
  height: 60%;
  min-width: 318px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0), 0 6px 5px 0 rgba(0,0,0,0.19);
}

#center{
  margin-top: 45px;
  margin-left: 100px;
}
.mainDiv{
  overflow: hidden;
  min-width: 718px;
  background-image: url("../../src/assets/background.jpg");

}
#main-login{
  margin: 150px auto 0 auto;
  height: 70vh;
  width: 80vw;
}
#submitForm{
  margin-top: 30px;
  margin-left: -10px;
}
#title{
  font-size: 25px;
  text-align: center;
  margin-top: 10px;
}
</style>