123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- @charset "UTF-8";
- @import "base";
- @import "popup";
- body{
- background: url('./assets/bg_01.jpg') center top no-repeat;
- background-color: #0c0315;
- overflow: auto;
- }
- #app{
- height: 100%;
- -webkit-overflow-scrolling: touch;
- }
- .game-wrap{
- position: relative;
- padding-top: 58px;
- @media #{$phone} {
- padding-top: px2rem(88);
- }
- }
- .game-help-icon{
- display: inline-block;
- vertical-align: middle;
- background: url('assets/icon_question.png');
- width: px2rem(19);
- height: px2rem(19);
- background-size: 100%;
- cursor: pointer;
- }
- .game-question-icon{
- display: inline-block;
- vertical-align: middle;
- background: url('components/game/img/icon_q.png');
- width: px2rem(34);
- height: px2rem(34);
- background-size: 100%;
- cursor: pointer;
- }
- .game-gt-icon{
- display: inline-block;
- vertical-align: middle;
- background: url('assets/icon_b_gt.png') no-repeat;
- width: px2rem(26);
- height: px2rem(26);
- background-size: 100%;
- }
- .game-eos-icon{
- display: inline-block;
- vertical-align: middle;
- background: url('assets/icon_b_eos.png') no-repeat;
- width: px2rem(18);
- height: px2rem(27);
- background-size: 100%;
- }
- body{
- .el-message-box{
- background-color: #395497;
- border-color: #2b416e;
- border-radius: 15px;
- box-shadow: 0 0 5px rgba(#12223c, 0.75);
- }
- .el-message-box__title{
- color: #ffffff;
- }
- .el-message-box__content{
- color: #ffffff;
- }
- .el-message-box__headerbtn{
- .el-message-box__close{
- color: #ffffff;
- }
- }
- @media #{$phone} {
- .el-message-box{
- width: 80%;
- }
- }
- }
- // 弹窗样式
- .pub-modal{
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 1000;
- background-color: rgba($color: #000000, $alpha: .6);
- display: flex;
- justify-content: center;
- align-items: center;
- .modal{
- display: inline-block;
- vertical-align: middle;
- min-width: px2rem(484);
- background-color: #294a6e;
- border: 4px solid #b38bd2;
- border-radius: 14px;
- position: relative;
- z-index: 1000;
- padding: px2rem(16) px2rem(48);
- box-sizing: border-box;
- .title{
- text-align: center;
- font-size: px2rem(24);
- color: #ffffff;
- span{
- display: inline-block;
- border-bottom: 2px solid #ffffff;
- padding: px2rem(10) px2rem(4);
- }
- }
- .content{
- margin-top: px2rem(30);
- }
- }
- .close-icon{
- cursor: pointer;
- background: url('assets/modal-close-icon.png') center center no-repeat;
- background-size: 100%;
- width: px2rem(25);
- height: px2rem(25);
- position: absolute;
- top: px2rem(12);
- right: px2rem(12);
- }
- @media #{$phone} {
- .modal {
- width: 80%;
- padding: px2rem(30) px2rem(60);
- .title{
- font-size: px2rem(32);
- }
- }
- }
- }
- @import "moblie";
|