mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
chore: template增加工作台和优化登录页面
This commit is contained in:
harrywan
parent
b5c62a87a6
commit
fae99e8764
@ -12,6 +12,7 @@ module.exports = {
|
|||||||
rules: {
|
rules: {
|
||||||
'no-plusplus': 'off',
|
'no-plusplus': 'off',
|
||||||
'no-bitwise': 'off',
|
'no-bitwise': 'off',
|
||||||
|
'no-console': 'off',
|
||||||
'vue/comment-directive': 'off',
|
'vue/comment-directive': 'off',
|
||||||
'no-param-reassign': 'off',
|
'no-param-reassign': 'off',
|
||||||
'func-names': 'off',
|
'func-names': 'off',
|
||||||
|
|||||||
@ -24,8 +24,8 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
// 配置角色-路由访问权限，使用FesApp.setRole('unLogin')来修改当前用户的角色，控制路由访问权限
|
// 配置角色-路由访问权限，使用FesApp.setRole('unLogin')来修改当前用户的角色，控制路由访问权限
|
||||||
roles: {
|
roles: {
|
||||||
unLogin: ['/home'],
|
unLogin: ['/'],
|
||||||
admin: ['/list', '*']
|
admin: ['/dashboard/console', '*']
|
||||||
},
|
},
|
||||||
// map
|
// map
|
||||||
map: {
|
map: {
|
||||||
@ -33,6 +33,15 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
// 左侧菜单配置
|
// 左侧菜单配置
|
||||||
menu: [
|
menu: [
|
||||||
|
{
|
||||||
|
title: '工作台',
|
||||||
|
subMenu: [
|
||||||
|
{
|
||||||
|
title: '工作台',
|
||||||
|
path: '/dashboard/console'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '列表页',
|
title: '列表页',
|
||||||
subMenu: [
|
subMenu: [
|
||||||
|
|||||||
@ -33,8 +33,10 @@
|
|||||||
"csp-html-webpack-plugin": "^4.0.0"
|
"csp-html-webpack-plugin": "^4.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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-core": "^0.2.1",
|
||||||
"@webank/fes-ui": "^0.2.0",
|
"@webank/fes-ui": "^0.2.0"
|
||||||
"@babel/runtime-corejs3": "^7.11.2"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
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 "variables";
|
||||||
@import "login";
|
|
||||||
|
|
||||||
.article {
|
.article {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
@ -57,11 +56,25 @@
|
|||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mt-16{
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pr-16{
|
||||||
|
padding-right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
// 修复问题
|
// 修复问题
|
||||||
.ui-modal .ui-modal-dialog{
|
.ui-modal .ui-modal-dialog{
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.query-page .query-page-table .ui-page {
|
||||||
|
margin: 20px;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.page {
|
.page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -70,7 +83,7 @@
|
|||||||
.page-header{
|
.page-header{
|
||||||
padding: 16px 32px 0;
|
padding: 16px 32px 0;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: $border-color-split ;
|
border-bottom: 1px solid $border-color-split ;
|
||||||
.page-header-title{
|
.page-header-title{
|
||||||
color: $title-color;
|
color: $title-color;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
@ -86,5 +99,6 @@
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
margin: 24px 24px;
|
margin: 24px 24px;
|
||||||
background: #fff;
|
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