diff --git a/src/assets/images/bg-e.jpg b/src/assets/images/bg-e.jpg new file mode 100644 index 00000000..f00b9032 Binary files /dev/null and b/src/assets/images/bg-e.jpg differ diff --git a/src/assets/images/ipt-tip.png b/src/assets/images/ipt-tip.png new file mode 100644 index 00000000..cddd3262 Binary files /dev/null and b/src/assets/images/ipt-tip.png differ diff --git a/src/assets/images/logo-home-bl.png b/src/assets/images/logo-home-bl.png new file mode 100644 index 00000000..a95e2ab8 Binary files /dev/null and b/src/assets/images/logo-home-bl.png differ diff --git a/src/views/login1.vue b/src/views/login1.vue index df58790d..7fc457f8 100644 --- a/src/views/login1.vue +++ b/src/views/login1.vue @@ -2,9 +2,39 @@
--> 登 录 中... + + 忘记密码 + + +
+
外部用户注册
+
外部单位注册
+
+ + +
+
i国网版
+
小程序版
+
+
@@ -157,6 +202,95 @@ export default { qq: qq, codeUrl: '', isAdmin: false, + showUnitBox: false, + isActive: 1, + unitName: '', + unitList: [], + unitList1: [ + { label: '公司总部', value: '公司总部' }, + { label: '华北分部', value: '华北分部' }, + { label: '华东分部', value: '华东分部' }, + { label: '华中分部', value: '华中分部' }, + { label: '东北分部', value: '东北分部' }, + { label: '西北分部', value: '西北分部' }, + { label: '西南分部', value: '西南分部' }, + { label: '国网国际公司', value: '国网国际公司' }, + { label: '鲁能集团', value: '鲁能集团' }, + { label: '南瑞集团', value: '南瑞集团' }, + { label: '中电装备公司', value: '中电装备公司' }, + { label: '国网新源公司', value: '国网新源公司' }, + { label: '空间技术公司', value: '空间技术公司' }, + { label: '国网物资公司', value: '国网物资公司' }, + { label: '许继集团', value: '许继集团' }, + { label: '平高集团', value: '平高集团' }, + { label: '山东电工电气', value: '山东电工电气' }, + { label: '国网直流中心', value: '国网直流中心' }, + { label: '国网直流公司', value: '国网直流公司' }, + { label: '国网交流公司', value: '国网交流公司' }, + { label: '国网信通中心', value: '国网信通中心' }, + { label: '国网大数据中心', value: '国网大数据中心' }, + { label: '国网客服中心', value: '国网客服中心' }, + { label: '国网综能集团', value: '国网综能集团' }, + { label: '中国电科院', value: '中国电科院' }, + { label: '国网经研院', value: '国网经研院' }, + { label: '国网能源院', value: '国网能源院' }, + { label: '国网智研院', value: '国网智研院' }, + { label: '国网英大集团', value: '国网英大集团' }, + { label: '中国电财', value: '中国电财' }, + { label: '英大财险', value: '英大财险' }, + { label: '英大人寿', value: '英大人寿' }, + { label: '国网党校', value: '国网党校' }, + { label: '英大长安', value: '英大长安' }, + { label: '英大信托', value: '英大信托' }, + { label: '英大证券', value: '英大证券' }, + { label: '英大期货', value: '英大期货' }, + { label: '英大汇通', value: '英大汇通' }, + { label: '英大传媒集团', value: '英大传媒集团' }, + { label: '国网中兴公司', value: '国网中兴公司' }, + { label: '高培中心', value: '高培中心' }, + { label: '国网技术学院', value: '国网技术学院' }, + { label: '服务分公司', value: '服务分公司' }, + { label: '信通产业集团', value: '信通产业集团' }, + { label: '国网车网公司', value: '国网车网公司' }, + { label: '全球能源集团', value: '全球能源集团' }, + { label: '数科控股公司', value: '数科控股公司' }, + { label: '国中康健集团', value: '国中康健集团' }, + { label: '国网融资租赁', value: '国网融资租赁' }, + { label: '国网海外投资', value: '国网海外投资' }, + { label: '国网特高压公司', value: '国网特高压公司' }, + { label: '智芯公司', value: '智芯公司' }, + { label: '国网工研院', value: '国网工研院' }, + ], + unitList2: [ + { label: '北京电力', value: '北京电力' }, + { label: '天津电力', value: '天津电力' }, + { label: '河北电力', value: '河北电力' }, + { label: '冀北电力', value: '冀北电力' }, + { label: '山西电力', value: '山西电力' }, + { label: '山东电力', value: '山东电力' }, + { label: '上海电力', value: '上海电力' }, + { label: '江苏电力', value: '江苏电力' }, + { label: '浙江电力', value: '浙江电力' }, + { label: '安徽电力', value: '安徽电力' }, + { label: '福建电力', value: '福建电力' }, + { label: '湖北电力', value: '湖北电力' }, + { label: '湖南电力', value: '湖南电力' }, + { label: '河南电力', value: '河南电力' }, + { label: '江西电力', value: '江西电力' }, + { label: '四川电力', value: '四川电力' }, + { label: '重庆电力', value: '重庆电力' }, + { label: '辽宁电力', value: '辽宁电力' }, + { label: '吉林电力', value: '吉林电力' }, + { label: '黑龙江电力', value: '黑龙江电力' }, + { label: '蒙东电力', value: '蒙东电力' }, + { label: '陕西电力', value: '陕西电力' }, + { label: '甘肃电力', value: '甘肃电力' }, + { label: '青海电力', value: '青海电力' }, + { label: '宁夏电力', value: '宁夏电力' }, + { label: '新疆电力', value: '新疆电力' }, + { label: '西藏电力', value: '西藏电力' }, + ], + unitList3: [{ label: '外部单位', value: '外部单位' }], loginForm: { username: '', password: '', @@ -167,16 +301,16 @@ export default { uuid: '', loginType: '', phoneUuid: '', - mobileCodeType: 'LOGIN' + mobileCodeType: 'LOGIN', }, passwordLoginRules: { username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }], password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }], - code: [{ required: true, trigger: 'change', message: '请输入验证码' }] + code: [{ required: true, trigger: 'change', message: '请输入验证码' }], }, mobileLoginRules: { mobile: [{ required: true, trigger: 'blur', message: '请输入您的手机号' }], - verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }] + verificationCode: [{ required: true, trigger: 'blur', message: '请输入验证码' }], }, loading: false, captchaEnabled: true, @@ -185,7 +319,7 @@ export default { countdown: 0, loginMethod: 'password', // 'password' or 'mobile' supportsPhoneLogin: false, - supportsEmailLogin: false + supportsEmailLogin: false, } }, computed: { @@ -196,22 +330,22 @@ export default { phonePassword: true, emailPassword: true, phoneCode: false, - emailCode: false + emailCode: false, }, } ) // 获取 JSON 对象 }, loginRules() { return this.loginMethod === 'password' ? this.passwordLoginRules : this.mobileLoginRules - } + }, }, watch: { $route: { handler(route) { this.redirect = route.query && route.query.redirect }, - immediate: true - } + immediate: true, + }, }, async created() { const origin = window.location.href @@ -219,12 +353,12 @@ export default { this.isIws = true const loading = this.$loading({ lock: true, - text: '登录中' + text: '登录中', }) try { const res = await iwsLogin({ ticket: origin.split('ticket=')[1].split('#/')[0] || origin.split('ticket%3D')[1].split('%26')[0], - sysType: 0 + sysType: 0, }) console.log('🚀 ~ created ~ res:', res) if (res.code == 200) { @@ -242,7 +376,7 @@ export default { console.log('🚀 ~ created ~ error:', error) this.$message({ message: '登录失败, 即将关闭页面', - type: 'error' + type: 'error', }) loading.close() setTimeout(() => { @@ -282,7 +416,40 @@ export default { } */ } }, + mounted() { + document.addEventListener('click', this.handleClickOutside) + }, + + beforeDestroy() { + document.removeEventListener('click', this.handleClickOutside) + }, methods: { + focusUnit() { + this.unitList = this.unitList1 + this.showUnitBox = true + console.log('🚀 ~ this.showUnitBox:', this.showUnitBox) + }, + handleActive(index) { + if (this.isActive === index) { + return + } + this.isActive = index + this.unitList = index === 1 ? this.unitList1 : index === 2 ? this.unitList2 : this.unitList3 + }, + handleLi(val) { + console.log('🚀 ~ val:', val) + this.unitName = val + this.showUnitBox = false + }, + handleClickOutside(e) { + const box = this.$refs.companyBox + console.log('🚀 ~ box:', box) + if (!box) return + + if (!box.contains(e.target)) { + this.showUnitBox = false + } + }, getCode() { getCodeImg().then((res) => { this.captchaEnabled = res.captchaEnabled !== undefined ? res.captchaEnabled : true @@ -350,10 +517,10 @@ export default { if (this.loginForm.rememberMe) { Cookies.set('username', this.loginForm.username, { expires: 30 }) Cookies.set('password', encrypt(this.loginForm.password), { - expires: 30 + expires: 30, }) Cookies.set('rememberMe', this.loginForm.rememberMe, { - expires: 30 + expires: 30, }) } else { Cookies.remove('username') @@ -369,7 +536,7 @@ export default { if (res.isLogin) { this.$modal .confirm('账号已在其他地方登录是否继续登录！！！！') - .then(function() { + .then(function () { return this.$router.push({ path: this.redirect || '/' }) }) .then(() => { @@ -413,7 +580,7 @@ export default { if (res.data) { this.$modal .confirm('账号已在其他地方登录是否继续登录！！！！') - .then(function() { + .then(function () { return that.handleLogin() }) .then(() => { @@ -473,8 +640,8 @@ export default { '请先填写' + this.config.loginConfig.phoneCode ? '手机号' : '/' + this.config.loginConfig.emailCode - ? '邮箱' - : '' + ? '邮箱' + : '', ) return } @@ -511,8 +678,8 @@ export default { this.loginForm.loginMethod = '' this.isAdmin = false this.getCode() - } - } + }, + }, } @@ -522,8 +689,9 @@ export default { justify-content: flex-end; align-items: center; height: 100%; - background-image: url('../assets/images/bg.png'); - background-size: cover; + background-image: url('../assets/images/bg-e.jpg'); + background-size: 100% 100%; + // background-size: cover; } .login { @@ -541,10 +709,21 @@ export default { } .login-form { - border-radius: 6px; - background: #ffffff; - width: 400px; - padding: 25px; + // border-radius: 6px; + // background: #ffffff; + // // width: 400px; + // padding: 25px; + background-color: #fff; + border-radius: 12px; + position: absolute; + left: 55%; + top: 50%; + // padding: 88px 0; + transform: translateY(-50%); + height: 570px; + width: 507px; + // display: flex; + opacity: 0.91; .el-input { height: 38px; @@ -569,6 +748,105 @@ export default { } } +.form-box { + padding: 58px 90px 0; + + .icon-box { + padding-left: 9px; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + } + + .btns { + font-size: 16px; + display: flex; + justify-content: space-between; + + .btn { + color: #24b1b6; + border: 1px solid #dfdfdf; + padding: 0 26px; + line-height: 46px; + cursor: pointer; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + + .btn-text { + width: 150px; + font-size: 18px; + text-align: center; + color: #24b1b6; + padding: 0 26px; + line-height: 46px; + cursor: pointer; + border-radius: 4px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + } + + .company-box { + width: 32rem; + background: #fff; + border-radius: 10px; + position: absolute; + top: 50px; + z-index: 90000; + transition: all 0.8s; + border: 1px solid #bababa; + + .tab-list { + overflow: hidden; + border-bottom: 1px solid #d7dbf1; + display: flex; + list-style: none; + padding: 0; + margin: 0; + + .tab-item { + font-size: 16px; + font-weight: 500; + line-height: 48px; + margin: 0 18px; + cursor: pointer; + } + + .is-active { + color: #2cbab2; + } + } + + .department-warp { + width: 100%; + margin-top: 14px; + padding: 0 20px; + height: 254px; + overflow-y: auto; + + .ul-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-wrap: wrap; + + .list-item { + width: 33%; + line-height: 32px; + cursor: pointer; + } + } + } + } +} + .login-tip { font-size: 13px; text-align: center;