* { padding: 0px; border: 0px; margin: 0px; font-family: "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans; border-color: #4479FB; } html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; line-height: 20px; font-size: 16px; background-color: #F4F7FE; } body { display: flex; justify-content: flex-start; align-items: center; height: 100vh; } .LeftBoard { background: #414345; width:360px; min-width: 280px; height: 100%; } .GuideBtn { height: 100px; display: flex; flex-direction: line; align-items: center; justify-content: center; cursor: pointer; color: #4479FB; font-size: 24px; } .GuideBtn:hover { font-size: 26px; } .Logo { height: 40px; display: flex; margin-right: 10px; } /*导航栏属性*/ li { list-style: none; } .accordion { overflow: hidden; border-radius: 0 8px 8px 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); } .accordion > li { width: 100%; } .accordion > li input { display: none; } .accordion > li label { position: relative; display: block; width: 100%; padding: 20px 50px; color: #FFFFFF; background-color: #4479FB; cursor: pointer; } .accordion > li label i { position: absolute; top: calc(50% - 12px); left: 20px; font-size: 24px; transition: all 0.5s; } .accordion > li label:hover { border-left-color: #FFFFFF; border-left-width: 4px; border-style: solid; } .accordion > li:not(:first-child) label { border-top: 1px solid #38814D; } .accordion > li ol { width: 100%; background-color: #333333; } .accordion > li ol li { position: relative; width: 100%; height: 0; line-height: 50px; padding-left: 20px; cursor: pointer; transition: all 0.5s; } .accordion > li ol li::before { content: ""; position: absolute; top: 3px; left: 0; width: 4px; height: 44px; background-color: #4479FB; transform: scaleY(0); transition: all 0.5s; } .accordion > li ol li:hover::before { transform: scaleY(1); } .accordion > li input:checked ~ label i { transform: rotate(90deg); } .accordion > li input:checked ~ ol li { height: 50px; } /*导航栏属性*/ .MenuBtn { height: 50px; display: flex; flex-direction: line; cursor: pointer; color: #FFFFFF; transition: all 0.5s; } .MenuBtn:hover { color: #4479FB; } .MenuBtnSelected { background-color: #CED1D9; color: #4479FB; } .MenuBtnIcon { margin: auto 15px; width: 20px; height: 20px; display: flex; } .RightBoard { width: 100%; height: 100%; min-width: 700px; padding: 0px 50px; overflow-y: auto; } .GuideBoard { margin-top: 20px; display: flex; flex-wrap: wrap; } .Thumbnail { min-width: 300px; max-width: 600px; width: 23%; margin: 10px auto; display: flex; flex-direction: column; cursor: pointer; } .ThumbnailTitle { text-align: center; font-size: 18px; font-weight: 700; width: 100%; color: #4479FB; } .ImageBoard { margin: 50px auto; display: none; } .AutozoomImage img { width: 100%; max-width: 1200px; border-radius: 5px; border: 1px solid #4479FB; margin: 20px auto; display: flex; justify-content: center; } .IntroduceBoard { margin: 50px auto; display: none; } .IntroduceTitle { text-align: center; font-size: 36px; font-weight: 700; margin: 30px 0; color: #4479FB; line-height: 50px; } .IntroduceText { font-size: 16px; line-height: 20px; } .IntroduceTextBold { font-size: 16px; font-weight: 700; line-height: 25px; } .CenterImage img{ margin: 20px auto; max-width: 1200px; border-radius: 5px; border: 1px solid #4479FB; display: flex; justify-content: center; } .IntroduceTextRed { font-size: 16px; color: #ED1C24; line-height: 20px; text-align: center; } .IntroduceTextGreen { font-size: 16px; color: #24AB4D; line-height: 20px; text-align: center; } .FilamentsTable { display: flex; justify-content: center; width: 100%; overflow: auto; } /*表格属性*/ td, th { border: 1px solid gray; font-size: 12px; width: 100px; height: 50px; text-align: center; } th { background-color: #4F6EBC; color: #FFFFFF; } table { table-layout: fixed; width: 200px; } td:first-child, th:first-child { position: sticky; left: 0; z-index: 1; background: #CDDBFB; } th:nth-child(odd) { background-color: #6993FB; } thead tr th { position: sticky; top: 0; } tbody tr:nth-child(odd) { background: #B7B9BF; } th:first-child { z-index: 2; } /*表格属性*/ .IssueBoard { margin-top: 20px; display: none; } .EmailBlock { margin: 10px auto; display: flex; justify-content: center; flex-wrap: wrap; } .PrinterBlock { margin: 0 10px; display: flex; flex-direction: column; }