From 7b70bb16c3fd3d3b2c0fa4a464cee90054834cbf Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Mon, 21 Apr 2025 16:34:11 +0800
Subject: [PATCH] feat: 调整首页样式和新建任务日期，以及小文字调整
---
src/page/login/index.vue | 181 +++++++++++++--------------------------------
1 files changed, 52 insertions(+), 129 deletions(-)
diff --git a/src/page/login/index.vue b/src/page/login/index.vue
index 1049488..3000f94 100644
--- a/src/page/login/index.vue
+++ b/src/page/login/index.vue
@@ -1,11 +1,13 @@
<template>
- <div class="login-container" @keyup.enter="handleLogin">
- <div class="login-header">
- <div class="title">中图智飞低空智能感知网平台</div>
+ <div :class="{loginContainer:true, 'narrowScreen':narrowScreen}" @keyup.enter="handleLogin">
+ <div class="login-container">
+ <div class="login-header">
+ <div class="title">中图智飞低空智能感知网平台</div>
+ </div>
+ <!-- <div class="login-left-title">中国图强 智领飞跃</div> -->
+ <!-- <div class="login-left"></div> -->
+ <userLogin v-if="activeName === 'user'"></userLogin>
</div>
- <!-- <div class="login-left-title">中国图强 智领飞跃</div> -->
- <div class="login-left"></div>
- <userLogin v-if="activeName === 'user'"></userLogin>
</div>
</template>
<script>
@@ -30,6 +32,7 @@
},
data() {
return {
+ narrowScreen: false,
login:{
info: '中图智飞低空智能感知网平台'
},
@@ -53,12 +56,19 @@
this.handleLogin();
this.getTime();
},
- mounted() {},
+ mounted() {
+ this.narrowScreenFun()
+ window.addEventListener('resize', this.narrowScreenFun);
+ },
computed: {
...mapGetters(['tagWel']),
},
props: [],
methods: {
+ narrowScreenFun() {
+ // 监听窗口变化，计算是不是 窄屏幕
+ this.narrowScreen = window.innerWidth / window.innerHeight < 16 / 9;
+ },
getTime() {
setInterval(() => {
this.time = this.$dayjs().format('YYYY年MM月DD日 HH:mm:ss');
@@ -131,127 +141,40 @@
</script>
<style lang="scss" scoped>
-// .login-index {
-// position: relative;
-// width: 100%;
-// height: 100%;
-// background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
-// .login-header {
-// background: url('@/assets/images/login/big-title.png') no-repeat center / 100% 100%;
-// width: 100%;
-// height: 102px;
-// position: relative;
-// .title {
-// position: absolute;
-// left: 637px;
-// top: 22px;
-// width: 646px;
-// height: 58px;
-// font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
-// font-weight: 400;
-// font-size: 54px;
-// line-height: 58px;
-// // text-shadow: 0px 2px 6px #0C3D79;
-// text-align: center;
-// font-style: normal;
-// text-transform: none;
-// color: #fff;
-// // background: linear-gradient(90deg, #FFFFFF 0%, #B2D5FF 100%);
-// }
-// }
-// .login-left-title {
-// position: absolute;
-// left: 147px;
-// top: 263px;
-// width: 926px;
-// height: 42px;
-// font-family: Source Han Sans CN, Source Han Sans CN;
-// font-weight: bold;
-// font-size: 28px;
-// line-height: 33px;
-// letter-spacing: 30px;
-// // text-shadow: 0px 4px 6px rgba(0,0,0,0.72);
-// color: #fff;
-// text-align: center;
-// font-style: normal;
-// text-transform: none;
-// // background: linear-gradient(90.00000000000004deg, #FFFFFF 0%, #E3FEFF 63%, #88BAFF 100%);
-// }
-// .login-left {
-// position: absolute;
-// top: 334px;
-// left: 147px;
-// width: 858px;
-// height: 540px;
-// background: url('@/assets/images/login/left-logo.png') no-repeat center / 100% 100%;
-// }
+.loginContainer {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow-x: auto;
+ scrollbar-width: none; /* Firefox 隐藏滚动条 */
+ &::-webkit-scrollbar {
+ display: none; /* Chrome、Safari 隐藏滚动条 */
+ }
-// .login-right {
-// position: absolute;
-// top: 305px;
-// right: 291px;
-// width: 488px;
-// height: 508px;
-// background: url('@/assets/images/login/right-login-info.png') no-repeat center / 100% 100%;
-// .user-login {
-// position: absolute;
-// top: 72px;
-// left: 180px;
-// width: 118px;
-// height: 26px;
-// font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
-// font-weight: 400;
-// font-size: 32px;
-// // color: #D1E0F9;
-// color: #fff;
-// line-height: 26px;
-// text-align: center;
-// }
-// .username {
-// position: absolute;
-// top: 127px;
-// left: 46px;
-// width: 394px;
-// height: 72px;
-// background: url('../assets/images/login/username.png') no-repeat center / 100% 100%;
-// // :deep(.el-form-item) {
-// // width: 120px;
-// // }
-// }
-// .password {
-// position: absolute;
-// top: 208px;
-// left: 46px;
-// width: 394px;
-// height: 72px;
-// background: url('../assets/images/login/password.png') no-repeat center / 100% 100%;
-// }
-// .forgot-password {
-// position: absolute;
-// width: 64px;
-// height: 24px;
-// top: 289px;
-// right: 58px;
-// font-family: Source Han Sans CN, Source Han Sans CN;
-// font-weight: 500;
-// font-size: 16px;
-// color: #D1E0F9;
-// line-height: 19px;
-// }
-// .login-click {
-// position: absolute;
-// bottom: 106px;
-// left: 44px;
-// width: 391px;
-// height: 61px;
-// background: url('../assets/images/login/login-btn.png') no-repeat center / 100% 100%;
-// font-family: Source Han Sans CN, Source Han Sans CN;
-// font-weight: 500;
-// font-size: 24px;
-// line-height: 50px;
-// text-align: center;
-// color: #fff;
-// }
-// }
-// }
+ &.narrowScreen{
+ >div{
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ }
+ }
+ >div{
+ left: 0;
+ top: 0;
+ position: absolute;
+ height: 1080px;
+ width: 1920px;
+ }
+ .login-container {
+ background-image: url('@/assets/images/login/bg.png');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ // background: url('@/assets/images/login/bg.png') no-repeat center / 100% 100%;
+ pointer-events: none;
+
+ > * {
+ pointer-events: auto;
+ }
+ }
+}
</style>
--
Gitblit v1.9.3