sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

new page

Browse Source 
Former-commit-id: a01298bf12c6a5e0fab2ee14370537cfa361fd2d [formerly a01298bf12c6a5e0fab2ee14370537cfa361fd2d [formerly a01298bf12c6a5e0fab2ee14370537cfa361fd2d [formerly a01298bf12c6a5e0fab2ee14370537cfa361fd2d [formerly 85cca94ffb981e86c46fb3aeca3a08038d70f6b8 [formerly 256de8e7c848da6cf54d56f42bcdc71db7a5b0a4]]]]]
Former-commit-id: e04a769ce616e8449aa76848d6a29c326ff30db9
Former-commit-id: ed5596eaae066fc2c2f58a080b8e53cdc68678b3
Former-commit-id: 880808789ecbbf7c8857400c2f2cb1975d449c34 [formerly 47b402819e0b7e957ad04814a3cfa5bb631c4686]
Former-commit-id: d9c42554f75ed5e9962bad8202124bba3437b9ea
Former-commit-id: 675a01ca4c3af26dfc83c8a8c2813e51abab8a3b
Former-commit-id: 83c56fd6a1b6cf34f341d926b5b6cc9c6942ef5d
Former-commit-id: 92a2bb04851bec6b2774dfea6c77e8f635ceff68
Former-commit-id: 131b1371a791cde9d4db97d7c1347215f12edde8
This commit is contained in:
liyang
2018-11-27 10:51:48 +08:00
parent a2c1ebe19a
commit 8e91993750
12 changed files with 3 additions and 701 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package-lock.json.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
273bfaa679d4398e12f5270f76df4e1953da170b

1
package.json
View File

@@ -35,7 +35,6 @@
"mockjs": "^1.0.1-beta3",
"nprogress": "^0.2.0",
"papaparse": "^4.3.6",
"particles.js": "^2.0.0",
"quill": "^1.3.4",
"screenfull": "^3.3.2",
"simplemde": "^1.11.2",

2
src/pages/login/config/README.md
View File

@@ -1,2 +0,0 @@
// 例子插件配置地址
// https://vincentgarreau.com/particles.js/#default

112
src/pages/login/config/bubble.js
View File

