DESKTOP-00SUCB6\Administrator
5 years ago
98 changed files with 18520 additions and 0 deletions
@ -0,0 +1,3 @@ |
|||
> 1% |
|||
last 2 versions |
|||
not dead |
|||
@ -0,0 +1,2 @@ |
|||
VUE_APP_URL="http://121.36.63.12:8085" |
|||
VUE_APP_LOGIN_URL="http://www.fatoaniic.com/#/login" |
|||
@ -0,0 +1,2 @@ |
|||
VUE_APP_URL="http://121.36.63.12:8085" |
|||
VUE_APP_LOGIN_URL="http://www.fatoaniic.com/#/login" |
|||
@ -0,0 +1,17 @@ |
|||
module.exports = { |
|||
root: true, |
|||
env: { |
|||
node: true |
|||
}, |
|||
'extends': [ |
|||
'plugin:vue/essential', |
|||
'eslint:recommended' |
|||
], |
|||
parserOptions: { |
|||
parser: 'babel-eslint' |
|||
}, |
|||
rules: { |
|||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', |
|||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' |
|||
} |
|||
} |
|||
@ -0,0 +1,21 @@ |
|||
.DS_Store |
|||
node_modules |
|||
/dist |
|||
|
|||
# local env files |
|||
.env.local |
|||
.env.*.local |
|||
|
|||
# Log files |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
|
|||
# Editor directories and files |
|||
.idea |
|||
.vscode |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,5 @@ |
|||
module.exports = { |
|||
presets: [ |
|||
'@vue/cli-plugin-babel/preset' |
|||
] |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
{ |
|||
"compilerOptions": { |
|||
"target": "ES6", |
|||
"module": "commonjs", |
|||
"allowSyntheticDefaultImports": true, |
|||
"baseUrl": "./", |
|||
"paths": { |
|||
"@/*": ["src/*"] |
|||
} |
|||
}, |
|||
"exclude": [ |
|||
"node_modules" |
|||
] |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,40 @@ |
|||
{ |
|||
"name": "website", |
|||
"version": "0.1.0", |
|||
"private": true, |
|||
"scripts": { |
|||
"serve": "vue-cli-service serve", |
|||
"build": "vue-cli-service build", |
|||
"lint": "vue-cli-service lint" |
|||
}, |
|||
"dependencies": { |
|||
"animate.css": "^4.1.0", |
|||
"axios": "^0.19.2", |
|||
"babel-polyfill": "^6.26.0", |
|||
"core-js": "^3.6.4", |
|||
"echarts": "^4.6.0", |
|||
"echarts-map": "^3.0.1", |
|||
"element-ui": "^2.13.1", |
|||
"jquery": "^3.5.1", |
|||
"js-cookie": "^2.2.1", |
|||
"jsencrypt": "^3.0.0-rc.1", |
|||
"qs": "^6.9.4", |
|||
"vue": "^2.6.11", |
|||
"vue-loader": "^15.9.2", |
|||
"vue-router": "^3.1.6", |
|||
"vuex": "^3.1.3" |
|||
}, |
|||
"devDependencies": { |
|||
"@vue/cli-plugin-babel": "~4.3.0", |
|||
"@vue/cli-plugin-eslint": "~4.3.0", |
|||
"@vue/cli-plugin-router": "~4.3.0", |
|||
"@vue/cli-plugin-vuex": "~4.3.0", |
|||
"@vue/cli-service": "~4.3.0", |
|||
"babel-eslint": "^10.1.0", |
|||
"eslint": "^6.7.2", |
|||
"eslint-plugin-vue": "^6.2.2", |
|||
"node-sass": "^4.12.0", |
|||
"sass-loader": "^8.0.2", |
|||
"vue-template-compiler": "^2.6.11" |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
config = { |
|||
API_URL: 'http://121.36.65.171:8204', |
|||
COCKPIT_API_URL: 'http://www.fatoaniic.com/api', |
|||
LOGIN_URL: 'http://www.fatoaniic.com/#/login', |
|||
APP_URL:'http://nmsj.org.cn/', |
|||
SHOW_URL: "http://121.36.65.171:8787/file/", |
|||
} |
|||
|
After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,29 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<script type="text/javascript"> |
|||
//判断浏览器，如果是IE11以下则不加载‘vue-quill-editor 富文本编辑器’并提示浏览器版本过低 |
|||
var userAgent = window.navigator.userAgent; |
|||
var version = userAgent.indexOf('MSIE') != -1 ? userAgent.substr(userAgent.indexOf('MSIE') + 5, 3) : '' |
|||
if (version && parseInt(version) < 9) { |
|||
alert('您使用的是IE 9以下版本的浏览器，部分功能将不支持，请更换浏览器。') |
|||
} |
|||
</script> |
|||
|
|||
<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>工业互联网二级节点-食品行业</title> |
|||
<script src="./config.js"></script> |
|||
</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> |
|||
|
After Width: | Height: | Size: 1.2 MiB |
|
After Width: | Height: | Size: 574 B |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 642 B |
|
After Width: | Height: | Size: 521 B |
|
After Width: | Height: | Size: 557 B |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 487 B |
|
After Width: | Height: | Size: 419 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 329 B |
|
After Width: | Height: | Size: 571 B |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,228 @@ |
|||
|
|||
$bg: #2d3a4b; |
|||
$light_gray: #eee; |
|||
|
|||
/* reset element-ui css */ |
|||
.login-container { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: url("../../img/login/bg.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
.platform-select .el-input{ |
|||
width:100%; |
|||
} |
|||
.el-input { |
|||
display: inline-block; |
|||
height: 34px; |
|||
width: 80%; |
|||
|
|||
input { |
|||
background: transparent; |
|||
border: 0px; |
|||
-webkit-appearance: none; |
|||
border-radius: 0px; |
|||
padding: 0 10px; |
|||
color: #333; |
|||
height: 32px; |
|||
font-size: 16px; |
|||
|
|||
/**&:-webkit-autofill { |
|||
-webkit-box-shadow: 0 0 0px 1000px $bg inset !important; |
|||
-webkit-text-fill-color: #fff !important; |
|||
}**/ |
|||
} |
|||
.el-input__inner { |
|||
line-height: normal; |
|||
} |
|||
input::-webkit-input-placeholder { /* WebKit browsers */ |
|||
color: rgba(153,153,153,1); |
|||
font-size: 14px; |
|||
} |
|||
|
|||
input::-moz-placeholder { /* Mozilla Firefox 19+ */ |
|||
color: rgba(153,153,153,1); |
|||
font-size: 14px; |
|||
} |
|||
|
|||
input:-ms-input-placeholder { /* Internet Explorer 10+ */ |
|||
color: rgba(153,153,153,1); |
|||
font-size: 14px; |
|||
} |
|||
} |
|||
|
|||
.el-form-item { |
|||
// width:407px; |
|||
max-width: 100%; |
|||
height:34px; |
|||
background:rgba(255,255,255,1); |
|||
border:1px solid rgba(220,220,220,1); |
|||
border-radius:4px; |
|||
margin-bottom: 25px; |
|||
.el-form-item__content{ |
|||
line-height: normal; |
|||
} |
|||
} |
|||
.login-btn{ |
|||
font-size:18px; |
|||
padding: 0; |
|||
color:rgba(255,255,255,1); |
|||
width:405px; |
|||
height:35px; |
|||
background:linear-gradient(-24deg,rgba(223,52,52,1),rgba(255,108,88,1)); |
|||
border:1px solid rgba(220, 220, 220, 1); |
|||
border-radius:4px; |
|||
} |
|||
a.click_link { |
|||
font-size: 14px; |
|||
color: #2788CC; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
|
|||
$bg: #2d3a4b; |
|||
$dark_blue:#2788CC; |
|||
$dark_gray: #889aa4; |
|||
$light_gray: #eee; |
|||
.login-container { |
|||
position: relative; |
|||
height: 100%; |
|||
min-height: 700px; |
|||
width: 100%; |
|||
min-width: 700px; |
|||
background-color: $bg; |
|||
|
|||
.login-form { |
|||
background:rgba(255,255,255,1); |
|||
box-shadow:0px 3px 40px 0px rgba(143, 143, 143, 0.35); |
|||
border-radius:4px; |
|||
position: absolute; |
|||
width: 450px; |
|||
left: 50%; |
|||
top:calc(15vh + 130px); |
|||
z-index: 100; |
|||
padding: 50px 70px; |
|||
transform: translateX(-50%); |
|||
.platform-select{ |
|||
width:100%; |
|||
} |
|||
} |
|||
.title-form { |
|||
font-size:24px; |
|||
font-family:PingFang SC; |
|||
font-weight:500; |
|||
color:rgba(51,51,51,1); |
|||
line-height:45px; |
|||
margin-bottom: 20px; |
|||
.title-regiter{ |
|||
float: right; |
|||
font-size:14px; |
|||
// a { |
|||
// font-size: 14px; |
|||
// color: #2788CC; |
|||
// cursor: pointer; |
|||
// } |
|||
} |
|||
} |
|||
.svg-container { |
|||
padding: 5px 5px 5px 10px; |
|||
color: $dark_gray; |
|||
display: inline-block; |
|||
position: relative; |
|||
vertical-align: top; |
|||
.user-img{ |
|||
width:19px; |
|||
height:21px; |
|||
} |
|||
.pass-img{ |
|||
width:19px; |
|||
height:21px; |
|||
// margin-left: 4px; |
|||
} |
|||
} |
|||
.code-refresh { |
|||
position: absolute; |
|||
right: 2px; |
|||
top: 5px; |
|||
width: 25px; |
|||
height: 20px; |
|||
cursor: pointer; |
|||
} |
|||
.code-pic { |
|||
margin: 0 5px; |
|||
border:1px solid rgba(220, 220, 220, 1); |
|||
border-radius:3px; |
|||
width: 90px; |
|||
height: 34px; |
|||
// cursor: pointer; |
|||
} |
|||
.header { |
|||
position: relative; |
|||
text-align: center; |
|||
top: 15vh; |
|||
font-weight:bold; |
|||
color:rgba(255,255,255,1); |
|||
letter-spacing:5px; |
|||
.title-cn { |
|||
font-size:48px; |
|||
height: 48px; |
|||
line-height: 48px; |
|||
font-family:Microsoft YaHei; |
|||
text-shadow:0px 1px 3px rgba(0, 0, 0, 0.4); |
|||
} |
|||
.title-en { |
|||
margin-top: 15px; |
|||
height:22px; |
|||
font-size:22px; |
|||
line-height:22px; |
|||
font-family:Arial; |
|||
text-shadow:0px 1px 2px rgba(0, 0, 0, 0.4); |
|||
letter-spacing: 3px; |
|||
word-spacing: 2px; |
|||
} |
|||
} |
|||
.remember-block { |
|||
margin-bottom: 20px; |
|||
// a { |
|||
// font-size: 14px; |
|||
// color: #2788CC; |
|||
// cursor: pointer; |
|||
// } |
|||
} |
|||
|
|||
.show-pwd { |
|||
position: absolute; |
|||
width: 20px; |
|||
height: 15px; |
|||
right: 10px; |
|||
top: 9px; |
|||
font-size: 16px; |
|||
color: $dark_gray; |
|||
cursor: pointer; |
|||
user-select: none; |
|||
.eye { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: url("../../img/login/show-P.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
.eye-open { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: url("../../img/login/hide-P.png") no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
} |
|||
} |
|||
.login_copyright{ |
|||
position: absolute; |
|||
bottom: 0; |
|||
|
|||
width: 100vw; |
|||
height:56px; |
|||
font-size: 14px; |
|||
line-height: 56px; |
|||
text-align: center; |
|||
color:#000; |
|||
background-color: rgba(255, 255, 255, 0.2); |
|||
} |
|||
@ -0,0 +1,166 @@ |
|||
//to reset element-ui default css |
|||
//table header reset css |
|||
.el-table thead { |
|||
color: #333333; |
|||
font-weight: 500; |
|||
font-size: 15px; |
|||
} |
|||
.el-table__header-wrapper tr { |
|||
background-color: #ececec !important; |
|||
} |
|||
.el-table th, |
|||
.el-table tr { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
//分页器reset css |
|||
.el-pagination { |
|||
padding: 30px 5px; |
|||
text-align: center; |
|||
} |
|||
// .el-pagination.is-background .btn-next, |
|||
// .el-pagination.is-background .btn-prev, |
|||
// .el-pagination.is-background .el-pager li { |
|||
// background-color: #ffffff; |
|||
// border: 1px solid #ececec; |
|||
// color: #606266; |
|||
// } |
|||
// .el-pagination.is-background .el-pager li:not(.disabled):hover { |
|||
// color: #df3434; |
|||
// } |
|||
// .el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
// background-color: #df3434; |
|||
// color: #fff; |
|||
// } |
|||
// .el-pagination__sizes .el-input .el-input__inner:hover { |
|||
// border-color: #df3434; |
|||
// } |
|||
.el-select .el-input.is-focus .el-input__inner { |
|||
border-color: #df3434; |
|||
} |
|||
.el-select-dropdown__item.selected { |
|||
color: #df3434; |
|||
} |
|||
.el-input.is-active .el-input__inner, |
|||
.el-input__inner:focus { |
|||
border-color: #df3434; |
|||
} |
|||
|
|||
.el-dialog__header { |
|||
background-color:rgba(248,248,248,1); |
|||
} |
|||
//下拉条 |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed #929292; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: #409EFF; |
|||
} |
|||
.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 120px; |
|||
height: 120px; |
|||
line-height: 120px; |
|||
text-align: center; |
|||
} |
|||
.avatar { |
|||
width: 120px; |
|||
height: 120px; |
|||
display: block; |
|||
} |
|||
|
|||
//下拉菜单 |
|||
.el-dropdown-menu { |
|||
background-color: #F7F7F7 !important; |
|||
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { |
|||
background-color:#014a6e21 !important; |
|||
color: #606266; |
|||
} |
|||
} |
|||
|
|||
//步骤条 |
|||
.el-step__head.is-process { |
|||
color: #DF3434; |
|||
border-color: #DF3434; |
|||
} |
|||
.el-step__title.is-process { |
|||
font-weight: 700; |
|||
color: #DF3434; |
|||
} |
|||
.el-step__description.is-process { |
|||
color: #DF3434; |
|||
} |
|||
|
|||
//文字链接 |
|||
.el-link { |
|||
vertical-align: unset; |
|||
} |
|||
|
|||
.el-header{ |
|||
position: relative; |
|||
width:100%; |
|||
padding: 0; |
|||
height:84px; |
|||
// background-color: #01496E; |
|||
z-index: 100; |
|||
} |
|||
|
|||
//el-dialog样式 |
|||
.el-dialog__title { |
|||
font-size: 16px; |
|||
} |
|||
.el-dialog__headerbtn { |
|||
font-size: 22px; |
|||
} |
|||
.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
//el-message-box样式 |
|||
.el-message-box__title { |
|||
font-size: 16px; |
|||
} |
|||
.el-message-box__headerbtn { |
|||
font-size: 22px; |
|||
} |
|||
// .el-upload { |
|||
// input[type="file"] { |
|||
// display: none !important; |
|||
// } |
|||
// } |
|||
|
|||
// .el-upload__input { |
|||
// display: none; |
|||
// } |
|||
|
|||
// //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 |
|||
// .el-dialog { |
|||
// transform: none; |
|||
// left: 0; |
|||
// position: relative; |
|||
// margin: 0 auto; |
|||
// } |
|||
|
|||
// //element ui upload |
|||
// .upload-container { |
|||
// .el-upload { |
|||
// width: 100%; |
|||
// .el-upload-dragger { |
|||
// width: 100%; |
|||
// height: 200px; |
|||
// } |
|||
// } |
|||
// } |
|||
// //树形节点 |
|||
// .custom-tree-node { |
|||
// flex: 1; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: space-between; |
|||
// font-size: 14px; |
|||
// padding-right: 8px; |
|||
// } |
|||
@ -0,0 +1,312 @@ |
|||
@import './variables.scss'; |
|||
// @import './mixin.scss'; |
|||
// @import './transition.scss'; |
|||
@import './element-ui.scss'; |
|||
@import './sidebar.scss'; |
|||
// @import './button.scss'; |
|||
// @import './header.scss'; |
|||
// @import './reset-el';//覆盖element 表单和表格样式 |
|||
html, |
|||
body, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
div, |
|||
dl, |
|||
dt, |
|||
dd, |
|||
ul, |
|||
ol, |
|||
li, |
|||
p, |
|||
blockquote, |
|||
pre, |
|||
hr, |
|||
figure, |
|||
table, |
|||
caption, |
|||
th, |
|||
td, |
|||
form, |
|||
fieldset, |
|||
legend, |
|||
input, |
|||
button, |
|||
textarea, |
|||
menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
background: #203673f7; //临时 |
|||
} |
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
outline: none; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-box-space-between { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.flex-box-column-reverse { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column-reverse; |
|||
} |
|||
|
|||
.font-size-21 { |
|||
font-size: 21px; |
|||
} |
|||
|
|||
.font-size-13 { |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.font-size-16 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.font-weight-bold { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.line-height-2em { |
|||
line-height: 2em; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.flex-1 { |
|||
-webkit-box-flex: 1; |
|||
-webkit-flex: 1; |
|||
flex: 1; |
|||
} |
|||
.color-white { |
|||
color: #fff; |
|||
} |
|||
.color-success { |
|||
color: #5CB959; |
|||
} |
|||
|
|||
.color-error { |
|||
color: #EA6356; |
|||
} |
|||
|
|||
.color-wait { |
|||
color: #FFBF00; |
|||
} |
|||
|
|||
.float-left { |
|||
float: left; |
|||
} |
|||
|
|||
.float-right { |
|||
float: right; |
|||
} |
|||
|
|||
// ul,ol,li{ |
|||
// list-style: none; |
|||
// } |
|||
//main-container全局样式 |
|||
.app-main { |
|||
min-height: 100% |
|||
} |
|||
|
|||
.app-container { |
|||
padding: 20px; |
|||
background-color: #fff; |
|||
.input-suffix { |
|||
line-height: 60px; |
|||
display: inline; |
|||
margin: 0 1em; |
|||
} |
|||
.filter-container { |
|||
line-height: 50px; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
//处理浏览器输入框记住账号密码后的背景色 |
|||
input:-webkit-autofill, |
|||
textarea:-webkit-autofill, |
|||
select:-webkit-autofill { |
|||
-webkit-text-fill-color: #333 !important; |
|||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important; |
|||
background-color: transparent; |
|||
background-image: none; |
|||
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间 |
|||
} |
|||
|
|||
input { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
// .container-box{ |
|||
// .query-box{ |
|||
// background: #fff; |
|||
// margin-bottom:20px; |
|||
// border-radius: 5px; |
|||
// .title{ |
|||
// padding: 20px; |
|||
// font-size:18px; |
|||
// font-family:Microsoft YaHei; |
|||
// font-weight:400; |
|||
// color:rgba(52,123,229,1); |
|||
// border-bottom:1px solid #DEDEDE; |
|||
// } |
|||
// } |
|||
// .table-box{ |
|||
// background: #fff; |
|||
// border-radius: 5px; |
|||
// padding-bottom: 50px; |
|||
// .title-box{ |
|||
// .title{ |
|||
// padding: 21px 0 21px 21px; |
|||
// p{ |
|||
// font-size:18px; |
|||
// font-family:Microsoft YaHei; |
|||
// font-weight:400; |
|||
// color:rgba(68,138,231,1); |
|||
// border-left:3px solid #448AE7; |
|||
// padding-left: 8px; |
|||
// } |
|||
// } |
|||
// .btn{ |
|||
// padding: 11px 54px 11px 0; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
// input:-webkit-autofill { |
|||
// -webkit-box-shadow: 0 0 0 1000px white inset !important; |
|||
// } |
|||
.header-banner { |
|||
position: relative; |
|||
height: 600px; |
|||
width: 100%; |
|||
padding-left: 20%; |
|||
padding-top: 100px; |
|||
margin-bottom: -84px; |
|||
.header-bg1 { |
|||
top: -84px; |
|||
left: 0; |
|||
// margin-left: -952px; |
|||
// right: 0; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: -1; |
|||
} |
|||
.header-title-cn { |
|||
font-size: 64px; |
|||
line-height: 100px; |
|||
font-family: Source Han Sans CN; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
} |
|||
.header-title-en { |
|||
font-size: 24px; |
|||
line-height: 50px; |
|||
font-family: Microsoft YaHei UI; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
font-style: italic; |
|||
} |
|||
.header-download { |
|||
position: absolute; |
|||
bottom: 207px; |
|||
width: 74px; |
|||
height: 74px; |
|||
} |
|||
} |
|||
@ -0,0 +1,233 @@ |
|||
|
|||
@import './variables.scss'; |
|||
#app { |
|||
// 主体区域 |
|||
.main-container { |
|||
position: relative; |
|||
min-height: 100%; |
|||
width: calc(100% -180px); |
|||
background-color: #EFEFEF; |
|||
transition: margin-left .28s; |
|||
margin-left: 180px; |
|||
} |
|||
.main-content { |
|||
width: 1200px; |
|||
margin: 0 auto; |
|||
} |
|||
.header-content { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 0 20px; |
|||
background: rgba(255,255,255,.1); |
|||
} |
|||
// 顶边栏 |
|||
.header-sidebar-container { |
|||
width: 100%; |
|||
// height: 60px; |
|||
position: fixed; |
|||
// background-color: #DF3434; |
|||
color: #fff; |
|||
top: 0; |
|||
left: 0; |
|||
font-size: 18px; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
.svg-icon { |
|||
color: #000; |
|||
margin-right: 16px; |
|||
} |
|||
.el-menu { |
|||
display: inline-block; |
|||
border: none; |
|||
height: 84px; |
|||
vertical-align: bottom; |
|||
a,.el-submenu { |
|||
display: inline-block; |
|||
float: left; |
|||
} |
|||
.el-submenu__icon-arrow { |
|||
position: static; |
|||
vertical-align: middle; |
|||
margin-left: 8px; |
|||
margin-top: -3px; |
|||
} |
|||
.el-menu-item, .el-submenu__title { |
|||
i { |
|||
color: #ffffff; |
|||
} |
|||
height: 84px; |
|||
line-height: 84px; |
|||
font-size: 16px; |
|||
padding:0 25px; |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
} |
|||
.is-active { |
|||
// border-bottom: 3px solid #fff; |
|||
// border-bottom:0; |
|||
background-color: $menuHover !important; |
|||
} |
|||
// menu hover |
|||
// .submenu-title-noDropdown, |
|||
// .el-submenu__title { |
|||
// i { |
|||
// color: #ffffff; |
|||
// } |
|||
// &:hover { |
|||
// background-color: $menuHover !important; |
|||
// } |
|||
// } |
|||
// .is-active>.el-submenu__title { |
|||
// color: $subMenuActiveText !important; |
|||
// } |
|||
|
|||
// & .nest-menu .el-submenu>.el-submenu__title, |
|||
// & .el-submenu .el-menu-item { |
|||
// min-width: $sideBarWidth !important; |
|||
// background-color: $subMenuBg !important; |
|||
|
|||
// &:hover { |
|||
// background-color: $subMenuHover !important; |
|||
// } |
|||
// } |
|||
} |
|||
// 侧边栏 |
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: 180px !important; |
|||
height: calc(100% - 84px); |
|||
position: absolute; |
|||
font-size: 0px; |
|||
top: 84px; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
//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 { |
|||
height: calc(100% + 15px); |
|||
.el-scrollbar__view { |
|||
height: 100%; |
|||
} |
|||
} |
|||
.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; |
|||
// background-image: url("../../static/bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
li { |
|||
&:hover { |
|||
color: #DF3434; |
|||
background-color: #FFE8E6 !important; |
|||
} |
|||
} |
|||
} |
|||
.is-active { |
|||
border-left: 3px solid #DF3434; |
|||
color: #DF3434; |
|||
border-bottom:0; |
|||
background-color: #FFE8E6 !important; |
|||
} |
|||
} |
|||
.openSidebar { |
|||
height: calc(100% - 84px); |
|||
} |
|||
.hideSidebar { |
|||
height: calc(100% - 84px); |
|||
.sidebar-container { |
|||
width: 60px !important; |
|||
} |
|||
.main-container { |
|||
margin-left: 60px; |
|||
} |
|||
.submenu-title-noDropdown { |
|||
padding-left: 10px !important; |
|||
position: relative; |
|||
.el-tooltip { |
|||
padding: 0 10px !important; |
|||
} |
|||
} |
|||
.el-submenu { |
|||
overflow: hidden; |
|||
&>.el-submenu__title { |
|||
padding-left: 10px !important; |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
//适配移动端 |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0px; |
|||
} |
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: 180px !important; |
|||
} |
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-180px, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
.withoutAnimation { |
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
.el-menu--horizontal { |
|||
// width: 100% !important; |
|||
// left: 0 !important; |
|||
|
|||
background-color: #F7F7F7; |
|||
.el-menu--popup { |
|||
min-width: 120px; |
|||
.is-active { |
|||
// border-bottom: 2px solid #fff; |
|||
background-color: rgba(255,232,230,1) !important; |
|||
} |
|||
.el-menu-item { |
|||
color: #000 !important; |
|||
&:hover { |
|||
background-color: rgba(255,232,230,1) !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
//sidebar |
|||
$menuText:#fff; |
|||
$menuText2:#212121; |
|||
$menuActiveText:#fff; |
|||
$menuActiveText2:rgb(217, 52, 223); |
|||
$subMenuActiveText:#4b4bce; //https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg:rgba(0,0,0,0); |
|||
$menuHover: rgba(255,255,255,0.3); |
|||
|
|||
$subMenuBg:#000; |
|||
$subMenuHover:#ffffff33; |
|||
|
|||
$sideBarWidth: 200px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
} |
|||
|
After Width: | Height: | Size: 2.1 MiB |
|
After Width: | Height: | Size: 487 B |
|
After Width: | Height: | Size: 6.3 KiB |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 329 B |
|
After Width: | Height: | Size: 571 B |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,87 @@ |
|||
|
|||
.search-container { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 109.7%; |
|||
overflow: hidden; |
|||
margin-top: -84px; |
|||
.search-header { |
|||
width: 100%; |
|||
height: 90px; |
|||
padding: 0 20px; |
|||
// background:rgba(255,255,255,0.1); |
|||
.logo { |
|||
display: inline-block; |
|||
margin-top: 10px; |
|||
// width: 580px; |
|||
height: 70px; |
|||
border: 0; |
|||
} |
|||
.white-button { |
|||
position: relative; |
|||
float: right; |
|||
top: 30px; |
|||
background:transparent; |
|||
color: #fff; |
|||
border: 1px solid #fff; |
|||
&:active { |
|||
background-color: rgba(255, 255, 255, 0.3); |
|||
} |
|||
} |
|||
} |
|||
.el-footer { |
|||
position: fixed; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
// background-color:rgba(255,255,255,0.1); |
|||
line-height: 60px; |
|||
font-size:14px; |
|||
font-family:PingFang-SC-Regular; |
|||
color:#fff; |
|||
z-index: 5; |
|||
text-align: center; |
|||
} |
|||
.el-footer .copyright { |
|||
position: relative; |
|||
} |
|||
} |
|||
.search-form { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
width: 773px; |
|||
height: 100px; |
|||
label { |
|||
display: inline-block; |
|||
color: #fff; |
|||
margin: 10px; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
.search-form { |
|||
.el-input-group__append { |
|||
background-color: rgba(205,36,29,1); |
|||
color: #fff; |
|||
border: none; |
|||
&:active { |
|||
background-color: rgba(205,36,29,0.8); |
|||
} |
|||
} |
|||
|
|||
.el-input { |
|||
box-shadow: 0px 0px 15px #888888; |
|||
&::before { |
|||
position: absolute; |
|||
content: ' '; |
|||
width: 14px; |
|||
height: 14px; |
|||
top: -13px; |
|||
left: 30px; |
|||
border-bottom: 7px solid #fff; |
|||
border-top: 7px solid transparent; |
|||
border-left: 7px solid transparent; |
|||
border-right: 7px solid transparent; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,166 @@ |
|||
//to reset element-ui default css |
|||
//table header reset css |
|||
.el-table thead { |
|||
color: #333333; |
|||
font-weight: 500; |
|||
font-size: 15px; |
|||
} |
|||
.el-table__header-wrapper tr { |
|||
background-color: #ececec !important; |
|||
} |
|||
.el-table th, |
|||
.el-table tr { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
//分页器reset css |
|||
.el-pagination { |
|||
padding: 30px 5px; |
|||
text-align: center; |
|||
} |
|||
.el-pagination.is-background .btn-next, |
|||
.el-pagination.is-background .btn-prev, |
|||
.el-pagination.is-background .el-pager li { |
|||
background-color: #ffffff; |
|||
border: 1px solid #ececec; |
|||
color: #606266; |
|||
} |
|||
.el-pagination.is-background .el-pager li:not(.disabled):hover { |
|||
color: #df3434; |
|||
} |
|||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background-color: #df3434; |
|||
color: #fff; |
|||
} |
|||
.el-pagination__sizes .el-input .el-input__inner:hover { |
|||
border-color: #df3434; |
|||
} |
|||
.el-select .el-input.is-focus .el-input__inner { |
|||
border-color: #df3434; |
|||
} |
|||
.el-select-dropdown__item.selected { |
|||
color: #df3434; |
|||
} |
|||
.el-input.is-active .el-input__inner, |
|||
.el-input__inner:focus { |
|||
border-color: #df3434; |
|||
} |
|||
|
|||
.el-dialog__header { |
|||
background-color:rgba(248,248,248,1); |
|||
} |
|||
//下拉条 |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed #929292; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: #409EFF; |
|||
} |
|||
.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 120px; |
|||
height: 120px; |
|||
line-height: 120px; |
|||
text-align: center; |
|||
} |
|||
.avatar { |
|||
width: 120px; |
|||
height: 120px; |
|||
display: block; |
|||
} |
|||
|
|||
//下拉菜单 |
|||
.el-dropdown-menu { |
|||
background-color: #F7F7F7 !important; |
|||
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { |
|||
background-color: #ffe8e6 !important; |
|||
color: #606266; |
|||
} |
|||
} |
|||
|
|||
//步骤条 |
|||
.el-step__head.is-process { |
|||
color: #DF3434; |
|||
border-color: #DF3434; |
|||
} |
|||
.el-step__title.is-process { |
|||
font-weight: 700; |
|||
color: #DF3434; |
|||
} |
|||
.el-step__description.is-process { |
|||
color: #DF3434; |
|||
} |
|||
|
|||
//文字链接 |
|||
.el-link { |
|||
vertical-align: unset; |
|||
} |
|||
|
|||
.el-header{ |
|||
position: relative; |
|||
width:100%; |
|||
padding: 0; |
|||
height:84px; |
|||
// background-color: #01496E; |
|||
z-index: 100; |
|||
} |
|||
|
|||
//el-dialog样式 |
|||
.el-dialog__title { |
|||
font-size: 16px; |
|||
} |
|||
.el-dialog__headerbtn { |
|||
font-size: 22px; |
|||
} |
|||
.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
//el-message-box样式 |
|||
.el-message-box__title { |
|||
font-size: 16px; |
|||
} |
|||
.el-message-box__headerbtn { |
|||
font-size: 22px; |
|||
} |
|||
// .el-upload { |
|||
// input[type="file"] { |
|||
// display: none !important; |
|||
// } |
|||
// } |
|||
|
|||
// .el-upload__input { |
|||
// display: none; |
|||
// } |
|||
|
|||
// //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 |
|||
// .el-dialog { |
|||
// transform: none; |
|||
// left: 0; |
|||
// position: relative; |
|||
// margin: 0 auto; |
|||
// } |
|||
|
|||
// //element ui upload |
|||
// .upload-container { |
|||
// .el-upload { |
|||
// width: 100%; |
|||
// .el-upload-dragger { |
|||
// width: 100%; |
|||
// height: 200px; |
|||
// } |
|||
// } |
|||
// } |
|||
// //树形节点 |
|||
// .custom-tree-node { |
|||
// flex: 1; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: space-between; |
|||
// font-size: 14px; |
|||
// padding-right: 8px; |
|||
// } |
|||
@ -0,0 +1,310 @@ |
|||
@import './variables.scss'; |
|||
// @import './mixin.scss'; |
|||
// @import './transition.scss'; |
|||
@import './element-ui.scss'; |
|||
@import './sidebar.scss'; |
|||
// @import './button.scss'; |
|||
// @import './header.scss'; |
|||
// @import './reset-el';//覆盖element 表单和表格样式 |
|||
html, |
|||
body, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
div, |
|||
dl, |
|||
dt, |
|||
dd, |
|||
ul, |
|||
ol, |
|||
li, |
|||
p, |
|||
blockquote, |
|||
pre, |
|||
hr, |
|||
figure, |
|||
table, |
|||
caption, |
|||
th, |
|||
td, |
|||
form, |
|||
fieldset, |
|||
legend, |
|||
input, |
|||
button, |
|||
textarea, |
|||
menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
outline: none; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-box-space-between { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.flex-box-column-reverse { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column-reverse; |
|||
} |
|||
|
|||
.font-size-21 { |
|||
font-size: 21px; |
|||
} |
|||
|
|||
.font-size-13 { |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.font-size-16 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.font-weight-bold { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.line-height-2em { |
|||
line-height: 2em; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.flex-1 { |
|||
-webkit-box-flex: 1; |
|||
-webkit-flex: 1; |
|||
flex: 1; |
|||
} |
|||
|
|||
.color-success { |
|||
color: #5CB959; |
|||
} |
|||
|
|||
.color-error { |
|||
color: #EA6356; |
|||
} |
|||
|
|||
.color-wait { |
|||
color: #FFBF00; |
|||
} |
|||
|
|||
.float-left { |
|||
float: left; |
|||
} |
|||
|
|||
.float-right { |
|||
float: right; |
|||
} |
|||
|
|||
// ul,ol,li{ |
|||
// list-style: none; |
|||
// } |
|||
//main-container全局样式 |
|||
.app-main { |
|||
min-height: 100% |
|||
} |
|||
|
|||
.app-container { |
|||
padding: 20px; |
|||
background-color: #fff; |
|||
.input-suffix { |
|||
line-height: 60px; |
|||
display: inline; |
|||
margin: 0 1em; |
|||
} |
|||
.filter-container { |
|||
line-height: 50px; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
//处理浏览器输入框记住账号密码后的背景色 |
|||
input:-webkit-autofill, |
|||
textarea:-webkit-autofill, |
|||
select:-webkit-autofill { |
|||
-webkit-text-fill-color: #333 !important; |
|||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important; |
|||
background-color: transparent; |
|||
background-image: none; |
|||
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间 |
|||
} |
|||
|
|||
input { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
// .container-box{ |
|||
// .query-box{ |
|||
// background: #fff; |
|||
// margin-bottom:20px; |
|||
// border-radius: 5px; |
|||
// .title{ |
|||
// padding: 20px; |
|||
// font-size:18px; |
|||
// font-family:Microsoft YaHei; |
|||
// font-weight:400; |
|||
// color:rgba(52,123,229,1); |
|||
// border-bottom:1px solid #DEDEDE; |
|||
// } |
|||
// } |
|||
// .table-box{ |
|||
// background: #fff; |
|||
// border-radius: 5px; |
|||
// padding-bottom: 50px; |
|||
// .title-box{ |
|||
// .title{ |
|||
// padding: 21px 0 21px 21px; |
|||
// p{ |
|||
// font-size:18px; |
|||
// font-family:Microsoft YaHei; |
|||
// font-weight:400; |
|||
// color:rgba(68,138,231,1); |
|||
// border-left:3px solid #448AE7; |
|||
// padding-left: 8px; |
|||
// } |
|||
// } |
|||
// .btn{ |
|||
// padding: 11px 54px 11px 0; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
// input:-webkit-autofill { |
|||
// -webkit-box-shadow: 0 0 0 1000px white inset !important; |
|||
// } |
|||
.header-banner { |
|||
position: relative; |
|||
height: 600px; |
|||
width: 100%; |
|||
padding-left: 20%; |
|||
padding-top: 100px; |
|||
margin-bottom: -84px; |
|||
.header-bg1 { |
|||
top: -84px; |
|||
left: 0; |
|||
// margin-left: -952px; |
|||
// right: 0; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: -1; |
|||
} |
|||
.header-title-cn { |
|||
font-size: 64px; |
|||
line-height: 100px; |
|||
font-family: Source Han Sans CN; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
} |
|||
.header-title-en { |
|||
font-size: 24px; |
|||
line-height: 50px; |
|||
font-family: Microsoft YaHei UI; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
font-style: italic; |
|||
} |
|||
.header-download { |
|||
position: absolute; |
|||
bottom: 207px; |
|||
width: 74px; |
|||
height: 74px; |
|||
} |
|||
} |
|||
@ -0,0 +1,232 @@ |
|||
|
|||
@import './variables.scss'; |
|||
#app { |
|||
// 主体区域 |
|||
.main-container { |
|||
position: relative; |
|||
min-height: 100%; |
|||
width: calc(100% -180px); |
|||
background-color: #EFEFEF; |
|||
transition: margin-left .28s; |
|||
margin-left: 180px; |
|||
} |
|||
.main-content { |
|||
width: 1200px; |
|||
margin: 0 15px; |
|||
} |
|||
.header-content { |
|||
width: 100%; |
|||
padding: 0 20px; |
|||
background: rgba(255,255,255,.1); |
|||
} |
|||
// 顶边栏 |
|||
.header-sidebar-container { |
|||
width: 100%; |
|||
// height: 60px; |
|||
position: fixed; |
|||
// background-color: #DF3434; |
|||
color: #fff; |
|||
top: 0; |
|||
left: 0; |
|||
font-size: 18px; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
.svg-icon { |
|||
color: #000; |
|||
margin-right: 16px; |
|||
} |
|||
.el-menu { |
|||
display: inline-block; |
|||
border: none; |
|||
height: 84px; |
|||
vertical-align: bottom; |
|||
a,.el-submenu { |
|||
display: inline-block; |
|||
float: left; |
|||
} |
|||
.el-submenu__icon-arrow { |
|||
position: static; |
|||
vertical-align: middle; |
|||
margin-left: 8px; |
|||
margin-top: -3px; |
|||
} |
|||
.el-menu-item, .el-submenu__title { |
|||
i { |
|||
color: #ffffff; |
|||
} |
|||
height: 84px; |
|||
line-height: 84px; |
|||
font-size: 16px; |
|||
padding:0 25px; |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
} |
|||
.is-active { |
|||
border-bottom: 3px solid #fff; |
|||
// border-bottom:0; |
|||
background-color: $menuHover !important; |
|||
} |
|||
// menu hover |
|||
// .submenu-title-noDropdown, |
|||
// .el-submenu__title { |
|||
// i { |
|||
// color: #ffffff; |
|||
// } |
|||
// &:hover { |
|||
// background-color: $menuHover !important; |
|||
// } |
|||
// } |
|||
// .is-active>.el-submenu__title { |
|||
// color: $subMenuActiveText !important; |
|||
// } |
|||
|
|||
// & .nest-menu .el-submenu>.el-submenu__title, |
|||
// & .el-submenu .el-menu-item { |
|||
// min-width: $sideBarWidth !important; |
|||
// background-color: $subMenuBg !important; |
|||
|
|||
// &:hover { |
|||
// background-color: $subMenuHover !important; |
|||
// } |
|||
// } |
|||
} |
|||
// 侧边栏 |
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: 180px !important; |
|||
height: calc(100% - 84px); |
|||
position: absolute; |
|||
font-size: 0px; |
|||
top: 84px; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
//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 { |
|||
height: calc(100% + 15px); |
|||
.el-scrollbar__view { |
|||
height: 100%; |
|||
} |
|||
} |
|||
.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; |
|||
// background-image: url("../../static/bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
li { |
|||
&:hover { |
|||
color: #DF3434; |
|||
background-color: #FFE8E6 !important; |
|||
} |
|||
} |
|||
} |
|||
.is-active { |
|||
border-left: 3px solid #DF3434; |
|||
color: #DF3434; |
|||
border-bottom:0; |
|||
background-color: #FFE8E6 !important; |
|||
} |
|||
} |
|||
.openSidebar { |
|||
height: calc(100% - 84px); |
|||
} |
|||
.hideSidebar { |
|||
height: calc(100% - 84px); |
|||
.sidebar-container { |
|||
width: 60px !important; |
|||
} |
|||
.main-container { |
|||
margin-left: 60px; |
|||
} |
|||
.submenu-title-noDropdown { |
|||
padding-left: 10px !important; |
|||
position: relative; |
|||
.el-tooltip { |
|||
padding: 0 10px !important; |
|||
} |
|||
} |
|||
.el-submenu { |
|||
overflow: hidden; |
|||
&>.el-submenu__title { |
|||
padding-left: 10px !important; |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
//适配移动端 |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0px; |
|||
} |
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: 180px !important; |
|||
} |
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-180px, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
.withoutAnimation { |
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
.el-menu--horizontal { |
|||
// width: 100% !important; |
|||
// left: 0 !important; |
|||
|
|||
background-color: #F7F7F7; |
|||
.el-menu--popup { |
|||
min-width: 120px; |
|||
.is-active { |
|||
// border-bottom: 2px solid #fff; |
|||
background-color: rgba(255,232,230,1) !important; |
|||
} |
|||
.el-menu-item { |
|||
color: #000 !important; |
|||
&:hover { |
|||
background-color: rgba(255,232,230,1) !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
//sidebar |
|||
$menuText:#fff; |
|||
$menuText2:#212121; |
|||
$menuActiveText:#fff; |
|||
$menuActiveText2:rgb(217, 52, 223); |
|||
$subMenuActiveText:#4b4bce; //https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg:rgba(0,0,0,0); |
|||
$menuHover: rgba(255,255,255,0.3); |
|||
|
|||
$subMenuBg:#000; |
|||
$subMenuHover:#ffffff33; |
|||
|
|||
$sideBarWidth: 200px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
} |
|||
|
After Width: | Height: | Size: 374 KiB |
|
After Width: | Height: | Size: 487 B |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 474 B |
|
After Width: | Height: | Size: 329 B |
|
After Width: | Height: | Size: 571 B |
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,86 @@ |
|||
|
|||
.search-container { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 109.7%; |
|||
overflow: hidden; |
|||
margin-top: -84px; |
|||
.search-header { |
|||
width: 100%; |
|||
height: 90px; |
|||
padding: 0 20px; |
|||
// background:rgba(255,255,255,0.1); |
|||
.logo { |
|||
display: inline-block; |
|||
margin-top: 10px; |
|||
// width: 580px; |
|||
height: 70px; |
|||
border: 0; |
|||
} |
|||
.white-button { |
|||
position: relative; |
|||
float: right; |
|||
top: 30px; |
|||
background:transparent; |
|||
color: #fff; |
|||
border: 1px solid #fff; |
|||
&:active { |
|||
background-color: rgba(255, 255, 255, 0.3); |
|||
} |
|||
} |
|||
} |
|||
.el-footer { |
|||
position: fixed; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
// background-color:rgba(255,255,255,0.1); |
|||
line-height: 60px; |
|||
font-size:14px; |
|||
font-family:PingFang-SC-Regular; |
|||
color:#fff; |
|||
z-index: 5; |
|||
text-align: center; |
|||
} |
|||
.el-footer .copyright { |
|||
position: relative; |
|||
} |
|||
} |
|||
.search-form { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: 50%; |
|||
transform: translate(-50%,-50%); |
|||
width: 773px; |
|||
height: 100px; |
|||
label { |
|||
display: inline-block; |
|||
margin: 10px; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
.search-form { |
|||
.el-input-group__append { |
|||
background-color: rgba(205,36,29,1); |
|||
color: #fff; |
|||
border: none; |
|||
&:active { |
|||
background-color: rgba(205,36,29,0.8); |
|||
} |
|||
} |
|||
|
|||
.el-input { |
|||
box-shadow: 0px 0px 15px #888888; |
|||
&::before { |
|||
position: absolute; |
|||
content: ' '; |
|||
width: 14px; |
|||
height: 14px; |
|||
top: -13px; |
|||
left: 30px; |
|||
border-bottom: 7px solid #fff; |
|||
border-top: 7px solid transparent; |
|||
border-left: 7px solid transparent; |
|||
border-right: 7px solid transparent; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,166 @@ |
|||
//to reset element-ui default css |
|||
//table header reset css |
|||
.el-table thead { |
|||
color: #333333; |
|||
font-weight: 500; |
|||
font-size: 15px; |
|||
} |
|||
.el-table__header-wrapper tr { |
|||
background-color: #ececec !important; |
|||
} |
|||
.el-table th, |
|||
.el-table tr { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
//分页器reset css |
|||
.el-pagination { |
|||
padding: 30px 5px; |
|||
text-align: center; |
|||
} |
|||
.el-pagination.is-background .btn-next, |
|||
.el-pagination.is-background .btn-prev, |
|||
.el-pagination.is-background .el-pager li { |
|||
background-color: #ffffff; |
|||
border: 1px solid #ececec; |
|||
color: #606266; |
|||
} |
|||
.el-pagination.is-background .el-pager li:not(.disabled):hover { |
|||
color: #df3434; |
|||
} |
|||
.el-pagination.is-background .el-pager li:not(.disabled).active { |
|||
background-color: #df3434; |
|||
color: #fff; |
|||
} |
|||
.el-pagination__sizes .el-input .el-input__inner:hover { |
|||
border-color: #df3434; |
|||
} |
|||
.el-select .el-input.is-focus .el-input__inner { |
|||
border-color: #df3434; |
|||
} |
|||
.el-select-dropdown__item.selected { |
|||
color: #df3434; |
|||
} |
|||
.el-input.is-active .el-input__inner, |
|||
.el-input__inner:focus { |
|||
border-color: #df3434; |
|||
} |
|||
|
|||
.el-dialog__header { |
|||
background-color:rgba(248,248,248,1); |
|||
} |
|||
//下拉条 |
|||
.avatar-uploader .el-upload { |
|||
border: 1px dashed #929292; |
|||
border-radius: 6px; |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.avatar-uploader .el-upload:hover { |
|||
border-color: #409EFF; |
|||
} |
|||
.avatar-uploader-icon { |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 120px; |
|||
height: 120px; |
|||
line-height: 120px; |
|||
text-align: center; |
|||
} |
|||
.avatar { |
|||
width: 120px; |
|||
height: 120px; |
|||
display: block; |
|||
} |
|||
|
|||
//下拉菜单 |
|||
.el-dropdown-menu { |
|||
background-color: #F7F7F7 !important; |
|||
.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { |
|||
background-color: #ffe8e6 !important; |
|||
color: #606266; |
|||
} |
|||
} |
|||
|
|||
//步骤条 |
|||
.el-step__head.is-process { |
|||
color: #DF3434; |
|||
border-color: #DF3434; |
|||
} |
|||
.el-step__title.is-process { |
|||
font-weight: 700; |
|||
color: #DF3434; |
|||
} |
|||
.el-step__description.is-process { |
|||
color: #DF3434; |
|||
} |
|||
|
|||
//文字链接 |
|||
.el-link { |
|||
vertical-align: unset; |
|||
} |
|||
|
|||
.el-header{ |
|||
position: relative; |
|||
width:100%; |
|||
padding: 0; |
|||
height:84px; |
|||
// background-color: #01496E; |
|||
z-index: 100; |
|||
} |
|||
|
|||
//el-dialog样式 |
|||
.el-dialog__title { |
|||
font-size: 16px; |
|||
} |
|||
.el-dialog__headerbtn { |
|||
font-size: 22px; |
|||
} |
|||
.el-dialog__footer { |
|||
text-align: center; |
|||
} |
|||
//el-message-box样式 |
|||
.el-message-box__title { |
|||
font-size: 16px; |
|||
} |
|||
.el-message-box__headerbtn { |
|||
font-size: 22px; |
|||
} |
|||
// .el-upload { |
|||
// input[type="file"] { |
|||
// display: none !important; |
|||
// } |
|||
// } |
|||
|
|||
// .el-upload__input { |
|||
// display: none; |
|||
// } |
|||
|
|||
// //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 |
|||
// .el-dialog { |
|||
// transform: none; |
|||
// left: 0; |
|||
// position: relative; |
|||
// margin: 0 auto; |
|||
// } |
|||
|
|||
// //element ui upload |
|||
// .upload-container { |
|||
// .el-upload { |
|||
// width: 100%; |
|||
// .el-upload-dragger { |
|||
// width: 100%; |
|||
// height: 200px; |
|||
// } |
|||
// } |
|||
// } |
|||
// //树形节点 |
|||
// .custom-tree-node { |
|||
// flex: 1; |
|||
// display: flex; |
|||
// align-items: center; |
|||
// justify-content: space-between; |
|||
// font-size: 14px; |
|||
// padding-right: 8px; |
|||
// } |
|||
@ -0,0 +1,310 @@ |
|||
@import './variables.scss'; |
|||
// @import './mixin.scss'; |
|||
// @import './transition.scss'; |
|||
@import './element-ui.scss'; |
|||
@import './sidebar.scss'; |
|||
// @import './button.scss'; |
|||
// @import './header.scss'; |
|||
// @import './reset-el';//覆盖element 表单和表格样式 |
|||
html, |
|||
body, |
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6, |
|||
div, |
|||
dl, |
|||
dt, |
|||
dd, |
|||
ul, |
|||
ol, |
|||
li, |
|||
p, |
|||
blockquote, |
|||
pre, |
|||
hr, |
|||
figure, |
|||
table, |
|||
caption, |
|||
th, |
|||
td, |
|||
form, |
|||
fieldset, |
|||
legend, |
|||
input, |
|||
button, |
|||
textarea, |
|||
menu { |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
body { |
|||
height: 100%; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
-webkit-font-smoothing: antialiased; |
|||
text-rendering: optimizeLegibility; |
|||
font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif; |
|||
} |
|||
|
|||
label { |
|||
font-weight: 700; |
|||
} |
|||
|
|||
html { |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
#app { |
|||
height: 100%; |
|||
} |
|||
|
|||
*, |
|||
*:before, |
|||
*:after { |
|||
box-sizing: inherit; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
outline: none; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
div:focus { |
|||
outline: none; |
|||
} |
|||
|
|||
a:focus, |
|||
a:active { |
|||
outline: none; |
|||
} |
|||
|
|||
a, |
|||
a:focus, |
|||
a:hover { |
|||
cursor: pointer; |
|||
color: inherit; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.clearfix { |
|||
&:after { |
|||
visibility: hidden; |
|||
display: block; |
|||
font-size: 0; |
|||
content: " "; |
|||
clear: both; |
|||
height: 0; |
|||
} |
|||
} |
|||
|
|||
.flex-box { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-box-space-between { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
} |
|||
|
|||
.flex-box-column { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.flex-box-column-reverse { |
|||
display: -webkit-box; |
|||
display: -webkit-flex; |
|||
/* Safari */ |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
flex-direction: column-reverse; |
|||
} |
|||
|
|||
.font-size-21 { |
|||
font-size: 21px; |
|||
} |
|||
|
|||
.font-size-13 { |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.font-size-16 { |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.font-weight-bold { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.line-height-2em { |
|||
line-height: 2em; |
|||
} |
|||
|
|||
.text-center { |
|||
text-align: center; |
|||
} |
|||
|
|||
.flex-1 { |
|||
-webkit-box-flex: 1; |
|||
-webkit-flex: 1; |
|||
flex: 1; |
|||
} |
|||
|
|||
.color-success { |
|||
color: #5CB959; |
|||
} |
|||
|
|||
.color-error { |
|||
color: #EA6356; |
|||
} |
|||
|
|||
.color-wait { |
|||
color: #FFBF00; |
|||
} |
|||
|
|||
.float-left { |
|||
float: left; |
|||
} |
|||
|
|||
.float-right { |
|||
float: right; |
|||
} |
|||
|
|||
// ul,ol,li{ |
|||
// list-style: none; |
|||
// } |
|||
//main-container全局样式 |
|||
.app-main { |
|||
min-height: 100% |
|||
} |
|||
|
|||
.app-container { |
|||
padding: 20px; |
|||
background-color: #fff; |
|||
.input-suffix { |
|||
line-height: 60px; |
|||
display: inline; |
|||
margin: 0 1em; |
|||
} |
|||
.filter-container { |
|||
line-height: 50px; |
|||
text-align: right; |
|||
} |
|||
} |
|||
|
|||
//处理浏览器输入框记住账号密码后的背景色 |
|||
input:-webkit-autofill, |
|||
textarea:-webkit-autofill, |
|||
select:-webkit-autofill { |
|||
-webkit-text-fill-color: #333 !important; |
|||
-webkit-box-shadow: 0 0 0px 1000px transparent inset !important; |
|||
background-color: transparent; |
|||
background-image: none; |
|||
transition: background-color 50000s ease-in-out 0s; //背景色透明 生效时长 过渡效果 启用时延迟的时间 |
|||
} |
|||
|
|||
input { |
|||
background-color: transparent; |
|||
} |
|||
|
|||
// .container-box{ |
|||
// .query-box{ |
|||
// background: #fff; |
|||
// margin-bottom:20px; |
|||
// border-radius: 5px; |
|||
// .title{ |
|||
// padding: 20px; |
|||
// font-size:18px; |
|||
// font-family:Microsoft YaHei; |
|||
// font-weight:400; |
|||
// color:rgba(52,123,229,1); |
|||
// border-bottom:1px solid #DEDEDE; |
|||
// } |
|||
// } |
|||
// .table-box{ |
|||
// background: #fff; |
|||
// border-radius: 5px; |
|||
// padding-bottom: 50px; |
|||
// .title-box{ |
|||
// .title{ |
|||
// padding: 21px 0 21px 21px; |
|||
// p{ |
|||
// font-size:18px; |
|||
// font-family:Microsoft YaHei; |
|||
// font-weight:400; |
|||
// color:rgba(68,138,231,1); |
|||
// border-left:3px solid #448AE7; |
|||
// padding-left: 8px; |
|||
// } |
|||
// } |
|||
// .btn{ |
|||
// padding: 11px 54px 11px 0; |
|||
// } |
|||
// } |
|||
// } |
|||
// } |
|||
// input:-webkit-autofill { |
|||
// -webkit-box-shadow: 0 0 0 1000px white inset !important; |
|||
// } |
|||
.header-banner { |
|||
position: relative; |
|||
height: 600px; |
|||
width: 100%; |
|||
padding-left: 20%; |
|||
padding-top: 100px; |
|||
margin-bottom: -84px; |
|||
.header-bg1 { |
|||
top: -84px; |
|||
left: 0; |
|||
// margin-left: -952px; |
|||
// right: 0; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
z-index: -1; |
|||
} |
|||
.header-title-cn { |
|||
font-size: 64px; |
|||
line-height: 100px; |
|||
font-family: Source Han Sans CN; |
|||
font-weight: bold; |
|||
color: #fff; |
|||
} |
|||
.header-title-en { |
|||
font-size: 24px; |
|||
line-height: 50px; |
|||
font-family: Microsoft YaHei UI; |
|||
font-weight: 400; |
|||
color: #fff; |
|||
font-style: italic; |
|||
} |
|||
.header-download { |
|||
position: absolute; |
|||
bottom: 207px; |
|||
width: 74px; |
|||
height: 74px; |
|||
} |
|||
} |
|||
@ -0,0 +1,232 @@ |
|||
|
|||
@import './variables.scss'; |
|||
#app { |
|||
// 主体区域 |
|||
.main-container { |
|||
position: relative; |
|||
min-height: 100%; |
|||
width: calc(100% -180px); |
|||
background-color: #EFEFEF; |
|||
transition: margin-left .28s; |
|||
margin-left: 180px; |
|||
} |
|||
.main-content { |
|||
width: 1200px; |
|||
margin: 0 15px; |
|||
} |
|||
.header-content { |
|||
width: 100%; |
|||
padding: 0 20px; |
|||
background: rgba(255,255,255,.1); |
|||
} |
|||
// 顶边栏 |
|||
.header-sidebar-container { |
|||
width: 100%; |
|||
// height: 60px; |
|||
position: fixed; |
|||
// background-color: #DF3434; |
|||
color: #fff; |
|||
top: 0; |
|||
left: 0; |
|||
font-size: 18px; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
.svg-icon { |
|||
color: #000; |
|||
margin-right: 16px; |
|||
} |
|||
.el-menu { |
|||
display: inline-block; |
|||
border: none; |
|||
height: 84px; |
|||
vertical-align: bottom; |
|||
a,.el-submenu { |
|||
display: inline-block; |
|||
float: left; |
|||
} |
|||
.el-submenu__icon-arrow { |
|||
position: static; |
|||
vertical-align: middle; |
|||
margin-left: 8px; |
|||
margin-top: -3px; |
|||
} |
|||
.el-menu-item, .el-submenu__title { |
|||
i { |
|||
color: #ffffff; |
|||
} |
|||
height: 84px; |
|||
line-height: 84px; |
|||
font-size: 16px; |
|||
padding:0 25px; |
|||
&:hover { |
|||
background-color: $menuHover !important; |
|||
} |
|||
} |
|||
} |
|||
.is-active { |
|||
border-bottom: 3px solid #fff; |
|||
// border-bottom:0; |
|||
background-color: $menuHover !important; |
|||
} |
|||
// menu hover |
|||
// .submenu-title-noDropdown, |
|||
// .el-submenu__title { |
|||
// i { |
|||
// color: #ffffff; |
|||
// } |
|||
// &:hover { |
|||
// background-color: $menuHover !important; |
|||
// } |
|||
// } |
|||
// .is-active>.el-submenu__title { |
|||
// color: $subMenuActiveText !important; |
|||
// } |
|||
|
|||
// & .nest-menu .el-submenu>.el-submenu__title, |
|||
// & .el-submenu .el-menu-item { |
|||
// min-width: $sideBarWidth !important; |
|||
// background-color: $subMenuBg !important; |
|||
|
|||
// &:hover { |
|||
// background-color: $subMenuHover !important; |
|||
// } |
|||
// } |
|||
} |
|||
// 侧边栏 |
|||
.sidebar-container { |
|||
transition: width 0.28s; |
|||
width: 180px !important; |
|||
height: calc(100% - 84px); |
|||
position: absolute; |
|||
font-size: 0px; |
|||
top: 84px; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1001; |
|||
overflow: hidden; |
|||
//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 { |
|||
height: calc(100% + 15px); |
|||
.el-scrollbar__view { |
|||
height: 100%; |
|||
} |
|||
} |
|||
.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; |
|||
// background-image: url("../../static/bg.png"); |
|||
background-repeat: no-repeat; |
|||
background-size: 100% 100%; |
|||
li { |
|||
&:hover { |
|||
color: #DF3434; |
|||
background-color: #FFE8E6 !important; |
|||
} |
|||
} |
|||
} |
|||
.is-active { |
|||
border-left: 3px solid #DF3434; |
|||
color: #DF3434; |
|||
border-bottom:0; |
|||
background-color: #FFE8E6 !important; |
|||
} |
|||
} |
|||
.openSidebar { |
|||
height: calc(100% - 84px); |
|||
} |
|||
.hideSidebar { |
|||
height: calc(100% - 84px); |
|||
.sidebar-container { |
|||
width: 60px !important; |
|||
} |
|||
.main-container { |
|||
margin-left: 60px; |
|||
} |
|||
.submenu-title-noDropdown { |
|||
padding-left: 10px !important; |
|||
position: relative; |
|||
.el-tooltip { |
|||
padding: 0 10px !important; |
|||
} |
|||
} |
|||
.el-submenu { |
|||
overflow: hidden; |
|||
&>.el-submenu__title { |
|||
padding-left: 10px !important; |
|||
.el-submenu__icon-arrow { |
|||
display: none; |
|||
} |
|||
} |
|||
} |
|||
.el-menu--collapse { |
|||
.el-submenu { |
|||
&>.el-submenu__title { |
|||
&>span { |
|||
height: 0; |
|||
width: 0; |
|||
overflow: hidden; |
|||
visibility: hidden; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
//适配移动端 |
|||
.mobile { |
|||
.main-container { |
|||
margin-left: 0px; |
|||
} |
|||
.sidebar-container { |
|||
transition: transform .28s; |
|||
width: 180px !important; |
|||
} |
|||
&.hideSidebar { |
|||
.sidebar-container { |
|||
transition-duration: 0.3s; |
|||
transform: translate3d(-180px, 0, 0); |
|||
} |
|||
} |
|||
} |
|||
.withoutAnimation { |
|||
.main-container, |
|||
.sidebar-container { |
|||
transition: none; |
|||
} |
|||
} |
|||
} |
|||
.el-menu--horizontal { |
|||
// width: 100% !important; |
|||
// left: 0 !important; |
|||
|
|||
background-color: #F7F7F7; |
|||
.el-menu--popup { |
|||
min-width: 120px; |
|||
.is-active { |
|||
// border-bottom: 2px solid #fff; |
|||
background-color: rgba(255,232,230,1) !important; |
|||
} |
|||
.el-menu-item { |
|||
color: #000 !important; |
|||
&:hover { |
|||
background-color: rgba(255,232,230,1) !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
//sidebar |
|||
$menuText:#fff; |
|||
$menuText2:#212121; |
|||
$menuActiveText:#fff; |
|||
$menuActiveText2:rgb(217, 52, 223); |
|||
$subMenuActiveText:#4b4bce; //https://github.com/ElemeFE/element/issues/12951 |
|||
|
|||
$menuBg:rgba(0,0,0,0); |
|||
$menuHover: rgba(255,255,255,0.3); |
|||
|
|||
$subMenuBg:#000; |
|||
$subMenuHover:#ffffff33; |
|||
|
|||
$sideBarWidth: 200px; |
|||
|
|||
// the :export directive is the magic sauce for webpack |
|||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
|||
:export { |
|||
menuText: $menuText; |
|||
menuActiveText: $menuActiveText; |
|||
subMenuActiveText: $subMenuActiveText; |
|||
menuBg: $menuBg; |
|||
menuHover: $menuHover; |
|||
subMenuBg: $subMenuBg; |
|||
subMenuHover: $subMenuHover; |
|||
sideBarWidth: $sideBarWidth; |
|||
} |
|||
@ -0,0 +1,5 @@ |
|||
<template> |
|||
<div id="app"> |
|||
<router-view/> |
|||
</div> |
|||
</template> |
|||
@ -0,0 +1,82 @@ |
|||
import request from '@/utils/request'; |
|||
// import requestLoading from '@/utils/requestLoading';
|
|||
//登录接口
|
|||
export function login(param) { |
|||
return request({ |
|||
url: '/api-login/login/login', |
|||
method: 'post', |
|||
data:param |
|||
}); |
|||
} |
|||
//登出接口
|
|||
export function logout() { |
|||
return request({ |
|||
url: '/regback/user/logout', |
|||
method: 'post', |
|||
tokenParams:true |
|||
}); |
|||
} |
|||
//普通账户修改密码
|
|||
export function updatePass(params) { |
|||
return request({ |
|||
url: '/api-login/user/updatePassword', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
//注册账户
|
|||
export function registerUser(params) { |
|||
return request({ |
|||
url: '/api-login/user/registerUser', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
//获取短信验证码
|
|||
export function sendMessage(params) { |
|||
return request({ |
|||
url: '/api-login/common/send', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//忘记密码-输入账号换取手机号
|
|||
export function userToTelphone(params) { |
|||
return request({ |
|||
url: '/api-login/user/telPhone', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//忘记密码-重设密码
|
|||
export function setUpPassword(params) { |
|||
return request({ |
|||
url: '/api-login/user/setUpPassword', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
//验证短信验证码
|
|||
export function smsVerification(params) { |
|||
return request({ |
|||
url: '/api-login/common/smsVerification', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
//非法字符列表
|
|||
export function getKeysList(params) { |
|||
return request({ |
|||
url: '/api-login/key/keys', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//获取待办事项
|
|||
export function getAnnCount(params) { |
|||
return request({ |
|||
url: '/api-login/ann/getAnnCount', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
import request from '@/utils/request'; |
|||
|
|||
//获取标识列表
|
|||
export function getMarkList(params) { |
|||
return request({ |
|||
url: '/api-idis/identityv2/snmses', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//添加标识
|
|||
export function addMark(params) { |
|||
return request({ |
|||
url: '/api-idis/identityv2/snms', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
//修改标识
|
|||
export function editMark(params) { |
|||
return request({ |
|||
url: '/api-idis/identityv2/snms', |
|||
method: 'put', |
|||
data:params |
|||
}); |
|||
} |
|||
//启停
|
|||
export function openOrCloseMark(params) { |
|||
return request({ |
|||
url: '/api-idis/identityv2/snms', |
|||
method: 'delete', |
|||
params |
|||
}); |
|||
} |
|||
//产品编号是否存在
|
|||
export function checkMark(params) { |
|||
return request({ |
|||
url: '/api-idis/identityv2/snmsDetail', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
|
|||
|
|||
//标识解析
|
|||
export function checkNnmsLike(params) { |
|||
return request({ |
|||
url: '/api-idis/identityv2/snmsLike2', |
|||
// isLogin:true,
|
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
@ -0,0 +1,91 @@ |
|||
import request from '@/utils/request'; |
|||
//获取用户列表
|
|||
export function getUserList(params) { |
|||
return request({ |
|||
url: '/api-login/user/users', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//根据id获取用户详情
|
|||
export function getUserDetail(params) { |
|||
return request({ |
|||
url: '/api-login/user/userDetail', |
|||
headers: {'Content-Type': 'application/json'}, |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//用户启用停用状态
|
|||
export function editUserStatus(params) { |
|||
return request({ |
|||
url: '/api-login/user/status', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//获取角色类型
|
|||
export function getRoleType(params) { |
|||
return request({ |
|||
url: '/api-login/user/types', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//添加用户
|
|||
export function addUser(params) { |
|||
return request({ |
|||
url: '/api-login/user/user', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
//添加用户时校验用户是否存在
|
|||
export function existsUserName(params) { |
|||
return request({ |
|||
url: '/api-login/user/existsUserName', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//删除用户
|
|||
export function deleteUser(params) { |
|||
return request({ |
|||
url: '/api-login/user/user', |
|||
method: 'DELETE', |
|||
params |
|||
}); |
|||
} |
|||
//更新用户信息
|
|||
export function updateUserInfo(params) { |
|||
return request({ |
|||
url: '/api-login/user/user', |
|||
method: 'put', |
|||
data:params |
|||
}); |
|||
} |
|||
//管理员账户重置密码
|
|||
export function resetPass(params) { |
|||
return request({ |
|||
url: '/api-login/user/restPassword', |
|||
method: 'post', |
|||
data:params |
|||
}); |
|||
} |
|||
|
|||
//获取当前用户类别与角色
|
|||
export function getAddRole(params) { |
|||
return request({ |
|||
url: '/api-login/user/getAddRole', |
|||
method: 'get', |
|||
params |
|||
}); |
|||
} |
|||
//更改个人中心信息
|
|||
export function editPersonalCenter(params) { |
|||
return request({ |
|||
url: '/api-login/user/personalCenter', |
|||
method: 'put', |
|||
data:params |
|||
}); |
|||
} |
|||
|
After Width: | Height: | Size: 96 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 648 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
@ -0,0 +1,120 @@ |
|||
<template> |
|||
<div> |
|||
<div class='input_span'> |
|||
<!-- <label style='margin-left:40px;'>强度:</label> --> |
|||
<span id="one_ps"></span> |
|||
<span id="two_ps"></span> |
|||
<span id="three_ps"></span> |
|||
</div> |
|||
<div id="font_ps"> |
|||
<span>弱</span> |
|||
<span>中</span> |
|||
<span>强</span> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:'checkPasswordStrong', |
|||
data(){ |
|||
return { |
|||
msgText:'', |
|||
pwd:'' |
|||
} |
|||
}, |
|||
props:{ |
|||
sValue:{ |
|||
type: String, |
|||
} |
|||
}, |
|||
watch:{ |
|||
sValue(newValue) { |
|||
this.msgText = this.checkStrong(newValue); |
|||
if(this.msgText > 1 || this.msgText == 1) { |
|||
document.getElementById("one_ps").style.background = "red" |
|||
} else { |
|||
document.getElementById("one_ps").style.background = "#eee" |
|||
} |
|||
if(this.msgText > 2 || this.msgText == 2) { |
|||
document.getElementById("two_ps").style.background = "#ff9268" |
|||
} else { |
|||
document.getElementById("two_ps").style.background = "#eee" |
|||
} |
|||
if(this.msgText == 4) { |
|||
document.getElementById("three_ps").style.background = "#00D1B2" |
|||
} else { |
|||
document.getElementById("three_ps").style.background = "#eee" |
|||
} |
|||
} |
|||
}, |
|||
methods:{ |
|||
checkStrong(value) { |
|||
let modes = 0; |
|||
//正则表达式验证符合要求的 |
|||
if(value.length < 1) return modes; |
|||
if(/\d/.test(value)) modes++; //数字 |
|||
if(/[a-z]/.test(value)) modes++; //小写 |
|||
if(/[A-Z]/.test(value)) modes++; //大写 |
|||
if(/\W/.test(value)) modes++; //特殊字符 |
|||
|
|||
//逻辑处理 |
|||
switch(modes) { |
|||
case 1: |
|||
return 1; |
|||
case 2: |
|||
return 2; |
|||
case 3: |
|||
case 4: |
|||
return value.length < 10 ? 3 : 4 |
|||
} |
|||
return modes; |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.input_span,#font_ps { |
|||
line-height: 20px; |
|||
} |
|||
.input_span span { |
|||
display: inline-block; |
|||
width: calc(33% - 3px); |
|||
height: 10px; |
|||
background: #eee; |
|||
line-height: 20px; |
|||
} |
|||
|
|||
#one_ps { |
|||
border-top-left-radius: 5px; |
|||
border-bottom-left-radius: 5px; |
|||
border-right: 0px solid; |
|||
/* margin-left: 20px; */ |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
#two_ps { |
|||
border-left: 0px solid; |
|||
border-right: 0px solid; |
|||
/* margin-left: -5px; */ |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
#three_ps { |
|||
border-top-right-radius: 5px; |
|||
border-bottom-right-radius: 5px; |
|||
border-left: 0px solid; |
|||
/* margin-left: -5px; */ |
|||
} |
|||
#font_ps span:nth-child(1){ |
|||
color:red; |
|||
margin-left: 14%; |
|||
} |
|||
#font_ps span:nth-child(2){ |
|||
color:orange; |
|||
margin: 0 28%; |
|||
} |
|||
#font_ps span:nth-child(3){ |
|||
color:#00D1B2; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,37 @@ |
|||
import 'babel-polyfill' //兼容IE9
|
|||
import Vue from 'vue' |
|||
import ElementUI from 'element-ui' |
|||
import 'element-ui/lib/theme-chalk/index.css' |
|||
// import '@/styles/index.scss' // global css
|
|||
import App from './App.vue' |
|||
import router from './router' |
|||
import store from './store' |
|||
import * as echarts from 'echarts'; |
|||
Vue.prototype.$echarts = echarts |
|||
Vue.config.productionTip = false |
|||
Vue.use(ElementUI) |
|||
|
|||
var template = '001' |
|||
Vue.prototype.$template = template |
|||
require("../public/template/" + template + '/styles/index.scss?v=1.0') |
|||
|
|||
//混入动态获取css与img的方法
|
|||
Vue.mixin({ |
|||
methods: { |
|||
_getCss: function (filePath, fileName) { |
|||
return require("../public/template/" + template + '/' + filePath + '/' + fileName + '/index.scss?v=1.0') |
|||
}, |
|||
_getCss2: function (filePath, fileName) { |
|||
return require("../public/template/" + template + '/' + filePath + '/' + fileName + '?v=1.0') |
|||
}, |
|||
_getImage: function(filePath, fileName) { |
|||
return require("../public/template/" + template + '/img/' + filePath + '/' + fileName) |
|||
} |
|||
} |
|||
}) |
|||
|
|||
new Vue({ |
|||
router, |
|||
store, |
|||
render: h => h(App) |
|||
}).$mount('#app') |
|||
@ -0,0 +1,188 @@ |
|||
import Vue from 'vue' |
|||
import VueRouter from 'vue-router' |
|||
import Layout from '../views/layout/Layout.vue'; |
|||
Vue.use(VueRouter) |
|||
|
|||
const routes = [ |
|||
{ |
|||
path: '', |
|||
component: Layout, |
|||
name: '', |
|||
children: [ |
|||
{ |
|||
path: '', |
|||
name: 'home', |
|||
hidden: true, |
|||
component: () => import ('../views/home/index.vue'), |
|||
meta: { title: '首页', icon: 'register', noCache: true }, |
|||
}, |
|||
{ |
|||
path: 'union', |
|||
name: 'union', |
|||
meta: { title: '关于联盟', icon: 'register', noCache: true }, |
|||
children: [ |
|||
{ |
|||
path: 'introduce', |
|||
name: 'introduceUnion', |
|||
meta: {title: '联盟介绍', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'rules', |
|||
name: 'rulesUnion', |
|||
meta: {title: '联盟章程', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'frame', |
|||
name: 'frameUnion', |
|||
meta: {title: '组织架构', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'member', |
|||
name: 'memberUnion', |
|||
meta: {title: '联盟成员', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'us', |
|||
name: 'usUnion', |
|||
meta: {title: '联系我们', icon: 'register', noCache: true}, |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'meeting', |
|||
name: 'meeting', |
|||
meta: { title: '互联网大会', icon: 'register', noCache: true }, |
|||
children: [ |
|||
{ |
|||
path: 'introduce', |
|||
name: 'introduceMeeting', |
|||
meta: {title: '大会介绍', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'schedule', |
|||
name: 'scheduleMeeting', |
|||
meta: {title: '会议日程', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'news', |
|||
name: 'newsMeeting', |
|||
meta: {title: '大会新闻', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'replay', |
|||
name: 'replayMeeting', |
|||
meta: {title: '大会回看', icon: 'register', noCache: true}, |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'forum', |
|||
name: 'forum', |
|||
meta: { title: '转型升级论坛', icon: 'register', noCache: true }, |
|||
children: [ |
|||
{ |
|||
path: 'introduce', |
|||
name: 'introduceForum', |
|||
meta: {title: '论坛介绍', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'schedule', |
|||
name: 'scheduleForum', |
|||
meta: {title: '论坛日程', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'news', |
|||
name: 'newsForum', |
|||
meta: {title: '论坛新闻', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'replay', |
|||
name: 'replayForum', |
|||
meta: {title: '论坛回顾', icon: 'register', noCache: true}, |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'harvest', |
|||
name: 'harvest', |
|||
meta: { title: '联盟成果', icon: 'register', noCache: true }, |
|||
children: [ |
|||
{ |
|||
path: 'whitepaper', |
|||
name: 'whitepaper', |
|||
meta: {title: '白皮书', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'benchmark', |
|||
name: 'benchmark', |
|||
meta: {title: '技术标准', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'electronicMeetings ', |
|||
name: 'electronicMeetings ', |
|||
meta: {title: '电子会刊', icon: 'register', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'example', |
|||
name: 'example', |
|||
meta: {title: '应用案例', icon: 'register', noCache: true}, |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
path: 'public', |
|||
name: 'public', |
|||
meta: { title: '公共服务', icon: 'register', noCache: true }, |
|||
children: [ |
|||
{ |
|||
path: 'platform', |
|||
name: 'platform', |
|||
meta: {title: '平台', icon: 'register', noCache: true}, |
|||
} |
|||
] |
|||
}, |
|||
{path: '/login', name: 'login', component: () => import('@/views/login/index.vue'), hidden: true}, |
|||
{ |
|||
path: 'editPassword', |
|||
component: () => import('@/views/login/editPassword.vue'), |
|||
name: 'editPassword', |
|||
hidden: true, |
|||
meta: {title: '修改密码', icon: 'eye', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'userInfo', |
|||
component: () => import('@/views/login/userInfo.vue'), |
|||
name: 'userInfo', |
|||
hidden: true, |
|||
meta: {title: '个人中心', icon: 'eye', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'register', |
|||
component: () => import('@/views/login/register.vue'), |
|||
name: 'register', |
|||
hidden: true, |
|||
meta: {title: '注册', icon: 'eye', noCache: true}, |
|||
}, |
|||
{ |
|||
path: 'retrievePassword', |
|||
component: () => import('@/views/login/retrievePassword.vue'), |
|||
name: 'retrievePassword', |
|||
hidden: true, |
|||
meta: {title: '找回密码', icon: 'eye', noCache: true}, |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
path: '/404', |
|||
component: () => |
|||
import ('../views/404.vue'), |
|||
hidden: true |
|||
}, |
|||
{ path: '*', redirect: '/404', hidden: true } |
|||
] |
|||
|
|||
const router = new VueRouter({ |
|||
routes |
|||
}) |
|||
|
|||
export default router |
|||
@ -0,0 +1,30 @@ |
|||
import Vue from 'vue' |
|||
import Vuex from 'vuex' |
|||
|
|||
Vue.use(Vuex) |
|||
import { setTitle,getTitle } from '@/utils/auth' |
|||
export default new Vuex.Store({ |
|||
state: { |
|||
title:getTitle() || '北京顺鑫控股集团有限公司二级节点' |
|||
}, |
|||
mutations: { |
|||
SET_TITLE: (state, token) => { |
|||
state.token = token; |
|||
}, |
|||
}, |
|||
actions: { |
|||
// 标题变化
|
|||
changeTitle({ commit }, title) { |
|||
return new Promise(resolve => { |
|||
setTitle(title) |
|||
commit('SET_TITLE', title); |
|||
resolve(); |
|||
}); |
|||
}, |
|||
}, |
|||
modules: { |
|||
}, |
|||
getters: { |
|||
title: state => state.title |
|||
} |
|||
}) |
|||
@ -0,0 +1,14 @@ |
|||
import Cookies from 'js-cookie' |
|||
|
|||
const title = 'COCKPIT-TITLE'; |
|||
|
|||
export function getTitle() { |
|||
return Cookies.get(title) |
|||
} |
|||
export function setTitle(token) { |
|||
return Cookies.set(title, token) |
|||
} |
|||
export function removeTitle() { |
|||
return Cookies.remove(title) |
|||
} |
|||
|
|||
@ -0,0 +1,112 @@ |
|||
import axios from 'axios' |
|||
import { Message, MessageBox } from 'element-ui' |
|||
import store from '../store/index' |
|||
import qs from 'qs' |
|||
import router from '@/router' |
|||
axios.defaults.withCredentials = true; |
|||
var isToken = true |
|||
// 创建axios实例
|
|||
const service = axios.create({ |
|||
baseURL: config.API_URL, // api 的 base_url
|
|||
// baseURL: "http://192.168.1.207:8085", // api 的 base_url
|
|||
//timeout: 5000 // 请求超时时间
|
|||
// headers: {
|
|||
// crossDomain: true,
|
|||
// "Content-Type": 'application/json'
|
|||
// }
|
|||
}) |
|||
|
|||
// request拦截器
|
|||
service.interceptors.request.use((config) => { |
|||
// let isKey = false
|
|||
// if (store.getters.token && !config.isLogin) {
|
|||
// config.headers['token'] = getToken()
|
|||
// }
|
|||
|
|||
if (config.method == 'post' || config.method == 'put') { |
|||
// let sData = ''
|
|||
|
|||
// for (const i in config.data) {
|
|||
// const item = config.data[i];
|
|||
// sData += item + ","
|
|||
// }
|
|||
// store.getters.keys.forEach(item => {
|
|||
// if (sData.indexOf(item) != -1) {
|
|||
// isKey = true
|
|||
// }
|
|||
// });
|
|||
// config.data = qs.stringify(config.data)
|
|||
// qs.stringify(config.params, { indices: false })
|
|||
} else if (config.method == 'get') { |
|||
config.paramsSerializer = params => { |
|||
return qs.stringify(params, { indices: false }) |
|||
} |
|||
} |
|||
// if (isKey) {
|
|||
// Message({
|
|||
// message: '输入内容包含敏感字符。',
|
|||
// type: 'error',
|
|||
// duration: 5 * 1000
|
|||
// })
|
|||
// Promise.reject('输入内容包含敏感字符。')
|
|||
// } else {
|
|||
return config |
|||
// }
|
|||
|
|||
}, (error) => { |
|||
// Do something with request error
|
|||
console.log(error) // for debug
|
|||
Promise.reject(error) |
|||
}) |
|||
|
|||
// respone拦截器
|
|||
service.interceptors.response.use( |
|||
(response) => { |
|||
/** |
|||
* code为非20000是抛错 可结合自己业务进行修改 |
|||
*/ |
|||
const res = response.data |
|||
// const res = JSON.parse(response.data)
|
|||
if (res.code !== 200) { |
|||
|
|||
// 300:失效的token;
|
|||
if (res.code === 511) { |
|||
if (isToken) { |
|||
isToken = false |
|||
MessageBox.alert('你已被登出，请重新登录', '确定登出', { |
|||
confirmButtonText: '重新登录', |
|||
type: 'warning', |
|||
callback: () => { |
|||
store.dispatch('FedLogOut').then(() => { |
|||
isToken = true |
|||
router.replace({ name: 'login' }) |
|||
// location.reload();
|
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
} else { |
|||
Message({ |
|||
message: res.msg, |
|||
type: 'error', |
|||
duration: 5 * 1000 |
|||
}) |
|||
} |
|||
return Promise.reject(res) |
|||
} else { |
|||
return response.data |
|||
} |
|||
}, |
|||
(error) => { |
|||
console.log('err' + error)// for debug
|
|||
const res = error.response.data; |
|||
Message({ |
|||
message: res.msg, |
|||
type: 'error', |
|||
duration: 3 * 1000 |
|||
}) |
|||
return Promise.reject(error) |
|||
} |
|||
) |
|||
|
|||
export default service |
|||
@ -0,0 +1,48 @@ |
|||
/** |
|||
* Created by qinshunyu |
|||
*/ |
|||
|
|||
/* 合法身份证ID*/ |
|||
export function validateIDCard(textval) { |
|||
const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; |
|||
return reg.test(textval) |
|||
} |
|||
/* 校验邮箱*/ |
|||
export function validateEmail(str) { |
|||
var checkEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; |
|||
return checkEmail.test(str) |
|||
} |
|||
/* 检验手机号ID*/ |
|||
export function validatePhone(textval) { |
|||
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/ |
|||
return reg.test(textval) |
|||
} |
|||
|
|||
/* 合法uri*/ |
|||
export function validateURL(textval) { |
|||
const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/ |
|||
return urlregex.test(textval) |
|||
} |
|||
|
|||
/* 小写字母*/ |
|||
export function validateLowerCase(str) { |
|||
const reg = /^[a-z]+$/ |
|||
return reg.test(str) |
|||
} |
|||
|
|||
/* 大写字母*/ |
|||
export function validateUpperCase(str) { |
|||
const reg = /^[A-Z]+$/ |
|||
return reg.test(str) |
|||
} |
|||
|
|||
/* 大小写字母*/ |
|||
export function validatAlphabets(str) { |
|||
const reg = /^[A-Za-z]+$/ |
|||
return reg.test(str) |
|||
} |
|||
/*校验中文*/ |
|||
export function validateChinese(str) { |
|||
const reg = /[\u4E00-\u9FA5]/ |
|||
return reg.test(str) |
|||
} |
|||
@ -0,0 +1,229 @@ |
|||
<template> |
|||
<div class="wscn-http404-container"> |
|||
<div class="wscn-http404"> |
|||
<div class="pic-404"> |
|||
<img class="pic-404__parent" src="@/assets/404_images/building.png"> |
|||
<img class="pic-404__child left" src="@/assets/404_images/404_cloud.png"> |
|||
<img class="pic-404__child mid" src="@/assets/404_images/404_cloud.png"> |
|||
<img class="pic-404__child right" src="@/assets/404_images/404_cloud.png"> |
|||
</div> |
|||
<div class="bullshit"> |
|||
<div class="bullshit__oops">OOPS!</div> |
|||
<div class="bullshit__info">版权所有 |
|||
<a class="link-type" href="https://www.000860.com/sxkg/index.aspx" target="_blank">顺鑫农业</a> |
|||
</div> |
|||
<div class="bullshit__headline">{{ message }}</div> |
|||
<!-- <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div> --> |
|||
<br> |
|||
<a href="" class="bullshit__return-home">返回首页</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: 'Page404', |
|||
computed: { |
|||
message() { |
|||
return '网管说这个页面你不能进......' |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.wscn-http404-container{ |
|||
transform: translate(-50%,-50%); |
|||
position: absolute; |
|||
top: 40%; |
|||
left: 50%; |
|||
} |
|||
.wscn-http404 { |
|||
position: relative; |
|||
width: 1200px; |
|||
padding: 0 50px; |
|||
overflow: hidden; |
|||
.pic-404 { |
|||
position: relative; |
|||
float: left; |
|||
width: 600px; |
|||
overflow: hidden; |
|||
&__parent { |
|||
width: 100%; |
|||
} |
|||
&__child { |
|||
position: absolute; |
|||
&.left { |
|||
width: 80px; |
|||
top: 17px; |
|||
left: 220px; |
|||
opacity: 0; |
|||
animation-name: cloudLeft; |
|||
animation-duration: 2s; |
|||
animation-timing-function: linear; |
|||
animation-fill-mode: forwards; |
|||
animation-delay: 1s; |
|||
} |
|||
&.mid { |
|||
width: 46px; |
|||
top: 10px; |
|||
left: 420px; |
|||
opacity: 0; |
|||
animation-name: cloudMid; |
|||
animation-duration: 2s; |
|||
animation-timing-function: linear; |
|||
animation-fill-mode: forwards; |
|||
animation-delay: 1.2s; |
|||
} |
|||
&.right { |
|||
width: 62px; |
|||
top: 100px; |
|||
left: 500px; |
|||
opacity: 0; |
|||
animation-name: cloudRight; |
|||
animation-duration: 2s; |
|||
animation-timing-function: linear; |
|||
animation-fill-mode: forwards; |
|||
animation-delay: 1s; |
|||
} |
|||
@keyframes cloudLeft { |
|||
0% { |
|||
top: 17px; |
|||
left: 220px; |
|||
opacity: 0; |
|||
} |
|||
20% { |
|||
top: 33px; |
|||
left: 188px; |
|||
opacity: 1; |
|||
} |
|||
80% { |
|||
top: 81px; |
|||
left: 92px; |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
top: 97px; |
|||
left: 60px; |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes cloudMid { |
|||
0% { |
|||
top: 10px; |
|||
left: 420px; |
|||
opacity: 0; |
|||
} |
|||
20% { |
|||
top: 40px; |
|||
left: 360px; |
|||
opacity: 1; |
|||
} |
|||
70% { |
|||
top: 130px; |
|||
left: 180px; |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
top: 160px; |
|||
left: 120px; |
|||
opacity: 0; |
|||
} |
|||
} |
|||
@keyframes cloudRight { |
|||
0% { |
|||
top: 100px; |
|||
left: 500px; |
|||
opacity: 0; |
|||
} |
|||
20% { |
|||
top: 120px; |
|||
left: 460px; |
|||
opacity: 1; |
|||
} |
|||
80% { |
|||
top: 180px; |
|||
left: 340px; |
|||
opacity: 1; |
|||
} |
|||
100% { |
|||
top: 200px; |
|||
left: 300px; |
|||
opacity: 0; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.bullshit { |
|||
position: relative; |
|||
float: left; |
|||
width: 300px; |
|||
padding: 30px 0; |
|||
overflow: hidden; |
|||
&__oops { |
|||
font-size: 32px; |
|||
font-weight: bold; |
|||
line-height: 40px; |
|||
color: #1482f0; |
|||
opacity: 0; |
|||
margin-bottom: 20px; |
|||
animation-name: slideUp; |
|||
animation-duration: 0.5s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
&__headline { |
|||
font-size: 20px; |
|||
line-height: 24px; |
|||
color: #222; |
|||
font-weight: bold; |
|||
opacity: 0; |
|||
margin-bottom: 10px; |
|||
animation-name: slideUp; |
|||
animation-duration: 0.5s; |
|||
animation-delay: 0.1s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
&__info { |
|||
font-size: 13px; |
|||
line-height: 21px; |
|||
color: grey; |
|||
opacity: 0; |
|||
margin-bottom: 30px; |
|||
animation-name: slideUp; |
|||
animation-duration: 0.5s; |
|||
animation-delay: 0.2s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
&__return-home { |
|||
display: block; |
|||
float: left; |
|||
width: 110px; |
|||
height: 36px; |
|||
background: #1482f0; |
|||
border-radius: 100px; |
|||
text-align: center; |
|||
color: #ffffff; |
|||
opacity: 0; |
|||
font-size: 14px; |
|||
line-height: 36px; |
|||
cursor: pointer; |
|||
animation-name: slideUp; |
|||
animation-duration: 0.5s; |
|||
animation-delay: 0.3s; |
|||
animation-fill-mode: forwards; |
|||
} |
|||
@keyframes slideUp { |
|||
0% { |
|||
transform: translateY(60px); |
|||
opacity: 0; |
|||
} |
|||
100% { |
|||
transform: translateY(0); |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 7.4 KiB |
@ -0,0 +1,168 @@ |
|||
<template> |
|||
<div class="guide-slider" id="guideSlider"> |
|||
<ul class="guide-list"> |
|||
<li class="guide on"> |
|||
<div class="display"> |
|||
<div class="icon icon1 animated flipInY"></div> |
|||
<div class="title">工业互联网公共</div> |
|||
<div class="title">服务平台</div> |
|||
<!-- <div class="introduction">提升宝贝搜索排名，玩转免费流量</div> --> |
|||
</div> |
|||
<div class="behind"> |
|||
<div class="function-list-wrap"> |
|||
<ul class="function-list"> |
|||
<li class="function corner corner-hot"> |
|||
<a href>公众服务</a> |
|||
</li> |
|||
<li class="function corner"> |
|||
<a href>企业服务</a> |
|||
</li> |
|||
<li class="function corner"> |
|||
<a href>标识管理</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>政府监管服务</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
<li class="guide"> |
|||
<div class="display"> |
|||
<div class="icon icon2 animated flipInY"></div> |
|||
<div class="title">区域（园区）工业</div> |
|||
<div class="title">互联网服务平台</div> |
|||
<!-- <div class="introduction">抓住每一个流量，千方百计促使成交</div> --> |
|||
</div> |
|||
<div class="behind"> |
|||
<div class="function-list-wrap"> |
|||
<ul class="function-list"> |
|||
<li class="function"> |
|||
<a href>园区服务</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>园区标识管理</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>供应链管理</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
<li class="guide"> |
|||
<div class="display"> |
|||
<div class="icon icon3 animated flipInY"></div> |
|||
<div class="title">食品工业互联网</div> |
|||
<div class="title">企业服务平台</div> |
|||
<!-- <div class="introduction">优质模板，增加客户停留时间</div> --> |
|||
</div> |
|||
<div class="behind"> |
|||
<div class="function-list-wrap"> |
|||
<ul class="function-list"> |
|||
<li class="function"> |
|||
<a href>智慧种养殖</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>生产信息化</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>标识管理</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>冷链监管</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>区块链溯源</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
<li class="guide"> |
|||
<div class="display"> |
|||
<div class="icon icon4 animated flipInY"></div> |
|||
<div class="title">工业互联网标识解析</div> |
|||
<div class="title">数据处理平台</div> |
|||
<!-- <div class="introduction">恋爱式关怀，提升客户购物体验</div> --> |
|||
</div> |
|||
<div class="behind"> |
|||
<div class="function-list-wrap"> |
|||
<ul class="function-list"> |
|||
<li class="function"> |
|||
<a href>数据存储</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>数据服务</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>数据治理</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>数据计算</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>数据清洗</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</li> |
|||
<!-- <li class="guide"> |
|||
<div class="display"> |
|||
<div class="icon icon5 animated flipInY"></div> |
|||
<div class="title">提升效率</div> |
|||
<div class="introduction">用全能掌柜，让您轻轻松松做掌柜</div> |
|||
</div> |
|||
<div class="behind"> |
|||
<div class="function-list-wrap"> |
|||
<ul class="function-list"> |
|||
<li class="function"> |
|||
<a href>自动上下架</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>橱窗推荐</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>手机详情</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>官方流量</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>群发短信</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>指定发送</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>二次营销</a> |
|||
</li> |
|||
<li class="function"> |
|||
<a href>跨店营销</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</li>--> |
|||
</ul> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import $ from "jquery"; |
|||
import "./jQueryCssSfq.css"; |
|||
export default { |
|||
name: "jquerySfq", |
|||
mounted() { |
|||
var $guideSlider = $("#guideSlider").eq(0); |
|||
|
|||
$guideSlider.find(".guide-list .guide").hover(function() { |
|||
$(this) |
|||
.addClass("on") |
|||
.siblings() |
|||
.removeClass("on"); |
|||
}); |
|||
} |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,210 @@ |
|||
/* * { |
|||
margin: 0; |
|||
padding: 0; |
|||
box-sizing: border-box |
|||
} |
|||
|
|||
ul, |
|||
ol { |
|||
list-style: none |
|||
} |
|||
|
|||
body { |
|||
font-family: microsoft yahei; |
|||
background: #f0f0f0; |
|||
font-size: 14px |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none |
|||
} */ |
|||
|
|||
.guide-slider { |
|||
width: 1050px; |
|||
margin: 5% auto 2%; |
|||
background: #fff; |
|||
height: 260px |
|||
} |
|||
|
|||
.guide-slider .guide { |
|||
width: 200px; |
|||
height: 260px; |
|||
float: left; |
|||
-webkit-transition: all ease-in .3s; |
|||
transition: all ease-in .3s; |
|||
position: relative; |
|||
overflow: hidden |
|||
} |
|||
|
|||
.guide-slider .guide .display { |
|||
border-right: 1px solid #d5d5d5; |
|||
width: 200px; |
|||
height: 260px; |
|||
text-align: center; |
|||
float: left; |
|||
position: relative; |
|||
z-index: 2; |
|||
background: #fff; |
|||
-webkit-transition: all ease-in .3s; |
|||
transition: all ease-in .3s |
|||
} |
|||
|
|||
.guide-slider .guide .display .icon { |
|||
display: inline-block; |
|||
width: 74px; |
|||
height: 74px; |
|||
margin-top: 42px; |
|||
border: 1px solid #DDDDDD; |
|||
border-radius: 50%; |
|||
background-color: #fff; |
|||
background-image: url('../../../assets/product/product-sprite.png') |
|||
} |
|||
|
|||
.guide-slider .guide .display .icon.icon1 { |
|||
background-position: -82px -283px; |
|||
} |
|||
|
|||
.guide-slider .guide .display .icon.icon2 { |
|||
background-position: -180px -283px; |
|||
} |
|||
|
|||
.guide-slider .guide .display .icon.icon3 { |
|||
background-position: -285px -283px; |
|||
} |
|||
|
|||
.guide-slider .guide .display .icon.icon4 { |
|||
background-position: -380px -283px; |
|||
} |
|||
|
|||
.guide-slider .guide .display .icon.icon5 { |
|||
background-position: -518px 0 |
|||
} |
|||
|
|||
.guide-slider .guide .display .title { |
|||
font-size: 16px; |
|||
color: #666; |
|||
height: 40px; |
|||
line-height: 40px |
|||
} |
|||
|
|||
.guide-slider .guide .display .introduction { |
|||
border-top: 1px solid #ddd; |
|||
width: 150px; |
|||
margin: 0 auto; |
|||
font-size: 12px; |
|||
color: #999; |
|||
text-align: left; |
|||
line-height: 20px |
|||
} |
|||
|
|||
.guide-slider .guide .display::after { |
|||
content: ""; |
|||
display: block; |
|||
position: absolute; |
|||
border-style: solid; |
|||
border-color: transparent #fff transparent transparent; |
|||
border-width: 10px 15px; |
|||
top: 100%; |
|||
margin-top: 0; |
|||
right: -1px; |
|||
-webkit-transition: all ease-in .3s; |
|||
transition: all ease-in .3s |
|||
} |
|||
|
|||
.guide-slider .guide .behind { |
|||
width: 250px; |
|||
height: 260px; |
|||
display: inline-block; |
|||
border-right: 1px solid #ddd; |
|||
background: #fff; |
|||
overflow: hidden; |
|||
position: absolute; |
|||
right: 0; |
|||
top: 0; |
|||
z-index: 1 |
|||
} |
|||
|
|||
.guide-slider .guide .behind .function-list-wrap { |
|||
width: 210px; |
|||
margin: 0 auto |
|||
} |
|||
|
|||
.guide-slider .guide .behind .function-list { |
|||
/* margin-right: -10px; */ |
|||
margin-top: 20px |
|||
} |
|||
|
|||
.guide-slider .guide .behind .function-list>li { |
|||
float: left; |
|||
padding-right: 10px |
|||
} |
|||
|
|||
.guide-slider .guide .behind .function-list>li>a { |
|||
display: block; |
|||
border: 1px solid #ddd; |
|||
width: 200px; |
|||
height: 40px; |
|||
text-align: center; |
|||
line-height: 40px; |
|||
margin-bottom: 6px; |
|||
color: #DF3434; |
|||
} |
|||
|
|||
.guide-slider .guide .behind .function-list>li>a:hover { |
|||
text-decoration: none; |
|||
border: 1px solid #DF3434; |
|||
background: #DF3434; |
|||
color: #fff |
|||
} |
|||
|
|||
.guide-slider .guide .behind .function-list>li>a.important { |
|||
color: #f58914 |
|||
} |
|||
|
|||
.guide-slider .guide .behind .function-list>li>a.important:hover { |
|||
border: 1px solid #f58914; |
|||
background: #f58914; |
|||
color: #fff |
|||
} |
|||
|
|||
.guide-slider .guide.on { |
|||
width: 450px |
|||
} |
|||
|
|||
.guide-slider .guide.on .display { |
|||
background: #DF3434; |
|||
border-right-color: transparent |
|||
} |
|||
|
|||
.guide-slider .guide.on .display .title { |
|||
color: #fff |
|||
} |
|||
|
|||
.guide-slider .guide.on .display .introduction { |
|||
color: #fff |
|||
} |
|||
|
|||
.guide-slider .guide.on .display::after { |
|||
top: 50%; |
|||
margin-top: -5px |
|||
} |
|||
|
|||
.guide-slider .guide.on .display .icon.icon1 { |
|||
background-position: -82px -183px; |
|||
} |
|||
|
|||
.guide-slider .guide.on .display .icon.icon2 { |
|||
background-position: -180px -183px; |
|||
} |
|||
|
|||
.guide-slider .guide.on .display .icon.icon3 { |
|||
background-position: -285px -183px; |
|||
} |
|||
|
|||
.guide-slider .guide.on .display .icon.icon4 { |
|||
background-position: -380px -183px; |
|||
} |
|||
|
|||
.guide-slider .guide.on .display .icon.icon5 { |
|||
background-position: -666px 0 |
|||
} |
|||
@ -0,0 +1,241 @@ |
|||
<template> |
|||
<div class="main-content"> |
|||
<div class="block1"> |
|||
<div class="block1-carousel"> |
|||
<el-carousel height="450px"> |
|||
<el-carousel-item v-for="item in carouselPicList" :key="item"> |
|||
<img style="height:450px;width:100%;" :src="item" /> |
|||
</el-carousel-item> |
|||
</el-carousel> |
|||
</div> |
|||
<div class="block1-about"> |
|||
<div class="about-box"> |
|||
<span class="title-1">联盟介绍 <span class="font-size-16">about ></span></span> |
|||
<p class="content">在工业和信息化部的大力支持和指导下，由中国信息通信研究院联合制造业、通信业、互联网等企业于2016年2月1日共同发起成立..</p> |
|||
<a class="content float-right">查看更多 >></a> |
|||
</div> |
|||
<div class="other-box flex-box"> |
|||
<div class="button flex-1"><i class="el-icon-document"></i>章程</div> |
|||
<div class="button flex-1"><i class="el-icon-user-solid"></i>成员</div> |
|||
<div class="button flex-1"><i class="el-icon-s-management"></i>组织构架</div> |
|||
</div> |
|||
<div class="other-box flex-box"> |
|||
<div class="button flex-1"><i class="el-icon-user"></i>加入联盟</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="block2"> |
|||
<el-row> |
|||
<el-col :span="9"> |
|||
<div> |
|||
<span class="title-2">联盟动态 <span class="font-size-16">News ></span></span> |
|||
</div> |
|||
<div class="notice-list" v-for="(item,index) in noticeList.slice(0,3)" :key="index"> |
|||
<div class="date-block"> |
|||
<p class="text-Date">{{item.sendtime.split('-')[0]}}</p> |
|||
<p class="text-content text-center">{{item.sendtime.split('-')[1]}}/{{item.sendtime.split('-')[2]}}</p> |
|||
</div> |
|||
<div class="content-block"> |
|||
<p class="text-title">{{item.title}}</p> |
|||
<p class="text-content">{{item.content.replace(/<[^>]+>/g,"")}}</p> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="9"> |
|||
<span class="title-2">行业资讯 <span class="font-size-16">Information ></span></span> |
|||
<div class="notice-list" v-for="(item,index) in noticeList.slice(0,3)" :key="index"> |
|||
<div class="date-block"> |
|||
<p class="text-Date">{{item.sendtime.split('-')[0]}}</p> |
|||
<p class="text-content text-center">{{item.sendtime.split('-')[1]}}/{{item.sendtime.split('-')[2]}}</p> |
|||
</div> |
|||
<div class="content-block"> |
|||
<p class="text-title">{{item.title}}</p> |
|||
<p class="text-content">{{item.content.replace(/<[^>]+>/g,"")}}</p> |
|||
</div> |
|||
</div> |
|||
</el-col> |
|||
<el-col :span="6"></el-col> |
|||
</el-row> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:'home', |
|||
data(){ |
|||
return { |
|||
carouselPicList:[ |
|||
require('../../assets/home/carousel-1.png'), |
|||
require('../../assets/home/carousel-2.png'), |
|||
require('../../assets/home/carousel-3.png'), |
|||
], |
|||
noticeList:[ //通知列表 |
|||
{sendtime:'2020-05-10',title:'工业和信息化部办公厅关于推动工业互联网加快发展',content:'各省、自治区、直辖市及计划单列市、新疆生产建设兵团工业和信息化主 管部门，各省、自治区、直辖市通信管理局，中国电信集团有限公司。'}, |
|||
{sendtime:'2020-05-09',title:'工业和信息化部办公厅关于公布2019年工业互联网试',content:'各省、自治区、直辖市及计划单列市工业和信息化主管部门，各省、自治区 、直辖市通信管理局，各有关单位。'}, |
|||
{sendtime:'2020-05-08',title:'北京市经济和信息化局关于开展2020年工信部工业互',content:'各有关单位：根据工信部及我局工作安排，现将2020年工信部工业互联网 创新发展工程项目（以下简称“项目”）有关工作通知如下。'}, |
|||
{sendtime:'2020-05-07',title:'江门市工业和信息化局转发关于组织推进 “5G+工业”',content:'各市（含定州、辛集市）工业和信息化局、通信发展管理办公室，中国联通 河北分公司、中国电信河北分公司、中国移动河北分公司、河北广电网络。'}, |
|||
{sendtime:'2020-05-08',title:'关于进一步加快工业互联网发展的通知',content:'各省、自治区、直辖市及计划单列市工业和信息化主管部门，各省、自治区 、直辖市通信管理局，各有关单位。'}, |
|||
{sendtime:'2020-05-07',title:'关于天津市钢铁、水泥企业 2018年度工序单位产品',content:'按照工业和信息化部《2019年工业节能监察重点工作计划》（工信部节函 〔2019〕77号）和《关于下达2019年国家重大工业节能监察任务及经费。'}, |
|||
], |
|||
} |
|||
} |
|||
|
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.block1 { |
|||
position: relative; |
|||
width:100%; |
|||
margin: 50px 0; |
|||
.block1-carousel { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
width: 66.6%; |
|||
height: 450px; |
|||
} |
|||
.block1-about { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 33.3%; |
|||
height: 450px; |
|||
.about-box { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 340px; |
|||
background: url('../../assets/home/about_bg.png'); |
|||
// background-size: 100% 100%; |
|||
} |
|||
.other-box { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 55px; |
|||
.button { |
|||
position: relative; |
|||
cursor: pointer; |
|||
color: #fff; |
|||
height: 55px; |
|||
line-height: 55px; |
|||
text-align: center; |
|||
font-size: 20px; |
|||
background: #3b8bb2; |
|||
border: 1px solid rgba(255,255,255,0.6); |
|||
&:hover { |
|||
background: #3b8bb27a; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.block2 { |
|||
position: relative; |
|||
width: 100%; |
|||
margin: 50xp 0; |
|||
} |
|||
.title-1 { |
|||
position: relative; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
height: 60px; |
|||
line-height: 60px; |
|||
margin: 15px; |
|||
font-size: 26px; |
|||
color: #fff; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0px; |
|||
width: 50px; |
|||
height: 2px; |
|||
background: #fff; |
|||
transition: All 0.3s ease-in-out; |
|||
} |
|||
&:hover { |
|||
&::before { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.content { |
|||
position: relative; |
|||
line-height: 30px; |
|||
margin: 15px; |
|||
font-size: 14px; |
|||
color: rgba(255,255,255,0.8); |
|||
} |
|||
.title-2 { |
|||
position: relative; |
|||
display: inline-block; |
|||
cursor: pointer; |
|||
height: 60px; |
|||
line-height: 60px; |
|||
margin: 15px; |
|||
font-size: 26px; |
|||
color: #000; |
|||
&::before { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: 0px; |
|||
width: 50px; |
|||
height: 2px; |
|||
background: rgb(58, 75, 228); |
|||
transition: All 0.3s ease-in-out; |
|||
} |
|||
&:hover { |
|||
&::before { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
.notice-list { |
|||
height: 94px; |
|||
background-color: rgba(255,255,255,0); |
|||
color: #999999; |
|||
font-family:PingFang SC; |
|||
border-bottom: 1px dotted #dcdcdc; |
|||
margin: 10px 20px; |
|||
.date-block { |
|||
position: relative; |
|||
display: inline-block; |
|||
vertical-align: top; |
|||
width: 67px; |
|||
height: 67px; |
|||
margin: 10px 10px 10px 0; |
|||
padding: 13px 0; |
|||
background-color: #E4E4E4; |
|||
} |
|||
.content-block { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: calc(100% - 90px); |
|||
padding: 0 15px; |
|||
} |
|||
.text-Date { |
|||
text-align: center; |
|||
font-size: 16px; |
|||
} |
|||
.text-title { |
|||
font-size: 18px; |
|||
margin: 6px 0; |
|||
font-weight:500; |
|||
color: #666666; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
.text-content { |
|||
font-size: 14px; |
|||
overflow: hidden; |
|||
display: -webkit-box; |
|||
-webkit-line-clamp:2; |
|||
-webkit-box-orient: vertical; |
|||
} |
|||
&:hover { |
|||
.text-title { |
|||
color: #3893c7; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,54 @@ |
|||
<template> |
|||
<div class="app-wrapper"> |
|||
<my-header class="header-sidebar-container"></my-header> |
|||
<AppMain></AppMain> |
|||
<my-footer></my-footer> |
|||
<myScroll></myScroll> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { myHeader,AppMain,myFooter,myScroll } from "./components"; |
|||
|
|||
export default { |
|||
name: "Layout", |
|||
components: { |
|||
myHeader, |
|||
AppMain, |
|||
myFooter, |
|||
myScroll |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
// @import "src/styles/mixin.scss"; |
|||
.app-wrapper { |
|||
// @include clearfix; |
|||
position: relative; |
|||
height: 100%; |
|||
width: 100%; |
|||
padding-top: 82px; |
|||
min-width: 1200px; |
|||
&.mobile.openSidebar { |
|||
position: fixed; |
|||
top: 0; |
|||
} |
|||
} |
|||
.drawer-bg { |
|||
background: #000; |
|||
opacity: 0.3; |
|||
width: 100%; |
|||
top: 0; |
|||
height: 100%; |
|||
position: absolute; |
|||
z-index: 999; |
|||
} |
|||
/*#app{*/ |
|||
/* .main-container{*/ |
|||
/* .sidebar-container{*/ |
|||
/* width: 200px !important;*/ |
|||
/* }*/ |
|||
/* }*/ |
|||
/*}*/ |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<section class="app-main"> |
|||
<transition name="fade" mode="out-in"> |
|||
<!-- <router-view :key="key"></router-view> --> |
|||
<router-view></router-view> |
|||
<!-- <router-view class="view two" name="second"></router-view> --> |
|||
</transition> |
|||
</section> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'AppMain', |
|||
computed: { |
|||
// key() { |
|||
// return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date() |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
<style> |
|||
.app-main{ |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
|
|||
/* body { |
|||
padding: 20px; |
|||
background:rgba(245,247,250,1); |
|||
} */ |
|||
</style> |
|||
@ -0,0 +1,117 @@ |
|||
<template> |
|||
<!-- <div class="menu-wrapper"> |
|||
<template v-for="item in routes"> |
|||
<template v-if="!item.hidden&&item.children"> |
|||
<router-link v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name"> |
|||
<el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}"> |
|||
<svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon> |
|||
<span v-if="item.children[0].meta&&item.children[0].meta.title" slot="title">{{item.children[0].meta.title}}</span> |
|||
</el-menu-item> |
|||
</router-link> |
|||
|
|||
<el-submenu v-else :index="item.name||item.path" :key="item.name" > |
|||
<template slot="title"> |
|||
<svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon> |
|||
<span v-if="item.meta&&item.meta.title" slot="title">{{item.meta.title}}</span> |
|||
</template> |
|||
<template v-for="child in item.children"> |
|||
<template v-if="!child.hidden"> |
|||
<sidebar-item :is-nest="true" class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item> |
|||
<router-link v-else :to="item.path+'/'+child.path" :key="child.name"> |
|||
<el-menu-item :index="item.path+'/'+child.path"> |
|||
<svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon> |
|||
<span v-if="child.meta&&child.meta.title" slot="title">{{child.meta.title}}</span> |
|||
</el-menu-item> |
|||
</router-link> |
|||
</template> |
|||
</template> |
|||
</el-submenu> |
|||
</template> |
|||
</template> |
|||
</div> --> |
|||
<div class="menu-wrapper"> |
|||
<template v-for="item in routes"> |
|||
<router-link v-bind:target="item.icon == '_blank'?'_blank':''" v-if="!item.children || item.children.length == 0" :to="{path:item.url}" |
|||
:key="item.id"> |
|||
<el-menu-item :index="item.url"> |
|||
<svg-icon v-if="item.icon" :icon-class="item.icon"></svg-icon> |
|||
<span class="myTitle" slot="title">{{item.name}}</span> |
|||
</el-menu-item> |
|||
</router-link> |
|||
|
|||
<el-submenu v-else :index="item.name" :key="item.id"> |
|||
<template slot="title"> |
|||
<!-- <svg-icon v-if="item.icon" :icon-class="item.icon"></svg-icon> --> |
|||
<span class="myTitle" slot="title">{{item.name}}</span> |
|||
</template> |
|||
<template v-for="child in item.children"> |
|||
<router-link v-bind:target="child.icon == '_blank'?'_blank':''" :to="{path:child.url}" :key="child.id"> |
|||
<el-menu-item :index="child.url"> |
|||
<!-- <svg-icon v-if="child.icon" :icon-class="child.icon"></svg-icon> --> |
|||
<span class="myTitle" slot="title">{{child.name}}</span> |
|||
</el-menu-item> |
|||
</router-link> |
|||
</template> |
|||
</el-submenu> |
|||
</template> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
// import {mapGetters} from 'vuex'; |
|||
// import {getRouter} from '@/utils/auth'; |
|||
|
|||
// export default { |
|||
// name: 'SidebarItem', |
|||
// data() { |
|||
// return { |
|||
// routes: [], |
|||
// }; |
|||
// }, |
|||
// computed: { |
|||
// ...mapGetters([ |
|||
// 'router', |
|||
// ]), |
|||
// }, |
|||
// created() { |
|||
// this.routes = getRouter()?getRouter():JSON.parse(this.router); |
|||
// }, |
|||
// }; |
|||
export default { |
|||
name: 'SidebarItem', |
|||
props: { |
|||
routes: { |
|||
type: Array |
|||
}, |
|||
isNest: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
roles: this.$store.getters.roles |
|||
} |
|||
}, |
|||
methods: { |
|||
hasOneShowingChildren(children) { |
|||
const showingChildren = children.filter(item => { |
|||
return !item.hidden |
|||
}) |
|||
if (showingChildren.length === 1) { |
|||
return true |
|||
} |
|||
return false |
|||
}, |
|||
// goRouter(name) { |
|||
// this.$router.push({name:name}); |
|||
// } |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
// .el-menu-item { |
|||
// font-size: 16px !important; |
|||
// } |
|||
</style> |
|||
@ -0,0 +1,63 @@ |
|||
<template> |
|||
<el-scrollbar wrap-class="scrollbar-wrapper"> |
|||
<el-menu |
|||
:default-active="$route.path" |
|||
:collapse="isCollapse" |
|||
:background-color="variables.menuBg" |
|||
:text-color="variables.menuText2" |
|||
:active-text-color="variables.menuActiveText2" |
|||
:collapse-transition="false" |
|||
mode="vertical" |
|||
> |
|||
<sidebar-item :routes="routes"></sidebar-item> |
|||
</el-menu> |
|||
</el-scrollbar> |
|||
</template> |
|||
|
|||
<script> |
|||
import {mapGetters} from 'vuex'; |
|||
import variables from '../../../../../public/template/001/styles/variables.scss'; |
|||
import SidebarItem from './SidebarItem'; |
|||
|
|||
export default { |
|||
components: {SidebarItem}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'sidebar', |
|||
'router', |
|||
'activeIndex' |
|||
]), |
|||
variables() { |
|||
return variables; |
|||
}, |
|||
// routes() { |
|||
// debugger |
|||
// return this.$router.options.routes |
|||
// }, |
|||
isCollapse() { |
|||
return !this.sidebar.opened; |
|||
}, |
|||
}, |
|||
watch:{ |
|||
activeIndex(newVal){ |
|||
let temp = this.router.filter((item)=>{ |
|||
return item.name == newVal |
|||
}) |
|||
this.routes = temp?temp[0].children:[] |
|||
} |
|||
}, |
|||
data(){ |
|||
return { |
|||
routes:[], |
|||
} |
|||
}, |
|||
mounted(){ |
|||
let temp = this.router.filter((item)=>{ |
|||
return item.name == this.activeIndex |
|||
}) |
|||
this.routes = temp?temp[0].children:[] |
|||
|
|||
|
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,36 @@ |
|||
<template> |
|||
<el-footer> |
|||
<span class="copyright"> |
|||
京ICP备09013372号-15 工业互联网产业联盟版权所有 技术支持：福通互联 |
|||
</span> |
|||
</el-footer> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name:'myFooter', |
|||
} |
|||
</script> |
|||
<style scoped> |
|||
.el-footer { |
|||
position: relative; |
|||
bottom: 0px; |
|||
width: 100%; |
|||
background-color:#333333; |
|||
line-height: 60px; |
|||
font-size:14px; |
|||
font-family:PingFang-SC-Regular; |
|||
color:#666666; |
|||
z-index: 5; |
|||
text-align: center; |
|||
} |
|||
.el-footer .copyright { |
|||
position: relative; |
|||
/* margin-left: 15%; */ |
|||
} |
|||
/* .el-footer .hotline { |
|||
position: relative; |
|||
margin-left: 10%; |
|||
} */ |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,182 @@ |
|||
<template> |
|||
<div> |
|||
<el-header style="height:84px;" id="topHeight"> |
|||
<div class="header-content"> |
|||
<router-link to="/"> |
|||
<img class="logo" :src="_getImage('search','logo-small.png')" /> |
|||
<div class="logo" style="vertical-align: bottom;" > |
|||
<p style="background-color: transparent;font-size: 24px;"><b>中国食品工业互联网产业联盟</b></p> |
|||
<p style="font-size: 18px;"><b>China Food Industrial Internet Union</b></p> |
|||
</div> |
|||
<img class="logo2" :src="_getImage('search','logo-small.png')" /> |
|||
</router-link> |
|||
|
|||
<el-menu |
|||
v-if="!onlyShow && $template == '001'" |
|||
class="menu-position" |
|||
:default-active="$route.name" |
|||
:background-color="variables.menuBg" |
|||
:text-color="variables.menuText" |
|||
:active-text-color="variables.menuActiveText" |
|||
:collapse-transition="false" |
|||
mode="horizontal" |
|||
> |
|||
<template v-for="item in routes"> |
|||
<template v-if="!item.hidden&&!item.children"> |
|||
<router-link v-if="!item.hidden" :to="'/'+item.path" :key="item.name"> |
|||
<el-menu-item :key="item.name" :index="item.name"> |
|||
<span>{{item.meta.title}}</span> |
|||
</el-menu-item> |
|||
</router-link> |
|||
</template> |
|||
<template v-else-if="!item.hidden&&item.children&&item.children.length > 0"> |
|||
<el-submenu :index="item.name" :key="item.name"> |
|||
<template slot="title"> |
|||
<span class="myTitle" slot="title">{{item.meta.title}}</span> |
|||
</template> |
|||
<template v-for="child in item.children"> |
|||
<router-link :to="{path:child.path}" :key="child.name"> |
|||
<el-menu-item :index="child.path"> |
|||
<span class="myTitle" slot="title">{{child.meta.title}}</span> |
|||
</el-menu-item> |
|||
</router-link> |
|||
</template> |
|||
</el-submenu> |
|||
</template> |
|||
</template> |
|||
</el-menu> |
|||
</div> |
|||
<div v-if="!onlyShow" class="avatar-container"> |
|||
<!-- <el-button size="mini" class="white-button" @click="login">登录</el-button> --> |
|||
<el-dropdown :style="{'color':variables.menuText,'cursor': 'pointer'}"> |
|||
<div > |
|||
<!-- <img class="user-avatar" src="@/assets/touxiang.png"> --> |
|||
<router-link :to="{'name':'login'}"> |
|||
<span>加入联盟</span> |
|||
</router-link> |
|||
|
|||
</div> |
|||
</el-dropdown> |
|||
</div> |
|||
</el-header> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
//import { mapGetters } from "vuex"; |
|||
//import variables from "@/styles/variables.scss"; |
|||
export default { |
|||
name: "myHeader", |
|||
props: { |
|||
onlyShow: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
// computed: { |
|||
// ...mapGetters(["router"]), |
|||
// variables() { |
|||
// return variables; |
|||
// } |
|||
// }, |
|||
// watch: { |
|||
// router(newVal) { |
|||
// this.routes = this.router; |
|||
// } |
|||
// }, |
|||
data() { |
|||
return { |
|||
routes: [], |
|||
variables:"", |
|||
top:true |
|||
}; |
|||
}, |
|||
created(){ |
|||
this.variables = this._getCss2("styles", "variables.scss") |
|||
var that = this |
|||
window.addEventListener("scroll", that.scroll) |
|||
}, |
|||
mounted() { |
|||
this.routes = this.$router.options.routes[0].children; |
|||
}, |
|||
methods: { |
|||
login() { |
|||
let url = config.LOGIN_URL |
|||
window.open(url); |
|||
}, |
|||
scroll() { |
|||
if(document.documentElement.scrollTop >= 200 && this.top) |
|||
{ |
|||
this.top = false |
|||
window.document.getElementById('topHeight').style.display = 'none' |
|||
} else if(document.documentElement.scrollTop < 200 && !this.top){ |
|||
this.top = true |
|||
window.document.getElementById('topHeight').style.display = 'block' |
|||
} |
|||
} |
|||
}, |
|||
beforeDestroy(){ |
|||
var that = this |
|||
window.removeEventListener('scroll', that.scroll);//监听页面滚动事件 |
|||
} |
|||
}; |
|||
</script> |
|||
<style rel="stylesheet/scss" lang="scss" scoped> |
|||
.logo { |
|||
position: relative; |
|||
top: 7px; |
|||
display: inline-block; |
|||
vertical-align: super; |
|||
margin-right: 10px; |
|||
/* width: 580px; */ |
|||
height: 70px; |
|||
border: 0; |
|||
} |
|||
.logo2 { |
|||
display: none; |
|||
position: relative; |
|||
top: 7px; |
|||
vertical-align: super; |
|||
margin-right: 10px; |
|||
height: 70px; |
|||
border: 0; |
|||
} |
|||
.menu-position { |
|||
float: right; |
|||
padding-right: 10%; |
|||
} |
|||
.avatar-container { |
|||
display: inline-block; |
|||
position: absolute; |
|||
line-height: 84px; |
|||
right: 3%; |
|||
top: 0; |
|||
} |
|||
.white-button { |
|||
background: rgba(255, 255, 255, 0); |
|||
color: #fff; |
|||
border: 1px solid #fff; |
|||
} |
|||
@media screen and (min-width: 1300px) and (max-width: 1500px) { |
|||
.logo { |
|||
// width: 420px; |
|||
height: 70px; |
|||
} |
|||
} |
|||
@media screen and (min-width: 1000px) and (max-width: 1300px) { |
|||
.logo { |
|||
display: none; |
|||
} |
|||
.logo2 { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
@media screen and (max-width: 1000px) { |
|||
.logo { |
|||
display: none; |
|||
} |
|||
.logo2 { |
|||
display: none; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,5 @@ |
|||
// export { default as Sidebar } from './Sidebar'
|
|||
export { default as AppMain } from './AppMain' |
|||
export { default as myHeader } from './header' |
|||
export { default as myFooter } from './footer' |
|||
export { default as myScroll } from './scroll' |
|||
@ -0,0 +1,137 @@ |
|||
<template> |
|||
<div> |
|||
<div class="kefu-block"> |
|||
<div class="kefu-img"></div> |
|||
</div> |
|||
<div class="top-block" v-show="showTop" @click="toTopScroll"> |
|||
<div class="top-img"></div> |
|||
</div> |
|||
</div> |
|||
|
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name:'myScroll', |
|||
data(){ |
|||
return { |
|||
screenHeight:window.screen.height, |
|||
showTop:false |
|||
} |
|||
}, |
|||
mounted(){ |
|||
let timeout = null |
|||
window.onscroll = ()=>{ |
|||
if (timeout) clearTimeout(timeout) |
|||
timeout = setTimeout(() => { |
|||
let scrollT = window.pageYOffset; |
|||
if(scrollT > this.screenHeight) |
|||
{ |
|||
this.showTop = true |
|||
} else { |
|||
this.showTop = false |
|||
} |
|||
|
|||
}, 500); |
|||
} |
|||
}, |
|||
methods:{ |
|||
toTopScroll(){ |
|||
let currentScroll = window.pageYOffset |
|||
if(currentScroll > 0) |
|||
{ |
|||
window.requestAnimationFrame(this.toTopScroll); |
|||
window.scrollTo (0,currentScroll - (currentScroll/5)); |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.kefu-block { |
|||
position: fixed; |
|||
z-index: 1001; |
|||
bottom: 100px; |
|||
right: 40px; |
|||
width: 44px; |
|||
height: 44px; |
|||
border-radius: 4px; |
|||
// border: 1px solid rgba(195,13,35,1); |
|||
background: #fff; |
|||
color: #fff; |
|||
padding: 5px 40px 5px 6px; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
cursor: pointer; |
|||
transition: all 0.5s; |
|||
.kefu-img { |
|||
position: absolute; |
|||
display: inline-block; |
|||
width: 29px; |
|||
height: 31px; |
|||
top: 6px; |
|||
right: 7px; |
|||
background: url('../../../assets/scroll/kefu.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
&:hover { |
|||
transition: all 0.5s; |
|||
width: 140px; |
|||
background: rgba(230,50,41,1) linear-gradient(to right,rgba(224,70,23,1),rgba(195,13,35,1)); |
|||
&::before { |
|||
position: relative; |
|||
content: '售前客服'; |
|||
top: 6px; |
|||
left: 10px; |
|||
font-size: 14px; |
|||
} |
|||
.kefu-img { |
|||
background: url('../../../assets/scroll/kefu-hover.png') no-repeat; |
|||
} |
|||
} |
|||
} |
|||
.top-block { |
|||
position: fixed; |
|||
z-index: 1001; |
|||
bottom: 40px; |
|||
right: 40px; |
|||
width: 44px; |
|||
height: 44px; |
|||
color: #fff; |
|||
border-radius: 4px; |
|||
background-color: #fff; |
|||
padding: 5px 40px 5px 6px; |
|||
transition: all 0.5s; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
cursor: pointer; |
|||
.top-img { |
|||
position: absolute; |
|||
display: inline-block; |
|||
width: 24px; |
|||
height: 34px; |
|||
top: 6px; |
|||
right: 10px; |
|||
background: url('../../../assets/scroll/toTop.png') no-repeat; |
|||
background-size: 100% 100%; |
|||
} |
|||
&:hover { |
|||
transition: all 0.5s; |
|||
width: 140px; |
|||
background: rgba(230,50,41,1) linear-gradient(to right,rgba(224,70,23,1),rgba(195,13,35,1)); |
|||
&::before { |
|||
position: relative; |
|||
content: '返回顶部'; |
|||
top: 6px; |
|||
left: 10px; |
|||
font-size: 14px; |
|||
} |
|||
.top-img { |
|||
background: url('../../../assets/scroll/toTop-hover.png') no-repeat; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,105 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="app-main"> |
|||
<el-form :model="form" :rules="rules" ref="password" class="el-form-new"> |
|||
<el-form-item label="原密码：" :label-width="formLabelWidth" prop="oldPassword"> |
|||
<el-input type="password" v-model="form.oldPassword" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="新密码：" :label-width="formLabelWidth" prop="newPassword"> |
|||
<el-input type="password" v-model="form.newPassword" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="确认新密码：" :label-width="formLabelWidth" prop="again"> |
|||
<el-input type="password" v-model="form.again" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<div class="form-footer"> |
|||
<el-button type="danger" size="mini" @click="submitForm('password')">确定</el-button> |
|||
<el-button type="info" size="mini" @click="resetForm('password')">取消</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from "vuex"; |
|||
import { updatePass } from "@/api/login"; |
|||
export default { |
|||
name: "editPassword", |
|||
computed: { |
|||
...mapGetters(["name","id"]) |
|||
}, |
|||
data() { |
|||
const checkAgainPassword = (rule, value, callback) => { |
|||
if (value != this.form.newPassword) { |
|||
return callback(new Error("两次输入密码不一致")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
formLabelWidth: "150px", |
|||
form: { |
|||
oldPassword: "", |
|||
newPassword: "", |
|||
again: "" |
|||
}, |
|||
rules: { |
|||
oldPassword: [ |
|||
{ required: true, message: "请输入原密码", trigger: "blur" }, |
|||
{ min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" } |
|||
], |
|||
newPassword: [ |
|||
{ required: true, message: "请输入新密码", trigger: "blur" }, |
|||
{ min: 6, max: 12, message: "长度在 6 到 12 个字符", trigger: "blur" } |
|||
], |
|||
again: [ |
|||
{ required: true, message: "请再次输入新密码", trigger: "blur" }, |
|||
{ validator: checkAgainPassword, trigger: "blur" } |
|||
] |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
updatePass() { |
|||
const param = { |
|||
id:this.id, |
|||
userName: this.name, |
|||
newpass: this.$md5(this.form.newPassword), |
|||
oldpass: this.$md5(this.form.oldPassword) |
|||
}; |
|||
updatePass(param).then(res => { |
|||
console.log(res); |
|||
this.$message({ |
|||
message: "修改成功！", |
|||
type: "success" |
|||
}); |
|||
this.$router.go(-1); |
|||
}); |
|||
}, |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate(valid => { |
|||
if (valid) { |
|||
this.updatePass(); |
|||
} else { |
|||
console.log("error submit!!"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.$router.go(-1); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style scope> |
|||
.form-footer { |
|||
text-align: center; |
|||
} |
|||
.el-form-new { |
|||
width: 400px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,221 @@ |
|||
<template> |
|||
<div class="login-container"> |
|||
<div class="header"> |
|||
<h3 class="title-cn">工业互联网公共服务平台</h3> |
|||
<h4 class="title-en">Industrial Internet Public Service Platform</h4> |
|||
</div> |
|||
<el-form |
|||
ref="loginForm" |
|||
:model="loginForm" |
|||
:rules="loginRules" |
|||
class="login-form" |
|||
auto-complete="on" |
|||
label-position="left" |
|||
> |
|||
<div class="title-form"> |
|||
用户登录 |
|||
<div class="title-regiter"> |
|||
还没账户？去 |
|||
<router-link :to="{name:'register'}"> |
|||
<a class="click_link">注册</a> |
|||
</router-link> |
|||
</div> |
|||
</div> |
|||
|
|||
<el-form-item prop="username"> |
|||
<span class="svg-container"> |
|||
<img class="user-img" :src="_getImage('login','user.png')"/> |
|||
</span> |
|||
<el-input |
|||
v-model="loginForm.username" |
|||
name="username" |
|||
type="text" |
|||
auto-complete="off" |
|||
placeholder="请输入用户名" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item prop="password"> |
|||
<span class="svg-container"> |
|||
<img class="user-img" :src="_getImage('login','pass.png')"/> |
|||
</span> |
|||
<el-input |
|||
:type="pwdType" |
|||
v-model="loginForm.password" |
|||
name="password" |
|||
auto-complete="off" |
|||
placeholder="请输入用户密码" |
|||
@keyup.enter.native="handleLogin" |
|||
/> |
|||
<span class="show-pwd" @click="showPwd"> |
|||
<div :class="pwdType === 'password' ? 'eye' : 'eye-open'"></div> |
|||
</span> |
|||
</el-form-item> |
|||
<el-row> |
|||
<el-col :span="14"> |
|||
<el-form-item prop="vercode"> |
|||
<span class="svg-container"> |
|||
<!-- 获取图片的方法在main.ts中 --> |
|||
<img class="user-img" :src="_getImage('login','code.png')"/> |
|||
</span> |
|||
<el-input |
|||
v-model="loginForm.vercode" |
|||
name="vercode" |
|||
type="text" |
|||
auto-complete="off" |
|||
placeholder="请输入验证码" |
|||
@keyup.enter.native="handleLogin" |
|||
/> |
|||
</el-form-item> |
|||
</el-col> |
|||
<img id="codePic" :src="codeSrc" alt="点击刷新" class="code-pic" @click="refreshCode"/> |
|||
<img |
|||
:src="_getImage('login','refresh.png')" |
|||
alt="点击刷新" |
|||
class="code-refresh" |
|||
@click="refreshCode" |
|||
/> |
|||
</el-row> |
|||
<div class="remember-block"> |
|||
<!-- <el-checkbox v-model="remember">记住密码</el-checkbox> --> |
|||
<router-link :to="{name:'retrievePassword'}"> |
|||
<a class="click_link">忘记密码？</a> |
|||
</router-link> |
|||
</div> |
|||
<el-button |
|||
class="login-btn" |
|||
:loading="loading" |
|||
type="primary" |
|||
style="width:100%;" |
|||
@click.native.prevent="handleLogin" |
|||
>登录 |
|||
</el-button> |
|||
</el-form> |
|||
<div class="login_copyright"> |
|||
Copyright 2014 顺鑫农业 All Rights Reserved 北京顺鑫农业股份有限公司 版权所有 京ICP备12039862号 京公网安备110113000279号 |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {JSEncrypt} from "jsencrypt"; //加密组件，前台存公钥，后台存密钥 |
|||
export default { |
|||
name: "Login", |
|||
data() { |
|||
//用户名校验 |
|||
const validateUsername = (rule, value, callback) => { |
|||
if (!value) { |
|||
callback(new Error("请输入用户名")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
//密码校验 |
|||
const validatePass = (rule, value, callback) => { |
|||
if (value.length < 6) { |
|||
callback(new Error("密码不能小于6位")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
APP_URL: config.API_URL, |
|||
//加密公钥 |
|||
PUBLIC_KEY: |
|||
"MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCsD1gI70BxYujhNw8NpaVKRXkcRofoeUbN9Dj5m3i3h9XAIS6LkjI01L4ieRpTHnMEzoXUY8a2/svDf//xuHuDJlZBNtCXK4DPx5x4zHdUWDjFGpWlMQzhsqQlfs0tkN5gP095g27L0ki/NrRuBpgxP1q2dHKpL37sBF8XNRpedwIDAQAB", |
|||
loginForm: { |
|||
//form表单数据 |
|||
username: "", |
|||
password: "", |
|||
vercode: "" |
|||
}, |
|||
loginRules: { |
|||
//form表单校验规则 |
|||
username: [ |
|||
{required: true, trigger: "blur", validator: validateUsername} |
|||
], |
|||
password: [ |
|||
{required: true, trigger: "blur", validator: validatePass} |
|||
], |
|||
vercode: [{required: true, trigger: "blur", message: "请填写验证码"}] |
|||
}, |
|||
loading: false, //登录按钮的loading状态 |
|||
pwdType: "password", //密码明文密文类型 |
|||
codeSrc: "", |
|||
remember: false //记住密码 |
|||
}; |
|||
}, |
|||
created() { |
|||
this._getCss("login", "login"); |
|||
}, |
|||
mounted() { |
|||
this.codeSrc = |
|||
this.APP_URL + "/api-login/common/verifycode?" + Math.random(); |
|||
this.getKeysList(); |
|||
}, |
|||
methods: { |
|||
//明文密文密码显示 |
|||
showPwd() { |
|||
if (this.pwdType === "password") { |
|||
this.pwdType = ""; |
|||
} else { |
|||
this.pwdType = "password"; |
|||
} |
|||
}, |
|||
//密码加密 |
|||
passwordEncryption(password) { |
|||
const encryptor = new JSEncrypt(); |
|||
encryptor.setPublicKey(this.PUBLIC_KEY); |
|||
const passwordEncryp = encryptor.encrypt(password); |
|||
return passwordEncryp; |
|||
}, |
|||
//登录按钮 |
|||
handleLogin() { |
|||
this.$refs.loginForm.validate(valid => { |
|||
if (valid) { |
|||
this.loading = true; |
|||
const params = { |
|||
username:this.loginForm.username, |
|||
password:this.$md5(this.loginForm.password), |
|||
vercode:this.loginForm.vercode |
|||
} |
|||
this.$store |
|||
.dispatch("Login", params) |
|||
.then(data => { |
|||
this.loading = false; |
|||
this.$router.push({path: "/"}); |
|||
}) |
|||
.catch(() => { |
|||
this.loading = false; |
|||
this.refreshCode(); |
|||
}); |
|||
} else { |
|||
console.log("error submit!!"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
getKeysList() { |
|||
this.$store |
|||
.dispatch("keyWords") |
|||
.then(data => { |
|||
}) |
|||
.catch(() => { |
|||
}); |
|||
}, |
|||
//刷新验证码 |
|||
refreshCode: function () { |
|||
document |
|||
.getElementById("codePic") |
|||
.setAttribute( |
|||
"src", |
|||
this.APP_URL + "/api-login/common/verifycode?" + Math.random() |
|||
); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
.login-container .login-btn { |
|||
background: #ff6c58; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,391 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="app-main"> |
|||
<el-form :model="form" :rules="rules" ref="userInfo" class="el-form-new"> |
|||
<el-row class="text-center"> |
|||
<p class="font-size-21 font-weight-bold text-center line-height-2em">登录信息</p> |
|||
<el-col :span="11" > |
|||
<el-form-item label="用户名：" :label-width="formLabelWidth" prop="userName"> |
|||
<el-input v-model="form.userName" auto-complete="new-password" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="密码：" :label-width="formLabelWidth" prop="password"> |
|||
<el-input type="password" v-model="form.password" auto-complete="new-password" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label-width="formLabelWidth"> |
|||
<check-password-strong :sValue="form.password"></check-password-strong> |
|||
</el-form-item> |
|||
<el-form-item label="确认密码：" :label-width="formLabelWidth" prop="again"> |
|||
<el-input type="password" v-model="form.again" autocomplete="off" size="small"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
|
|||
<el-col :span="2" style="height:1px;"></el-col> |
|||
<el-col :span="11"> |
|||
|
|||
<el-form-item label="姓名：" :label-width="formLabelWidth" prop="name"> |
|||
<el-input v-model="form.name" autocomplete="off" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="邮箱：" :label-width="formLabelWidth" prop="email"> |
|||
<el-input v-model="form.email" autocomplete="off" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="手机号：" :label-width="formLabelWidth" prop="telPhone" ref="telPhone"> |
|||
<el-input v-model.number="form.telPhone" autocomplete="off" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="验证码：" :label-width="formLabelWidth" prop="code"> |
|||
<el-input v-model="form.code" autocomplete="off" size="small" style="width:110px;"></el-input> |
|||
<img id="codePic" :src="codeSrc" alt="点击刷新" class="code-pic" @click="refreshCode"/> |
|||
<img :src="_getImage('login','refresh.png')" alt="点击刷新" class="code-refresh" @click="refreshCode" /> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="短信验证码：" :label-width="formLabelWidth" prop="code"> |
|||
<el-input v-model.number="form.code" autocomplete="off" size="small" style="width:110px;margin-right:5px;"></el-input> |
|||
<el-button type="danger" style="width:100px;" size="small" @click="getSendMessage" :disabled="sendStatus"> |
|||
{{ !sendStatus ? '获取验证码' : timer + '秒' }} |
|||
</el-button> |
|||
</el-form-item> --> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
<el-row> |
|||
<p class="font-size-21 font-weight-bold text-center line-height-2em">企业信息</p> |
|||
<el-col :span="11" style="padding-right:30px;"> |
|||
<el-form-item label="企业名称：" :label-width="formLabelWidth" prop="name"> |
|||
<el-input v-model="form.name" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="企业类型：" :label-width="formLabelWidth" prop="typeId"> |
|||
<!-- 企业类型的下拉菜单 --> |
|||
<el-select v-model="form.typeId" placeholder="请选择企业类型"> |
|||
<el-option label="政府机关" :value="1"></el-option> |
|||
<el-option label="研究机构" :value="2"></el-option> |
|||
<el-option label="社会团体" :value="3"></el-option> |
|||
<el-option label="企事业单位" :value="4"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="统一社会信用代码：" :label-width="formLabelWidth" prop="code"> |
|||
<el-input v-model="form.code" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="法人证件类型：" :label-width="formLabelWidth" prop="ceId"> |
|||
<!-- 法人证件类型的下拉菜单 --> |
|||
<el-select v-model="form.ceId" placeholder="请选择法人证件类型"> |
|||
<el-option label="中国居民身份证" :value="1"></el-option> |
|||
<el-option label="港澳居民往来内地通行证" :value="2"></el-option> |
|||
<el-option label="台湾居民往来大陆通行证" :value="3"></el-option> |
|||
<el-option label="外国人永久居留身份证" :value="4"></el-option> |
|||
<el-option label="港澳台居民居住证" :value="5"></el-option> |
|||
<el-option label="护照" :value="6"></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="法人证件号码：" :label-width="formLabelWidth" prop="enCeNumber"> |
|||
<el-input v-model="form.enCeNumber" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="2" style="height:1px;"></el-col> |
|||
<el-col :span="11" style="padding-right:30px;"> |
|||
<el-form-item label="所属行业：" :label-width="formLabelWidth" prop="inBigId"> |
|||
<!-- 行业大类的下拉菜单 --> |
|||
<el-select |
|||
v-model="form.inBigId" |
|||
placeholder="行业大类" |
|||
style="width:calc(50% - 10px);margin-right: 20px;" |
|||
@change="changeSmallIndustry(true)" |
|||
> |
|||
<el-option |
|||
v-for="(item,index) in bigIndustryType" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
<!-- 行业小类的下拉菜单 --> |
|||
<el-select |
|||
v-model="form.inSmallId" |
|||
placeholder="行业小类" |
|||
style="width:calc(50% - 10px);" |
|||
> |
|||
<el-option |
|||
v-for="(item,index) in smallIndustryType" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="法人姓名：" :label-width="formLabelWidth" prop="enLegalName"> |
|||
<el-input v-model="form.enLegalName" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="法人证件：" :label-width="formLabelWidth" prop="enCeAddressZ"> |
|||
<div class="flex-box"> |
|||
<el-upload |
|||
class="avatar-uploader flex-1" |
|||
:action="upload_file" |
|||
:show-file-list="false" |
|||
:on-success="handlePhotoSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
> |
|||
<img v-if="photoUrl" :src="photoUrl" class="avatar"/> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|||
</el-upload> |
|||
<el-upload |
|||
class="avatar-uploader flex-1" |
|||
:action="upload_file" |
|||
:show-file-list="false" |
|||
:on-success="handleReverseSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
> |
|||
<img v-if="reversePhotoUrl" :src="reversePhotoUrl" class="avatar"/> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|||
</el-upload> |
|||
</div> |
|||
<el-form-item label-width="150px" prop="enCeAddressF"></el-form-item> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="24" style="padding-right:30px;"> |
|||
<el-form-item label="企业简介：" :label-width="formLabelWidth" prop="enIntroduction"> |
|||
<!-- <el-input v-model="form.enIntroduction" autocomplete="off"></el-input> --> |
|||
<el-input type="textarea" v-model="form.enIntroduction"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
<el-row> |
|||
<el-col :span="11" style="padding-right:30px;"> |
|||
<el-form-item label="组织/单位注册所在地：" :label-width="formLabelWidth" prop="areaId"> |
|||
<!-- <v-distpicker @selected="onSelected" class="my-distpicker"></v-distpicker> --> |
|||
<el-select |
|||
v-model="form.provinceId" |
|||
placeholder="省" |
|||
style="width:calc(33.3% - 7px);margin-right:10px;" |
|||
@change="changeArea(form.provinceId,1,true)" |
|||
> |
|||
<el-option |
|||
v-for="(item,index) in provinces" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
<el-select |
|||
v-model="form.cityId" |
|||
placeholder="市" |
|||
style="width:calc(33.3% - 7px);margin-right:10px;" |
|||
@change="changeArea(form.cityId,2,true)" |
|||
> |
|||
<el-option |
|||
v-for="(item,index) in citys" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
<el-select v-model="form.areaId" placeholder="区" style="width:calc(33.3% - 7px);"> |
|||
<el-option |
|||
v-for="(item,index) in areas" |
|||
:key="index" |
|||
:label="item.name" |
|||
:value="item.id" |
|||
></el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="官方网址：" :label-width="formLabelWidth" prop="enOffWeb"> |
|||
<el-input v-model="form.enOffWeb" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
|
|||
|
|||
<el-form-item label="联系人姓名：" :label-width="formLabelWidth" prop="conName"> |
|||
<el-input v-model="form.conName" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="联系人邮箱：" :label-width="formLabelWidth" prop="email"> |
|||
<el-input v-model="form.email" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
<el-col :span="2" style="height:1px;"></el-col> |
|||
<el-col :span="11" style="padding-right:30px;"> |
|||
<el-form-item label="注册详细地址：" :label-width="formLabelWidth" prop="enDetAddress"> |
|||
<el-input v-model="form.enDetAddress" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="组织/单位营业执照：" :label-width="formLabelWidth" prop="enOpeAddress"> |
|||
<div class="flex-box"> |
|||
<el-upload |
|||
class="avatar-uploader" |
|||
:action="upload_file" |
|||
:show-file-list="false" |
|||
:on-success="handleLicenceSuccess" |
|||
:before-upload="beforeAvatarUpload" |
|||
> |
|||
<img v-if="businessLicenceUrl" :src="businessLicenceUrl" class="avatar"/> |
|||
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
|||
</el-upload> |
|||
</div> |
|||
</el-form-item> |
|||
<el-form-item label="联系人电话：" :label-width="formLabelWidth" prop="telPhone"> |
|||
<el-input v-model="form.telPhone" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
|
|||
|
|||
<el-row> |
|||
<el-form-item :label-width="formLabelWidth" style="text-align: center;"> |
|||
<el-button type="danger" size="small" @click="submitForm('userInfo')" style="width:200px;text-align: center;">注册</el-button> |
|||
</el-form-item> |
|||
<el-form-item :label-width="formLabelWidth" class="text-center"> |
|||
已有账号？ |
|||
<el-link :underline="false" type="primary" @click="goLogin">立即登录</el-link> |
|||
</el-form-item> |
|||
</el-row> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import CheckPasswordStrong from '@/components/CheckPasswordStrong'; |
|||
import {sendMessage, registerUser} from "@/api/login" |
|||
|
|||
export default { |
|||
name: 'register', |
|||
components: { |
|||
CheckPasswordStrong |
|||
}, |
|||
data() { |
|||
const checkAgainPassword = (rule, value, callback) => { |
|||
if (value != this.form.password) { |
|||
return callback(new Error('两次输入密码不一致')); |
|||
} else { |
|||
callback() |
|||
} |
|||
}; |
|||
return { |
|||
sendStatus: false, |
|||
timer: 60, |
|||
codeSrc: '', |
|||
formLabelWidth: '150px', |
|||
form: { |
|||
name: '', |
|||
userName: '', |
|||
password: '', |
|||
again: '', |
|||
email: '', |
|||
telPhone: '', |
|||
// code:'', |
|||
code: '' |
|||
}, |
|||
rules: { |
|||
name: [ |
|||
{required: true, message: '请输入姓名', trigger: 'blur'} |
|||
], |
|||
userName: [ |
|||
{required: true, message: '请输入用户名', trigger: 'blur'} |
|||
], |
|||
password: [ |
|||
{required: true, message: '请输入新密码', trigger: 'blur'}, |
|||
{min: 8, max: 12, message: '长度在 8 到 12 个字符', trigger: 'blur'} |
|||
], |
|||
again: [ |
|||
{required: true, message: '请再次输入新密码', trigger: 'blur'}, |
|||
{validator: checkAgainPassword, trigger: 'blur'} |
|||
], |
|||
email: [ |
|||
{required: true, message: '请输入邮箱', trigger: 'blur'} |
|||
], |
|||
telPhone: [ |
|||
{required: true, message: '请输入手机号', trigger: 'blur'} |
|||
], |
|||
// code: [ |
|||
// { required: true, message: '请输入验证码', trigger: 'blur' } |
|||
// ], |
|||
code: [ |
|||
{required: true, message: '请输入短信验证码', trigger: 'blur'} |
|||
] |
|||
}, |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.codeSrc = config.API_URL+"/api-login/common/verifycode?" + Math.random() |
|||
}, |
|||
methods: { |
|||
goLogin() { |
|||
this.$router.push({name: 'login'}) |
|||
}, |
|||
// refreshCode:function(){ |
|||
// document.getElementById("codePic").setAttribute("src",config.API_URL+"/api-login/common/verifycode?" + Math.random()) |
|||
// }, |
|||
getSendMessage() { |
|||
this.$refs['userInfo'].validateField('telPhone', (valid) => { |
|||
if (valid) { |
|||
console.log('telPhone error'); |
|||
return false; |
|||
} else { |
|||
sendMessage({telPhone: this.form.telPhone}).then(res => { |
|||
this.$message({ |
|||
message: res.msg, |
|||
type: 'success' |
|||
}); |
|||
this.timer = 60 |
|||
this.sendStatus = true |
|||
var flag = setInterval(() => { |
|||
if (this.timer == 0) { |
|||
clearInterval(flag) |
|||
this.sendStatus = false |
|||
} else { |
|||
this.timer-- |
|||
} |
|||
}, 1000) |
|||
}) |
|||
} |
|||
}); |
|||
|
|||
}, |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
registerUser(this.form).then(res => { |
|||
console.log(res); |
|||
this.$message({ |
|||
message: '注册成功！', |
|||
type: 'success' |
|||
}); |
|||
this.goLogin() |
|||
}) |
|||
} else { |
|||
console.log('error submit!!'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.$router.go(-1) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scope> |
|||
.form-footer { |
|||
text-align: center; |
|||
} |
|||
|
|||
.el-form-new { |
|||
max-width: 1200px; |
|||
// width: 400px; |
|||
// margin: 0 auto; |
|||
} |
|||
|
|||
.code-refresh { |
|||
position: absolute; |
|||
top: 10px; |
|||
width: 25px; |
|||
height: 20px; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.code-pic { |
|||
margin: 0 5px; |
|||
border: 1px solid rgba(220, 220, 220, 1); |
|||
border-radius: 3px; |
|||
width: 90px; |
|||
height: 32px; |
|||
vertical-align: middle; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,278 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="app-main"> |
|||
<el-steps |
|||
:space="180" |
|||
:active="stepActive" |
|||
finish-status="process" |
|||
process-status="wait" |
|||
align-center |
|||
> |
|||
<el-step title="输入账号"></el-step> |
|||
<el-step title="安全验证"></el-step> |
|||
<el-step title="重置密码"></el-step> |
|||
<el-step title="成功"></el-step> |
|||
</el-steps> |
|||
<div class="flex-box"> |
|||
<div class="step-block"> |
|||
<el-form :model="step0" :rules="step0Rules" ref="step0" v-show="stepActive == 1"> |
|||
<el-form-item label="账号：" :label-width="formLabelWidth" prop="username"> |
|||
<el-input v-model="step0.username" autocomplete="off" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label-width="formLabelWidth"> |
|||
<el-button |
|||
type="danger" |
|||
size="small" |
|||
style="width:250px;" |
|||
@click="submitForm('step0')" |
|||
>下一步</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-form :model="step1" :rules="step1Rules" ref="step1" v-show="stepActive == 2"> |
|||
<el-form-item label="手机号：" :label-width="formLabelWidth"> |
|||
<span>{{step1.telPhone}}</span> |
|||
</el-form-item> |
|||
<!-- <el-form-item label="验证码：" :label-width="formLabelWidth" prop="tcode"> |
|||
<el-input v-model="step1.tcode" autocomplete="off" size="small" style="width:110px;"></el-input> |
|||
<img id="codePic" :src="codeSrc" alt="点击刷新" class="code-pic"> |
|||
<img src="../../assets/login/refresh.png" alt="点击刷新" class="code-refresh" @click="refreshCode"> |
|||
</el-form-item>--> |
|||
<el-form-item label="短信验证码：" :label-width="formLabelWidth" prop="code"> |
|||
<el-input |
|||
v-model.number="step1.code" |
|||
autocomplete="off" |
|||
size="small" |
|||
style="width:110px;margin-right:5px;" |
|||
></el-input> |
|||
<!-- <el-button type="danger" size="small ">获取验证码</el-button> --> |
|||
<el-button |
|||
type="danger" |
|||
style="width:100px;" |
|||
size="small" |
|||
@click="getSendMessage" |
|||
:disabled="sendStatus" |
|||
>{{!sendStatus?'获取验证码':codeTimer+'秒'}}</el-button> |
|||
</el-form-item> |
|||
<el-form-item :label-width="formLabelWidth"> |
|||
<el-button |
|||
type="danger" |
|||
size="small" |
|||
style="width:250px;" |
|||
@click="submitForm('step1')" |
|||
>下一步</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<el-form :model="step2" :rules="step2Rules" ref="step2" v-show="stepActive == 3"> |
|||
<el-form-item label="手机号：" :label-width="formLabelWidth"> |
|||
<span>{{step2.telPhone}}</span> |
|||
</el-form-item> |
|||
<el-form-item label="新密码：" :label-width="formLabelWidth" prop="newPass"> |
|||
<el-input type="password" v-model="step2.newPass" autocomplete="off" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="确认新密码：" :label-width="formLabelWidth" prop="again"> |
|||
<el-input type="password" v-model="step2.again" autocomplete="off" size="small"></el-input> |
|||
</el-form-item> |
|||
<el-form-item :label-width="formLabelWidth"> |
|||
<el-button |
|||
type="danger" |
|||
size="small" |
|||
style="width:250px;" |
|||
@click="submitForm('step2')" |
|||
>下一步</el-button> |
|||
</el-form-item> |
|||
</el-form> |
|||
<div class="flex-box-column" v-show="stepActive == 4"> |
|||
<i class="el-icon-success my-success"></i> |
|||
<p class="font-size-21 font-weight-bold text-center fontSize1">恭喜您密码修改成功！</p> |
|||
<span class="font-size-13 text-center"> |
|||
{{timer}}秒后自动跳回登录页面，或 |
|||
<el-link :underline="false" type="primary" @click="goLogin">立即登录</el-link> |
|||
</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
userToTelphone, |
|||
sendMessage, |
|||
smsVerification, |
|||
setUpPassword |
|||
} from "@/api/login"; |
|||
export default { |
|||
name: "retrievePassword", |
|||
data() { |
|||
const checkAgainPassword = (rule, value, callback) => { |
|||
if (value != this.step2.newPass) { |
|||
return callback(new Error("两次输入密码不一致")); |
|||
} else { |
|||
callback(); |
|||
} |
|||
}; |
|||
return { |
|||
timer: 10, //返回的计时器 |
|||
tagTimer: null, //返回计时器的标记 |
|||
stepActive: 1, //步骤标记 |
|||
formLabelWidth: "120px", //form表单的lable宽度 |
|||
codeSrc: "", //图片地址 |
|||
step0: { |
|||
//操作步骤1的数据 |
|||
username: "" |
|||
}, |
|||
step0Rules: { |
|||
//操作步骤1的校验规则 |
|||
username: [{ required: true, message: "请输入账号", trigger: "blur" }] |
|||
}, |
|||
step1: { |
|||
//操作步骤2的数据 |
|||
telPhone: "", |
|||
// tcode:'', |
|||
code: null |
|||
}, |
|||
step1Rules: { |
|||
//操作步骤2的校验规则 |
|||
// tcode: [ |
|||
// { required: true, message: '请输入验证码', trigger: 'blur' } |
|||
// ], |
|||
code: [{ required: true, message: "请输入短信验证码", trigger: "blur" }] |
|||
}, |
|||
step2: { |
|||
//操作步骤3的数据 |
|||
telPhone: "", |
|||
newPass: "", |
|||
again: "" |
|||
}, |
|||
step2Rules: { |
|||
//操作步骤3的校验规则 |
|||
newPass: [ |
|||
{ required: true, message: "请输入新密码", trigger: "blur" }, |
|||
{ min: 8, max: 12, message: "长度在 8 到 12 个字符", trigger: "blur" } |
|||
], |
|||
again: [ |
|||
{ required: true, message: "请再次输入新密码", trigger: "blur" }, |
|||
{ validator: checkAgainPassword, trigger: "blur" } |
|||
] |
|||
}, |
|||
sendStatus: false, |
|||
codeTimer: 60 |
|||
}; |
|||
}, |
|||
mounted() { |
|||
// this.codeSrc = config.API_URL+"/api-login/common/verifycode?" + Math.random() |
|||
}, |
|||
methods: { |
|||
//下一步的校验与操作 |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate(valid => { |
|||
if (valid) { |
|||
if (formName == "step0") { |
|||
userToTelphone({ userName: this.step0.username }).then(res => { |
|||
this.step1.telPhone = res.data; |
|||
this.step2.telPhone = res.data; |
|||
this.stepActive++; |
|||
}); |
|||
} else if (formName == "step1") { |
|||
smsVerification(this.step1).then(res => { |
|||
this.stepActive++; |
|||
}); |
|||
} else if (formName == "step2") { |
|||
const param = { |
|||
userName: this.step0.username, |
|||
password: this.step2.newPass, |
|||
telPhone: this.step2.telPhone, |
|||
code: this.step1.code |
|||
}; |
|||
setUpPassword(param).then(res => { |
|||
this.stepActive++; |
|||
this.startTimer(); |
|||
}); |
|||
} |
|||
} else { |
|||
console.log("error submit!!"); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
getSendMessage() { |
|||
sendMessage({ telPhone: this.step1.telPhone }).then(res => { |
|||
this.$message({ |
|||
message: res.msg, |
|||
type: "success" |
|||
}); |
|||
this.codeTimer = 60; |
|||
this.sendStatus = true; |
|||
var flag = setInterval(() => { |
|||
if (this.codeTimer == 0) { |
|||
clearInterval(flag); |
|||
this.sendStatus = false; |
|||
} else { |
|||
this.codeTimer--; |
|||
} |
|||
}, 1000); |
|||
}); |
|||
}, |
|||
//成功的倒计时 |
|||
startTimer() { |
|||
this.timer = 10; |
|||
this.tagTimer = setInterval(() => { |
|||
if (this.timer == 0) { |
|||
this.goLogin(); |
|||
} else { |
|||
this.timer--; |
|||
} |
|||
}, 1000); |
|||
}, |
|||
//返回登录 |
|||
goLogin() { |
|||
clearInterval(this.tagTimer); |
|||
this.$router.push({ name: "login" }); |
|||
}, |
|||
//刷新验证码 |
|||
refreshCode: function() { |
|||
document |
|||
.getElementById("codePic") |
|||
.setAttribute( |
|||
"src", |
|||
config.API_URL + "/api-login/common/verifycode?" + Math.random() |
|||
); |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.el-steps { |
|||
justify-content: center; |
|||
} |
|||
.step-block { |
|||
// width: 500px; |
|||
padding: 80px 50px; |
|||
} |
|||
|
|||
.code-refresh { |
|||
position: absolute; |
|||
// right: 2px; |
|||
top: 10px; |
|||
width: 25px; |
|||
height: 20px; |
|||
cursor: pointer; |
|||
} |
|||
.code-pic { |
|||
margin: 0 5px; |
|||
border: 1px solid rgba(220, 220, 220, 1); |
|||
border-radius: 3px; |
|||
width: 90px; |
|||
height: 32px; |
|||
vertical-align: middle; |
|||
// cursor: pointer; |
|||
} |
|||
.my-success { |
|||
font-size: 80px; |
|||
color: #20c05c; |
|||
} |
|||
.fontSize1 { |
|||
margin: 30px 0; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,148 @@ |
|||
<template> |
|||
<div class="app-container"> |
|||
<div class="app-main"> |
|||
<el-form :model="form" :rules="rules" ref="userInfo" class="el-form-new"> |
|||
<el-form-item label="用户类型：" :label-width="formLabelWidth"> |
|||
<span>{{ userType[1]}}</span> |
|||
</el-form-item> |
|||
<el-form-item label="用户名：" :label-width="formLabelWidth" prop="userName"> |
|||
<span>{{ param.userName }}</span> |
|||
</el-form-item> |
|||
<el-form-item label="姓名：" :label-width="formLabelWidth" prop="realName"> |
|||
<span v-if="!isEdit">{{ param.realName }}</span> |
|||
<el-input v-else v-model="form.realName" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="身份证件号码：" :label-width="formLabelWidth"> |
|||
<span v-if="!isEdit">{{ param.idNumber }}</span> |
|||
<el-input v-else v-model="form.idNumber" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="邮箱：" :label-width="formLabelWidth" prop="email"> |
|||
<span v-if="!isEdit">{{ param.email }}</span> |
|||
<el-input v-else v-model="form.email" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<el-form-item label="手机号：" :label-width="formLabelWidth" prop="phone"> |
|||
<span v-if="!isEdit">{{ param.phone }}</span> |
|||
<el-input v-else v-model="form.phone" autocomplete="off"></el-input> |
|||
</el-form-item> |
|||
<div class="form-footer"> |
|||
<el-button type="danger" size="mini" v-if="!isEdit" @click="editInfo">编辑</el-button> |
|||
<div v-else> |
|||
<el-button type="danger" size="mini" @click="submitForm('userInfo')">确定</el-button> |
|||
<el-button type="info" size="mini" @click="resetForm('userInfo')">取消</el-button> |
|||
</div> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import {getUserDetail, updateUserInfo, editPersonalCenter} from "@/api/user" |
|||
|
|||
export default { |
|||
name: 'userInfo', |
|||
data() { |
|||
return { |
|||
isEdit: false, |
|||
id: this.$store.getters.id || '', |
|||
formLabelWidth: '150px', |
|||
param: {}, |
|||
form: { |
|||
id:"", |
|||
userName: '', |
|||
realName: '', |
|||
idNumber: '', |
|||
email: '', |
|||
phone: '' |
|||
}, |
|||
rules: { |
|||
userName: [ |
|||
{required: true, message: '请输入用户名', trigger: 'blur'} |
|||
], |
|||
realName: [ |
|||
{required: true, message: '请输入姓名', trigger: 'blur'} |
|||
], |
|||
idNumber: [ |
|||
{message: '请输入身份证件号码', trigger: 'blur'} |
|||
], |
|||
email: [ |
|||
{required: true, message: '请输入邮箱', trigger: 'blur'} |
|||
], |
|||
phone: [ |
|||
{required: true, message: '请输入手机号', trigger: 'blur'} |
|||
] |
|||
}, |
|||
userType: {//用户类型 |
|||
1: '系统用户', |
|||
/*2: '公众用户', |
|||
3: '企业用户', |
|||
4: '政府用户',*/ |
|||
}, |
|||
/*userLevel: new Map([ //角色键值对 |
|||
[1, '系统用户'], |
|||
[2, '公众用户'], |
|||
[3, '企业用户'], |
|||
[4, '政府用户'] |
|||
]),*/ |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.initData() |
|||
}, |
|||
methods: { |
|||
initData() { |
|||
getUserDetail({'id': this.id}).then(res => { |
|||
this.param = res.data |
|||
}) |
|||
}, |
|||
submitForm(formName) { |
|||
this.$refs[formName].validate((valid) => { |
|||
if (valid) { |
|||
const param = { |
|||
userType: 1, |
|||
id: this.form.id, |
|||
userName:this.form.userName, |
|||
phone: this.form.phone, |
|||
idNumber: this.form.idNumber, |
|||
name: this.form.realName, |
|||
email: this.form.email, |
|||
version: this.form.version |
|||
} |
|||
updateUserInfo(param).then(res => { |
|||
this.$message({ |
|||
message: res.msg, |
|||
type: res.code == 200 ? 'success' : 'error' |
|||
}); |
|||
let _obj = JSON.stringify(this.form) |
|||
this.param = JSON.parse(_obj); |
|||
this.isEdit = false |
|||
this.initData() |
|||
}) |
|||
} else { |
|||
console.log('error submit!!'); |
|||
return false; |
|||
} |
|||
}); |
|||
}, |
|||
editInfo() { |
|||
let _obj = JSON.stringify(this.param) |
|||
this.form = JSON.parse(_obj); |
|||
this.isEdit = true |
|||
}, |
|||
resetForm(formName) { |
|||
this.$refs[formName].resetFields(); |
|||
this.isEdit = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.form-footer { |
|||
text-align: center; |
|||
} |
|||
|
|||
.el-form-new { |
|||
width: 400px; |
|||
margin: 0 auto; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,47 @@ |
|||
const webpack = require('webpack') |
|||
module.exports = { |
|||
/* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ |
|||
// baseUrl: process.env.NODE_ENV === 'production' ? './' : '/',
|
|||
publicPath: './', |
|||
/* 输出文件目录：在npm run build时，生成文件的目录名称 */ |
|||
outputDir: 'dist', |
|||
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */ |
|||
assetsDir: "assets", |
|||
/* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */ |
|||
productionSourceMap: false, |
|||
/* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */ |
|||
filenameHashing: true, |
|||
css: { |
|||
// 是否使用css分离插件 ExtractTextPlugin
|
|||
extract: false, |
|||
// 开启 CSS source maps?
|
|||
// sourceMap: false,
|
|||
// css预设器配置项
|
|||
// loaderOptions: {},
|
|||
// 启用 CSS modules for all css / pre-processor files.
|
|||
// modules: false
|
|||
}, |
|||
/* 代码保存时进行eslint检测 */ |
|||
lintOnSave: true, |
|||
//兼容ES6
|
|||
// configureWebpack: config => {
|
|||
// config.entry.app = ['babel-polyfill','./src/main.ts'];
|
|||
// },
|
|||
pwa: { |
|||
iconPaths: { |
|||
favicon32 : 'favicon.ico', |
|||
favicon16 : 'favicon.ico', |
|||
appleTouchIcon: 'favicon.ico', |
|||
maskIcon : 'favicon.ico', |
|||
msTileImage : 'favicon.ico' |
|||
} |
|||
}, |
|||
transpileDependencies: ['webpack-dev-server/client'], |
|||
devServer: { |
|||
/* 自动打开浏览器 */ |
|||
open: true, |
|||
/* 设置为0.0.0.0则所有的地址均能访问 */ |
|||
host: '0.0.0.0', |
|||
port: 8080, |
|||
} |
|||
} |
|||
Loading…
Reference in new issue