256 lines
4.1 KiB
CSS
256 lines
4.1 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;
|
|
font-family: DigifaceWide;
|
|
src: url("../fonts/Rubik-Light.ttf");
|
|
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 {
|
|
width: 19.5%;
|
|
}
|
|
header h2,
|
|
header .month-tip {
|
|
position: absolute;
|
|
top: 33%;
|
|
font-size: 0.75em;
|
|
}
|
|
header h2 {
|
|
left: 0;
|
|
}
|
|
header .month-tip {
|
|
right: 0;
|
|
}
|
|
header:before {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 18%;
|
|
min-height: 18px;
|
|
background: url("../img/header-line.png") no-repeat;
|
|
background-size: 100%;
|
|
content: "";
|
|
}
|
|
header:after {
|
|
display: block;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
width: 36.5%;
|
|
min-width: 700px;
|
|
height: 70%;
|
|
min-height: 70px;
|
|
background: url(../img/header.gif) no-repeat center center;
|
|
background-size: 100%;
|
|
transform: translate(-50%, 20%);
|
|
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: 7%;
|
|
padding-bottom: 3%;
|
|
}
|
|
.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-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
opacity: 0.9;
|
|
}
|
|
.left-bottom:before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 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%;
|
|
content: "";
|
|
}
|
|
|
|
/* 左侧边框样式 end*/
|
|
/* 中间地图样式 start */
|
|
/* 中间地图样式 end */
|
|
/* 右侧边框样式 start */
|
|
.right-top {
|
|
position: relative;
|
|
background: url("../img/bg1_1.png") no-repeat top;
|
|
}
|
|
.right-top:after {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url("../img/bor1_3.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
content: "";
|
|
}
|
|
.right-top .con {
|
|
height: 42%;
|
|
margin: 0 5%;
|
|
font-size: 0.4375em;
|
|
font-size: 0.4375em;
|
|
background: #081d5d;
|
|
}
|
|
|
|
/* 右侧边框样式 end */
|
|
/* 公共部分样式 end*//*# sourceMappingURL=baseFour.css.map */ |