html, body { margin: 0; padding: 0; background-color: #fff; height: 100%; width: 100%; min-width: 1180px; min-height: 800px; } .container { min-width: 1180px; width: 100%; } /* 顶部 */ .header { background-image: url("../images/zz.png"); background-size: cover; background-repeat: no-repeat; object-fit: fill; background-position:center; width: 100%; height: 596px; } .top-box { display: flex; align-items: center; justify-content: space-between; width: 80%; margin: auto; padding-top: 24px; } .top-box .logo-box { /*background-image: url("../images/logo.png");*/ background-size: 100% 100%; background-repeat: no-repeat; height: 60px; width: 320px; margin-right: 24px; } .top-box .nav-box { flex: 1; height: 60px; } .tabs { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: space-between; height: 60px; } .tab { width: 64px; margin: auto; color: #FFFFFD; cursor: pointer; position: relative; transition: color 0.3s, border-bottom 0.3s; } .tab>a { text-decoration: none; display: inline-block; color: #FFFFFD; font-size: 16px; font-weight: 540; } .tab>input { max-width: 60px; } .tab>a:hover { color: #EC4115; } .tab::after { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: #EC4115; transition: width 0.3s; } .tab.active::after { width: 100%; } .tab.active { padding-bottom: 6px; color: #EC4115; } .top-box .search-box { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } .top-box .search-box input { width: 60px; height: 24px; border-radius: 24px; border: none; outline: none; } /* 新闻动态(通知公告) */ .news-container { width: 80%; margin: 24px auto; display: flex; justify-content: space-between; } .news-container .news-left-box { flex: 1; } /* 新闻动态 */ .news-container .news-left-box .news-nav-box { margin: 16px 0 40px; display: flex; justify-content: space-between; } .news-container .news-left-box .news-nav-box .news-nav-left { width: 498px; height: 374px; } .news-container .news-left-box .news-nav-box .news-nav-right { width: 52%; margin: 0 32px 0 24px; } .news-container .news-left-box .news-nav-box .news-nav-right .ellipsis_2 { overflow: hidden; font-size: 22px; font-weight: bold; color: #333333; word-break: break-all; margin-bottom: 16px; letter-spacing: 0.05rem; } .news-container .news-left-box .news-nav-box .news-nav-right .ellipsis_10 { overflow: hidden; font-size: 14px; font-weight: 400; color: #333333; word-break: break-all; letter-spacing: 0.05rem; margin-bottom: 24px; } .news-container .news-left-box .news-nav-box .news-nav-right .news-nav-time { font-size: 14px; font-weight: 400; color: #696969; } /* 新闻列表 */ .news-container .news-left-box .news-list { margin-right: 32px; } .news-container .news-left-box .news-list .news-list-item { padding: 12px 2px 0; text-decoration: none; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #cccccc; } .news-container .news-left-box .news-list .news-list-item:hover { background-color: #f8f5f4; } .news-container .news-left-box .news-list .news-list-item .ellipsis_1 { flex: 1; overflow: hidden; font-size: 18px; font-weight: bold; color: #333333; word-break: break-all; margin-bottom: 13px; letter-spacing: 0.05rem; } .news-container .news-left-box .news-list .news-list-item .news-item-time { width: 120px; text-align: right; margin-left: 24px; margin-bottom: 13px; font-size: 14px; font-weight: 400; color: #696969; } .news-container .news-right-box { width: 360px; } .news-container .news-right-box .notice-box { width: 100%; background-color: #F2F2F2; padding: 10px 10px 5px; margin-top: 16px; } .news-container .news-right-box .notice-box .item-notice-box { box-sizing: border-box; position: relative; text-decoration: none; border-bottom: 1px solid #cccccc; display: inline-block; width: 97%; margin-bottom: 8px; margin-left: 3%; padding-bottom: 8px; } .news-container .news-right-box .notice-box .item-notice-box::before { content: ''; position: absolute; left: -10px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background-color: #ed4115; vertical-align: middle; } .news-container .news-right-box .notice-box .item-notice-box:last-child { border-bottom: unset; } .news-container .news-right-box .notice-box .item-notice-box .item-notice-time { font-size: 12px; font-weight: 400; color: #696969; margin-bottom: 4px; } .news-container .news-right-box .notice-box .item-notice-box .ellipsis_2 { overflow: hidden; font-size: 14px; font-weight: 400; color: #333333; word-break: break-all; letter-spacing: 0.05rem; } /* 科创实践-社会实践-校园齐化 */ .kcsj-container { min-width: 1180px; width: 100%; margin: 32px auto; position: relative; min-height: 828px; } .kcsj-container .kcsj-banner-box { position: absolute; left: 0; top: 0; width: 100%; background-image: url('../images/center_banner.png'); background-size: 100% 100%; background-repeat: no-repeat; object-fit: fill; height: 384px; } .kcsj-container .kcsj-info-box { position: absolute; left: 10%; top: 24px; width: 80%; height: 320px; display: flex; justify-content: space-between; } .kcsj-container .kcsj-info-box .item-kcsj-box { width: 32.6%; } .kcsj-container .kcsj-info-box .item-kcsj-box .kcsj-card-box { text-decoration: none; box-sizing: border-box; width: 100%; display: inline-block; background-color: #F2F2F2; box-sizing: border-box; padding: 8px; margin: 16px 0; } .kcsj-container .kcsj-info-box .item-kcsj-box .kcsj-card-box .kcsj-card-img { width: 100%; height: 232px; overflow: hidden; } .kcsj-container .kcsj-info-box .item-kcsj-box .kcsj-card-box .kcsj-card-img>img { width: 100%; height: 232px; object-fit: fill; transition: transform 0.5s ease; } .kcsj-container .kcsj-info-box .item-kcsj-box .kcsj-card-box:hover img { transform: scale(1.1); } .kcsj-container .kcsj-info-box .item-kcsj-box .kcsj-card-box .ellipsis_2 { overflow: hidden; font-size: 18px; font-family: "宋体"; color: #aa2309; font-weight: bold; word-break: break-all; letter-spacing: 0.05rem; margin: 12px 0 8px; } .kcsj-container .kcsj-info-box .item-kcsj-box .kcsj-card-box .ellipsis_4 { overflow: hidden; font-size: 14px; font-weight: 400; color: #333333; word-break: break-all; letter-spacing: 0.05rem; margin: 8px 0; } .kcsj-container .kcsj-info-box .item-kcsj-box .kcsj-card-box .kcsj-card-time { font-size: 12px; font-weight: 400; color: #666666; margin: 12px 0; } .kcsj-container .kcsj-info-box .item-kcsj-box .item-kcsj-list { width: 100%; box-sizing: border-box; } .kcsj-container .kcsj-info-box .item-kcsj-box .item-kcsj-list .item-kcsj-item { display: flex; padding: 0 2px; align-items: center; justify-content: space-between; text-decoration: none; width: 100%; box-sizing: border-box; height: 44px; border-bottom: 1px solid #cccccc; } .kcsj-container .kcsj-info-box .item-kcsj-box .item-kcsj-list .item-kcsj-item:hover { background-color: #f8f5f4; } .kcsj-container .kcsj-info-box .item-kcsj-box .item-kcsj-list .item-kcsj-item .ellipsis_1 { flex: 1; overflow: hidden; font-size: 14px; font-weight: 400; color: #333333; word-break: break-all; letter-spacing: 0.05rem; } .kcsj-container .kcsj-info-box .item-kcsj-box .item-kcsj-list .item-kcsj-item .item-kcsj-time { width: 120px; margin-left: 24px; text-align: right; font-size: 14px; font-weight: 400; color: #808080; } /* 志愿服务 */ .zyfw-container { min-width: 1180px; width: 100%; margin: 32px auto 0; padding: 36px 0; background-color: #F2F2F2; height: 760px; } .zyfw-container .zyfw-content { width: 80%; margin: auto; } .zyfw-container .zyfw-content .zyfw-card-box { display: flex; align-items: center; } .zyfw-container .zyfw-carousel-box { position: relative; width: 100%; min-width: 1180px; margin: 32px auto; overflow: hidden; } .zyfw-container .zyfw-carousel-box .zyfw-carousel-inner { display: flex; width: 400%; animation: slide 60s linear infinite; } .zyfw-container .zyfw-carousel-box .zyfw-carousel-inner .zyfw-carousel-item { text-decoration: none; box-sizing: border-box; width: 364px; height: 272px; margin-right: 16px; position: relative; } .zyfw-container .zyfw-carousel-box .zyfw-carousel-inner .zyfw-carousel-item>img { position: absolute; left: 0; top: 0; width: 364px; height: 272px; z-index: 99; object-fit: fill; } .zyfw-container .zyfw-carousel-box .zyfw-carousel-inner .zyfw-carousel-item .ellipsis_1 { position: absolute; left: 7px; bottom: 4px; width: 342px; overflow: hidden; z-index: 999; font-size: 16px; font-weight: bold; font-family: "宋体"; color: #fff; word-break: break-all; letter-spacing: 0.05rem; } @keyframes slide { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } /* 友情链接 */ .yqlj-container { background-image: url('../images/footer_banner.png'); background-size: 100% 100%; background-repeat: no-repeat; object-fit: fill; height: 780px; position: relative; } .yqlj-container .yqlj-special-content { position: absolute; left: 0; top: -380px; width: 100%; } .yqlj-container .yqlj-special-content .yqlj-content { width: 80%; margin: auto; } .fc-container { display: flex; height: 518px; background-color: #fff; padding: 16px; box-sizing: border-box; border-radius: 4px; margin-top: 32px; } .fc-container .fc-left-box { width: 40%; overflow: hidden; } .fc-container .fc-left-box .fc-nav-box { width: 40%; height: 486px; overflow: hidden; } .fc-container .fc-left-box .fc-nav-box>img { height: 486px; width: 100%; object-fit: fill; transition: transform 0.5s ease; } .fc-container .fc-left-box .fc-nav-box:hover>img { transform: scale(1.1); } .fc-container .fc-right-box { margin-left: 10px; flex: 1; } .fc-container .fc-right-box .fc-right-top { width: 100%; display: flex; align-items: center; justify-content: space-between; height: 194px; box-sizing: border-box; } .fc-container .fc-right-box .fc-right-top .fc-top-item { text-decoration: none; display: inline-block; width: 32.7%; height: 184px; overflow: hidden; } .fc-container .fc-right-box .fc-right-top .fc-top-item>img { height: 184px; width: 100%; transition: transform 0.5s ease; } .fc-container .fc-right-box .fc-right-top .fc-top-item:hover>img { transform: scale(1.1); } .fc-container .fc-right-box .fc-right-footer { width: 100%; display: flex; align-items: center; justify-content: space-between; height: 292px; } .fc-container .fc-right-box .fc-right-footer .fc-footer-item { text-decoration: none; display: inline-block; width: 49.5%; height: 292px; overflow: hidden; } .fc-container .fc-right-box .fc-right-footer .fc-footer-item>img { height: 292px; width: 100%; transition: transform 0.5s ease; } .fc-container .fc-right-box .fc-right-footer .fc-footer-item:hover>img { transform: scale(1.1); } /* 链接 */ .lj-container { margin-top: 66px; } .lj-container .link-box { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; } .lj-container .link-box .link-item { box-sizing: border-box; text-decoration: none; display: inline-block; width: 32%; margin-bottom: 16px; } .lj-container .link-box .link-item>img { width: 100%; min-height: 124px; max-height: 152px; object-fit: fill; border-radius: 24px; } /* 底部 */ .footer-box { width: 100%; min-width: 1180px; display: flex; align-items: center; justify-content: center; background-color: #B71913; min-height: 44px; line-height: 44px; text-align: center; } .footer-box .footer-item { font-size: 14px; color: #fff; letter-spacing: 0.05rem; } /* 更多 */ .more-container { margin: 30px auto 0; display: flex; align-items: center; justify-content: center; } .more-container .more-btn { text-decoration: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-size: 18px; font-weight: 400; color: #ed4115; border: 1px solid #ed4115; letter-spacing: 0.05rem; border-radius: 4px; height: 40px; text-align: center; width: 160px; cursor: pointer; } .more-container .more-btn .more-icon { color: #ed4115; font-size: 22px; font-weight: 400; margin-left: 4px; } /* 标题 */ .tit-box { width: 100%; min-height: 60px; position: relative; } .tit-box .tit-tip_1 { position: absolute; left: 0; top: 0; font-size: 32px; font-weight: bold; color: #ed4115; letter-spacing: 0.1rem; z-index: 999; } .tit-box .tit-tip_2 { position: absolute; left: 12px; top: 26px; z-index: 99; font-size: 24px; font-weight: bold; color: rgba(237, 65, 21, 0.3); } .tit-box_1 { width: 100%; min-height: 60px; position: relative; } .tit-box_1 .tit-tip_1 { position: absolute; left: 0; top: 0; font-size: 32px; font-weight: bold; color: #FFFDFE; letter-spacing: 0.1rem; z-index: 9999; } .tit-box_1 .tit-tip_2 { position: absolute; left: 12px; top: 26px; z-index: 99; font-size: 24px; font-weight: bold; color: #DFA39B; } .tit-box_2 { width: 100%; display: flex; align-items: center; justify-content: center; } .tit-box_2 .speacil-tit-box { box-sizing: border-box; min-width: 266px; position: relative; min-height: 60px; } .tit-box_2 .speacil-tit-box .tit-tip_1 { position: absolute; left: 74px; top: 0; font-size: 32px; font-weight: bold; color: #ed4115; letter-spacing: 0.1rem; z-index: 9999; } .tit-box_2 .speacil-tit-box .tit-tip_2 { position: absolute; right: 0px; top: 26px; z-index: 99; font-size: 24px; font-weight: bold; color: #F0BDAE; } /* 省略(谷歌浏览器) */ .ellipsis_1 { display: block; overflow: hidden; white-space: normal; line-height: 1.5em; max-height: 1.5em; text-overflow: ellipsis; position: relative; } .ellipsis_2 { display: block; overflow: hidden; white-space: normal; line-height: 1.5em; max-height: 3em; text-overflow: ellipsis; position: relative; } .ellipsis_3 { display: block; overflow: hidden; white-space: normal; line-height: 1.5em; max-height: 4.5em; text-overflow: ellipsis; position: relative; } .ellipsis_4 { display: block; overflow: hidden; white-space: normal; line-height: 1.5em; max-height: 6em; text-overflow: ellipsis; position: relative; } .ellipsis_10 { display: block; overflow: hidden; white-space: normal; line-height: 1.5em; max-height: 15em; text-overflow: ellipsis; position: relative; } .ellipsis_12 { display: block; overflow: hidden; white-space: normal; line-height: 1.5em; max-height: 18em; text-overflow: ellipsis; position: relative; }