github
/
halo-admin
mirror of https://github.com/halo-dev/halo-admin
1
0
Fork 0
Code Issues Releases Wiki Activity

Complate login page

pull/9/head
ruibaby 2019-04-06 01:03:01 +08:00
parent 9be72448fd
commit 4f4cab98be
5 changed files with 186 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -9,6 +9,7 @@
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"animate.css": "^3.7.0",
"ant-design-vue": "~1.3.7",
"axios": "^0.18.0",
"enquire.js": "^2.1.6",

6
src/config/router.config.js
View File

@ -191,10 +191,12 @@ export const constantRouterMap = [
}
]
},
{
path: '/login',
component: () => import('@/views/user/Login')
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
}
]

2
src/main.js
View File

@ -9,10 +9,12 @@ import './core/use'
import bootstrap from './core/bootstrap'
// import '@/permission' // permission control
import '@/utils/filter' // global filter
import animated from 'animate.css'
Vue.config.productionTip = false
Vue.use(router)
Vue.use(animated)
new Vue({
router,

120
src/views/attachment/AttachmentList.vue
View File

@ -1,20 +1,118 @@
<template>
<div class="page-header-index-wide">
<a-card title="Card Title">
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
<a-card-grid style="width:25%;textAlign:'center'">Content</a-card-grid>
</a-card>
<a-row :gutter="12" type="flex" align="middle">
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
<a-col
class="attachment-item"
:xl="4"
:lg="4"
:md="12"
:sm="12"
:xs="24"
>
<a-card :bodyStyle="{ padding: '14px' }">
<img :src="src" slot="cover" />
</a-card>
</a-col>
</a-row>
</div>
</template>
<script>
export default {}
export default {
data() {
return {
src: 'https://cdn.ryanc.cc/img/blog/thumbnails/c86b59623c4a9bfeac403824dec3a789.jpg'
}
}
}
</script>
<style scoped>
<style lang="less" scoped>
.attachment-item {
padding-bottom: 12px;
}
</style>

70
src/views/user/Login.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div class="container loginForm">
<div class="loginLogo animated fadeInUp">
Halo
</div>
<div class="loginBody animated">
<a-form layout="vertical">
<a-form-item class="animated fadeInUp" :style="{'animation-delay': '0.1s'}">
<a-input placeholder="用户名/邮箱"></a-input>
</a-form-item>
<a-form-item class="animated fadeInUp" :style="{'animation-delay': '0.2s'}">
<a-input type="password" placeholder="密码"></a-input>
</a-form-item>
<a-form-item class="animated fadeInUp" :style="{'animation-delay': '0.3s'}">
<a-button type="primary" block="true">登录</a-button>
</a-form-item>
</a-form>
</div>
</div>
</template>
<script>
export default {
beforeCreate() {
this.form = this.$form.createForm(this)
},
methods: {
handleSubmit(e) {
e.preventDefault()
this.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values)
}
})
}
}
}
</script>
<style>
body {
background-color: #f5f5f5;
}
* {
outline: 0;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.loginForm {
max-width: 380px;
margin-top: 10%;
}
.loginLogo {
font-size: 56px;
text-align: center;
margin-bottom: 25px;
font-weight: 500;
color: #444;
text-shadow: #b2baba 0.1em 0.1em 0.2em;
}
.loginBody {
padding: 20px;
background-color: #fff;
-o-box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
box-shadow: -4px 7px 46px 2px rgba(0, 0, 0, 0.1);
}
</style>