.Layout { width: 100%; height: 100%; :global { .topTitle { width: 100%; height: 90px; background-color: var(--themeColor); .main { width: 1580px; height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; &>div { height: 100%; } .logo { height: 58px; width: 230px; background-image: url('../../assets/img/login/LOGO.png'); background-size: 100% 100%; } .tabCut { width: calc(100% - 800px); display: flex; align-items: center; justify-content: space-around; .row { line-height: 90px; cursor: pointer; font-size: 18px; color: #fff; height: 100%; &:hover { color: #D3B453; } } .active { pointer-events: none; color: #D3B453; position: relative; &::before { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 56px; height: 24px; background-image: url('../../assets/img/login/flower.png'); background-size: 56px 24px; } } } .user { cursor: pointer; position: relative; line-height: 90px; padding-left: 60px; background: url('../../assets/img/login/user_1.png') no-repeat left center; background-size: 40px 40px; font-size: 16px; color: #fff; .userSet { width: 115px; opacity: 0; pointer-events: none; transition: bottom .3s; height: 100px; background-color: var(--themeColor); position: absolute; left: 0; bottom: -80px; &>span { display: block; width: 100%; height: 50%; line-height: 50px; text-align: center; &:hover { color: #D3B453; } } } &:hover { .userSet { opacity: 1; pointer-events: auto; bottom: -100px; } } } } } .pageMain { width: 100%; height: calc(100% - 90px); background-image: url('../../assets/img/login/homeBg.jpg'); background-size: cover; &>div { width: 1600px; margin: 0 auto; padding-top: 35px; height: calc(100% - 30px); .leftBar { float: left; width: 220px; height: 100%; background-color: #fff; border-radius: 5px; } .rightMain { width: calc(100% - 250px); height: 100%; float: right; &>div { width: 100%; height: 100%; } .breadTit { padding-left: 35px; background-color: #fff; border-radius: 5px; width: 100%; height: 50px; margin-bottom: 20px; } .objectSonMain { background-color: #fff; border-radius: 5px; width: 100%; height: calc(100% - 70px); .objectSonMainTit { width: calc(100% - 30px); margin: 0 auto 20px; height: 60px; border-bottom: 2px solid #999999; padding: 0 5px; display: flex; &>div { cursor: pointer; height: 100%; line-height: 58px; padding: 0 15px; font-size: 16px; margin-right: 50px; } .active { font-weight: 700; color: var(--themeColor); pointer-events: none; position: relative; &::before { content: ''; z-index: 10; position: absolute; bottom: -3px; left: 0; width: 100%; height: 4px; background-color: var(--themeColor); } } } .objectSonMainTable { width: calc(100% - 60px); margin: 0 auto; height: calc(100% - 80px); .tableSelectBox{ width: 100%; display: flex; align-items: center; .row{ margin-right: 30px; } } } } } } } } }