|
|
|
@ -3,37 +3,18 @@ |
|
|
|
:class="prefixCls" |
|
|
|
class="relative h-[100%] lt-xl:bg-[var(--login-bg-color)] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px" |
|
|
|
> |
|
|
|
<div class="relative mx-auto h-full flex"> |
|
|
|
<div |
|
|
|
:class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`" |
|
|
|
> |
|
|
|
<!-- 左上角的 logo + 系统标题 --> |
|
|
|
<div class="relative flex items-center text-white"> |
|
|
|
<img alt="" class="mr-10px h-24px w-48px" src="@/assets/imgs/logo.png" /> |
|
|
|
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> |
|
|
|
</div> |
|
|
|
<!-- 左边的背景图 + 欢迎语 --> |
|
|
|
<div class="h-[calc(100%-60px)] flex items-center justify-center"> |
|
|
|
<TransitionGroup |
|
|
|
appear |
|
|
|
enter-active-class="animate__animated animate__bounceInLeft" |
|
|
|
tag="div" |
|
|
|
> |
|
|
|
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" /> |
|
|
|
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div> |
|
|
|
<div key="3" class="mt-5 text-14px font-normal text-white"> |
|
|
|
{{ t('login.message') }} |
|
|
|
</div> |
|
|
|
</TransitionGroup> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="box"> |
|
|
|
<img src="../../assets/imgs/login_eam.png" alt="" class="logo"/> |
|
|
|
|
|
|
|
<div class="absolute w-[33%] mx-auto h-full flex right-[7%]"> |
|
|
|
<div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px"> |
|
|
|
<!-- 右上角的主题、语言选择 --> |
|
|
|
<div |
|
|
|
class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end" |
|
|
|
> |
|
|
|
<div class="flex items-center at-2xl:hidden at-xl:hidden"> |
|
|
|
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> |
|
|
|
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo_eam.png" /> |
|
|
|
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span> |
|
|
|
</div> |
|
|
|
<div class="flex items-center justify-end space-x-10px"> |
|
|
|
@ -60,6 +41,11 @@ |
|
|
|
</Transition> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="footer"> |
|
|
|
<div>Copyright ©2012-2023闻荫科技吉ICP备100114504646号-6 ICP证书:吉B2-2018005497977吉林工商吉公网安备3101150204979086755号</div> |
|
|
|
<div>出版物经营许可证(吉)批字第Y8813号广播电视节目制作经营许可正(吉)字第03283号网络文化经营许可证吉网文{2012)1460-055号</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script lang="ts" setup> |
|
|
|
@ -101,4 +87,30 @@ $prefix-cls: #{$namespace}-login; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.box{ |
|
|
|
background: url(../../assets/imgs/lg_login.png) no-repeat top left; |
|
|
|
background-size: 100% 100%; |
|
|
|
width: 100%; |
|
|
|
height:100%; |
|
|
|
} |
|
|
|
// .logo{ |
|
|
|
// position: absolute; |
|
|
|
// left: 4vw; |
|
|
|
// top: 5vh; |
|
|
|
// width: 30%; |
|
|
|
// } |
|
|
|
.logo{ |
|
|
|
position: absolute; |
|
|
|
height:100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
.footer{ |
|
|
|
position: absolute; |
|
|
|
bottom:4vh; |
|
|
|
text-align: center; |
|
|
|
padding: 0px 30px; |
|
|
|
width: calc(100% - 60px); |
|
|
|
color: #989898; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
