重新修改了登录UI组件的样式

This commit is contained in:
Liuqi 2023-08-14 14:56:51 +08:00
parent da4e43c178
commit 612ffe9bd4
1 changed files with 37 additions and 10 deletions

View File

@ -1,5 +1,6 @@
<template> <template>
<div id="userLayout" :class="['user-layout-wrapper', device]"> <div id="userLayout" :class="['user-layout-wrapper', device]">
<div class="backImg"></div>
<div class="container"> <div class="container">
<div class="top"> <div class="top">
<div class="header"> <div class="header">
@ -9,11 +10,13 @@
</a> </a>
</div> </div>
<div class="desc"> <div class="desc">
计科院ERP系统是由人工智能大数据实验室设计的系统 欢迎您登录
</div> </div>
</div> </div>
<route-view></route-view> <div class="border">
<route-view></route-view>
</div>
<div class="footer"> <div class="footer">
<div class="links"> <div class="links">
@ -22,7 +25,8 @@
<a href="https://www.baidu.com" target="_blank">条款</a> <a href="https://www.baidu.com" target="_blank">条款</a>
</div> </div>
<div class="copyright"> <div class="copyright">
Copyright &copy; 2023 哈尔滨师范大学人工智能大数据实验室 出品 Copyright &copy; <a href="http://www.baidu.com" target="_blank">哈尔滨师范大学人工智能大数据实验室</a> All
right reserved
</div> </div>
</div> </div>
</div> </div>
@ -52,7 +56,29 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
#userLayout.user-layout-wrapper { #userLayout.user-layout-wrapper {
height: 100%; height: 100%;
background: #f0f2f5 url(~@/assets/background.jpg) no-repeat 0%;
.border {
display: block;
width: 50%;
margin: 20px auto;
padding: 25px;
background: #ffffff;
color: black;
border-radius: 15px;
border: 0;
}
.backImg {
width: 100%;
min-height: 100%;
background: #f0f2f5 url(~@/assets/background.jpg) no-repeat 50%;
background-size: 100%;
padding: 110px 0 144px;
position: absolute;
background-size: cover;
left: 0%;
}
&.mobile { &.mobile {
.container { .container {
.main { .main {
@ -70,6 +96,7 @@ export default {
position: absolute; position: absolute;
background-size: cover; background-size: cover;
right: 0%; right: 0%;
a { a {
text-decoration: none; text-decoration: none;
} }
@ -100,7 +127,7 @@ export default {
.title { .title {
font-size: 33px; font-size: 33px;
color: rgba(0, 0, 0, 0.85); color: white;
font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', font-family: 'Chinese Quote', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol'; 'Segoe UI Symbol';
@ -110,9 +137,9 @@ export default {
} }
} }
.desc { .desc {
font-size: 14px; font-size: 30px;
color: rgba(0, 0, 0, 0.45); color: white;
margin-top: 12px; margin-top: 15px;
margin-bottom: 40px; margin-bottom: 40px;
} }
} }
@ -135,7 +162,7 @@ export default {
margin-bottom: 8px; margin-bottom: 8px;
font-size: 14px; font-size: 14px;
a { a {
color: rgba(230, 228, 235, 0.45); color: white;
transition: all 0.3s; transition: all 0.3s;
&:not(:last-child) { &:not(:last-child) {
margin-right: 40px; margin-right: 40px;
@ -143,7 +170,7 @@ export default {
} }
} }
.copyright { .copyright {
color: rgb(242, 242, 248); color: white;
font-size: 14px; font-size: 14px;
} }
} }