diff --git a/code/frontend/package-lock.json b/code/frontend/package-lock.json index d3f5c24..1208edf 100644 --- a/code/frontend/package-lock.json +++ b/code/frontend/package-lock.json @@ -27,8 +27,11 @@ "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "axios": "^0.18.0", + "echarts": "^5.4.3", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", + "sass": "~1.62.1", + "sass-loader": "~13.2.2", "vue-template-compiler": "^2.6.14" } }, @@ -4992,6 +4995,22 @@ "node": ">=6.0.0" } }, + "node_modules/echarts": { + "version": "5.4.3", + "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz", + "integrity": "sha512-mYKxLxhzy6zyTi/FaEbJMOZU1ULGEQHaeIeuMR5L+JnJTpz+YR03mnnpBhbR4+UYJAgiXgpyTVLffPAjOTLkZA==", + "dev": true, + "dependencies": { + "tslib": "2.3.0", + "zrender": "5.4.4" + } + }, + "node_modules/echarts/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "dev": true + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -6559,6 +6578,12 @@ "node": ">= 4" } }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true + }, "node_modules/import-fresh": { "version": "3.3.0", "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz", @@ -9254,6 +9279,57 @@ "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", "dev": true }, + "node_modules/sass": { + "version": "1.62.1", + "resolved": "https://registry.npmmirror.com/sass/-/sass-1.62.1.tgz", + "integrity": "sha512-NHpxIzN29MXvWiuswfc1W3I0N8SXBd8UR26WntmDlRYf0bSADnwnOjsyMZ3lMezSlArD33Vs3YFhp7dWvL770A==", + "dev": true, + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/sass-loader": { + "version": "13.2.2", + "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-13.2.2.tgz", + "integrity": "sha512-nrIdVAAte3B9icfBiGWvmMhT/D+eCDwnk+yA7VE/76dp/WkHX+i44Q/pfo71NYbwj0Ap+PGsn0ekOuU1WFJ2AA==", + "dev": true, + "dependencies": { + "klona": "^2.0.6", + "neo-async": "^2.6.2" + }, + "engines": { + "node": ">= 14.15.0" + }, + "peerDependencies": { + "fibers": ">= 3.1.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", + "sass": "^1.3.0", + "sass-embedded": "*", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "fibers": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + } + } + }, "node_modules/schema-utils": { "version": "2.7.1", "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz", @@ -11199,6 +11275,21 @@ "resolved": "https://registry.npmmirror.com/yallist/-/yallist-2.1.2.tgz", "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==", "dev": true + }, + "node_modules/zrender": { + "version": "5.4.4", + "resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.4.4.tgz", + "integrity": "sha512-0VxCNJ7AGOMCWeHVyTrGzUgrK4asT4ml9PEkeGirAkKNYXYzoPJCLvmyfdoOXcjTHPs10OZVMfD1Rwg16AZyYw==", + "dev": true, + "dependencies": { + "tslib": "2.3.0" + } + }, + "node_modules/zrender/node_modules/tslib": { + "version": "2.3.0", + "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz", + "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==", + "dev": true } } } diff --git a/code/frontend/package.json b/code/frontend/package.json index 32114b5..5ed05fa 100644 --- a/code/frontend/package.json +++ b/code/frontend/package.json @@ -8,17 +8,17 @@ "lint": "vue-cli-service lint" }, "dependencies": { - "core-js": "^3.8.3", - "vue": "^2.6.14", "animate.css": "^4.1.1", + "core-js": "^3.8.3", "element-ui": "^2.3.2", "js-cookie": "3.0.1", "screenfull": "5.0.2", + "vue": "^2.6.14", + "vue-cropper": "0.5.5", "vue-router": "^3.0.1", "vue-seamless-scroll": "^1.1.23", "vuescroll": "^4.18.0", - "vuex": "^3.0.1", - "vue-cropper": "0.5.5" + "vuex": "^3.0.1" }, "devDependencies": { "@babel/core": "^7.12.16", @@ -26,10 +26,13 @@ "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", + "axios": "^0.18.0", + "echarts": "^5.4.3", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", - "vue-template-compiler": "^2.6.14", - "axios": "^0.18.0" + "sass": "~1.62.1", + "sass-loader": "~13.2.2", + "vue-template-compiler": "^2.6.14" }, "eslintConfig": { "root": true, diff --git a/code/frontend/src/App.vue b/code/frontend/src/App.vue index e411eeb..17f5595 100644 --- a/code/frontend/src/App.vue +++ b/code/frontend/src/App.vue @@ -17,12 +17,21 @@ export default { diff --git a/code/frontend/src/assets/icons2/iconfont.css b/code/frontend/src/assets/icons2/iconfont.css new file mode 100644 index 0000000..85971d7 --- /dev/null +++ b/code/frontend/src/assets/icons2/iconfont.css @@ -0,0 +1,107 @@ +@font-face { + font-family: "iconfont"; /* Project id 4160637 */ + src: url('iconfont.woff2?t=1691684665117') format('woff2'), + url('iconfont.woff?t=1691684665117') format('woff'), + url('iconfont.ttf?t=1691684665117') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-zhinengtuijian:before { + content: "\e608"; +} + +.icon-dianyingyuan:before { + content: "\e6fa"; +} + +.icon-project_info:before { + content: "\e619"; +} + +.icon-fullscreen-shrink:before { + content: "\e676"; +} + +.icon-fullscreen-expand:before { + content: "\e675"; +} + +.icon-navigation:before { + content: "\e67a"; +} + +.icon-user:before { + content: "\e682"; +} + +.icon-upload:before { + content: "\e683"; +} + +.icon-user-filling:before { + content: "\e68b"; +} + +.icon-shujuxianshi:before { + content: "\e606"; +} + +.icon-shezhi2:before { + content: "\e607"; +} + +.icon-help-fill:before { + content: "\e83d"; +} + +.icon-info:before { + content: "\e83e"; +} + +.icon-link:before { + content: "\e83f"; +} + +.icon-hot-for-ux:before { + content: "\e840"; +} + +.icon-settings-fill:before { + content: "\e841"; +} + +.icon-global-fill:before { + content: "\e856"; +} + +.icon-home:before { + content: "\e858"; +} + +.icon-rencaishuangxuanhui:before { + content: "\e87b"; +} + +.icon-zhuanshufuwu:before { + content: "\e884"; +} + +.icon-send-fill:before { + content: "\e888"; +} + +.icon-a-commandinquiry-fill:before { + content: "\e889"; +} + +.icon-anquanbaozhang:before { + content: "\e61d"; +} + diff --git a/code/frontend/src/assets/icons2/iconfont.js b/code/frontend/src/assets/icons2/iconfont.js new file mode 100644 index 0000000..af40ec2 --- /dev/null +++ b/code/frontend/src/assets/icons2/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_4160637='',function(a){var l=(l=document.getElementsByTagName("script"))[l.length-1],c=l.getAttribute("data-injectcss"),l=l.getAttribute("data-disable-injectsvg");if(!l){var t,i,o,s,h,e=function(l,c){c.parentNode.insertBefore(l,c)};if(c&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(l){console&&console.log(l)}}t=function(){var l,c=document.createElement("div");c.innerHTML=a._iconfont_svg_string_4160637,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(l=document.body).firstChild?e(c,l.firstChild):l.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),t()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(o=t,s=a.document,h=!1,d(),s.onreadystatechange=function(){"complete"==s.readyState&&(s.onreadystatechange=null,n())})}function n(){h||(h=!0,o())}function d(){try{s.documentElement.doScroll("left")}catch(l){return void setTimeout(d,50)}n()}}(window); \ No newline at end of file diff --git a/code/frontend/src/assets/icons2/iconfont.json b/code/frontend/src/assets/icons2/iconfont.json new file mode 100644 index 0000000..fdfb943 --- /dev/null +++ b/code/frontend/src/assets/icons2/iconfont.json @@ -0,0 +1,170 @@ +{ + "id": "4160637", + "name": "myicons", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "34248809", + "name": "智能推荐", + "font_class": "zhinengtuijian", + "unicode": "e608", + "unicode_decimal": 58888 + }, + { + "icon_id": "36774172", + "name": "电影院", + "font_class": "dianyingyuan", + "unicode": "e6fa", + "unicode_decimal": 59130 + }, + { + "icon_id": "1461250", + "name": "project_info", + "font_class": "project_info", + "unicode": "e619", + "unicode_decimal": 58905 + }, + { + "icon_id": "15838495", + "name": "fullscreen-shrink", + "font_class": "fullscreen-shrink", + "unicode": "e676", + "unicode_decimal": 58998 + }, + { + "icon_id": "15838498", + "name": "fullscreen-expand", + "font_class": "fullscreen-expand", + "unicode": "e675", + "unicode_decimal": 58997 + }, + { + "icon_id": "15838515", + "name": "navigation", + "font_class": "navigation", + "unicode": "e67a", + "unicode_decimal": 59002 + }, + { + "icon_id": "15838547", + "name": "user", + "font_class": "user", + "unicode": "e682", + "unicode_decimal": 59010 + }, + { + "icon_id": "15838548", + "name": "upload", + "font_class": "upload", + "unicode": "e683", + "unicode_decimal": 59011 + }, + { + "icon_id": "15838606", + "name": "user-filling", + "font_class": "user-filling", + "unicode": "e68b", + "unicode_decimal": 59019 + }, + { + "icon_id": "36301169", + "name": "shujuxianshi", + "font_class": "shujuxianshi", + "unicode": "e606", + "unicode_decimal": 58886 + }, + { + "icon_id": "36301170", + "name": "shezhi2", + "font_class": "shezhi2", + "unicode": "e607", + "unicode_decimal": 58887 + }, + { + "icon_id": "34453014", + "name": "help-fill", + "font_class": "help-fill", + "unicode": "e83d", + "unicode_decimal": 59453 + }, + { + "icon_id": "34453015", + "name": "info", + "font_class": "info", + "unicode": "e83e", + "unicode_decimal": 59454 + }, + { + "icon_id": "34453021", + "name": "link", + "font_class": "link", + "unicode": "e83f", + "unicode_decimal": 59455 + }, + { + "icon_id": "34453030", + "name": "hot-for-ux", + "font_class": "hot-for-ux", + "unicode": "e840", + "unicode_decimal": 59456 + }, + { + "icon_id": "34453055", + "name": "settings-fill", + "font_class": "settings-fill", + "unicode": "e841", + "unicode_decimal": 59457 + }, + { + "icon_id": "34453207", + "name": "global-fill", + "font_class": "global-fill", + "unicode": "e856", + "unicode_decimal": 59478 + }, + { + "icon_id": "34453216", + "name": "home", + "font_class": "home", + "unicode": "e858", + "unicode_decimal": 59480 + }, + { + "icon_id": "34453356", + "name": "人才双选会", + "font_class": "rencaishuangxuanhui", + "unicode": "e87b", + "unicode_decimal": 59515 + }, + { + "icon_id": "34453380", + "name": "专属服务", + "font_class": "zhuanshufuwu", + "unicode": "e884", + "unicode_decimal": 59524 + }, + { + "icon_id": "36209392", + "name": "send-fill", + "font_class": "send-fill", + "unicode": "e888", + "unicode_decimal": 59528 + }, + { + "icon_id": "36209396", + "name": "command inquiry-fill", + "font_class": "a-commandinquiry-fill", + "unicode": "e889", + "unicode_decimal": 59529 + }, + { + "icon_id": "33986995", + "name": "安全保障", + "font_class": "anquanbaozhang", + "unicode": "e61d", + "unicode_decimal": 58909 + } + ] +} diff --git a/code/frontend/src/assets/icons2/iconfont.ttf b/code/frontend/src/assets/icons2/iconfont.ttf new file mode 100644 index 0000000..698c552 Binary files /dev/null and b/code/frontend/src/assets/icons2/iconfont.ttf differ diff --git a/code/frontend/src/assets/icons2/iconfont.woff b/code/frontend/src/assets/icons2/iconfont.woff new file mode 100644 index 0000000..67bf129 Binary files /dev/null and b/code/frontend/src/assets/icons2/iconfont.woff differ diff --git a/code/frontend/src/assets/icons2/iconfont.woff2 b/code/frontend/src/assets/icons2/iconfont.woff2 new file mode 100644 index 0000000..affaad0 Binary files /dev/null and b/code/frontend/src/assets/icons2/iconfont.woff2 differ diff --git a/code/frontend/src/assets/styles/btn.scss b/code/frontend/src/assets/styles/btn.scss new file mode 100644 index 0000000..e6ba1a8 --- /dev/null +++ b/code/frontend/src/assets/styles/btn.scss @@ -0,0 +1,99 @@ +@import './variables.scss'; + +@mixin colorBtn($color) { + background: $color; + + &:hover { + color: $color; + + &:before, + &:after { + background: $color; + } + } +} + +.blue-btn { + @include colorBtn($blue) +} + +.light-blue-btn { + @include colorBtn($light-blue) +} + +.red-btn { + @include colorBtn($red) +} + +.pink-btn { + @include colorBtn($pink) +} + +.green-btn { + @include colorBtn($green) +} + +.tiffany-btn { + @include colorBtn($tiffany) +} + +.yellow-btn { + @include colorBtn($yellow) +} + +.pan-btn { + font-size: 14px; + color: #fff; + padding: 14px 36px; + border-radius: 8px; + border: none; + outline: none; + transition: 600ms ease all; + position: relative; + display: inline-block; + + &:hover { + background: #fff; + + &:before, + &:after { + width: 100%; + transition: 600ms ease all; + } + } + + &:before, + &:after { + content: ''; + position: absolute; + top: 0; + right: 0; + height: 2px; + width: 0; + transition: 400ms ease all; + } + + &::after { + right: inherit; + top: inherit; + left: 0; + bottom: 0; + } +} + +.custom-button { + display: inline-block; + line-height: 1; + white-space: nowrap; + cursor: pointer; + background: #fff; + color: #fff; + -webkit-appearance: none; + text-align: center; + box-sizing: border-box; + outline: 0; + margin: 0; + padding: 10px 15px; + font-size: 14px; + border-radius: 4px; +} diff --git a/code/frontend/src/assets/styles/element-ui.scss b/code/frontend/src/assets/styles/element-ui.scss new file mode 100644 index 0000000..363092a --- /dev/null +++ b/code/frontend/src/assets/styles/element-ui.scss @@ -0,0 +1,92 @@ +// cover some element-ui styles + +.el-breadcrumb__inner, +.el-breadcrumb__inner a { + font-weight: 400 !important; +} + +.el-upload { + input[type="file"] { + display: none !important; + } +} + +.el-upload__input { + display: none; +} + +.cell { + .el-tag { + margin-right: 0px; + } +} + +.small-padding { + .cell { + padding-left: 5px; + padding-right: 5px; + } +} + +.fixed-width { + .el-button--mini { + padding: 7px 10px; + width: 60px; + } +} + +.status-col { + .cell { + padding: 0 10px; + text-align: center; + + .el-tag { + margin-right: 0px; + } + } +} + +// to fixed https://github.com/ElemeFE/element/issues/2461 +.el-dialog { + transform: none; + left: 0; + position: relative; + margin: 0 auto; +} + +// refine element ui upload +.upload-container { + .el-upload { + width: 100%; + + .el-upload-dragger { + width: 100%; + height: 200px; + } + } +} + +// dropdown +.el-dropdown-menu { + a { + display: block + } +} + +// fix date-picker ui bug in filter-item +.el-range-editor.el-input__inner { + display: inline-flex !important; +} + +// to fix el-date-picker css style +.el-range-separator { + box-sizing: content-box; +} + +.el-menu--collapse + > div + > .el-submenu + > .el-submenu__title + .el-submenu__icon-arrow { + display: none; +} \ No newline at end of file diff --git a/code/frontend/src/assets/styles/element-variables.scss b/code/frontend/src/assets/styles/element-variables.scss new file mode 100644 index 0000000..1615ff2 --- /dev/null +++ b/code/frontend/src/assets/styles/element-variables.scss @@ -0,0 +1,31 @@ +/** +* I think element-ui's default theme color is too light for long-term use. +* So I modified the default color and you can modify it to your liking. +**/ + +/* theme color */ +$--color-primary: #1890ff; +$--color-success: #13ce66; +$--color-warning: #ffba00; +$--color-danger: #ff4949; +// $--color-info: #1E1E1E; + +$--button-font-weight: 400; + +// $--color-text-regular: #1f2d3d; + +$--border-color-light: #dfe4ed; +$--border-color-lighter: #e6ebf5; + +$--table-border: 1px solid #dfe6ec; + +/* icon font path, required */ +$--font-path: '~element-ui/lib/theme-chalk/fonts'; + +@import "~element-ui/packages/theme-chalk/src/index"; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + theme: $--color-primary; +} diff --git a/code/frontend/src/assets/styles/index.scss b/code/frontend/src/assets/styles/index.scss new file mode 100644 index 0000000..b656aec --- /dev/null +++ b/code/frontend/src/assets/styles/index.scss @@ -0,0 +1,182 @@ +@import './variables.scss'; +@import './mixin.scss'; +@import './transition.scss'; +@import './element-ui.scss'; +@import './sidebar.scss'; +@import './btn.scss'; + +body { + height: 100%; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; + font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; +} + +label { + font-weight: 700; +} + +html { + height: 100%; + box-sizing: border-box; +} + +#app { + height: 100%; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +.no-padding { + padding: 0px !important; +} + +.padding-content { + padding: 4px 0; +} + +a:focus, +a:active { + outline: none; +} + +a, +a:focus, +a:hover { + cursor: pointer; + color: inherit; + text-decoration: none; +} + +div:focus { + outline: none; +} + +.fr { + float: right; +} + +.fl { + float: left; +} + +.pr-5 { + padding-right: 5px; +} + +.pl-5 { + padding-left: 5px; +} + +.block { + display: block; +} + +.pointer { + cursor: pointer; +} + +.inlineBlock { + display: block; +} + +.clearfix { + &:after { + visibility: hidden; + display: block; + font-size: 0; + content: " "; + clear: both; + height: 0; + } +} + +aside { + background: #eef1f6; + //padding: 8px 24px; + margin-bottom: 20px; + border-radius: 2px; + display: block; + line-height: 32px; + font-size: 16px; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + color: #2c3e50; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + a { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } + } +} + +//main-container全局样式 +.app-container { + padding: 20px; +} + +.components-container { + margin: 30px 50px; + position: relative; +} + +.pagination-container { + margin-top: 30px; +} + +.text-center { + text-align: center +} + +.sub-navbar { + height: 50px; + line-height: 50px; + position: relative; + width: 100%; + text-align: right; + padding-right: 20px; + transition: 600ms ease position; + background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); + + .subtitle { + font-size: 20px; + color: #fff; + } + + &.draft { + background: #d0d0d0; + } + + &.deleted { + background: #d0d0d0; + } +} + +.link-type, +.link-type:focus { + color: #337ab7; + cursor: pointer; + + &:hover { + color: rgb(32, 160, 255); + } +} + +.filter-container { + padding-bottom: 10px; + + .filter-item { + display: inline-block; + vertical-align: middle; + margin-bottom: 10px; + } +} diff --git a/code/frontend/src/assets/styles/mixin.scss b/code/frontend/src/assets/styles/mixin.scss new file mode 100644 index 0000000..06fa061 --- /dev/null +++ b/code/frontend/src/assets/styles/mixin.scss @@ -0,0 +1,66 @@ +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +@mixin relative { + position: relative; + width: 100%; + height: 100%; +} + +@mixin pct($pct) { + width: #{$pct}; + position: relative; + margin: 0 auto; +} + +@mixin triangle($width, $height, $color, $direction) { + $width: $width/2; + $color-border-style: $height solid $color; + $transparent-border-style: $width solid transparent; + height: 0; + width: 0; + + @if $direction==up { + border-bottom: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + + @else if $direction==right { + border-left: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; + } + + @else if $direction==down { + border-top: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + + @else if $direction==left { + border-right: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; + } +} diff --git a/code/frontend/src/assets/styles/ruoyi.scss b/code/frontend/src/assets/styles/ruoyi.scss new file mode 100644 index 0000000..db8c29b --- /dev/null +++ b/code/frontend/src/assets/styles/ruoyi.scss @@ -0,0 +1,277 @@ + /** + * 通用css样式布局处理 + * Copyright (c) 2019 ruoyi + */ + + /** 基础通用 **/ +.pt5 { + padding-top: 5px; +} +.pr5 { + padding-right: 5px; +} +.pb5 { + padding-bottom: 5px; +} +.mt5 { + margin-top: 5px; +} +.mr5 { + margin-right: 5px; +} +.mb5 { + margin-bottom: 5px; +} +.mb8 { + margin-bottom: 8px; +} +.ml5 { + margin-left: 5px; +} +.mt10 { + margin-top: 10px; +} +.mr10 { + margin-right: 10px; +} +.mb10 { + margin-bottom: 10px; +} +.ml10 { + margin-left: 10px; +} +.mt20 { + margin-top: 20px; +} +.mr20 { + margin-right: 20px; +} +.mb20 { + margin-bottom: 20px; +} +.ml20 { + margin-left: 20px; +} + +.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { + font-family: inherit; + font-weight: 500; + line-height: 1.1; + color: inherit; +} + +.el-message-box__status + .el-message-box__message{ + word-break: break-word; +} + +.el-dialog:not(.is-fullscreen) { + margin-top: 6vh !important; +} + +.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { + overflow: auto; + overflow-x: hidden; + max-height: 70vh; + padding: 10px 20px 0; +} + +.el-table { + .el-table__header-wrapper, .el-table__fixed-header-wrapper { + th { + word-break: break-word; + background-color: #f8f8f9; + color: #515a6e; + height: 40px; + font-size: 13px; + } + } + .el-table__body-wrapper { + .el-button [class*="el-icon-"] + span { + margin-left: 1px; + } + } +} + +/** 表单布局 **/ +.form-header { + font-size:15px; + color:#6379bb; + border-bottom:1px solid #ddd; + margin:8px 10px 25px 10px; + padding-bottom:5px +} + +/** 表格布局 **/ +.pagination-container { + position: relative; + height: 25px; + margin-bottom: 10px; + margin-top: 15px; + padding: 10px 20px !important; +} + +/* tree border */ +.tree-border { + margin-top: 5px; + border: 1px solid #e5e6e7; + background: #FFFFFF none; + border-radius:4px; +} + +.pagination-container .el-pagination { + right: 0; + position: absolute; +} + +@media ( max-width : 768px) { + .pagination-container .el-pagination > .el-pagination__jump { + display: none !important; + } + .pagination-container .el-pagination > .el-pagination__sizes { + display: none !important; + } +} + +.el-table .fixed-width .el-button--mini { + padding-left: 0; + padding-right: 0; + width: inherit; +} + +/** 表格更多操作下拉样式 */ +.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine { + cursor: pointer; + margin-left: 5px; +} + +.el-table .el-dropdown, .el-icon-arrow-down { + font-size: 12px; +} + +.el-tree-node__content > .el-checkbox { + margin-right: 8px; +} + +.list-group-striped > .list-group-item { + border-left: 0; + border-right: 0; + border-radius: 0; + padding-left: 0; + padding-right: 0; +} + +.list-group { + padding-left: 0px; + list-style: none; +} + +.list-group-item { + border-bottom: 1px solid #e7eaec; + border-top: 1px solid #e7eaec; + margin-bottom: -1px; + padding: 11px 0px; + font-size: 13px; +} + +.pull-right { + float: right !important; +} + +.el-card__header { + padding: 14px 15px 7px; + min-height: 40px; +} + +.el-card__body { + padding: 15px 20px 20px 20px; +} + +.card-box { + padding-right: 15px; + padding-left: 15px; + margin-bottom: 10px; +} + +/* button color */ +.el-button--cyan.is-active, +.el-button--cyan:active { + background: #20B2AA; + border-color: #20B2AA; + color: #FFFFFF; +} + +.el-button--cyan:focus, +.el-button--cyan:hover { + background: #48D1CC; + border-color: #48D1CC; + color: #FFFFFF; +} + +.el-button--cyan { + background-color: #20B2AA; + border-color: #20B2AA; + color: #FFFFFF; +} + +/* text color */ +.text-navy { + color: #1ab394; +} + +.text-primary { + color: inherit; +} + +.text-success { + color: #1c84c6; +} + +.text-info { + color: #23c6c8; +} + +.text-warning { + color: #f8ac59; +} + +.text-danger { + color: #ed5565; +} + +.text-muted { + color: #888888; +} + +/* image */ +.img-circle { + border-radius: 50%; +} + +.img-lg { + width: 120px; + height: 120px; +} + +.avatar-upload-preview { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 200px; + border-radius: 50%; + box-shadow: 0 0 4px #ccc; + overflow: hidden; +} + +/* 拖拽列样式 */ +.sortable-ghost{ + opacity: .8; + color: #fff!important; + background: #42b983!important; +} + +.top-right-btn { + position: relative; + float: right; +} diff --git a/code/frontend/src/assets/styles/sidebar.scss b/code/frontend/src/assets/styles/sidebar.scss new file mode 100644 index 0000000..abe5b63 --- /dev/null +++ b/code/frontend/src/assets/styles/sidebar.scss @@ -0,0 +1,227 @@ +#app { + + .main-container { + height: 100%; + transition: margin-left .28s; + margin-left: $base-sidebar-width; + position: relative; + } + + .sidebarHide { + margin-left: 0!important; + } + + .sidebar-container { + -webkit-transition: width .28s; + transition: width 0.28s; + width: $base-sidebar-width !important; + background-color: $base-menu-background; + height: 100%; + position: fixed; + font-size: 0px; + top: 0; + bottom: 0; + left: 0; + z-index: 1001; + overflow: hidden; + -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35); + box-shadow: 2px 0 6px rgba(0,21,41,.35); + + // reset element-ui css + .horizontal-collapse-transition { + transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out; + } + + .scrollbar-wrapper { + overflow-x: hidden !important; + } + + .el-scrollbar__bar.is-vertical { + right: 0px; + } + + .el-scrollbar { + height: 100%; + } + + &.has-logo { + .el-scrollbar { + height: calc(100% - 50px); + } + } + + .is-horizontal { + display: none; + } + + a { + display: inline-block; + width: 100%; + overflow: hidden; + } + + .svg-icon { + margin-right: 16px; + } + + .el-menu { + border: none; + height: 100%; + width: 100% !important; + } + + .el-menu-item, .el-submenu__title { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + } + + // menu hover + .submenu-title-noDropdown, + .el-submenu__title { + &:hover { + background-color: rgba(0, 0, 0, 0.06) !important; + } + } + + & .theme-dark .is-active > .el-submenu__title { + color: $base-menu-color-active !important; + } + + & .nest-menu .el-submenu>.el-submenu__title, + & .el-submenu .el-menu-item { + min-width: $base-sidebar-width !important; + + &:hover { + background-color: rgba(0, 0, 0, 0.06) !important; + } + } + + & .theme-dark .nest-menu .el-submenu>.el-submenu__title, + & .theme-dark .el-submenu .el-menu-item { + background-color: $base-sub-menu-background !important; + + &:hover { + background-color: $base-sub-menu-hover !important; + } + } + } + + .hideSidebar { + .sidebar-container { + width: 54px !important; + } + + .main-container { + margin-left: 54px; + } + + .submenu-title-noDropdown { + padding: 0 !important; + position: relative; + + .el-tooltip { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + } + } + + .el-submenu { + overflow: hidden; + + &>.el-submenu__title { + padding: 0 !important; + + .svg-icon { + margin-left: 20px; + } + + } + } + + .el-menu--collapse { + .el-submenu { + &>.el-submenu__title { + &>span { + height: 0; + width: 0; + overflow: hidden; + visibility: hidden; + display: inline-block; + } + } + } + } + } + + .el-menu--collapse .el-menu .el-submenu { + min-width: $base-sidebar-width !important; + } + + // mobile responsive + .mobile { + .main-container { + margin-left: 0px; + } + + .sidebar-container { + transition: transform .28s; + width: $base-sidebar-width !important; + } + + &.hideSidebar { + .sidebar-container { + pointer-events: none; + transition-duration: 0.3s; + transform: translate3d(-$base-sidebar-width, 0, 0); + } + } + } + + .withoutAnimation { + + .main-container, + .sidebar-container { + transition: none; + } + } +} + +// when menu collapsed +.el-menu--vertical { + &>.el-menu { + .svg-icon { + margin-right: 16px; + } + } + + .nest-menu .el-submenu>.el-submenu__title, + .el-menu-item { + &:hover { + // you can use $subMenuHover + background-color: rgba(0, 0, 0, 0.06) !important; + } + } + + // the scroll bar appears when the subMenu is too long + >.el-menu--popup { + max-height: 100vh; + overflow-y: auto; + + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } + } +} diff --git a/code/frontend/src/assets/styles/transition.scss b/code/frontend/src/assets/styles/transition.scss new file mode 100644 index 0000000..073f8c6 --- /dev/null +++ b/code/frontend/src/assets/styles/transition.scss @@ -0,0 +1,49 @@ +// global transition css + +/* fade */ +.fade-enter-active, +.fade-leave-active { + transition: opacity 0.28s; +} + +.fade-enter, +.fade-leave-active { + opacity: 0; +} + +/* fade-transform */ +.fade-transform--move, +.fade-transform-leave-active, +.fade-transform-enter-active { + transition: all .5s; +} + +.fade-transform-enter { + opacity: 0; + transform: translateX(-30px); +} + +.fade-transform-leave-to { + opacity: 0; + transform: translateX(30px); +} + +/* breadcrumb transition */ +.breadcrumb-enter-active, +.breadcrumb-leave-active { + transition: all .5s; +} + +.breadcrumb-enter, +.breadcrumb-leave-active { + opacity: 0; + transform: translateX(20px); +} + +.breadcrumb-move { + transition: all .5s; +} + +.breadcrumb-leave-active { + position: absolute; +} diff --git a/code/frontend/src/assets/styles/variables.scss b/code/frontend/src/assets/styles/variables.scss new file mode 100644 index 0000000..34484d4 --- /dev/null +++ b/code/frontend/src/assets/styles/variables.scss @@ -0,0 +1,54 @@ +// base color +$blue:#324157; +$light-blue:#3A71A8; +$red:#C03639; +$pink: #E65D6E; +$green: #30B08F; +$tiffany: #4AB7BD; +$yellow:#FEC171; +$panGreen: #30B08F; + +// 默认菜单主题风格 +$base-menu-color:#bfcbd9; +$base-menu-color-active:#f4f4f5; +$base-menu-background:#304156; +$base-logo-title-color: #ffffff; + +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; + +$base-sub-menu-background:#1f2d3d; +$base-sub-menu-hover:#001528; + +// 自定义暗色菜单风格 +/** +$base-menu-color:hsla(0,0%,100%,.65); +$base-menu-color-active:#fff; +$base-menu-background:#001529; +$base-logo-title-color: #ffffff; + +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; + +$base-sub-menu-background:#000c17; +$base-sub-menu-hover:#001528; +*/ + +$base-sidebar-width: 200px; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + menuColor: $base-menu-color; + menuLightColor: $base-menu-light-color; + menuColorActive: $base-menu-color-active; + menuBackground: $base-menu-background; + menuLightBackground: $base-menu-light-background; + subMenuBackground: $base-sub-menu-background; + subMenuHover: $base-sub-menu-hover; + sideBarWidth: $base-sidebar-width; + logoTitleColor: $base-logo-title-color; + logoLightTitleColor: $base-logo-light-title-color +} diff --git a/code/frontend/src/components/user/HeaderBar2.vue b/code/frontend/src/components/user/HeaderBar2.vue index 92ef095..e6c44b0 100644 --- a/code/frontend/src/components/user/HeaderBar2.vue +++ b/code/frontend/src/components/user/HeaderBar2.vue @@ -1,7 +1,7 @@ + diff --git a/code/frontend/src/views/user/HomePage.vue b/code/frontend/src/views/user/HomePage.vue new file mode 100644 index 0000000..1f19b21 --- /dev/null +++ b/code/frontend/src/views/user/HomePage.vue @@ -0,0 +1,201 @@ + + + + + diff --git a/code/frontend/src/views/user/NotLogin.vue b/code/frontend/src/views/user/NotLogin.vue new file mode 100644 index 0000000..0f5cc20 --- /dev/null +++ b/code/frontend/src/views/user/NotLogin.vue @@ -0,0 +1,20 @@ + + + + + diff --git a/code/frontend/src/views/user/UserLogin.vue b/code/frontend/src/views/user/UserLogin.vue new file mode 100644 index 0000000..689d67e --- /dev/null +++ b/code/frontend/src/views/user/UserLogin.vue @@ -0,0 +1,97 @@ + + + diff --git a/code/frontend/src/views/user/UserRegister.vue b/code/frontend/src/views/user/UserRegister.vue new file mode 100644 index 0000000..eb1fdcc --- /dev/null +++ b/code/frontend/src/views/user/UserRegister.vue @@ -0,0 +1,152 @@ + + + + + diff --git a/code/frontend/src/views/user/profile/index.vue b/code/frontend/src/views/user/profile/index.vue index 5c3cb56..2aeb918 100644 --- a/code/frontend/src/views/user/profile/index.vue +++ b/code/frontend/src/views/user/profile/index.vue @@ -48,12 +48,6 @@ - - - - - - @@ -65,9 +59,6 @@ import userAvatar from "./userAvatar"; import userInfo from "./userInfo"; import resetPwd from "./resetPwd"; -import {getUserProfile} from "../../../api/userAPI"; -import monitorList from "../../../components/user/common/monitorList"; -import applyMonitor from "../../../components/user/common/applyMonitor"; import 'animate.css' export default { @@ -77,8 +68,6 @@ export default { userAvatar, userInfo, resetPwd, - monitorList, - applyMonitor }, data() { return { @@ -96,14 +85,7 @@ export default { }, methods: { getUser() { - getUserProfile().then(res=>{ - if (res.code === "0") { - this.user = res.data; - // console.log(this.user) - } else { - console.log(res.msg) - } - }) + }, logout() { this.$confirm('退出登录, 是否继续?', '提示', { @@ -112,7 +94,7 @@ export default { type: 'warning' }) .then(() => { - setTimeout(() => { // 用户退出登录 + /*setTimeout(() => { // 用户退出登录 this.$store.dispatch("Logout").then(()=>{ this.$message({ type: 'success', @@ -121,7 +103,7 @@ export default { this.$router.push("/home") }) // location.reload() - }, 1000) + }, 1000)*/ }) .catch(() => { this.$message({ diff --git a/code/frontend/src/views/user/profile/resetPwd.vue b/code/frontend/src/views/user/profile/resetPwd.vue index c2390c5..fc2652d 100644 --- a/code/frontend/src/views/user/profile/resetPwd.vue +++ b/code/frontend/src/views/user/profile/resetPwd.vue @@ -28,7 +28,6 @@