1229 lines
22 KiB
CSS
1229 lines
22 KiB
CSS
@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 */ |