@@ -1,112 +0,0 @@
/* eslint-disable */
export default {
"particles": {
"number": {
"value": 6,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#444"
},
"shape": {
"type": "polygon",
"stroke": {
"width": 0,
"color": "#000"
},
"polygon": {
"nb_sides": 6
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.3,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 160,
"random": false,
"anim": {
"enable": true,
"speed": 10,
"size_min": 40,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 200,
"color": "#ffffff",
"opacity": 1,
"width": 2
},
"move": {
"enable": true,
"speed": 8,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

112
src/pages/login/config/default.js
View File

@@ -1,112 +0,0 @@
/* eslint-disable */
export default {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#DCDFE6"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#DCDFE6",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "repulse"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

112
src/pages/login/config/nasa.js
View File

@@ -1,112 +0,0 @@
/* eslint-disable */
export default {
"particles": {
"number": {
"value": 160,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 1,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

112
src/pages/login/config/snow.js
View File

@@ -1,112 +0,0 @@
/* eslint-disable */
export default {
"particles": {
"number": {
"value": 400,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#fff"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "img/github.svg",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.5,
"random": true,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 10,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 500,
"color": "#ffffff",
"opacity": 0.4,
"width": 2
},
"move": {
"enable": true,
"speed": 6,
"direction": "bottom",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 0.5
}
},
"bubble": {
"distance": 400,
"size": 4,
"duration": 0.3,
"opacity": 1,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
}

1
src/pages/login/image/logo.png.REMOVED.git-id
View File

@@ -1 +0,0 @@
f29a9f7890b5e19744437a623f72248bb9698bb3

1
src/pages/login/image/logo@2x.png.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
f37e18711a040d8dd2ad2af9cfb9f4ea6760c07a

160
src/pages/login/page.vue
View File

@@ -1,160 +0,0 @@
<template>
<div class="login-page">
<div class="layer bg" id="login"></div>
<div class="layer flex-center">
<!-- logo部分 -->
<div class="logo-group">
<img src="./image/logo.png" alt="logo">
</div>
<!-- 表单部分 -->
<div class="form-group">
<el-card>
<el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin" size="default">
<el-form-item prop="username">
<el-input type="text" v-model="formLogin.username" placeholder="用户名">
<i slot="prepend" class="fa fa-user-circle-o"></i>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="formLogin.password" placeholder="密码">
<i slot="prepend" class="fa fa-keyboard-o"></i>
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input type="text" v-model="formLogin.code" placeholder="- - - -">
<template slot="prepend">验证码</template>
<template slot="append">
<img class="login-code" src="./image/login-code.png">
</template>
</el-input>
</el-form-item>
<el-button size="default" @click="submit" type="primary" class="button-login">登录</el-button>
</el-form>
</el-card>
</div>
<!-- 快速登录按钮 -->
<el-button size="default" type="info" class="button-help" @click="dialogVisible = true">
快速选择用户（测试功能）
</el-button>
</div>
<el-dialog
title="快速选择用户"
:visible.sync="dialogVisible"
width="400px">
<el-row :gutter="10" style="margin: -20px 0px -10px 0px;">
<el-col v-for="(user, index) in users" :key="index" :span="8">
<div class="user-btn" @click="handleUserBtnClick(user)">
<d2-icon name="user-circle-o"/>
<span>{{user.name}}</span>
</div>
</el-col>
</el-row>
</el-dialog>
</div>
</template>
<script>
/* eslint-disable */
require('particles.js')
import config from './config/default'
import { mapActions } from 'vuex'
export default {
data () {
return {
// 快速选择用户
dialogVisible: false,
users: [
{
name: '管理员',
username: 'admin',
password: 'admin'
},
{
name: '编辑',
username: 'editor',
password: 'editor'
},
{
name: '用户1',
username: 'user1',
password: 'user1'
}
],
// 表单
formLogin: {
username: 'admin',
password: 'admin',
code: 'v9am'
},
// 校验
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
code: [
{ required: true, message: '请输入验证码', trigger: 'blur' }
]
}
}
},
mounted () {
// 初始化例子插件
particlesJS('login', config)
},
beforeDestroy () {
// 销毁 particlesJS
// thanks https://github.com/d2-projects/d2-admin/issues/65
// ref https://github.com/VincentGarreau/particles.js/issues/63
if (pJSDom && pJSDom.length > 0) {
pJSDom[0].pJS.fn.vendors.destroypJS()
pJSDom = []
}
},
methods: {
...mapActions('d2admin/account', [
'login'
]),
/**
* @description 接收选择一个用户快速登录的事件
* @param {Object} user 用户信息
*/
handleUserBtnClick (user) {
this.formLogin.username = user.username
this.formLogin.password = user.password
this.submit()
},
/**
* @description 提交表单
*/
// 提交登录信息
submit () {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// 登录
// 注意 这里的演示没有传验证码
// 具体需要传递的数据请自行修改代码
this.login({
vm: this,
username: this.formLogin.username,
password: this.formLogin.password
})
.then(() => {
// 重定向对象不存在则返回顶层路径
this.$router.replace(this.$route.query.redirect || '/')
})
} else {
// 登录表单校验失败
this.$message.error('表单校验失败')
}
})
}
}
}
</script>
<style lang="scss">
@import './style.scss';
</style>

1
src/pages/login/page.vue.REMOVED.git-id Normal file
View File

@@ -0,0 +1 @@
90001d614533eeb7b3390bc26ff8db6a97d1b096

89
src/pages/login/style.scss
View File

@@ -1,89 +0,0 @@
.login-page {
background-color: #EDF4FA;
height: 100%;
position: relative;
// 层
.layer {
position: absolute;
height: 100%;
width: 100%;
&.flex-center {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
// 背景
.bg {
canvas {
display: block;
margin: 0px;
padding: 0px;
}
}
// logo
.logo-group {
margin-top: -75px - 70px;
position: relative;
top: 75px;
img {
height: 140px;
}
}
// 登录表单
.form-group {
width: 300px;
// 重新设置卡片阴影
.el-card {
box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
.el-card__body {
padding-top: 70px;
}
}
// 登录按钮
.button-login {
width: 100%;
}
// 输入框左边的图表区域缩窄
.el-input-group__prepend {
padding: 0px 14px;
}
.login-code {
height: 40px - 2px;
display: block;
margin: 0px -20px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
}
// 帮助按钮
.button-help {
width: 300px;
margin-top: 20px;
}
.user-btn {
@extend %flex-center-col;
@extend %unable-select;
padding: 10px 0px;
border-radius: 4px;
&:hover {
background-color: $color-bg;
i {
color: $color-text-normal;
}
span {
color: $color-text-normal;
}
}
i {
font-size: 36px;
color: $color-text-sub;
}
span {
font-size: 12px;
margin-top: 10px;
color: $color-text-sub;
}
}
}