first commit
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
29
README.md
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# score-manage
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Run your tests
|
||||||
|
```
|
||||||
|
npm run test
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/app'
|
||||||
|
]
|
||||||
|
}
|
12136
package-lock.json
generated
Normal file
58
package.json
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
{
|
||||||
|
"name": "score-manage",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"start": "npm run serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@antv/data-set": "^0.10.2",
|
||||||
|
"core-js": "^2.6.5",
|
||||||
|
"element-ui": "^2.0.11",
|
||||||
|
"mobx-vue": "^2.0.9",
|
||||||
|
"moment": "^2.24.0",
|
||||||
|
"viser-vue": "^2.4.5",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"vue-router": "^3.0.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^3.6.0",
|
||||||
|
"@vue/cli-plugin-eslint": "^3.6.0",
|
||||||
|
"@vue/cli-service": "^3.6.0",
|
||||||
|
"babel-eslint": "^10.0.1",
|
||||||
|
"eslint": "^5.16.0",
|
||||||
|
"eslint-plugin-vue": "^5.0.0",
|
||||||
|
"less": "^3.0.4",
|
||||||
|
"less-loader": "^4.1.0",
|
||||||
|
"qs": "^6.7.0",
|
||||||
|
"sass-loader": "^7.1.0",
|
||||||
|
"vue-template-compiler": "^2.5.21"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"root": true,
|
||||||
|
"env": {
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"plugin:vue/essential",
|
||||||
|
"eslint:recommended"
|
||||||
|
],
|
||||||
|
"rules": {},
|
||||||
|
"parserOptions": {
|
||||||
|
"parser": "babel-eslint"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"postcss": {
|
||||||
|
"plugins": {
|
||||||
|
"autoprefixer": {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not ie <= 8"
|
||||||
|
]
|
||||||
|
}
|
77
public/a.html
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Title</title>
|
||||||
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||||
|
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
||||||
|
<style>
|
||||||
|
.router-link-active {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
<h1>Hello App!</h1>
|
||||||
|
<p>
|
||||||
|
<!-- use router-link component for navigation. -->
|
||||||
|
<!-- specify the link by passing the `to` prop. -->
|
||||||
|
<!-- <router-link> will be rendered as an `<a>` tag by default -->
|
||||||
|
<router-link to="/">Home</router-link>
|
||||||
|
<router-link to="/about">About</router-link>
|
||||||
|
</p>
|
||||||
|
<!-- route outlet -->
|
||||||
|
<!-- component matched by the route will render here -->
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
// 0. If using a module system, call Vue.use(VueRouter)
|
||||||
|
|
||||||
|
// 1. Define route components.
|
||||||
|
// These can be imported from other files
|
||||||
|
|
||||||
|
const Home = {
|
||||||
|
template: `
|
||||||
|
<div>
|
||||||
|
<router-link to="/">Home</router-link>
|
||||||
|
<router-link to="/about">About</router-link>
|
||||||
|
<h1>Home</h1>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
|
const About = {
|
||||||
|
template: `
|
||||||
|
<div>
|
||||||
|
<router-link to="/">Home</router-link>
|
||||||
|
<router-link to="/about">About</router-link>
|
||||||
|
<h1>About</h1>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
};
|
||||||
|
const routes = [
|
||||||
|
{path: '/', name:'home',component: Home},
|
||||||
|
{path: '/about', name:'about',component: About}
|
||||||
|
// {path: '*', name:'others',redirect:'/'},
|
||||||
|
];
|
||||||
|
// const routes = [
|
||||||
|
// { path: '/', component: Home },
|
||||||
|
// { path: '/about', component: About }
|
||||||
|
// ]
|
||||||
|
const router = new VueRouter({
|
||||||
|
routes: routes
|
||||||
|
});
|
||||||
|
|
||||||
|
// 4. Create and mount the root instance.
|
||||||
|
// Make sure to inject the router with the router option to make the
|
||||||
|
// whole app router-aware.
|
||||||
|
const app = new Vue({
|
||||||
|
router
|
||||||
|
}).$mount('#app')
|
||||||
|
|
||||||
|
// Now the app has started!
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
public/favicon.ico
Normal file
After Width: | Height: | Size: 4.2 KiB |
29
public/index.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-cn">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>App View</title>
|
||||||
|
<style>
|
||||||
|
.loading-text{
|
||||||
|
font-family: "PingFang SC","Microsoft YaHei",sans-serif;
|
||||||
|
position: fixed;left:0;right:0;text-align:center;
|
||||||
|
top:50%;transform: rotateY(-50%);font-size:20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>
|
||||||
|
We're sorry but App doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.<br />
|
||||||
|
本应用需要在JavaScript环境下才能正常运行,请启用后再继续使用。
|
||||||
|
</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app">
|
||||||
|
<div class="loading-text">应用资源加载中...</div>
|
||||||
|
</div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
20
src/App.vue
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app-view">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
#app-view {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import ycicon from './components/YCIcon'
|
||||||
|
export default {
|
||||||
|
name: "app"
|
||||||
|
// components:{ycicon}
|
||||||
|
};
|
||||||
|
</script>
|
3
src/assets/element-override.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.el-menu {
|
||||||
|
height: 100%;
|
||||||
|
}
|
93
src/assets/iconfont.css
Normal file
BIN
src/assets/iconfont.ttf
Normal file
52
src/assets/iconfont_old.css
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAnsAAsAAAAAEfAAAAmeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCENgqVKJBfATYCJAMsCxgABCAFhG0HgQYbxQ4zo/aCkzIk+y8TuDmgdbQcrNQY2/HaFKtt4yA4HzQdxzhFr2HFLYhjiJD+b5qqCfR91Be7TYi0XBPE13667+6C6FoFqDLxJUJFYImMBBKysixkK3+KQmeIP/XvAr2wy3thpTSl0wmpkgzKIL9sTj6GCK2D0cnkIvjmti82ANocsBA9KsBmyrDL4ZoW2KioukdZ227z6AMXoAuV8keJ///WWp09iYeG5NbD3/W72TlxTDWR8ZAJycQjjYy/TmiElAgho2GbpDDxiiN6U/mx3SGAm0xFpGJ0Qwc0DFwnqLawZHoUWsmC6XEXnHp7y6oGyDk2nOqQegPO3NvLL4loAIVNA75oy1TlBAqL9UddOgYMgjtdHDCdCjRQBMyU3LUaL4Bl7alx1zVsA4gLsp/LbvlEJHVZbKPvUkepu6/HdBod8aGEuDDBif/Hw+DGhgOFExcCYgcMe6HeL3SDxVKh0GANC4UdrJJQGLA0LFVeDBM2yBthwgH5O4RCQcpgwunkkwiFC74e8L8G9phV4iABvQ6AyQWcdDhsBLErnfMzag0PtCUdgWV0xC0P6SQeOw76aVhxcxOQKebGMVFOxuNyabTwklcxga+fDQILHMgmgoDofJsZ63FLYlFNNKwKRyb3ZpvSu5wuZ1qXPsNsx8wO6I5mWS+fz/DLzB5JdUDsLuvJ6LkptkscwUwDcikmk5mxs5MDF7IrfbFEu+dUZm969wkRLnJFcnIsghdqnzOrS2i0oj7E0PgEV0Q2ofVymhG7KIdzT/RHBqN5VT3imPpZpMBoQiNqX1uW96IsqjH38MOam9FUwYLDJvMZAtCeAeEcPYa6uoABVU+2IEjDVGSdn8HWewEJ95WP4MO9DMbFgQSyZ7Ccc6E/nuTsK2GojNN6/HS6o3+13+o2Ztd1IcV2A2EZghKq/eZmo5fPNPtPqQ1U03yoyniyNL0fwi2FWGcwDrkqvV/DAsxt7PN9UoKrv5RzaTCR6B4oW84xoCaUr52LWQQWZI3xtrz8kDjHtHXBPALOh+vYd8NJhPbIKM6DWCqxIzoVv96Pbu5CF0Q4hhtAe7LdMAR1N/XX1Rc8gsEHQN5pMBabHImoAQKjUU04rAJzTs/nuboFDo84z3w1zejHOqDOI3EE0ruvSfIdbszsEQRi5b3dqO1KOtJ7zdOLXohUmlxCo1OUa7uQafGhLoA7hVZvRs95vtzqEpmcfG+4pKtHbL/6sGUvO72aSYEnsy0+yu7Nscck+YEX5bDnuTjPHpUovQ+7t/RY1pVlCwvl3qcloPuZKNcXmcy4Kzor0xEdfTe87SrjonrVomwYFFGjpkebRCCIxaBuCnMgaiA4Y4YIvx9QeJqZrzJ38b34DUOmxYFNtmAaxCKAZoxh5APTHGBCi5NPlpn5TUY02yRotcyNKAs1Z+RYMBWJmzOXzGQEY6mvKK89UssPO7aDdF4OJ5e2E12ofzxwVndu8InhUf8Z/HTfw20/EUXRcn4qRDVvNr69PDNGtViqmzOhqxE1Mo0xBZlsESAmVM2Yh0CBGAiURaYy9Ubc9LuUs+jMGoYxVyC9p7SVUvn9Gv+Q9lD7fUaNRv6xoPAMb36K8vcJrqW7jk1BVtBs6zmLkV2Bjp1xJsLT+pNXlV9PtZfu7H1aKxMg5BFS3+uEIRE/mBlc8glns6c9rb0tBJgQspI/QbFm8Qj70wVjfh5doegbzrncICFR60/P/WKw9TRFRB82UmJXLdqYUTsmI3Ek55MTs3exU7Gmw9KKnJwKOf76k6XD4LHrp6EqeR+Oec3hfNoiGJ4/Km3tzKpZCxsnKZULueuTzhQpw5Vv5t9dktI0sVU4+cj8d8o7qpkpkji2pB8AMJTos86efUicIj44btzYcVbWJ2weG6g4nJXs8pJZWjaP1lSLq2mApsZxfHtQrbFe9xRczbqWFcjyB0DQ+gGbla4COVERaitmAEaxJCTBTPBcIpMXwvt4rNDRAaZd9dqAXyyPx5o9O2nKii0FV4SSQqBo7Qll/wcsnPVhX2PfMzfpB/2TKhrRl+qywubvUbqwTP0SW/uOmlSJvURnTvqmlUqgttpSM9EhhlCqZexYsoKsDU2hDP1mfEo8YEThStWvVTBKygQq3mzdeQ5k4xyQADg4Gz6fiMOWpUtbYAIGdCRcgROWHT68TCIA8OQ4OChitYobqq5wPSHS0QYPt+jnLrfkgmkpBccIKcnHGo6SXrjA038nyN4g31x1mF8gKyD1Xf/FmYx5hXv4xfBYhxOLfur0NNeZnO+pFVJCTvAMv6d2LmFYDp8c0s7a83vNzTRZ2o2Kf/56YYb/21C/PnXi78ab/yONePbb4mfN5fLJI679it81k/FuclDZ/39y07ZtTcktKRclWIhQXCylZfqCltMTFbz9CB8xQw/rxRdMv7/y525vNk0o379kyf5yswQL0Tihqeq8s7iV71j1+UU/lPNyOYFltSpVaUm7Tq6lNFG0JgbjPTlF26SlnAu58VKl2jRq1MsRrQdLn6eqRr4cOWpza+vL0tK5nf00NgVKT++Vjli0aIQU/lS6iE1YbDAs1hIBgC2xSxf9BMolixaV74NjKNoaLUUkv7xzmXyrBAsRi+pzwzEbMlPfBa7RLvDuaFcXlJ1TROM2x8kUj7lgqoJ2je6nX6OB5DDptVvildkrkrNWJme3foNJYS6as3kuUYopFDKuHqs3MUyyKP1a3DV6Ou1gAC8oA72prRlg1yeAT0nUEAIADN1aiDjSeX28diIsCA0QFX0JJsKJsgIPMvTVAkSp9hWV4nr9vM1EtntwZm4EPBvI3B9vns2p+Y2G/CePe+fjd+e59KFgiOEy7KiC4YkCo1uO2MtshJQ9Rbco9kAfD1fOPAW4xQAYyaaEfZ7eHnOpOMFZ4qZ+CgcZfhonWZRRF/nZ8JD0s+Ok2M9Noeq1PUQsQkQMHUCBncRPCLr3U/h50Oo29bvWQP3hZyPuX7JDE9HPTZcM26SHPc+Z07UAbSAIexPDMUppbydf/RvU3dPChGy+fyjVYCRTP+6KvyBCOcUS9aHm1iSRBQP5TBYB75GkghZ46zWK0mUY5HzJnmNYnLgWoM0EFQR7xzQcoxy8nWqv/w3q7mnpaXcd8x9KNRMnJr2RQH3hSGr3VurWh5o1FieJyisYAvlM48CLAiRS+0wWeOvpA/LSxcD6k1TcX56E7xuDr69DfixEjtbZ1d3T26dvv/72S3f2bPe8q+/aIBxNF6BWqmCbNEbYl65p45G7fYXWTFRHQatmSIvY3CuUPdcQlTWLBQA=') format('woff2'),
|
||||||
|
url('iconfont.ttf?t=1555675235217') format('truetype');
|
||||||
|
}
|
||||||
|
.iconfont,.icon {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-subject:before {
|
||||||
|
content: "\e8c7";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-system:before {
|
||||||
|
content: "\e6ea";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-i-message:before {
|
||||||
|
content: "\e60d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-phone:before {
|
||||||
|
content: "\e634";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-message:before {
|
||||||
|
content: "\e668";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-lock:before {
|
||||||
|
content: "\e613";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-setting:before {
|
||||||
|
content: "\e676";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-dashboard:before {
|
||||||
|
content: "\e78b";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-user:before {
|
||||||
|
content: "\e7ae";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-score:before {
|
||||||
|
content: "\e656";
|
||||||
|
}
|
||||||
|
|
BIN
src/assets/imgs/avatar.jpg
Normal file
After Width: | Height: | Size: 15 KiB |
BIN
src/assets/imgs/bg.png
Normal file
After Width: | Height: | Size: 88 KiB |
BIN
src/assets/imgs/logo.png
Normal file
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/imgs/logo_1.png
Normal file
After Width: | Height: | Size: 6.8 KiB |
BIN
src/assets/imgs/logo_white.png
Normal file
After Width: | Height: | Size: 1.7 KiB |
1
src/assets/index.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import "element-override.css";@import "iconfont_old.css";.text-left{text-align:left} .text-center{text-align:center} .text-right{text-align:right} .float-left{float:left} .float-right{float:right} .clear-float:after,.clear:after,.clearfix:after{content:' ';display:block;clear:both} html,body{height:100%} body{font-family:'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif} *{padding:0;margin:0} .wrapper{height:100%} a{text-decoration:none} header{width:100%;padding:0 20px;z-index:1;box-sizing:border-box} header::after{display:inline-block;content:"";height:100%;vertical-align:middle} .container{padding-top:80px} .menu{height:100%} .content{padding:20px} .header-logo{display:inline-block;vertical-align:middle} .header-operations{display:inline-block;float:right;padding-right:30px;height:100%} .header-operations li{color:#fff;display:inline-block;vertical-align:middle;padding:0 10px;margin:0 10px;line-height:80px;cursor:pointer} .header-operations li:last-child{cursor:default} .header-operations .header-download{opacity:.4;cursor:default} .header-operations .header-download.is-available{opacity:1;cursor:pointer} .header-operations span{opacity:.7} .header-operations .header-lang{cursor:pointer} .header-operations .header-lang.is-active{opacity:1} .header-operations::after{display:inline-block;content:"";height:100%;vertical-align:middle} .theme-form{text-align:center} .query-form{margin-top:20px;padding-top:25px;background-color:#f2f2f2} .table{margin-top:30px} .help p{margin-bottom:10px} .help p a{color:#409eff}/*# sourceMappingURL=./index.css.map */
|
1
src/assets/index.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["index.less","style.less"],"names":[],"mappings":"QACQ,uBADR,yBCEA,WACE,gBACF,aACE,kBAEF,YACE,iBAEF,YACE,WAEF,aACE,YAGA,YAAC,OAAD,MAAC,OAAD,SAAC,OACC,QAAS,GAAT,CACA,aAAA,CACA,WAIJ,KAAM,KACJ,YAGF,KACE,YAAa,2BAA2B,cAAc,mBAAmB,oCAG3E,EACE,SAAA,CACA,SAGF,SACE,YAGF,EACE,qBAGF,OACE,UAAA,CACA,cAAA,CACA,SAAA,CACA,sBAGF,MAAM,QACJ,oBAAA,CACA,QAAS,EAAT,CACA,WAAA,CACA,sBAGF,WACE,iBAGF,MACE,YAGF,SACE,aAGF,aACE,oBAAA,CACA,sBAGF,mBACE,oBAAA,CACA,WAAA,CACA,kBAAA,CACA,YACA,kBAAE,IACA,UAAA,CACA,oBAAA,CACA,qBAAA,CACA,cAAA,CACA,aAAA,CACA,gBAAA,CACA,eACA,kBARA,GAQC,YACC,eAdN,kBAiBE,kBACE,UAAA,CACA,eACA,kBAHF,iBAGG,cACC,SAAA,CACA,eAtBN,kBAyBE,MACE,WA1BJ,kBA4BE,cACE,eACA,kBAFF,aAEG,WACC,UAKN,kBAAkB,QAChB,oBAAA,CACA,QAAS,EAAT,CACA,WAAA,CACA,sBAGF,YACE,kBAGF,YACE,eAAA,CACA,gBAAA,CACA,yBAGF,OACE,gBAGF,KAAM,GACJ,mBADF,KAAM,EAEJ,GACE"}
|
3
src/assets/index.less
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@import "iconfont.css";
|
||||||
|
@import "./element-override.css";
|
||||||
|
@import "style.less";
|
1
src/assets/style.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.float-left{float:left}.float-right{float:right}.clear-float:after,.clear:after,.clearfix:after{content:' ';display:block;clear:both}html,body{height:100%}body{font-family:'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif}*{padding:0;margin:0}.wrapper{height:100%}a{text-decoration:none}header{width:100%;padding:0 20px;z-index:1;box-sizing:border-box}header::after{display:inline-block;content:"";height:100%;vertical-align:middle}.container{padding-top:80px}.menu{height:100%}.content{padding:20px}.header-logo{display:inline-block;vertical-align:middle}.header-operations{display:inline-block;float:right;padding-right:30px;height:100%}.header-operations li{color:#fff;display:inline-block;vertical-align:middle;padding:0 10px;margin:0 10px;line-height:80px;cursor:pointer}.header-operations li:last-child{cursor:default}.header-operations .header-download{opacity:.4;cursor:default}.header-operations .header-download.is-available{opacity:1;cursor:pointer}.header-operations span{opacity:.7}.header-operations .header-lang{cursor:pointer}.header-operations .header-lang.is-active{opacity:1}.header-operations::after{display:inline-block;content:"";height:100%;vertical-align:middle}.theme-form{text-align:center}.query-form{margin-top:20px;padding-top:25px;background-color:#f2f2f2}.table{margin-top:30px}.help p{margin-bottom:10px}.help p a{color:#409eff}/*# sourceMappingURL=./style.css.map */
|
1
src/assets/style.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["style.less"],"names":[],"mappings":"AAEA,WACE,gBACF,aACE,kBAEF,YACE,iBAEF,YACE,WAEF,aACE,YAGA,YAAC,OAAD,MAAC,OAAD,SAAC,OACC,QAAS,GAAT,CACA,aAAA,CACA,WAIJ,KAAM,KACJ,YAGF,KACE,YAAa,2BAA2B,cAAc,mBAAmB,oCAG3E,EACE,SAAA,CACA,SAGF,SACE,YAGF,EACE,qBAGF,OACE,UAAA,CACA,cAAA,CACA,SAAA,CACA,sBAGF,MAAM,QACJ,oBAAA,CACA,QAAS,EAAT,CACA,WAAA,CACA,sBAGF,WACE,iBAGF,MACE,YAGF,SACE,aAGF,aACE,oBAAA,CACA,sBAGF,mBACE,oBAAA,CACA,WAAA,CACA,kBAAA,CACA,YACA,kBAAE,IACA,UAAA,CACA,oBAAA,CACA,qBAAA,CACA,cAAA,CACA,aAAA,CACA,gBAAA,CACA,eACA,kBARA,GAQC,YACC,eAdN,kBAiBE,kBACE,UAAA,CACA,eACA,kBAHF,iBAGG,cACC,SAAA,CACA,eAtBN,kBAyBE,MACE,WA1BJ,kBA4BE,cACE,eACA,kBAFF,aAEG,WACC,UAKN,kBAAkB,QAChB,oBAAA,CACA,QAAS,EAAT,CACA,WAAA,CACA,sBAGF,YACE,kBAGF,YACE,eAAA,CACA,gBAAA,CACA,yBAGF,OACE,gBAGF,KAAM,GACJ,mBADF,KAAM,EAEJ,GACE"}
|
138
src/assets/style.less
Normal file
@ -0,0 +1,138 @@
|
|||||||
|
|
||||||
|
//mixin
|
||||||
|
.text-left{
|
||||||
|
text-align: left;}
|
||||||
|
.text-center{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.text-right{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.float-left{
|
||||||
|
float:left;
|
||||||
|
}
|
||||||
|
.float-right{
|
||||||
|
float:right;
|
||||||
|
}
|
||||||
|
.clear-float,.clear,.clearfix{
|
||||||
|
&:after{
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',SimSun,sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
z-index: 1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
header::after {
|
||||||
|
display: inline-block;
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding-top: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-logo {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-operations {
|
||||||
|
display: inline-block;
|
||||||
|
float: right;
|
||||||
|
padding-right: 30px;
|
||||||
|
height: 100%;
|
||||||
|
& li {
|
||||||
|
color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding: 0 10px;
|
||||||
|
margin: 0 10px;
|
||||||
|
line-height: 80px;
|
||||||
|
cursor: pointer;
|
||||||
|
&:last-child {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-download {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: default;
|
||||||
|
&.is-available {
|
||||||
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.header-lang {
|
||||||
|
cursor: pointer;
|
||||||
|
&.is-active {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-operations::after {
|
||||||
|
display: inline-block;
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-form {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.query-form {
|
||||||
|
margin-top: 20px;
|
||||||
|
//background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.help p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
a {
|
||||||
|
color: #409eff;
|
||||||
|
}
|
||||||
|
}
|
1
src/assets/theme-default.css
Normal file
@ -0,0 +1 @@
|
|||||||
|
.el-dialog__body{padding:30px}.upload-wrap .el-upload{border:1px dashed #d9d9d9;border-radius:2px;cursor:pointer;position:relative;overflow:hidden}.upload-wrap .el-upload:hover{border-color:#409EFF}.upload-wrap .el-upload .upload-text{color:#606266;font-size:14px;text-align:center;padding:5px 10px}.widget-card{-webkit-transition:-webkit-box-shadow .4s;background:#fff;border-radius:4px;height:100%;overflow:hidden;transition:-webkit-box-shadow .4s;transition:box-shadow .4s;transition:box-shadow .4s,-webkit-box-shadow .4s}.widget-card .el-card__body{display:flex;width:100%;padding:0}.widget-card .label,.widget-card .content{-ms-flex-align:center;-ms-flex-pack:center;-webkit-box-align:center;-webkit-box-pack:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;justify-content:center;-webkit-box-direction:normal;-webkit-box-flex:1;-webkit-box-orient:vertical;color:#99a9c0;flex:1;flex-direction:column}.widget-card .label{width:130px;height:130px;flex:none;background-color:#409EFF}.tab-wrap{position:relative}.tab-wrap .extra-header{position:absolute;top:0;right:0}.pagination{margin:20px 0;text-align:right}*{margin:0;padding:0}.basic-page{background-color:#fff;padding:20px}.global-header{padding:0 !important}.global-header .head-item{display:inline-block;margin-right:10px}.global-header .head-action-item{display:inline-block;cursor:pointer;font-size:20px;height:64px;line-height:64px;padding:0 20px;transition:all .3s,padding 0s}.global-header .head-action-item:hover{background:rgba(0,0,0,0.025)}.global-header .global-header-left{float:left}.global-header .global-head-right{float:right;padding-right:20px}.el-menu{border-right:none !important}.el-submenu .menu-icon{margin-right:10px;font-size:16px}.el-submenu.is-active .menu-icon{color:#fff}.el-submenu.is-active .el-submenu__title{color:#fff !important}.el-menu-item:hover{color:#fff !important}.el-menu-item.is-active{background-color:#1890ff !important}.site-logo{height:64px;line-height:64px;overflow:hidden;padding:0 10px;position:relative;transition:all .3s;width:220px}.site-logo a{display:block}.site-logo img{display:inline-block;max-height:64px;vertical-align:middle}.site-logo h1{color:#fff;display:inline-block;font-family:Myriad Pro,Helvetica Neue,Arial,Helvetica,sans-serif;font-size:20px;font-weight:600;margin:0 0 0 12px;vertical-align:middle}.app-header{line-height:64px}.app-header a{display:inline-block;color:#fff}.app-header .head-nav-menu a{padding:0 20px}.app-header .head-nav-menu .active{background:#259DAD;position:relative;top:-2px;border-bottom:2px solid #1ab394}.header-account{padding:0 12px}.header-account span{color:#fff}.header-account img{margin-right:10px;width:30px;height:30px;vertical-align:middle;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.app-header{background:#208DA1;height:64px}.aside-nav{position:absolute;left:0;bottom:0;top:64px;width:200px;padding:10px}.app-main{position:absolute;left:200px;right:0;top:64px;bottom:0;padding:10px}.el-header{background-color:#fff;color:#333;height:64px;line-height:64px;box-shadow:0 1px 4px rgba(0,21,41,0.08)}.header-trigger{cursor:pointer;height:64px;line-height:64px;padding:0 24px;display:inline-block}.header-trigger:hover{background:rgba(0,0,0,0.025)}.el-aside{color:#333;background-color:#001529}.collapse-menu h1{display:none}.collapse-menu .menu-text{display:none}.app-main{background-color:#f0f2f5}#app-content{background:#fff;border-radius:2px;box-sizing:border-box;color:rgba(0,0,0,0.65);font-family:Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:14px;font-variant:tabular-nums;line-height:1.5;list-style:none;margin:10px;padding:0;position:relative;transition:all .3s}#app-content .page{background:#fff;padding:24px 32px;box-sizing:border-box}.page-title-bar{font-size:18px;border-bottom:solid 1px #f0f2f5}.page-title-bar .title,.page-title-bar span{display:inline-block;padding:10px 20px}.page-content{padding:20px}.el-table td,.el-table th{padding:5px 0}/*# sourceMappingURL=./theme-default.css.map */
|
1
src/assets/theme-default.css.map
Normal file
@ -0,0 +1 @@
|
|||||||
|
{"version":3,"sources":["theme-default.less"],"names":[],"mappings":"AASA,iBACE,aAEF,YACE,YACE,yBAAA,CACA,iBAAA,CACA,cAAA,CACA,iBAAA,CACA,gBACA,YANF,WAMG,OACC,qBARN,YACE,WASE,cACE,aAAA,CACA,cAAA,CACA,iBAAA,CACA,iBAMN,aACE,yCAAA,CACA,eAAA,CACA,iBAAA,CACA,WAAA,CACA,eAAA,CACA,iCAAA,CACA,yBAAA,CACA,iDARF,YASE,gBACE,YAAA,CACA,UAAA,CACA,UAZJ,YAcE,QAdF,YAwQC,CA1PQ,SACL,qBAAA,CACA,oBAAA,CACA,wBAAA,CACA,uBAAA,CACA,kBAAA,CACA,mBAAA,CACA,mBAAA,CACA,YAAA,CACA,sBAAA,CACA,4BAAA,CACA,kBAAA,CACA,2BAAA,CACA,aAAA,CACA,MAAA,CACA,sBA7BJ,YA+BE,QAEE,WAAA,CACA,YAAA,CACA,SAAA,CACA,yBAIJ,UACE,kBADF,SAEE,eACE,iBAAA,CACA,KAAA,CACA,QAIJ,YACE,aAAA,CACA,iBAGF,EACE,QAAA,CACA,UAEF,YACE,qBAAA,CACA,aAGF,eACE,SAAA,YADF,cAEE,YACE,oBAAA,CACA,kBAJJ,cAME,mBACE,oBAAA,CACA,cAAA,CACA,cAAA,CACA,WAAA,CACA,gBAAA,CACA,cAAA,CACA,8BACA,cARF,kBAQG,OACC,6BAfN,cAkBE,qBACE,WAnBJ,cAqBE,oBACE,WAAA,CACA,mBAIJ,SACE,iBAAA,YAGF,WACE,YACE,iBAAA,CACA,eAEF,WAAC,UACC,YACE,WAFJ,WAAC,UAIC,oBACE,UAAA,YAMJ,aAAC,OACC,UAAA,YAEF,aAAC,WACC,wBAAA,YAIJ,WACE,WAAA,CACA,gBAAA,CACA,eAAA,CACA,cAAA,CACA,iBAAA,CACA,kBAAA,CACA,YAPF,UAQE,GACE,cATJ,UAWE,KACE,oBAAA,CACA,eAAA,CACA,sBAdJ,UAgBE,IACE,UAAA,CACA,oBAAA,CACA,gEAAA,CACA,cAAA,CACA,eAAA,CACA,iBAAA,CACA,sBAGJ,YACE,iBADF,WAEE,GACE,oBAAA,CACA,WAJJ,WAME,eACE,GACE,eARN,WAME,eAIE,SACE,kBAAA,CACA,iBAAA,CACA,QAAA,CACA,gCAIN,gBACE,eADF,eAEE,MAAK,WAFP,eAGE,KACE,iBAAA,CAAkB,UAAA,CAAY,WAAA,CAAY,qBAAA,CAC1C,yBAAA,CACA,sBAAA,CACA,kBAGJ,YACE,kBAAA,CACA,YAIF,WACE,iBAAA,CACA,MAAA,CACA,QAAA,CACA,QAAA,CACA,WAAA,CACA,aAEF,UACE,iBAAA,CACA,UAAA,CACA,OAAA,CACA,QAAA,CACA,QAAA,CACA,aAEF,WACE,qBAAA,CACA,UAAA,CACA,WAAA,CACA,gBAAA,CACA,wCAGF,gBACE,cAAA,CACA,WAAA,CACA,gBAAA,CACA,cAAA,CACA,qBAEA,eAAC,OACC,6BAIJ,UACE,UAAA,CACA,yBAGF,cACE,IACE,aAFJ,cAIE,YACE,aAIJ,UACE,yBAEF,aACE,eAAA,CACA,iBAAA,CACA,qBAAA,CACA,sBAAA,CACA,2MAAA,CACA,cAAA,CACA,yBAAA,CACA,eAAA,CACA,eAAA,CACA,WAAA,CACA,SAAA,CACA,iBAAA,CACA,mBAEF,YAAa,OACX,eAAA,CACA,iBAAA,CACA,sBAEF,gBACE,cAAA,CACA,gCAFF,eAGE,QAHF,eAaC,CAVQ,KACL,oBAAA,CACA,kBAGJ,cACE,aAEF,SAAU,IAAI,SAAU,IACtB"}
|
297
src/assets/theme-default.less
Normal file
@ -0,0 +1,297 @@
|
|||||||
|
//vars
|
||||||
|
@dialog-padding:30px;
|
||||||
|
//头部高度
|
||||||
|
@head-height: 64px;
|
||||||
|
@app-header-nav-active-color:#259DAD;
|
||||||
|
@aside-width: 200px;
|
||||||
|
@head-site-logo-width:220px;
|
||||||
|
@app-header-color:#208DA1;
|
||||||
|
|
||||||
|
.el-dialog__body{
|
||||||
|
padding: @dialog-padding;
|
||||||
|
}
|
||||||
|
.upload-wrap{
|
||||||
|
.el-upload {
|
||||||
|
border: 1px dashed #d9d9d9;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:hover {
|
||||||
|
border-color: #409EFF;
|
||||||
|
}
|
||||||
|
.upload-text{
|
||||||
|
color: #606266;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.widget-card {
|
||||||
|
-webkit-transition: -webkit-box-shadow .4s;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: -webkit-box-shadow .4s;
|
||||||
|
transition: box-shadow .4s;
|
||||||
|
transition: box-shadow .4s,-webkit-box-shadow .4s;
|
||||||
|
.el-card__body{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.label,.content{
|
||||||
|
-ms-flex-align: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
align-items: center;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-box-flex: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
color: #99a9c0;
|
||||||
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.label
|
||||||
|
{
|
||||||
|
width: 130px;
|
||||||
|
height: 130px;
|
||||||
|
flex: none;
|
||||||
|
background-color: #409EFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-wrap{
|
||||||
|
position: relative;
|
||||||
|
.extra-header{
|
||||||
|
position: absolute;
|
||||||
|
top:0;
|
||||||
|
right:0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination{
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.basic-page{
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.global-header {
|
||||||
|
padding: 0 !important;
|
||||||
|
.head-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.head-action-item {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 20px;
|
||||||
|
height: @head-height;
|
||||||
|
line-height: @head-height;
|
||||||
|
padding: 0px 20px;
|
||||||
|
transition: all .3s, padding 0s;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, .025);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.global-header-left {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
.global-head-right {
|
||||||
|
float: right;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-submenu {
|
||||||
|
.menu-icon {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
&.is-active {
|
||||||
|
.menu-icon {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.el-submenu__title {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
&:hover {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
&.is-active {
|
||||||
|
background-color: #1890ff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//头部效果
|
||||||
|
.site-logo {
|
||||||
|
height: @head-height;
|
||||||
|
line-height: @head-height;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 10px;
|
||||||
|
position: relative;
|
||||||
|
transition: all .3s;
|
||||||
|
width: @head-site-logo-width;
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: inline-block;
|
||||||
|
max-height: @head-height;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
color: #fff;
|
||||||
|
display: inline-block;
|
||||||
|
font-family: Myriad Pro, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 0 12px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.app-header{
|
||||||
|
line-height: @head-height;
|
||||||
|
a{
|
||||||
|
display: inline-block;
|
||||||
|
color:#fff;
|
||||||
|
}
|
||||||
|
.head-nav-menu{
|
||||||
|
a{
|
||||||
|
padding:0 20px;
|
||||||
|
}
|
||||||
|
.active{
|
||||||
|
background: @app-header-nav-active-color;
|
||||||
|
position: relative;
|
||||||
|
top:-2px;
|
||||||
|
border-bottom: 2px solid #1ab394;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header-account{
|
||||||
|
padding: 0 12px;
|
||||||
|
span{color:#fff}
|
||||||
|
img{
|
||||||
|
margin-right:10px;width: 30px;height:30px;vertical-align: middle;
|
||||||
|
-webkit-border-radius: 50%;
|
||||||
|
-moz-border-radius: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.app-header {
|
||||||
|
background: @app-header-color;
|
||||||
|
height: @head-height;
|
||||||
|
}
|
||||||
|
|
||||||
|
@layout-main-padding:10px;
|
||||||
|
.aside-nav {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
top: @head-height;
|
||||||
|
width: @aside-width;
|
||||||
|
padding:@layout-main-padding;
|
||||||
|
}
|
||||||
|
.app-main {
|
||||||
|
position: absolute;
|
||||||
|
left: @aside-width;
|
||||||
|
right: 0;
|
||||||
|
top: @head-height;
|
||||||
|
bottom: 0;
|
||||||
|
padding: @layout-main-padding;
|
||||||
|
}
|
||||||
|
.el-header {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
height: @head-height;
|
||||||
|
line-height: @head-height;
|
||||||
|
box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-trigger {
|
||||||
|
cursor: pointer;
|
||||||
|
height: @head-height;
|
||||||
|
line-height: @head-height;
|
||||||
|
padding: 0px 24px;
|
||||||
|
display: inline-block;
|
||||||
|
/*transition: all .3s,padding 0s;*/
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, .025);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-aside {
|
||||||
|
color: #333;
|
||||||
|
background-color: rgb(0, 21, 41);
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-menu {
|
||||||
|
h1 {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.menu-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-main {
|
||||||
|
background-color: #f0f2f5;
|
||||||
|
}
|
||||||
|
#app-content{
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: rgba(0,0,0,.65);
|
||||||
|
font-family: Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
|
||||||
|
font-size: 14px;
|
||||||
|
font-variant: tabular-nums;
|
||||||
|
line-height: 1.5;
|
||||||
|
list-style: none;
|
||||||
|
margin: @layout-main-padding;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
transition: all .3s;
|
||||||
|
}
|
||||||
|
#app-content .page{
|
||||||
|
background: #fff;
|
||||||
|
padding: 24px 32px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.page-title-bar{
|
||||||
|
font-size:18px;
|
||||||
|
border-bottom: solid 1px #f0f2f5;
|
||||||
|
.title,span{
|
||||||
|
display: inline-block;
|
||||||
|
padding:10px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.page-content {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
.el-table td, .el-table th{
|
||||||
|
padding:5px 0;
|
||||||
|
}
|
120
src/components/Charts/Card.vue
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
<template>
|
||||||
|
<el-card :loading="loading" :body-style="{ padding: '20px 24px 8px' }" :bordered="false">
|
||||||
|
<div class="chart-card-header">
|
||||||
|
<div class="meta">
|
||||||
|
<span class="chart-card-title">
|
||||||
|
<slot name="title">
|
||||||
|
{{ title }}
|
||||||
|
</slot>
|
||||||
|
</span>
|
||||||
|
<span class="chart-card-action">
|
||||||
|
<slot name="action"></slot>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="total">
|
||||||
|
<slot name="total">
|
||||||
|
<span>{{ typeof total === 'function' && total() || total }}</span>
|
||||||
|
</slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-card-content">
|
||||||
|
<div class="content-fix">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-card-footer">
|
||||||
|
<div class="field">
|
||||||
|
<slot name="footer"></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Card',
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: [Function, Number, String],
|
||||||
|
required: false,
|
||||||
|
default: null
|
||||||
|
},
|
||||||
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.chart-card-header {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.meta {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
color: rgba(0, 0, 0, .45);
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card-action {
|
||||||
|
cursor: pointer;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card-footer {
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
padding-top: 9px;
|
||||||
|
margin-top: 8px;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-card-content {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
position: relative;
|
||||||
|
height: 46px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.content-fix {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #000;
|
||||||
|
margin-top: 4px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
font-size: 30px;
|
||||||
|
line-height: 38px;
|
||||||
|
height: 38px;
|
||||||
|
}
|
||||||
|
</style>
|
56
src/components/Charts/MiniArea.vue
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="antv-chart-mini">
|
||||||
|
<div class="chart-wrapper" :style="{ height: 46 }">
|
||||||
|
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 0, 18, 0]">
|
||||||
|
<el-tooltip />
|
||||||
|
<v-smooth-area position="x*y" />
|
||||||
|
</v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment'
|
||||||
|
const data = []
|
||||||
|
const beginDay = new Date().getTime()
|
||||||
|
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
data.push({
|
||||||
|
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
|
||||||
|
y: Math.round(Math.random() * 10)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const tooltip = [
|
||||||
|
'x*y',
|
||||||
|
(x, y) => ({
|
||||||
|
name: x,
|
||||||
|
value: y
|
||||||
|
})
|
||||||
|
]
|
||||||
|
const scale = [{
|
||||||
|
dataKey: 'x',
|
||||||
|
min: 2
|
||||||
|
}, {
|
||||||
|
dataKey: 'y',
|
||||||
|
title: '时间',
|
||||||
|
min: 1,
|
||||||
|
max: 22
|
||||||
|
}]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MiniArea',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
tooltip,
|
||||||
|
scale,
|
||||||
|
height: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mini-chart";
|
||||||
|
</style>
|
57
src/components/Charts/MiniBar.vue
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<template>
|
||||||
|
<div class="antv-chart-mini">
|
||||||
|
<div class="chart-wrapper" :style="{ height: 46 }">
|
||||||
|
<v-chart :force-fit="true" :height="height" :data="data" :padding="[36, 5, 18, 5]">
|
||||||
|
<el-tooltip />
|
||||||
|
<v-bar position="x*y" />
|
||||||
|
</v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import moment from 'moment'
|
||||||
|
const data = []
|
||||||
|
const beginDay = new Date().getTime()
|
||||||
|
|
||||||
|
for (let i = 0; i < 10; i++) {
|
||||||
|
data.push({
|
||||||
|
x: moment(new Date(beginDay + 1000 * 60 * 60 * 24 * i)).format('YYYY-MM-DD'),
|
||||||
|
y: Math.round(Math.random() * 10)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const tooltip = [
|
||||||
|
'x*y',
|
||||||
|
(x, y) => ({
|
||||||
|
name: x,
|
||||||
|
value: y
|
||||||
|
})
|
||||||
|
]
|
||||||
|
|
||||||
|
const scale = [{
|
||||||
|
dataKey: 'x',
|
||||||
|
min: 2
|
||||||
|
}, {
|
||||||
|
dataKey: 'y',
|
||||||
|
title: '时间',
|
||||||
|
min: 1,
|
||||||
|
max: 30
|
||||||
|
}]
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'MiniBar',
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
data,
|
||||||
|
tooltip,
|
||||||
|
scale,
|
||||||
|
height: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "mini-chart";
|
||||||
|
</style>
|
75
src/components/Charts/MiniProgress.vue
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<template>
|
||||||
|
<div class="chart-mini-progress">
|
||||||
|
<div class="target" :style="{ left: target + '%'}">
|
||||||
|
<span :style="{ backgroundColor: color }" />
|
||||||
|
<span :style="{ backgroundColor: color }"/>
|
||||||
|
</div>
|
||||||
|
<div class="progress-wrapper">
|
||||||
|
<div class="progress" :style="{ backgroundColor: color, width: percentage + '%', height: height }"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MiniProgress',
|
||||||
|
props: {
|
||||||
|
target: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '10px'
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: '#13C2C2'
|
||||||
|
},
|
||||||
|
percentage: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.chart-mini-progress {
|
||||||
|
padding: 5px 0;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.target {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
border-radius: 100px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
height: 4px;
|
||||||
|
width: 2px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.progress-wrapper {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
transition: all .4s cubic-bezier(.08,.82,.17,1) 0s;
|
||||||
|
border-radius: 1px 0 0 1px;
|
||||||
|
background-color: #1890ff;
|
||||||
|
width: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
41
src/components/Charts/MiniSmoothArea.vue
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<link rel="stylesheet" href="../../../../ant-design-pro-vue/src/components/Charts/smooth.area.less">
|
||||||
|
<template>
|
||||||
|
<div :class="prefixCls">
|
||||||
|
<div class="chart-wrapper" :style="{ height: 46 }">
|
||||||
|
<v-chart :force-fit="true" :height="100" :data="dataSource" :scale="scale" :padding="[36, 0, 18, 0]">
|
||||||
|
<el-tooltip />
|
||||||
|
<v-smooth-line position="x*y" :size="2" />
|
||||||
|
<v-smooth-area position="x*y" />
|
||||||
|
</v-chart>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MiniSmoothArea',
|
||||||
|
props: {
|
||||||
|
prefixCls: {
|
||||||
|
type: String,
|
||||||
|
default: 'antv-smooth-area'
|
||||||
|
},
|
||||||
|
scale: {
|
||||||
|
type: [Object, Array],
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
dataSource: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
height: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import "smooth.area.less";
|
||||||
|
</style>
|
13
src/components/Charts/mini-chart.less
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
.antv-chart-mini {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.chart-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -28px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
/* margin: 0 -5px;
|
||||||
|
overflow: hidden;*/
|
||||||
|
}
|
||||||
|
}
|
10
src/components/Charts/smooth.area.less
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
.antv-smooth-area {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.chart-wrapper {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -28px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
0
src/components/Error.vue
Normal file
1
src/components/YCIcon/Icons.js
Normal file
1496
src/components/YCIcon/icons.svg
Normal file
After Width: | Height: | Size: 325 KiB |
55
src/components/YCIcon/index.vue
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<template>
|
||||||
|
<span style="display: inline-block" :style="cursorStyle">
|
||||||
|
<svg class="yc-icon" aria-hidden="true" :style="iconStyle">
|
||||||
|
<use :xlink:href="'#yc-icon-' + iconType"></use>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import './Icons.js'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "YCIcon",
|
||||||
|
props: {
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 20
|
||||||
|
},
|
||||||
|
cursor: {
|
||||||
|
type: String,
|
||||||
|
default: 'default'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
cursorStyle() {
|
||||||
|
return {
|
||||||
|
cursor: this.cursor
|
||||||
|
}
|
||||||
|
},
|
||||||
|
iconStyle() {
|
||||||
|
return {
|
||||||
|
width: this.size + 'px',
|
||||||
|
height: this.size + 'px'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
iconType() {
|
||||||
|
return this.type;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.yc-icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
12
src/components/index.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import CardChart from './Charts/Card';
|
||||||
|
import MiniArea from './Charts/MiniArea';
|
||||||
|
import MiniBar from './Charts/MiniBar';
|
||||||
|
import MiniSmoothArea from './Charts/MiniSmoothArea';
|
||||||
|
import Error from './Error';
|
||||||
|
import YCIcon from './YCIcon';
|
||||||
|
|
||||||
|
export {
|
||||||
|
CardChart,MiniBar,MiniArea,MiniSmoothArea,
|
||||||
|
YCIcon,
|
||||||
|
Error
|
||||||
|
};
|
25
src/main.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App'
|
||||||
|
import router from './router'
|
||||||
|
import Element from 'element-ui'
|
||||||
|
import Viser from 'viser-vue';
|
||||||
|
// import YCIcon from './components/YCIcon'
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css'
|
||||||
|
import 'element-ui/lib/theme-chalk/reset.css'
|
||||||
|
import './assets/index.less'
|
||||||
|
|
||||||
|
|
||||||
|
// require('es6-promise').polyfill()
|
||||||
|
|
||||||
|
Vue.use(Element, {size: 'medium'}) // 加载element-ui
|
||||||
|
Vue.use(Viser)
|
||||||
|
// Vue.use(YCIcon); // 加载图标
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
/* eslint-disable */
|
||||||
|
new Vue({ // eslint-disable-line
|
||||||
|
el: '#app',
|
||||||
|
router,
|
||||||
|
render: h => h(App)
|
||||||
|
})
|
||||||
|
|
182
src/pages/Dashboard.vue
Normal file
@ -0,0 +1,182 @@
|
|||||||
|
<style lang="less">
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
.el-card__header{
|
||||||
|
span{
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#test_chart{
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template>
|
||||||
|
<div class="dashboard">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="8">
|
||||||
|
<card-chart title="新闻总数" total="2,210,025">
|
||||||
|
<el-tooltip content="截止目前新闻总数" placement="top" slot="action">
|
||||||
|
<i class="el-icon-warning"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
<span>月同比 29% 周同比 30%</span>
|
||||||
|
<span slot="footer">本周新增 290</span>
|
||||||
|
</card-chart>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<card-chart title="评论数" total="2,210,025">
|
||||||
|
<el-tooltip content="截止目前评论总数" placement="top" slot="action">
|
||||||
|
<i class="el-icon-warning"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-area/>
|
||||||
|
</div>
|
||||||
|
<span slot="footer">今日评论数 290</span>
|
||||||
|
</card-chart>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8">
|
||||||
|
<card-chart title="访问量" total="2,210,025">
|
||||||
|
<el-tooltip content="截止目前新闻总数" placement="top" slot="action">
|
||||||
|
<i class="el-icon-warning"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
<div>
|
||||||
|
<mini-bar/>
|
||||||
|
</div>
|
||||||
|
<span slot="footer">本周新增 290</span>
|
||||||
|
</card-chart>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<div id="test_chart">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card class="box-card" title="">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>不同分类新闻占比</span>
|
||||||
|
<el-button style="float: right; padding: 3px 0" type="text">查看全部分类</el-button>
|
||||||
|
</div>
|
||||||
|
<v-chart :force-fit="true" :height="284" :data="pieData" :scale="pieScale">
|
||||||
|
<el-tooltip :showTitle="false" dataKey="item*percent"/>
|
||||||
|
<v-axis/>
|
||||||
|
<!-- position="right" :offsetX="-140" -->
|
||||||
|
<v-legend dataKey="item"/>
|
||||||
|
<v-pie position="percent" color="item" :vStyle="pieStyle"/>
|
||||||
|
<v-coord type="theta" :radius="0.75" :innerRadius="0.6"/>
|
||||||
|
</v-chart>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-card class="box-card" title="">
|
||||||
|
<div slot="header" class="clearfix">
|
||||||
|
<span>最新热门新闻</span>
|
||||||
|
<el-button style="float: right; padding: 3px 0" type="text">查看所有</el-button>
|
||||||
|
</div>
|
||||||
|
<div class="last-hot-article">
|
||||||
|
<el-table
|
||||||
|
:data="hotNewsData"
|
||||||
|
style="width: 100%">
|
||||||
|
<el-table-column
|
||||||
|
prop="title"
|
||||||
|
label="标题"
|
||||||
|
width="">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="views"
|
||||||
|
label="当前浏览量"
|
||||||
|
width="90">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="create_time"
|
||||||
|
label="发布时间"
|
||||||
|
width="160">
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {CardChart, MiniArea, MiniBar} from './../components'
|
||||||
|
import api from './../service/api';
|
||||||
|
import DataSet from '@antv/data-set';
|
||||||
|
|
||||||
|
const sourceData = [
|
||||||
|
{item: '时事', count: 32.2},
|
||||||
|
{item: '国内', count: 21},
|
||||||
|
{item: '军事', count: 17},
|
||||||
|
{item: '娱乐', count: 13},
|
||||||
|
{item: '财经', count: 9},
|
||||||
|
{item: '其他', count: 7.8}
|
||||||
|
]
|
||||||
|
// const dv = new DataSet.View().source(sourceData)
|
||||||
|
// dv.transform({
|
||||||
|
// type: 'percent',
|
||||||
|
// field: 'count',
|
||||||
|
// dimension: 'item',
|
||||||
|
// as: 'percent'
|
||||||
|
// })
|
||||||
|
// const pieData = {}
|
||||||
|
|
||||||
|
const pieScale = [{
|
||||||
|
dataKey: 'percent',
|
||||||
|
min: 0,
|
||||||
|
formatter: '.0%'
|
||||||
|
}];
|
||||||
|
const hotNewsData = [
|
||||||
|
// {title:'国乒包揽世乒五冠',views:'332,201',create_time:'2019-4-22 12:30'},
|
||||||
|
// {title:'章子怡被曝怀二胎',views:'120,030',create_time:'2019-4-22 12:30'},
|
||||||
|
// {title:'中国风机器人乐队',views:'92,000',create_time:'2019-4-22 12:30'},
|
||||||
|
// {title:'交通运输部:“五一”假期四天收费公路小客车免费通行',views:'82,000',create_time:'2019-4-22 12:30'},
|
||||||
|
// {title:'小米有品签“军令状”放弃年终奖?',views:'3,000',create_time:'2019-4-22 12:30'},
|
||||||
|
];
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
CardChart, MiniArea, MiniBar
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
height: 400,
|
||||||
|
pieData:{},
|
||||||
|
pieScale,
|
||||||
|
sourceData,
|
||||||
|
pieStyle: {
|
||||||
|
stroke: '#fff',
|
||||||
|
lineWidth: 1
|
||||||
|
},
|
||||||
|
hotNewsData
|
||||||
|
};
|
||||||
|
},
|
||||||
|
async mounted(){
|
||||||
|
this.hotNewsData = await api.queryHotNews();
|
||||||
|
var o = new DataSet.View().source(await api.categoryCount());
|
||||||
|
o.transform({
|
||||||
|
type: 'percent',
|
||||||
|
field: 'count',
|
||||||
|
dimension: 'item',
|
||||||
|
as: 'percent'
|
||||||
|
})
|
||||||
|
this.pieData = o.rows;
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
276
src/pages/Layout.vue
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
<template>
|
||||||
|
<el-container class="page-wrapper">
|
||||||
|
<el-header
|
||||||
|
:height="headerHeight"
|
||||||
|
:style="{ 'background-color': colors.primary }" class="clearfix">
|
||||||
|
<div class="site-logo" :style="{'line-height':headerHeight}">
|
||||||
|
<img src="./../assets/imgs/logo_white.png" :style="{height:logoSize,'margin-top':logoMarginTop}" alt="site-logo"
|
||||||
|
class="header-logo">
|
||||||
|
<span class="site-text">Niger Electronic Platform</span>
|
||||||
|
</div>
|
||||||
|
<ul class="header-operations">
|
||||||
|
<li @click="showHelpDialog" class="pointer">{{langData.help.title}}</li>
|
||||||
|
<li class="lang-switcher">
|
||||||
|
<span @click="switchLang('zh-cn')" :class="{ 'is-active': lang == 'zh-cn' }"
|
||||||
|
class="header-lang pointer">中文</span>
|
||||||
|
<span style="margin: 0 5px">/</span>
|
||||||
|
<span @click="switchLang('en-us')" :class="{ 'is-active': lang == 'en-us' }"
|
||||||
|
class="header-lang pointer">En</span>
|
||||||
|
</li>
|
||||||
|
<li class="hover">
|
||||||
|
<el-dropdown @command="handleUserActionCommand">
|
||||||
|
<div class="header-avatar">
|
||||||
|
<img src="./../assets/imgs/avatar.jpg" style="" alt="avatar">
|
||||||
|
<strong>王小虎</strong>
|
||||||
|
</div>
|
||||||
|
<el-dropdown-menu slot="dropdown" style="min-width: 120px">
|
||||||
|
<el-dropdown-item command="person">个人中心</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="setting">个人设置</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="logout" divided>退出</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</el-header>
|
||||||
|
<el-container>
|
||||||
|
<el-aside class="menu menu-aside" style="width:256px;">
|
||||||
|
<el-menu default-active="1" :data-current-menu="activeMenu" :unique-opened="true">
|
||||||
|
<template v-for="router in adminMenus">
|
||||||
|
<template v-if="router.children">
|
||||||
|
<el-submenu :index="router.name" :key="router.name" class="nav-link-item nav-sub-menu">
|
||||||
|
<span slot="title"><i class="icon" :class="'icon-' + router.icon"></i>{{langData.navs[router.name]}}</span>
|
||||||
|
<el-menu-item v-for="childR in router.children" :data-path="childR.path"
|
||||||
|
:key="'sub_m_c_'+childR.name" class="nav-sub-menu-item"
|
||||||
|
:class="{'is-active':childR.path == activeMenu}">
|
||||||
|
<!--{{langData.navs[childR.name]}}-->
|
||||||
|
<router-link :to="childR.path" class="nav-link nav-sub-link">
|
||||||
|
{{langData.navs[childR.name]}}
|
||||||
|
</router-link>
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
</template>
|
||||||
|
<el-menu-item v-else :key="router.name" class="nav-link-item"
|
||||||
|
:class="{'is-active':!router.children && router.path == activeMenu}">
|
||||||
|
|
||||||
|
<router-link :to="router.path" class="nav-link">
|
||||||
|
<i class="icon" :class="'icon-' + router.icon"></i>{{langData.navs[router.name]}}
|
||||||
|
</router-link>
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
</el-aside>
|
||||||
|
<el-main class="content" :style="{'background-color':colors.contentBg}">
|
||||||
|
|
||||||
|
<el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px;">
|
||||||
|
<span class="pull-left float-left" style="margin-right: 3px;font-weight: bold">
|
||||||
|
<i class="icon icon-home" style="vertical-align: middle;font-size: 16px;"
|
||||||
|
:style="{color:colors.primary}"></i>
|
||||||
|
<span style="font-size: 15px;">当前位置:</span>
|
||||||
|
</span>
|
||||||
|
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>活动管理</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>活动列表</el-breadcrumb-item>
|
||||||
|
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
|
||||||
|
</el-breadcrumb>
|
||||||
|
<router-view></router-view>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
<el-dialog :visible.sync="helpDialogVisible" :title="langData.help.title">
|
||||||
|
<div v-html="langData.help.content" class="help"></div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" @click="helpDialogVisible = false">{{ langData.help.ok }}</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</el-container>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
// import { use } from "element-ui/lib/locale"
|
||||||
|
import langConfig from "./../utils/lang";
|
||||||
|
import {adminRoutes} from "./../router/routes";
|
||||||
|
// import zhLocale from "element-ui/lib/locale/lang/zh-CN"
|
||||||
|
// import enLocale from "element-ui/lib/locale/lang/en"
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
const currentLang = "zh-cn";
|
||||||
|
return {
|
||||||
|
activeMenu: "/dashboard",
|
||||||
|
routes: adminRoutes,
|
||||||
|
lang: currentLang,
|
||||||
|
langData: langConfig[currentLang],
|
||||||
|
colors: {
|
||||||
|
primary: "#4072ED",
|
||||||
|
contentBg: '#F5F6FA'
|
||||||
|
},
|
||||||
|
originalStylesheetCount: -1,
|
||||||
|
originalStyle: "",
|
||||||
|
headerHeight: "100px",
|
||||||
|
logoSize: "70px",
|
||||||
|
logoMarginTop: "15px",
|
||||||
|
themeDialogVisible: false,
|
||||||
|
helpDialogVisible: false,
|
||||||
|
zip: null,
|
||||||
|
styleFiles: [],
|
||||||
|
fontFiles: ["element-icons.ttf", "element-icons.woff"],
|
||||||
|
fonts: [],
|
||||||
|
canDownload: false,
|
||||||
|
query: {
|
||||||
|
name: "",
|
||||||
|
date: []
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
$route: "updateActiveMenuIndex"
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
adminMenus() {
|
||||||
|
return this.routes.filter((r) => {
|
||||||
|
return r.path != '/';
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.updateActiveMenuIndex();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleUserActionCommand(cmd) {
|
||||||
|
switch (cmd) {
|
||||||
|
case 'logout':
|
||||||
|
var loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: '数据清理中...'
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
loading.close();
|
||||||
|
sessionStorage.removeItem('ms_username');
|
||||||
|
this.$router.push('login');
|
||||||
|
}, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$message('功能尚在开发中...');
|
||||||
|
},
|
||||||
|
updateActiveMenuIndex() {
|
||||||
|
if (this.$route.meta.text) {
|
||||||
|
document.title = this.$route.meta.text;
|
||||||
|
}
|
||||||
|
this.activeMenu = this.$route.path;
|
||||||
|
},
|
||||||
|
switchLang(currentLang) {
|
||||||
|
this.lang = currentLang;
|
||||||
|
this.langData = langConfig[currentLang];
|
||||||
|
},
|
||||||
|
showThemeDialog() {
|
||||||
|
this.themeDialogVisible = true;
|
||||||
|
},
|
||||||
|
showHelpDialog() {
|
||||||
|
this.helpDialogVisible = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
@color-main: #4072ED;
|
||||||
|
.el-submenu__title, .el-menu-item {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-wrapper {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dialog__header {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-logo {
|
||||||
|
line-height: 64px;
|
||||||
|
display: inline-block;
|
||||||
|
img {
|
||||||
|
margin-right: 5px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-text {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 36px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
font-family: "Arial", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-header {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-aside {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
padding: 20px 0;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-icon-style {
|
||||||
|
font-size: 22px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.el-submenu{
|
||||||
|
.el-menu{
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-link-item {
|
||||||
|
.nav-link {
|
||||||
|
display: block;
|
||||||
|
color: inherit;
|
||||||
|
.icon {
|
||||||
|
.nav-item-icon-style
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-submenu__title {
|
||||||
|
.icon {
|
||||||
|
.nav-item-icon-style
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.is-active, .is-active {
|
||||||
|
background: @color-main;
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.nav-sub-link{
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-operations {
|
||||||
|
padding-right: 0;
|
||||||
|
li {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.hover {
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-avatar {
|
||||||
|
color: #fff;
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
vertical-align: middle;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 9px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
5
src/pages/error/404.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<div class="error-wrapper">
|
||||||
|
<h1>404</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
3
src/pages/news/Category.vue
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<template>
|
||||||
|
<div id="view_category"></div>
|
||||||
|
</template>
|
94
src/pages/news/Comments.vue
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard">
|
||||||
|
<el-form inline :model="query" label-position="right" class="query-form">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="query.name" placeholder="请输入要查询的关键字"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="评论日期" prop="date">
|
||||||
|
<el-date-picker v-model="query.date" type="daterange" placeholder="请选择评论日期"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary">搜索</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table v-loading="showLoading" :data="dataList" class="table" stripe border>
|
||||||
|
<el-table-column prop="text" label="评论内容"></el-table-column>
|
||||||
|
<el-table-column prop="news.title" label="归属文章" width="260"></el-table-column>
|
||||||
|
<el-table-column prop="user_name" label="评论用户" width="140"></el-table-column>
|
||||||
|
<el-table-column prop="create_time" label="评论时间" width="160"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="block">
|
||||||
|
<el-pagination
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="dataTotal"
|
||||||
|
:page-size="query.size"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { queryComments } from "./../../service/api";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
created() {
|
||||||
|
this.fetchDataList();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showLoading: false,
|
||||||
|
query: {
|
||||||
|
name: "",
|
||||||
|
date: null,
|
||||||
|
page: 1,
|
||||||
|
size: 15
|
||||||
|
},
|
||||||
|
dataList: [],
|
||||||
|
dataTotal: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePageChange(currentPage) {
|
||||||
|
this.query.page = currentPage;
|
||||||
|
this.fetchDataList();
|
||||||
|
},
|
||||||
|
async fetchDataList() {
|
||||||
|
this.showLoading = true;
|
||||||
|
try {
|
||||||
|
const { page, total, data } = await queryComments({
|
||||||
|
page: this.query.page,
|
||||||
|
pageSize: this.query.size
|
||||||
|
});
|
||||||
|
this.dataList = data;
|
||||||
|
this.dataTotal = total;
|
||||||
|
} catch (err) {
|
||||||
|
this.$message.error(err);
|
||||||
|
}
|
||||||
|
this.showLoading = false;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEdit(data) {
|
||||||
|
console.log(data);
|
||||||
|
},
|
||||||
|
async handleDelete(rowData) {
|
||||||
|
var data = await this.$confirm(
|
||||||
|
"此操作将永久删除该文件, 是否继续?",
|
||||||
|
"提示"
|
||||||
|
);
|
||||||
|
if (data == "confirm") {
|
||||||
|
let state = await deleteNews({ id: rowData.id });
|
||||||
|
if (state) {
|
||||||
|
this.fetchNewsList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
98
src/pages/news/Index.vue
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dashboard">
|
||||||
|
<el-form inline :model="query" label-position="right" class="query-form">
|
||||||
|
<el-form-item label="关键字" prop="name">
|
||||||
|
<el-input v-model="query.name" placeholder="请输入要查询的标题关键字"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="发布日期" prop="date">
|
||||||
|
<el-date-picker v-model="query.date" type="daterange" placeholder="请选择发布日期"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary">搜索</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-table v-loading="showLoading" :data="newsData" class="table" stripe border>
|
||||||
|
<el-table-column prop="id" label="编号" width="60"></el-table-column>
|
||||||
|
<el-table-column prop="category" label="分类" width="120"></el-table-column>
|
||||||
|
<el-table-column prop="title" label="标题"></el-table-column>
|
||||||
|
<el-table-column prop="tag" label="标签" width="80"></el-table-column>
|
||||||
|
<el-table-column prop="source" label="来源" width="160"></el-table-column>
|
||||||
|
<el-table-column prop="create_time" label="发布时间" width="160"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="block">
|
||||||
|
<el-pagination
|
||||||
|
layout="prev, pager, next"
|
||||||
|
:total="dataTotal"
|
||||||
|
:page-size="query.size"
|
||||||
|
@current-change="handlePageChange"
|
||||||
|
></el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { queryNews, deleteNews } from "./../../service/api";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
created() {
|
||||||
|
this.fetchNewsList();
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showLoading: false,
|
||||||
|
query: {
|
||||||
|
name: "",
|
||||||
|
date: null,
|
||||||
|
page: 1,
|
||||||
|
size: 15
|
||||||
|
},
|
||||||
|
newsData: [],
|
||||||
|
dataTotal: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlePageChange(currentPage) {
|
||||||
|
this.query.page = currentPage;
|
||||||
|
this.fetchNewsList();
|
||||||
|
},
|
||||||
|
async fetchNewsList() {
|
||||||
|
this.showLoading = true;
|
||||||
|
try {
|
||||||
|
const { page, total, data } = await queryNews({
|
||||||
|
page: this.query.page,
|
||||||
|
pageSize: this.query.size
|
||||||
|
});
|
||||||
|
this.newsData = data;
|
||||||
|
this.dataTotal = total;
|
||||||
|
} catch (err) {
|
||||||
|
this.$message.error(err);
|
||||||
|
}
|
||||||
|
this.showLoading = false;
|
||||||
|
},
|
||||||
|
parseTime(times) {
|
||||||
|
return new Date(times).toLocaleString();
|
||||||
|
},
|
||||||
|
handleEdit(data) {
|
||||||
|
console.log(data);
|
||||||
|
},
|
||||||
|
async handleDelete(rowData) {
|
||||||
|
var data = await this.$confirm(
|
||||||
|
"此操作将永久删除该文件, 是否继续?",
|
||||||
|
"提示"
|
||||||
|
);
|
||||||
|
if (data == "confirm") {
|
||||||
|
let state = await deleteNews({ id: rowData.id });
|
||||||
|
if (state) {
|
||||||
|
this.fetchNewsList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
13
src/pages/process/Deposit.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<h1>Deposit</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Deposit"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
13
src/pages/process/Take.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<h1>Take</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Take"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
44
src/pages/process/Transfer.vue
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<div id="page_process_transfer">
|
||||||
|
<div class="header">
|
||||||
|
<el-card>
|
||||||
|
<el-form :inline="true" class="demo-form-inline">
|
||||||
|
<el-form-item label="审批人">
|
||||||
|
<el-input v-model="searchModel.user" placeholder="审批人"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="活动区域">
|
||||||
|
<el-select placeholder="活动区域">
|
||||||
|
<el-option label="区域一" value="shanghai"></el-option>
|
||||||
|
<el-option label="区域二" value="beijing"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="onSearch">查询</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Transfer",
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
searchModel:{
|
||||||
|
user:''
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
onSearch(){
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
13
src/pages/shop/Franchisee.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<h1>加盟商</h1>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Franchisee"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
15
src/pages/shop/Store.vue
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div id="page_shop_store">
|
||||||
|
<h1>Shop.Store</h1>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "Store"
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
207
src/pages/user/Login.vue
Normal file
@ -0,0 +1,207 @@
|
|||||||
|
<template>
|
||||||
|
<div class="login-wrap" id="app-login-wrapper">
|
||||||
|
<div class="ms-login">
|
||||||
|
<div class="ms-title">
|
||||||
|
<img class="login-logo" src="./../../assets/imgs/logo.png" alt="">
|
||||||
|
<span class="text">
|
||||||
|
急性高原反应自评
|
||||||
|
<small>管理平台</small>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"
|
||||||
|
label-width="0px" class="ms-content">
|
||||||
|
<el-form-item prop="username">
|
||||||
|
<el-input v-model="ruleForm.username" placeholder="请输入用户名"
|
||||||
|
prefix-icon="icon icon-user" size="large"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<el-input type="password" size="large" placeholder="请输入登录密码" v-model="ruleForm.password"
|
||||||
|
prefix-icon="icon icon-lock" @keyup.enter.native="submitForm('ruleForm')"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item prop="checkcode">
|
||||||
|
<el-input type="text" placeholder="验证码" v-model="ruleForm.checkcode"
|
||||||
|
@keyup.enter.native="submitForm('ruleForm')">
|
||||||
|
<i slot="suffix"><img class="img-code" src="../../assets/imgs/code.jpg" alt=""></i>
|
||||||
|
</el-input>
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
<el-row :gutter="20" class="el-form-item">
|
||||||
|
<el-col :span="8">
|
||||||
|
<el-checkbox v-model="ruleForm.checked">自动登录</el-checkbox>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="8" :offset="8" class="text-right">
|
||||||
|
<router-link to="/user/forget">忘记密码</router-link>
|
||||||
|
</el-col>
|
||||||
|
</el-row> -->
|
||||||
|
<div class="login-btn">
|
||||||
|
<el-button v-loading.fullscreen.lock="loginLoading" size="large" type="info" @click="submitForm('ruleForm')">
|
||||||
|
登录
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import appConfig from "./../../utils/config";
|
||||||
|
import http from "./../../utils/http";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// components: {YCIcon},
|
||||||
|
mounted() {
|
||||||
|
// console.log('user login loaded');
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
// console.log('user login created');
|
||||||
|
},
|
||||||
|
data: function () {
|
||||||
|
const checkVerifyCode = (rule, value, callback) => {
|
||||||
|
if (!value) {
|
||||||
|
callback(new Error("请输入验证码"));
|
||||||
|
} else if (value.toLowerCase() !== "m8k2") {
|
||||||
|
callback(new Error("验证码输入不正确"));
|
||||||
|
} else {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
config: appConfig,
|
||||||
|
loginLoading: false,
|
||||||
|
ruleForm: {
|
||||||
|
username: "",
|
||||||
|
password: "",
|
||||||
|
checked: true,
|
||||||
|
checkcode: "m8k2"
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
username: [{required: true, message: "请输入用户名", trigger: "blur"}],
|
||||||
|
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||||
|
checkcode: [{validator: checkVerifyCode, trigger: "blur"}]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate(async valid => {
|
||||||
|
if (valid) {
|
||||||
|
this.loginLoading = true;
|
||||||
|
let data = {code: 0, message: '提交登录数据异常'};
|
||||||
|
try {
|
||||||
|
data = await http.post('/user/login', this.ruleForm);
|
||||||
|
} catch (error) {
|
||||||
|
}
|
||||||
|
if (data.code == 0) {
|
||||||
|
sessionStorage.setItem(
|
||||||
|
appConfig.userSessionName,
|
||||||
|
this.ruleForm.username
|
||||||
|
);
|
||||||
|
this.$router.push("/");
|
||||||
|
} else {
|
||||||
|
this.loginLoading = false;
|
||||||
|
this.$message.error(data.message);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// this.$message.error('请填写正确的登录信息');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="less">
|
||||||
|
@logo-height: 44px;
|
||||||
|
@form-width: 380px;
|
||||||
|
@logo-font-size: 36px;
|
||||||
|
@logo-font-small-size:20px;
|
||||||
|
@margin-item-size: 30px;
|
||||||
|
@body-bg:#f0f0f2;
|
||||||
|
@color-title:#009688;
|
||||||
|
@size-input-font:18px;
|
||||||
|
@size-input-height:55px;
|
||||||
|
.el-input{
|
||||||
|
height:@size-input-height;
|
||||||
|
line-height: @size-input-height;
|
||||||
|
input{
|
||||||
|
font-size: @size-input-font;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #F0F0F2;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.ms-login {
|
||||||
|
overflow: hidden;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-logo {
|
||||||
|
height: @logo-height;
|
||||||
|
margin-right: 16px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
.ms-title {
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: @logo-height;
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 70px;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
.line {
|
||||||
|
border-right: solid 1px #ccc;
|
||||||
|
height: 50px;
|
||||||
|
margin: 6px 10px 0;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
color:@color-title;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: @logo-font-size;
|
||||||
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||||
|
small{
|
||||||
|
color:rgba(0,0,0,0.65);
|
||||||
|
font-size:@logo-font-small-size;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-code {
|
||||||
|
height: 38px;
|
||||||
|
position: relative;
|
||||||
|
right: 1px;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 登录表单样式
|
||||||
|
.ms-content {
|
||||||
|
width: @form-width;
|
||||||
|
margin: 30px auto;
|
||||||
|
// padding: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-btn {
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 30px;
|
||||||
|
button {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.login-tips {
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
110
src/pages/user/particles.js
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
export default {
|
||||||
|
"particles": {
|
||||||
|
"number": {
|
||||||
|
"value": 80,
|
||||||
|
"density": {
|
||||||
|
"enable": true,
|
||||||
|
"value_area": 800
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"color": {
|
||||||
|
"value": "#ffffff"
|
||||||
|
},
|
||||||
|
"shape": {
|
||||||
|
"type": "circle",
|
||||||
|
"stroke": {
|
||||||
|
"width": 0,
|
||||||
|
"color": "#000000"
|
||||||
|
},
|
||||||
|
"polygon": {
|
||||||
|
"nb_sides": 5
|
||||||
|
},
|
||||||
|
"image": {
|
||||||
|
"src": "img/github.svg",
|
||||||
|
"width": 100,
|
||||||
|
"height": 100
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"opacity": {
|
||||||
|
"value": 0.5,
|
||||||
|
"random": false,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 1,
|
||||||
|
"opacity_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"size": {
|
||||||
|
"value": 10,
|
||||||
|
"random": true,
|
||||||
|
"anim": {
|
||||||
|
"enable": false,
|
||||||
|
"speed": 80,
|
||||||
|
"size_min": 0.1,
|
||||||
|
"sync": false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"line_linked": {
|
||||||
|
"enable": true,
|
||||||
|
"distance": 300,
|
||||||
|
"color": "#ffffff",
|
||||||
|
"opacity": 0.4,
|
||||||
|
"width": 2
|
||||||
|
},
|
||||||
|
"move": {
|
||||||
|
"enable": true,
|
||||||
|
"speed": 12,
|
||||||
|
"direction": "none",
|
||||||
|
"random": false,
|
||||||
|
"straight": false,
|
||||||
|
"out_mode": "out",
|
||||||
|
"bounce": false,
|
||||||
|
"attract": {
|
||||||
|
"enable": false,
|
||||||
|
"rotateX": 600,
|
||||||
|
"rotateY": 1200
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"interactivity": {
|
||||||
|
"detect_on": "canvas",
|
||||||
|
"events": {
|
||||||
|
"onhover": {
|
||||||
|
"enable": false,
|
||||||
|
"mode": "repulse"
|
||||||
|
},
|
||||||
|
"onclick": {
|
||||||
|
"enable": true,
|
||||||
|
"mode": "push"
|
||||||
|
},
|
||||||
|
"resize": true
|
||||||
|
},
|
||||||
|
"modes": {
|
||||||
|
"grab": {
|
||||||
|
"distance": 800,
|
||||||
|
"line_linked": {
|
||||||
|
"opacity": 1
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"bubble": {
|
||||||
|
"distance": 800,
|
||||||
|
"size": 80,
|
||||||
|
"duration": 2,
|
||||||
|
"opacity": 8,
|
||||||
|
"speed": 3
|
||||||
|
},
|
||||||
|
"repulse": {
|
||||||
|
"distance": 400,
|
||||||
|
"duration": 0.4
|
||||||
|
},
|
||||||
|
"push": {
|
||||||
|
"particles_nb": 4
|
||||||
|
},
|
||||||
|
"remove": {
|
||||||
|
"particles_nb": 2
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"retina_detect": true
|
||||||
|
}
|
32
src/router/index.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
import AppConfig from './../utils/config'
|
||||||
|
import routes from './routes'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
// mode: 'hash',
|
||||||
|
base: __dirname,
|
||||||
|
routes: routes
|
||||||
|
})
|
||||||
|
|
||||||
|
// 简单的权限之类的验证哟
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
const sessionName = AppConfig.userSessionName;
|
||||||
|
const path = to.path;
|
||||||
|
if (path.startsWith('/user')) {
|
||||||
|
sessionStorage.removeItem(sessionName);
|
||||||
|
next();
|
||||||
|
} else {
|
||||||
|
let user = sessionStorage.getItem(sessionName);
|
||||||
|
if (!user) {
|
||||||
|
next({path: '/user/login'})
|
||||||
|
} else {
|
||||||
|
next()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//NProgress.start();
|
||||||
|
|
||||||
|
})
|
||||||
|
export default router;
|
104
src/router/routes.js
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
import LoginPage from './../pages/user/Login';
|
||||||
|
|
||||||
|
export const adminRoutes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
redirect: '/dashboard',
|
||||||
|
name: 'home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/dashboard',
|
||||||
|
name: 'dashboard',
|
||||||
|
component: ()=>import('./../pages/Dashboard'),
|
||||||
|
icon: 'home'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/process',
|
||||||
|
name: 'process',
|
||||||
|
icon: 'icons-process',
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: '/process/transfer',
|
||||||
|
name: 'process_transfer',
|
||||||
|
component: ()=>import( /* view_admin_news_comments */ './../pages/process/Transfer.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/process/deposit',
|
||||||
|
name: 'process_deposit',
|
||||||
|
component: ()=>import( /* view_admin_news_comments */ './../pages/process/Deposit.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/process/take',
|
||||||
|
name: 'process_take',
|
||||||
|
component: ()=>import( /* view_admin_news_comments */ './../pages/process/Take.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/shop',
|
||||||
|
name: 'merchant_info',
|
||||||
|
icon: 'shop',
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: '/shop/store',
|
||||||
|
name: 'shop_store',
|
||||||
|
component: ()=>import( /* view_admin_news_comments */ './../pages/shop/Store.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/shop/franchisee',
|
||||||
|
name: 'shop_franchisee',
|
||||||
|
component: ()=>import( /* view_admin_news_comments */ './../pages/shop/Franchisee.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/reconciliation',
|
||||||
|
name: 'reconciliation',
|
||||||
|
icon: 'pie-chart',
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: '/reconciliation/settlement',
|
||||||
|
name: 'reconciliation_settlement',
|
||||||
|
component: ()=>import( /* view_admin_news_comments */ './../pages/shop/Store.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/reconciliation/account',
|
||||||
|
name: 'reconciliation_account',
|
||||||
|
component: ()=>import( /* view_admin_news_comments */ './../pages/shop/Franchisee.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const routes = [{
|
||||||
|
path: '/user',
|
||||||
|
redirect: '/user/login',
|
||||||
|
name: 'user_index'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/login',
|
||||||
|
name: 'user_login',
|
||||||
|
component: LoginPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/user/reg',
|
||||||
|
name: 'user_reg',
|
||||||
|
component: LoginPage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/404',
|
||||||
|
name: 'error_404',
|
||||||
|
component: () => import( /* view_error_404 */ './../pages/error/404.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import( /* layout_admin */ './../pages/Layout.vue'),
|
||||||
|
//children
|
||||||
|
children: adminRoutes
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '*',
|
||||||
|
redirect: '/404'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
export default routes
|
31
src/service/api.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import {
|
||||||
|
get,
|
||||||
|
post
|
||||||
|
} from '../utils/http';
|
||||||
|
import {
|
||||||
|
stringify
|
||||||
|
} from 'qs';
|
||||||
|
|
||||||
|
export async function queryNews(params = {}) {
|
||||||
|
return get(`/news/index?${stringify(params)}`);
|
||||||
|
}
|
||||||
|
export async function deleteNews(params = {}) {
|
||||||
|
return post(`/news/delete`, params);
|
||||||
|
}
|
||||||
|
export async function queryHotNews(params = {}) {
|
||||||
|
return get(`/news/hot?${stringify(params)}`);
|
||||||
|
}
|
||||||
|
export async function categoryCount(params = {}) {
|
||||||
|
return get(`/news/category_count?${stringify(params)}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function queryComments(params = {}) {
|
||||||
|
return get(`/comments/query?${stringify(params)}`);
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
queryNews,
|
||||||
|
queryHotNews,
|
||||||
|
queryComments,
|
||||||
|
deleteNews,
|
||||||
|
categoryCount
|
||||||
|
}
|
3
src/service/news.js
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
14
src/utils/color.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import color from 'css-color-function'
|
||||||
|
import formula from './formula.json'
|
||||||
|
|
||||||
|
const generateColors = primary => {
|
||||||
|
let colors = {}
|
||||||
|
|
||||||
|
Object.keys(formula).forEach(key => {
|
||||||
|
const value = formula[key].replace(/primary/g, primary)
|
||||||
|
colors[key] = color.convert(value)
|
||||||
|
})
|
||||||
|
return colors
|
||||||
|
}
|
||||||
|
|
||||||
|
export default generateColors
|
8
src/utils/config.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export default {
|
||||||
|
apiUrl:'//home.xiaoyan.me:10086/api/v1',
|
||||||
|
// apiUrl:'//127.0.0.1:10086',
|
||||||
|
/**
|
||||||
|
* h呵呵呵
|
||||||
|
*/
|
||||||
|
userSessionName:'ms_username',
|
||||||
|
}
|
12
src/utils/formula.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"shade-1": "color(primary shade(10%))",
|
||||||
|
"light-1": "color(primary tint(10%))",
|
||||||
|
"light-2": "color(primary tint(20%))",
|
||||||
|
"light-3": "color(primary tint(30%))",
|
||||||
|
"light-4": "color(primary tint(40%))",
|
||||||
|
"light-5": "color(primary tint(50%))",
|
||||||
|
"light-6": "color(primary tint(60%))",
|
||||||
|
"light-7": "color(primary tint(70%))",
|
||||||
|
"light-8": "color(primary tint(80%))",
|
||||||
|
"light-9": "color(primary tint(90%))"
|
||||||
|
}
|
62
src/utils/http.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import appConfig from './config';
|
||||||
|
|
||||||
|
const codeMessage = {
|
||||||
|
200: '服务器成功返回请求的数据。',
|
||||||
|
201: '新建或修改数据成功。',
|
||||||
|
202: '一个请求已经进入后台排队(异步任务)。',
|
||||||
|
204: '删除数据成功。',
|
||||||
|
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
|
||||||
|
401: '用户没有权限(令牌、用户名、密码错误)。',
|
||||||
|
403: '用户得到授权,但是访问是被禁止的。',
|
||||||
|
404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
|
||||||
|
406: '请求的格式不可得。',
|
||||||
|
410: '请求的资源被永久删除,且不会再得到的。',
|
||||||
|
422: '当创建一个对象时,发生一个验证错误。',
|
||||||
|
500: '服务器发生错误,请检查服务器。',
|
||||||
|
502: '网关错误。',
|
||||||
|
503: '服务不可用,服务器暂时过载或维护。',
|
||||||
|
504: '网关超时。',
|
||||||
|
};
|
||||||
|
export function get(api) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
fetch(appConfig.apiUrl + api, {
|
||||||
|
method: 'GET'
|
||||||
|
}).then(res => {
|
||||||
|
return res.json();
|
||||||
|
}).then(data => {
|
||||||
|
resolve(data);
|
||||||
|
}).catch(data => {
|
||||||
|
reject(data)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 发送post请求
|
||||||
|
* @param {string} api
|
||||||
|
* @param {object} data
|
||||||
|
*/
|
||||||
|
export function post(api, postData) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
let formData = new FormData();
|
||||||
|
for (var k in postData) {
|
||||||
|
formData.append(k, postData[k]);
|
||||||
|
}
|
||||||
|
fetch(appConfig.apiUrl + api, {
|
||||||
|
method: 'POST',
|
||||||
|
mode: 'cors',
|
||||||
|
// headers: {
|
||||||
|
// 'Content-Type': 'application/x-www-form-urlencoded'
|
||||||
|
// },
|
||||||
|
body: formData //JSON.stringify(postData)
|
||||||
|
}).then(res => {
|
||||||
|
return res.json();
|
||||||
|
}).then(data => {
|
||||||
|
resolve(data);
|
||||||
|
}).catch(data => {
|
||||||
|
reject(data)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
get,post
|
||||||
|
}
|
60
src/utils/lang.js
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
export default {
|
||||||
|
'zh-cn': {
|
||||||
|
help: {
|
||||||
|
title: '帮助',
|
||||||
|
content: `
|
||||||
|
<p>1、点击顶部栏中的「切换主题色」,在弹出的对话框中选择主题色,并点击「切换」按钮;</p>
|
||||||
|
<p>2、此时本页面会按照你选定的主题色重新生成样式,你可以预览应用了新主题色的 Element;</p>
|
||||||
|
<p>3、点击顶部栏中的「下载主题」,会自动下载应用了新主题色的样式文件;</p>
|
||||||
|
<p>4、关于如何在项目中引入新的样式文件,请参考官方文档中<a href="http://element.eleme.io/#/zh-CN/component/custom-theme#yin-ru-zi-ding-yi-zhu-ti" target="_blank">自定义主题</a>的相关内容;</p>
|
||||||
|
<p>5、如果需要除主题色之外更深层次的样式定制,请使用 <a href="https://github.com/ElementUI/element-theme" target="_blank">element-theme</a>。</p>
|
||||||
|
<p>注意:本页面仅用来预览主题,页面上的元素不含交互逻辑。</p>
|
||||||
|
`,
|
||||||
|
ok: '确定'
|
||||||
|
},
|
||||||
|
navs: {
|
||||||
|
dashboard: '首页',
|
||||||
|
news: '新闻管理',
|
||||||
|
comments: '评论管理',
|
||||||
|
category: '分类管理',
|
||||||
|
student: '学生信息',
|
||||||
|
score: '成绩信息',
|
||||||
|
subject: '科目信息',
|
||||||
|
process: '业务办理',
|
||||||
|
process_transfer: '汇款',
|
||||||
|
process_deposit: '存款',
|
||||||
|
process_take: '取款',
|
||||||
|
//商家信息
|
||||||
|
merchant_info:'商家信息',
|
||||||
|
shop_store:'门店信息',
|
||||||
|
shop_franchisee:'加盟商信息',
|
||||||
|
//统计与对账
|
||||||
|
reconciliation:'统计与对账',
|
||||||
|
reconciliation_settlement:'酬金结算',
|
||||||
|
reconciliation_account:'账户汇总',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'en-us': {
|
||||||
|
help: {
|
||||||
|
title: 'Help',
|
||||||
|
content: `
|
||||||
|
<p>1. Click the 'Change Theme Color' button on the header menu, choose a theme color in the popped dialog, and click 'Change';</p>
|
||||||
|
<p>2. Now this page will apply a new style generated with your newly appointed theme color, so you can preview what Element looks like once this color is applied;</p>
|
||||||
|
<p>3. Click the 'Download Theme' button on the header menu, and you can download the style files with the new theme color;</p>
|
||||||
|
<p>4、To import new style files in your project, please refer to the <a href="http://element.eleme.io/#/en-US/component/custom-theme#import-custom-theme" target="_blank">custom theme</a> section in our official documentation;</p>
|
||||||
|
<p>5. If you need more customization than just changing the theme color, please use <a href="https://github.com/ElementUI/element-theme" target="_blank">element-theme</a>.</p>
|
||||||
|
<p>Note that this page is only for previewing themes, so the components on this page are not interactive.</p>
|
||||||
|
`,
|
||||||
|
ok: 'OK'
|
||||||
|
},
|
||||||
|
navs: {
|
||||||
|
dashboard: 'HomePage',
|
||||||
|
news: 'News',
|
||||||
|
comments: 'Comments',
|
||||||
|
category: 'Category',
|
||||||
|
student: 'Student',
|
||||||
|
score: 'Score',
|
||||||
|
subject: 'Subject'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|