mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
chore: template增加工作台和优化登录页面
This commit is contained in:
harrywan
parent
b5c62a87a6
commit
fae99e8764
@ -12,6 +12,7 @@ module.exports = {
|
||||
rules: {
|
||||
'no-plusplus': 'off',
|
||||
'no-bitwise': 'off',
|
||||
'no-console': 'off',
|
||||
'vue/comment-directive': 'off',
|
||||
'no-param-reassign': 'off',
|
||||
'func-names': 'off',
|
||||
|
||||
@ -24,8 +24,8 @@ module.exports = {
|
||||
},
|
||||
// 配置角色-路由访问权限，使用FesApp.setRole('unLogin')来修改当前用户的角色，控制路由访问权限
|
||||
roles: {
|
||||
unLogin: ['/home'],
|
||||
admin: ['/list', '*']
|
||||
unLogin: ['/'],
|
||||
admin: ['/dashboard/console', '*']
|
||||
},
|
||||
// map
|
||||
map: {
|
||||
@ -33,6 +33,15 @@ module.exports = {
|
||||
},
|
||||
// 左侧菜单配置
|
||||
menu: [
|
||||
{
|
||||
title: '工作台',
|
||||
subMenu: [
|
||||
{
|
||||
title: '工作台',
|
||||
path: '/dashboard/console'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '列表页',
|
||||
subMenu: [
|
||||
|
||||
@ -33,8 +33,10 @@
|
||||
"csp-html-webpack-plugin": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/data-set": "^0.11.7",
|
||||
"@antv/g2": "^4.0.15",
|
||||
"@babel/runtime-corejs3": "^7.11.2",
|
||||
"@webank/fes-core": "^0.2.1",
|
||||
"@webank/fes-ui": "^0.2.0",
|
||||
"@babel/runtime-corejs3": "^7.11.2"
|
||||
"@webank/fes-ui": "^0.2.0"
|
||||
}
|
||||
}
|
||||
|
||||
BIN
packages/fes-template/src/assets/images/favicon.png
Normal file
BIN
packages/fes-template/src/assets/images/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,131 +0,0 @@
|
||||
.login-panel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: $body-background;
|
||||
background-image: url("../images/bg.png");
|
||||
background-position: left bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
font-size: 18px;
|
||||
color: $black-text-color;
|
||||
}
|
||||
|
||||
.login-panel .login-panel-swap {
|
||||
position: relative;
|
||||
width: 945px;
|
||||
height: 324px;
|
||||
margin: 10% auto;
|
||||
border-radius: $border-radius-small;
|
||||
}
|
||||
|
||||
.login-panel .logo {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
.logo-text {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-top: 130px;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel .split {
|
||||
display: inline-block;
|
||||
background: $border-color-base;
|
||||
width: 1px;
|
||||
height: 180px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.login-panel .error {
|
||||
margin-top: 10px;
|
||||
width: 350px;
|
||||
color: $error-color;
|
||||
font-size: 14px;
|
||||
.ui-icon-exclamation-circle{
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-panel .login-form {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
padding: 0 75px 0;
|
||||
height: 270px;
|
||||
input::-webkit-input-placeholder{
|
||||
color: $black-text-color;
|
||||
}
|
||||
input::-moz-placeholder {
|
||||
color: $black-text-color;
|
||||
}
|
||||
/* ie */
|
||||
input:-ms-input-placeholder {
|
||||
color: $black-text-color;
|
||||
}
|
||||
/* firefox 19+ */
|
||||
input:-moz-placeholder {
|
||||
color: $black-text-color;
|
||||
}
|
||||
|
||||
input:-webkit-autofill {
|
||||
-webkit-box-shadow: 0 0 0px 1000px white inset !important;
|
||||
-webkit-text-fill-color: $black-text-color !important;
|
||||
}
|
||||
.line{
|
||||
padding-top: 30px;
|
||||
border-bottom: 1px solid $border-color-split;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="password"]{
|
||||
margin: 0;
|
||||
width: 350px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding: 0 15px;
|
||||
vertical-align: middle;
|
||||
background: 0 0;
|
||||
outline: 0;
|
||||
border: none;
|
||||
font-size: 16px;
|
||||
color: $black-text-color;
|
||||
}
|
||||
button {
|
||||
margin-top: 10px;
|
||||
width: 350px;
|
||||
height: 48px;
|
||||
border-radius: 4px;
|
||||
line-height: 46px;
|
||||
border: none;
|
||||
outline: 0;
|
||||
background-color: $primary-color;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
&:hover {
|
||||
background-color: $selected-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ie-palceholder::after{
|
||||
content: '用户名';
|
||||
position: absolute;
|
||||
left: 88px;
|
||||
top: 38px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.ie-palceholder-password::after{
|
||||
content: '密码';
|
||||
top: 110px;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
@import "variables";
|
||||
@import "login";
|
||||
|
||||
.article {
|
||||
padding: 20px;
|
||||
@ -57,11 +56,25 @@
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.mt-16{
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.pr-16{
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
// 修复问题
|
||||
.ui-modal .ui-modal-dialog{
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.query-page .query-page-table .ui-page {
|
||||
margin: 20px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -70,7 +83,7 @@
|
||||
.page-header{
|
||||
padding: 16px 32px 0;
|
||||
background: #fff;
|
||||
border-bottom: $border-color-split ;
|
||||
border-bottom: 1px solid $border-color-split ;
|
||||
.page-header-title{
|
||||
color: $title-color;
|
||||
font-weight: 500;
|
||||
@ -86,5 +99,6 @@
|
||||
min-height: 0;
|
||||
margin: 24px 24px;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color-split ;
|
||||
}
|
||||
}
|
||||
|
||||
54
packages/fes-template/src/components/Card.vue
Normal file
54
packages/fes-template/src/components/Card.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
{{title}}
|
||||
<div class="card-header-extra"><slot name="extra"></slot></div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<slot name="body"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/variables";
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
background: rgb(255, 255, 255);
|
||||
border-radius: 2px;
|
||||
color: $text-color;
|
||||
.card-header {
|
||||
min-height: 48px;
|
||||
margin-bottom: -1px;
|
||||
padding: 0px 24px;
|
||||
color: $title-color;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid rgb(240, 240, 240);
|
||||
border-radius: 2px 2px 0px 0px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.card-header-extra {
|
||||
color: $title-color;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
margin: -1px 0px 0px -1px;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
81
packages/fes-template/src/components/Chart.vue
Normal file
81
packages/fes-template/src/components/Chart.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div ref="chart"></div>
|
||||
</template>
|
||||
<script>
|
||||
import { Chart } from '@antv/g2';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data() {
|
||||
if (this.chart) {
|
||||
this.chart.changeData(this.data);
|
||||
this.chart.render();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const chart = new Chart({
|
||||
container: this.$refs.chart,
|
||||
autoFit: true,
|
||||
height: 300
|
||||
});
|
||||
this.chart = chart;
|
||||
Object.keys(this.options).forEach((p) => {
|
||||
const option = this.options[p];
|
||||
switch (p) {
|
||||
case 'scale':
|
||||
chart.scale(option);
|
||||
break;
|
||||
case 'coordinate':
|
||||
chart.coordinate(option);
|
||||
break;
|
||||
case 'tooltip':
|
||||
chart.tooltip(option);
|
||||
break;
|
||||
case 'axis':
|
||||
Object.keys(option).forEach((pp) => {
|
||||
chart.axis(pp, option[pp]);
|
||||
});
|
||||
break;
|
||||
default:
|
||||
}
|
||||
});
|
||||
|
||||
if (this.options.line) {
|
||||
const lineGeometry = chart.line();
|
||||
Object.keys(this.options.line).forEach((pp) => {
|
||||
lineGeometry[pp](this.options.line[pp]);
|
||||
});
|
||||
}
|
||||
|
||||
if (this.options.point) {
|
||||
const pointGeometry = chart.point();
|
||||
Object.keys(this.options.point).forEach((pp) => {
|
||||
pointGeometry[pp](this.options.point[pp]);
|
||||
});
|
||||
}
|
||||
|
||||
if (this.data.length === 0) {
|
||||
return;
|
||||
}
|
||||
chart.data(this.data);
|
||||
chart.render();
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.chart && this.chart.destroy();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
449
packages/fes-template/src/pages/dashboard/console.vue
Normal file
449
packages/fes-template/src/pages/dashboard/console.vue
Normal file
@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<div class="page page-console">
|
||||
<div class="page-header">
|
||||
<div class="page-header-title">工作台</div>
|
||||
<div class="page-hader-content">
|
||||
<img
|
||||
class="avatar"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"
|
||||
/>
|
||||
<div class="user">
|
||||
<div class="user-wellcome">早安，Harry，祝你开心每一天！</div>
|
||||
<div class="user-role">
|
||||
前端开发工程师 | 某某公司-某某部门-某某科室
|
||||
</div>
|
||||
</div>
|
||||
<div class="report">
|
||||
<div class="report-item">
|
||||
<span class="report-item-name">项目数量</span>
|
||||
<span class="report-item-score">56</span>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<span class="report-item-name">团队内排名</span>
|
||||
<span class="report-item-score">8 / 24</span>
|
||||
</div>
|
||||
<div class="report-item">
|
||||
<span class="report-item-name">项目访问</span>
|
||||
<span class="report-item-score">2,223</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="page-body">
|
||||
<Row>
|
||||
<Cell span="16" class="pr-16">
|
||||
<Card title="进行中的项目">
|
||||
<a slot="extra" href="">全部项目</a>
|
||||
<div slot="body" class="grid-project">
|
||||
<div v-for="(item, i) in projects" :key="i" class="grid-project-item">
|
||||
<div class="grid-project-title">
|
||||
<img :src="item.icon" />
|
||||
<span>{{item.title}}</span>
|
||||
</div>
|
||||
<div class="grid-project-desc">{{item.desc}}</div>
|
||||
<div class="grid-project-content">
|
||||
<span>{{item.group}}</span>
|
||||
<span class="grid-project-time">{{item.time}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="mt-16" title="动态">
|
||||
<div slot="body" class="list-dynamic">
|
||||
<div v-for="(item, i) in projects" :key="i" class="list-dynamic-item">
|
||||
<img
|
||||
class="list-dynamic-logo"
|
||||
src="https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"
|
||||
/>
|
||||
<div class="list-dynamic-content">
|
||||
曲丽丽 在 <a>高逼格设计天团</a> 新建项目 <a>六月迭代</a>
|
||||
<div class="list-dynamic-desc">3 小时前</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Cell>
|
||||
<Cell span="8">
|
||||
<Card title="快速开始 / 便捷导航">
|
||||
<div slot="body" class="grid-nav">
|
||||
<div v-for="(item, i) in navs" :key="i" class="grid-nav-item">
|
||||
{{item}}
|
||||
</div>
|
||||
<div>
|
||||
<Wb-button icon="md-add" type="ghost">添加</Wb-button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="mt-16" title="幸运指数">
|
||||
<div slot="body" class="card-chart">
|
||||
<Chart :data="chartData" :options="chartOptions"></Chart>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card class="mt-16" title="团队">
|
||||
<div slot="body" class="grid-group">
|
||||
<div v-for="(item, i) in projects" :key="i" class="grid-group-item">
|
||||
<img :src="item.icon" class="grid-group-icon" />
|
||||
<span class="grid-group-name">{{item.group}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Cell>
|
||||
</Row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DataSet from '@antv/data-set';
|
||||
|
||||
|
||||
export default {
|
||||
FesData() {
|
||||
return {
|
||||
projects: [
|
||||
{
|
||||
icon: 'https://cn.vuejs.org/images/logo.png',
|
||||
title: 'Vue',
|
||||
desc: '那是一种内在的东西，他们到达不了，也无法触及的',
|
||||
group: '科学搬砖组',
|
||||
time: '2 小时前'
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
|
||||
title: 'Angular',
|
||||
desc: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
|
||||
group: '中二少女团',
|
||||
time: '3 年前'
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png',
|
||||
title: 'React',
|
||||
desc: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
|
||||
group: 'javascript',
|
||||
time: '2 小时前'
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
|
||||
title: 'Bootstrap',
|
||||
desc: '那时候我只会想自己想要什么，从不想自己拥有什么',
|
||||
group: 'java',
|
||||
time: '2 小时前'
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://s.cn.bing.net/th?id=OJ.wjuHWOYyiQYnjw&pid=MsnJVFeeds&w=16&h=16',
|
||||
title: 'Wechat',
|
||||
desc: '凛冬将至',
|
||||
group: '部落',
|
||||
time: '2 小时前'
|
||||
},
|
||||
{
|
||||
icon:
|
||||
'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
|
||||
title: 'Alipay',
|
||||
desc: '生命就像一盒巧克力，结果往往出人意料',
|
||||
group: '联盟',
|
||||
time: '2 小时前'
|
||||
}
|
||||
],
|
||||
navs: ['操作一', '操作二', '操作三', '操作四', '操作五', '操作六'],
|
||||
chartData: [],
|
||||
chartOptions: {
|
||||
scale: {
|
||||
score: {
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
},
|
||||
coordinate: {
|
||||
type: 'polar',
|
||||
cfg: {
|
||||
radius: 0.85
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
shared: true,
|
||||
showCrosshairs: true,
|
||||
crosshairs: {
|
||||
line: {
|
||||
style: {
|
||||
lineDash: [4, 4],
|
||||
stroke: '#333'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
axis: {
|
||||
item: {
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
line: {
|
||||
style: {
|
||||
lineDash: null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
score: {
|
||||
line: null,
|
||||
tickLine: null,
|
||||
grid: {
|
||||
line: {
|
||||
type: 'line',
|
||||
style: {
|
||||
lineDash: null
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
line: {
|
||||
position: 'item*score',
|
||||
color: 'user',
|
||||
size: 2
|
||||
},
|
||||
point: {
|
||||
position: 'item*score',
|
||||
color: 'user',
|
||||
shape: 'circle',
|
||||
size: 4,
|
||||
style: {
|
||||
stroke: '#fff',
|
||||
lineWidth: 1,
|
||||
fillOpacity: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
FesReady() {
|
||||
const data = [
|
||||
{
|
||||
item: '热度',
|
||||
a: 70,
|
||||
b: 10,
|
||||
c: 70
|
||||
},
|
||||
{
|
||||
item: '引用',
|
||||
a: 100,
|
||||
b: 30,
|
||||
c: 40
|
||||
},
|
||||
{
|
||||
item: '口碑',
|
||||
a: 80,
|
||||
b: 90,
|
||||
c: 10
|
||||
},
|
||||
{
|
||||
item: '产出',
|
||||
a: 40,
|
||||
b: 60,
|
||||
c: 60
|
||||
},
|
||||
{
|
||||
item: '贡献',
|
||||
a: 50,
|
||||
b: 30,
|
||||
c: 60
|
||||
}
|
||||
];
|
||||
const { DataView } = DataSet;
|
||||
const dv = new DataView().source(data);
|
||||
dv.transform({
|
||||
type: 'rename',
|
||||
map: {
|
||||
a: '个人',
|
||||
b: '团队',
|
||||
c: '部门'
|
||||
}
|
||||
});
|
||||
dv.transform({
|
||||
type: 'fold',
|
||||
fields: ['个人', '团队', '部门'], // 展开字段集
|
||||
key: 'user', // key字段
|
||||
value: 'score' // value字段
|
||||
});
|
||||
this.chartData = dv.rows;
|
||||
},
|
||||
FesBeforeDestroy() {
|
||||
},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~@/assets/styles/variables";
|
||||
.page.page-console{
|
||||
font-size: 14px;
|
||||
.page-header {
|
||||
.page-hader-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
.avatar {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
.user {
|
||||
flex: 1;
|
||||
.user-wellcome {
|
||||
font-size: 18px;
|
||||
color: $title-color;
|
||||
}
|
||||
.user-role {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
.report {
|
||||
min-width: 420px;
|
||||
margin-left: 88px;
|
||||
display: flex;
|
||||
.report-item {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding: 0 32px;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
&:not(:last-child):before{
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 6px;
|
||||
bottom: 6px;
|
||||
width: 1px;
|
||||
background: $border-color-split;
|
||||
}
|
||||
&:last-child{
|
||||
padding-right: 0;
|
||||
|
||||
}
|
||||
.report-item-name {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.report-item-score {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.page-body {
|
||||
background: #f0f2f5;
|
||||
border: none;
|
||||
|
||||
.grid-project {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33.33%);
|
||||
.grid-project-item {
|
||||
padding: 24px;
|
||||
border: 0px;
|
||||
box-shadow: rgb(240, 240, 240) 1px 0px 0px 0px,
|
||||
rgb(240, 240, 240) 0px 1px 0px 0px, rgb(240, 240, 240) 1px 1px 0px 0px,
|
||||
rgb(240, 240, 240) 1px 0px 0px 0px inset,
|
||||
rgb(240, 240, 240) 0px 1px 0px 0px inset;
|
||||
transition: all 0.3s ease 0s;
|
||||
&:hover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16),
|
||||
0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);
|
||||
}
|
||||
}
|
||||
.grid-project-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
img {
|
||||
width: 24px;
|
||||
height: auto;
|
||||
}
|
||||
span {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.grid-project-desc {
|
||||
height: 44px;
|
||||
overflow: hidden;
|
||||
color: $sub-text-color;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.grid-project-content {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.grid-project-time {
|
||||
color: rgba($sub-text-color, 0.85);
|
||||
}
|
||||
}
|
||||
}
|
||||
.grid-nav {
|
||||
display: grid;
|
||||
padding: 20px;
|
||||
row-gap: 20px;
|
||||
grid-template-columns: repeat(4, 25%);
|
||||
.grid-nav-item {
|
||||
line-height: 24px;
|
||||
}
|
||||
.ui-button {
|
||||
padding: 2px 8px;
|
||||
}
|
||||
}
|
||||
.card-chart {
|
||||
padding: 20px;
|
||||
}
|
||||
.grid-group {
|
||||
display: grid;
|
||||
padding: 20px;
|
||||
row-gap: 20px;
|
||||
grid-template-columns: repeat(2, 50%);
|
||||
.grid-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.grid-group-icon {
|
||||
width: 24px;
|
||||
height: auto;
|
||||
}
|
||||
.grid-group-name {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.list-dynamic {
|
||||
padding: 8px 24px 8px 24px;
|
||||
.list-dynamic-item {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
&:last-child {
|
||||
border: 0;
|
||||
}
|
||||
.list-dynamic-logo {
|
||||
margin-right: 16px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.list-dynamic-content {
|
||||
flex: 1;
|
||||
.list-dynamic-desc {
|
||||
margin-top: 4px;
|
||||
color: $sub-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,136 +0,0 @@
|
||||
<template>
|
||||
<div class="login-panel">
|
||||
<div class="login-panel-swap">
|
||||
<div class="logo">
|
||||
<span class="logo-text">
|
||||
Fes.js 运营平台
|
||||
</span>
|
||||
</div>
|
||||
<div class="split" />
|
||||
<div class="login-form">
|
||||
<div :class="getStyle('userFocus')" class="line">
|
||||
<input
|
||||
ref="username"
|
||||
v-model="username"
|
||||
@input="input"
|
||||
@keydown.enter="login"
|
||||
@focus="focusHandler('userFocus')"
|
||||
@blur="blurHandler('userFocus')"
|
||||
type="text"
|
||||
name="username"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
placeholder="用户名"
|
||||
>
|
||||
</div>
|
||||
<div :class="getStyle('passwordFocus')" class="line">
|
||||
<input
|
||||
ref="password"
|
||||
v-model="password"
|
||||
@input="input"
|
||||
@keydown.enter="login"
|
||||
@focus="focusHandler('passwordFocus')"
|
||||
@blur="blurHandler('passwordFocus')"
|
||||
type="password"
|
||||
name="password"
|
||||
autocomplete="off"
|
||||
placeholder="密码"
|
||||
>
|
||||
</div>
|
||||
<div class="line">
|
||||
<button @click="login">
|
||||
登录
|
||||
</button>
|
||||
</div>
|
||||
<div v-show="error" class="error">
|
||||
<Icon type="exclamation-circle" />{{error}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
FesLeft: false,
|
||||
FesData() {
|
||||
return {
|
||||
userFocus: false,
|
||||
passwordFocus: false,
|
||||
username: '',
|
||||
password: '',
|
||||
error: '' // 请输入正确的密码，8-16位
|
||||
};
|
||||
},
|
||||
FesReady() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.username.focus();
|
||||
});
|
||||
this.initStyle();
|
||||
if (this.FesStorage.get('userLogin') === true) {
|
||||
this.getRole();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
if (this.validate()) {
|
||||
// 设置用户、角色等
|
||||
this.FesApp.set('FesUserName', 'harrywan');
|
||||
this.FesApp.set('FesRoleName', '管理员');
|
||||
this.FesStorage.set('userLogin', true);
|
||||
this.getRole();
|
||||
}
|
||||
},
|
||||
getRole() {
|
||||
this.FesApp.setRole('admin');
|
||||
},
|
||||
input() {
|
||||
this.error = '';
|
||||
},
|
||||
validate() {
|
||||
const { username } = this;
|
||||
const { password } = this;
|
||||
if (username === '' || username == null) {
|
||||
this.error = '请输入用户名';
|
||||
return false;
|
||||
}
|
||||
if (!/^[a-zA-Z0-9]+([._\\-]*[a-zA-Z0-9])*@([a-zA-Z0-9]+[-a-zA-Z0-9]*[a-zA-Z0-9]+.){1,63}[a-zA-Z0-9]+$/.test(username)) {
|
||||
this.error = '请输入正确邮箱账号';
|
||||
return false;
|
||||
}
|
||||
if (password === '' || password == null) {
|
||||
this.error = '请输入密码';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
getStyle(type) {
|
||||
let style = '';
|
||||
if (this[type] && this.isIE(9)) {
|
||||
if (type === 'passwordFocus' && !this.password) {
|
||||
style += ' ie-palceholder ie-palceholder-password';
|
||||
} else if (type === 'userFocus' && !this.username) {
|
||||
style += ' ie-palceholder';
|
||||
}
|
||||
}
|
||||
return style;
|
||||
},
|
||||
initStyle() {
|
||||
if (this.isIE(9)) {
|
||||
!this.password && (this.passwordFocus = true);
|
||||
!this.username && (this.userFocus = true);
|
||||
}
|
||||
},
|
||||
focusHandler(type) {
|
||||
this.isIE(9) && (this[type] = false);
|
||||
},
|
||||
blurHandler(type) {
|
||||
this[type] = true;
|
||||
},
|
||||
isIE(ver) {
|
||||
const b = document.createElement('b');
|
||||
b.innerHTML = `<!--[if IE ${ver}]><i></i><![endif]-->`;
|
||||
return b.getElementsByTagName('i').length === 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
241
packages/fes-template/src/pages/index.vue
Normal file
241
packages/fes-template/src/pages/index.vue
Normal file
@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<div class="login-panel">
|
||||
<div class="login-panel-swap">
|
||||
<div class="login-project">
|
||||
<div class="title">
|
||||
<!-- <img class="logo" src="~@/assets/images/favicon.png" /> -->
|
||||
<span class="text">Fes.js 运营平台</span>
|
||||
</div>
|
||||
<div class="desc">fes.js是一个优秀的中台应用前端解决方案</div>
|
||||
</div>
|
||||
<div class="login-form">
|
||||
<div :class="{ focus: currentFoucs === 'userFocus' }" class="input-swap">
|
||||
<Icon class="icon" type="md-person" />
|
||||
<input
|
||||
ref="username"
|
||||
v-model="username"
|
||||
@input="input"
|
||||
@keydown.enter="login"
|
||||
@focus="focusHandler('userFocus')"
|
||||
@blur="blurHandler('userFocus')"
|
||||
class="input"
|
||||
type="text"
|
||||
name="username"
|
||||
autocomplete="off"
|
||||
autofocus
|
||||
placeholder="用户名: 符合邮箱规则即可"
|
||||
/>
|
||||
</div>
|
||||
<div :class="{ focus: currentFoucs === 'passwordFocus' }" class="input-swap">
|
||||
<Icon class="icon" type="md-eye-off" />
|
||||
<input
|
||||
ref="password"
|
||||
v-model="password"
|
||||
@input="input"
|
||||
@keydown.enter="login"
|
||||
@focus="focusHandler('passwordFocus')"
|
||||
@blur="blurHandler('passwordFocus')"
|
||||
class="input"
|
||||
type="password"
|
||||
name="password"
|
||||
autocomplete="off"
|
||||
placeholder="密码：任意"
|
||||
/>
|
||||
</div>
|
||||
<div class="help">
|
||||
<Checkbox value="1">
|
||||
记住密码
|
||||
</Checkbox>
|
||||
<a>忘记密码</a>
|
||||
</div>
|
||||
<button @click="login" class="button">登录</button>
|
||||
<div v-show="error" class="error">
|
||||
<Icon type="md-warning" />
|
||||
{{error}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
FesLeft: false,
|
||||
FesData() {
|
||||
return {
|
||||
currentFoucs: '',
|
||||
username: '',
|
||||
password: '',
|
||||
error: '' // 请输入正确的密码，8-16位
|
||||
};
|
||||
},
|
||||
FesReady() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.username.focus();
|
||||
this.currentFoucs = 'userFocus';
|
||||
});
|
||||
if (this.FesStorage.get('userLogin') === true) {
|
||||
this.getRole();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
login() {
|
||||
if (this.validate()) {
|
||||
// 设置用户、角色等
|
||||
this.FesApp.set('FesUserName', 'harrywan');
|
||||
this.FesApp.set('FesRoleName', '管理员');
|
||||
this.FesStorage.set('userLogin', true);
|
||||
this.getRole();
|
||||
}
|
||||
},
|
||||
getRole() {
|
||||
this.FesApp.setRole('admin');
|
||||
},
|
||||
input() {
|
||||
this.error = '';
|
||||
},
|
||||
focusHandler(type) {
|
||||
this.currentFoucs = type;
|
||||
},
|
||||
blurHandler() {
|
||||
this.currentFoucs = '';
|
||||
},
|
||||
validate() {
|
||||
const { username } = this;
|
||||
const { password } = this;
|
||||
if (username === '' || username == null) {
|
||||
this.error = '请输入用户名';
|
||||
return false;
|
||||
}
|
||||
if (
|
||||
!/^[a-zA-Z0-9]+([._\\-]*[a-zA-Z0-9])*@([a-zA-Z0-9]+[-a-zA-Z0-9]*[a-zA-Z0-9]+.){1,63}[a-zA-Z0-9]+$/.test(
|
||||
username
|
||||
)
|
||||
) {
|
||||
this.error = '请输入正确邮箱账号';
|
||||
return false;
|
||||
}
|
||||
if (password === '' || password == null) {
|
||||
this.error = '请输入密码';
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "~@/assets/styles/variables";
|
||||
.login-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background: #f0f2f5;
|
||||
background-image: url("~@/assets/images/bg.png");
|
||||
background-position: left bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.login-panel .login-panel-swap {
|
||||
width: 350px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
.login-project {
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-size: 33px;
|
||||
color: $black-text-color;
|
||||
.logo {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
margin-top: 12px;
|
||||
margin-bottom: 40px;
|
||||
color: $sub-text-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.login-form {
|
||||
height: 270px;
|
||||
.input-swap {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 32px;
|
||||
padding: 6px 11px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid $border-color-base;
|
||||
background: #ffffff;
|
||||
transition: all 0.3s;
|
||||
&:not(:first-child) {
|
||||
margin-top: 12px;
|
||||
}
|
||||
&:hover,&.focus {
|
||||
border-color: $link-hover-color;
|
||||
box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
|
||||
}
|
||||
.icon {
|
||||
margin-right: 4px;
|
||||
color: $primary-color;
|
||||
}
|
||||
.input {
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-variant: tabular-nums;
|
||||
list-style: none;
|
||||
font-feature-settings: "tnum", "tnum";
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
padding: 2px 11px;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: $primary-color;
|
||||
color: #ffffff;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
&:hover{
|
||||
background: rgba($primary-color, 0.85);
|
||||
}
|
||||
}
|
||||
.error {
|
||||
margin-top: 10px;
|
||||
width: 350px;
|
||||
color: $error-color;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
.ui-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.help{
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user