* { padding: 0; margin: 0; } body, html { margin: 0; padding: 0; min-width: 1500px; height: 100vh; min-height: 900px; } @font-face { font-family: 'DOUYU'; src: url('../fonts/DOUYUFONT-2.OTF'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Source Han Sans SC'; src: url('../fonts/SOURCEHANSANSSC-LIGHT-2.OTF'); font-weight: normal; font-style: normal; } .detailDiv { width: 45%; max-width: 836px; max-height: 569px; height: 60%; background-image: url(../images/floorbg.png); background-size: 100% 100%; font-family: "Source Han Sans SC"; color: #2895FF; padding: 30px; box-sizing: border-box; position: absolute; right: 10px; top: 5%; z-index: 11; } .detailDiv>div { width: 100%; height: 100%; } .detailDiv .top { height: 48px; display: flex; justify-content: space-between; align-items: flex-end; } .detailDiv .right { font-size: 16px; display: flex; flex-direction: column; } .detailDiv .right>span { white-space: nowrap; } .detailDiv .el-tabs { margin-top: 15px; } .detailDiv .el-tabs__item { font-size: 1.5rem; color: #2895FF; padding: 0 5px; height: 43px; margin-right: 30px; } .detailDiv .el-tabs__item.is-active { font-weight: bold; color: #2895FF; border-bottom: 5px solid #2895FF; } .detailDiv .el-tabs__nav-wrap::after { background-color: rgb(40 149 255 / 30%); } .detailDiv .el-tabs__active-bar { display: none; } .moxing { font-weight: 600; position: absolute; bottom: 27%; width: 750px; left: 16%; display: flex; flex-direction: column; align-items: center; font-family: Source Han Sans SC; z-index: 10; } .moxing img { width: 100%; } .moxing .imgDiv { position: relative; width: 100%; } .zxfw { font-weight: bold; font-size: 26px; color: #F4F4F4; width: 45%; max-width: 836px; position: absolute; top: 65%; right: 0; box-sizing: border-box; } .zxfw .buttonList { display: flex; flex-wrap: wrap; width: 100%; } .zxfw .button { width: 223px; height: 89px; background-image: url(../images/button-zxfw.png); background-size: 100% 100%; text-align: center; padding-top: 23px; box-sizing: border-box; letter-spacing: 3px; margin-bottom: 15px; margin-right: 20px; cursor: pointer; } .ysqgk { width: 100%; background-color: #fff; height: 100%; } .floorTabs { position: absolute; left: 120px; top: 60px; display: flex; flex-direction: column; z-index: 11; } .floorTabs .list { width: 163px; height: 50px; line-height: 50px; text-align: center; background: #286EBC; margin-bottom: 20px; font-size: 20px; color: #FFFFFF; cursor: pointer; } .floorTabs .active { background: #CD9D64; } .sxqd { height: calc(100% - 32px); padding-left: 25px; display: flex; flex-direction: column; } .sxqd ul { padding-top: 0; margin-top: 0; } .sxqd li { cursor: pointer; margin-top: 10px; } .sxqd li span { line-height: 30px; border-bottom: 1px solid #2895FF; padding-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: break-all; display: block; font-size: 18px; } .bottomBtn { display: flex; position: absolute; left: 120px; bottom: 50px; } .bottomBtn .btn { width: 145px; height: 51px; line-height: 50px; background: #7DB0EE; font-weight: bold; font-size: 18px; color: #F4F4F4; text-align: center; cursor: pointer; } .bottomBtn .active { background: #0D74F2; } .el-tabs { height: calc(100% - 42px); } .el-tabs__content { height: calc(100% - 58px); } .el-tabs__content>div { height: 95%; }