我们组选择的项目是对股票的预测与分析,在讨论分工时我被分配到去负责前端页面设计,首先要做的事就是写一个注册界面。
Vue
Vue 是一套用于构建用户界面的渐进式 JavaScript 框架 ;同时它是一个典型的 MVVM 模型的框架。vue是一个前端框架,但还是建立在HTML ,CSS ,JavaScript的基础之上的,通过编译之后依然是HTML+CSS+JavaScript组成。但是Vue是一个渐进式 JavaScript 框架,简单灵活,所以选择vue作为前端框架。
注册界面的建立
首先是创建一个vue项目,通过命令vue create project
来创建项目。
创建完项目之后,在src文件夹里创建register.vue文件作为注册界面。
页面布局设计
背景图片与注册界面标题:
//template部分代码
<div id="app" class="img1" style="position: relative;top: 0px"></div>
<div class="register-title">scow账户注册</div>
//style部分代码
.img1{
background-size: 100% 100%;
background: url('../logback.jpg') center center no-repeat;
height: 100%;
position: relative;
width: 100%
}
页面主体部分:
//template部分
<div class="register-box" >
//style部分
.register-box {
width: 320px;
height: 100%;
margin-top: 0px;
margin-left: 500px;
padding: 35px 80px 35px 60px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background-color: #ffffff;
border-radius: 2%;
}
页面主体的输入部分,采用四个输入框,分别是输入用户名、密码、邮箱跟验证码:
//template部分
<div class="input">
<el-form-item prop="registerName" style="border: none">
<i class="el-icon-user" style="font-size: 25px"></i>
<el-input class="textarea" v-model="username" maxLength='17' placeholder="请输入用户名" ></el-input>
</el-form-item>
<el-form-item prop="registerPassword">
<i class<