@charset "utf-8"; /**! * 首页 * date:2022-07-26 * author: zhaodq; */ /* * 横幅 */ .banner { min-width: 1200px; height: 562px; padding-top: 249px; background: center no-repeat; background-size: 100% 562px; } .banner-btns { display: -webkit-box; display: -ms-flexbox; display: flex; } .banner-btn { width: 146px; height: 160px; margin-right: 20px; background-color: rgba(255, 255, 255, 0.8); background-repeat: no-repeat; background-position: center 27px; border: 3px solid #ffffff; border-radius: 12px; } .banner-btn:hover { background-color: #fff; } .banner-btn.registered { background-image: ; } .banner-btn.main-unit { background-image: ; } .banner-btn.trading-center { background-image: ; } .banner-btn.opening { background-image: ; } .banner-btn > a { display: block; height: 100%; padding-top: 107px; color: #333; text-align: center; } /* * 新闻通知 */ .notices-wrap { position: relative; } .notices { padding-top: 40px; padding-bottom: 45px; } .notices .left { float: left; width: 550px; height: 358px; overflow: hidden; } .notices .swiper { position: relative; } .notices .swiper-slide { position: relative; } .notices .swiper-slide a { display: block; } .notices .notices-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .notices .notices-title { position: absolute; left: 0; right: 0; bottom: 0; height: 42px; padding-top: 14px; padding-left: 15px; padding-right: 150px; font-size: 16px; color: #fff; background: -webkit-gradient(linear, left top, right top, color-stop(2.38%, rgba(23, 42, 92, 0.8)), color-stop(96.19%, rgba(23, 42, 92, 0.3))); background: linear-gradient(90deg, rgba(23, 42, 92, 0.8) 2.38%, rgba(23, 42, 92, 0.3) 96.19%); } .notices .swiper-pagination { position: absolute; left: auto; right: 15px; bottom: 0; z-index: 9; width: 60px; height: 42px; line-height: 42px; } .notices .swiper-pagination-bullet { border-radius: 0%; } .notices .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 2px; } .notices .swiper-pagination-bullet-active { background: #fff; } .notices .right { position: relative; float: right; width: 620px; height: 358px; } .notices .tab-hd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; font-size: 20px; color: #7f8ba5; } .notices .tab-hd-item { width: 96px; margin-right: 30px; cursor: pointer; } .notices .tab-hd-item > a { display: block; color: #7f8ba5; text-align: center; } .notices .tab-hd-item.current a, .notices .tab-hd-item:hover a { font-size: 24px; font-weight: bold; color: #333; } .notices .tab-bd { margin-top: 15px; } .notices .info-item { height: 65px; padding-top: 24px; border-bottom: 1px solid rgba(57, 123, 223, 0.08); } .notices .info-item > a { display: block; } .notices .info-title { position: relative; float: left; width: 450px; padding-left: 15px; font-size: 16px; color: #2f2f2f; } .notices .info-title::before { content: ''; position: absolute; left: 3px; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 2px; height: 2px; background-color: #333; border-radius: 1px; } .notices .info-date { float: right; font-size: 14px; color: #7f8ba5; } .notices .info-item:hover .info-title { color: #2065fc; } .notices .info-item:hover .info-title::before { background-color: #2065fc; } .notices .info-item:hover .info-date { color: #2065fc; } .notices .more { position: absolute; top: 13px; right: 0; width: 20px; height: 6px; background: center no-repeat; background-size: 20px 6px; cursor: pointer; } /* * 悬浮 */ .suspend-list { position: absolute; top: 20px; right: 11px; z-index: 10; } .suspend-list.fixed { position: fixed; } .suspend-list .suspend-item { position: relative; width: 78px; height: 78px; margin-bottom: 10px; background: -webkit-gradient(linear, left top, left bottom, from(#2e6fff), to(#309cff)); background: linear-gradient(180deg, #2e6fff 0%, #309cff 100%); border: 1px solid #fff; -webkit-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 6px; } .suspend-list .suspend-item > a { display: block; height: 100%; padding-top: 49px; color: #fff; text-align: center; background-repeat: no-repeat; background-position: center 14px; background-size: 25px 25px; } .suspend-list .suspend-item.guide a { background-image: ; } .suspend-list .suspend-item.question a { background-image: ; } .suspend-list .suspend-item.contact a { background-image: ; background-size: 27px 25px; } .suspend-list .suspend-popup { position: absolute; left: -195px; top: 0; display: none; width: 182px; height: 126px; background-color: #fff; -webkit-box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12); box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12); } .suspend-list .suspend-popup::after { content: ''; position: absolute; top: 0; right: -28px; width: 30px; height: 80px; background: left 28px no-repeat; background-size: 12px 17px; } .suspend-list .suspend-popup-item { position: relative; height: 42px; padding: 10px 0 10px 20px; font-size: 14px; line-height: 22px; } .suspend-list .suspend-popup-item > a { color: #333; } .suspend-list .suspend-popup-item::before { content: ''; position: absolute; left: 13px; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 2px; height: 2px; background-color: #333; border-radius: 1px; } .suspend-list .suspend-popup-item:hover a { color: #2065fc; } .suspend-list .suspend-popup-item:hover::before { background-color: #2065fc; } .common-title { font-size: 26px; font-weight: 700; color: #2f2f2f; text-align: center; background: center no-repeat; } .custom-swiper { position: relative; overflow: hidden; padding-bottom: 30px; } .custom-pagination .swiper-pagination-bullet-active { width: 40px; border-radius: 4px; } /* * 公共资源配置信息 */ .configuration { height: 701px; padding-top: 60px; background-color: #f0f3f8; } .configuration .operation { width: 102px; height: 22px; margin: 20px auto 50px; background: center no-repeat; background-size: 102px 22px; cursor: pointer; } .configuration .tab-hd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-bottom: 15px; border-bottom: 1px solid rgba(72, 115, 213, 0.5); } .configuration .tab-hd-item { position: relative; height: 30px; font-size: 20px; color: #4e638f; line-height: 30px; background-size: 30px 30px; background-position: left center; background-repeat: no-repeat; } .configuration .tab-hd-item > a { display: block; padding-left: 40px; color: #4e638f; } .configuration .tab-hd-item.item1 { background-image: ; } .configuration .tab-hd-item.item2 { background-image: ; } .configuration .tab-hd-item.item3 { background-image: ; } .configuration .tab-hd-item.item4 { background-image: ; } .configuration .tab-hd-item.item5 { background-image: ; } .configuration .tab-hd-item.current, .configuration .tab-hd-item:hover { font-weight: 700; color: #2065fc; } .configuration .tab-hd-item.current::before, .configuration .tab-hd-item:hover::before { content: ''; position: absolute; left: 0; right: 0; bottom: -16px; border: 2px solid #2065fc; } .configuration .tab-hd-item.item1.current, .configuration .tab-hd-item.item1:hover { background-image: ; } .configuration .tab-hd-item.item2.current, .configuration .tab-hd-item.item2:hover { background-image: ; } .configuration .tab-hd-item.item3.current, .configuration .tab-hd-item.item3:hover { background-image: ; } .configuration .tab-hd-item.item4.current, .configuration .tab-hd-item.item4:hover { background-image: ; } .configuration .tab-hd-item.item5.current, .configuration .tab-hd-item.item5:hover { background-image: ; } .configuration .operation-btns { padding: 20px 0; } .configuration .operation-btn { display: inline-block; vertical-align: top; width: 124px; height: 31px; margin-right: 27px; line-height: 31px; color: #2065fc; text-align: center; border: 1px solid #2065fc; border-radius: 4px; } .configuration .operation-btn.current { color: #fff; background: -webkit-gradient(linear, left bottom, left top, from(#0a57ff), color-stop(159.09%, #2cd9ff)); background: linear-gradient(360deg, #0a57ff 0%, #2cd9ff 159.09%); border-color: #fff; } .configuration .info-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .configuration .info-item { width: 588px; height: 88px; margin-bottom: 24px; padding-right: 13px; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0px 1px 20px rgba(33, 73, 159, 0.08); box-shadow: 0px 1px 20px rgba(33, 73, 159, 0.08); } .configuration .info-item:hover { border-color: #2065fc; } .configuration .left { float: left; width: 80px; height: 88px; background: -webkit-gradient(linear, left bottom, left top, from(#0a57ff), color-stop(159.09%, #2cd9ff)); background: linear-gradient(360deg, #0a57ff 0%, #2cd9ff 159.09%); opacity: 0.8; } .configuration .left-title { display: block; padding-top: 59px; font-size: 14px; color: #fff; text-align: center; background-repeat: no-repeat; background-position: center 7px; } .configuration .loading .left-title { background-image: ; } .configuration .parse { background: -webkit-gradient(linear, left top, left bottom, from(#cfd5e3), to(#bfc9e1)); background: linear-gradient(180deg, #cfd5e3 0%, #bfc9e1 100%); } .configuration .parse .left-title { background-image: ; } .configuration .mian-title { float: left; width: 400px; padding: 12px 0 12px 22px; font-size: 16px; color: #333; line-height: 32px; } .configuration .right { float: right; width: 79px; height: 70px; margin-top: 9px; font-size: 14px; color: #2065fc; text-align: center; background: rgba(229, 237, 248, 0.66); } .configuration .day { font-size: 34px; } .configuration .configuration-swiper { position: relative; overflow: hidden; padding-bottom: 30px; } /* * 今日开标 */ .today-opening { height: 338px; padding-top: 60px; background: top center no-repeat; } .today-opening .title { font-size: 24px; font-weight: 700; color: #fff; text-align: center; background: center no-repeat; } .today-opening .operation { width: 102px; height: 22px; margin: 20px auto 30px; background: center no-repeat; background-size: 102px 22px; cursor: pointer; } .today-opening .info-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; height: 124px; padding: 37px 0; color: #fff; background: rgba(238, 244, 255, 0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-radius: 4px; } .today-opening .info-item { position: relative; width: calc(100% /8); text-align: center; } .today-opening .info-item::after { content: ''; position: absolute; top: 50%; right: 0; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 1px; height: 27px; background-color: #fff; } .today-opening .info-item:last-child::after { background: none; } .today-opening .info-value { font-size: 16px; margin-bottom: 6px; } .today-opening .info-num { font-size: 24px; font-weight: 700; } .enter { height: 537px; padding-top: 60px; } /* * 快速入口 */ .quick { float: left; width: 734px; overflow: hidden; } .quick .title { height: 24px; margin-bottom: 40px; background: center no-repeat; background-size: 734px 24px; } .quick .swiper { position: relative; } .quick-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .quick-item { width: 357px; height: 68px; margin-bottom: 15px; background: center no-repeat; background-size: 360px 98px; border: 2px solid transparent; } .quick-item > a { display: block; height: 100%; padding: 23px 20px; } .quick-item:hover { border-color: #fff; -webkit-box-shadow: 0px 8px 12px rgba(33, 73, 159, 0.08); box-shadow: 0px 8px 12px rgba(33, 73, 159, 0.08); } .quick-title { position: relative; padding-left: 10px; font-size: 16px; color: #000; } .quick-title::before { content: ''; position: absolute; left: 0; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 2px; height: 16px; background: -webkit-gradient(linear, left bottom, left top, from(#256aff), color-stop(102.94%, #80e8ff)); background: linear-gradient(360deg, #256aff 0%, #80e8ff 102.94%); border-radius: 1px; } /* * 服务入口 */ .service { float: right; width: 436px; overflow: hidden; } .service .title { height: 24px; margin-bottom: 40px; background: center no-repeat; background-size: 436px 24px; } .service-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .service-item { width: 208px; height: 151px; margin-bottom: 15px; background-position: center; background-repeat: no-repeat; background-size: 100%; -webkit-transition: all 1s; transition: all 1s; -webkit-transform: translate3d(1.1, 1.1, 1.1); transform: translate3d(1.1, 1.1, 1.1); } .service-item > a { display: block; height: 100%; padding-top: 113px; font-size: 16px; color: #fff; text-align: center; } .service-item:hover { background-size: 120%; } .service-item.item1 { background-image: ; } .service-item.item2 { background-image: ; } .service-item.item3 { background-image: ; } .service-item.item4 { background-image: ; } /* * 公开信息 */ .public { height: 301px; padding-top: 60px; background: #f0f3f8; } .public-list { margin-top: 50px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .public-item { width: 343px; height: 104px; background-position: center; background-repeat: no-repeat; background-size: 343px 104px; -webkit-transition: all .3s; transition: all .3s; } .public-item > a { display: block; height: 100%; padding: 32px 50px; line-height: 38px; font-size: 20px; font-weight: 700; color: #fff; } .public-item.item1 { background-image: ; } .public-item.item2 { background-image: ; } .public-item.item3 { background-image: ; } .public-item:hover { -webkit-transform: translatey(-12px); transform: translatey(-12px); } .public-title { padding-left: 60px; background-position: left center; background-repeat: no-repeat; background-size: 40px 40px; } .public .item1 .public-title { background-image: ; } .public .item2 .public-title { background-image: ; } .public .item3 .public-title { background-image: ; } /* * 数据服务 */ .data { position: relative; height: 583px; padding-top: 60px; background: center no-repeat; } .data .left { position: relative; float: left; width: 364px; height: 371px; padding-top: 20px; } .data .local { position: absolute; top: 0; right: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 75px; height: 75px; font-weight: bold; color: #2065fc; background: center no-repeat; background-size: 75px 75px; z-index: 2; } .data .map { width: 100%; height: 100%; } .data .right { float: right; width: 802px; } .data .hd { height: 66px; padding: 8px 33px; line-height: 22px; background: -webkit-gradient(linear, left bottom, left top, from(#f1f5ff), to(#f1f5ff)); background: linear-gradient(0deg, #f1f5ff, #f1f5ff); border-radius: 4px; } .data .hd-title { position: relative; margin-bottom: 8px; font-size: 18px; color: #2f2f2f; } .data .hd-title::before { content: ''; position: absolute; left: -18px; top: 50%; -webkit-transform: translatey(-50%); transform: translatey(-50%); width: 6px; height: 6px; background: linear-gradient(132.14deg, #0a57ff 19.02%, #2cd9ff 90.63%); border: 4px solid #fff; border-radius: 10px; -webkit-box-shadow: 2px 2px 5px rgba(57, 107, 219, 0.5); box-shadow: 2px 2px 5px rgba(57, 107, 219, 0.5); } .data .hd-desc { color: #4e638f; } .data .bd { margin-top: 20px; } .data .list { float: left; width: 309px; } .data .list-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; height: 45px; padding: 12px 15px 0; font-size: 16px; background: #ffffff; -webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.08); box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.08); border-radius: 4px; margin-bottom: 15px; } .data .list-item:last-child { margin-bottom: 0; } .data .list-label { color: #2f2f2f; min-width: 128px; } .data .list-value { margin-right: 7px; font-size: 20px; color: #2065fc; text-align: right; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .data .list-unit { color: #7f8ba5; } .data .bar { float: right; width: 465px; height: 282px; font-size: 14px; } /* * 悬浮窗 */ .floating { position: fixed; right: 0; bottom: 0; z-index: 11; width: 384px; height: 295px; padding: 27px; background-color: #fff; -webkit-box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.1); box-shadow: 0px 2px 24px rgba(0, 0, 0, 0.1); border-radius: 4px; } .floating.fixed { position: absolute; } .floating .close-icon { top: 7px; right: 6px; } .floating .swiper { overflow: hidden; } .floating .desc { height: 44px; margin-top: 12px; font-size: 14px; color: #2f2f2f; line-height: 22px; } .floating .swiper-button-prev { left: auto; top: auto; bottom: 10px; right: 54px; width: 16px; height: 16px; background: center no-repeat; background-size: 16px 16px; } .floating .swiper-button-next { left: auto; top: auto; bottom: 10px; right: 26px; width: 16px; height: 16px; background: center no-repeat; background-size: 16px 16px; }