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

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

Browse Source
pull/1/head
刘释隆 2 years 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> </script>
<template> <template>

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

@ -39,7 +39,7 @@ onBeforeMount(() => {
<div> <div>
<n-spin :show="spinning"> <n-spin :show="spinning">
<img <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" @click="fetchCaptcha"
> >
</n-spin> </n-spin>

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save