Skip to content

A
ant-design-pro-vue
Commit 65970af1 by Sendya
Options

fixed layout

parent fc584f4e
Showing with 795 additions and 157 deletions
.editorconfig 0 → 100644
[*]
charset=utf-8
end_of_line=crlf
insert_final_newline=false
indent_style=space
indent_size=2
[{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}]
indent_style=space
indent_size=2
[{*.jhm,*.xslt,*.xul,*.rng,*.xsl,*.xsd,*.ant,*.tld,*.fxml,*.jrxml,*.xml,*.jnlp,*.wsdl}]
indent_style=space
indent_size=2
[{.babelrc,.stylelintrc,jest.config,.eslintrc,.prettierrc,*.json,*.jsb3,*.jsb2,*.bowerrc}]
indent_style=space
indent_size=2
[*.svg]
indent_style=space
indent_size=2
[*.js.map]
indent_style=space
indent_size=2
[*.less]
indent_style=space
indent_size=2
[*.vue]
indent_style=space
indent_size=2
[{.analysis_options,*.yml,*.yaml}]
indent_style=space
indent_size=2
src/components/chart/Radar.vue 0 → 100644
<template>
<v-chart :forceFit="true" height="400" :data="data" :padding="[20, 20, 95, 20]" :scale="scale">
<v-tooltip />
<v-axis :dataKey="axis1Opts.dataKey" :line="axis1Opts.line" :tickLine="axis1Opts.tickLine" :grid="axis1Opts.grid" />
<v-axis :dataKey="axis2Opts.dataKey" :line="axis2Opts.line" :tickLine="axis2Opts.tickLine" :grid="axis2Opts.grid" />
<v-legend dataKey="user" marker="circle" :offset="30" />
<v-coord type="polar" radius="0.8" />
<v-line position="item*score" color="user" :size="2" />
<v-point position="item*score" color="user" :size="4" shape="circle" />
</v-chart>
</template>
<script>
const DataSet = require('@antv/data-set')
const sourceData = [
{item: '引用', a: 70, b: 30, c: 40},
{item: '口碑', a: 60, b: 70, c: 40},
{item: '产量', a: 50, b: 60, c: 40},
{item: '贡献', a: 40, b: 50, c: 40},
{item: '热度', a: 60, b: 70, c: 40},
{item: '引用', a: 70, b: 50, c: 40}
]
const dv = new DataSet.View().source(sourceData)
dv.transform({
type: 'fold',
fields: ['a', 'b', 'c'],
key: 'user',
value: 'score'
})
const scale = [
{
dataKey: 'score',
min: 0,
max: 80
},/* {
dataKey: 'user',
type: 'cat',
values: ['个人', '团队', '部门'],
alias: '类型'
}*/
]
const data = dv.rows
const axis1Opts = {
dataKey: 'item',
line: null,
tickLine: null,
grid: {
lineStyle: {
lineDash: null
},
hideFirstLine: false
}
}
const axis2Opts = {
dataKey: 'score',
line: null,
tickLine: null,
grid: {
type: 'polygon',
lineStyle: {
lineDash: null
}
}
}
export default {
name: 'Radar',
data () {
return {
sourceData,
data,
axis1Opts,
axis2Opts,
scale
}
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/GlobalView.vue → src/components/layout/LayoutBaseView.vue
<template>
<layout-view>
<route-view />
</layout-view>
<layout-main>
<route-view/>
</layout-main>
</template>
<script>
import LayoutView from './LayoutView'
import LayoutMain from './LayoutMain'
import RouteView from './RouteView'
export default {
name: "GlobalView",
components: {
LayoutView,
LayoutMain,
RouteView
}
}
......
src/components/LayoutHeader.vue → src/components/layout/LayoutHeader.vue
......@@ -13,7 +13,7 @@
</span>
<a-dropdown>
<span class="action ant-dropdown-link user-dropdown-menu">
<a-avatar class="avatar" size="small" src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"/>
<a-avatar class="avatar" size="small" :src="avatar()"/>
<span>{{ nickname() }}</span>
</span>
<a-menu slot="overlay" class="user-dropdown-menu-wrapper">
......@@ -22,8 +22,10 @@
<span>个人中心</span>
</a-menu-item>
<a-menu-item key="1">
<a-icon type="setting"/>
<span>账户设置</span>
<router-link :to="{ name: 'my' }">
<a-icon type="setting"/>
<span>账户设置</span>
</router-link>
</a-menu-item>
<a-menu-item key="2" disabled>
<a-icon type="setting"/>
......@@ -63,7 +65,7 @@
},
methods: {
...mapActions(["Logout"]),
...mapGetters(["nickname"]),
...mapGetters(["nickname", "avatar"]),
handleLogout() {
this.Logout({}).then(() => {
window.location.reload()
......
src/components/LayoutView.vue → src/components/layout/LayoutMain.vue
......@@ -5,16 +5,15 @@
<a-layout>
<!-- layout header -->
<s-layout-header :collapsed="collapsed" @toggle="toggle"></s-layout-header>
<layout-header :collapsed="collapsed" @toggle="toggle"></layout-header>
<!-- layout content -->
<a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
<page-content>
<slot></slot>
</page-content>
<!-- content -->
<slot></slot>
</a-layout-content>
<a-layout-footer style="padding: 0px">
<s-layout-footer />
<layout-footer />
</a-layout-footer>
</a-layout>
</a-layout>
......@@ -22,18 +21,16 @@
<script>
import SiderMenu from '@/components/menu/SiderMenu'
import LayoutHeader from '@/components/LayoutHeader'
import LayoutFooter from '@/components/LayoutFooter'
import PageContent from '@/components/PageContent'
import LayoutHeader from './LayoutHeader'
import LayoutFooter from './LayoutFooter'
import { asyncRouterMap } from '@/router/index'
export default {
name: "LayoutView",
components: {
SiderMenu,
PageContent,
"s-layout-header": LayoutHeader,
"s-layout-footer": LayoutFooter
LayoutHeader,
LayoutFooter
},
data() {
return {
......@@ -166,7 +163,9 @@
}
.ant-dropdown-menu-item>.anticon:first-child,
.ant-dropdown-menu-submenu-title>.anticon:first-child {
.ant-dropdown-menu-item>a>.anticon:first-child,
.ant-dropdown-menu-submenu-title>.anticon:first-child
.ant-dropdown-menu-submenu-title>a>.anticon:first-child {
min-width: 12px;
margin-right: 8px;
}
......
src/components/layout/LayoutView.vue 0 → 100644
<template>
<layout-main>
<route-view/>
</layout-main>
</template>
<script>
import LayoutMain from './LayoutMain'
import RouteView from './RouteView'
export default {
name: "GlobalView",
components: {
LayoutMain,
RouteView
}
}
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/PageHeader.vue → src/components/layout/PageHeader.vue
<template>
<div class="page-header">
<s-breadcrumb></s-breadcrumb>
<div class="detail">
<div v-if="avatar" class="avatar"><a-avatar :src="avatar" /></div>
<div class="main">
<div class="row">
<img v-if="logo" :src="logo" class="logo" />
<h1 v-if="title" class="title">{{ title }}</h1>
<div class="action"><slot name="action"></slot></div>
</div>
<div class="row">
<div v-if="this.$slots.content" class="content"><slot name="content"></slot></div>
<div v-if="this.$slots.extra" class="extra"><slot name="extra"></slot></div>
</div>
</div>
<div class="page-header">
<a-breadcrumb class="breadcrumb">
<a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
<router-link v-if="item.name != name" :to="{ path: item.path }">
{{ item.meta.title }}
</router-link>
<span v-else>{{ item.meta.title }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
<div class="detail">
<div v-if="avatar" class="avatar">
<a-avatar :src="avatar"/>
</div>
<div class="main">
<div class="row">
<img v-if="logo" :src="logo" class="logo"/>
<h1 v-if="title" class="title">{{ title }}</h1>
<div class="action">
<slot name="action"></slot>
</div>
</div>
<div class="row">
<div v-if="this.$slots.content" class="content">
<slot name="content"></slot>
</div>
<div v-if="this.$slots.extra" class="extra">
<slot name="extra"></slot>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Breadcrumb from '@/components/Breadcrumb'
import Breadcrumb from '@/components/tools/Breadcrumb'
export default {
name: "PageHeader",
......@@ -45,70 +62,106 @@
type: String,
required: false
}
},
data() {
return {
name: '',
breadList: [],
}
},
created() {
this.getBreadcrumb()
},
methods: {
getBreadcrumb() {
this.breadList = []
this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
this.name = this.$route.name
this.$route.matched.forEach((item) => {
// item.meta.name === 'dashboard' ? item.path = '/dashboard' : this.$route.path === item.path
this.breadList.push(item)
})
}
},
watch: {
$route() {
this.getBreadcrumb()
}
}
}
</script>
<style lang="scss" scoped>
.page-header {
background: #fff;
padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8;
.page-header {
background: #fff;
padding: 16px 32px 0;
border-bottom: 1px solid #e8e8e8;
.breadcrumb {
margin-bottom: 16px;
.breadcrumb {
margin-bottom: 16px;
}
.detail {
display: flex;
margin-bottom: 16px;
.avatar {
flex: 0 1 72px;
margin: 0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
}
.main {
width: 100%;
flex: 0 1 auto;
.row {
display: flex;
width: 100%;
}
.detail {
display: flex;
.avatar {
flex: 0 1 72px;
margin: 0 24px 8px 0;
& > span {
border-radius: 72px;
display: block;
width: 72px;
height: 72px;
}
}
.main {
width: 100%;
flex: 0 1 auto;
.row {
display: flex;
width: 100%;
}
.title {
font-size: 20px;
font-weight: 500;
}
.logo {
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content {
margin-bottom: 16px;
flex: auto;
}
.extra {
flex: 0 1 auto;
margin-left: 88px;
min-width: 242px;
text-align: right;
}
.action {
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
}
}
.title {
font-size: 20px;
font-weight: 500;
font-size: 20px;
line-height: 28px;
font-weight: 500;
color: rgba(0,0,0,.85);
margin-bottom: 12px;
}
.logo {
width: 28px;
height: 28px;
border-radius: 4px;
margin-right: 16px;
}
.content {
margin-bottom: 16px;
flex: auto;
color: rgba(0,0,0,.45);
line-height: 22px;
}
.extra {
flex: 0 1 auto;
margin-left: 88px;
min-width: 242px;
text-align: right;
}
.action {
margin-left: 56px;
min-width: 266px;
flex: 0 1 auto;
text-align: right;
}
}
}
}
</style>
\ No newline at end of file
src/components/PageLayout.vue → src/components/layout/PageLayout.vue
......@@ -9,28 +9,26 @@
<div class="link">
<template v-for="(link, index) in linkList">
<a :key="index" :href="link.href">
<a-icon :type="link.icon" />{{ link.title }}</a>
<a-icon :type="link.icon" />{{ link.title }}
</a>
</template>
</div>
</div>
<slot slot="extra" name="extra"></slot>
</page-header>
<div v-if="!$route.meta.hideHeader" ref="content" class="content">
<div ref="content" class="content">
<slot></slot>
</div>
<slot v-else></slot>
</div>
</template>
<script>
import PageHeader from './PageHeader'
import RouteView from './RouteView'
export default {
name: "LayoutContent",
components: {
PageHeader,
"s-route-view": RouteView
PageHeader
},
props: ['desc', 'logo', 'title', 'avatar', 'linkList', 'extraImage'],
}
......
src/components/menu/index.js
......@@ -98,7 +98,9 @@ export default {
var this2_ = this
var menuArr = []
menuTree.forEach(function (menu, i) {
menuArr.push(this2_.renderItem(h, menu, '0', i))
if (!menu.hidden) {
menuArr.push(this2_.renderItem(h, menu, '0', i))
}
})
return menuArr
},
......
src/components/tools/HeadInfo.vue
<template>
<div class="head-info">
<span>{{ title }}</span>
<p>{{ content }}</p>
<em v-if="bordered" />
</div>
<div class="head-info">
<span>{{ title }}</span>
<p>{{ content }}</p>
<em v-if="bordered"/>
</div>
</template>
<script>
......@@ -14,31 +14,32 @@
</script>
<style lang="scss" scoped>
.head-info{
position: relative;
text-align: center;
padding: 0 32px;
.head-info {
position: relative;
text-align: center;
padding: 0 32px;
min-width: 125px;
span {
color: rgba(0,0,0,.45);
display: inline-block;
font-size: 14px;
line-height: 22px;
margin-bottom: 4px;
}
p {
color: rgba(0,0,0,.85);
font-size: 24px;
line-height: 32px;
margin: 0;
}
em {
background-color: #e8e8e8;
position: absolute;
height: 56px;
width: 1px;
top: 0;
right: 0;
}
span {
color: rgba(0, 0, 0, .45);
display: inline-block;
font-size: 14px;
line-height: 22px;
margin-bottom: 4px;
}
p {
color: rgba(0, 0, 0, .85);
font-size: 24px;
line-height: 32px;
margin: 0;
}
em {
background-color: #e8e8e8;
position: absolute;
height: 56px;
width: 1px;
top: 0;
right: 0;
}
}
</style>
\ No newline at end of file
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '../components/LayoutView'
import Layout from '../components/layout/LayoutView'
import LayoutBase from '../components/layout/LayoutBaseView'
Vue.use(Router)
/**
......@@ -27,9 +28,10 @@ export const constantRouterMap = [
{
path: '/',
component: Layout,
redirect: '/dashboard',
redirect: '/login',
name: '首页',
hidden: true
hidden: true,
children: []
}
]
......@@ -70,7 +72,7 @@ export const asyncRouterMap = [
},
{
path: '/form',
component: Layout,
component: LayoutBase,
name: 'form',
redirect: '/form/base-form',
meta: { title: '表单页', icon: 'form' },
......@@ -97,9 +99,10 @@ export const asyncRouterMap = [
},
{
path: '/list',
component: Layout,
component: LayoutBase,
name: 'list',
redirect: '/list/query-list',
hidden: true,
meta: { title: '列表页', icon: 'table' },
children: [
{
......@@ -150,7 +153,7 @@ export const asyncRouterMap = [
},
{
path: '/profile',
component: Layout,
component: LayoutBase,
name: 'profile',
redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile' },
......@@ -171,7 +174,7 @@ export const asyncRouterMap = [
},
{
path: '/result',
component: Layout,
component: LayoutBase,
name: 'result',
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o' },
......@@ -225,5 +228,11 @@ export const asyncRouterMap = [
meta: { title: '500' }
}
]
},
{
path: '/my',
component: () => import('../views/user/Index'),
name: 'my',
meta: { title: '用户设置', icon: 'profile' }
}
]
\ No newline at end of file
src/store/getters.js
......@@ -4,6 +4,7 @@ const getters = {
avatar: state => state.user.avatar,
nickname: state => state.user.name,
roles: state => state.user.roles,
userInfo: state => state.user.info,
addRouters: state => state.permission.addRouters
}
......
src/store/modules/user.js
import { login, getInfo, logout } from "@/api/login"
import { setToken, getToken, removeToken } from '@/utils/auth'
import { welcome } from "@/utils/util"
const user = {
state: {
token: getToken(),
name: '',
welcome: '',
avatar: '',
roles: []
roles: [],
info: {}
},
mutations: {
SET_TOKEN: (state, token) => {
state.token = token
},
SET_NAME: (state, name) => {
SET_NAME: (state, { name, welcome }) => {
state.name = name
state.welcome = welcome
},
SET_AVATAR: (state, avatar) => {
state.avatar = avatar
},
SET_ROLES: (state, roles) => {
state.roles = roles
}
},
SET_INFO: (state, info) => {
state.info = info
},
},
actions: {
......@@ -56,12 +63,13 @@ const user = {
})
role.permissionList = role.permissions.map(permission => { return permission.permissionId });
commit('SET_ROLES', result.role)
commit('SET_INFO', result)
} else {
reject('getInfo: roles must be a non-null array !')
}
commit('SET_NAME', result.name)
commit('SET_AVATAR', '')
commit('SET_NAME', { name: result.name, welcome: welcome() })
commit('SET_AVATAR', result.avatar)
resolve(response)
}).catch(error => {
......
src/utils/util.js 0 → 100644
export function timeFix() {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour < 20 ? '下午好' : '晚上好')))
}
export function welcome() {
const arr = ['休息一会儿吧', '准备吃什么呢?', '要不要打一把 DOTA', '我猜你可能累了']
let index = Math.floor((Math.random()*arr.length))
return arr[index]
}
\ No newline at end of file
src/views/Login.vue
......@@ -93,9 +93,11 @@
</template>
<script>
import md5 from "md5";
import md5 from "md5"
import api from '../api/'
import {mapActions} from "vuex";
import { mapActions } from "vuex"
import { timeFix } from "../utils/util"
export default {
data() {
......@@ -179,7 +181,7 @@
that.Login(loginParams).then(() => {
that.loginBtn = false
that.$router.push({name: "dashboard"})
that.$message.success(that.timefix() +'，欢迎回来', 3)
that.$message.success(timeFix() +'，欢迎回来', 3)
}).catch((err) => {
that.requestFailed(err);
})
......@@ -223,11 +225,6 @@
}
);
},
timefix() {
const time = new Date()
const hour = time.getHours()
return hour < 9 ? '早上好' : (hour <= 11 ? '上午好' : (hour <= 13 ? '中午好' : (hour <= 20 ? '下午好' : '晚上好')))
},
requestFailed(err) {
this.$notification['error']({
message: '错误',
......
src/views/dashboard/Workplace.vue
<template>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>打酱油工程师 | 白鹭学园-打酱油组事业群-VUE平台</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="项目数" content="56" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="团队排名" content="8/24" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="项目访问" content="2,223"/>
</a-col>
</a-row>
</div>
<div>
Workplace
<a-row :gutter="24">
<a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
<a-card class="project-list" :loading="loading" style="margin-bottom: 24px;" :bordered="false" title="进行中的项目"
:body-style="{ padding: 0 }">
<a slot="extra">全部项目</a>
<div>
<a-card-grid :key="i" v-for="(item, i) in projects">
<a-card :bordered="false" :body-style="{ padding: 0 }">
<a-card-meta :description="item.description">
<div slot="title" class="card-title">
<a-avatar size="small" :src="item.cover"/>
<a>{{ item.title }}</a>
</div>
</a-card-meta>
<div class="project-item">
<a href="/#/">科学搬砖组</a>
<span class="datetime">9小时前</span>
</div>
</a-card>
</a-card-grid>
</div>
</a-card>
<a-card :loading="loading" title="动态" :bordered="false">
<a-list>
<a-list-item :key="index" v-for="(item, index) in activities">
<a-list-item-meta>
<a-avatar slot="avatar" :src="item.user.avatar" />
<div slot="title" v-html="item.template" />
<div slot="description">9小时前</div>
</a-list-item-meta>
</a-list-item>
</a-list>
</a-card>
</a-col>
<a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
<a-card title="快速开始 / 便捷导航" style="margin-bottom: 24px" :bordered="false" :body-style="{padding: 0}">
<div class="item-group">
<a>操作一</a>
<a>操作二</a>
<a>操作三</a>
<a>操作四</a>
<a>操作五</a>
<a>操作六</a>
<a-button size="small" type="primary" ghost icon="plus">添加</a-button>
</div>
</a-card>
<a-card title="XX 指数" style="margin-bottom: 24px" :loading="loading" :bordered="false" :body-style="{ padding: 0 }">
<div style="min-height: 400px;">
<radar :data="axisData" :scale="scale" :axis1Opts="axis1Opts" :axis2Opts="axis2Opts" />
</div>
</a-card>
<a-card :loading="loading" title="团队" :bordered="false">
<div class="members">
<a-row>
<a-col :span="12" v-for="(item, index) in teams" :key="index">
<a>
<a-avatar size="small" :src="item.avatar" />
<span class="member">{{item.name}}</span>
</a>
</a-col>
</a-row>
</div>
</a-card>
</a-col>
</a-row>
</div>
</page-layout>
</template>
<script>
import {timeFix, welcome} from "../../utils/util"
import {mapGetters} from "vuex"
import PageLayout from '@/components/layout/PageLayout'
import HeadInfo from '@/components/tools/HeadInfo'
import Radar from '@/components/chart/Radar'
const DataSet = require('@antv/data-set')
export default {
name: "Workplace"
name: "Workplace",
components: {
PageLayout,
HeadInfo,
Radar
},
data() {
return {
timeFix: timeFix(),
welcome: welcome(),
avatar: '',
user: {},
projects: [],
loading: true,
radarLoading: true,
activities: [],
teams: [],
// data
axis1Opts: {
dataKey: 'item',
line: null,
tickLine: null,
grid: {
lineStyle: {
lineDash: null
},
hideFirstLine: false
}
},
axis2Opts: {
dataKey: 'score',
line: null,
tickLine: null,
grid: {
type: 'polygon',
lineStyle: {
lineDash: null
}
}
},
scale: [{
dataKey: 'score',
min: 0,
max: 80
}],
axisData: [
{ item: '引用', a: 70, b: 30, c: 40 },
{ item: '口碑', a: 60, b: 70, c: 40 },
{ item: '产量', a: 50, b: 60, c: 40 },
{ item: '贡献', a: 40, b: 50, c: 40 },
{ item: '热度', a: 60, b: 70, c: 40 },
{ item: '引用', a: 70, b: 50, c: 40 }
],
radarData: []
}
},
computed: {
userInfo() {
return this.$store.getters.userInfo
}
},
created() {
this.user = this.userInfo
this.avatar = this.userInfo.avatar
},
mounted() {
this.getProjects()
this.initRadar()
},
methods: {
...mapGetters(["nickname"]),
getProjects() {
this.$http.get('/list/search/projects')
.then(res => {
this.projects = res.result && res.result.data
this.loading = false
})
},
initRadar() {
const dv = new DataSet.View().source(this.axisData)
dv.transform({
type: 'flod',
fields: ['a', 'b', 'c'],
key: 'user',
value: 'score'
})
console.log('dv.rows', dv.rows)
this.radarData = dv.rows
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.project-list {
.card-title {
font-size: 0;
a {
color: rgba(0, 0, 0, 0.85);
margin-left: 12px;
line-height: 24px;
height: 24px;
display: inline-block;
vertical-align: top;
font-size: 14px;
&:hover {
color: #1890ff;
}
}
}
.project-item {
display: flex;
margin-top: 8px;
overflow: hidden;
font-size: 12px;
height: 20px;
line-height: 20px;
a {
color: rgba(0, 0, 0, 0.45);
display: inline-block;
flex: 1 1 0;
&:hover {
color: #1890ff;
}
}
.datetime {
color: rgba(0, 0, 0, 0.25);
flex: 0 0 auto;
float: right;
}
}
.ant-card-meta-description {
color: rgba(0, 0, 0, 0.45);
height: 44px;
line-height: 22px;
overflow: hidden;
}
}
.item-group {
padding: 20px 0 8px 24px;
font-size: 0;
a {
color: rgba(0, 0, 0, 0.65);
display: inline-block;
font-size: 14px;
margin-bottom: 13px;
width: 25%;
}
}
.members {
a {
display: block;
margin: 12px 0;
line-height: 24px;
height: 24px;
.member {
font-size: 14px;
color: rgba(0, 0, 0, .65);
line-height: 24px;
max-width: 100px;
vertical-align: top;
margin-left: 12px;
transition: all 0.3s;
display: inline-block;
}
&:hover {
span {
color: #1890ff;
}
}
}
}
</style>
\ No newline at end of file
src/views/user/Index.vue 0 → 100644
<template>
<layout-main>
<page-layout :avatar="avatar">
<div slot="headerContent">
<div class="title">{{ timeFix }}，{{ user.name }}，{{ welcome }}</div>
<div>You are not alone.</div>
</div>
<div slot="extra">
<a-row>
<a-col :sm="8" :xs="24">
<head-info title="可用节点" content="16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="高级节点" content="7/16" :bordered="true"/>
</a-col>
<a-col :sm="8" :xs="24">
<head-info title="剩余流量" content="2,23Gb"/>
</a-col>
</a-row>
</div>
<a-card>
<a-form>
<a-form-item
label="昵称"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
>
<a-input placeholder="给自己起个名字" />
</a-form-item>
<a-form-item
label="Bio"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
>
<a-textarea rows="4" placeholder="You are not alone."/>
</a-form-item>
<a-form-item
label="电子邮件"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="exp@admin.com"/>
</a-form-item>
<a-form-item
label="加密方式"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-select defaultValue="aes-256-cfb">
<a-select-option value="aes-256-cfb">aes-256-cfb</a-select-option>
<a-select-option value="aes-128-cfb">aes-128-cfb</a-select-option>
<a-select-option value="chacha20">chacha20</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="连接密码"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="h3gSbecd"/>
</a-form-item>
<a-form-item
label="登陆密码"
:labelCol="{span: 7}"
:wrapperCol="{span: 10}"
:required="false"
>
<a-input placeholder="密码"/>
</a-form-item>
<a-form-item :wrapperCol="{span: 10, offset: 7}">
<a-button type="primary">提交</a-button>
<a-button style="margin-left: 8px">保存</a-button>
</a-form-item>
</a-form>
</a-card>
</page-layout>
</layout-main>
</template>
<script>
import {timeFix, welcome} from "../../utils/util"
import LayoutMain from '@/components/layout/LayoutMain'
import PageLayout from '@/components/layout/PageLayout'
import HeadInfo from '@/components/tools/HeadInfo'
import ASelect from "ant-design-vue/es/select";
export default {
name: "Index",
components: {
ASelect,
LayoutMain,
PageLayout,
HeadInfo
},
data () {
return {
timeFix: timeFix(),
welcome: welcome(),
avatar: '',
user: {},
}
},
computed: {
userInfo() {
return this.$store.getters.userInfo
}
},
created() {
this.user = this.userInfo
this.avatar = this.userInfo.avatar
},
}
</script>
<style scoped>
</style>
\ No newline at end of file
vue.config.js
......@@ -10,9 +10,12 @@ module.exports = {
loaderOptions: {
less: {
modifyVars: {
/* 'primary-color': '#1DA57A',
'link-color': '#1DA57A',*/
/* less 变量覆盖，用于自定义 ant design 主题 */
/*
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
*/
},
javascriptEnabled: true,
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment