gitee
/
snowy
mirror of https://gitee.com/xiaonuobase/snowy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

【优化】优化登录页面以及账户绑定等页面在小屏幕下的展示效果

dev
xuyuxiang 2025-09-18 00:28:52 +08:00
parent 3744162982
commit 96e496009c
6 changed files with 18 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
snowy-admin-web/src/views/auth/findPwd/emailFindForm.vue
View File

@ -9,7 +9,7 @@
</a-form-item> </a-form-item>
<a-form-item name="emailValidCode"> <a-form-item name="emailValidCode">
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="17"> <a-col :span="14">
<a-input <a-input
v-model:value="emailFormData.emailValidCode" v-model:value="emailFormData.emailValidCode"
:placeholder="$t('login.emailCodePlaceholder')" :placeholder="$t('login.emailCodePlaceholder')"
@ -20,7 +20,7 @@
</template> </template>
</a-input> </a-input>
</a-col> </a-col>
<a-col :span="7"> <a-col :span="10">
<a-button size="large" class="xn-wd" @click="getEmailValidCode" :disabled="state.smsSendBtn">{{ <a-button size="large" class="xn-wd" @click="getEmailValidCode" :disabled="state.smsSendBtn">{{
(!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s' (!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s'
}}</a-button> }}</a-button>
@ -42,10 +42,10 @@
<a-form-item> <a-form-item>
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="7"> <a-col :span="12">
<a-button class="xn-wd" round size="large" href="/login">{{ $t('login.backLogin') }}</a-button> <a-button class="xn-wd" round size="large" href="/login">{{ $t('login.backLogin') }}</a-button>
</a-col> </a-col>
<a-col :span="17"> <a-col :span="12">
<a-button type="primary" class="xn-wd" :loading="islogin" round size="large" @click="submitReset">{{ <a-button type="primary" class="xn-wd" :loading="islogin" round size="large" @click="submitReset">{{
$t('login.restPassword') $t('login.restPassword')
}}</a-button> }}</a-button>

9
snowy-admin-web/src/views/auth/findPwd/index.vue
View File

@ -227,12 +227,7 @@
text-align: center; text-align: center;
margin-bottom: 6px; margin-bottom: 6px;
} }
@media (max-width: 1200px) { @media (max-width: 768px) {
.login-form {
width: 340px;
}
}
@media (max-width: 1000px) {
.login_main { .login_main {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -244,8 +239,6 @@
} }
.login-form { .login-form {
width: 100%; width: 100%;
padding: 20px 40px;
top: 15%;
} }
.login_background .version { .login_background .version {
padding: 0 20px; padding: 0 20px;

8
snowy-admin-web/src/views/auth/findPwd/phoneFindForm.vue
View File

@ -9,7 +9,7 @@
</a-form-item> </a-form-item>
<a-form-item name="phoneValidCode"> <a-form-item name="phoneValidCode">
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="17"> <a-col :span="14">
<a-input <a-input
v-model:value="phoneFormData.phoneValidCode" v-model:value="phoneFormData.phoneValidCode"
:placeholder="$t('login.smsCodePlaceholder')" :placeholder="$t('login.smsCodePlaceholder')"
@ -20,7 +20,7 @@
</template> </template>
</a-input> </a-input>
</a-col> </a-col>
<a-col :span="7"> <a-col :span="10">
<a-button size="large" class="xn-wd" @click="getPhoneValidCode" :disabled="state.smsSendBtn">{{ <a-button size="large" class="xn-wd" @click="getPhoneValidCode" :disabled="state.smsSendBtn">{{
(!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s' (!state.smsSendBtn && $t('login.getSmsCode')) || state.time + ' s'
}}</a-button> }}</a-button>
@ -42,10 +42,10 @@
<a-form-item> <a-form-item>
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="7"> <a-col :span="12">
<a-button class="xn-wd" round size="large" href="/login">{{ $t('login.backLogin') }}</a-button> <a-button class="xn-wd" round size="large" href="/login">{{ $t('login.backLogin') }}</a-button>
</a-col> </a-col>
<a-col :span="17"> <a-col :span="12">
<a-button type="primary" class="xn-wd" :loading="islogin" round size="large" @click="submitReset">{{ <a-button type="primary" class="xn-wd" :loading="islogin" round size="large" @click="submitReset">{{
$t('login.restPassword') $t('login.restPassword')
}}</a-button> }}</a-button>

9
snowy-admin-web/src/views/auth/login/login.less
View File

@ -149,12 +149,7 @@
text-align: center; text-align: center;
margin-bottom:6px; margin-bottom:6px;
} }
@media (max-width: 1200px) { @media (max-width: 768px) {
.login-form {
width: 340px;
}
}
@media (max-width: 1000px) {
.login_main { .login_main {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -163,8 +158,6 @@
} }
.login-form { .login-form {
width: 100%; width: 100%;
padding: 20px 40px;
top:15%
} }
.logo_background{ .logo_background{
padding-left:40px; padding-left:40px;

8
snowy-admin-web/src/views/sys/user/userTab/bindForm/bindEmail.vue
View File

@ -150,20 +150,20 @@
</Form.Item> </Form.Item>
<Form.Item name="validCode"> <Form.Item name="validCode">
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="16"> <a-col :span="14">
<Input v-model:value="formState.validCode" placeholder="请输入图片验证码" /> <Input v-model:value="formState.validCode" placeholder="请输入图片验证码" />
</a-col> </a-col>
<a-col :span="8"> <a-col :span="10">
<img v-if="captchaImage" :src="captchaImage" class="captcha-image" @click="getCaptcha" /> <img v-if="captchaImage" :src="captchaImage" class="captcha-image" @click="getCaptcha" />
</a-col> </a-col>
</a-row> </a-row>
</Form.Item> </Form.Item>
<Form.Item name="emailValidCode"> <Form.Item name="emailValidCode">
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="16"> <a-col :span="14">
<Input v-model:value="formState.emailValidCode" placeholder="请输入邮箱验证码" /> <Input v-model:value="formState.emailValidCode" placeholder="请输入邮箱验证码" />
</a-col> </a-col>
<a-col :span="8"> <a-col :span="10">
<Button :loading="captchaLoading" @click="getEmailValidCode" style="width: 100%" :disabled="state.sendBtn"> <Button :loading="captchaLoading" @click="getEmailValidCode" style="width: 100%" :disabled="state.sendBtn">
{{ (!state.sendBtn && '获取验证码') || state.time + ' s' }} {{ (!state.sendBtn && '获取验证码') || state.time + ' s' }}
</Button> </Button>

8
snowy-admin-web/src/views/sys/user/userTab/bindForm/bindPhone.vue
View File

@ -152,20 +152,20 @@
</Form.Item> </Form.Item>
<Form.Item name="validCode"> <Form.Item name="validCode">
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="16"> <a-col :span="14">
<Input v-model:value="formState.validCode" placeholder="请输入图片验证码" /> <Input v-model:value="formState.validCode" placeholder="请输入图片验证码" />
</a-col> </a-col>
<a-col :span="8"> <a-col :span="10">
<img v-if="captchaImage" :src="captchaImage" class="captcha-image" @click="getCaptcha" /> <img v-if="captchaImage" :src="captchaImage" class="captcha-image" @click="getCaptcha" />
</a-col> </a-col>
</a-row> </a-row>
</Form.Item> </Form.Item>
<Form.Item name="phoneValidCode"> <Form.Item name="phoneValidCode">
<a-row :gutter="8"> <a-row :gutter="8">
<a-col :span="16"> <a-col :span="14">
<Input v-model:value="formState.phoneValidCode" placeholder="请输入短信验证码" /> <Input v-model:value="formState.phoneValidCode" placeholder="请输入短信验证码" />
</a-col> </a-col>
<a-col :span="8"> <a-col :span="10">
<Button :loading="captchaLoading" @click="getPhoneValidCode" style="width: 100%" :disabled="state.sendBtn"> <Button :loading="captchaLoading" @click="getPhoneValidCode" style="width: 100%" :disabled="state.sendBtn">
{{ (!state.sendBtn && '获取验证码') || state.time + ' s' }} {{ (!state.sendBtn && '获取验证码') || state.time + ' s' }}
</Button> </Button>