添加部分用户组件

.env

-VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top
 VUE_APP_BASE_URL=/systemManageShell/
 VUE_APP_CUSTOMER_MENU_CODE=0001
 VUE_APP_BASE_MENU_CODE=0002
 VUE_APP_SYSTEM_MENU_CODE=0003
 VUE_APP_WHITE_LIST=/login,/404,/401
+VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top
 VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top
 VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top
 VUE_APP_BASE_SERVER_URL=http://ex-dev-dcxy-base-manage.168cad.top

.env.dev

 NODE_ENV = production
+VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top
 VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top
 VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top
 VUE_APP_BASE_SERVER_URL=http://ex-dev-dcxy-base-manage.168cad.top
 VUE_APP_BASE_SERVER_URL_APP=http://ex-dev-dcxy-base-app.168cad.top
-

README.md

@@ -13,6 +13,7 @@ npm run build:master   # 生成环境
 根目录下`.env.dev`,`.env.test`,`.env.master`,分别替换服务地址
 
 ```bash
+VUE_APP_LIB_MANAGER=http://ex-dev-dcxy-static.168cad.top # 静态项目部署地址
 VUE_APP_SYSTEM_SERVER_URL=http://ex-dev-dcxy-system-manage.168cad.top   #系统管理接口
 VUE_APP_CUSTOMER_SERVER_URL=http://ex-dev-customer-manage.168cad.top    #会员系统接口
 VUE_APP_BASE_SERVER_URL=http://ex-dev-dcxy-base-manage.168cad.top       #基础服务接口

package.json

@@ -9,12 +9,12 @@
     "start": "npm run dev",
     "lint": "eslint --ext .js,.vue src",
     "build": "vue-cli-service build --modern",
-    "build:dev": "vue-cli-service build --modern --mode dev",
+    "build:dev": "cross-env npm run buildapp:dev && npm run buildlib:dev",
     "build:test": "vue-cli-service build --modern --mode test",
     "build:master": "vue-cli-service build --modern --mode master",
     "build:prod": "vue-cli-service build --modern",
     "buildapp:dev": "vue-cli-service build --modern --mode dev",
-    "buildlib:dev": "vue-cli-service build --target lib --name manageShell ./src/lib-main.js --modern --mode dev",
+    "buildlib:dev": "vue-cli-service build --target lib --name manageShell ./src/lib/main.js --modern --mode dev",
     "analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"
   },
   "dependencies": {
@@ -28,7 +28,7 @@
     "nprogress": "^0.2.0",
     "popmotion": "^8.1.22",
     "qiniu-js": "^2.2.0",
-    "rym-element-ui": "^0.1.43",
+    "rym-element-ui": "^0.1.46",
     "vue": "^2.5.2",
     "vue-qr": "^1.2.8",
     "vue-router": "^3.0.1",

public/baseManage/baseManage.css

-.el-message{min-width:380px;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;border-width:1px;border-style:solid;border-color:#ebeef5;position:fixed;left:50%;top:20px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#edf2fc;-webkit-transition:opacity .3s,-webkit-transform .4s;transition:opacity .3s,-webkit-transform .4s;transition:opacity .3s,transform .4s;transition:opacity .3s,transform .4s,-webkit-transform .4s;overflow:hidden;padding:15px 15px 15px 20px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.el-message.is-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message.is-closable .el-message__content{padding-right:16px}.el-message p{margin:0}.el-message--info .el-message__content{color:#909399}.el-message--success{background-color:#f0f9eb;border-color:#e1f3d8}.el-message--success .el-message__content{color:#67c23a}.el-message--warning{background-color:#fdf6ec;border-color:#faecd8}.el-message--warning .el-message__content{color:#e6a23c}.el-message--error{background-color:#fef0f0;border-color:#fde2e2}.el-message--error .el-message__content{color:#f56c6c}.el-message__icon{margin-right:10px}.el-message__content{padding:0;font-size:14px;line-height:1}.el-message__content:focus{outline-width:0}.el-message__closeBtn{position:absolute;top:50%;right:15px;-webkit-transform:translateY(-50%);transform:translateY(-50%);cursor:pointer;color:#c0c4cc;font-size:16px}.el-message__closeBtn:focus{outline-width:0}.el-message__closeBtn:hover{color:#909399}.el-message .el-icon-success{color:#67c23a}.el-message .el-icon-error{color:#f56c6c}.el-message .el-icon-info{color:#909399}.el-message .el-icon-warning{color:#e6a23c}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;-webkit-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.fade-in-linear-enter-active,.fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{-webkit-transition:opacity .2s linear;transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{-webkit-transition:all .3s cubic-bezier(.55,0,.1,1);transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;-webkit-transform:scaleX(0);transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center top;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;-webkit-transform:scaleY(1);transform:scaleY(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:center bottom;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;-webkit-transform:scaleY(0);transform:scaleY(0)}.el-zoom-in-left-enter-active,.el-zoom-in-left-leave-active{opacity:1;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),opacity .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;transform-origin:top left}.el-zoom-in-left-enter,.el-zoom-in-left-leave-active{opacity:0;-webkit-transform:scale(.45);transform:scale(.45)}.collapse-transition{-webkit-transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out;transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.horizontal-collapse-transition{-webkit-transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out;transition:width .3s ease-in-out,padding-left .3s ease-in-out,padding-right .3s ease-in-out}.el-list-enter-active,.el-list-leave-active{-webkit-transition:all 1s;transition:all 1s}.el-list-enter,.el-list-leave-active{opacity:0;-webkit-transform:translateY(-30px);transform:translateY(-30px)}.el-opacity-transition{-webkit-transition:opacity .3s cubic-bezier(.55,0,.1,1);transition:opacity .3s cubic-bezier(.55,0,.1,1)}@font-face{font-family:element-icons;src:url(fonts/element-icons.2fad952a.woff) format("woff"),url(fonts/element-icons.6f0a7632.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-info:before{content:"\E61A"}.el-icon-error:before{content:"\E62C"}.el-icon-success:before{content:"\E62D"}.el-icon-warning:before{content:"\E62E"}.el-icon-question:before{content:"\E634"}.el-icon-back:before{content:"\E606"}.el-icon-arrow-left:before{content:"\E600"}.el-icon-arrow-down:before{content:"\E603"}.el-icon-arrow-right:before{content:"\E604"}.el-icon-arrow-up:before{content:"\E605"}.el-icon-caret-left:before{content:"\E60A"}.el-icon-caret-bottom:before{content:"\E60B"}.el-icon-caret-top:before{content:"\E60C"}.el-icon-caret-right:before{content:"\E60E"}.el-icon-d-arrow-left:before{content:"\E610"}.el-icon-d-arrow-right:before{content:"\E613"}.el-icon-minus:before{content:"\E621"}.el-icon-plus:before{content:"\E62B"}.el-icon-remove:before{content:"\E635"}.el-icon-circle-plus:before{content:"\E601"}.el-icon-remove-outline:before{content:"\E63C"}.el-icon-circle-plus-outline:before{content:"\E602"}.el-icon-close:before{content:"\E60F"}.el-icon-check:before{content:"\E611"}.el-icon-circle-close:before{content:"\E607"}.el-icon-circle-check:before{content:"\E639"}.el-icon-circle-close-outline:before{content:"\E609"}.el-icon-circle-check-outline:before{content:"\E63E"}.el-icon-zoom-out:before{content:"\E645"}.el-icon-zoom-in:before{content:"\E641"}.el-icon-d-caret:before{content:"\E615"}.el-icon-sort:before{content:"\E640"}.el-icon-sort-down:before{content:"\E630"}.el-icon-sort-up:before{content:"\E631"}.el-icon-tickets:before{content:"\E63F"}.el-icon-document:before{content:"\E614"}.el-icon-goods:before{content:"\E618"}.el-icon-sold-out:before{content:"\E63B"}.el-icon-news:before{content:"\E625"}.el-icon-message:before{content:"\E61B"}.el-icon-date:before{content:"\E608"}.el-icon-printer:before{content:"\E62F"}.el-icon-time:before{content:"\E642"}.el-icon-bell:before{content:"\E622"}.el-icon-mobile-phone:before{content:"\E624"}.el-icon-service:before{content:"\E63A"}.el-icon-view:before{content:"\E643"}.el-icon-menu:before{content:"\E620"}.el-icon-more:before{content:"\E646"}.el-icon-more-outline:before{content:"\E626"}.el-icon-star-on:before{content:"\E637"}.el-icon-star-off:before{content:"\E63D"}.el-icon-location:before{content:"\E61D"}.el-icon-location-outline:before{content:"\E61F"}.el-icon-phone:before{content:"\E627"}.el-icon-phone-outline:before{content:"\E628"}.el-icon-picture:before{content:"\E629"}.el-icon-picture-outline:before{content:"\E62A"}.el-icon-delete:before{content:"\E612"}.el-icon-search:before{content:"\E619"}.el-icon-edit:before{content:"\E61C"}.el-icon-edit-outline:before{content:"\E616"}.el-icon-rank:before{content:"\E632"}.el-icon-refresh:before{content:"\E633"}.el-icon-share:before{content:"\E636"}.el-icon-setting:before{content:"\E638"}.el-icon-upload:before{content:"\E60D"}.el-icon-upload2:before{content:"\E644"}.el-icon-download:before{content:"\E617"}.el-icon-loading:before{content:"\E61E"}.el-icon-loading{-webkit-animation:rotating 2s linear infinite;animation:rotating 2s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@-webkit-keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes rotating{0%{-webkit-transform:rotate(0);transform:rotate(0)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.el-message-box,.el-popup-parent--hidden{overflow:hidden}.el-button,.el-input__inner{-webkit-appearance:none}.el-button,.el-input__inner,.el-textarea__inner{-webkit-box-sizing:border-box}.v-modal-enter{-webkit-animation:v-modal-in .2s ease;animation:v-modal-in .2s ease}.v-modal-leave{-webkit-animation:v-modal-out .2s ease forwards;animation:v-modal-out .2s ease forwards}@-webkit-keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-in{0%{opacity:0}}@-webkit-keyframes v-modal-out{to{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #dcdfe6;color:#606266;text-align:center;box-sizing:border-box;outline:0;margin:0;-webkit-transition:.1s;transition:.1s;font-weight:500;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:12px 20px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.el-button:active{color:#3a8ee6;border-color:#3a8ee6;outline:0}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#409eff;color:#409eff}.el-button.is-active,.el-button.is-plain:active{color:#3a8ee6;border-color:#3a8ee6}.el-button.is-plain:active{background:#fff;outline:0}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#ebeef5;color:#c0c4cc}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-round{border-radius:20px;padding:12px 23px}.el-button.is-circle{border-radius:50%;padding:12px}.el-button--primary{color:#fff;background-color:#409eff;border-color:#409eff}.el-button--primary:focus,.el-button--primary:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.el-button--primary.is-active,.el-button--primary:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff}.el-button--primary:active{outline:0}.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover{color:#fff;background-color:#a0cfff;border-color:#a0cfff}.el-button--primary.is-plain{color:#409eff;background:#ecf5ff;border-color:#b3d8ff}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#409eff;border-color:#409eff;color:#fff}.el-button--primary.is-plain:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff;outline:0}.el-button--primary.is-plain.is-disabled,.el-button--primary.is-plain.is-disabled:active,.el-button--primary.is-plain.is-disabled:focus,.el-button--primary.is-plain.is-disabled:hover{color:#8cc5ff;background-color:#ecf5ff;border-color:#d9ecff}.el-button--success{color:#fff;background-color:#67c23a;border-color:#67c23a}.el-button--success:focus,.el-button--success:hover{background:#85ce61;border-color:#85ce61;color:#fff}.el-button--success.is-active,.el-button--success:active{background:#5daf34;border-color:#5daf34;color:#fff}.el-button--success:active{outline:0}.el-button--success.is-disabled,.el-button--success.is-disabled:active,.el-button--success.is-disabled:focus,.el-button--success.is-disabled:hover{color:#fff;background-color:#b3e19d;border-color:#b3e19d}.el-button--success.is-plain{color:#67c23a;background:#f0f9eb;border-color:#c2e7b0}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#67c23a;border-color:#67c23a;color:#fff}.el-button--success.is-plain:active{background:#5daf34;border-color:#5daf34;color:#fff;outline:0}.el-button--success.is-plain.is-disabled,.el-button--success.is-plain.is-disabled:active,.el-button--success.is-plain.is-disabled:focus,.el-button--success.is-plain.is-disabled:hover{color:#a4da89;background-color:#f0f9eb;border-color:#e1f3d8}.el-button--warning{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.el-button--warning:focus,.el-button--warning:hover{background:#ebb563;border-color:#ebb563;color:#fff}.el-button--warning.is-active,.el-button--warning:active{background:#cf9236;border-color:#cf9236;color:#fff}.el-button--warning:active{outline:0}.el-button--warning.is-disabled,.el-button--warning.is-disabled:active,.el-button--warning.is-disabled:focus,.el-button--warning.is-disabled:hover{color:#fff;background-color:#f3d19e;border-color:#f3d19e}.el-button--warning.is-plain{color:#e6a23c;background:#fdf6ec;border-color:#f5dab1}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#e6a23c;border-color:#e6a23c;color:#fff}.el-button--warning.is-plain:active{background:#cf9236;border-color:#cf9236;color:#fff;outline:0}.el-button--warning.is-plain.is-disabled,.el-button--warning.is-plain.is-disabled:active,.el-button--warning.is-plain.is-disabled:focus,.el-button--warning.is-plain.is-disabled:hover{color:#f0c78a;background-color:#fdf6ec;border-color:#faecd8}.el-button--danger{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.el-button--danger:focus,.el-button--danger:hover{background:#f78989;border-color:#f78989;color:#fff}.el-button--danger.is-active,.el-button--danger:active{background:#dd6161;border-color:#dd6161;color:#fff}.el-button--danger:active{outline:0}.el-button--danger.is-disabled,.el-button--danger.is-disabled:active,.el-button--danger.is-disabled:focus,.el-button--danger.is-disabled:hover{color:#fff;background-color:#fab6b6;border-color:#fab6b6}.el-button--danger.is-plain{color:#f56c6c;background:#fef0f0;border-color:#fbc4c4}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#f56c6c;border-color:#f56c6c;color:#fff}.el-button--danger.is-plain:active{background:#dd6161;border-color:#dd6161;color:#fff;outline:0}.el-button--danger.is-plain.is-disabled,.el-button--danger.is-plain.is-disabled:active,.el-button--danger.is-plain.is-disabled:focus,.el-button--danger.is-plain.is-disabled:hover{color:#f9a7a7;background-color:#fef0f0;border-color:#fde2e2}.el-button--info{color:#fff;background-color:#909399;border-color:#909399}.el-button--info:focus,.el-button--info:hover{background:#a6a9ad;border-color:#a6a9ad;color:#fff}.el-button--info.is-active,.el-button--info:active{background:#82848a;border-color:#82848a;color:#fff}.el-button--info:active{outline:0}.el-button--info.is-disabled,.el-button--info.is-disabled:active,.el-button--info.is-disabled:focus,.el-button--info.is-disabled:hover{color:#fff;background-color:#c8c9cc;border-color:#c8c9cc}.el-button--info.is-plain{color:#909399;background:#f4f4f5;border-color:#d3d4d6}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#909399;border-color:#909399;color:#fff}.el-button--info.is-plain:active{background:#82848a;border-color:#82848a;color:#fff;outline:0}.el-button--info.is-plain.is-disabled,.el-button--info.is-plain.is-disabled:active,.el-button--info.is-plain.is-disabled:focus,.el-button--info.is-plain.is-disabled:hover{color:#bcbec2;background-color:#f4f4f5;border-color:#e9e9eb}.el-button--medium{padding:10px 20px;font-size:14px;border-radius:4px}.el-button--mini,.el-button--small{font-size:12px;border-radius:3px}.el-button--medium.is-round{padding:10px 20px}.el-button--medium.is-circle{padding:10px}.el-button--small,.el-button--small.is-round{padding:9px 15px}.el-button--small.is-circle{padding:9px}.el-button--mini,.el-button--mini.is-round{padding:7px 15px}.el-button--mini.is-circle{padding:7px}.el-button--text{border-color:transparent;color:#409eff;background:0 0;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#66b1ff;border-color:transparent;background-color:transparent}.el-button--text:active{color:#3a8ee6;border-color:transparent;background-color:transparent}.el-input__inner,.el-textarea__inner{color:#606266;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-button--text.is-disabled,.el-button--text.is-disabled:focus,.el-button--text.is-disabled:hover{border-color:transparent}.el-button-group .el-button--danger:last-child,.el-button-group .el-button--danger:not(:first-child):not(:last-child),.el-button-group .el-button--info:last-child,.el-button-group .el-button--info:not(:first-child):not(:last-child),.el-button-group .el-button--primary:last-child,.el-button-group .el-button--primary:not(:first-child):not(:last-child),.el-button-group .el-button--success:last-child,.el-button-group .el-button--success:not(:first-child):not(:last-child),.el-button-group .el-button--warning:last-child,.el-button-group .el-button--warning:not(:first-child):not(:last-child),.el-button-group>.el-dropdown>.el-button{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child,.el-button-group .el-button--danger:not(:first-child):not(:last-child),.el-button-group .el-button--info:first-child,.el-button-group .el-button--info:not(:first-child):not(:last-child),.el-button-group .el-button--primary:first-child,.el-button-group .el-button--primary:not(:first-child):not(:last-child),.el-button-group .el-button--success:first-child,.el-button-group .el-button--success:not(:first-child):not(:last-child),.el-button-group .el-button--warning:first-child,.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-right-color:hsla(0,0%,100%,.5)}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-button-group>.el-button{float:left;position:relative}.el-button-group>.el-button+.el-button{margin-left:0}.el-button-group>.el-button.is-disabled{z-index:1}.el-button-group>.el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group>.el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group>.el-button:first-child:last-child{border-radius:4px}.el-button-group>.el-button:first-child:last-child.is-round{border-radius:20px}.el-button-group>.el-button:first-child:last-child.is-circle{border-radius:50%}.el-button-group>.el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group>.el-button:not(:last-child){margin-right:-1px}.el-button-group>.el-button.is-active,.el-button-group>.el-button:active,.el-button-group>.el-button:focus,.el-button-group>.el-button:hover{z-index:1}.el-button-group>.el-dropdown>.el-button{border-top-left-radius:0;border-bottom-left-radius:0}.el-textarea{display:inline-block;width:100%;vertical-align:bottom;font-size:14px}.el-textarea__inner{display:block;resize:vertical;padding:5px 15px;line-height:1.5;box-sizing:border-box;width:100%;font-size:inherit;background-color:#fff;background-image:none;border:1px solid #dcdfe6;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#c0c4cc}.el-textarea__inner::-ms-input-placeholder{color:#c0c4cc}.el-textarea__inner::placeholder{color:#c0c4cc}.el-textarea__inner:hover{border-color:#c0c4cc}.el-textarea__inner:focus{outline:0;border-color:#409eff}.el-textarea.is-disabled .el-textarea__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#c0c4cc}.el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder{color:#c0c4cc}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#c0c4cc}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input::-webkit-scrollbar{z-index:11;width:6px}.el-input::-webkit-scrollbar:horizontal{height:6px}.el-input::-webkit-scrollbar-thumb{border-radius:5px;width:6px;background:#b4bccc}.el-input::-webkit-scrollbar-corner,.el-input::-webkit-scrollbar-track{background:#fff}.el-input::-webkit-scrollbar-track-piece{background:#fff;width:6px}.el-input .el-input__clear{color:#c0c4cc;font-size:14px;line-height:16px;cursor:pointer;-webkit-transition:color .2s cubic-bezier(.645,.045,.355,1);transition:color .2s cubic-bezier(.645,.045,.355,1)}.el-input .el-input__clear:hover{color:#909399}.el-input__inner{background-color:#fff;background-image:none;border-radius:4px;border:1px solid #dcdfe6;box-sizing:border-box;display:inline-block;font-size:inherit;height:40px;line-height:40px;outline:0;padding:0 15px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__prefix,.el-input__suffix{position:absolute;-webkit-transition:all .3s;text-align:center;height:100%;color:#c0c4cc;top:0}.el-input__inner::-webkit-input-placeholder{color:#c0c4cc}.el-input__inner::-ms-input-placeholder{color:#c0c4cc}.el-input__inner::placeholder{color:#c0c4cc}.el-input__inner:hover{border-color:#c0c4cc}.el-input.is-active .el-input__inner,.el-input__inner:focus{border-color:#409eff;outline:0}.el-input__suffix{right:5px;transition:all .3s;pointer-events:none}.el-input__suffix-inner{pointer-events:all}.el-input__prefix{left:5px;transition:all .3s}.el-input__icon{height:100%;width:25px;text-align:center;-webkit-transition:all .3s;transition:all .3s;line-height:40px}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__validateIcon{pointer-events:none}.el-input.is-disabled .el-input__inner{background-color:#f5f7fa;border-color:#e4e7ed;color:#c0c4cc;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__inner::-ms-input-placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__inner::placeholder{color:#c0c4cc}.el-input.is-disabled .el-input__icon{cursor:not-allowed}.el-input--suffix .el-input__inner{padding-right:30px}.el-input--prefix .el-input__inner{padding-left:30px}.el-input--medium{font-size:14px}.el-input--medium .el-input__inner{height:36px;line-height:36px}.el-input--medium .el-input__icon{line-height:36px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:32px;line-height:32px}.el-input--small .el-input__icon{line-height:32px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:28px;line-height:28px}.el-input--mini .el-input__icon{line-height:28px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate;border-spacing:0}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#f5f7fa;color:#909399;vertical-align:middle;display:table-cell;position:relative;border:1px solid #dcdfe6;border-radius:4px;padding:0 20px;width:1px;white-space:nowrap}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner,.el-input-group__prepend{border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append:focus,.el-input-group__prepend:focus{outline:0}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:inline-block;margin:-10px -20px}.el-input-group__append button.el-button,.el-input-group__append div.el-select .el-input__inner,.el-input-group__append div.el-select:hover .el-input__inner,.el-input-group__prepend button.el-button,.el-input-group__prepend div.el-select .el-input__inner,.el-input-group__prepend div.el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0}.el-input-group__append{border-left:0}.el-input-group--append .el-select .el-input.is-focus .el-input__inner,.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner{border-color:transparent}.el-input__inner::-ms-clear{display:none;width:0;height:0}.el-message-box{display:inline-block;width:420px;padding-bottom:10px;vertical-align:middle;background-color:#fff;border-radius:4px;border:1px solid #ebeef5;font-size:18px;-webkit-box-shadow:0 2px 12px 0 rgba(0,0,0,.1);box-shadow:0 2px 12px 0 rgba(0,0,0,.1);text-align:left;-webkit-backface-visibility:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:15px 15px 10px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:18px;line-height:1;color:#303133}.el-message-box__headerbtn{position:absolute;top:15px;right:15px;padding:0;border:none;outline:0;background:0 0;font-size:16px;cursor:pointer}.el-message-box__headerbtn .el-message-box__close{color:#909399}.el-message-box__headerbtn:focus .el-message-box__close,.el-message-box__headerbtn:hover .el-message-box__close{color:#409eff}.el-message-box__content{position:relative;padding:10px 15px;color:#606266;font-size:14px}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#f56c6c}.el-message-box__status{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:24px!important}.el-message-box__status:before{padding-left:1px}.el-message-box__status+.el-message-box__message{padding-left:36px;padding-right:12px}.el-message-box__status.el-icon-success{color:#67c23a}.el-message-box__status.el-icon-info{color:#909399}.el-message-box__status.el-icon-warning{color:#e6a23c}.el-message-box__status.el-icon-error{color:#f56c6c}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:24px}.el-message-box__errormsg{color:#f56c6c;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__btns{padding:5px 15px 0;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box--center{padding-bottom:30px}.el-message-box--center .el-message-box__header{padding-top:30px}.el-message-box--center .el-message-box__title{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.el-message-box--center .el-message-box__status{position:relative;top:auto;padding-right:5px;text-align:center;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.el-message-box--center .el-message-box__message{margin-left:0}.el-message-box--center .el-message-box__btns,.el-message-box--center .el-message-box__content{text-align:center}.el-message-box--center .el-message-box__content{padding-left:27px;padding-right:27px}.msgbox-fade-enter-active{-webkit-animation:msgbox-fade-in .3s;animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{-webkit-animation:msgbox-fade-out .3s;animation:msgbox-fade-out .3s}@-webkit-keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@-webkit-keyframes msgbox-fade-out{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes msgbox-fade-out{0%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}.areaRecharge_page .tablecolor{background-color:#fff;font-weight:700}.areaRecharge_page .big.filter-item .filter-item-label{width:100px}.areaRecharge_page .detailClass{height:35px;font-weight:700}.areaRecharge_page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px}.areaRecharge_page .click-tab-class{cursor:pointer}.areaRecharge_page .textarea_class{resize:none;border-radius:4px;width:360px;height:95px}.areaRecharge_page .radio-class-isGive .el-radio__label{font-size:16px}.areaRecharge_page .radio-class-give .el-radio__label{font-size:14px}.areaRecharge_page .radio-class-give .el-radio{width:60px}.areaRecharge_page .giveserviceClass{font-size:16px;margin-top:15px}.areaRecharge_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:185px}.areaRecharge_page .giveserviceClass .title{margin-right:10px;width:130px;vertical-align:top;display:inline-block;text-align:justify;text-align-last:justify}.areaRecharge_page .giveserviceClass .content{display:inline-block}.areaRecharge_page .payType-class{font-size:16px;margin-top:15px;width:100%}.areaRecharge_page .payType-class .payType-title-class{width:130px;text-align:justify;text-align-last:justify;display:inline-block;vertical-align:top;margin-top:14px}.areaRecharge_page .payType-class .payType-content-class{display:inline-block;width:80%}.areaRecharge_page .payType-class .payType-content-class input{width:100%}@media screen and (max-width:1600px){.areaRecharge_page .el-button{padding:0 0}.areaRecharge_page .detailClass{height:30px;font-size:12px;font-weight:700}.areaRecharge_page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.areaRecharge_page .giveserviceClass,.areaRecharge_page .radio-class-give .el-radio__label,.areaRecharge_page .radio-class-isGive .el-radio__label{font-size:12px}.areaRecharge_page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:130px;vertical-align:top;display:inline-block}.areaRecharge_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.areaRecharge_page .giveserviceClass .content{display:inline-block}.areaRecharge_page .payType-class{font-size:12px;margin-top:15px;width:100%}.areaRecharge_page .payType-class .payType-title-class{width:130px;text-align:justify;text-align-last:justify;display:inline-block;vertical-align:top;margin-top:14px}.areaRecharge_page .payType-class .payType-content-class{display:inline-block;width:80%}.areaRecharge_page .payType-class .payType-content-class .el-table .cell,.areaRecharge_page .payType-class .payType-content-class .el-table th>.cell{font-size:12px}.areaRecharge_page .payType-class .payType-content-class input{width:100%}}.area_page .tablecolor{background-color:#fff}.area_page .config_style{display:flex;margin-top:5px}.area_page .el-button{padding:0 8px}.area_page .search-box .button_q{min-width:194px;margin-left:-20px}@media screen and (max-width:1600px){.area_page .el-button{padding:0 1px}}.CreditMarginEdit .el-input-number{width:100%}.CreditMarginEdit .el-input-number .el-input__inner{text-align:left}.pointer{cursor:pointer}.activityDialog .el-dialog{width:565px}.activityDialog .el-dialog .FormLine{height:auto}.activityDialog .el-dialog .FormItem{width:100%}.activityDialog .el-dialog .FormItem-label{width:100px;text-align:right;text-align-last:auto}.activityDialog .el-dialog .FormItem-content{flex:1;display:flex}.activityDialog .el-dialog .FormItem-content>.el-input,.activityDialog .el-dialog .FormItem-content>.el-input-number,.activityDialog .el-dialog .FormItem-content>.el-textarea{width:300px}.activityDialog .el-dialog .FormItem-content .el-radio{line-height:22px}.activityDialog .el-dialog .FormItem-content .date-range-pick{width:300px}.activityDialog .el-dialog .FormItem-content .date-range-pick .md-data-picker,.activityDialog .el-dialog .givenRange .el-input-number{width:140px}.activityDialog .el-dialog .givenRange .givenRange-connect{width:20px;text-align:center}.activityDialog .el-dialog .groupItem .groupItemCount,.activityDialog .el-dialog .groupItem .groupItemSize{width:140px}.activityDialog .el-dialog .groupItem .groupItemSize{margin-right:20px}.activityDialog .el-dialog .groupItem .el-input-number{width:100px;margin-right:10px}.activityDialog .el-dialog .with-text .el-input-number{width:250px;margin-right:20px}@media screen and (min-width:1600px){.activityDialog .el-dialog{width:765px}.activityDialog .el-dialog .FormItem-label{width:200px}.activityDialog .el-dialog .FormItem-content .date-range-pick,.activityDialog .el-dialog .FormItem-content>.el-input,.activityDialog .el-dialog .FormItem-content>.el-input-number,.activityDialog .el-dialog .FormItem-content>.el-textarea{width:400px}.activityDialog .el-dialog .FormItem-content .date-range-pick .md-data-picker,.activityDialog .el-dialog .givenRange .el-input-number{width:190px}.activityDialog .el-dialog .givenRange .givenRange-connect{width:20px}.activityDialog .el-dialog .groupItem .groupItemCount,.activityDialog .el-dialog .groupItem .groupItemSize{width:190px}.activityDialog .el-dialog .groupItem .el-input-number{width:136px}.activityDialog .el-dialog .with-text .el-input-number{width:336px}}.euipmentConf .FormLine .FormItem{display:flex;width:100%}.euipmentConf .FormLine .FormItem-label{text-align-last:right;width:100px}.euipmentConf .FormLine .FormItem-content{flex:1}.cmb-activity .payTypeConfig .payTypeConfig-item{margin:0 30px 0 0}.euipmentConf .record-List .record-Item{display:inline-block;width:30%}.cmb-payway .cmb-payway_table-wrap{display:flex;justify-content:flex-end}.cmb-payway .cmb-payway_table{width:500px;padding-left:40px}.cmb-payway .cmb-payway_table .payway-table-line{display:flex;margin-bottom:20px}.cmb-payway .cmb-payway_table .payway-table-item{width:33%}.cmb-payway .cmb-payway_table .payway-table-item .el-input-number{width:50%}.cmb-payway .cmb-payway_table .payway-table-item .el-input-number .el-input__inner{text-align:right}.cmb-payway .records-list{width:100%;display:block;height:auto;padding-left:20px}.cmb-payway .records-list .records-item{margin-top:10px;display:flex}.cmb-payway .records-list .records-col{width:30%}.cmb-payway .payline-wrap{display:block;height:auto}.cmb-payway .payline-wrap .payline{flex:1}.cmb-payway .payline-wrap .paytype-item{display:flex;margin-bottom:10px;padding-left:20px}.cmb-payway .payline-wrap .paytype-col{width:30%}.errPage-container[data-v-509f1e64]{width:800px;margin:100px auto}.errPage-container .pan-back-btn[data-v-509f1e64]{background:#008489;color:#fff}.errPage-container .pan-gif[data-v-509f1e64],.errPage-container .pan-img[data-v-509f1e64]{margin:0 auto;display:block}.errPage-container .text-jumbo[data-v-509f1e64]{font-size:60px;font-weight:700;color:#484848}.errPage-container .list-unstyled[data-v-509f1e64]{font-size:14px}.errPage-container .list-unstyled li[data-v-509f1e64]{padding-bottom:5px}.errPage-container .list-unstyled a[data-v-509f1e64]{color:#008489;text-decoration:none}.errPage-container .list-unstyled a[data-v-509f1e64]:hover{text-decoration:underline}.wscn-http404[data-v-9feff8fe]{position:relative;width:1200px;margin:20px auto 60px;padding:0 100px;overflow:hidden}.wscn-http404 .pic-404[data-v-9feff8fe]{position:relative;float:left;width:600px;padding:150px 0;overflow:hidden}.wscn-http404 .pic-404__parent[data-v-9feff8fe]{width:100%}.wscn-http404 .pic-404__child[data-v-9feff8fe]{position:absolute}.wscn-http404 .pic-404__child.left[data-v-9feff8fe]{width:80px;top:17px;left:220px;opacity:0;animation-name:cloudLeft-data-v-9feff8fe;animation-duration:2s;animation-timing-function:linear;animation-fill-mode:forwards;animation-delay:1s}.wscn-http404 .pic-404__child.mid[data-v-9feff8fe]{width:46px;top:10px;left:420px;opacity:0;animation-name:cloudMid-data-v-9feff8fe;animation-duration:2s;animation-timing-function:linear;animation-fill-mode:forwards;animation-delay:1.2s}.wscn-http404 .pic-404__child.right[data-v-9feff8fe]{width:62px;top:100px;left:500px;opacity:0;animation-name:cloudRight-data-v-9feff8fe;animation-duration:2s;animation-timing-function:linear;animation-fill-mode:forwards;animation-delay:1s}@keyframes cloudLeft-data-v-9feff8fe{0%{top:17px;left:220px;opacity:0}20%{top:33px;left:188px;opacity:1}80%{top:81px;left:92px;opacity:1}to{top:97px;left:60px;opacity:0}}@keyframes cloudMid-data-v-9feff8fe{0%{top:10px;left:420px;opacity:0}20%{top:40px;left:360px;opacity:1}70%{top:130px;left:180px;opacity:1}to{top:160px;left:120px;opacity:0}}@keyframes cloudRight-data-v-9feff8fe{0%{top:100px;left:500px;opacity:0}20%{top:120px;left:460px;opacity:1}80%{top:180px;left:340px;opacity:1}to{top:200px;left:300px;opacity:0}}.wscn-http404 .bullshit[data-v-9feff8fe]{position:relative;float:left;width:300px;padding:150px 0;overflow:hidden}.wscn-http404 .bullshit__oops[data-v-9feff8fe]{font-size:32px;font-weight:700;line-height:40px;color:#1482f0;opacity:0;margin-bottom:20px;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-fill-mode:forwards}.wscn-http404 .bullshit__headline[data-v-9feff8fe]{font-size:20px;line-height:24px;color:#1482f0;opacity:0;margin-bottom:10px;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-delay:.1s;animation-fill-mode:forwards}.wscn-http404 .bullshit__info[data-v-9feff8fe]{font-size:13px;line-height:21px;color:grey;opacity:0;margin-bottom:30px;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-delay:.2s;animation-fill-mode:forwards}.wscn-http404 .bullshit__return-home[data-v-9feff8fe]{display:block;float:left;width:110px;height:36px;background:#1482f0;border-radius:100px;text-align:center;color:#fff;opacity:0;font-size:14px;line-height:36px;cursor:pointer;animation-name:slideUp-data-v-9feff8fe;animation-duration:.5s;animation-delay:.3s;animation-fill-mode:forwards}@keyframes slideUp-data-v-9feff8fe{0%{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}.tab-container[data-v-210c9018]{margin:30px}.image-uploader[data-v-168afdb0]{width:123px;height:123px;border:1px solid #ccc}.image-uploader .mask[data-v-168afdb0]{position:absolute;z-index:20;width:100%;height:100%;background-color:rgba(0,0,0,.5)}.image-uploader .image-uploader-done[data-v-168afdb0],.image-uploader .image-uploader-pre[data-v-168afdb0]{display:block;position:relative;height:100%}.image-uploader .image-uploader-done .delimg[data-v-168afdb0],.image-uploader .image-uploader-pre .delimg[data-v-168afdb0]{width:50px;height:50px;position:absolute;left:50%;top:50%;font-size:50px;fill:#999;margin-left:-25px;margin-top:-25px;fill:#fff}.image-uploader .image-uploader-done .image-uploader-img[data-v-168afdb0],.image-uploader .image-uploader-pre .image-uploader-img[data-v-168afdb0]{width:100%}.image-uploader .image-uploader-icon[data-v-168afdb0]{position:absolute;display:block;width:50px;height:50px;font-size:50px;left:50%;top:50%;margin-top:-25px;margin-left:-25px;fill:#999}.posBox{width:100px;height:100px;background-color:bisque;position:relative;top:0;left:-20px;z-index:2000}.line{text-align:center}.from-box{width:800px}.table-card{display:flex;flex-wrap:wrap}.timeBox{color:#fff}.timeBox .time{margin-right:10px}.avatar-container{margin-right:12px;display:flex;color:#fff;height:22px;line-height:22px;font-size:12px;flex:1;justify-content:flex-end}.avatar-container .avatar-container-line{margin:0 20px}.avatar-container .avatar-name{margin-right:25px}.avatar-container .avatar-quit{cursor:pointer;font-size:10px;line-height:24px}.avatar-container .avatar-quit .avatar-quit-icon{display:inline-block;margin-left:10px;margin-top:-2px;width:20px;height:18px;vertical-align:middle}.avatar-container .avatar-wrapper{cursor:pointer;color:#a0acb9;position:relative}.avatar-container .avatar-wrapper .user-avatar{width:40px;height:40px;border-radius:10px}.avatar-container .avatar-wrapper .el-icon-caret-bottom{position:absolute;right:-18px;top:6px;font-size:12px}.avatar-container .setpwd-info{color:red}@media screen and (min-width:1600px){.avatar-container{margin-right:24px;font-size:16px}.avatar-container .avatar-quit{font-size:14px}}.login-container{position:fixed;height:100%;width:100%;background:#f5f6ff url(img/home_bg_img.8db24a28.png) no-repeat;background-size:contain}.login-container .login-form{position:absolute;top:148px;right:187px;width:494px}.login-container .title{display:flex;justify-content:space-between;font-size:34px;color:#333;font-weight:600;margin:0 0 54px;height:66px}.login-container .title .logo-icom{width:204px;height:66px}.login-container .title .title-text{line-height:82px}.login-container .el-form-item{margin-bottom:16px}.login-container .show-pwd{position:absolute;top:22px;right:26px;width:22px;height:22px;cursor:pointer}.login-container .vcode-box{display:flex;justify-content:space-between;position:absolute;top:18px;right:18px;width:150px;line-height:36px;font-size:14px}.login-container .vcode-box .vcode-img{width:90px}.login-container .vcode-box .vcode-text{cursor:pointer;color:#4e82fb}.login-container .account-tool{height:20px;line-height:20px;display:flex;justify-content:space-between;color:#666}.login-container .account-tool .forget-pwd{cursor:pointer}.login-container .login-btn{margin-top:60px;height:66px;font-size:24px;background-color:#4e82fb}.login-container input{border-color:#666;background-color:#fff}.login-container .el-input,.login-container .el-input__inner{height:66px;line-height:66px;font-size:20px}.login-container .com-info{position:absolute;right:213px;bottom:40px;color:#666;font-size:16px}@media screen and (max-width:1600px){.login-container .login-form{top:125px;right:105px;width:340px}.login-container .title{font-size:24px;margin:0 0 38px;height:45px}.login-container .title .logo-icom{width:140px;height:45px}.login-container .title .title-text{line-height:60px}.login-container .el-form-item{margin-bottom:12px}.login-container .show-pwd{top:12px;right:16px}.login-container .vcode-box{top:8px;right:18px;width:120px;line-height:30px;font-size:12px}.login-container .vcode-box .vcode-img{width:63px}.login-container .account-tool{height:16px;line-height:16px}.login-container .account-tool .el-checkbox__label{font-size:12px}.login-container .login-btn{margin-top:40px;height:46px;font-size:16px}.login-container .el-input,.login-container .el-input__inner{height:46px;line-height:46px;font-size:14px}.login-container .com-info{right:120px;font-size:10px}}.datepicker-overlay[data-v-26682d23]{position:fixed;width:100%;height:100%;z-index:998;top:0;left:0;overflow:hidden;-webkit-animation:fadein-data-v-26682d23 .5s;-moz-animation:fadein-data-v-26682d23 .5s;-ms-animation:fadein-data-v-26682d23 .5s;-o-animation:fadein-data-v-26682d23 .5s;animation:fadein-data-v-26682d23 .5s}@keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-moz-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-ms-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}@-o-keyframes fadein-data-v-26682d23{0%{opacity:0}to{opacity:1}}.cov-date-body[data-v-26682d23]{display:inline-block;background:#3f51b5;overflow:hidden;position:relative;font-size:16px;font-family:Roboto;font-weight:400;position:fixed;display:block;width:400px;max-width:100%;z-index:999;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);box-shadow:0 1px 3px 0 rgba(0,0,0,.2)}.cov-picker-box[data-v-26682d23]{background:#fff;width:100%;display:inline-block;padding:25px;box-sizing:border-box!important;-moz-box-sizing:border-box!important;-webkit-box-sizing:border-box!important;-ms-box-sizing:border-box!important;width:400px;max-width:100%;height:280px;text-align:start!important}.cov-picker-box td[data-v-26682d23]{height:34px;width:34px;padding:0;line-height:34px;color:#000;background:#fff;text-align:center;cursor:pointer}.cov-picker-box td[data-v-26682d23]:hover{background:#e6e6e6}table[data-v-26682d23]{border-collapse:collapse;border-spacing:0;width:100%}.day[data-v-26682d23]{width:14.2857143%;display:inline-block;text-align:center;cursor:pointer;height:34px;padding:0;line-height:34px;color:#000;background:#fff;vertical-align:middle}.week ul[data-v-26682d23]{margin:0 0 8px;padding:0;list-style:none}.week ul li[data-v-26682d23]{width:14.2%;display:inline-block;text-align:center;background:transparent;color:#000;font-weight:700}.passive-day[data-v-26682d23]{color:#bbb}.checked[data-v-26682d23]{background:#f50057;color:#fff!important;border-radius:3px}.unavailable[data-v-26682d23]{color:#ccc;cursor:not-allowed}.cov-date-monthly[data-v-26682d23]{height:150px}.cov-date-monthly>div[data-v-26682d23]{display:inline-block;padding:0;margin:0;vertical-align:middle;color:#fff;height:150px;float:left;text-align:center;cursor:pointer}.cov-date-next[data-v-26682d23],.cov-date-previous[data-v-26682d23]{position:relative;width:20%!important;text-indent:-300px;overflow:hidden;color:#fff}.cov-date-caption[data-v-26682d23]{width:60%;padding:50px 0!important;box-sizing:border-box;font-size:24px}.cov-date-caption span[data-v-26682d23]:hover{color:hsla(0,0%,100%,.7)}.cov-date-next[data-v-26682d23]:hover,.cov-date-previous[data-v-26682d23]:hover{background:hsla(0,0%,100%,.1)}.day[data-v-26682d23]:hover{background:#eaeaea}.unavailable[data-v-26682d23]:hover{background:none}.checked[data-v-26682d23]:hover{background:#ff4f8e}.cov-date-next[data-v-26682d23]:before,.cov-date-previous[data-v-26682d23]:before{width:20px;height:2px;text-align:center;position:absolute;background:#fff;top:50%;margin-top:-7px;margin-left:-7px;left:50%;line-height:0;content:"";-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.cov-date-next[data-v-26682d23]:after,.cov-date-previous[data-v-26682d23]:after{width:20px;height:2px;text-align:center;position:absolute;background:#fff;margin-top:6px;margin-left:-7px;top:50%;left:50%;line-height:0;content:"";-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}.cov-date-previous[data-v-26682d23]:after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);transform:rotate(45deg)}.cov-date-previous[data-v-26682d23]:before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}.date-item[data-v-26682d23]{text-align:center;font-size:20px;padding:10px 0;cursor:pointer}.date-item[data-v-26682d23]:hover{background:#e0e0e0}.date-list[data-v-26682d23]{overflow:auto;vertical-align:top;padding:0}.cov-vue-date[data-v-26682d23]{display:inline-block;color:#5d5d5d}.button-box[data-v-26682d23]{background:#fff;vertical-align:top;height:50px;line-height:50px;text-align:right;padding-right:20px}.button-box span[data-v-26682d23]{cursor:pointer;padding:10px 20px}.watch-box[data-v-26682d23]{height:100%;overflow:hidden}.hour-box[data-v-26682d23],.min-box[data-v-26682d23]{display:inline-block;width:50%;text-align:center;height:100%;overflow:auto;float:left}.hour-box ul[data-v-26682d23],.min-box ul[data-v-26682d23]{list-style:none;margin:0;padding:0}.hour-item[data-v-26682d23],.min-item[data-v-26682d23]{padding:10px;font-size:36px;cursor:pointer}.hour-item[data-v-26682d23]:hover,.min-item[data-v-26682d23]:hover{background:#e3e3e3}.hour-box .active[data-v-26682d23],.min-box .active[data-v-26682d23]{background:#f50057;color:#fff!important}[data-v-26682d23]::-webkit-scrollbar{width:2px}[data-v-26682d23]::-webkit-scrollbar-track{background:#e3e3e3}[data-v-26682d23]::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:2px}.active-give-bean-detail-class{font-size:14px}.active-give-bean-detail-class .tablecolor{background-color:#fff;font-weight:700}.active-give-bean-detail-class .big.filter-item .filter-item-label{width:100px}.active-give-bean-detail-class .click-tab-class{cursor:pointer}.active-give-bean-detail-class .radio-class-give .el-radio__label{font-size:14px}.active-give-bean-detail-class .radio-class-give .el-radio{width:60px}.active-give-bean-detail-class .giveserviceClass.footer{margin-left:20px;vertical-align:top}.active-give-bean-detail-class .giveserviceClass{font-size:14px;margin-top:15px;display:inline-block}.active-give-bean-detail-class .giveserviceClass .customer-type{display:inline-block}.active-give-bean-detail-class .giveserviceClass .customer-type .el-checkbox{width:30px}.active-give-bean-detail-class .giveserviceClass .title.executeDate-class{height:20px;vertical-align:middle}.active-give-bean-detail-class .giveserviceClass .content{display:inline-block}.active-give-bean-detail-class .giveserviceClass .content textarea{width:295px;height:80px;resize:none}.active-give-bean-detail-class .giveserviceClass input{border-radius:5px;height:27px;line-height:40px;font-size:14px;width:200px}.active-give-bean-detail-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right;height:27px}.active-give-bean-detail-class .md-data-picker.el-input--prefix .el-input__inner{padding:0 0}@media screen and (max-width:1600px){.active-give-bean-detail-class .el-button{padding:0 0}.active-give-bean-detail-class .giveserviceClass,.active-give-bean-detail-class .giveserviceClass .el-checkbox__label,.active-give-bean-detail-class .radio-class-give .el-radio__label{font-size:12px}.active-give-bean-detail-class .giveserviceClass .content input{border-radius:5px;height:24px;line-height:40px;font-size:12px;width:146px}.active-give-bean-detail-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right}.active-give-bean-detail-class .md-data-picker.el-input--prefix .el-input__inner{padding:0 0;font-size:12px}}.active-give-bean-class{font-size:14px}.active-give-bean-class .feedback_detail_dialog .el-dialog{min-width:1275px}.active-give-bean-class .tablecolor{background-color:#fff;font-weight:700}.active-give-bean-class .big.filter-item .filter-item-label{width:100px}.active-give-bean-class .click-tab-class{cursor:pointer}.active-give-bean-class .radio-class-give .el-radio__label{font-size:14px}.active-give-bean-class .radio-class-give .el-radio{width:60px}.active-give-bean-class .giveserviceClass{font-size:14px;margin-top:15px}.active-give-bean-class .giveserviceClass .customer-type{display:inline-block}.active-give-bean-class .giveserviceClass .customer-type .el-checkbox{width:30px}.active-give-bean-class .giveserviceClass .title.executeDate-class{height:20px;vertical-align:middle}.active-give-bean-class .giveserviceClass .content{display:inline-block}.active-give-bean-class .giveserviceClass .content textarea{width:295px;height:80px;resize:none}.active-give-bean-class .giveserviceClass input{border-radius:5px;height:27px;line-height:40px;font-size:14px;width:200px}.active-give-bean-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right;height:27px}.active-give-bean-class .md-data-picker.el-input--prefix .el-input__inner{padding:0 0}@media screen and (max-width:1600px){.active-give-bean-class .el-button{padding:0 0}.active-give-bean-class .giveserviceClass,.active-give-bean-class .giveserviceClass .el-checkbox__label,.active-give-bean-class .radio-class-give .el-radio__label{font-size:12px}.active-give-bean-class .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.active-give-bean-class .giveserviceClass .title{margin-right:10px;width:100px;vertical-align:top;display:inline-block;text-align:right}}.firstrechargeConf_page .tablecolor{background-color:#fff;font-weight:700}.firstrechargeConf_page .big.filter-item .filter-item-label{width:100px}.firstrechargeConf_page .detailClass{height:35px;font-weight:700}.firstrechargeConf_page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px}.firstrechargeConf_page .click-tab-class{cursor:pointer}.firstrechargeConf_page .textarea_class{resize:none;border-radius:4px;width:360px;height:95px}.firstrechargeConf_page .radio-class-isGive .el-radio__label{font-size:16px}.firstrechargeConf_page .radio-class-give .el-radio__label{font-size:14px}.firstrechargeConf_page .radio-class-give .el-radio{width:60px}.firstrechargeConf_page .giveserviceClass{font-size:16px;margin-top:15px}.firstrechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:185px}.firstrechargeConf_page .giveserviceClass .title{margin-right:10px;width:86px;vertical-align:top}@media screen and (max-width:1600px){.firstrechargeConf_page .el-button{padding:0 0}.firstrechargeConf_page .detailClass{height:30px;font-size:12px;font-weight:700}.firstrechargeConf_page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.firstrechargeConf_page .giveserviceClass,.firstrechargeConf_page .radio-class-give .el-radio__label,.firstrechargeConf_page .radio-class-isGive .el-radio__label{font-size:12px}.firstrechargeConf_page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:57px;vertical-align:top}.firstrechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}}.rechargeConf_page .tablecolor{background-color:#fff;font-weight:700}.rechargeConf_page .list-content-class{line-height:5;font-size:14px}.rechargeConf_page .detailClass{height:35px;font-weight:700;flex-direction:row;min-width:330px}.rechargeConf_page .detailClass div{display:inline-block}.rechargeConf_page .detailClass .detailClass-content{margin-left:20px}.rechargeConf_page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px;width:100px;text-align:justify;text-align-last:justify}.rechargeConf_page .click-tab-class{cursor:pointer}.rechargeConf_page .textarea_class{resize:none;border-radius:4px}.rechargeConf_page .radio-class-give .el-radio__label,.rechargeConf_page .radio-class-isGive .el-radio__label{font-size:16px}.rechargeConf_page .giveserviceClass{font-size:14px;margin-top:15px}.rechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:185px}.rechargeConf_page .giveserviceClass .title{margin-right:10px;width:86px;vertical-align:top}.rechargeConf_page .udpate-class input{width:60px}.rechargeConf_page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:14px}.rechargeConf_page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}@media screen and (max-width:1600px){.rechargeConf_page .el-button{padding:0 0}.rechargeConf_page .detailClass{height:30px;font-size:12px;font-weight:700}.rechargeConf_page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.rechargeConf_page .giveserviceClass,.rechargeConf_page .radio-class-give .el-radio__label,.rechargeConf_page .radio-class-isGive .el-radio__label{font-size:12px}.rechargeConf_page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:57px;vertical-align:top}.rechargeConf_page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.rechargeConf_page .udpate-class input{width:60px}.rechargeConf_page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:12px}.rechargeConf_page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.rechargeConf_page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}}.register-page .tablecolor{background-color:#fff;font-weight:700}.register-page .big.filter-item .filter-item-label{width:100px}.register-page .detailClass{height:35px;font-weight:700;flex-direction:row;min-width:330px}.register-page .detailClass div{display:inline-block}.register-page .detailClass .detailClass-content{margin-left:20px}.register-page .detailClass .detailClass-title{margin-left:40px;margin-right:20px;margin-top:15px;font-size:14px;width:100px;text-align:justify;text-align-last:justify}.register-page .click-tab-class{cursor:pointer}.register-page .textarea_class{resize:none;border-radius:4px}.register-page .radio-class-isGive .el-radio__label{font-size:16px}.register-page .radio-class-give .el-radio__label{font-size:14px}.register-page .radio-class-give .el-radio{width:60px}.register-page .giveserviceClass{font-size:14px;margin-top:15px}.register-page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:100px}.register-page .giveserviceClass .title{margin-right:10px;width:86px;vertical-align:top}.register-page .udpate-class input{width:60px}.register-page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:14px}.register-page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.register-page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}@media screen and (max-width:1600px){.register-page .el-button{padding:0 0}.register-page .detailClass{height:30px;font-size:12px;font-weight:700}.register-page .detailClass .detailClass-title{margin-right:20px;margin-top:15px;font-size:12px}.register-page .giveserviceClass,.register-page .radio-class-give .el-radio__label,.register-page .radio-class-isGive .el-radio__label{font-size:12px}.register-page .giveserviceClass .title{position:relative;text-align:justify;text-align-last:justify;width:57px;vertical-align:top}.register-page .giveserviceClass input{border-radius:5px;height:24px;line-height:40px;font-size:14px;width:146px}.register-page .udpate-class input{width:60px}.register-page .udpate-class .backage{background-color:#6895fe;color:#ebeef5;line-height:3;font-size:12px}.register-page .udpate-class .udpate-titile-class{display:inline-block;width:100px;margin-top:20px;text-align:center}.register-page .udpate-class .udpate-titile-class.is-give-title-class{text-align:center;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class{text-align:left;width:130px;margin-top:20px}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio{width:0}.register-page .udpate-class .udpate-titile-class.is-give-class .el-radio.radio .el-radio__label{padding-left:3px}}.HeaderImgBox{width:40px;height:40px}.UserInfo-Box{width:170px;min-width:170px;font-family:Microsoft YaHei;font-size:12px;border-radius:8px}.UserInfo-Box .UserInfo-Title{flex-wrap:wrap;background-color:#4e82fb;position:relative;align-self:flex-start;padding:10px;box-sizing:border-box;display:flex}.UserInfo-Box .UserInfo-Title .UserInfo-Name-Box{align-self:center;flex:1;color:#fff;font-size:12px;line-height:24px}.UserInfo-Box .UserInfo-Title .UserInfo-Name-Box .UserInfo-Name-Col{margin-left:8px;display:flex;justify-content:space-between}.UserInfo-Box .UserInfo-Title .UserInfo-HeaderImg{width:46px;height:46px;border:3px solid #a7c0fd;border-radius:50%;margin-right:8px;overflow:hidden}.UserInfo-Box .UserInfo-Title .header-down{bottom:0;color:#fff;line-height:30px;min-width:130px}.UserInfo-Box .UserInfo-Title .UserInfo-IdTag{border-radius:0 8px 8px 0;box-shadow:0 0 10px #666;position:absolute;width:70px;height:18px;line-height:18px;text-indent:5px;left:0;bottom:-9px;background-color:#ffd737;font-size:12px;font-weight:700;color:#084e8a}.UserInfo-Box .UserInfo-Content{position:relative;height:auto;background-color:#fff;padding:10px}.UserInfo-Box .UserInfo-Content .UserInfo-Content-Col{line-height:25px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box{margin-top:2px;display:flex}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State{display:flex;margin-right:10px;align-items:center}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State .UserInfo-State-Icon{width:12px;height:12px;margin-right:4px}.UserInfo-Box .UserInfo-Content .UserInfo-CampusName{line-height:1;margin-top:0}.UserInfo-Box .UserInfo-Content .user-pay{flex-wrap:wrap;display:flex}.UserInfo-Box .UserInfo-Content .user-pay .user-pay-pic{width:30px;height:30px;margin-right:10px}.UserInfo-Box .UserInfo-Content .user-pay .user-pay-pic .img{width:auto;height:auto}.UserInfo-Box .UserInfo-Content .add-button,.UserInfo-Box .UserInfo-Content .add-button .is-button{width:30px;height:30px}@media screen and (min-width:1600px){.UserInfo-Box{width:300px;min-width:300px;height:300px;font-size:16px}.UserInfo-Box .UserInfo-Title{padding:20px}.UserInfo-Box .UserInfo-Title .UserInfo-Name-Box{font-size:18px;line-height:38px}.UserInfo-Box .UserInfo-Title .UserInfo-HeaderImg{width:80px;height:80px;border-width:5px;margin-right:10px}.UserInfo-Box .UserInfo-Title .UserInfo-IdTag{width:128px;height:30px;line-height:30px;text-indent:5px;bottom:-20px;font-size:16px}.UserInfo-Box .UserInfo-Content{height:180px;padding:20px}.UserInfo-Box .UserInfo-Content .UserInfo-Content-Col{line-height:38px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box{margin-top:6px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State{margin-right:20px}.UserInfo-Box .UserInfo-Content .UserInfo-State-Box .UserInfo-State .UserInfo-State-Icon{width:20px;height:20px;margin-right:10px}.UserInfo-Box .UserInfo-Content .UserInfo-CampusName{line-height:1;margin-top:10px}}.SigleUserWithContent .SigleUserWithContent-inner .right-part{border-radius:0 8px 8px 8px}.SigleUserWithContent .SigleUserWithContent-inner .right-part .el-dialog__header{border-radius:0 8px 0 0}.operpay .operpay-hsz{color:#f70707;margin-top:10px;margin-bottom:10px;margin-left:8px}.operpay .operpay-body{margin-bottom:15px;font-size:15px}.operpay .operpay-body .FormItem{margin-left:10px}.operpay .operpay-body .FormItem .FormItem-content.normal{width:252px}.operpay .table-with-body8 .table-width-body{width:1024px}.operpay .table-with-body8 .table-width-body .column-pic{width:20px;height:20px;margin:0 10px 0 70px}.operpay .table-with-body8 .table-width-body .just-format-picture{display:flex;justify-content:center;align-items:center}.operpay .table-with-body8 .table-width-body .just-format-picture img{width:20px;height:20px}.operpay .expand-item .expand-item-kv{display:flex;font-size:16px;line-height:23px}.operpay .expand-item .expand-item-kv .expand-item-key{text-align:right;width:200px}.operpay .expand-item .expand-item-kv .expand-item-value{width:auto;margin-left:10px}.operpay .operpay-body-self .FormLine{height:auto}.operpay .operpay-body-self .versionkey{width:435px}.operpay .operpay-body-self .versionkey .versionkey-item{margin:0 0 10px 30px}.operpay .key-class{margin-top:16px}.operpay .key-class .key-class-v{display:flex;font-size:16px;line-height:23px;margin-top:16px}.operpay .key-class .key-class-v .key-class-v-k{line-height:40px;text-align:justify;text-align-last:justify;width:128px}.operpay .key-class .key-class-v .key-class-v-k:after{content:"\FF1A";position:absolute}.operpay .key-class .key-class-v .key-class-v-v{width:auto;margin-left:20px}.oper_page .FormItem .FormItem-content.big{width:293px}.oper_page .search-box .button_q{min-width:194px;margin-left:-20px}.oper_page .img_style{display:flex;position:relative;margin-left:10px}.oper_page .img_style .image-uploader{height:109px}.oper_page .zi_style{font-size:18px;color:#333}.oper_page .pay_img{width:30px;height:30px;display:inline-block}@media screen and (max-width:1600px){.oper_page .zi_style{font-size:12px;color:#333;width:57px}.oper_page .img_style{margin-left:10px}.oper_page .el-dialog__wrapper .el-dialog__footer{box-sizing:content-box;height:40px;padding:89px 10px 20px;text-align:center}.oper_page .img_style{display:flex;position:relative}.oper_page .img_style .image-uploader{height:100px}}.SigleUserWithContent .SigleUserWithContent-inner{margin-left:60px;display:flex;background:transparent;box-shadow:none}.SigleUserWithContent .SigleUserWithContent-inner .UserInfo-Box{border-radius:8px}.SigleUserWithContent .SigleUserWithContent-inner .UserInfo-Box .UserInfo-Title{border-radius:8px 8px 0 0}.SigleUserWithContent .SigleUserWithContent-inner .UserInfo-Box .UserInfo-Content{border-radius:0 0 8px 8px}.SigleUserWithContent .SigleUserWithContent-inner .left-part{z-index:2;border-radius:8px;box-shadow:2px 2px 10px #333;box-shadow:none;align-self:flex-start}.SigleUserWithContent .SigleUserWithContent-inner .right-part{margin-left:20px;background-color:#fff;border-radius:8px 8px 8px 8px}.SigleUserWithContent .SigleUserWithContent-inner .right-part .el-dialog__header{border-radius:8px 8px 0 0}.SigleUserWithContent .sigle-user__body{display:flex;padding:0}.SigleUserWithContent .el-dialog__header{position:relative;height:38px;background-color:#4e82fb;padding:10px}.SigleUserWithContent .el-dialog__header .el-dialog__headerbtn{position:absolute;top:-20px;right:-20px;width:39px;height:39px}.SigleUserWithContent .el-dialog__header .connect-line{position:absolute;left:-50px;top:0;border-top:19px solid transparent;border-right:50px solid #4e82fb;border-bottom:19px solid transparent}.SigleUserWithContent .el-dialog__header .el-dialog__title{margin:0 auto 0;display:flex;justify-content:center;align-items:center;color:#fff;line-height:18px;vertical-align:top;font-size:14px}.SigleUserWithContent .el-dialog__header .el-dialog__title img{width:14px;height:14px;margin-right:20px}.SigleUserWithContent .el-dialog__footer{box-sizing:content-box;text-align:center}@media screen and (min-width:1600px){.SigleUserWithContent .SigleUserWithContent-inner .right-part{margin-left:25px}.SigleUserWithContent .el-dialog__header{height:96px}.SigleUserWithContent .el-dialog__header .el-dialog__headerbtn{top:-30px;right:-30px;width:65px;height:65px}.SigleUserWithContent .el-dialog__header .connect-line{left:-70px;border-top-width:48px;border-right-width:70px;border-bottom-width:48px}.SigleUserWithContent .el-dialog__header .el-dialog__title{margin:14px auto 0;font-size:22px}.SigleUserWithContent .el-dialog__header .el-dialog__title img{width:28px;height:28px;margin-right:20px}.SigleUserWithContent .el-dialog__footer{padding:50px 20px 40px}}.pay-ability .operpay-hsz{color:#f70707;margin-top:10px;margin-bottom:10px;margin-left:8px}.pay-ability .operate-payinfo .operpay-body{margin-bottom:15px;font-size:15px}.pay-ability .operate-payinfo .operpay-body .FormItem{margin-left:10px}.pay-ability .operate-payinfo .operpay-body .FormItem .FormItem-content.normal{width:252px}.pay-ability .operate-payinfo .table-width-body{width:1024px}.pay-ability .operate-payinfo .table-width-body .column-pic{width:22px;height:22px;margin:0 10px 0 25px}.pay-ability .operate-payinfo .expand-item .expand-item-kv{display:flex;font-size:16px;line-height:23px}.pay-ability .operate-payinfo .expand-item .expand-item-kv .expand-item-key{text-align:right;width:200px}.pay-ability .operate-payinfo .expand-item .expand-item-kv .expand-item-value{width:auto;margin-left:10px}.pay-ability .operate-payinfo .operpay-body-self .FormLine{height:auto}.pay-ability .operate-payinfo .operpay-body-self .versionkey{width:435px}.pay-ability .operate-payinfo .operpay-body-self .versionkey .versionkey-item{margin:0 0 10px 30px}.pay-ability .operate-payinfo .add-or-edit .el-dialog{width:900px!important}.pay-ability .operate-payinfo .add-or-edit .el-dialog .province-city .FormItem-content{width:254px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class{margin-top:16px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v{display:flex;font-size:16px;line-height:23px;color:#262626;margin-top:16px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k{line-height:40px;text-align:end;width:160px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k:after{content:"\FF1A";position:absolute}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v{width:auto;margin-left:20px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v .el-input{width:600px}@media screen and (max-width:1600px){.pay-ability .operate-payinfo .add-or-edit .el-dialog{width:680px!important}.pay-ability .operate-payinfo .add-or-edit .el-dialog .province-city .FormItem-content{width:254px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class{margin-top:0}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v{display:flex;font-size:12px;color:#262626;line-height:23px;margin-top:0}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k{width:120px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-k:after{content:"\FF1A";position:absolute}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v{padding-top:10px;width:auto;margin-left:10px}.pay-ability .operate-payinfo .add-or-edit .el-dialog .key-class .key-class-v .key-class-v-v .el-input{width:360px}}.pav .column-pic{width:30px;height:30px;margin:0 auto}.pav .version-dialog-search .el-dialog__body{background-color:#f5f5f5}.pav .version-dialog-search .version-table-data{margin-top:60px}.pav .version-search-box{margin:22px 12px 0;background-color:#fff;border-radius:8px;padding:12px 8px 0;display:flex}.pav .version-search-box .version-search{flex:1;flex-grow:1;flex-shrink:1;flex-basis:0%;display:flex;flex-wrap:wrap}.pav .version-search-box .version-button{display:flex;flex-wrap:wrap;width:208px}.pav .version-size .version-input8{margin-top:10px}.pav .version-size .version-input8 .FormLine{margin-top:10x}.pav .version-size .version-input8 .FormLine .FormItem{width:515px}.pav .version-size .version-input8 .FormLine .FormItem .FormItem-content.normal{width:auto}.pav .version-size .version-input8 .FormLine .FormItem .FormItem-content.normal .version-input{width:auto;display:flex}.pav .version-detail .main-key8{font-size:12px;margin-top:10px;margin-bottom:10px}.pav .version-detail .main-key8 .FormLine{flex-wrap:wrap;height:auto}.pav .version-detail .main-key8 .FormLine .main-key:after{content:":";position:absolute;right:-5px}.pav .version-detail .main-key8 .FormLine .main-key{width:57px;text-align:justify;text-align-last:justify;position:relative}.pav .version-detail .main-key8 .FormLine .key-class-8{width:410px;display:flex;flex-wrap:wrap}.pav .version-detail .main-key8 .FormLine .key-class-8 .key-class-v-k{width:200px;padding-left:10px}.pav .upload-pic{margin-top:20px;width:40px;height:40px}.pav .upload-pic .image-uploader{width:auto;height:auto}.pav .dialog-paydetail .detail-show-pic img{width:20px;height:20px}.pav .dialog-paydetail .paydetail-version .FormLine{display:flex;height:auto}.pav .dialog-paydetail .paydetail-version .FormLine .big{display:flex;flex-wrap:wrap}.pav .dialog-paydetail .paydetail-version .FormLine .big .version-name{width:auto;padding-right:10px}.pav .dialog-paydetail .tablecolor{height:140px;background-color:#fff}@media screen and (min-width:1600px){.pav .version-detail .main-key8{font-size:18px;color:#262626}.pav .version-detail .main-key8 .FormLine{flex-wrap:wrap;height:auto}.pav .version-detail .main-key8 .FormLine .main-key:after{content:":";position:absolute;right:-5px}.pav .version-detail .main-key8 .FormLine .main-key{width:77px;text-align:justify;text-align-last:justify;position:relative}.pav .version-detail .main-key8 .FormLine .key-class-8{width:620px;display:flex;flex-wrap:wrap}.pav .version-detail .main-key8 .FormLine .key-class-8 .key-class-v-k{width:300px;margin-left:10px}.pav .dialog-paydetail .detail-show-pic .FormItem-content.big img{width:25px;height:25px;margin-top:7px}.pav .dialog-paydetail .paydetail-version .FormLine{display:flex;height:auto}.pav .dialog-paydetail .paydetail-version .FormLine .big{width:270px;display:flex;flex-wrap:wrap}.pav .dialog-paydetail .paydetail-version .FormLine .big .version-name{width:auto;padding-right:10px}}.self-service .service-comment .FormLine{height:auto;margin-top:10px}.self-service .service-comment .FormLine .FormItem .FormItem-content.big{width:300px}.self-service .service-comment .FormLine .FormItem .FormItem-content.big .el-textarea__inner{height:100px}.self-service .payway-table{width:500px}.self-service .payway-table .payway-table-line{display:flex}.self-service .payway-table .payway-table-item{text-align:center;width:33%}.self-service .service-dialog-detail .tablecolor{height:200px;background-color:#fff}.ChinaMapWrap{position:relative;width:100%;padding-top:50%}#china{width:100%;height:100%;position:absolute;left:0;top:0}.tipMarker{color:#555;background-color:rgba(255,254,239,.8);border:1px solid #7e7e7e;padding:2px 6px;font-size:12px;white-space:nowrap;display:inline-block}.tipMarker:after,.tipMarker:before{content:"";display:block;position:absolute;margin:auto;width:0;height:0;border:solid transparent;border-width:5px 5px}.tipMarker.top{transform:translate(-50%,-110%)}.tipMarker.top:after,.tipMarker.top:before{bottom:-9px;left:0;right:0;border-top-color:rgba(255,254,239,.8)}.tipMarker.top:before{bottom:-10px;border-top-color:#7e7e7e}.mapcontainer{position:relative}
\ No newline at end of file

public/baseManage/demo.html

-<meta charset="utf-8">
-<title>baseManage demo</title>
-<script src="https://unpkg.com/vue"></script>
-<script src="./baseManage.umd.js"></script>
-<link rel="stylesheet" href="./baseManage.css">
-
-<script>
-console.log(baseManage)
-</script>

public/baseManage/img/delimg.1e054df9.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M817.968553 215.897142l-169.357176 0 0-58.869782c0-25.391297-20.657482-46.048779-46.048779-46.048779l-181.125197 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 58.869782-169.357176 0c-25.391297 0-46.048779 20.657482-46.048779 46.048779l0 71.631434c0 25.391297 20.657482 46.048779 46.048779 46.048779l28.321022 0 0 425.947112c0 59.246359 48.200792 107.447151 107.447151 107.447151l340.40076 0c59.246359 0 107.447151-48.200792 107.447151-107.447151L789.647531 379.626133l28.321022 0c25.391297 0 46.048779-20.657482 46.048779-46.048779l0-71.631434C864.017332 236.554624 843.35985 215.897142 817.968553 215.897142zM426.553932 162.14389l170.892135 0 0 53.753251-170.892135 0L426.553932 162.14389zM738.482221 805.574269c0 31.033807-25.248034 56.281841-56.281841 56.281841L341.79962 861.85611c-31.033807 0-56.281841-25.248034-56.281841-56.281841L285.517779 379.626133l452.964442 0L738.482221 805.574269zM812.852022 328.460824l-601.704045 0 0-61.398372 203.227588 0c2.302439 0.356111 4.66116 0.542352 7.061836 0.542352l181.125197 0c2.400676 0 4.759397-0.186242 7.062859-0.542352l203.226564 0L812.852022 328.460824zM513.023306 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655-14.128789 0-25.582655 11.453866-25.582655 25.582655l0 288.572348C487.440651 771.866562 498.894518 783.320429 513.023306 783.320429zM645.541459 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C619.958804 771.866562 631.41267 783.320429 645.541459 783.320429zM380.505154 783.320429c14.128789 0 25.582655-11.453866 25.582655-25.582655l0-288.572348c0-14.128789-11.453866-25.582655-25.582655-25.582655s-25.582655 11.453866-25.582655 25.582655l0 288.572348C354.922499 771.866562 366.376365 783.320429 380.505154 783.320429z" p-id="3757"></path></svg>
\ No newline at end of file

public/baseManage/img/plus.b37e3783.svg

-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1511504199105" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1815" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M185.89696 532.2752h286.72v286.72a20.48 20.48 0 1 0 40.96 0v-286.72h286.72a20.48 20.48 0 1 0 0-40.96h-286.72v-286.72a20.48 20.48 0 1 0-40.96 0v286.72h-286.72a20.48 20.48 0 1 0 0 40.96z" fill="" p-id="3098"></path></svg>
\ No newline at end of file

src/api/base/customer.js

+import fetch from '../fetch';
+
+const path = process.env.VUE_APP_CUSTOMER_SERVER_URL;
+export const fetchUserBaseInfo = entity =>
+  fetch({
+    url: path + '/dcxy/customerInfo/baseInfo',
+    params: entity,
+  });
+
+export const fetchUserBaseInfoByPhone = entity =>
+  fetch({
+    url: path + '/dcxy/customerInfo/baseCustomer',
+    params: entity,
+  });

src/components/Dialog/UserDialog.vue

+<template>
+  <transition
+    name="dialog-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave"
+  >
+    <div
+      class="el-dialog__wrapper user-dialog"
+      v-show="visible"
+      @click.self="handleWrapperClick"
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
+        class="el-dialog"
+        :class="[{ 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
+        ref="dialog"
+        :style="style"
+      >
+        <user-with-content
+          :customerId="customerId"
+          :visible='visible'
+          ref="userContent"
+        >
+          <button
+            type="button"
+            class="el-dialog__headerbtn"
+            aria-label="Close"
+            v-if="showClose"
+            @click="handleClose"
+            slot="closeBtn"
+          >
+            <img
+              src="@/assets/images/dialog/close_icon.png"
+              alt=""
+            >
+          </button>
+          <slot
+            name="title"
+            slot="title"
+          ></slot>
+          <slot></slot>
+          <slot
+            name="footer"
+            slot="footer"
+          ></slot>
+        </user-with-content>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { Dialog } from 'element-ui';
+
+export default {
+  name: 'user-dialog-inner',
+  extends: Dialog,
+  props: {
+    customerId: Number,
+  },
+  // mounted() {
+  //   let dialogWidth = 0;
+  //   console.log(this.$refs.userContent.$el.offsetWidth);
+  //   let rightDom = document.querySelector(
+  //     '.SigleUserWithContent-inner .right-part'
+  //   );
+  //   dialogWidth += rightDom.offsetWidth;
+  //   dialogWidth += rightDom.offsetLeft;
+  //   console.log(dialogWidth);
+  //   console.log(this.style);
+  //   this.width = dialogWidth + 'px';
+  // },
+};
+</script>
+
+<style lang="scss">
+.user-dialog {
+  .el-dialog {
+    background: transparent;
+    box-shadow: none;
+  }
+}
+</style>

src/components/Dialog/UserDialogWrap.js

+import UserDialogInner from './UserDialog';
+
+export default {
+  name: 'user-dialog',
+  components: {
+    UserDialogInner,
+  },
+  props: {
+    customerId: Number,
+
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+
+    title: {
+      type: String,
+      default: '',
+    },
+
+    width: String,
+
+    fullscreen: Boolean,
+
+    top: {
+      type: String,
+      default: '15vh',
+    },
+
+    modal: {
+      type: Boolean,
+      default: true,
+    },
+
+    modalAppendToBody: {
+      type: Boolean,
+      default: true,
+    },
+
+    appendToBody: {
+      type: Boolean,
+      default: false,
+    },
+
+    lockScroll: {
+      type: Boolean,
+      default: true,
+    },
+
+    customClass: {
+      type: String,
+      default: '',
+    },
+
+    closeOnClickModal: {
+      type: Boolean,
+      default: true,
+    },
+
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true,
+    },
+
+    showClose: {
+      type: Boolean,
+      default: true,
+    },
+
+    beforeClose: Function,
+
+    center: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      wrapWidth: '50vw',
+    };
+  },
+  mounted() {
+    let dialogWidth = 0;
+    let rightDom = document.querySelector(
+      '.SigleUserWithContent-inner .right-part'
+    );
+    dialogWidth += rightDom.offsetWidth;
+    dialogWidth += rightDom.offsetLeft;
+    if (dialogWidth) {
+      this.wrapWidth = dialogWidth + 'px';
+    }
+  },
+  watch: {
+    visible(newVal) {
+      if (newVal && this.wrapWidth === '50vw') {
+        this.$nextTick(() => {
+          let dialogWidth = 0;
+          let rightDom = this.$el.querySelector(
+            '.SigleUserWithContent-inner .right-part'
+          );
+          dialogWidth += rightDom.offsetWidth;
+          dialogWidth += rightDom.offsetLeft;
+          this.wrapWidth = dialogWidth + 'px';
+        });
+      }
+    },
+  },
+  methods: {
+    updateVisible(val) {
+      this.$emit('update:visible', val);
+    },
+  },
+
+  render(h) {
+    const { width, wrapWidth } = this;
+    const updateVisible = {
+      on: {
+        'update:visible': this.updateVisible,
+      },
+    };
+    return width ? (
+      <UserDialogInner
+        {...updateVisible}
+        customerId={this.customerId}
+        visible={this.visible}
+        title={this.title}
+        fullscreen={this.fullscreen}
+        top={this.top}
+        modal={this.modal}
+        modalAppendToBody={this.modalAppendToBody}
+        appendToBody={this.appendToBody}
+        lockScroll={this.lockScroll}
+        customClass={this.customClass}
+        closeOnClickModal={this.closeOnClickModal}
+        closeOnPressEscape={this.closeOnPressEscape}
+        showClose={this.showClose}
+        beforeClose={this.beforeClose}
+        center={this.center}
+        width={this.width}>
+        <template slot="title">{this.$slots.title}</template>
+        {this.$slots.default}
+        <template slot="footer">{this.$slots.footer}</template>
+      </UserDialogInner>
+    ) : (
+      <UserDialogInner
+        {...updateVisible}
+        customerId={this.customerId}
+        visible={this.visible}
+        title={this.title}
+        fullscreen={this.fullscreen}
+        top={this.top}
+        modal={this.modal}
+        modalAppendToBody={this.modalAppendToBody}
+        appendToBody={this.appendToBody}
+        lockScroll={this.lockScroll}
+        customClass={this.customClass}
+        closeOnClickModal={this.closeOnClickModal}
+        closeOnPressEscape={this.closeOnPressEscape}
+        showClose={this.showClose}
+        beforeClose={this.beforeClose}
+        center={this.center}
+        width={wrapWidth}>
+        <template slot="title">{this.$slots.title}</template>
+        {this.$slots.default}
+        <template slot="footer">{this.$slots.footer}</template>
+      </UserDialogInner>
+    );
+  },
+};

src/components/HeaderImg/HeaderImg.vue

+<template>
+  <div class="HeaderImgBox">
+    <img
+      v-if="imgUrl"
+      :src="imgUrl"
+    />
+    <img
+      v-else
+      src="@/assets/images/user/defaultHeaderImg.png"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'header-img-box',
+  props: {
+    imgUrl: String,
+  },
+};
+</script>
+
+<style lang="scss">
+.HeaderImgBox {
+  width: 40px;
+  height: 40px;
+}
+</style>
+

src/components/UserCard/UserCard.vue

+<template>
+  <div
+    class="UserInfo-Card-Wrap"
+    ref="CardWrap"
+    @mouseleave="offEditBar"
+  >
+    <div :class="['UserInfo-Card-EditBar',{'editBarVisible':editBarVisible},{'layoutRight':layoutType}]">
+      <div
+        v-if="$route.meta.btns && $route.meta.btns['0003']"
+        class="EditBar-item"
+        @click="showDetail"
+      >
+        <div class="EditBar-item-inner">
+          <img src="../../assets/images/user/detail_icon.png" />
+        </div>
+        <span class="EditBar-item-inner-text">详情</span>
+      </div>
+      <div
+        v-if="$route.meta.btns && $route.meta.btns['0004']"
+        class="EditBar-item"
+        @click="showEdit"
+      >
+        <div class="EditBar-item-inner">
+          <img src="../../assets/images/user/edit_icon.png" />
+        </div>
+        <span class="EditBar-item-inner-text">编辑</span>
+      </div>
+      <div
+        v-if="$route.meta.btns && $route.meta.btns['0005']"
+        class="EditBar-item"
+        @click="showAccount"
+      >
+        <div class="EditBar-item-inner">
+          <img src="../../assets/images/user/account_icon.png" />
+        </div>
+        <span class="EditBar-item-inner-text">账户</span>
+      </div>
+      <div
+        v-if="$route.meta.btns && $route.meta.btns['0006']"
+        class="EditBar-item"
+        @click="toggleLock"
+      >
+        <div class="EditBar-item-inner">
+          <img
+            v-if="state === '1'"
+            src="../../assets/images/user/lock_icon.png"
+          />
+          <img
+            v-else-if="state === '2'"
+            src="../../assets/images/user/unlock_icon.png"
+          />
+        </div>
+        <span class="EditBar-item-inner-text">{{state === '1'?'锁定':'解锁'}}</span>
+      </div>
+      <div class="EditBar-trans"></div>
+    </div>
+    <div :class="['UserInfo-Box', 'UserInfo-Card',{'hover':cardZIndex}]">
+      <div class="UserInfo-Title-Wrap">
+        <div class="UserInfo-Title">
+          <div class="UserInfo-IdTitle">ID:{{id}}</div>
+          <div
+            ref="HeaderImg"
+            @mouseenter="showEditBar"
+          >
+            <header-img-box
+              :class="['UserInfo-HeaderImg', {'hover':editBarVisible}]"
+              :imgUrl="customerHead"
+            ></header-img-box>
+          </div>
+          <div class="UserInfo-Name-Box">
+            <div class="UserInfo-Name-Col">
+              <span>{{customerName}}</span>
+              <span>{{getTypeLabel(customerType)}}</span>
+            </div>
+            <div class="UserInfo-Name-Col">
+              <span>{{$formatePhone(customerPhone)}}</span>
+              <span>{{getSexLabel(customerSex)}}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="UserInfo-Content">
+        <div class="UserInfo-Content-Col UserInfo-State-Box">
+          <div
+            v-if="state === '1'"
+            class="UserInfo-State"
+          >
+            <div class="UserInfo-State-Icon">
+              <img src="@/assets/images/user/normal_icon.png" />
+            </div>
+            正常使用
+          </div>
+          <div
+            v-else
+            class="UserInfo-State"
+          >
+            <div class="UserInfo-State-Icon">
+              <img src="@/assets/images/user/locked_icon.png" />
+            </div>
+            已锁定
+          </div>
+          <div
+            v-if="isFirstRecharge"
+            class="UserInfo-State"
+          >
+            <div class="UserInfo-State-Icon">
+              <img src="@/assets/images/user/normal_icon.png" />
+            </div>
+            已充值
+          </div>
+          <div
+            v-else
+            class="UserInfo-State"
+          >
+            <div class="UserInfo-State-Icon">
+              <img src="@/assets/images/user/locked_icon.png" />
+            </div>
+            未充值
+          </div>
+        </div>
+        <div class="UserInfo-Content-Col">注册时间：{{$formatDate(new Date(createAt),'yyyy-MM-dd')}}</div>
+        <div class="UserInfo-Content-Col UserInfo-CampusName">{{areaName}}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import getUserInfoLabelMixin from '@/mixins/user/getUserInfoLabel.js';
+
+export default {
+  props: {
+    areaName: String,
+    createAt: String,
+    customerHead: String,
+    customerName: String,
+    customerPhone: String,
+    customerSex: String,
+    customerType: String,
+    id: Number,
+    isFirstRecharge: Number,
+    state: String,
+    showDetail: { type: Function, default: () => {} },
+    showEdit: { type: Function, default: () => {} },
+    showAccount: { type: Function, default: () => {} },
+    toggleLock: { type: Function, default: () => {} },
+  },
+  mixins: [getUserInfoLabelMixin],
+  data() {
+    return {
+      editBarVisible: false,
+      cardZIndex: false,
+      layoutType: 0, // 0 为默认左边弹出 1 为右边弹出
+      wrapOffsetLeft: 0,
+    };
+  },
+  mounted() {
+    let sideBarDom = document.querySelector('.scroll-container'); // 导航部分
+    let sideBarWidth = sideBarDom ? sideBarDom.offsetWidth : 0;
+    let el = this.$refs.CardWrap;
+    let wrapOffsetLeft = el.offsetLeft;
+    while ((el = el.offsetParent)) {
+      wrapOffsetLeft += el.offsetLeft;
+    }
+    this.wrapOffsetLeft = wrapOffsetLeft;
+    if (this.wrapOffsetLeft < sideBarWidth + 60) {
+      this.layoutType = 1;
+    }
+    //   this.offsetLeft = this.wrapOffsetLeft + 60;
+  },
+  methods: {
+    showEditBar() {
+      this.editBarVisible = true;
+    },
+    offEditBar() {
+      this.editBarVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/styles/variables.scss';
+
+.UserInfo-Card-Wrap {
+  width: 170px;
+  height: 174px;
+  display: flex;
+  align-items: flex-end;
+  margin-right: 14px;
+  margin-bottom: 14px;
+  position: relative;
+  .UserInfo-Card-EditBar {
+    position: absolute;
+    left: 0;
+    z-index: 2001;
+    width: 0px;
+    height: 158px;
+    background-color: #00c2ff;
+    box-shadow: 2px 2px 10px #333;
+    border-radius: 8px 0 0 8px;
+    transition: all 0.28s;
+    &.editBarVisible {
+      left: -36px;
+      width: 36px;
+      .EditBar-trans {
+        opacity: 1;
+      }
+    }
+    .EditBar-item {
+      height: 39px;
+      position: relative;
+      overflow: hidden;
+      cursor: pointer;
+      &:first-child {
+        border-radius: 8px 0 0 0;
+      }
+      &:hover {
+        background-color: #11a6e8;
+      }
+      .EditBar-item-inner {
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        top: 6px;
+        left: 10px;
+      }
+      .EditBar-item-inner-text {
+        position: absolute;
+        font-size: 12px;
+        color: #fff;
+        width: 36px;
+        height: 14px;
+        bottom: 0;
+        text-align: center;
+        overflow: hidden;
+      }
+    }
+    .EditBar-trans {
+      opacity: 0;
+      position: absolute;
+      right: -13px;
+      top: 26px;
+      border-left: 13px solid #00c2ff;
+      border-top: 8px solid transparent;
+      border-bottom: 8px solid transparent;
+      transition: all 0.28s;
+    }
+  }
+  .UserInfo-Card-EditBar.layoutRight {
+    left: 66px;
+    border-radius: 0 8px 8px 0;
+    &.editBarVisible {
+      .EditBar-trans {
+        right: 36px;
+      }
+    }
+    .EditBar-item {
+      &:first-child {
+        border-radius: 0 8px 0 0;
+      }
+    }
+    .EditBar-trans {
+      right: 0px;
+      transform: rotate(180deg);
+    }
+  }
+  .UserInfo-Card {
+    height: 158px;
+    border-radius: 0 8px 8px 8px;
+    box-shadow: 2px 2px 5px #bbbec2;
+    z-index: 1000;
+    &:hover {
+      box-shadow: 2px 2px 5px #999;
+    }
+    // &.hover {
+    //   z-index: 2002;
+    // }
+    // .UserInfo-Title-Wrap {
+    //   height: 150px;
+    //   padding-top: 30px;
+    // }
+    .UserInfo-Title {
+      // margin-top: 30px;
+      border-radius: 0 8px 0 0;
+    }
+    .UserInfo-IdTitle {
+      position: absolute;
+      left: 0;
+      top: -16px;
+      width: 88px;
+      height: 16px;
+      line-height: 16px;
+      background-color: #4e82fb;
+      color: #fff;
+      text-indent: 10px;
+      border-radius: 20px 20px 0 0 / 40px 40px 0 0;
+    }
+    .UserInfo-Content {
+      height: 90px;
+      border-radius: 0 0 8px 8px;
+    }
+    .UserInfo-HeaderImg {
+      transition: all 0.28s;
+    }
+    .UserInfo-HeaderImg.hover {
+      border-color: #00c2ff;
+    }
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .UserInfo-Card-Wrap {
+    width: 300px;
+    height: 310px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    .UserInfo-Card-EditBar {
+      height: 280px;
+      &.editBarVisible {
+        left: -60px;
+        width: 60px;
+      }
+      .EditBar-item {
+        height: 60px;
+        .EditBar-item-inner {
+          width: 26px;
+          height: 26px;
+          top: 12px;
+          left: 17px;
+        }
+        .EditBar-item-inner-text {
+          width: 60px;
+          bottom: 3px;
+        }
+      }
+      .EditBar-trans {
+        right: -25px;
+        top: 44px;
+        border-left: 25px solid #00c2ff;
+        border-top: 15px solid transparent;
+        border-bottom: 15px solid transparent;
+      }
+    }
+    .UserInfo-Card-EditBar.layoutRight {
+      left: 120px;
+      &.editBarVisible {
+        .EditBar-trans {
+          right: 60px;
+        }
+      }
+      .EditBar-trans {
+        right: 0px;
+      }
+    }
+    .UserInfo-Card {
+      height: 280px;
+      .UserInfo-IdTitle {
+        top: -30px;
+        width: 155px;
+        height: 30px;
+        line-height: 30px;
+        text-indent: 24px;
+        border-radius: 20px 20px 0 0 / 40px 40px 0 0;
+      }
+      .UserInfo-Content {
+        height: 160px;
+      }
+    }
+  }
+}
+</style>

src/components/UserCard/UserInfo.vue

+<template>
+  <div
+    class="UserInfo-Box"
+    v-if="customerId || customerPhone"
+  >
+    <div class="UserInfo-Title">
+      <div class="UserInfo-IdTag">ID:{{customerBaseInfo.id}}</div>
+      <header-img-box
+        class="UserInfo-HeaderImg"
+        :imgUrl="customerBaseInfo.customerHead"
+      />
+      <div class="UserInfo-Name-Box">
+        <div class="UserInfo-Name-Col">
+          <span>{{customerBaseInfo.customerName}}</span>
+          <span>{{getTypeLabel(customerBaseInfo.customerType)}}</span>
+        </div>
+        <div class="UserInfo-Name-Col">
+          <span>{{$formatePhone(customerBaseInfo.customerPhone)}}</span>
+          <span>{{getSexLabel(customerBaseInfo.customerSex)}}</span>
+        </div>
+      </div>
+    </div>
+    <div class="UserInfo-Content">
+      <div class="UserInfo-Content-Col UserInfo-State-Box">
+        <div
+          v-if="customerBaseInfo.state === '1'"
+          class="UserInfo-State"
+        >
+          <div class="UserInfo-State-Icon">
+            <img src="@/assets/images/user/normal_icon.png" />
+          </div>
+          正常使用
+        </div>
+        <div
+          v-else
+          class="UserInfo-State"
+        >
+          <div class="UserInfo-State-Icon">
+            <img src="@/assets/images/user/locked_icon.png" />
+          </div>
+          已锁定
+        </div>
+        <div
+          v-if="customerBaseInfo.isFirstRecharge"
+          class="UserInfo-State"
+        >
+          <div class="UserInfo-State-Icon">
+            <img src="@/assets/images/user/normal_icon.png" />
+          </div>
+          已充值
+        </div>
+        <div
+          v-else
+          class="UserInfo-State"
+        >
+          <div class="UserInfo-State-Icon">
+            <img src="@/assets/images/user/locked_icon.png" />
+          </div>
+          未充值
+        </div>
+      </div>
+      <div class="UserInfo-Content-Col">注册时间：{{$formatDate(customerBaseInfo.createAt,'yyyy-MM-dd')}}</div>
+      <div class="UserInfo-Content-Col UserInfo-CampusName">{{customerBaseInfo.areaName}}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import headImg from '@/assets/images/demo/head_icon.png';
+import UserBaseInfoMixin from '../../mixins/user/userBaseInfo.js';
+import getUserInfoLabelMixin from '@/mixins/user/getUserInfoLabel.js';
+
+export default {
+  props: {
+    customerId: Number,
+    customerPhone: String,
+  },
+  mixins: [UserBaseInfoMixin, getUserInfoLabelMixin],
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/styles/variables.scss';
+
+.UserInfo-Box {
+  width: 170px;
+  min-width: 170px;
+  height: 157px;
+  font-family: 'Microsoft YaHei';
+  font-size: 12px;
+  border-radius: 8px;
+  .UserInfo-Title {
+    height: 68px;
+    background-color: #4e82fb;
+    position: relative;
+    padding: 10px;
+    box-sizing: border-box;
+    display: flex;
+    .UserInfo-Name-Box {
+      align-self: center;
+      flex: 1;
+      color: #fff;
+      font-size: 12px;
+      line-height: 24px;
+      .UserInfo-Name-Col {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
+    .UserInfo-HeaderImg {
+      width: 46px;
+      height: 46px;
+      border: 3px solid #a7c0fd;
+      border-radius: 50%;
+      margin-right: 8px;
+      overflow: hidden;
+    }
+    .UserInfo-IdTag {
+      border-radius: 0 8px 8px 0;
+      box-shadow: 0 0 10px #666;
+      position: absolute;
+      width: 70px;
+      height: 18px;
+      line-height: 18px;
+      text-indent: 5px;
+      left: 0;
+      bottom: -9px;
+      background-color: #ffd737;
+      font-size: 12px;
+      font-weight: bold;
+      color: #084e8a;
+    }
+  }
+  .UserInfo-Content {
+    height: 90px;
+    background-color: #fff;
+    padding: 10px;
+    .UserInfo-Content-Col {
+      line-height: 25px;
+    }
+    .UserInfo-State-Box {
+      margin-top: 2px;
+      display: flex;
+      .UserInfo-State {
+        display: flex;
+        margin-right: 10px;
+        align-items: center;
+        .UserInfo-State-Icon {
+          width: 12px;
+          height: 12px;
+          margin-right: 4px;
+        }
+      }
+    }
+    .UserInfo-CampusName {
+      line-height: 1;
+      margin-top: 0px;
+    }
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .UserInfo-Box {
+    width: 300px;
+    min-width: 300px;
+    height: 300px;
+    font-size: 16px;
+    .UserInfo-Title {
+      height: 120px;
+      padding: 20px;
+      .UserInfo-Name-Box {
+        font-size: 18px;
+        line-height: 38px;
+      }
+      .UserInfo-HeaderImg {
+        width: 80px;
+        height: 80px;
+        border-width: 5px;
+        margin-right: 10px;
+      }
+      .UserInfo-IdTag {
+        width: 128px;
+        height: 30px;
+        line-height: 30px;
+        text-indent: 5px;
+        bottom: -20px;
+        font-size: 16px;
+      }
+    }
+    .UserInfo-Content {
+      height: 180px;
+      padding: 20px;
+      .UserInfo-Content-Col {
+        line-height: 38px;
+      }
+      .UserInfo-State-Box {
+        margin-top: 6px;
+        .UserInfo-State {
+          margin-right: 20px;
+          .UserInfo-State-Icon {
+            width: 20px;
+            height: 20px;
+            margin-right: 10px;
+          }
+        }
+      }
+      .UserInfo-CampusName {
+        line-height: 1;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+</style>
+

src/components/UserCard/UserWithContent.vue

+<template>
+  <div class="SigleUserWithContent">
+    <div class="SigleUserWithContent-inner">
+      <UserInfo
+        class="left-part"
+        :customerId="customerId"
+        :customerPhone="customerPhone"
+        :visible="visible"
+      />
+      <div class="right-part">
+        <div class="el-dialog__header">
+          <div class="connect-line"></div>
+          <div class="el-dialog__title">
+            <slot name="title"></slot>
+          </div>
+          <slot name="closeBtn"></slot>
+        </div>
+        <div class="el-dialog__body clearfix">
+          <slot></slot>
+        </div>
+        <div
+          class="el-dialog__footer"
+          v-if="$slots.footer"
+        >
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'user-with-content',
+  props: {
+    customerId: Number,
+    visible: {
+      type: Boolean,
+      default: true,
+    },
+    customerPhone: String,
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../assets/styles/variables.scss';
+
+.SigleUserWithContent {
+  .SigleUserWithContent-inner {
+    display: flex;
+    background: transparent;
+    box-shadow: none;
+    .UserInfo-Box {
+      border-radius: 8px;
+      .UserInfo-Title {
+        border-radius: 8px 8px 0 0;
+      }
+      .UserInfo-Content {
+        border-radius: 0 0 8px 8px;
+      }
+    }
+    .left-part {
+      z-index: 2;
+      border-radius: 8px;
+      box-shadow: 2px 2px 10px #333;
+    }
+    .right-part {
+      flex: 1;
+      margin-left: 20px;
+      background-color: #fff;
+      border-radius: 0 8px 8px 8px;
+      .el-dialog__header {
+        border-radius: 0 8px 0 0;
+      }
+    }
+  }
+  .sigle-user__body {
+    display: flex;
+    padding: 0;
+  }
+  .el-dialog__header {
+    position: relative;
+    height: 38px;
+    background-color: #4e82fb;
+    padding: 10px;
+    .el-dialog__headerbtn {
+      position: absolute;
+      top: -20px;
+      right: -20px;
+      width: 39px;
+      height: 39px;
+    }
+    .connect-line {
+      position: absolute;
+      left: -50px;
+      top: 0;
+      border-top: 19px solid transparent;
+      border-right: 50px solid #4e82fb;
+      border-bottom: 19px solid transparent;
+    }
+    .el-dialog__title {
+      margin: 0px auto 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      line-height: 18px;
+      vertical-align: top;
+      font-size: 14px;
+      img {
+        width: 14px;
+        height: 14px;
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .el-dialog__footer {
+    box-sizing: content-box;
+    text-align: center;
+  }
+}
+@media screen and (min-width: $bigScreenWidth) {
+  .SigleUserWithContent {
+    .SigleUserWithContent-inner {
+      .right-part {
+        margin-left: 25px;
+      }
+    }
+    .el-dialog__header {
+      height: 96px;
+      .el-dialog__headerbtn {
+        top: -30px;
+        right: -30px;
+        width: 65px;
+        height: 65px;
+      }
+      .connect-line {
+        left: -70px;
+        border-top-width: 48px;
+        border-right-width: 70px;
+        border-bottom-width: 48px;
+      }
+      .el-dialog__title {
+        margin: 14px auto 0;
+        font-size: 22px;
+        img {
+          width: 28px;
+          height: 28px;
+          margin-right: 20px;
+        }
+      }
+    }
+    .el-dialog__footer {
+      padding: 50px 20px 40px;
+    }
+  }
+}
+</style>
+

src/config/index.js

@@ -34,6 +34,17 @@ export const customerIsFirstRechargeOptions = [
   { label: '已充值', value: '1' },
 ];
 
+export const areaTypes = [
+  { label: '正常运营', value: '1' },
+  { label: '测试使用', value: '2' },
+];
+
+export const properties = [
+  { label: '学校', value: '1' },
+  { label: '单位', value: '2' },
+  { label: '社区', value: '3' },
+];
+
 export const operClassifyList = [
   { label: '新增', value: '01' },
   { label: '修改', value: '02' },
@@ -66,6 +77,8 @@ export default {
   customerTypesOptions,
   customerSexOptions,
   customerIsFirstRechargeOptions,
+  areaTypes,
+  properties,
   operClassifyList,
   operClassifyName4role,
   operClassifyName4User,

src/lib-main.js → src/lib/main.js

 import 'normalize.css/normalize.css';
 
 import App from './App';
-import router, { constantRouterMap, routeStore } from './router';
-import store from './store';
-import { formatRouteLink } from './utils/route';
+import router, { constantRouterMap, routeStore } from '../router';
+import store from '../store';
 
 routeStore.install(store);
 
@@ -12,7 +11,7 @@ import '@/permission'; // 用户登录认证
 // import './mock' // mockjs
 import extendCom from '@/utils/extends';
 
-const createSystem = () => {
+const createSystem = ({ routers, routeConfig }) => {
   extendCom(Vue);
 
   Vue.config.productionTip = false;
@@ -25,18 +24,8 @@ const createSystem = () => {
     render: h => {
       let routes = [...constantRouterMap];
       let allRoute = store.getters.asyncRoutes;
-      if (allRoute && allRoute.length) {
-        let addRoute = allRoute.find(
-          menu => menu.menuCode === process.env.VUE_APP_MENU_CODE
-        );
-        if (addRoute) {
-          addRoute = addRoute.childs;
-        } else {
-          addRoute = [];
-        }
-        routes = [...routes, ...formatRouteLink(addRoute)];
-      }
-      return <App route={routes} />;
+      routeConfig && routeConfig(routes, allRoute);
+      return <App route={routes} allRoutes={allRoute} />;
     },
   });
 };

src/main.js

@@ -27,8 +27,6 @@ new Vue({
     let allRoute = store.getters.asyncRoutes;
     if (allRoute && allRoute.length) {
       let addRoute = formatRouteLink(allRoute);
-      console.log(addRoute);
-
       for (let index = 0; index < addRoute.length; index++) {
         const element = addRoute[index];
         if (element.children) {

src/store/index.js

@@ -4,6 +4,7 @@ import createLogger from 'vuex/dist/logger';
 import app from './modules/app/index';
 import user from './modules/user/index';
 import base from './modules/base/index';
+import customer from './modules/customer/index';
 
 Vue.use(Vuex);
 
@@ -14,6 +15,7 @@ const store = new Vuex.Store({
     app,
     user,
     base,
+    customerBase: customer,
   },
   strict: debug,
   plugins: debug ? [createLogger()] : [],

src/store/modules/customer/index.js

+import {
+  fetchUserBaseInfo,
+  fetchUserBaseInfoByPhone,
+} from '@/api/base/customer';
+import { GET_CUSTOMER_BASEINFO } from './mutation-types';
+
+const state = () => ({
+  areaName: '',
+  createAt: '',
+  customerHead: '',
+  customerName: '',
+  customerPhone: '',
+  customerSex: '',
+  customerType: '',
+  id: null,
+  isFirstRecharge: null,
+  state: '',
+});
+
+const getters = {
+  customerBaseInfo: state => state,
+};
+
+const actions = {
+  fetchUserBaseInfo({ commit }, entity) {
+    fetchUserBaseInfo(entity)
+      .then(res => {
+        const userInfo = res.data;
+        if (userInfo) {
+          commit(GET_CUSTOMER_BASEINFO, userInfo);
+        } else {
+          commit(GET_CUSTOMER_BASEINFO, state());
+        }
+      })
+      .catch(err => {
+        console.log(err);
+        commit(GET_CUSTOMER_BASEINFO, state());
+      });
+  },
+  fetchUserBaseInfoByPhone({ commit }, entity) {
+    fetchUserBaseInfoByPhone(entity)
+      .then(res => {
+        const userInfo = res.data;
+        if (userInfo) {
+          commit(GET_CUSTOMER_BASEINFO, userInfo);
+        } else {
+          commit(GET_CUSTOMER_BASEINFO, state());
+        }
+      })
+      .catch(err => {
+        console.log(err);
+        commit(GET_CUSTOMER_BASEINFO, state());
+      });
+  },
+};
+
+const mutations = {
+  [GET_CUSTOMER_BASEINFO](state, userInfo) {
+    Object.keys(userInfo).map(key => {
+      state[key] = userInfo[key];
+    });
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

src/store/modules/customer/mutation-types.js

+export const GET_CUSTOMER_BASEINFO = 'GET_CUSTOMER_BASEINFO';
\ No newline at end of file

src/utils/extends.js

@@ -4,9 +4,17 @@ import {
   getFilters,
   formatePhone,
   allowLetterNumber,
+  formatterMoneyToDouble,
 } from '@/utils/index';
 import rymUi from 'rym-element-ui';
 import 'rym-element-ui/lib/rymUi.css';
+
+import HeaderImg from '../components/HeaderImg/HeaderImg.vue';
+import UserWithContent from '../components/UserCard/UserWithContent.vue';
+import UserCard from '../components/UserCard/UserCard.vue';
+import UserInfo from '../components/UserCard/UserInfo.vue';
+import UserDialog from '../components/Dialog/UserDialogWrap';
+
 import AreaSelect from '../components/input/AreaSelect/index';
 import ServiceTypeSelect from '../components/input/ServiceTypeSelect/index';
 import GiveTypeSelect from '../components/input/GiveTypeSelect.vue';
@@ -21,6 +29,14 @@ const extendVue = Vue => {
   Vue.prototype.$formatePhone = formatePhone;
   Vue.prototype.$getFilters = getFilters;
   Vue.prototype.$allowLetterNumber = allowLetterNumber;
+  Vue.prototype.$formatterMoneyToDouble = formatterMoneyToDouble;
+
+  Vue.component('UserCard', UserCard);
+  Vue.component('UserInfo', UserInfo);
+  Vue.component(UserWithContent.name, UserWithContent);
+  Vue.component(UserDialog.name, UserDialog);
+  Vue.component(HeaderImg.name, HeaderImg);
+
   // input
   Vue.component(AreaSelect.name, AreaSelect);
   Vue.component(BaseDataSelect.name, BaseDataSelect);

src/utils/index.js

@@ -351,3 +351,7 @@ export const allowLetterNumber = value => {
   let newVal = value.replace(/[^a-zA-Z0-9]/g, '');
   return newVal;
 };
+
+export const formatterMoneyToDouble = val => {
+  return val ? Number(val).toFixed(2) : Number(0).toFixed(2);
+};