yumoqing/kboss
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: yumoqing:ceadd497ff9959dd483f67c6c6d73be9b9dec578
Branches Tags
yumoqing:main
yumoqing:prod
yumoqing:dev1
...
compare: yumoqing:231ac43562babac29b442b4e93a18854a212aa98
Branches Tags
yumoqing:main
yumoqing:prod
yumoqing:dev1

2 Commits
ceadd497ff ... 231ac43562

Author SHA1 Message Date
hrx
231ac43562 Merge branch 'main' of git.opencomputing.cn:yumoqing/kboss 2026-06-12 10:36:19 +08:00
hrx
9e7541fbc4 登录注册手机适配 2026-06-12 10:35:59 +08:00
3 changed files with 545 additions and 25 deletions
Show Stats Expand all files Collapse all files

182
f/web-kboss/src/views/login/indexNew.vue
View File

@ -1210,10 +1210,186 @@ $dark_gray: #889aa4;
}
/* 响应式 */
@media screen and (max-width: 760px) {
@media screen and (max-width: 768px) {
.main-box {
min-height: 100vh;
min-height: 100dvh;
height: auto;
width: 100%;
padding: 92px 18px 24px;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow-x: hidden;
overflow-y: auto;
background-position: center top;
box-sizing: border-box;
}
.conter {
width: 100%;
max-width: 390px;
margin-top: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.left {
display: none;
}
.right {
width: 100%;
display: flex;
justify-content: center;
}
.logo-top,
.logo-top1 {
top: 16px;
left: 18px;
object-fit: contain;
z-index: 20;
}
.logo-top {
width: 132px !important;
height: auto !important;
max-height: 46px;
}
.logo-top1 {
width: 168px !important;
height: auto !important;
max-height: 52px;
}
.login-form {
width: 90% !important;
padding: 30px 20px;
width: 100%;
max-width: 360px;
margin: 0 auto;
padding: 24px 20px 22px;
border-radius: 18px;
}
.main-content-box {
margin-top: 0 !important;
}
.login-text {
margin-bottom: 10px;
font-size: 22px;
}
.login-mode-tabs,
.two-btn {
width: 100%;
}
.login-mode-tabs {
margin: 14px 0;
button {
height: 36px;
font-size: 13px;
}
}
.login-form-l {
width: 100%;
}
::v-deep .login-form-l .el-form-item__content {
width: 100%;
}
::v-deep .login-form-l .el-form-item {
width: 100% !important;
margin-bottom: 22px !important;
}
::v-deep .login-form-l .el-input__inner {
font-size: 13px;
}
.login-form-style {
.invitecode {
flex: 1;
width: auto !important;
min-width: 0;
}
}
.login-form-l > div[style*="display:flex"] {
width: 100%;
}
.login-btn {
width: 100% !important;
height: 42px;
margin-bottom: 10px !important;
font-size: 15px;
}
.getCodeStyleNew {
width: 104px;
flex-shrink: 0;
margin-left: 8px !important;
font-size: 12px;
}
.two-btn {
font-size: 13px;
}
.forgot-password,
.go-register {
font-size: 13px;
}
.message-footer {
position: absolute;
right: 16px;
bottom: 14px;
left: 16px;
display: block;
width: auto;
height: auto;
margin: 0 auto;
padding: 0;
color: rgba(0, 0, 0, 0.62);
font-size: 10px;
line-height: 16px;
text-align: center;
.item {
display: inline;
margin: 0;
}
span {
display: inline;
margin: 0 5px;
white-space: normal;
}
}
}
@media screen and (max-width: 375px) {
.main-box {
padding-right: 10px;
padding-left: 10px;
}
.login-form {
max-width: 340px;
padding: 22px 16px 20px;
}
.getCodeStyleNew {
width: 92px;
font-size: 11px;
}
}
</style>

194
f/web-kboss/src/views/registrationPage/indexNew.vue
View File

@ -41,7 +41,7 @@
<!-- 验证码输入区域 -->
<div class="form-row">
<el-form-item prop="vcode" class="form-item-custom full-width">
<div class="form-item">
<div class="form-item has-code">
<span class="svg-container">
验证码
</span>
@ -70,7 +70,7 @@
<!-- 密码输入区域 -->
<div class="form-row">
<el-form-item prop="password" class="form-item-custom full-width">
<div class="form-item">
<div class="form-item has-suffix">
<span class="svg-container">
密码
</span>
@ -442,6 +442,7 @@ $light-gray: #909399;
width: 100vw;
height: 100vh;
overflow: hidden;
box-sizing: border-box;
img {
width: 100%;
@ -484,6 +485,7 @@ $light-gray: #909399;
backdrop-filter: blur(10px);
overflow: hidden;
z-index: 999;
box-sizing: border-box;
}
// 注册内容区域样式
@ -545,6 +547,7 @@ $light-gray: #909399;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
box-sizing: border-box;
&:hover {
border-color: $primary-color;
@ -582,6 +585,7 @@ $light-gray: #909399;
// 自定义输入框样式
.custom-input {
flex: 1;
min-width: 0;
border: none !important;
outline: none !important;
background: transparent;
@ -605,6 +609,22 @@ $light-gray: #909399;
}
}
.form-item.has-code {
.custom-input {
::v-deep .el-input__inner {
padding-right: 120px;
}
}
}
.form-item.has-suffix {
.custom-input {
::v-deep .el-input__inner {
padding-right: 42px;
}
}
}
// 获取验证码按钮样式
.get-code-btn {
position: absolute;
@ -706,27 +726,179 @@ $light-gray: #909399;
// 响应式设计 - 移动端适配
@media (max-width: 768px) {
.register-form {
width: 95%;
min-width: unset;
.main-box {
min-height: 100vh;
min-height: 100dvh;
height: auto;
max-height: 90vh;
padding: 76px 12px 20px;
overflow-x: hidden;
overflow-y: auto;
}
.imgStyle {
position: fixed;
inset: 0;
z-index: 0;
img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
.register-form {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
max-width: 420px;
min-width: 0;
min-height: 0;
height: auto;
max-height: none;
margin: 0 auto;
border-radius: 14px;
overflow: visible;
}
.regist-container {
padding: 24px 20px;
padding: 24px 18px;
.title-container {
margin-bottom: 22px;
.title {
font-size: 22px;
}
.subtitle {
font-size: 13px;
}
}
.form-row {
margin-bottom: 16px;
}
.form-item {
height: 46px;
border-radius: 7px;
}
.svg-container {
min-width: 64px;
padding: 0 10px;
font-size: 13px;
flex-shrink: 0;
&.country-code {
min-width: 48px;
}
}
.custom-input {
::v-deep .el-input__inner {
height: 44px;
padding: 0 10px;
font-size: 13px;
}
}
.form-item.has-code {
.custom-input {
::v-deep .el-input__inner {
padding-right: 100px;
}
}
}
.get-code-btn {
right: 8px;
padding: 4px 2px;
font-size: 12px;
}
.show-pwd {
right: 10px;
}
.agreement {
margin: 16px 0;
::v-deep .el-checkbox {
display: flex;
align-items: flex-start;
white-space: normal;
.el-checkbox__input {
margin-top: 2px;
}
.el-checkbox__label {
flex: 1;
padding-left: 8px;
font-size: 12px;
line-height: 18px;
white-space: normal;
}
}
}
.twoBtn {
margin-top: 22px;
}
.register-btn {
height: 46px;
font-size: 15px;
}
}
// 移动端调整头部图标大小
.logo-top {
width: 150px !important;
height: 52px !important;
width: 132px !important;
height: auto !important;
max-height: 48px;
top: 16px;
left: 16px;
}
.logo-top1 {
width: 200px !important;
height: 62px !important;
width: 160px !important;
height: auto !important;
max-height: 52px;
top: 14px;
left: 16px;
object-fit: contain;
}
}
@media (max-width: 375px) {
.main-box {
padding-right: 10px;
padding-left: 10px;
}
.regist-container {
padding: 22px 14px;
.svg-container {
min-width: 58px;
}
.form-item.has-code {
.custom-input {
::v-deep .el-input__inner {
padding-right: 88px;
}
}
}
.get-code-btn {
font-size: 11px;
}
}
}

194
f/web-kboss/src/views/registrationPageMobile/index.vue
View File

@ -41,7 +41,7 @@
<!-- 验证码输入区域 -->
<div class="form-row">
<el-form-item prop="vcode" class="form-item-custom full-width">
<div class="form-item">
<div class="form-item has-code">
<span class="svg-container">
验证码
</span>
@ -70,7 +70,7 @@
<!-- 密码输入区域 -->
<div class="form-row">
<el-form-item prop="password" class="form-item-custom full-width">
<div class="form-item">
<div class="form-item has-suffix">
<span class="svg-container">
密码
</span>
@ -442,6 +442,7 @@ $light-gray: #909399;
width: 100vw;
height: 100vh;
overflow: hidden;
box-sizing: border-box;
img {
width: 100%;
@ -484,6 +485,7 @@ $light-gray: #909399;
backdrop-filter: blur(10px);
overflow: hidden;
z-index: 999;
box-sizing: border-box;
}
// 注册内容区域样式
@ -545,6 +547,7 @@ $light-gray: #909399;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
box-sizing: border-box;
&:hover {
border-color: $primary-color;
@ -582,6 +585,7 @@ $light-gray: #909399;
// 自定义输入框样式
.custom-input {
flex: 1;
min-width: 0;
border: none !important;
outline: none !important;
background: transparent;
@ -605,6 +609,22 @@ $light-gray: #909399;
}
}
.form-item.has-code {
.custom-input {
::v-deep .el-input__inner {
padding-right: 120px;
}
}
}
.form-item.has-suffix {
.custom-input {
::v-deep .el-input__inner {
padding-right: 42px;
}
}
}
// 获取验证码按钮样式
.get-code-btn {
position: absolute;
@ -706,27 +726,179 @@ $light-gray: #909399;
// 响应式设计 - 移动端适配
@media (max-width: 768px) {
.register-form {
width: 95%;
min-width: unset;
.main-box {
min-height: 100vh;
min-height: 100dvh;
height: auto;
max-height: 90vh;
padding: 76px 12px 20px;
overflow-x: hidden;
overflow-y: auto;
}
.imgStyle {
position: fixed;
inset: 0;
z-index: 0;
img {
width: 100% !important;
height: 100% !important;
object-fit: cover;
}
}
.register-form {
position: relative;
top: auto;
left: auto;
transform: none;
width: 100%;
max-width: 420px;
min-width: 0;
min-height: 0;
height: auto;
max-height: none;
margin: 0 auto;
border-radius: 14px;
overflow: visible;
}
.regist-container {
padding: 24px 20px;
padding: 24px 18px;
.title-container {
margin-bottom: 22px;
.title {
font-size: 22px;
}
.subtitle {
font-size: 13px;
}
}
.form-row {
margin-bottom: 16px;
}
.form-item {
height: 46px;
border-radius: 7px;
}
.svg-container {
min-width: 64px;
padding: 0 10px;
font-size: 13px;
flex-shrink: 0;
&.country-code {
min-width: 48px;
}
}
.custom-input {
::v-deep .el-input__inner {
height: 44px;
padding: 0 10px;
font-size: 13px;
}
}
.form-item.has-code {
.custom-input {
::v-deep .el-input__inner {
padding-right: 100px;
}
}
}
.get-code-btn {
right: 8px;
padding: 4px 2px;
font-size: 12px;
}
.show-pwd {
right: 10px;
}
.agreement {
margin: 16px 0;
::v-deep .el-checkbox {
display: flex;
align-items: flex-start;
white-space: normal;
.el-checkbox__input {
margin-top: 2px;
}
.el-checkbox__label {
flex: 1;
padding-left: 8px;
font-size: 12px;
line-height: 18px;
white-space: normal;
}
}
}
.twoBtn {
margin-top: 22px;
}
.register-btn {
height: 46px;
font-size: 15px;
}
}
// 移动端调整头部图标大小
.logo-top {
width: 150px !important;
height: 52px !important;
width: 132px !important;
height: auto !important;
max-height: 48px;
top: 16px;
left: 16px;
}
.logo-top1 {
width: 200px !important;
height: 62px !important;
width: 160px !important;
height: auto !important;
max-height: 52px;
top: 14px;
left: 16px;
object-fit: contain;
}
}
@media (max-width: 375px) {
.main-box {
padding-right: 10px;
padding-left: 10px;
}
.regist-container {
padding: 22px 14px;
.svg-container {
min-width: 58px;
}
.form-item.has-code {
.custom-input {
::v-deep .el-input__inner {
padding-right: 88px;
}
}
}
.get-code-btn {
font-size: 11px;
}
}
}