done
Former-commit-id: f4d2097b236a5c20e84ff57c2d4e9e62a3f0fefb
This commit is contained in:
liyang
@@ -0,0 +1,3 @@
|
||||
import page from './page'
|
||||
|
||||
export default page
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<p class="page_title">page not found</p>
|
||||
<el-button class="d2-mt" @click="$router.replace({ path: '/' })">
|
||||
返回首页
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
|
||||
background-blend-mode: multiply,multiply;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.page_title {
|
||||
font-size: 20px;
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="d2-badge">
|
||||
<p align="center">
|
||||
<a><img src="https://img.shields.io/github/release/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/forks/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/stars/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues-closed/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues-pr/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/github/issues-pr-closed/d2-projects/d2-admin.svg"/></a>
|
||||
</p>
|
||||
<p align="center">
|
||||
<a><img src="https://img.shields.io/npm/v/@d2-admin/ice-scaffold.svg"/></a>
|
||||
<a href="https://www.travis-ci.org/d2-projects/d2-admin"><img src="https://www.travis-ci.org/d2-projects/d2-admin.svg?branch=master"/></a>
|
||||
<a><img src="https://img.shields.io/github/last-commit/d2-projects/d2-admin.svg"/></a>
|
||||
<a><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg"/></a>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.d2-badge {
|
||||
margin-bottom: 20px;
|
||||
p {
|
||||
margin: 0px;
|
||||
margin-bottom: 2px;
|
||||
:nth-last-child() {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
margin: 0px 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 7.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<img
|
||||
src="./image/d2-help-button@2x.png"
|
||||
style="width: 138px;"
|
||||
@click="dialogVisible = true">
|
||||
<el-dialog
|
||||
title="帮助"
|
||||
width="600px"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true">
|
||||
<div style="margin-top: -25px; margin-bottom: -25px;">
|
||||
<el-button-group class="d2-mb">
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin')">
|
||||
<d2-icon name="github" class="d2-mr-5"/>
|
||||
主页
|
||||
</el-button>
|
||||
<el-button @click="$open('https://d2-projects.github.io/d2-admin-doc/zh/')">
|
||||
<d2-icon name="book" class="d2-mr-5"/>
|
||||
中文文档
|
||||
</el-button>
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin/issues')">
|
||||
<d2-icon name="question" class="d2-mr-5"/>
|
||||
issues
|
||||
</el-button>
|
||||
<el-button @click="$open('https://github.com/d2-projects/d2-admin/issues/new/choose')">
|
||||
<d2-icon name="plus" class="d2-mr-5"/>
|
||||
New issue
|
||||
</el-button>
|
||||
</el-button-group>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-alert :closable="false" type="info" title="扫码进 QQ 群 [ 推荐 ]" class="d2-mb"/>
|
||||
<img src="./image/qq.jpg" style="width: 100%;">
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-alert :closable="false" type="info" title="作者微信 加好友后邀请进微信群" class="d2-mb"/>
|
||||
<img src="./image/we.jpg" style="width: 100%;">
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'd2-page-cover',
|
||||
data () {
|
||||
return {
|
||||
dialogVisible: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
@@ -0,0 +1,3 @@
|
||||
import page from './page'
|
||||
|
||||
export default page
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<d2-container class="page">
|
||||
<d2-page-cover
|
||||
title="I AM D2ADMIN"
|
||||
sub-title="追求简约美感的后台管理系统集成方案">
|
||||
<d2-icon-svg style="width: 120px;" name="d2-admin"/>
|
||||
<template slot="footer">
|
||||
<div class="page__btn-group">
|
||||
<span @click="$open('https://github.com/d2-projects')">项目组</span> |
|
||||
<span @click="$open('https://d2-projects.github.io/d2-admin-doc/zh/')">使用文档</span> |
|
||||
<span @click="$open('https://github.com/d2-projects/d2-admin-start-kit')">简化版脚手架</span> |
|
||||
<span @click="$open('https://alibaba.github.io/ice/scaffold?type=vue')">飞冰物料</span> |
|
||||
<span @click="$open('https://juejin.im/user/57a48b632e958a006691b946/posts')">掘金专栏</span> |
|
||||
<el-popover
|
||||
:width="172"
|
||||
trigger="hover">
|
||||
<p class="d2-mt-0 d2-mb-10">D2Projects</p>
|
||||
<img src="./image/qr@2x.png" style="width: 172px;">
|
||||
<span slot="reference">微信公众号</span>
|
||||
<p
|
||||
style="
|
||||
font-size: 12px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
">
|
||||
官方公众号，主要推送前端技术类文章、框架资源、学习教程，以及 D2 系列项目更新信息
|
||||
</p>
|
||||
</el-popover>
|
||||
</div>
|
||||
<d2-badge/>
|
||||
<d2-help-btn/>
|
||||
</template>
|
||||
</d2-page-cover>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import D2HelpBtn from './components/d2-help-btn'
|
||||
import D2Badge from './components/d2-badge'
|
||||
export default {
|
||||
components: {
|
||||
D2HelpBtn,
|
||||
D2Badge
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '~@/assets/style/public.scss';
|
||||
.page {
|
||||
.page__btn-group {
|
||||
color: $color-text-placehoder;
|
||||
font-size: 12px;
|
||||
margin-top: -10px;
|
||||
margin-bottom: 20px;
|
||||
span {
|
||||
color: $color-text-sub;
|
||||
&:hover {
|
||||
color: $color-text-main;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,2 @@
|
||||
// 例子插件配置地址
|
||||
// https://vincentgarreau.com/particles.js/#default
|
||||
@@ -0,0 +1,112 @@
|
||||
/* 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
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* 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
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* 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
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/* 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
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -0,0 +1,3 @@
|
||||
import page from './page'
|
||||
|
||||
export default page
|
||||
@@ -0,0 +1,156 @@
|
||||
<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
|
||||
})
|
||||
} else {
|
||||
// 登录表单校验失败
|
||||
this.$message.error('表单校验失败')
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './style.scss';
|
||||
</style>
|
||||
@@ -0,0 +1,90 @@
|
||||
@import '~@/assets/style/public.scss';
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">Page 1 header</template>
|
||||
Hello World
|
||||
<template slot="footer">footer</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page1'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">Page 2 header</template>
|
||||
Hello World
|
||||
<template slot="footer">footer</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page2'
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<d2-container>
|
||||
<template slot="header">Page 3 header</template>
|
||||
Hello World
|
||||
<template slot="footer">footer</template>
|
||||
</d2-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'page3'
|
||||
}
|
||||
</script>
|
||||
Executable
+12
@@ -0,0 +1,12 @@
|
||||
<script>
|
||||
// 跳板页面
|
||||
export default {
|
||||
beforeCreate () {
|
||||
const path = this.$route.params.path
|
||||
this.$router.replace(JSON.parse(path))
|
||||
},
|
||||
render: function (h) {
|
||||
return h()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user