diff --git a/src/assets/images/background.png b/src/assets/images/background.png new file mode 100644 index 0000000..708d73e Binary files /dev/null and b/src/assets/images/background.png differ diff --git a/src/components/login/login.vue b/src/components/login/login.vue index 6a5b42b..cddd417 100644 --- a/src/components/login/login.vue +++ b/src/components/login/login.vue @@ -1,9 +1,10 @@ @@ -137,6 +137,7 @@ export default { if (response.data.success == true) { sessionStorage.setItem("access-user", response.data.data.role); sessionStorage.setItem("access-id", response.data.data.id); + if ( sessionStorage.getItem("access-user") == "Admin" || sessionStorage.getItem("access-user") == "SuperAdmin" || @@ -213,120 +214,338 @@ body { color: #fff; margin-bottom: 10px; } - .svg-container { - color: #264672; - vertical-align: middle; - padding: 6px 0px 6px 0px; - vertical-align: middle; - width: 14.5px; - display: inline-block; - &_login { - font-size: 20px; - } - } .title { font-family: PingFangSC-Regular; - font-size: 20px; - color: #264672; - background: rgba(157, 187, 231, 0.1); - width: 402px; - height: 80px; - line-height: 80px; - margin-top: 0px; + font-size: 24px; + font-weight: 600; + color: #2c3e50; + background: linear-gradient(135deg, rgba(157, 187, 231, 0.15) 0%, rgba(157, 187, 231, 0.05) 100%); + width: 100%; + height: 70px; + line-height: 70px; + margin: 0; + padding: 0; + text-align: center; + border-radius: 16px 16px 0 0; + border-bottom: 1px solid rgba(157, 187, 231, 0.2); } .el-form-item { - margin-left: 21px; - margin-top: 24px; - width: 360px; - height: 50px; - background: rgba(157, 187, 231, 0.3) !important; - border-radius: 4px !important; + margin-left: 30px; + margin-right: 30px; + margin-top: 0; + margin-bottom: 0; + width: calc(100% - 60px); + height: auto; + min-height: 50px; + background: transparent !important; + border: none !important; + border-radius: 0 !important; + transition: all 0.3s ease; + &:hover { + background: transparent !important; + border: none !important; + } + &:focus-within { + background: transparent !important; + border: none !important; + } + &:first-of-type { + margin-top: 24px; + } + &:not(:first-of-type):not(:nth-of-type(3)):not(:nth-of-type(4)) { + margin-top: 14px; + } + } + .el-form-item__content { + background: transparent !important; + border: none !important; + display: flex; + align-items: center; + width: 100%; + position: relative; + } + .el-form-item__error { + padding-left: 32px !important; + margin-left: 32px !important; + } .el-input { display: inline-block; - height: 47px; - width: 85%; + height: 50px; + width: 100%; + flex: 1; + min-width: 0; } input { - background: transparent; - border: 0px; - padding: 12px 0px 12px 10.8px; + background: transparent !important; + border: 0px !important; + padding: 14px 0px 14px 12px; font-family: PingFangSC-Regular; - font-size: 16px; - color: #264672; + font-size: 15px; + color: #2c3e50; + transition: all 0.3s ease; + height: 50px; + line-height: 50px; } .el-input__inner { + background: transparent !important; + border: none !important; &::placeholder { - color: #264672; + color: #889aa4; font-family: PingFangSC-Regular; - font-size: 16px; + font-size: 15px; + opacity: 0.7; + } + &:focus { + border: none !important; + } + } + .main-title { + position: absolute; + left: 0; + right: 0; + top: 45px; + margin: 0 auto; + font-family: "PingFang SC", "Microsoft YaHei", "SimHei", "STHeiti", "Helvetica Neue", Arial, sans-serif; + font-size: 48px; + font-weight: 700; + color: #264672; + text-align: center; + width: 100%; + z-index: 1; + text-shadow: 0 2px 8px rgba(38, 70, 114, 0.2), + 0 4px 16px rgba(38, 70, 114, 0.15), + 0 8px 32px rgba(38, 70, 114, 0.1); + letter-spacing: 5px; + line-height: 1.4; + padding: 0 30px 25px 30px; + box-sizing: border-box; + animation: titleFadeIn 0.8s ease-out; + position: relative; + &::after { + content: ''; + position: absolute; + left: 50%; + bottom: 0; + transform: translateX(-50%); + width: 150px; + height: 4px; + background: linear-gradient(90deg, + transparent 0%, + rgba(91, 141, 239, 0.3) 20%, + #5b8def 50%, + rgba(91, 141, 239, 0.3) 80%, + transparent 100%); + border-radius: 2px; + box-shadow: 0 2px 8px rgba(91, 141, 239, 0.4); + } + } + @keyframes titleFadeIn { + from { + opacity: 0; + transform: translateY(-30px) scale(0.95); + } + to { + opacity: 1; + transform: translateY(0) scale(1); } } .login-form { position: absolute; left: 0; right: 0; - margin: 150px auto; - //opacity: 0.9; - background: rgba(247, 248, 241, 0.9); - box-shadow: 0 2px 40px 0 rgba(157, 187, 231, 0.5); - border-radius: 4px; - border-radius: 4px; - width: 402px; - height: 438px; + margin: 120px auto; + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); + box-shadow: 0 8px 32px rgba(38, 70, 114, 0.15), + 0 2px 8px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.6); + border-radius: 20px; + border: 1px solid rgba(255, 255, 255, 0.3); + width: 420px; + min-height: 450px; + padding-bottom: 20px; + transition: all 0.3s ease; + animation: slideUp 0.6s ease-out; } - .loginbutton { - width: 360px; - height: 50px; - margin-bottom: 24px; - margin-top: 0px; - background: #9dbbe7 !important; - border-color: #9dbbe7 !important; - border-radius: 4px; + @keyframes slideUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } + } + // 按钮容器的间距调整 + .el-form-item:nth-of-type(3) { + margin-top: 24px !important; + } + .el-form-item:nth-of-type(4) { + margin-top: 12px !important; + } + .login-button { + width: 100%; + height: 46px; + margin: 0; + background: linear-gradient(135deg, #5b8def 0%, #4a7dd8 100%) !important; + border: none !important; + border-radius: 12px !important; font-family: PingFangSC-Regular; font-size: 16px; - color: #ffffff; - letter-spacing: 0; + font-weight: 600; + color: #ffffff !important; + letter-spacing: 1px; text-align: center; + box-shadow: 0 4px 14px rgba(91, 141, 239, 0.4), + 0 2px 4px rgba(91, 141, 239, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + position: relative; + overflow: hidden; + &:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(91, 141, 239, 0.5), + 0 4px 8px rgba(91, 141, 239, 0.3); + background: linear-gradient(135deg, #6b9dff 0%, #5a8de8 100%) !important; + } + &:active { + transform: translateY(0); + box-shadow: 0 3px 10px rgba(91, 141, 239, 0.35), + 0 1px 3px rgba(91, 141, 239, 0.2); + } + } + .register-button { + width: 100%; + height: 46px; + margin: 0; + background: rgba(255, 255, 255, 0.95) !important; + border: 1.5px solid #5b8def !important; + border-radius: 12px !important; + font-family: PingFangSC-Regular; + font-size: 16px; + font-weight: 600; + color: #5b8def !important; + letter-spacing: 1px; + text-align: center; + box-shadow: 0 2px 8px rgba(91, 141, 239, 0.2), + 0 1px 3px rgba(91, 141, 239, 0.1); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + cursor: pointer; + &:hover { + transform: translateY(-2px); + background: rgba(91, 141, 239, 0.08) !important; + border-color: #6b9dff !important; + border-width: 1.5px !important; + box-shadow: 0 4px 14px rgba(91, 141, 239, 0.3), + 0 2px 6px rgba(91, 141, 239, 0.15); + color: #6b9dff !important; + } + &:active { + transform: translateY(0); + box-shadow: 0 2px 6px rgba(91, 141, 239, 0.25), + 0 1px 2px rgba(91, 141, 239, 0.15); + } } .login-text1 { position: absolute; - left: 21px; - font-size: 12px; - color: #aaa; + left: 30px; + font-size: 13px; + color: #7a8ba3; font-family: PingFangSC-Regular; + text-decoration: none; + transition: all 0.3s ease; + &:hover { + color: #264672; + text-decoration: underline; + } } .login-text { position: absolute; - right: 21px; - font-size: 12px; - color: #aaa; + right: 30px; + font-size: 13px; + color: #7a8ba3; font-family: PingFangSC-Regular; + text-decoration: none; + transition: all 0.3s ease; + &:hover { + color: #264672; + text-decoration: underline; + } } - .show-pwd { - position: absolute; - right: 10px; - top: 7px; - font-size: 16px; - color: #889aa4; + // Element UI 输入框图标样式 + .el-input__prefix, + .el-input__suffix { + color: #7a8ba3; + transition: all 0.3s ease; + } + .el-form-item:focus-within .el-input__prefix, + .el-form-item:focus-within .el-input__suffix { + color: #264672; + } + .el-input__suffix { cursor: pointer; - user-select: none; + &:hover { + color: #264672; + } } .extra-text { position: relative; - margin-bottom: 0; - padding-left: 2px; + margin: 16px 30px 0 30px; + padding: 0; + width: calc(100% - 60px); } } @media all and (max-width: 480px) { - .login-form { - width: 300px !important; + .main-title { + font-size: 28px; + top: 40px; + letter-spacing: 2px; + padding: 0 20px; + line-height: 1.4; + &::before { + width: 80px; + height: 2px; + } } - .login-container .loginbutton { - width: 260px !important; + .login-form { + width: 90% !important; + max-width: 340px !important; + margin: 180px auto; + border-radius: 16px; + } + .login-container .login-button, + .login-container .register-button { + width: 100% !important; + margin-left: 0 !important; + margin-right: 0 !important; + } + .login-container .login-button { + margin-top: 32px !important; + margin-bottom: 0 !important; + height: 46px !important; + font-size: 16px !important; + } + .login-container .register-button { + margin-top: 16px !important; + margin-bottom: 0 !important; + height: 46px !important; + font-size: 16px !important; } .login-container .el-form-item { - width: 260px !important; + width: calc(100% - 40px) !important; + margin-left: 20px !important; + margin-right: 20px !important; + } + .login-container .extra-text { + margin-left: 20px !important; + margin-right: 20px !important; + width: calc(100% - 40px) !important; + } + .title { + border-radius: 16px 16px 0 0; } } \ No newline at end of file diff --git a/src/icons/index.js b/src/icons/index.js index 2528313..62aa0e8 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -1,7 +1,9 @@ import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg组件 +// 导入所有 SVG 图标 +const requireAll = requireContext => requireContext.keys().map(requireContext) +const req = require.context('./svg', false, /\.svg$/) +requireAll(req) Vue.component('svg-icon', SvgIcon) - -