@charset "UTF-8"; /* 引入常用样式 */ /* 清浮动模块 */ .fl { float: left; } .fr { float: right; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /** * [px转百分比] * @param {[number]} $size [变量值] * @param {[number]} $base [基准值] * @return {[number]} [返回em] */ /** * [px转百分比] * @param {[number]} $size [自身宽度的大小] * @param {[number]} $scale [包裹盒子的大小] * @return {[number]} [返回百分比数值] */ /* 字体引入 */ @font-face { font-family: Rubik; src: url("../fonts/Rubik-Light.ttf"); src: url("../fonts/rubik-regular-webfont.ttf"); src: url("../fonts/Rubik-Medium.ttf"); } @font-face { font-family: DigifaceWide; src: url("../fonts/digifaw.ttf"); } /* 初始化 start*/ * { box-sizing: border-box; } b { font-weight: normal; } /* 声明字体变量 */ html, body { width: 100%; height: 100%; color: #fff; } @media screen and (max-width: 3850px) { html, body { font-size: 64px; } } @media screen and (max-width: 1930px) { html, body { font-size: 32px; } } ul, li, dl, dt, dd { padding: 0; margin: 0; list-style: none; } h1, h2, h3, h4, div { padding: 0; margin: 0; font-weight: normal; } h3 { font-size: 0.5625em; color: #fff; } p { margin: 0; padding: 0; } /* 初始化 end */ /* 公共部分样式 start*/ body { position: relative; padding: 0; margin: 0; font-family: MicrosoftYaHei; overflow: hidden; } body:before { position: absolute; top: 7.6%; right: 0; width: 5.2%; height: 12%; background: url(../img/circle.png) no-repeat; background-size: 100%; content: ""; } /* 最外层盒子样式 */ .root-wrap { height: 100%; padding: 0 1.5%; background: url("../img/bg.png") no-repeat center top; background-size: 100% 100%; } /* 头部样式 */ header { position: relative; width: 100%; height: 10%; min-height: 90px; text-align: center; padding-top: 1%; margin-bottom: 1%; } header > img { position: absolute; top: 10%; left: 50%; transform: translate(-50%, 0); } header .gifImg { width: 100%; height: 50%; position: absolute; top: 40%; min-height: 50px; overflow: hidden; text-align: center; } header .gifImg:after { content: ""; top: 40%; left: 50%; transform: translate(-50%, 20%); display: block; position: absolute; width: 36.5%; min-width: 700px; height: 100%; background: url(../img/header.gif) no-repeat center center; background-size: 100%; } header .gifImg .month-tip { margin-top: 3%; font-size: 0.75em; color: #fff; } header .title_img { text-align: left; } header .title_img img { width: 19.5%; } header h2 { position: absolute; top: 33%; font-size: 0.75em; } header h2 { left: 0; } header:before { position: absolute; bottom: 18%; left: 0; width: 100%; height: 18%; min-height: 18px; content: ""; } /* 主体内容样式 */ .main { width: 100%; height: 84%; } .main .aside-left { position: relative; width: 22%; height: 100%; } .main .aside-left h3 { padding-top: 6.5%; padding-left: 13%; } .main .aside-right { position: relative; width: 22%; height: 100%; } /* 左侧边框样式 start */ .left-top { position: relative; opacity: 0.9; background: rgba(18, 22, 64, 0.5); } .left-top:after { position: absolute; right: 0; bottom: -10.4%; width: 5%; min-width: 20px; height: 13%; min-height: 50px; background: url("../img/bor1_1_xie.png") no-repeat; background-size: 100% 100%; content: ""; } .left-top:before { position: absolute; top: 0; left: 0; width: 100%; height: 106%; background: url("../img/bor1_1.png") no-repeat; background-size: 100% 100%; z-index: -1; content: ""; } .left-bottom { position: absolute; bottom: 0; opacity: 0.9; } .left-bottom:before { content: ""; position: absolute; top: 5.6%; right: -2%; z-index: 100; width: 15%; height: 7%; background: url("../img/bor1_2_square.png") no-repeat; background-size: 100%; z-index: 10; } .left-bottom:after { position: absolute; top: 0; left: 0; width: 100%; height: 104%; background: url("../img/bor1_2.png") no-repeat; background-size: 100% 97%; z-index: -1; content: ""; } /* 左侧边框样式 end*/ /* 中间地图样式 start */ .middle-map { position: relative; width: 55%; height: 100%; margin: 0 0.5%; } .middle-map h3 { height: 9%; } .middle-map .map-wrap { position: relative; opacity: 0.9; height: 100%; border-top: 4px solid #121e52; border-bottom: 4px solid #10144b; background: rgba(18, 22, 64, 0.5); background-size: 100% 100%; /* 数字展示牌 start */ /* 数字展示牌 end */ } .middle-map .map-wrap h3 { position: absolute; top: 4%; left: 50%; width: 100%; padding: 0 3%; transform: translate(-50%, 0); } .middle-map .map-wrap h3 dl { width: 20%; padding: 0.4% 0.2% 0 0.4%; border-left: 2px solid #00bbec; } .middle-map .map-wrap h3 dl dt { font-size: 0.78125em; color: #00bbec; margin-bottom: 5%; } .middle-map .map-wrap h3 dl dd { font-family: DigifaceWide; font-size: 1.25em; color: #fff; } .middle-map .map-wrap .title-map { position: absolute; left: 50%; top: 20%; transform: translate(-50%, 0); font-size: 0.5625em; } .middle-map .map-wrap .unit-wan:after, .middle-map .map-wrap .unit-wanyuan:after, .middle-map .map-wrap .unit-number:after, .middle-map .map-wrap .unit-pc:after, .middle-map .map-wrap .unit-type:after { display: inline-block; margin-left: 4%; font-size: 12px; color: #fff; } .middle-map .map-wrap .unit-wan:after { content: "万"; } .middle-map .map-wrap .unit-wanyuan:after { content: "万元"; } .middle-map .map-wrap .unit-number:after { content: "条"; } .middle-map .map-wrap .unit-type:after { content: "种"; } .middle-map .map-wrap .unit-pc:after { content: "批次"; } .middle-map .map-wrap #map { height: 100%; } /* 中间地图样式 end */ /* 右侧边框样式 start */ .right-top { position: relative; background: url("../img/bg1_1.png") no-repeat top; } .right-top .con { height: 42%; margin: 0 5%; font-size: 0.4375em; font-size: 0.4375em; background: #081d5d; } /* 右侧边框样式 end */ /* 公共部分样式 end*/ /* 引入常用样式 */ /* 清浮动模块 */ .fl { float: left; } .fr { float: right; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /** * [px转百分比] * @param {[number]} $size [变量值] * @param {[number]} $base [基准值] * @return {[number]} [返回em] */ /** * [px转百分比] * @param {[number]} $size [自身宽度的大小] * @param {[number]} $scale [包裹盒子的大小] * @return {[number]} [返回百分比数值] */ /* 字体引入 */ @font-face { font-family: Rubik; src: url("../fonts/Rubik-Light.ttf"); src: url("../fonts/rubik-regular-webfont.ttf"); src: url("../fonts/Rubik-Medium.ttf"); } @font-face { font-family: DigifaceWide; src: url("../fonts/digifaw.ttf"); } /* 初始化 start*/ * { box-sizing: border-box; } b { font-weight: normal; } /* 声明字体变量 */ html, body { width: 100%; height: 100%; color: #fff; } @media screen and (max-width: 3850px) { html, body { font-size: 64px; } } @media screen and (max-width: 1930px) { html, body { font-size: 32px; } } ul, li, dl, dt, dd { padding: 0; margin: 0; list-style: none; } h1, h2, h3, h4, div { padding: 0; margin: 0; font-weight: normal; } h3 { font-size: 0.5625em; color: #fff; } p { margin: 0; padding: 0; } /* 初始化 end */ /* 公共部分样式 start*/ body { position: relative; padding: 0; margin: 0; font-family: MicrosoftYaHei; overflow: hidden; } body:before { position: absolute; top: 7.6%; right: 0; width: 5.2%; height: 12%; background: url(../img/circle.png) no-repeat; background-size: 100%; content: ""; } /* 最外层盒子样式 */ .root-wrap { height: 100%; padding: 0 1.5%; background: url("../img/bg.png") no-repeat center top; background-size: 100% 100%; } /* 头部样式 */ header { position: relative; width: 100%; height: 10%; min-height: 90px; text-align: center; padding-top: 1%; margin-bottom: 1%; } header > img { position: absolute; top: 10%; left: 50%; transform: translate(-50%, 0); } header .gifImg { width: 100%; height: 50%; position: absolute; top: 40%; min-height: 50px; overflow: hidden; text-align: center; } header .gifImg:after { content: ""; top: 40%; left: 50%; transform: translate(-50%, 20%); display: block; position: absolute; width: 36.5%; min-width: 700px; height: 100%; background: url(../img/header.gif) no-repeat center center; background-size: 100%; } header .gifImg .month-tip { margin-top: 3%; font-size: 0.75em; color: #fff; } header .title_img { text-align: left; } header .title_img img { width: 19.5%; } header h2 { position: absolute; top: 33%; font-size: 0.75em; } header h2 { left: 0; } header:before { position: absolute; bottom: 18%; left: 0; width: 100%; height: 18%; min-height: 18px; content: ""; } /* 主体内容样式 */ .main { width: 100%; height: 84%; } .main .aside-left { position: relative; width: 22%; height: 100%; } .main .aside-left h3 { padding-top: 6.5%; padding-left: 13%; } .main .aside-right { position: relative; width: 22%; height: 100%; } /* 左侧边框样式 start */ .left-top { position: relative; opacity: 0.9; background: rgba(18, 22, 64, 0.5); } .left-top:after { position: absolute; right: 0; bottom: -10.4%; width: 5%; min-width: 20px; height: 13%; min-height: 50px; background: url("../img/bor1_1_xie.png") no-repeat; background-size: 100% 100%; content: ""; } .left-top:before { position: absolute; top: 0; left: 0; width: 100%; height: 106%; background: url("../img/bor1_1.png") no-repeat; background-size: 100% 100%; z-index: -1; content: ""; } .left-bottom { position: absolute; bottom: 0; opacity: 0.9; } .left-bottom:before { content: ""; position: absolute; top: 5.6%; right: -2%; z-index: 100; width: 15%; height: 7%; background: url("../img/bor1_2_square.png") no-repeat; background-size: 100%; z-index: 10; } .left-bottom:after { position: absolute; top: 0; left: 0; width: 100%; height: 104%; background: url("../img/bor1_2.png") no-repeat; background-size: 100% 97%; z-index: -1; content: ""; } /* 左侧边框样式 end*/ /* 中间地图样式 start */ .middle-map { position: relative; width: 55%; height: 100%; margin: 0 0.5%; } .middle-map h3 { height: 9%; } .middle-map .map-wrap { position: relative; opacity: 0.9; height: 100%; border-top: 4px solid #121e52; border-bottom: 4px solid #10144b; background: rgba(18, 22, 64, 0.5); background-size: 100% 100%; /* 数字展示牌 start */ /* 数字展示牌 end */ } .middle-map .map-wrap h3 { position: absolute; top: 4%; left: 50%; width: 100%; padding: 0 3%; transform: translate(-50%, 0); } .middle-map .map-wrap h3 dl { width: 20%; padding: 0.4% 0.2% 0 0.4%; border-left: 2px solid #00bbec; } .middle-map .map-wrap h3 dl dt { font-size: 0.78125em; color: #00bbec; margin-bottom: 5%; } .middle-map .map-wrap h3 dl dd { font-family: DigifaceWide; font-size: 1.25em; color: #fff; } .middle-map .map-wrap .title-map { position: absolute; left: 50%; top: 20%; transform: translate(-50%, 0); font-size: 0.5625em; } .middle-map .map-wrap .unit-wan:after, .middle-map .map-wrap .unit-wanyuan:after, .middle-map .map-wrap .unit-number:after, .middle-map .map-wrap .unit-pc:after, .middle-map .map-wrap .unit-type:after { display: inline-block; margin-left: 4%; font-size: 12px; color: #fff; } .middle-map .map-wrap .unit-wan:after { content: "万"; } .middle-map .map-wrap .unit-wanyuan:after { content: "万元"; } .middle-map .map-wrap .unit-number:after { content: "条"; } .middle-map .map-wrap .unit-type:after { content: "种"; } .middle-map .map-wrap .unit-pc:after { content: "批次"; } .middle-map .map-wrap #map { height: 100%; } /* 中间地图样式 end */ /* 右侧边框样式 start */ .right-top { position: relative; background: url("../img/bg1_1.png") no-repeat top; } .right-top .con { height: 42%; margin: 0 5%; font-size: 0.4375em; font-size: 0.4375em; background: #081d5d; } /* 右侧边框样式 end */ /* 公共部分样式 end*/ .nav { position: fixed; right: 0; z-index: 20000; width: 30%; height: 10%; font-size: 0.4375em; } .nav ul { list-style: none; min-width: 440px; width: 100%; } .nav ul a { display: block; text-decoration: none; width: 100%; height: 100%; text-align: center; line-height: 4.5; color: white; /* background-color: #2f3e45; */ } .drop-down { width: 100%; height: 100%; } .drop-down-content li { display: inline-block; float: left; width: 20%; min-width: 82px; height: 100%; } .drop-down { /*position: relative;*/ width: 100%; } .drop-down-content { padding: 0; display: none; position: absolute; top: 37%; right: 0; /*position: absolute;*/ } h3 { font-size: 0.5625em; clear: both; } .drop-down-content li:hover a { color: bisque; } .nav .drop-down:hover .drop-down-content { display: block; } /** * [css3过渡动画] * @param {[string]} $el [eg:'.pressRotate'] */ @media screen and (max-width: 1930px) { .second-screen header > img { top: 30%; width: 30%; } } .second-screen .left-top { height: 49%; } .second-screen .left-bottom { height: 49%; } /* 左侧样式 */ .aside-left .left-bottom { width: 100%; } .aside-left .left-bottom h3 { height: 20%; } .aside-left .left-bottom .con { position: relative; height: 75%; font-size: 0.375em; color: #07bffb; overflow: hidden; } .aside-left .left-bottom .con ul { position: absolute; top: 0; width: 100%; height: 100%; } .aside-left .left-bottom .con li { height: 14%; padding-left: 3%; } .aside-left .left-bottom .con li:nth-of-type(1) .bar-in { width: 100%; } .aside-left .left-bottom .con li:nth-of-type(2) .bar-in { width: 30%; } .aside-left .left-bottom .con li:nth-of-type(3) .bar-in { width: 10%; } .aside-left .left-bottom .con li:nth-of-type(4) .bar-in { width: 9%; } .aside-left .left-bottom .con li:nth-of-type(5) .bar-in { width: 8%; } .aside-left .left-bottom .con li:nth-of-type(6) .bar-in { width: 6%; } .aside-left .left-bottom .con li:nth-of-type(7) .bar-in { width: 3%; } .aside-left .left-bottom .con span { display: inline-block; height: 100%; } @media screen and (max-width: 3850px) { .aside-left .left-bottom .con .num { width: 30px; } } @media screen and (max-width: 1930px) { .aside-left .left-bottom .con .num { width: 15px; } } .aside-left .left-bottom .con .city-name { display: inline-block; position: relative; height: 100%; } @media screen and (max-width: 3850px) { .aside-left .left-bottom .con .city-name { width: calc(100% - 200px); } } @media screen and (max-width: 1930px) { .aside-left .left-bottom .con .city-name { width: calc(100% - 100px); } } .aside-left .left-bottom .con .city-name .name-in { display: block; width: 100%; height: 1.8em; } .aside-left .left-bottom .con .city-name .bar { display: block; position: relative; width: 100%; height: 13%; background: #121640; } .aside-left .left-bottom .con .city-name .bar .bar-in { display: inline-block; position: absolute; left: 0; height: 100%; background: linear-gradient(to right, #2690cf, #00fecc); } .aside-left .left-bottom .con .rank-value { margin-left: 4%; font-size: 1em; } @media screen and (max-width: 3850px) { .aside-left .left-bottom .con .rank-value { width: 90px; } } @media screen and (max-width: 1930px) { .aside-left .left-bottom .con .rank-value { width: 60px; } } /* 地图部分样式 */ .middle-map .map-wrap h3 dl { width: 16.6%; } /* 右侧样式 */ .aside-right { position: relative; /* 舆情 start */ /* 舆情 end */ /* 物流 start */ /* 物流 end */ /* 图书馆馆藏 start */ /* 图书馆馆藏 end */ } .aside-right:after { position: absolute; top: 0; width: 100%; height: 100%; background: url("../img/bor_1_3_1.png") no-repeat; background-size: 100% 100%; content: ""; } .aside-right h3 { padding-top: 6%; margin-left: 5%; font-size: 0.5625em; } .aside-right .public-opinion { width: 100%; height: 67%; margin-bottom: 2.5%; } .aside-right .public-opinion h3 { height: 13%; } .aside-right .public-opinion .con { height: 84%; padding: 2% 5% 3%; } .aside-right .public-opinion .con ul { height: 19%; margin-bottom: 2%; margin-top: 4%; overflow: hidden; } .aside-right .public-opinion .con li { display: none; height: 100%; } .aside-right .public-opinion .con li .tit { height: 40%; margin-bottom: 3%; font-size: 0.625em; color: #00bbec; } .aside-right .public-opinion .con li .tit span.fl { width: 55%; } .aside-right .public-opinion .con li .tit span.fr { width: 45%; } .aside-right .public-opinion .con li .tit .user-name { font-size: 0.84375em; } .aside-right .public-opinion .con li .tit .time-show { display: block; color: rgba(0, 187, 236, 0.5); } .aside-right .public-opinion .con li .tit .icon:before { display: inline-block; position: relative; top: 0.2em; width: 1em; height: 1em; margin-right: 0.2em; content: ""; } .aside-right .public-opinion .con li .tit .comments:before { background: url("../img/icon-comments.png") no-repeat; background-size: 100%; } .aside-right .public-opinion .con li .tit .give-like { margin-left: 10%; } .aside-right .public-opinion .con li .tit .give-like:before { background: url("../img/icon-hreat.png") no-repeat; background-size: 100%; } .aside-right .public-opinion .con li p { display: -webkit-box; width: 100%; font-size: 0.75em; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .aside-right .public-opinion .con .active { display: block; } .aside-right .logistics { position: relative; width: 100%; height: 32%; margin-bottom: 2.5%; background: url("../img/bg1_4.png") no-repeat; background-size: 100% 100%; } .aside-right .logistics:before { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/bor1_4.png") no-repeat; background-size: 100% 100%; content: ""; } .aside-right .logistics h3 { height: 22%; } .aside-right .logistics .con { height: 70%; margin: 0 5%; font-size: 0.3125em; } .aside-right .logistics .con .con-in { display: none; height: 100%; } .aside-right .logistics .con .active.con-in { display: block; } .aside-right .logistics .con .states { height: 25%; color: #0a50af; } .aside-right .logistics .con .states li { width: 23.4%; height: 100%; } .aside-right .logistics .con .states li:nth-of-type(1) { width: 6.4%; } .aside-right .logistics .con .states .icon-circle { display: inline-block; position: relative; width: 26.6%; height: 100%; } .aside-right .logistics .con .states .icon-circle:before { display: block; position: relative; width: 100%; height: 60%; text-align: center; line-height: 1.8; color: #07bffb; background: url("../img/bg-circle.png") no-repeat; background-size: 100%; } .aside-right .logistics .con .states .icon-circle b { position: absolute; width: 200%; } .aside-right .logistics .con .states .circle1 { width: 100%; } .aside-right .logistics .con .states .circle1:before { content: "1"; } .aside-right .logistics .con .states .circle2:before { content: "2"; } .aside-right .logistics .con .states .circle3:before { content: "3"; } .aside-right .logistics .con .states .circle4:before { content: "4"; } .aside-right .logistics .con .states .circle5:before { content: "5"; } .aside-right .logistics .con .states .finished:before { background: url("../img/icon-finished.png") no-repeat; background-size: 100%; content: ""; } .aside-right .logistics .con .states .line { display: block; width: 63.4%; height: 50%; margin: 0 5%; background: url("../img/line-point.png") repeat-x center; background-size: 100%; } .aside-right .logistics .con .progress { height: 70%; margin-top: 5%; color: rgba(7, 191, 251, 0.5); overflow: hidden; } .aside-right .logistics .con .progress .new-height { color: #0a50af; } .aside-right .logistics .con .progress li { margin-bottom: 3%; } @media screen and (max-width: 3850px) { .aside-right .logistics .con .progress li .pro-time { width: 120px; margin-right: 20px; } } @media screen and (max-width: 1930px) { .aside-right .logistics .con .progress li .pro-time { width: 70px; margin-right: 10px; } } @media screen and (max-width: 3850px) { .aside-right .logistics .con .progress li .pro-con { width: calc(100% - 140px); } } @media screen and (max-width: 1930px) { .aside-right .logistics .con .progress li .pro-con { width: calc(100% - 80px); } } .aside-right .book-collection { position: absolute; bottom: 0; width: 100%; height: 44%; background: url("../img/bg1_4.png") no-repeat; background-size: 100% 100%; } .aside-right .book-collection:before { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/bor2_3.png") no-repeat; background-size: 100% 100%; content: ""; } .aside-right .book-collection h3 { height: 15%; padding-top: 8%; margin-left: 10%; } .aside-right .book-collection .ranking { width: 10%; height: 100%; padding-left: 4%; } .aside-right .book-collection .name { width: 48%; padding-right: 2%; } .aside-right .book-collection .collection { width: 20%; } .aside-right .book-collection .borrowing { width: 20%; } .aside-right .book-collection .tit { height: 6%; margin: 4% 0 3% 0; font-size: 0.4375em; color: #2edbff; } .aside-right .book-collection .con { height: 70%; font-size: 0.4375em; overflow: hidden; } .aside-right .book-collection .con li { height: 12.5%; border-bottom: 1px solid rgba(19, 151, 255, 0.1); } /* 馆藏动效 */ .briRotate { animation: mymove 0.5s ease-in; } @keyframes mymove { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } }/*# sourceMappingURL=second.css.map */