/** * @author songcxa * @date 2018/8/18 * @Description: */ *{ margin: 0; padding: 0; } /*html{*/ /*!*因为100%=16px,1px=6.25%,所以10px=62.5%,这是的1rem=10px,所以12px=1.2rem。px与rem的转换通过10就可以得来*!*/ /*font-size:62.5%;*/ /*}*/ /*body{*/ /*!*为了兼容IE的低级版本还要写font-size:12px,别忘了要写在rem的前面*!*/ /*font-size:12px;font-size:1.2rem ;*/ /*}*/ /*1 html{font-size:62.5%;} */ /*因为100%=16px,1px=6.25%,所以10px=62.5%,*/ /*这是的1rem=10px,所以12px=1.2rem。px与rem的转换通过10就可以得来*!*/ /*!*2 body{font-size:12px;font-size:1.2rem ;}*!*/ /*!*为了兼容IE的低级版本还要写font-size:12px,别忘了要写在rem的前面*!*/ /*!*3 p{font-size:14px;font-size:1.4rem;}*!*/ html, body{ height: 100%;width: 99.99%; font-family: "Microsoft YaHei"; background-color: #052675; user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; -moz-user-select: none; } body{ background: url(../images/body/bg.jpg) no-repeat; background-size: 100% 100%; overflow: hidden; /*background-size:100% 100%;*/ /*默认颜色*/ color:#FFFFFF; } /* *自定义字体 */ @font-face { font-family: 'display-free'; src: url('display-free.woff') format('woff'), /* Modern Browsers */ url('display-free.ttf') format('truetype') /* Safari, Android, iOS */ } /* *卡片样式1 */ .theme-card { /*-webkit-box-shadow:inset 0 0 10px #295b7c;*/ /*-moz-box-shadow:inset 0 0 10px #295b7c;*/ /*box-shadow:inset 0 0 10px #295b7c;*/ position: relative; background: url(../images/com/cardBorder.svg) no-repeat; background-size: 100% 100%; } .theme-card > .title,.theme-card2> .title{ color: #FFFFFF; font-size: 14px; /*font-size:1.4rem ;*/ height: 30px; line-height:30px; width: 100%; text-align: left; background: url(../images/com/cardTitleBg.png) no-repeat; background-size: 100% 100%; position: relative; } .theme-card > .title >span,.theme-card2 > .title >span{ margin-left: 60px; position:relative; } .theme-card > .title >span:before,.theme-card2 > .title >span:before{ content: ''; background: url('../images/com/cardTitleSide.png') no-repeat; background-size: 100% 100%; position: absolute; width: 40px; height: 13px; top:3px; left: -47px; } .theme-card > .title >span:after,.theme-card2 > .title >span:after{ content: ''; background: url('../images/com/cardTitleSide.png') no-repeat; background-size: 100% 100%; position: absolute; width: 40px; height: 13px; top:3px; right:-47px; } .theme-card > .content,.theme-card2 > .content{ height: -webkit-calc(100% - 30px); height: -moz-calc(100% - 30px); height: calc(100% - 30px); position: relative; box-sizing: border-box; padding: 10px; } /* *卡片样式2 */ .theme-card2 { position: relative; } /* *卡片样式2 */ .theme-map { position: relative; border:1px solid #1679de; margin-left:-1px !important; } /*************************************************************************************************************************/ /* *工具类 */ /*弹性盒模型*/ .eleVerHorCenter-flex{ /*弹性盒模型*/ display:flex; /*主轴居中对齐*/ justify-content: center; /*侧轴居中对齐*/ align-items: center; } /*盒模型*/ .eleVerHorCenter-box{ display:-moz-box; display:-webkit-box; box-pack:center; box-orient:vertical; display: -webkit-box; -webkit-box-pack:center; -webkit-box-orient:vertical; -moz-box-pack: center; } /*表格模型*/ .eleVerHorCenter-table{ display: table; } .eleVerHorCenter-tableCell,.eleNumBg{ /*让元素渲染为表格单元格*/ display:table-cell; /*设置文本水平居中*/ text-align:center; /*设置文本垂直居中*/ vertical-align:middle; } /*数字描述*/ .eleText{ font-size: 14px; /*font-size:1.4rem ;*/ } /*数字距左侧距离*/ .eleMarginLeft{ margin-left: 15px; padding:5px; background: url(../images/com/numBorder.svg) no-repeat; background-size: 100% 100%; } /*数字背景*/ .eleNumBg{ background: url(../images/com/numBg.svg) no-repeat; background-size: 100% 100%; width: 20px; height: 30px; margin-left: 5px; font-size:22px; /*font-size:2.2rem ;*/ } /*div表格*/ .eleRotation{ -webkit-transform: rotate(360deg); animation: rotation 5s linear infinite; -moz-animation: rotation 5s linear infinite; -webkit-animation: rotation 5s linear infinite; -o-animation: rotation 5s linear infinite; } @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes rotate{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } /* *总计类[背景数字] */ .topBox,.bottomBox{ border:0px solid red; position: relative; } .topBox{ height: 30%;width: 100%; justify-content:left !important; } .bottomBox{ height: 70%; width: 100%; }