标签：Vue 登录 gradient 2154FA right 000099 background import 页面

上一博客讲到构建了一个vue项目，现在在那个项目之上实现一个登录页面。

1.构建项目的目录

2.App.vue

1.   <template>
2.   <div id="app">
3.   <router-view/>
4.   </div>
5.   </template>
6.    
7.   <script>
8.   export default {
9.   name: 'App'
10.   }
11.   </script>

 

 

main.js

1.   // The Vue build version to load with the `import` command
2.   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3.   import Vue from 'vue'
4.   import App from './App'
5.   import router from './router'
6.    
7.   import ElementUI from 'element-ui'
8.   import 'element-ui/lib/theme-chalk/index.css'
9.    
10.   //自己写的样式
11.   import './style/theme.css'
12.   import './style/characters.css'
13.    
14.   // 注册element-ui
15.   Vue.use(ElementUI)
16.    
17.   Vue.config.productionTip = false
18.    
19.   /* eslint-disable no-new */
20.   new Vue({
21.   el: '#app',
22.   router,
23.   components: { App },
24.   template: '<App/>'
25.   })

 

 

theme.css

1.   body {
2.   padding: 0;
3.   margin:0;
4.   font-family: "Microsoft YaHei UI Light";
5.   }
6.    
7.   .outer_label {
8.   position: relative;
9.   left: 0;
10.   top: 0;
11.   width: 100%;
12.   height: 220px;
13.   background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
14.   background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
15.   background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
16.   background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
17.   /**/
18.   text-align: center;
19.   filter: brightness(1.4);
20.   }
21.   .inner_label {
22.   position: absolute;
23.   left:0;
24.   right: 0;
25.   bottom: 0;
26.   top:0;
27.   margin: auto;
28.   height: 50px;
29.   }
30.   .qxs-icon {
31.   height: 40px;
32.   width: 90%;
33.   margin-bottom: 5px;
34.   padding-left: 10%;
35.   border: 0;
36.   border-bottom: solid 1px lavender;
37.   }

 

 

character.css

1.   .text-size12px{
2.   font-size: 12px;
3.   }
4.   .text-size14px{
5.   font-size: 14px;
6.   }
7.   .text-size16px{
8.   font-size: 16px;
9.   }
10.   .float-right {
11.   float: right;
12.   }
13.   .item-color {
14.   color: #848487;
15.   }

 

 

index.js

1.   import Vue from 'vue'
2.   import Router from 'vue-router'
3.   // import HelloWorld from '@/components/HelloWorld'
4.   import Login from '@/components/login/Login'
5.    
6.   Vue.use(Router)
7.    
8.   export default new Router({
9.   routes: [
10.   {
11.   path: '/',
12.   name: 'Login',
13.   component: Login
14.   }
15.   ]
16.   })

 

 

Login.vue

1.   <template>
2.   <div>
3.   <div class="outer_label">
4.   <img class="inner_label login_logo" src="../../assets/logo.png">
5.   </div>
6.   <div class="login_form">
7.   <input type="text" class="qxs-ic_user qxs-icon" placeholder="用户名" v-model="userName">
8.   <input type="text" class="qxs-ic_password qxs-icon" placeholder="密码" v-model="password">
9.   <!--<button class="login_btn el-button el-button&#45;&#45;primary is-round" type="primary" round>登录</button>-->
10.   <el-button class="login_btn" @click.native="login" type="primary" round :loading="isBtnLoading">登录</el-button>
11.   <div style="margin-top: 10px">
12.   <span style="color: #000099;" @click="login">司机账号登陆</span><span style="float: right;color: #A9A9AB">忘记密码？</span>
13.   </div>
14.   </div>
15.   </div>
16.   </template>
17.    
18.    
19.    
20.   <script>
21.   // import { userLogin } from '../../api/api';
22.    
23.   export default {
24.   data() {
25.   return {
26.   userName: '',
27.   password: '',
28.   isBtnLoading: false
29.   }
30.   },
31.   created () {
32.   if(JSON.parse( localStorage.getItem('user')) && JSON.parse( localStorage.getItem('user')).userName){
33.   this.userName = JSON.parse( localStorage.getItem('user')).userName;
34.   this.password = JSON.parse( localStorage.getItem('user')).password;
35.   }
36.   },
37.   computed: {
38.   btnText() {
39.   if (this.isBtnLoading) return '登录中...';
40.   return '登录';
41.   }
42.   },
43.   methods: {
44.   login() {
45.   if (!this.userName) {
46.   this.$message.error('请输入用户名');
47.   return;
48.   }
49.   if (!this.password) {
50.   this.$message.error('请输入密码');
51.   return;
52.   }
53.    
54.   }
55.   }
56.   }
57.   </script>
58.   <style>
59.   .login_form {
60.   padding-top: 10%;
61.   padding-left: 10%;
62.   padding-right: 10%;
63.   }
64.   .qxs-ic_user {
65.   background: url("../../assets/login/ic_user.png") no-repeat;
66.   background-size: 13px 15px;
67.   background-position: 3%;
68.   }
69.   .qxs-ic_password {
70.   background: url("../../assets/login/ic_password.png") no-repeat;
71.   background-size: 13px 15px;
72.   background-position: 3%;
73.   margin-bottom: 20px;
74.   }
75.   .login_logo {
76.   height: 100%;
77.   }
78.   .login_btn {
79.   width: 100%;
80.   font-size: 16px;
81.   background: -webkit-linear-gradient(left, #000099, #2154FA); /* Safari 5.1 - 6.0 */
82.   background: -o-linear-gradient(right, #000099, #2154FA); /* Opera 11.1 - 12.0 */
83.   background: -moz-linear-gradient(right, #000099, #2154FA); /* Firefox 3.6 - 15 */
84.   background: linear-gradient(to right, #000099 , #2154FA); /* 标准的语法 */
85.   filter: brightness(1.4);
86.   }
87.   </style>

 

 

ic_password.png

ic_user.png

logo.png

 

3.根据npm run dev 命令启动，启动完成之后会有个链接，访问链接就直接可以看到下面页面：

 

问题交流群，不定期分享各种技术文档：

QQ群号：464512055

群二维码：

这是一个神器的二维码，扫描之后你会少掉一块钱。

 

 

标签：Vue,登录,gradient,2154FA,right,000099,background,import,页面
来源： https://www.cnblogs.com/java9898/p/15471385.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。