|
|
@@ -146,7 +146,13 @@ onMounted(() => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
+<style lang="scss">
|
|
|
+@media screen and (max-width: 1280px) {
|
|
|
+ :root {
|
|
|
+ font-size: calc(1280px / 106);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.mobileLogin {
|
|
|
width: 100%;
|
|
|
height: 100vh;
|
|
|
@@ -175,7 +181,7 @@ onMounted(() => {
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
padding: 5vh 0;
|
|
|
- border-radius: 2rem;
|
|
|
+ border-radius: 1rem;
|
|
|
opacity: 1;
|
|
|
background-color: rgba(#ffffff, 0.9);
|
|
|
margin-bottom: 11vh;
|
|
|
@@ -184,34 +190,33 @@ onMounted(() => {
|
|
|
width: 100%;
|
|
|
padding: 0 10%;
|
|
|
box-sizing: border-box;
|
|
|
- margin-bottom: 4.5rem;
|
|
|
+ margin-bottom: 1.2rem;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
|
|
|
.login-input {
|
|
|
width: 100%;
|
|
|
- height: 10rem;
|
|
|
- line-height: 10rem;
|
|
|
- border-radius: 1rem;
|
|
|
+ height: 3rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ border-radius: 0.5rem;
|
|
|
padding: 0 1rem;
|
|
|
text-align: center;
|
|
|
- font-size: 4rem;
|
|
|
+ font-size: 1.3rem;
|
|
|
opacity: 1;
|
|
|
background: #EAEAEA;
|
|
|
box-sizing: border-box;
|
|
|
border: 1px solid #FFFFFF;
|
|
|
- box-shadow: inset 0px 0px 10px 1px rgba(78, 78, 78, 0.2);
|
|
|
+ box-shadow: inset 0px 0px 5px 1px rgba(78, 78, 78, 0.2);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
.login-btn {
|
|
|
width: 60%;
|
|
|
- height: 10rem;
|
|
|
- line-height: 10rem;
|
|
|
- border-radius: 5rem;
|
|
|
- font-size: 4.5rem;
|
|
|
- opacity: 1;
|
|
|
+ height: 3rem;
|
|
|
+ line-height: 3rem;
|
|
|
+ border-radius: 1.5rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
text-align: center;
|
|
|
cursor: pointer;
|
|
|
background: radial-gradient(141% 126% at 5% 93%, #8EFFA9 0%, #07FFE7 100%);
|
