parent
64c80f7ca6
commit
4f93158656
|
After Width: | Height: | Size: 13 KiB |
@ -1,124 +1,136 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
|
||||
/**
|
||||
* Note: sub-menu only appear when route children.length >= 1
|
||||
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
||||
*
|
||||
* hidden: true if set true, item will not show in the sidebar(default is false)
|
||||
* alwaysShow: true if set true, will always show the root menu
|
||||
* if not set alwaysShow, when item has more than one children route,
|
||||
* it will becomes nested mode, otherwise not show the root menu
|
||||
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
|
||||
* name:'router-name' the name is used by <keep-alive> (must set!!!)
|
||||
* meta : {
|
||||
roles: ['admin','editor'] control the page roles (you can set multiple roles)
|
||||
title: 'title' the name show in sidebar and breadcrumb (recommend set)
|
||||
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
|
||||
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
|
||||
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* constantRoutes
|
||||
* a base page that does not have permission requirements
|
||||
* all roles can be accessed
|
||||
*/
|
||||
export const constantRoutes = [
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login/index'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/404',
|
||||
component: () => import('@/views/404'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/info',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'password',
|
||||
component: () => import('@/views/system/password'),
|
||||
name: '密码修改',
|
||||
meta: {
|
||||
title: '密码修改'
|
||||
}
|
||||
}],
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
redirect: '/index/home',
|
||||
component: () => import('@/views/reception'),
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
component: () => import('@/views/reception/home')
|
||||
},
|
||||
{
|
||||
path: 'department',
|
||||
component: () => import('@/views/reception/department')
|
||||
}
|
||||
],
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
children: [{
|
||||
path: 'dashboard',
|
||||
name: '系统首页',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
icon: 'dashboard'
|
||||
}
|
||||
}, ]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* asyncRoutes
|
||||
* the routes that need to be dynamically loaded based on user roles
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
|
||||
|
||||
// 404 page must be placed at the end !!!
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/404',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
const createRouter = () => new Router({
|
||||
// mode: 'history', // require service support
|
||||
scrollBehavior: () => ({
|
||||
y: 0
|
||||
}),
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
const router = createRouter()
|
||||
|
||||
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
|
||||
export function resetRouter() {
|
||||
const newRouter = createRouter()
|
||||
router.matcher = newRouter.matcher // reset router
|
||||
}
|
||||
|
||||
export default router
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
/* Layout */
|
||||
import Layout from '@/layout'
|
||||
|
||||
/**
|
||||
* Note: sub-menu only appear when route children.length >= 1
|
||||
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
|
||||
*
|
||||
* hidden: true if set true, item will not show in the sidebar(default is false)
|
||||
* alwaysShow: true if set true, will always show the root menu
|
||||
* if not set alwaysShow, when item has more than one children route,
|
||||
* it will becomes nested mode, otherwise not show the root menu
|
||||
* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
|
||||
* name:'router-name' the name is used by <keep-alive> (must set!!!)
|
||||
* meta : {
|
||||
roles: ['admin','editor'] control the page roles (you can set multiple roles)
|
||||
title: 'title' the name show in sidebar and breadcrumb (recommend set)
|
||||
icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
|
||||
breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
|
||||
activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
|
||||
}
|
||||
*/
|
||||
|
||||
/**
|
||||
* constantRoutes
|
||||
* a base page that does not have permission requirements
|
||||
* all roles can be accessed
|
||||
*/
|
||||
export const constantRoutes = [
|
||||
{
|
||||
path: '/login',
|
||||
component: () => import('@/views/login/index'),
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/404',
|
||||
component: () => import('@/views/404'),
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/info',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'password',
|
||||
component: () => import('@/views/system/password'),
|
||||
name: '密码修改',
|
||||
meta: {
|
||||
title: '密码修改'
|
||||
}
|
||||
}],
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
redirect: '/index/home',
|
||||
component: () => import('@/views/reception'),
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
component: () => import('@/views/reception/home')
|
||||
},
|
||||
{
|
||||
path: 'department',
|
||||
component: () => import('@/views/reception/department')
|
||||
},
|
||||
{
|
||||
path: 'label',
|
||||
component: () => import('@/views/reception/label')
|
||||
},
|
||||
{
|
||||
path: 'list1',
|
||||
component: () => import('@/views/reception/list1')
|
||||
},
|
||||
{
|
||||
path: 'list2',
|
||||
component: () => import('@/views/reception/list2')
|
||||
}
|
||||
],
|
||||
hidden: true
|
||||
},
|
||||
|
||||
{
|
||||
path: '/',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
children: [{
|
||||
path: 'dashboard',
|
||||
name: '系统首页',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
icon: 'dashboard'
|
||||
}
|
||||
}, ]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* asyncRoutes
|
||||
* the routes that need to be dynamically loaded based on user roles
|
||||
*/
|
||||
export const asyncRoutes = [
|
||||
|
||||
|
||||
// 404 page must be placed at the end !!!
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/404',
|
||||
hidden: true
|
||||
}
|
||||
]
|
||||
|
||||
const createRouter = () => new Router({
|
||||
// mode: 'history', // require service support
|
||||
scrollBehavior: () => ({
|
||||
y: 0
|
||||
}),
|
||||
routes: constantRoutes
|
||||
})
|
||||
|
||||
const router = createRouter()
|
||||
|
||||
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
|
||||
export function resetRouter() {
|
||||
const newRouter = createRouter()
|
||||
router.matcher = newRouter.matcher // reset router
|
||||
}
|
||||
|
||||
export default router
|
||||
|
||||
@ -0,0 +1,126 @@
|
||||
<template>
|
||||
<div class="label">
|
||||
<div class="container">
|
||||
<div class="title">
|
||||
<div class="title__text">所有标签</div>
|
||||
<el-input placeholder="搜索标签" v-model="input" class="title__input">
|
||||
<template #append>
|
||||
<el-button class="title__input--btn" icon="el-icon-search"></el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="list__item" v-for="i in 15">
|
||||
<div>
|
||||
<svg viewBox="0 0 13 11"
|
||||
preserveAspectRatio="xMinYMin meet">
|
||||
<path d="M 1 11 L 1 1 L 12 1 L 12 10 l -7 0 l 0 -5 l 4 0"
|
||||
fill="none"
|
||||
stroke="#4c84c5"
|
||||
stroke-width="2"
|
||||
pathLength="1"></path>
|
||||
</svg>
|
||||
<div>{{ labels[i % labels.length] }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
input: '',
|
||||
labels: ['学籍管理','人才','补助','培养方案','综合科技','党建工作创新奖','处置','党建工作创新奖','处置','党建工作创新奖','处置'],
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.label {
|
||||
background: #f8f8f8;
|
||||
|
||||
padding: 31px 18.75%;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
|
||||
|
||||
padding: 24px 23px 44px 22px;
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&__text {
|
||||
|
||||
padding-left: 5px;
|
||||
}
|
||||
&__input {
|
||||
width: 207px;
|
||||
|
||||
& ::v-deep .el-input__inner {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
&--btn {
|
||||
width: 48px;
|
||||
height: 35px;
|
||||
background: #3788D6;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-column-gap: 17px;
|
||||
grid-row-gap: 30px;
|
||||
|
||||
margin-top: 19px;
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: all .2s;
|
||||
border-radius: 30px;
|
||||
cursor: pointer;
|
||||
|
||||
padding: 9px 19px;
|
||||
|
||||
& > svg {
|
||||
width: 13px;
|
||||
height: 11px;
|
||||
}
|
||||
& > div {
|
||||
|
||||
padding-left: 13px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #EEEBEA;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="list1">
|
||||
<div class="container">
|
||||
<div class="list">
|
||||
<div class="list__item" v-for="i in 8">
|
||||
<div class="list__item--name">教育部关于公布《高等学校信息公开事项清单》的通知</div>
|
||||
<div class="list__item--date">{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
|
||||
<div class="list__item--btn">预览</div>
|
||||
<div class="list__item--download">
|
||||
<i class="el-icon-download"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-pagination
|
||||
class="page"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list1 {
|
||||
background: #f8f8f8;
|
||||
|
||||
padding: 31px 18.75%;
|
||||
}
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
|
||||
|
||||
padding: 24px 23px 44px 22px;
|
||||
|
||||
}
|
||||
.list {
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #F8F8F8;
|
||||
|
||||
padding: 11px 9px 11px 27px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
height: 6px;
|
||||
width: 6px;
|
||||
border-radius: 6px;
|
||||
background: #cad8e4;
|
||||
|
||||
transform: translateY(-50%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
}
|
||||
&--name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
}
|
||||
&--date {
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
|
||||
margin-right: 42px;
|
||||
}
|
||||
&--btn {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #247EC3;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #247EC3;
|
||||
transition: all .2s;
|
||||
|
||||
padding: 7px 17px;
|
||||
margin-right: 23px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #247EC3;
|
||||
}
|
||||
}
|
||||
&--download {
|
||||
cursor: pointer;
|
||||
& > i{
|
||||
font-size: 16px;
|
||||
color: #247EC3;
|
||||
}
|
||||
|
||||
padding-right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: 30px;
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
border-radius: 100px;
|
||||
background: #fff;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next {
|
||||
background: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div class="list1">
|
||||
<div class="container">
|
||||
<div class="list">
|
||||
<div class="list__item" v-for="i in 8">
|
||||
<div class="list__item--pre">苏卫【2011】2号</div>
|
||||
<div class="list__item--name">教育部关于公布《高等学校信息公开事项清单》的通知</div>
|
||||
<div class="list__item--date">{{ $moment(new Date()).format('YYYY-MM-DD') }}</div>
|
||||
<div class="list__item--btn">预览</div>
|
||||
<div class="list__item--download">
|
||||
<i class="el-icon-download"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-pagination
|
||||
class="page"
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="1000">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {},
|
||||
computed: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list1 {
|
||||
background: #f8f8f8;
|
||||
|
||||
padding: 31px 18.75%;
|
||||
}
|
||||
.container {
|
||||
background: #fff;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 0 15px 0 rgba(130,127,126,0.1);
|
||||
|
||||
padding: 24px 23px 44px 22px;
|
||||
|
||||
}
|
||||
.list {
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #F8F8F8;
|
||||
|
||||
padding: 11px 9px 11px 0;
|
||||
|
||||
&--pre {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #398AC9;
|
||||
|
||||
padding-right: 10px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content:'';
|
||||
width: 2px;
|
||||
background: #398AC9;
|
||||
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
bottom: 2px;
|
||||
right: -1px;
|
||||
}
|
||||
}
|
||||
&--name {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
|
||||
padding-left: 10px;
|
||||
}
|
||||
&--date {
|
||||
font-size: 13px;
|
||||
color: #999999;
|
||||
|
||||
margin-right: 42px;
|
||||
}
|
||||
&--btn {
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #247EC3;
|
||||
border-radius: 30px;
|
||||
border: 1px solid #247EC3;
|
||||
transition: all .2s;
|
||||
|
||||
padding: 7px 17px;
|
||||
margin-right: 23px;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #247EC3;
|
||||
}
|
||||
}
|
||||
&--download {
|
||||
cursor: pointer;
|
||||
& > i{
|
||||
font-size: 16px;
|
||||
color: #247EC3;
|
||||
}
|
||||
|
||||
padding-right: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: 30px;
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next ,::v-deep .el-pager > li {
|
||||
width: 39px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
text-align: center;
|
||||
border-radius: 100px;
|
||||
background: #fff;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
& ::v-deep .btn-prev, ::v-deep .btn-next {
|
||||
background: #fff;
|
||||
border: 1px solid #e7e7e7;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue