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