Commit 4de023ae authored by 黄媛媛's avatar 黄媛媛
parents f15715e0 8bec3030
...@@ -3,10 +3,9 @@ ...@@ -3,10 +3,9 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>electricitysheep</title> <title>微途超级商城</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected -->
</body> </body>
</html> </html>
...@@ -13,7 +13,9 @@ ...@@ -13,7 +13,9 @@
"build": "node build/build.js" "build": "node build/build.js"
}, },
"dependencies": { "dependencies": {
"axios": "^0.19.2",
"element-ui": "^2.13.1", "element-ui": "^2.13.1",
"js-md5": "^0.7.3",
"vue": "^2.5.2", "vue": "^2.5.2",
"vue-router": "^3.0.1" "vue-router": "^3.0.1"
}, },
......
<style> <style>
*{ .loginDiv {
margin:0; width: 100%;
padding:0; height: 100%;
} background-image: url("../assets/img/loginBack.jpg");
.loginDiv{ position: relative;
width:100%; background-size: cover;
height:100%; background-size: 100% 100%;
background-image:url('../assets/img/loginBack.jpg'); background-position: center;
position: relative; }
background-size: cover;
background-size:100% 100%; .loginDiv .loginOpacity {
background-position: center; background-color: rgba(0, 0, 0, 0.15);
} height: 100%;
.loginOpacity{ width: 100%;
background-color: rgba(0, 0, 0, 0.15); position: absolute;
height: 100%; left: 0;
width: 100%; top: 0;
position: absolute; z-index: 1;
left: 0; }
top: 0;
z-index: 1; .loginDiv .box-card {
} position: relative;
border-radius: 15px;
z-index: 99;
border: 0;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
width: 825px;
height: 480px;
margin: 0 auto;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: 100% 100%;
background-image: url("../assets/img/loginBack.jpg");
}
[flex] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex
}
[flex~="main:center"] {
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center
}
[flex~="cross:center"] {
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.loginDiv .logo {
position: absolute;
left: 40px;
top: 40px;
height: 50px;
}
.loginDiv .login-form {
padding: 50px 45px 30px;
height: 480px;
width: 245px;
float: right;
background-color: #fff;
}
.loginDiv .form-title {
font-size: 26px;
color: #1F4881;
margin-bottom: 40px;
}
.loginDiv .el-form-item--mini.el-form-item,
.loginDiv .el-form-item--small.el-form-item {
margin-bottom: 18px;
}
.loginDiv .el-input .el-input__inner {
height: 36px;
border-radius: 18px;
background-color: #f7f5fb;
border-color: #f7f5fb;
}
.loginDiv .el-input__inner {
-webkit-appearance: none;
background-color: #FFF;
background-image: none;
border-radius: 4px;
border: 1px solid #DCDFE6;
-webkit-box-sizing: border-box;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: 0;
padding: 0 15px;
-webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
width: 100%;
}
.loginDiv .register_box {
position: absolute;
right: 15%;
bottom: 35px;
width: 150px;
font-size: 14px;
}
.loginDiv .register {
display: inline-block;
width: 48%;
height: 15px;
line-height: 15px;
text-align: center;
cursor: pointer;
color: #4291ff;
}
.loginDiv .login-btn {
width: 100%;
border-radius: 20px;
height: 38px;
font-size: 16px;
background: linear-gradient(to right, #2E9FFF, #3E79FF);
box-shadow: 0 4px 10px rgba(0, 123, 255, .5);
}
.loginDiv .el-card__body {
padding: 0;
}
.loginDiv .foot {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
width: auto;
color: #fff;
text-align: center;
font-size: 16px;
}
.loginDiv .foot a,
.loginDiv .foot a:visited {
color: #f3f3f3;
}
</style> </style>
<template> <template>
<div class="loginDiv"> <div class="loginDiv">
<!-- <div class="loginOpacity"> <div class="loginOpacity" flex="cross:center main:center">
<div class="el-card box-card is-always-shadow">
</div> --> <div class="el-card__body">
<img alt class="logo" src="../assets/img/logo.png" />
<form class="el-form login-form">
<div class="form-title">管理员登录</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small">
<input type="text" autocomplete="off" v-model="msg.Account" placeholder="请输入用户名"
class="el-input__inner" maxlength="25" />
</div>
</div>
</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small">
<input type="password" autocomplete="off" placeholder="请输入密码" v-model="msg.Password"
class="el-input__inner" maxlength="25" />
</div>
</div>
</div>
<div class="el-form-item is-required el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<div class="el-input el-input--small" style="width: 140px;">
<input type="text" autocomplete="off" placeholder="验证码" v-model="msg.ValidataCode"
class="el-input__inner" maxlength="4" />
</div>
<img class="pic-captcha" src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545" />
</div>
</div>
<div class="el-form-item el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<label class="el-checkbox">
<span class="el-checkbox__input">
<span class="el-checkbox__inner"></span>
<input type="checkbox" aria-hidden="false" class="el-checkbox__original" value />
</span>
<span class="el-checkbox__label">
记住我,以后自动登录
</span>
</label>
</div>
</div>
<div class="el-form-item el-form-item--small">
<div class="el-form-item__content" style="margin-left: 0px;">
<button type="button" @click="login()"
class="el-button login-btn el-button--primary el-button--small is-round">
<span>登录</span>
</button>
</div>
</div>
</form>
<img alt class="logo" />
<div class="register_box">
<span class="register">忘记密码?</span>
<span class="register" style="border-left: 1px solid rgb(169, 169, 169);">注册账号</span>
</div>
</div>
</div>
<div class="foot">
<a target="_blank" href="javascript:void(0)" style="text-decoration: none;">
由成都微途科技有限公司提供技术支持</a></div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'Login', data() {
data () { return {
return { msg: {
msg: '' Account: '', //账号
Password: '', //密码
ValidataCode: '', //验证码
}
};
},
created() {
},
methods: {
//登录
login() {
if (this.msg.Account == "") {
this.Info("请输入用户名!")
}
if (this.msg.Password == "") {
this.Info("请输入密码!")
}
if (this.msg.ValidataCode == "") {
this.Info("请输入验证码!")
}
this.apipost("api/user/login", this.msg, res => {
console.log("res", res);
})
}
},
mounted() {
if (!this.isOnline()) {
this.msg.Account = "13551126755";
this.msg.Password = "123456";
this.msg.ValidataCode = "1234";
}
} }
} };
}
</script> </script>
\ No newline at end of file
// The Vue build version to load with the `import` command // The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' import Vue from 'vue'
import axios from 'axios'
import App from './App' import App from './App'
import router from './router' import router from './router'
import ajaxPlug from './plug/index'
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); Vue.use(ElementUI);
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.http = Vue.prototype.$http = axios
Vue.use(ajaxPlug)
/* eslint-disable no-new */ /* eslint-disable no-new */
new Vue({ new Vue({
el: '#app', el: '#app',
......
...@@ -62,7 +62,7 @@ export default { ...@@ -62,7 +62,7 @@ export default {
domainUrl = "http://reborn.oytour.com"; domainUrl = "http://reborn.oytour.com";
} }
var obj = { var obj = {
//主地址 //主地址npm
DomainUrl: domainUrl, DomainUrl: domainUrl,
//常用提交数据URL //常用提交数据URL
PostUrl: domainUrl + "/api/common/post", PostUrl: domainUrl + "/api/common/post",
...@@ -71,13 +71,43 @@ export default { ...@@ -71,13 +71,43 @@ export default {
}, },
//浏览器缓存 //浏览器缓存
Vue.prototype.getLocalStorage = function () { Vue.prototype.getLocalStorage = function () {
var localStorageData = window.localStorage["userInfo"]; var localStorageData = window.localStorage["mall_userInfo"];
if (localStorageData !== undefined && localStorageData != 'undefined') { if (localStorageData !== undefined && localStorageData != 'undefined') {
return JSON.parse(localStorageData); return JSON.parse(localStorageData);
} else { } else {
return null; return null;
} }
}, },
//验证只能输入2位小数【负数:isMinus传true】
Vue.prototype.checkPrice = function (item, filed, isMinus) {
var value = "" + item[filed]; //转字符串
var t = value.charAt(0);
value = value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
value = value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
value = value
.replace(".", "$#$")
.replace(/\./g, "")
.replace("$#$", ".");
value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
//如果第一位是负号,则允许添加 如果不允许添加负号 可以把这块注释掉
//是否允许负数
if (isMinus && t == '-') {
value = '-' + value;
}
item[filed] = value;
}
//验证只能输入整数【负数:isMinus传true】
Vue.prototype.checkInteger = function (item, filed, isMinus) {
var value = "" + item[filed]; //转字符串
var t = value.charAt(0);
value = value.replace(this.$commonUtils.Regex.isInteger, "");
//是否允许负数
if (isMinus && t == '-') {
value = '-' + value;
}
item[filed] = value;
},
//是否是线上环境【发布时修改为true】 //是否是线上环境【发布时修改为true】
Vue.prototype.isOnline = function () { Vue.prototype.isOnline = function () {
return process.env.NODE_ENV !== 'development'; return process.env.NODE_ENV !== 'development';
...@@ -138,4 +168,4 @@ export default { ...@@ -138,4 +168,4 @@ export default {
}, faildCall) }, faildCall)
} }
} }
} }
\ No newline at end of file
...@@ -6,8 +6,13 @@ Vue.use(Router) ...@@ -6,8 +6,13 @@ Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [
{ {
path: '/Login', path: '/',
name: 'Login', name: 'login',
component: resolve => require(['@/components/Login'], resolve),
},
{
path: '/login',
name: 'login',
component: resolve => require(['@/components/Login'], resolve), component: resolve => require(['@/components/Login'], resolve),
}, },
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment