New file |
| | |
| | | .DS_Store |
| | | node_modules |
| | | /dist |
| | | |
| | | |
| | | # local env files |
| | | .env.local |
| | | .env.*.local |
| | | |
| | | # Log files |
| | | npm-debug.log* |
| | | yarn-debug.log* |
| | | yarn-error.log* |
| | | pnpm-debug.log* |
| | | |
| | | # Editor directories and files |
| | | .idea |
| | | .vscode |
| | | *.suo |
| | | *.ntvs* |
| | | *.njsproj |
| | | *.sln |
| | | *.sw? |
New file |
| | |
| | | module.exports = { |
| | | presets: [ |
| | | '@vue/cli-plugin-babel/preset' |
| | | ], |
| | | plugins: [ |
| | | [ |
| | | 'component', |
| | | { |
| | | libraryName: 'element-ui', |
| | | styleLibraryName: 'theme-chalk' |
| | | } |
| | | ] |
| | | ] |
| | | } |
New file |
| | |
| | | { |
| | | "compilerOptions": { |
| | | "target": "es5", |
| | | "module": "esnext", |
| | | "baseUrl": "./", |
| | | "moduleResolution": "node", |
| | | "paths": { |
| | | "@/*": [ |
| | | "src/*" |
| | | ] |
| | | }, |
| | | "lib": [ |
| | | "esnext", |
| | | "dom", |
| | | "dom.iterable", |
| | | "scripthost" |
| | | ] |
| | | } |
| | | } |
New file |
| | |
| | | { |
| | | "name": "jz-ui", |
| | | "version": "0.1.0", |
| | | "private": true, |
| | | "scripts": { |
| | | "serve": "vue-cli-service serve", |
| | | "build": "vue-cli-service build" |
| | | }, |
| | | "dependencies": { |
| | | "axios": "^0.27.2", |
| | | "core-js": "^3.8.3", |
| | | "element-ui": "^2.15.9", |
| | | "vue": "^2.6.14", |
| | | "vue-router": "^3.5.1", |
| | | "vuex": "^3.6.2" |
| | | }, |
| | | "devDependencies": { |
| | | "@vue/cli-plugin-babel": "~5.0.0", |
| | | "@vue/cli-plugin-router": "~5.0.0", |
| | | "@vue/cli-plugin-vuex": "~5.0.0", |
| | | "@vue/cli-service": "~5.0.0", |
| | | "babel-plugin-component": "^1.1.1", |
| | | "sass": "^1.32.7", |
| | | "sass-loader": "^12.0.0", |
| | | "vue-template-compiler": "^2.6.14" |
| | | }, |
| | | "browserslist": [ |
| | | "> 1%", |
| | | "last 2 versions", |
| | | "not dead" |
| | | ] |
| | | } |
New file |
| | |
| | | <!DOCTYPE html> |
| | | <html lang=""> |
| | | <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"> |
| | | <link rel="icon" href="<%= BASE_URL %>favicon.ico"> |
| | | <title><%= htmlWebpackPlugin.options.title %></title> |
| | | </head> |
| | | <body> |
| | | <noscript> |
| | | <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
| | | </noscript> |
| | | <div id="app"></div> |
| | | <!-- built files will be auto injected --> |
| | | </body> |
| | | </html> |
New file |
| | |
| | | <template> |
| | | <div id="app"> |
| | | <router-view></router-view> |
| | | </div> |
| | | </template> |
New file |
| | |
| | | import request from '@/plugins/request' |
| | | |
| | | export function getAuditList(params) { |
| | | return request({ |
| | | url: '/report', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
New file |
| | |
| | | import request from '@/plugins/request' |
| | | |
| | | export function getAuditList(params) { |
| | | return request({ |
| | | url: '/report', |
| | | method: 'get', |
| | | params |
| | | }) |
| | | } |
| | | |
| | | export function getImgUrl(val) { |
| | | return request({ |
| | | url: '/minio/getUrl', |
| | | method: 'get', |
| | | params: { |
| | | fileName: val |
| | | } |
| | | }) |
| | | } |
New file |
| | |
| | | import request from '@/plugins/request' |
| | | |
| | | export function checkPendedNumber() { |
| | | return request({ |
| | | url: '/user/checkPendedNumber', |
| | | method: 'get', |
| | | }) |
| | | } |
| | | |
| | | export function checkPendingNumber() { |
| | | return request({ |
| | | url: '/user/checkPendingNumber', |
| | | method: 'get', |
| | | }) |
| | | } |
| | | |
| | | export function intoGroupNumber() { |
| | | return request({ |
| | | url: '/user/intoGroupNumber', |
| | | method: 'get', |
| | | }) |
| | | } |
| | | export function newCase() { |
| | | return request({ |
| | | url: '/user/newCase', |
| | | method: 'get', |
| | | }) |
| | | } |
| | | export function allCase() { |
| | | return request({ |
| | | url: '/user/allCase', |
| | | method: 'get', |
| | | }) |
| | | } |
| | | export function allManager() { |
| | | return request({ |
| | | url: '/user/allManager', |
| | | method: 'get', |
| | | }) |
| | | } |
| | | export function checkPendingList() { |
| | | return request({ |
| | | url: '/user/checkPendingList', |
| | | method: 'get', |
| | | }) |
| | | } |
| | | export function groupMessage() { |
| | | return request({ |
| | | url: '/user/groupMessage', |
| | | method: 'get', |
| | | }) |
| | | } |
New file |
| | |
| | | /* 全局样式表 */ |
| | | html, |
| | | body, |
| | | #app { |
| | | height: 100%; |
| | | margin: 0; |
| | | padding: 0; |
| | | min-width: 1280px; |
| | | } |
| | | |
| | | .el-breadcrumb{ |
| | | margin-bottom: 15px; |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .el-card{ |
| | | box-shadow: 0 1px 1px rgba(0, 0, 0,0.15) !important; |
| | | } |
| | | |
| | | .el-table{ |
| | | margin-top: 15px; |
| | | } |
| | | |
| | | .el-pagination{ |
| | | margin-top: 15px; |
| | | } |
| | | |
| | | /* 解决层级选择器过长 */ |
| | | .el-scrollbar__wrap { |
| | | height: 200px; |
| | | } |
| | | |
| | | .el-cascader-panel .el-radio{ |
| | | width: 100%; |
| | | height: 100%; |
| | | z-index: 10; |
| | | position: absolute; |
| | | top: 10px; |
| | | right: 10px; |
| | | } |
| | | .el-cascader-panel .el-radio__input{ |
| | | visibility: hidden; |
| | | } |
| | | .el-cascader-panel .el-cascader-node__postfix { |
| | | top: 10px; |
| | | } |
| | | |
| | | .el-steps{ |
| | | margin: 15px 0; |
| | | } |
| | | .el-step__title{ |
| | | font-size: 13px; |
| | | } |
| | | |
| | | .ql-editor{ |
| | | min-height: 300px; |
| | | } |
New file |
| | |
| | | *{margin: 0;padding: 0;list-style: none;} |
| | | /* |
| | | KISSY CSS Reset |
| | | 理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 |
| | | 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 |
| | | 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 |
| | | 特色:1. 适应中文;2. 基于最新主流浏览器。 |
| | | 维护:玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com> |
| | | */ |
| | | |
| | | /** 清除内外边距 **/ |
| | | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ |
| | | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ |
| | | pre, /* text formatting elements 文本格式元素 */ |
| | | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ |
| | | th, td /* table elements 表格元素 */ { |
| | | margin: 0; |
| | | padding: 0; |
| | | } |
| | | |
| | | /** 设置默认字体 **/ |
| | | body, |
| | | button, input, select, textarea /* for ie */ { |
| | | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; |
| | | } |
| | | h1, h2, h3, h4, h5, h6 { font-size: 100%; } |
| | | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ |
| | | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ |
| | | small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ |
| | | |
| | | /** 重置列表元素 **/ |
| | | ul, ol { list-style: none; } |
| | | |
| | | /** 重置文本格式元素 **/ |
| | | a { text-decoration: none; } |
| | | a:hover { text-decoration: underline; } |
| | | |
| | | |
| | | /** 重置表单元素 **/ |
| | | legend { color: #000; } /* for ie6 */ |
| | | fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ |
| | | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ |
| | | /* 注:optgroup 无法扶正 */ |
| | | |
| | | /** 重置表格元素 **/ |
| | | table { border-collapse: collapse; border-spacing: 0; } |
| | | |
| | | /* 清除浮动 */ |
| | | .ks-clear:after, .clear:after { |
| | | content: '\20'; |
| | | display: block; |
| | | height: 0; |
| | | clear: both; |
| | | } |
| | | .ks-clear, .clear { |
| | | *zoom: 1; |
| | | } |
| | | |
| | | .main { |
| | | padding: 30px 100px; |
| | | width: 960px; |
| | | margin: 0 auto; |
| | | } |
| | | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} |
| | | |
| | | .helps{margin-top:40px;} |
| | | .helps pre{ |
| | | padding:20px; |
| | | margin:10px 0; |
| | | border:solid 1px #e7e1cd; |
| | | background-color: #fffdef; |
| | | overflow: auto; |
| | | } |
| | | |
| | | .icon_lists{ |
| | | width: 100% !important; |
| | | |
| | | } |
| | | |
| | | .icon_lists li{ |
| | | float:left; |
| | | width: 100px; |
| | | height:180px; |
| | | text-align: center; |
| | | list-style: none !important; |
| | | } |
| | | .icon_lists .icon{ |
| | | font-size: 42px; |
| | | line-height: 100px; |
| | | margin: 10px 0; |
| | | color:#333; |
| | | -webkit-transition: font-size 0.25s ease-out 0s; |
| | | -moz-transition: font-size 0.25s ease-out 0s; |
| | | transition: font-size 0.25s ease-out 0s; |
| | | |
| | | } |
| | | .icon_lists .icon:hover{ |
| | | font-size: 100px; |
| | | } |
| | | |
| | | |
| | | |
| | | .markdown { |
| | | color: #666; |
| | | font-size: 14px; |
| | | line-height: 1.8; |
| | | } |
| | | |
| | | .highlight { |
| | | line-height: 1.5; |
| | | } |
| | | |
| | | .markdown img { |
| | | vertical-align: middle; |
| | | max-width: 100%; |
| | | } |
| | | |
| | | .markdown h1 { |
| | | color: #404040; |
| | | font-weight: 500; |
| | | line-height: 40px; |
| | | margin-bottom: 24px; |
| | | } |
| | | |
| | | .markdown h2, |
| | | .markdown h3, |
| | | .markdown h4, |
| | | .markdown h5, |
| | | .markdown h6 { |
| | | color: #404040; |
| | | margin: 1.6em 0 0.6em 0; |
| | | font-weight: 500; |
| | | clear: both; |
| | | } |
| | | |
| | | .markdown h1 { |
| | | font-size: 28px; |
| | | } |
| | | |
| | | .markdown h2 { |
| | | font-size: 22px; |
| | | } |
| | | |
| | | .markdown h3 { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | .markdown h4 { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .markdown h5 { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .markdown h6 { |
| | | font-size: 12px; |
| | | } |
| | | |
| | | .markdown hr { |
| | | height: 1px; |
| | | border: 0; |
| | | background: #e9e9e9; |
| | | margin: 16px 0; |
| | | clear: both; |
| | | } |
| | | |
| | | .markdown p, |
| | | .markdown pre { |
| | | margin: 1em 0; |
| | | } |
| | | |
| | | .markdown > p, |
| | | .markdown > blockquote, |
| | | .markdown > .highlight, |
| | | .markdown > ol, |
| | | .markdown > ul { |
| | | width: 80%; |
| | | } |
| | | |
| | | .markdown ul > li { |
| | | list-style: circle; |
| | | } |
| | | |
| | | .markdown > ul li, |
| | | .markdown blockquote ul > li { |
| | | margin-left: 20px; |
| | | padding-left: 4px; |
| | | } |
| | | |
| | | .markdown > ul li p, |
| | | .markdown > ol li p { |
| | | margin: 0.6em 0; |
| | | } |
| | | |
| | | .markdown ol > li { |
| | | list-style: decimal; |
| | | } |
| | | |
| | | .markdown > ol li, |
| | | .markdown blockquote ol > li { |
| | | margin-left: 20px; |
| | | padding-left: 4px; |
| | | } |
| | | |
| | | .markdown code { |
| | | margin: 0 3px; |
| | | padding: 0 5px; |
| | | background: #eee; |
| | | border-radius: 3px; |
| | | } |
| | | |
| | | .markdown pre { |
| | | border-radius: 6px; |
| | | background: #f7f7f7; |
| | | padding: 20px; |
| | | } |
| | | |
| | | .markdown pre code { |
| | | border: none; |
| | | background: #f7f7f7; |
| | | margin: 0; |
| | | } |
| | | |
| | | .markdown strong, |
| | | .markdown b { |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .markdown > table { |
| | | border-collapse: collapse; |
| | | border-spacing: 0px; |
| | | empty-cells: show; |
| | | border: 1px solid #e9e9e9; |
| | | width: 95%; |
| | | margin-bottom: 24px; |
| | | } |
| | | |
| | | .markdown > table th { |
| | | white-space: nowrap; |
| | | color: #333; |
| | | font-weight: 600; |
| | | |
| | | } |
| | | |
| | | .markdown > table th, |
| | | .markdown > table td { |
| | | border: 1px solid #e9e9e9; |
| | | padding: 8px 16px; |
| | | text-align: left; |
| | | } |
| | | |
| | | .markdown > table th { |
| | | background: #F7F7F7; |
| | | } |
| | | |
| | | .markdown blockquote { |
| | | font-size: 90%; |
| | | color: #999; |
| | | border-left: 4px solid #e9e9e9; |
| | | padding-left: 0.8em; |
| | | margin: 1em 0; |
| | | font-style: italic; |
| | | } |
| | | |
| | | .markdown blockquote p { |
| | | margin: 0; |
| | | } |
| | | |
| | | .markdown .anchor { |
| | | opacity: 0; |
| | | transition: opacity 0.3s ease; |
| | | margin-left: 8px; |
| | | } |
| | | |
| | | .markdown .waiting { |
| | | color: #ccc; |
| | | } |
| | | |
| | | .markdown h1:hover .anchor, |
| | | .markdown h2:hover .anchor, |
| | | .markdown h3:hover .anchor, |
| | | .markdown h4:hover .anchor, |
| | | .markdown h5:hover .anchor, |
| | | .markdown h6:hover .anchor { |
| | | opacity: 1; |
| | | display: inline-block; |
| | | } |
| | | |
| | | .markdown > br, |
| | | .markdown > p > br { |
| | | clear: both; |
| | | } |
| | | |
| | | |
| | | .hljs { |
| | | display: block; |
| | | background: white; |
| | | padding: 0.5em; |
| | | color: #333333; |
| | | overflow-x: auto; |
| | | } |
| | | |
| | | .hljs-comment, |
| | | .hljs-meta { |
| | | color: #969896; |
| | | } |
| | | |
| | | .hljs-string, |
| | | .hljs-variable, |
| | | .hljs-template-variable, |
| | | .hljs-strong, |
| | | .hljs-emphasis, |
| | | .hljs-quote { |
| | | color: #df5000; |
| | | } |
| | | |
| | | .hljs-keyword, |
| | | .hljs-selector-tag, |
| | | .hljs-type { |
| | | color: #a71d5d; |
| | | } |
| | | |
| | | .hljs-literal, |
| | | .hljs-symbol, |
| | | .hljs-bullet, |
| | | .hljs-attribute { |
| | | color: #0086b3; |
| | | } |
| | | |
| | | .hljs-section, |
| | | .hljs-name { |
| | | color: #63a35c; |
| | | } |
| | | |
| | | .hljs-tag { |
| | | color: #333333; |
| | | } |
| | | |
| | | .hljs-title, |
| | | .hljs-attr, |
| | | .hljs-selector-id, |
| | | .hljs-selector-class, |
| | | .hljs-selector-attr, |
| | | .hljs-selector-pseudo { |
| | | color: #795da3; |
| | | } |
| | | |
| | | .hljs-addition { |
| | | color: #55a532; |
| | | background-color: #eaffea; |
| | | } |
| | | |
| | | .hljs-deletion { |
| | | color: #bd2c00; |
| | | background-color: #ffecec; |
| | | } |
| | | |
| | | .hljs-link { |
| | | text-decoration: underline; |
| | | } |
| | | |
| | | pre{ |
| | | background: #fff; |
| | | } |
| | | |
| | | |
| | | |
| | | |
| | | |
New file |
| | |
| | | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | | <meta charset="utf-8"/> |
| | | <title>IconFont</title> |
| | | <link rel="stylesheet" href="demo.css"> |
| | | <link rel="stylesheet" href="iconfont.css"> |
| | | </head> |
| | | <body> |
| | | <div class="main markdown"> |
| | | <h1>IconFont 图标</h1> |
| | | <ul class="icon_lists clear"> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-showpassword"></i> |
| | | <div class="name">show-password </div> |
| | | <div class="fontclass">.icon-showpassword</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-user"></i> |
| | | <div class="name">user</div> |
| | | <div class="fontclass">.icon-user</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-users"></i> |
| | | <div class="name">users</div> |
| | | <div class="fontclass">.icon-users</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-3702mima"></i> |
| | | <div class="name">password-b</div> |
| | | <div class="fontclass">.icon-3702mima</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-shangpin"></i> |
| | | <div class="name">06商品</div> |
| | | <div class="fontclass">.icon-shangpin</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-danju"></i> |
| | | <div class="name">25单据</div> |
| | | <div class="fontclass">.icon-danju</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-tijikongjian"></i> |
| | | <div class="name">28体积、空间</div> |
| | | <div class="fontclass">.icon-tijikongjian</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-morentouxiang"></i> |
| | | <div class="name">225默认头像</div> |
| | | <div class="fontclass">.icon-morentouxiang</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-baobiao"></i> |
| | | <div class="name">406报表</div> |
| | | <div class="fontclass">.icon-baobiao</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont icon-lock_fill"></i> |
| | | <div class="name">lock_fill</div> |
| | | <div class="fontclass">.icon-lock_fill</div> |
| | | </li> |
| | | |
| | | </ul> |
| | | |
| | | <h2 id="font-class-">font-class引用</h2> |
| | | <hr> |
| | | |
| | | <p>font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。</p> |
| | | <p>与unicode使用方式相比,具有如下特点:</p> |
| | | <ul> |
| | | <li>兼容性良好,支持ie8+,及所有现代浏览器。</li> |
| | | <li>相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。</li> |
| | | <li>因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。</li> |
| | | <li>不过因为本质上还是使用的字体,所以多色图标还是不支持的。</li> |
| | | </ul> |
| | | <p>使用步骤如下:</p> |
| | | <h3 id="-fontclass-">第一步:引入项目下面生成的fontclass代码:</h3> |
| | | |
| | | |
| | | <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre> |
| | | <h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3> |
| | | <pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre> |
| | | <blockquote> |
| | | <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
| | | </blockquote> |
| | | </div> |
| | | </body> |
| | | </html> |
New file |
| | |
| | | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | | <meta charset="utf-8"/> |
| | | <title>IconFont</title> |
| | | <link rel="stylesheet" href="demo.css"> |
| | | <script src="iconfont.js"></script> |
| | | |
| | | <style type="text/css"> |
| | | .icon { |
| | | /* 通过设置 font-size 来改变图标大小 */ |
| | | width: 1em; height: 1em; |
| | | /* 图标和文字相邻时,垂直对齐 */ |
| | | vertical-align: -0.15em; |
| | | /* 通过设置 color 来改变 SVG 的颜色/fill */ |
| | | fill: currentColor; |
| | | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
| | | normalize.css 中也包含这行 */ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div class="main markdown"> |
| | | <h1>IconFont 图标</h1> |
| | | <ul class="icon_lists clear"> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-showpassword"></use> |
| | | </svg> |
| | | <div class="name">show-password </div> |
| | | <div class="fontclass">#icon-showpassword</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-user"></use> |
| | | </svg> |
| | | <div class="name">user</div> |
| | | <div class="fontclass">#icon-user</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-users"></use> |
| | | </svg> |
| | | <div class="name">users</div> |
| | | <div class="fontclass">#icon-users</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-3702mima"></use> |
| | | </svg> |
| | | <div class="name">password-b</div> |
| | | <div class="fontclass">#icon-3702mima</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-shangpin"></use> |
| | | </svg> |
| | | <div class="name">06商品</div> |
| | | <div class="fontclass">#icon-shangpin</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-danju"></use> |
| | | </svg> |
| | | <div class="name">25单据</div> |
| | | <div class="fontclass">#icon-danju</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-tijikongjian"></use> |
| | | </svg> |
| | | <div class="name">28体积、空间</div> |
| | | <div class="fontclass">#icon-tijikongjian</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-morentouxiang"></use> |
| | | </svg> |
| | | <div class="name">225默认头像</div> |
| | | <div class="fontclass">#icon-morentouxiang</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-baobiao"></use> |
| | | </svg> |
| | | <div class="name">406报表</div> |
| | | <div class="fontclass">#icon-baobiao</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <svg class="icon" aria-hidden="true"> |
| | | <use xlink:href="#icon-lock_fill"></use> |
| | | </svg> |
| | | <div class="name">lock_fill</div> |
| | | <div class="fontclass">#icon-lock_fill</div> |
| | | </li> |
| | | |
| | | </ul> |
| | | |
| | | |
| | | <h2 id="symbol-">symbol引用</h2> |
| | | <hr> |
| | | |
| | | <p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
| | | 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:</p> |
| | | <ul> |
| | | <li>支持多色图标了,不再受单色限制。</li> |
| | | <li>通过一些技巧,支持像字体那样,通过<code>font-size</code>,<code>color</code>来调整样式。</li> |
| | | <li>兼容性较差,支持 ie9+,及现代浏览器。</li> |
| | | <li>浏览器渲染svg的性能一般,还不如png。</li> |
| | | </ul> |
| | | <p>使用步骤如下:</p> |
| | | <h3 id="-symbol-">第一步:引入项目下面生成的symbol代码:</h3> |
| | | <pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre> |
| | | <h3 id="-css-">第二步:加入通用css代码(引入一次就行):</h3> |
| | | <pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>> |
| | | .icon { |
| | | width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em; |
| | | vertical-align: <span class="hljs-number">-0.15</span>em; |
| | | fill: currentColor; |
| | | overflow: hidden; |
| | | } |
| | | <<span class="hljs-regexp">/style></span></code></pre> |
| | | <h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3> |
| | | <pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag"> |
| | | <<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span> |
| | | </span><<span class="hljs-regexp">/svg> |
| | | </span></code></pre> |
| | | </div> |
| | | </body> |
| | | </html> |
New file |
| | |
| | | |
| | | <!DOCTYPE html> |
| | | <html> |
| | | <head> |
| | | <meta charset="utf-8"/> |
| | | <title>IconFont</title> |
| | | <link rel="stylesheet" href="demo.css"> |
| | | |
| | | <style type="text/css"> |
| | | |
| | | @font-face {font-family: "iconfont"; |
| | | src: url('iconfont.eot'); /* IE9*/ |
| | | src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
| | | url('iconfont.woff') format('woff'), /* chrome, firefox */ |
| | | url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
| | | url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */ |
| | | } |
| | | |
| | | .iconfont { |
| | | font-family:"iconfont" !important; |
| | | font-size:16px; |
| | | font-style:normal; |
| | | -webkit-font-smoothing: antialiased; |
| | | -webkit-text-stroke-width: 0.2px; |
| | | -moz-osx-font-smoothing: grayscale; |
| | | } |
| | | |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <div class="main markdown"> |
| | | <h1>IconFont 图标</h1> |
| | | <ul class="icon_lists clear"> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">show-password </div> |
| | | <div class="code">&#xea3f;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">user</div> |
| | | <div class="code">&#xe89a;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">users</div> |
| | | <div class="code">&#xe8b5;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">password-b</div> |
| | | <div class="code">&#xe66c;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">06商品</div> |
| | | <div class="code">&#xe888;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">25单据</div> |
| | | <div class="code">&#xe89b;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">28体积、空间</div> |
| | | <div class="code">&#xe89f;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">225默认头像</div> |
| | | <div class="code">&#xe8c9;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">406报表</div> |
| | | <div class="code">&#xe902;</div> |
| | | </li> |
| | | |
| | | <li> |
| | | <i class="icon iconfont"></i> |
| | | <div class="name">lock_fill</div> |
| | | <div class="code">&#xe709;</div> |
| | | </li> |
| | | |
| | | </ul> |
| | | <h2 id="unicode-">unicode引用</h2> |
| | | <hr> |
| | | |
| | | <p>unicode是字体在网页端最原始的应用方式,特点是:</p> |
| | | <ul> |
| | | <li>兼容性最好,支持ie6+,及所有现代浏览器。</li> |
| | | <li>支持按字体的方式去动态调整图标大小,颜色等等。</li> |
| | | <li>但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。</li> |
| | | </ul> |
| | | <blockquote> |
| | | <p>注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式</p> |
| | | </blockquote> |
| | | <p>unicode使用步骤如下:</p> |
| | | <h3 id="-font-face">第一步:拷贝项目下面生成的font-face</h3> |
| | | <pre><code class="lang-js hljs javascript">@font-face { |
| | | font-family: <span class="hljs-string">'iconfont'</span>; |
| | | src: url(<span class="hljs-string">'iconfont.eot'</span>); |
| | | src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>), |
| | | url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>), |
| | | url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>), |
| | | url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>); |
| | | } |
| | | </code></pre> |
| | | <h3 id="-iconfont-">第二步:定义使用iconfont的样式</h3> |
| | | <pre><code class="lang-js hljs javascript">.iconfont{ |
| | | font-family:<span class="hljs-string">"iconfont"</span> !important; |
| | | font-size:<span class="hljs-number">16</span>px;font-style:normal; |
| | | -webkit-font-smoothing: antialiased; |
| | | -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px; |
| | | -moz-osx-font-smoothing: grayscale; |
| | | } |
| | | </code></pre> |
| | | <h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3> |
| | | <pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre> |
| | | |
| | | <blockquote> |
| | | <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。</p> |
| | | </blockquote> |
| | | </div> |
| | | |
| | | |
| | | </body> |
| | | </html> |
New file |
| | |
| | | |
| | | @font-face {font-family: "iconfont"; |
| | | src: url('iconfont.eot?t=1523541245904'); /* IE9*/ |
| | | src: url('iconfont.eot?t=1523541245904#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
| | | url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), |
| | | url('iconfont.ttf?t=1523541245904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ |
| | | url('iconfont.svg?t=1523541245904#iconfont') format('svg'); /* iOS 4.1- */ |
| | | } |
| | | |
| | | .iconfont { |
| | | font-family:"iconfont" !important; |
| | | font-size:16px; |
| | | font-style:normal; |
| | | -webkit-font-smoothing: antialiased; |
| | | -moz-osx-font-smoothing: grayscale; |
| | | } |
| | | |
| | | .icon-showpassword:before { content: "\ea3f"; } |
| | | |
| | | .icon-user:before { content: "\e89a"; } |
| | | |
| | | .icon-users:before { content: "\e8b5"; } |
| | | |
| | | .icon-3702mima:before { content: "\e66c"; } |
| | | |
| | | .icon-shangpin:before { content: "\e888"; } |
| | | |
| | | .icon-danju:before { content: "\e89b"; } |
| | | |
| | | .icon-tijikongjian:before { content: "\e89f"; } |
| | | |
| | | .icon-morentouxiang:before { content: "\e8c9"; } |
| | | |
| | | .icon-baobiao:before { content: "\e902"; } |
| | | |
| | | .icon-lock_fill:before { content: "\e709"; } |
| | | |
New file |
| | |
| | | (function(window){var svgSprite='<svg><symbol id="icon-showpassword" viewBox="0 0 1024 1024"><path d="M1024 512c0 96-211.2 307.2-512 307.2-294.4 0-512-204.8-512-307.2s217.6-307.2 512-307.2c300.8 0 512 204.8 512 307.2l0 0zM512 262.4c-134.4 0-243.2 108.8-243.2 249.6s108.8 249.6 249.6 249.6c134.4 0 249.6-115.2 249.6-249.6-6.4-140.8-121.6-249.6-256-249.6l0 0zM512 352c-89.6 0-160 70.4-160 160s70.4 160 160 160c89.6 0 160-70.4 160-160s-70.4-160-160-160l0 0z" ></path></symbol><symbol id="icon-user" viewBox="0 0 1024 1024"><path d="M622.816 702.72c-22.112-3.52-22.624-64.32-22.624-64.32s64.96-64.32 79.136-150.816c38.08 0 61.632-91.936 23.52-124.288C704.448 329.28 751.808 96 512 96c-239.808 0-192.448 233.28-190.88 267.328-38.08 32.352-14.56 124.288 23.52 124.288 14.144 86.496 79.136 150.816 79.136 150.816s-0.512 60.8-22.624 64.32C329.952 714.08 64 831.36 64 960l448 0 448 0C960 831.36 694.048 714.08 622.816 702.72z" ></path></symbol><symbol id="icon-users" viewBox="0 0 1024 1024"><path d="M735.008 805.376c-18.944-2.976-19.392-54.656-19.392-54.656s55.68-54.656 67.808-128.16c32.64 0 52.8-78.144 20.16-105.632 1.376-28.928 41.984-227.168-163.584-227.168-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C483.968 815.008 256 914.688 256 1024l384 0 384 0C1024 914.688 796.032 815.008 735.008 805.376zM344.064 822.816c44.096-27.136 97.632-52.32 141.536-67.424-15.744-22.432-33.28-52.928-44.32-89.056-15.392-12.576-27.936-30.528-36-52.608-8.064-22.112-11.136-46.848-8.608-69.696 1.792-16.384 6.464-31.68 13.664-45.088-4.352-46.592-7.424-138.048 52.448-204.736 23.2-25.856 52.544-44.448 87.712-55.68C544.192 173.76 511.296 97.76 384 97.76c-205.568 0-164.96 198.24-163.584 227.168-32.64 27.488-12.48 105.632 20.16 105.632 12.128 73.504 67.84 128.16 67.84 128.16s-0.416 51.68-19.392 54.656C227.968 623.008 0 722.688 0 832l329.6 0C334.304 828.928 339.104 825.856 344.064 822.816z" ></path></symbol><symbol id="icon-3702mima" viewBox="0 0 1024 1024"><path d="M893.532041 881.355209l-0.284479-392.855436c-1.805112-41.266869-35.472909-74.250074-77.136821-74.419943l-50.869574 0.029676 0-35.523051 0.191358 0 0.170892-81.20344c0-2.183735-0.285502-4.273327-0.647753-6.363941-2.829442-123.525338-101.722776-223.293599-224.985124-227.214908l0-1.137916C414.498874 64.128553 313.084113 164.882258 310.218856 289.995767c-0.361227 2.090615-0.64673 4.180206-0.64673 6.363941l0.170892 81.20344 0.191358 0 0 36.477796-0.094144 0 0 0.323365-42.272779 0.019443c-2.596128 0.115634-5.158487 0.358157-7.682983 0.720408l-0.819668 0c-41.663912 0.169869-75.331709 33.152051-77.136821 74.419943l-0.284479 392.855436c0.209778 42.786479 34.921347 77.441766 77.763085 77.441766l38.911218 0 0 0.037862 466.923362 0.265036 0-0.302899 38.910195 0c4.331655 0 8.575306-0.370437 12.71458-1.050935C859.199095 958.181969 893.32431 923.774321 893.532041 881.355209zM387.811048 296.094672c0.514723-82.71998 65.588811-150.08832 147.393955-154.210197l0 0.847298c84.028788 1.687432 151.633512 70.065775 152.158469 154.386206l0.454348 0c0 0.095167-0.036839 0.170892-0.036839 0.265036l-0.26299 116.770494-299.860439 0.172939-0.265036-117.966739c0-0.094144-0.037862-0.169869-0.037862-0.265036L387.811048 296.094672z" ></path></symbol><symbol id="icon-shangpin" viewBox="0 0 1024 1024"><path d="M832 256H640V160.8c0-17.6-14.4-32.8-32.8-32.8H416c-17.6 0-32.8 14.4-32.8 32.8V256H192l-64 576c0 35.2 28.8 64 64 64h640c35.2 0 64-28.8 64-64l-64-576z m-384-64h128v64H448v-64z m-0.8 192H384v-63.2h63.2V384zM640 384h-63.2v-63.2H640V384z" ></path></symbol><symbol id="icon-danju" viewBox="0 0 1024 1024"><path d="M800 192H640c0-70.4-57.6-128-128-128s-128 57.6-128 128H224c-17.6 0-32 14.4-32 32v704c0 17.6 14.4 32 32 32h576c17.6 0 32-14.4 32-32V224c0-17.6-14.4-32-32-32z m-288-32c17.6 0 32 14.4 32 32s-14.4 32-32 32-32-14.4-32-32 14.4-32 32-32z m64 608H320v-64h256v64z m128-128H320v-64h384v64z m0-128H320v-64h384v64z" ></path></symbol><symbol id="icon-tijikongjian" viewBox="0 0 1024 1024"><path d="M496 895.2L138.4 771.2c-6.4-2.4-10.4-8-10.4-15.2V287.2l368 112v496z m32 0l357.6-124c6.4-2.4 10.4-8 10.4-15.2V287.2l-368 112v496z m-400-640l384 112 384-112-379.2-125.6c-3.2-0.8-7.2-0.8-10.4 0L128 255.2z" ></path></symbol><symbol id="icon-morentouxiang" viewBox="0 0 1024 1024"><path d="M512 64C264.8 64 64 264.8 64 512s200.8 448 448 448 448-200.8 448-448S759.2 64 512 64zM384.8 376c4-64 56-115.2 120-119.2 74.4-4 135.2 55.2 135.2 128 0 70.4-57.6 128-128 128-73.6 0-132-62.4-127.2-136.8zM768 746.4c0 12-9.6 21.6-21.6 21.6H278.4c-12 0-21.6-9.6-21.6-21.6v-64c0-84.8 170.4-128 255.2-128 84.8 0 255.2 42.4 255.2 128l0.8 64z" ></path></symbol><symbol id="icon-baobiao" viewBox="0 0 1024 1024"><path d="M960 672V160c0-17.6-14.4-32-32-32H544V64h-64v64H96c-17.6 0-32 14.4-32 32v512c0 17.6 14.4 32 32 32h384v50.4l-152.8 89.6 32 56 144-84h19.2l144 84 32-56L544 754.4V704h384c17.6 0 32-14.4 32-32zM790.4 256l41.6 48.8-316.8 270.4L352 437.6 233.6 536.8 192.8 488l160-133.6 163.2 137.6L790.4 256z" ></path></symbol><symbol id="icon-lock_fill" viewBox="0 0 1024 1024"><path d="M394.304 316.608A124.672 124.672 0 0 1 518.72 192a124.704 124.704 0 0 1 124.48 124.608V416h-248.896V316.608zM544 704a32 32 0 0 1-64 0v-128a32 32 0 0 1 64 0v128z m256.256-288H707.2V316.608A188.736 188.736 0 0 0 518.72 128c-103.904 0-188.416 84.608-188.416 188.608V416h-106.56A64 64 0 0 0 160 480.096v319.84A64 64 0 0 0 223.744 864h576.512A64 64 0 0 0 864 799.936v-319.84A64 64 0 0 0 800.256 416z" ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) |
New file |
| | |
| | | <?xml version="1.0" standalone="no"?> |
| | | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > |
| | | <!-- |
| | | 2013-9-30: Created. |
| | | --> |
| | | <svg> |
| | | <metadata> |
| | | Created by iconfont |
| | | </metadata> |
| | | <defs> |
| | | |
| | | <font id="iconfont" horiz-adv-x="1024" > |
| | | <font-face |
| | | font-family="iconfont" |
| | | font-weight="500" |
| | | font-stretch="normal" |
| | | units-per-em="1024" |
| | | ascent="896" |
| | | descent="-128" |
| | | /> |
| | | <missing-glyph /> |
| | | |
| | | <glyph glyph-name="x" unicode="x" horiz-adv-x="1001" |
| | | d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5 |
| | | t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5 |
| | | t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" /> |
| | | |
| | | |
| | | |
| | | <glyph glyph-name="showpassword" unicode="" d="M1024 300c0-96-211.2-307.2-512-307.2-294.4 0-512 204.8-512 307.2s217.6 307.2 512 307.2c300.8 0 512-204.8 512-307.2l0 0zM512 549.6c-134.4 0-243.2-108.8-243.2-249.6s108.8-249.6 249.6-249.6c134.4 0 249.6 115.2 249.6 249.6-6.4 140.8-121.6 249.6-256 249.6l0 0zM512 460c-89.6 0-160-70.4-160-160s70.4-160 160-160c89.6 0 160 70.4 160 160s-70.4 160-160 160l0 0z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="user" unicode="" d="M622.816 193.28c-22.112 3.52-22.624 64.32-22.624 64.32s64.96 64.32 79.136 150.816c38.08 0 61.632 91.936 23.52 124.288C704.448 566.72 751.808 800 512 800c-239.808 0-192.448-233.28-190.88-267.328-38.08-32.352-14.56-124.288 23.52-124.288 14.144-86.496 79.136-150.816 79.136-150.816s-0.512-60.8-22.624-64.32C329.952 181.92 64 64.64 64-64l448 0 448 0C960 64.64 694.048 181.92 622.816 193.28z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="users" unicode="" d="M735.008 90.624c-18.944 2.976-19.392 54.656-19.392 54.656s55.68 54.656 67.808 128.16c32.64 0 52.8 78.144 20.16 105.632 1.376 28.928 41.984 227.168-163.584 227.168-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C483.968 80.992 256-18.688 256-128l384 0 384 0C1024-18.688 796.032 80.992 735.008 90.624zM344.064 73.184c44.096 27.136 97.632 52.32 141.536 67.424-15.744 22.432-33.28 52.928-44.32 89.056-15.392 12.576-27.936 30.528-36 52.608-8.064 22.112-11.136 46.848-8.608 69.696 1.792 16.384 6.464 31.68 13.664 45.088-4.352 46.592-7.424 138.048 52.448 204.736 23.2 25.856 52.544 44.448 87.712 55.68C544.192 722.24 511.296 798.24 384 798.24c-205.568 0-164.96-198.24-163.584-227.168-32.64-27.488-12.48-105.632 20.16-105.632 12.128-73.504 67.84-128.16 67.84-128.16s-0.416-51.68-19.392-54.656C227.968 272.992 0 173.312 0 64l329.6 0C334.304 67.072 339.104 70.144 344.064 73.184z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="3702mima" unicode="" d="M893.532041 14.644791l-0.284479 392.855436c-1.805112 41.266869-35.472909 74.250074-77.136821 74.419943l-50.869574-0.029676 0 35.523051 0.191358 0 0.170892 81.20344c0 2.183735-0.285502 4.273327-0.647753 6.363941-2.829442 123.525338-101.722776 223.293599-224.985124 227.214908l0 1.137916C414.498874 831.871447 313.084113 731.117742 310.218856 606.004233c-0.361227-2.090615-0.64673-4.180206-0.64673-6.363941l0.170892-81.20344 0.191358 0 0-36.477796-0.094144 0 0-0.323365-42.272779-0.019443c-2.596128-0.115634-5.158487-0.358157-7.682983-0.720408l-0.819668 0c-41.663912-0.169869-75.331709-33.152051-77.136821-74.419943l-0.284479-392.855436c0.209778-42.786479 34.921347-77.441766 77.763085-77.441766l38.911218 0 0-0.037862 466.923362-0.265036 0 0.302899 38.910195 0c4.331655 0 8.575306 0.370437 12.71458 1.050935C859.199095-62.181969 893.32431-27.774321 893.532041 14.644791zM387.811048 599.905328c0.514723 82.71998 65.588811 150.08832 147.393955 154.210197l0-0.847298c84.028788-1.687432 151.633512-70.065775 152.158469-154.386206l0.454348 0c0-0.095167-0.036839-0.170892-0.036839-0.265036l-0.26299-116.770494-299.860439-0.172939-0.265036 117.966739c0 0.094144-0.037862 0.169869-0.037862 0.265036L387.811048 599.905328z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="shangpin" unicode="" d="M832 640H640V735.2c0 17.6-14.4 32.8-32.8 32.8H416c-17.6 0-32.8-14.4-32.8-32.8V640H192l-64-576c0-35.2 28.8-64 64-64h640c35.2 0 64 28.8 64 64l-64 576z m-384 64h128v-64H448v64z m-0.8-192H384v63.2h63.2V512zM640 512h-63.2v63.2H640V512z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="danju" unicode="" d="M800 704H640c0 70.4-57.6 128-128 128s-128-57.6-128-128H224c-17.6 0-32-14.4-32-32v-704c0-17.6 14.4-32 32-32h576c17.6 0 32 14.4 32 32V672c0 17.6-14.4 32-32 32z m-288 32c17.6 0 32-14.4 32-32s-14.4-32-32-32-32 14.4-32 32 14.4 32 32 32z m64-608H320v64h256v-64z m128 128H320v64h384v-64z m0 128H320v64h384v-64z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="tijikongjian" unicode="" d="M496 0.8L138.4 124.8c-6.4 2.4-10.4 8-10.4 15.2V608.8l368-112v-496z m32 0l357.6 124c6.4 2.4 10.4 8 10.4 15.2V608.8l-368-112v-496z m-400 640l384-112 384 112-379.2 125.6c-3.2 0.8-7.2 0.8-10.4 0L128 640.8z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="morentouxiang" unicode="" d="M512 832C264.8 832 64 631.2 64 384s200.8-448 448-448 448 200.8 448 448S759.2 832 512 832zM384.8 520c4 64 56 115.2 120 119.2 74.4 4 135.2-55.2 135.2-128 0-70.4-57.6-128-128-128-73.6 0-132 62.4-127.2 136.8zM768 149.6c0-12-9.6-21.6-21.6-21.6H278.4c-12 0-21.6 9.6-21.6 21.6v64c0 84.8 170.4 128 255.2 128 84.8 0 255.2-42.4 255.2-128l0.8-64z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="baobiao" unicode="" d="M960 224V736c0 17.6-14.4 32-32 32H544V832h-64v-64H96c-17.6 0-32-14.4-32-32v-512c0-17.6 14.4-32 32-32h384v-50.4l-152.8-89.6 32-56 144 84h19.2l144-84 32 56L544 141.6V192h384c17.6 0 32 14.4 32 32zM790.4 640l41.6-48.8-316.8-270.4L352 458.4 233.6 359.2 192.8 408l160 133.6 163.2-137.6L790.4 640z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | <glyph glyph-name="lock_fill" unicode="" d="M394.304 579.392A124.672 124.672 0 0 0 518.72 704a124.704 124.704 0 0 0 124.48-124.608V480h-248.896V579.392zM544 192a32 32 0 0 0-64 0v128a32 32 0 0 0 64 0v-128z m256.256 288H707.2V579.392A188.736 188.736 0 0 1 518.72 768c-103.904 0-188.416-84.608-188.416-188.608V480h-106.56A64 64 0 0 1 160 415.904v-319.84A64 64 0 0 1 223.744 32h576.512A64 64 0 0 1 864 96.064v319.84A64 64 0 0 1 800.256 480z" horiz-adv-x="1024" /> |
| | | |
| | | |
| | | |
| | | |
| | | </font> |
| | | </defs></svg> |
New file |
| | |
| | | import Vue from 'vue' |
| | | import App from './App.vue' |
| | | import router from './router' |
| | | import store from './store' |
| | | // 导入element配置 |
| | | import './plugins/element.js' |
| | | // 导入全局样式表 |
| | | import './assets/css/global.css' |
| | | // 导入字体图标 |
| | | import './assets/fonts/iconfont.css' |
| | | // 导入全局filter |
| | | import * as filters from './plugins/filters' |
| | | |
| | | Object.keys(filters).forEach(key => { |
| | | Vue.filter(key, filters[key]) |
| | | }) |
| | | |
| | | |
| | | Vue.config.productionTip = false |
| | | |
| | | new Vue({ |
| | | router, |
| | | store, |
| | | render: h => h(App) |
| | | }).$mount('#app') |
New file |
| | |
| | | import Vue from 'vue' |
| | | import { |
| | | Aside, |
| | | Button, |
| | | Card, |
| | | Col, |
| | | Container, Dialog, Form, FormItem, |
| | | Header, |
| | | Icon, Input, |
| | | Main, |
| | | Menu, |
| | | MenuItem, |
| | | Message, Option, Pagination, |
| | | Row, Select, |
| | | Submenu, Table, TableColumn |
| | | } from 'element-ui' |
| | | |
| | | Vue.use(Button).use(Container).use(Header).use(Aside).use(Menu).use(Submenu).use(MenuItem).use(Main).use(Icon).use(Card) |
| | | .use(Col).use(Row).use(Card).use(Table).use(TableColumn).use(Form).use(FormItem).use(Input).use(Select).use(Option) |
| | | .use(Pagination).use(Dialog) |
| | | |
| | | Vue.prototype.$message = Message |
New file |
| | |
| | | import {getImgUrl} from "@/api/common"; |
| | | |
| | | export function fileNameToPath(val) { |
| | | if (val === '' || val === null) return './logo.png'; |
| | | getImgUrl(val).then(res => { |
| | | return res |
| | | }) |
| | | } |
New file |
| | |
| | | import axios from "axios"; |
| | | import {Message} from 'element-ui'; |
| | | |
| | | const service = axios.create({ |
| | | baseURL: "/api", |
| | | timeout: 5000 |
| | | }); |
| | | |
| | | service.interceptors.request.use(config => { |
| | | // config.params = { 'token': 'h4loV2PkthqTMtFN' } |
| | | config.headers = {'token': 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE3NDQ1OTY5OTEsInVzZXJuYW1lIjoiYWRtaW4ifQ.5ZrTdiKMvK_lJJXz2LPeZeXNGjYeCOzlaq7T_YRtC0g'} |
| | | return config; |
| | | }) |
| | | |
| | | service.interceptors.response.use( |
| | | response => { |
| | | if (response.data.code === 200) { |
| | | return response.data.data; |
| | | } else { |
| | | Message({ |
| | | message: response.data.code + " " + response.data.msg, |
| | | type: 'error', |
| | | }) |
| | | } |
| | | } |
| | | ); |
| | | |
| | | export default service |
New file |
| | |
| | | import Vue from 'vue' |
| | | import VueRouter from 'vue-router' |
| | | |
| | | Vue.use(VueRouter) |
| | | |
| | | const routes = [ |
| | | { |
| | | path: '/', |
| | | redirect: '/home' |
| | | }, |
| | | { |
| | | path: '/login', |
| | | name: 'login', |
| | | component: () => import('../views/Login.vue') |
| | | }, |
| | | { |
| | | path: '/home', |
| | | name: 'home', |
| | | redirect: '/workbench', |
| | | component: () => import('../views/Home.vue'), |
| | | children: [ |
| | | { |
| | | path: '/workbench', |
| | | name: 'workbench', |
| | | component: () => import('../views/workbench/Workbench.vue') |
| | | }, |
| | | { |
| | | path: '/people', |
| | | name: 'people', |
| | | component: () => import('../views/manager/People.vue') |
| | | }, |
| | | { |
| | | path: '/user', |
| | | name: 'user', |
| | | component: () => import('../views/manager/User.vue') |
| | | }, |
| | | { |
| | | path: '/entry', |
| | | name: 'entry', |
| | | component: () => import('../views/cause/Entry.vue') |
| | | }, |
| | | { |
| | | path: '/group', |
| | | name: 'group', |
| | | component: () => import('../views/cause/Group.vue') |
| | | }, |
| | | { |
| | | path: '/search', |
| | | name: 'search', |
| | | component: () => import('../views/cause/Search.vue') |
| | | }, |
| | | { |
| | | path: '/audit', |
| | | name: 'audit', |
| | | component: () => import('../views/common/Audit.vue') |
| | | }, |
| | | { |
| | | path: '/publicity', |
| | | name: 'publicity', |
| | | component: () => import('../views/common/Publicity.vue') |
| | | }, |
| | | { |
| | | path: '/question', |
| | | name: 'question', |
| | | component: () => import('../views/common/Question.vue') |
| | | }, |
| | | { |
| | | path: '/sensitive', |
| | | name: 'sensitive', |
| | | component: () => import('../views/common/Sensitive.vue') |
| | | }, |
| | | ] |
| | | } |
| | | ] |
| | | |
| | | const router = new VueRouter({ |
| | | routes |
| | | }) |
| | | |
| | | export default router |
New file |
| | |
| | | import Vue from 'vue' |
| | | import Vuex from 'vuex' |
| | | |
| | | Vue.use(Vuex) |
| | | |
| | | export default new Vuex.Store({ |
| | | state: { |
| | | }, |
| | | getters: { |
| | | }, |
| | | mutations: { |
| | | }, |
| | | actions: { |
| | | }, |
| | | modules: { |
| | | } |
| | | }) |
New file |
| | |
| | | <template> |
| | | <el-container class="home-container"> |
| | | <!-- 头部区域 --> |
| | | <el-header> |
| | | <div> |
| | | <img src="../assets/logo.png" alt=""> |
| | | <span>青羊经侦后台</span> |
| | | </div> |
| | | <el-button type="info" @click="logout">退出</el-button> |
| | | </el-header> |
| | | <!-- 页面主题区域 --> |
| | | <el-container> |
| | | <!-- 侧边栏 --> |
| | | <el-aside :width="isCollapse?'64px':'200px'"> |
| | | <div class="toggle-button" |
| | | @click="toggleCollapse">||| |
| | | </div> |
| | | <!-- 侧边栏菜单区域 --> |
| | | <el-menu text-color="#000" |
| | | active-text-color="#000" |
| | | :collapse="isCollapse" |
| | | :collapse-transition="false" |
| | | router |
| | | unique-opene> |
| | | <el-submenu index="/workbench"> |
| | | <template slot="title"> |
| | | <!-- 图标 --> |
| | | <i class="iconfont icon-user"></i> |
| | | <!-- 文本 --> |
| | | <span>工作台</span> |
| | | </template> |
| | | <el-menu-item index="/"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>工作台</span> |
| | | </template> |
| | | </el-menu-item> |
| | | </el-submenu> |
| | | <el-submenu index="/cause"> |
| | | <template slot="title"> |
| | | <i class="iconfont icon-user"></i> |
| | | <span>案件区</span> |
| | | </template> |
| | | <el-menu-item index="/entry"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>案件录入</span> |
| | | </template> |
| | | </el-menu-item> |
| | | <el-menu-item index="/group"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>群组交流</span> |
| | | </template> |
| | | </el-menu-item> |
| | | <el-menu-item index="/search"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>群组搜索</span> |
| | | </template> |
| | | </el-menu-item> |
| | | </el-submenu> |
| | | <el-submenu index="/common"> |
| | | <template slot="title"> |
| | | <i class="iconfont icon-user"></i> |
| | | <span>公共区</span> |
| | | </template> |
| | | <el-menu-item index="/audit"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>报案人审核</span> |
| | | </template> |
| | | </el-menu-item> |
| | | <el-menu-item index="/publicity"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>公共宣传</span> |
| | | </template> |
| | | </el-menu-item> |
| | | <el-menu-item index="/question"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>常见问题</span> |
| | | </template> |
| | | </el-menu-item> |
| | | <el-menu-item index="/sensitive"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>敏感词</span> |
| | | </template> |
| | | </el-menu-item> |
| | | </el-submenu> |
| | | <el-submenu index="/manager"> |
| | | <template slot="title"> |
| | | <i class="iconfont icon-user"></i> |
| | | <span>管理区</span> |
| | | </template> |
| | | <el-menu-item index="/user"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>用户管理</span> |
| | | </template> |
| | | </el-menu-item> |
| | | <el-menu-item index="/people"> |
| | | <template slot="title"> |
| | | <i class="el-icon-menu"></i> |
| | | <span>人员管理</span> |
| | | </template> |
| | | </el-menu-item> |
| | | </el-submenu> |
| | | </el-menu> |
| | | </el-aside> |
| | | <!-- 右侧内容主题 --> |
| | | <el-main> |
| | | <router-view></router-view> |
| | | </el-main> |
| | | </el-container> |
| | | </el-container> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | isCollapse: false, |
| | | } |
| | | }, |
| | | created() { |
| | | }, |
| | | methods: { |
| | | logout() { |
| | | window.sessionStorage.clear() |
| | | this.$router.push('/login') |
| | | }, |
| | | toggleCollapse() { |
| | | this.isCollapse = !this.isCollapse |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .home-container { |
| | | height: 100%; |
| | | } |
| | | |
| | | .el-header { |
| | | background-color: #fff; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | padding-left: 0; |
| | | align-items: center; |
| | | color: #000; |
| | | font-size: 20px; |
| | | > div { |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | width: 50px; |
| | | height: 50px; |
| | | margin-left: 10px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .el-aside { |
| | | background-color: #fff; |
| | | .el-menu { |
| | | border-right: none; |
| | | } |
| | | } |
| | | |
| | | .el-main { |
| | | background-color: #eaedf1; |
| | | } |
| | | |
| | | .iconfont { |
| | | margin-right: 10px; |
| | | } |
| | | |
| | | .toggle-button { |
| | | background-color: #fff; |
| | | font-size: 10px; |
| | | line-height: 24px; |
| | | color: #6495EDFF; |
| | | text-align: center; |
| | | letter-spacing: 0.2em; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 登录组件 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "Login" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div style="height: 100%"> |
| | | <el-card style="height: 100%"> |
| | | <template slot="header"> |
| | | <el-form :inline="true" :model="queryInfo" class="demo-form-inline"> |
| | | <el-form-item label="案件:"> |
| | | <el-input placeholder="请输入案件编号或名称" v-model="queryInfo.title"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="案件状态:"> |
| | | <el-select v-model="queryInfo.status" placeholder="请选择"> |
| | | <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="search">查询</el-button> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="addDialogOpen">添加</el-button> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="exportExcel">导入</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | | <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.current" |
| | | :page-size="queryInfo.size" layout="prev, pager, next" |
| | | :total="total"></el-pagination> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "Entry", |
| | | data() { |
| | | return { |
| | | queryInfo: { |
| | | title: '', |
| | | status: '5', |
| | | current: 1, |
| | | size: 10 |
| | | }, |
| | | options: [ |
| | | { |
| | | value: '5', |
| | | label: '全部' |
| | | }, |
| | | { |
| | | value: '0', |
| | | label: '未审核' |
| | | }, |
| | | { |
| | | value: '1', |
| | | label: '不予立案' |
| | | }, |
| | | { |
| | | value: '2', |
| | | label: '受理中' |
| | | }, |
| | | { |
| | | value: '3', |
| | | label: '已结案' |
| | | }, |
| | | { |
| | | value: '4', |
| | | label: '已结案' |
| | | } |
| | | ], |
| | | total: 0, |
| | | } |
| | | }, |
| | | methods: { |
| | | getList() { |
| | | this.$http.get('/api/entry/list', { |
| | | params: this.queryInfo |
| | | }).then(res => { |
| | | this.total = res.data.total |
| | | this.list = res.data.list |
| | | }) |
| | | }, |
| | | search() { |
| | | }, |
| | | addDialogOpen() { |
| | | }, |
| | | exportExcel() { |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.queryInfo.current = val; |
| | | this.getList(); |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .el-form-item { |
| | | margin-bottom: 0; |
| | | } |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 群组交流 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "Group" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 群组搜索 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "Search" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div style="height: 100%"> |
| | | <el-card style="height: 100%"> |
| | | <template slot="header"> |
| | | <el-form :inline="true" :model="queryInfo" class="demo-form-inline"> |
| | | <el-form-item label="报案人:"> |
| | | <el-input placeholder="请输入姓名或身份证" v-model="queryInfo.people"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="手机号码:"> |
| | | <el-input placeholder="请输入" v-model="queryInfo.phoneNumber"></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="是否已进群:"> |
| | | <el-select v-model="queryInfo.isInGroup" placeholder="请选择"> |
| | | <el-option v-for="item in optionsGroup" :key="item.value" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="报案材料:"> |
| | | <el-select v-model="queryInfo.HavaMaterial" placeholder="请选择"> |
| | | <el-option v-for="item in optionsMate" :key="item.value" :label="item.label" :value="item.value"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="search">查询</el-button> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="addAduitDialogOpen">添加</el-button> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="exportExcel">导入</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </template> |
| | | <el-table :data="list"> |
| | | <el-table-column prop="id" label="序号" width="60"></el-table-column> |
| | | <el-table-column width="80" prop="pic" label="头像"> |
| | | <template slot-scope="scope"> |
| | | <img :src="scope.row.pic | fileNameToPath" style="width: 40px;height: 40px; border-radius: 50%;"> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column width="80" prop="reporterName" label="报案人"></el-table-column> |
| | | <el-table-column width="120" prop="mobile" label="手机号码"></el-table-column> |
| | | <el-table-column width="180" prop="idcard" label="证件号码"></el-table-column> |
| | | <el-table-column width="100" prop="isCommission" label="是否审核"> |
| | | <template slot-scope="scope"> |
| | | <span v-if="scope.row.isCommission == 1">是</span> |
| | | <span v-else>否</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column width="100" prop="amountInvolved" label="涉案金额"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ scope.row.amountInvolved === null ? 0 : scope.row.amountInvolved }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column width="100" prop="reportMethod" label="报案方式"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ scope.row.reportMethod === null ? "现场报案" : scope.row.reportMethod }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column width="200" prop="reportTime" label="报案时间"> |
| | | <template slot-scope="scope"> |
| | | <span>{{ scope.row.reportTime === null ? "2022-07-12 10:32:56" : scope.row.reportTime }}</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" size="small" @click="details(scope.row.id)" style="font-size:14px">详情</el-button> |
| | | <el-button type="text" size="small" @click="audit(scope.row.id)" style="font-size:14px;color: red">审核 |
| | | </el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <el-pagination @current-change="handleCurrentChange" :current-page="queryInfo.current" |
| | | :page-size="queryInfo.size" layout="prev, pager, next" |
| | | :total="total"></el-pagination> |
| | | </el-card> |
| | | <!--添加人员弹窗--> |
| | | <el-dialog |
| | | title="提示" |
| | | :visible.sync="addAduitDialogVisible" |
| | | width="30%" |
| | | :before-close="addAduitClose"> |
| | | <span>这是一段信息</span> |
| | | <span slot="footer" class="dialog-footer"> |
| | | <el-button @click="addAduitDialogVisible = false">取 消</el-button> |
| | | <el-button type="primary" @click="addAduitDialogVisible = false">确 定</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import {getAuditList} from '@/api/common' |
| | | |
| | | export default { |
| | | name: "Audit", |
| | | data() { |
| | | return { |
| | | queryInfo: { |
| | | people: '', |
| | | phoneNumber: '', |
| | | isInGroup: '5', |
| | | current: 1, |
| | | HavaMaterial: '5', |
| | | size: 10 |
| | | }, |
| | | optionsGroup: [ |
| | | { |
| | | value: '5', |
| | | label: '全部' |
| | | }, |
| | | { |
| | | value: '0', |
| | | label: '是' |
| | | }, |
| | | { |
| | | value: '1', |
| | | label: '否' |
| | | } |
| | | ], |
| | | optionsMate: [ |
| | | { |
| | | value: '5', |
| | | label: '全部' |
| | | }, |
| | | { |
| | | value: '0', |
| | | label: '已提交' |
| | | }, |
| | | { |
| | | value: '1', |
| | | label: '未提交' |
| | | } |
| | | ], |
| | | total: 0, |
| | | list: [], |
| | | addAduitDialogVisible: false, |
| | | } |
| | | }, |
| | | created() { |
| | | this.getList() |
| | | }, |
| | | methods: { |
| | | addAduitClose() { |
| | | this.addAduitDialogVisible = false |
| | | }, |
| | | getList() { |
| | | let param = {} |
| | | param.people = this.queryInfo.people |
| | | param.phoneNumber = this.queryInfo.phoneNumber |
| | | param.current = this.queryInfo.current |
| | | param.size = this.queryInfo.size |
| | | param.isInGroup = this.queryInfo.isInGroup !== '5' ? this.queryInfo.isInGroup : '' |
| | | param.HavaMaterial = this.queryInfo.HavaMaterial !== '5' ? this.queryInfo.HavaMaterial : '' |
| | | getAuditList(param).then(res => { |
| | | this.total = res.total |
| | | this.list = res.records |
| | | }) |
| | | }, |
| | | search() { |
| | | this.getList() |
| | | }, |
| | | addAduitDialogOpen() { |
| | | this.addAduitDialogVisible = true |
| | | }, |
| | | exportExcel() { |
| | | }, |
| | | handleCurrentChange(val) { |
| | | this.queryInfo.current = val; |
| | | this.getList(); |
| | | }, |
| | | details(id) { |
| | | console.log(id) |
| | | }, |
| | | audit(id) { |
| | | console.log(id) |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .el-form-item { |
| | | margin-bottom: 0 !important; |
| | | } |
| | | |
| | | .demo-form-inline .el-select { |
| | | width: 100px; |
| | | } |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 公共宣传 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "Publicity" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 常见问题 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "Question" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 敏感词 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "Sensitive" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 人员管理 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "People" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div> |
| | | 用户管理 |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | name: "User" |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div class="workbench"> |
| | | <el-card style="height: 100%"> |
| | | <div class="banner"> |
| | | <div class="banner-item" style="background-color: rgb(25, 144, 255)"> |
| | | <span class="banner-item-title">今日待审核人员</span> |
| | | <span class="banner-item-number">{{ pendingNumber }}</span> |
| | | </div> |
| | | <div class="banner-item" style="background-color: rgb(255, 153, 51)"> |
| | | <span class="banner-item-title">今日已审核人员</span> |
| | | <span class="banner-item-number">{{ pendedNumber }}</span> |
| | | </div> |
| | | <div class="banner-item" style="background-color: rgb(48, 194, 91)"> |
| | | <span class="banner-item-title">今日进群人数</span> |
| | | <span class="banner-item-number">{{ nowNumber }}</span> |
| | | </div> |
| | | <div class="banner-item" style="background-color: rgb(250, 204, 20)"> |
| | | <span class="banner-item-title">今日新增案件</span> |
| | | <span class="banner-item-number">{{ nowCause }}</span> |
| | | </div> |
| | | <div class="banner-item" style="background-color: rgb(22, 194, 194)"> |
| | | <span class="banner-item-title">案件总数</span> |
| | | <span class="banner-item-number">{{ causeCount }}</span> |
| | | </div> |
| | | <div class="banner-item" style="background-color: rgb(255, 128, 124)"> |
| | | <span class="banner-item-title">管理人员</span> |
| | | <span class="banner-item-number">{{ managerCount }}</span> |
| | | </div> |
| | | </div> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="12"> |
| | | <el-card class="card-list"> |
| | | <template slot="header"> |
| | | <span>待审核人员</span> |
| | | </template> |
| | | <el-table :data="checkPendingList" style="width: 100%" stripe> |
| | | <el-table-column label="报案人" prop="reporterName" width="80"></el-table-column> |
| | | <el-table-column label="手机号码" prop="mobile"></el-table-column> |
| | | <el-table-column label="身份证号码" prop="idcard" width="200"></el-table-column> |
| | | <el-table-column label="操作"> |
| | | <template slot-scope="scope"> |
| | | <el-button type="text" size="small" @click="handleAudit(scope.row)">审核</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <el-card class="card-list"> |
| | | <template slot="header"> |
| | | <span>群组动态</span> |
| | | </template> |
| | | <el-table :data="groupMessageList" style="width: 100%" stripe :show-header="false"> |
| | | <el-table-column width="80"> |
| | | <template slot-scope="scope"> |
| | | <i class="el-icon-user message-img" :style="imgColorList[scope.$index]"></i> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column> |
| | | <template slot-scope="scope"> |
| | | <div class="message-item"> |
| | | <div class="message-item-title"> |
| | | <span>{{ scope.row.groupName }} 案件</span> |
| | | <span>{{ scope.row.userName }}</span> |
| | | <span>发布了</span> |
| | | <el-button type="text" size="small" @click="toGroup(scope.row.groupId)">消息</el-button> |
| | | </div> |
| | | <div class="message-item-time"> |
| | | <span>{{ scope.row.ctime }}</span> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | </el-card> |
| | | </el-col> |
| | | </el-row> |
| | | </el-card> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { |
| | | checkPendedNumber, |
| | | checkPendingNumber, |
| | | intoGroupNumber, |
| | | newCase, |
| | | allCase, |
| | | allManager, |
| | | checkPendingList, |
| | | groupMessage |
| | | } from '@/api/workbench' |
| | | |
| | | export default { |
| | | name: "Workbench", |
| | | data() { |
| | | return { |
| | | pendedNumber: 0, |
| | | pendingNumber: 0, |
| | | nowNumber: 0, |
| | | nowCause: 0, |
| | | causeCount: 0, |
| | | managerCount: 0, |
| | | checkPendingList: [], |
| | | groupMessageList: [], |
| | | imgColorList: [ |
| | | {"backgroundColor": "rgb(94, 212, 136)"}, |
| | | {"backgroundColor": "rgb(128, 128, 255)"}, |
| | | {"backgroundColor": "rgb(193, 128, 255)"}, |
| | | {"backgroundColor": "rgb(25, 144, 255)"}, |
| | | {"backgroundColor": "rgb(255, 128, 124)"}, |
| | | ] |
| | | } |
| | | }, |
| | | created() { |
| | | this.init() |
| | | }, |
| | | methods: { |
| | | init() { |
| | | checkPendedNumber().then( |
| | | res => this.pendedNumber = res |
| | | ) |
| | | checkPendingNumber().then( |
| | | res => this.pendingNumber = res |
| | | ) |
| | | intoGroupNumber().then( |
| | | res => this.nowNumber = res |
| | | ) |
| | | newCase().then( |
| | | res => this.nowCause = res |
| | | ) |
| | | allCase().then( |
| | | res => this.causeCount = res |
| | | ) |
| | | allManager().then( |
| | | res => this.managerCount = res |
| | | ) |
| | | checkPendingList().then( |
| | | res => this.checkPendingList = res |
| | | ) |
| | | groupMessage().then( |
| | | res => this.groupMessageList = res |
| | | ) |
| | | }, |
| | | handleAudit(row) { |
| | | console.log(row) |
| | | }, |
| | | toGroup(groupId) { |
| | | console.log(groupId) |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .workbench { |
| | | background-color: white; |
| | | height: 100%; |
| | | } |
| | | |
| | | .banner { |
| | | margin: 0; |
| | | width: 100%; |
| | | height: 100px; |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | background-color: #fff; |
| | | |
| | | .banner-item { |
| | | width: 165px; |
| | | height: 68px; |
| | | display: flex; |
| | | justify-content: center; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | |
| | | .banner-item-title { |
| | | font-size: 16px; |
| | | color: #fff; |
| | | } |
| | | |
| | | .banner-item-number { |
| | | font-size: 20px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep(.el-card__body) { |
| | | height: 418px; |
| | | } |
| | | |
| | | .card-list { |
| | | font-size: 16px; |
| | | } |
| | | |
| | | ::v-deep(.el-table thead) { |
| | | color: #000000; |
| | | } |
| | | |
| | | .message-img { |
| | | width: 50px; |
| | | height: 50px; |
| | | background-color: red; |
| | | border-radius: 50%; |
| | | text-align: center; |
| | | line-height: 50px; |
| | | color: white; |
| | | font-size: 40px; |
| | | } |
| | | |
| | | .message-item { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | flex-direction: column; |
| | | |
| | | .message-item-title { |
| | | display: flex; |
| | | align-content: flex-start; |
| | | |
| | | font-size: 14px; |
| | | font-weight: 700; |
| | | color: #000; |
| | | |
| | | ::v-deep(.el-button--small) { |
| | | font-size: 14px; |
| | | } |
| | | |
| | | span { |
| | | height: 34px; |
| | | line-height: 34px; |
| | | text-align: center; |
| | | margin-right: 20px; |
| | | } |
| | | } |
| | | } |
| | | </style> |
New file |
| | |
| | | const { defineConfig } = require('@vue/cli-service') |
| | | module.exports = defineConfig({ |
| | | transpileDependencies: true, |
| | | devServer: { |
| | | proxy: { |
| | | '/api': { |
| | | target: 'http://localhost:8081', |
| | | changeOrigin: true, |
| | | pathRewrite: { |
| | | '^/api': '' |
| | | } |
| | | } |
| | | } |
| | | } |
| | | }) |