body{ background: url(/uploads/image/i429/top.png) no-repeat center top #ffffff; display: flex; flex-direction: column; /* 垂直排列 */ align-items: stretch; /* 子元素宽度自适应父容器 */ margin: 0; padding: 0; } /* 年份 */ .year { width: 100%; height: 120px; background-color: #1984e8; margin-top: 590px; display: flex; margin-bottom: 50px; } .year .year_list { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 100%; padding: 0; margin: 0; } .year .year_list li { flex: 1 1 0; min-width: 100px; max-width: 272px; width: clamp(100px, 15vw, 272px); height: clamp(24px, 6vw, 73px); border-radius: 10px; transition: background 0.3s; background: url(/uploads/image/i429/tban.png) no-repeat left clamp(8px, 3vw, 50px) center; background-size: clamp(14px, 3vw, 48px) clamp(14px, 3vw, 48px); display: flex; align-items: center; box-sizing: border-box; /* 缩小时左侧间距更小 */ padding-left: calc(clamp(8px, 3vw, 50px) clamp(14px, 3vw, 50px) clamp(4px, 2vw, 20px)); } .year .year_list li span { font-size: clamp(16px, 2vw, 30px); line-height: 1.1; font-weight: bold; color: #b5e6ff; margin-left: 0; } .year .year_list li:hover, .year .year_list li.active { background: url(/uploads/image/i429/tbliang.png) no-repeat left clamp(8px, 3vw, 50px) center, linear-gradient(to bottom, #004bbc, #0c84f4); background-size: clamp(14px, 3vw, 48px) clamp(14px, 3vw, 48px), cover; } .year .year_list li:hover span, .year .year_list li.active span { color: #fff; } /* 内容 */ .conteont_box{ width: 100%; /* 宽度自适应父容器 */ max-width: 1200px; /* 最大宽度限制 */ margin: 0 auto; box-sizing: border-box; } /* 目录 */ .mulu{ width: 100%; display: flex; flex-direction: column; /* 内部盒子垂直排列 */ align-items: stretch; /* 内部盒子宽度自适应父容器 */ box-sizing: border-box; padding-top: 55px; box-shadow: 3px 4px 20px 0px rgba(193, 192, 192, 0.75); margin-bottom: 50px; } .mulu .title{ height: 35px; display: flex; justify-content: center; } .mulu .title span { display: flex; align-items: center; justify-content: center; height: 20px; margin: 0 25px; font-weight: bold; font-size: clamp(18px, 3vw, 30px); letter-spacing: 2px; color: #000; } .mulu .title .zuo, .mulu .title .you { flex: 1; display: flex; align-items: center; } .mulu .title .zuo { justify-content: flex-end; background: url(/uploads/image/i429/bjz.png) no-repeat right center; } .mulu .title .you { justify-content: flex-start; background: url(/uploads/image/i429/bjy.png) no-repeat left center; } /* 目录列表 */ .mulu ul{ margin: 30px 0; } .title_nr:empty { display: none !important; } .mulu .title_nr li { position: relative; padding: 0 30px 0 38px; font-size: clamp(14px, 2.5vw, 18px); line-height: 48px; display: flex; justify-content:space-between; color: #555; flex-wrap: wrap; } .mulu .title_nr li a { display: inline-block; max-width: 45em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; color: #444; font-size: inherit; } .mulu .title_nr li::before { content: ''; position: absolute; left: 19px; top: 50%; transform: translatey(-50%); width: 6px; height: 6px; background: #555; border-radius: 50%; display: inline-block; } .mulu .title_nr li:hover { color: #000; } .mulu .title_nr li:hover a { color: #000; } .mulu .title_nr li:hover::before { background: #000; } /* 事项 */ .mulu .directory{ line-height: 65px; background: linear-gradient(to right, #fff 0px 90px, #3eaaec 320px calc(100% - 320px), #fff calc(100% - 90px) 100%); text-align: center; font-size: clamp(16px, 3vw, 26px); color: #fff; margin: 35px 0 35px; } .mulu .shixiang{ margin: 0 20px; display: flex; justify-content: space-between; flex-wrap: nowrap; } .mulu .shixiang .shixiang_list { position: relative; /* 为伪元素定位做准备 */ border-radius: 23px; font-size: clamp(14px, 2vw, 20px); color: #003333; padding: 10px 15px; background-color: transparent; /* 默认无背景色 */ transition: background-color 0.3s; } .mulu .shixiang .shixiang_list:hover { background-color: #1984e8; color: #fff; } .shixiang_list.active { background-color: #1984e8 !important; color: #fff !important; } .shixiang_list.active::after { content: ''; position: absolute; left: 50%; top: 100%; width: 0; height: 0; transform: translate(-50%, 0.15em); border-left: 19px solid transparent; border-right: 19px solid transparent; border-bottom: 25px solid #fff; z-index: 2; pointer-events: none; } .shixiang_list.active::before { content: ''; position: absolute; left: 50%; top: 100%; width: 0; height: 0; transform: translate(-50%, 0.1em); border-left: 19px solid transparent; border-right: 19px solid transparent; border-bottom: 24.5px solid #ccc; z-index: 1; pointer-events: none; } .shixiang_list.no-content, .shixiang_list.no-content.active, .shixiang_list.no-content:hover, .shixiang_list.no-content:active { color: #999 !important; background: none !important; cursor: not-allowed !important; pointer-events: none !important; transition: none !important; } /* 禁用tab时三角不显示 */ .shixiang_list.no-content::after, .shixiang_list.no-content::before { display: none !important; } .mulu .shixiang_nr{ border: #ccc solid 1px; border-radius: 7px; margin: 25px 25px 35px; position: relative; }