alert.less 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. body{
  2. background-image: none;background-color:transparent;
  3. }
  4. .alert_centent{
  5. width: 7.322917rem;height: 4.1875rem;background-image: url("../images/alert_bgi.png");background-size: 100% 100%;
  6. margin: 0 auto;
  7. }
  8. .alert_centent .alert_title{
  9. height: .3125rem;line-height: .416667rem;overflow: hidden;
  10. }
  11. .alert_centent .alert_title .left{
  12. float: left;font-size: .125rem;color: #b5e1fc;margin-left: .3125rem;
  13. }
  14. .alert_centent .alert_title .right{
  15. float: right;width: 2.838542rem;overflow: hidden;
  16. }
  17. .alert_centent .alert_title .right .alert_type{
  18. float: left;width: .875rem;
  19. height: .125rem;line-height: .125rem;
  20. background-color:transparent;
  21. border: solid 1px #009dfe;
  22. margin-top: .130208rem;overflow: hidden;border-radius: .015625rem;
  23. }
  24. .alert_centent .alert_title .right .btn-group{
  25. margin: 0;
  26. }
  27. .alert_centent .alert_title .right .btn-group .btn{
  28. height: .125rem;line-height: .125rem;font-size: .072917rem;padding: 0;width: .291667rem;background-color: transparent;
  29. border-color: #009dfe;color: #257fb7;
  30. }
  31. .alert_centent .alert_title .right .btn-group .btn.active{
  32. color: #fff;background-color: #009dfe;
  33. }
  34. .alert_centent .alert_title .right .alert_time{
  35. float: right;margin-right: .223958rem;color: #b5e1fc;font-size: .072917rem;
  36. }
  37. .alert_centent .alert_title .right .alert_time select{
  38. width: .677083rem;
  39. height: .135417rem;
  40. background-color: #051f33;
  41. border: solid 1px #009dfe;
  42. }
  43. .alert_centent .alert_people{
  44. padding-left: .260417rem;padding-right: .260417rem;
  45. }
  46. .alert_centent .alert_people>div{
  47. width: 1.677083rem;height: .239583rem;line-height: .239583rem;background-image: url("../images/people_bgi.png");background-size: 100% 100%;
  48. span{
  49. color: #b5e1fc;display: inline-block;
  50. &:nth-of-type(1){
  51. font-size: .104167rem;margin-left: .364583rem;
  52. }
  53. &:nth-of-type(2){
  54. font-size: .135417rem;margin-left: .130208rem;
  55. }
  56. &:nth-of-type(3){
  57. font-size: .083333rem;
  58. }
  59. }
  60. }
  61. .alert_chart{
  62. padding-left: .260417rem;padding-right: .260417rem;margin-top: .0625rem;
  63. .left{
  64. height: 2.848958rem;width: 2.15625rem;background-image: url("../images/quxian-bgi.png");background-size: 100% 100%;
  65. }
  66. .right{
  67. width: 4.583333rem;
  68. .top{
  69. &>div{
  70. width: 1.510417rem;height: 1.380208rem;background-image: url("../images/top_bgi.png");background-size: 100% 100%;
  71. }
  72. }
  73. .bottom{
  74. height: 1.380208rem;margin-top: .088542rem;background-image: url("../images/bottom_bgi.png");background-size: 100% 100%;
  75. position: relative;
  76. .btn-group{
  77. position: absolute;top: 0;right: .078125rem;z-index: 5;
  78. }
  79. }
  80. }
  81. }
  82. .alert_centent .alert_close{
  83. width: 50px;height: 50px;margin: 88px auto 0;display: block;
  84. }