guoxiangbin
/
ocr-web
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: 首页登录相关模块自适应

Browse Source
pull/1/head
刘释隆 1 year ago
parent 8755666c5d
commit adb11244a8
6 changed files with 150 additions and 154 deletions
Show Stats Download Patch File Download Diff File

11
src/App.vue
Unescape View File

@ -45,16 +45,7 @@ const getThemeOverrides = computed(() => {
};
});
// onMounted(() => {
// window.addEventListener("resize", () => {
// nextTick(() => {
// const designWidth = 1440;
// const rempPx = 16;
// const scale = window.innerWidth / designWidth;
// document.documentElement.style.fontSize = scale * rempPx + "px";
// });
// });
// });
</script>
<template>

2
src/views/login/captcha.vue
Unescape View File

@ -39,7 +39,7 @@ onBeforeMount(() => {
<div>
<n-spin :show="spinning">
<img
title="点击刷新" :src="base64" :style="{ width: '93px', height: '54px', cursor: 'pointer' }"
title="点击刷新" :src="base64" :style="{ width: '5.8125rem', height: '3.375rem', cursor: 'pointer' }"
@click="fetchCaptcha"
>
</n-spin>

45
src/views/login/components/Forget.vue
Unescape View File

@ -332,7 +332,7 @@ function forget() {
<style lang="less" scoped>
.form-login {
width: 420px;
width: 26.25rem;
box-sizing: border-box;
background: linear-gradient(
136deg,
@ -344,19 +344,19 @@ function forget() {
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
backdrop-filter: blur(12px);
position: relative;
padding: 48px 27px 42px;
padding: 3rem 1.6875rem 2.625rem;
.img-close {
position: absolute;
right: 0;
top: -44px;
width: 28px;
height: 28px;
width: 1.75rem;
height: 1.75rem;
cursor: pointer;
}
.tab {
font-size: 24px;
font-size: 1.5rem;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
text-align: left;
@ -368,27 +368,27 @@ function forget() {
}
.form-1 {
margin-top: 29px;
margin-top: 1.8125rem;
.form-item {
height: 60px;
height: 3.75rem;
}
.item-input {
width: 366px;
width: 22.875rem;
// height: 44px;
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
}
.btn {
width: 366px;
height: 44px;
width: 22.875rem;
height: 2.75rem;
background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
border-radius: 3px;
margin-top: 10px;
margin-bottom: 14px;
margin-top: .625rem;
margin-bottom: .875rem;
font-size: 1rem;
&-disabled {
opacity: 0.5;
background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
@ -397,26 +397,26 @@ function forget() {
}
.img-phone {
width: 20px;
height: 20px;
width: 1.25rem;
height: 1.25rem;
}
.order-last {
font-size: 14px;
font-size: .875rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #507afd;
}
.code {
font-size: 15px;
font-size: .9375rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #507afd;
margin-left: 12px;
margin-left: .75rem;
cursor: pointer;
&-count {
font-size: 14px;
font-size: .875rem;
color: #999999;
}
}
@ -425,11 +425,12 @@ function forget() {
// color: #FF4E4F !important;
}
.back {
font-size: 15px;
font-size: .9375rem;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
text-align: center;
color: #666666;
line-height: 21px;
line-height: 1.3125rem;
cursor: pointer;
}
</style>

66
src/views/login/components/Login.vue
Unescape View File

@ -472,8 +472,8 @@ function forget() {
<style lang="less" scoped>
.form-login {
width: 420px;
height: 417px;
width: 26.25rem;
height: 26.0625rem;
box-sizing: border-box;
background: linear-gradient(
136deg,
@ -485,40 +485,40 @@ function forget() {
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
backdrop-filter: blur(12px);
position: relative;
padding: 48px 27px 0;
padding: 3rem 1.6875rem 0;
.img-close {
position: absolute;
right: 0;
top: -44px;
width: 28px;
height: 28px;
top: -2.75rem;
width: 1.75rem;
height: 1.75rem;
cursor: pointer;
}
.tab {
display: flex;
.tab-item {
width: 72px;
height: 25px;
font-size: 18px;
width: 4.5rem;
height: 1.5625rem;
font-size: 1.125rem;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 600;
text-align: left;
color: #666666;
line-height: 33px;
margin-right: 24px;
line-height: 2.0625rem;
margin-right: 1.5rem;
cursor: pointer;
&-active {
width: 96px;
height: 33px;
font-size: 24px;
width: 6rem;
height: 2.0625rem;
font-size: 1.5rem;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 600;
text-align: left;
color: #507afd;
line-height: 33px;
line-height: 2.0625rem;
.line {
background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
@ -526,36 +526,36 @@ function forget() {
}
.line {
width: 32px;
height: 4px;
width: 2rem;
height: .25rem;
border-radius: 2px;
margin: 0 auto;
margin-top: 9px;
margin-top: .5625rem;
}
}
}
.form-1 {
margin-top: 29px;
margin-top: 1.8125rem;
.form-item {
height: 60px;
height: 3.75rem;
}
.item-input {
width: 366px;
width: 22.875rem;
// height: 44px;
background: rgba(255, 255, 255, 0.5);
border-radius: 4px;
}
.btn {
width: 366px;
height: 44px;
width: 22.875rem;
height: 2.75rem;
background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
border-radius: 3px;
margin-top: 10px;
margin-bottom: 14px;
margin-top: .625rem;
margin-bottom: .875rem;
&-disabled {
opacity: 0.5;
@ -565,27 +565,27 @@ function forget() {
}
.img-phone {
width: 20px;
height: 20px;
width: 1.25rem;
height: 1.25rem;
}
.order-last {
font-size: 14px;
font-size: .875rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #507afd;
}
.code {
font-size: 15px;
font-size: .9375rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #507afd;
margin-left: 12px;
margin-left: .75rem;
cursor: pointer;
&-count {
font-size: 14px;
font-size: .875rem;
color: #999999;
}
}
@ -594,11 +594,11 @@ function forget() {
// color: #FF4E4F !important;
}
.forgetSpan {
font-size: 15px;
font-size: .9375rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
text-align: center;
color: #999999;
line-height: 21px;
line-height: 1.3125rem;
}
</style>

168
src/views/login/index.vue
Unescape View File

@ -1,10 +1,28 @@
<script lang="ts" setup>
import { ref } from "vue";
import Login from "./components/Login.vue";
import Forget from "./components/Forget.vue";
import { onMounted, nextTick, ref, onDeactivated } from "vue";
onMounted(() => {
nextTick(() => {
initRem();
});
window.addEventListener("resize", () => {
initRem();
});
});
onDeactivated(()=>{
window.removeEventListener('resize',()=>{
})
})
const show = ref(false);
const ifLogin = ref(true);
const initRem = () => {
const designWidth = 1440;
const rempPx = 16;
const scale = window.innerWidth / designWidth;
document.documentElement.style.fontSize = scale * rempPx + "px";
};
function showLogin() {
show.value = true;
@ -86,7 +104,7 @@ function close() {
background-image: url("../../assets/images/login/bg.png");
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
height: 56.25rem;
.f-c-c {
display: flex;
@ -111,77 +129,77 @@ function close() {
}
.img-logo {
width: 121px;
height: 35px;
width: 7.5625rem;
height: 2.1875rem;
}
.img-ai {
width: 97px;
height: 90px;
width: 6.0625rem;
height: 5.625rem;
}
.img-item {
width: 53px;
height: 52px;
margin-left: -10px;
width: 3.3125rem;
height: 3.25rem;
margin-left: -0.625rem;
}
.img-task {
width: 138px;
height: 54px;
border-radius: 6px;
width: 8.625rem;
height: 3.375rem;
border-radius: 0.375rem;
background-image: url("../../assets/images/login/img-task.png");
background-repeat: no-repeat;
background-size: cover;
font-size: 14px;
font-size: 0.875rem;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
font-weight: Regular;
text-align: left;
color: #666666;
margin-left: -10px;
margin-top: -10px;
padding-top: 10px;
margin-left: -0.625rem;
margin-top: -1rem;
padding-top: 0.625rem;
box-sizing: border-box;
text-align: center;
}
.img-ip {
width: 80px;
height: 80px;
width: 5rem;
height: 5rem;
}
.img-text {
width: 600px;
height: 65px;
margin-top: 43px;
width: 37.5rem;
height: 4.0625rem;
margin-top: 2.6875rem;
}
.img-icon-1 {
width: 54px;
height: 54px;
width: 3.375rem;
height: 3.375rem;
}
.img-icon-2 {
width: 54px;
height: 54px;
margin-left: 830px;
width: 3.375rem;
height: 3.375rem;
margin-left: 51.875rem;
}
.content {
width: 1300px;
width: 81.25rem;
margin: 0 auto;
padding-top: 27px;
padding-top: 1.6875rem;
}
.header {
margin-bottom: 44px;
margin-bottom: 2.75rem;
.btn-login {
width: 76px;
height: 40px;
width: 4.75rem;
height: 2.5rem;
border: 1px solid #666666;
border-radius: 8px;
font-size: 16px;
border-radius: 0.5rem;
font-size: 1rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #333333;
@ -190,103 +208,89 @@ function close() {
}
.img-wrap {
padding-left: 174px;
padding-left: 10.875rem;
}
.center-text {
margin: 0 auto;
width: 776px;
width: 48.5rem;
}
.text {
font-size: 20px;
font-size: 1.25rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
text-align: center;
color: #666666;
line-height: 28px;
margin-top: 32px;
line-height: 1.75rem;
margin-top: 2rem;
}
.btn-login-2 {
width: 138px;
height: 44px;
width: 8.625rem;
height: 2.75rem;
background: linear-gradient(136deg, #3258e8, #786efc 100%);
border-radius: 8px;
border-radius: 0.5rem;
box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
font-size: 16px;
font-size: 1rem;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
text-align: left;
color: #ffffff;
line-height: 22px;
line-height: 1.375rem;
margin: 0 auto;
cursor: pointer;
}
.item-wrap {
margin-top: 78px;
width: 76.375rem;
margin: 4.875rem auto 0;
.item {
width: 258px;
height: 132px;
// width: 16.125rem;
// height: 8.25rem;
width: 14.875rem;
height: 7rem;
background-image: url("../../assets/images/login/item-bg.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
padding-top: 50px;
padding-left: 28px;
padding-top: 3.125rem;
padding-left: 1.75rem;
box-sizing: border-box;
}
.item-img {
width: 66px;
height: 76px;
width: 4.125rem;
height: 4.75rem;
position: absolute;
top: -15px;
left: 20px;
top: -0.9375rem;
left: 1.25rem;
}
.title {
font-size: 16px;
font-size: 1rem;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: Medium;
color: #333333;
line-height: 22px;
margin-bottom: 8px;
line-height: 1.375rem;
margin-bottom: 0.5rem;
}
.subtitle {
font-size: 12px;
font-size: 0.75rem;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular;
color: #666666;
line-height: 17px;
line-height: 1.0625rem;
}
}
@media screen and (min-width: 1440px) {
.item-footer {
max-width: 970px;
max-height: 119px;
width: 50%;
height: 10vh;
position: fixed;
left: 50%;
bottom: 0;
margin-left: -485px;
}
}
@media screen and (min-width:1440) {
.item-footer {
max-width: 970px;
max-height: 119px;
width: 50%;
height: 10vh;
position: fixed;
left: 60%;
bottom: 0;
margin-left: -485px;
}
.item-footer {
width: 60.625rem;
height: 7.4375rem;
position: fixed;
left: 44.5rem;
bottom: 0;
margin-left: -30.3125rem;
}
}
</style>

12
src/views/login/index1.vue
Unescape View File

@ -190,19 +190,19 @@ function handleSubmit(e) {
&-container {
flex: 1;
max-width: 384px;
min-width: 420px;
max-width: 24rem;
min-width: 26.25rem;
margin: 0 auto;
padding-top: 230px;
padding-top: 14.375rem;
}
&-form {
background: rgba(255, 255, 255, 0.20);
border: 1px solid #ffffff;
border-radius: 6px;
border-radius: .375rem;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
backdrop-filter: blur(9px);
padding: 50px 30px;
padding: 3.125rem 1.875rem;
}
&-other {
@ -225,7 +225,7 @@ function handleSubmit(e) {
}
.page-account-container {
padding: 32px 0 24px 0;
padding: 2rem 0 1.5rem 0;
}
::v-deep(.n-input .n-input__suffix) {

Write Preview
Loading…
Cancel
Save