386daf20e0dbc39003a9d5cb7e8099cbba0b59c1.svn-base 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. ul{list-style: none;padding: 0;margin: 0;}
  2. body,html{height: 100%;}
  3. h3{font-size: 20px;}
  4. .mui-content{height: 100%;background: #f10e50;}
  5. .loading-bg{width: 100%;min-width:100%;height: 100%;min-height:100%; background-color:#F0F0F0;position: fixed;left: 0;top: 0;z-index: 999;}
  6. .loading-bg .mui-loading{margin-top: 50%;text-align: center;color: #aaa;}
  7. .container{height: 100%;position: relative;width: 100%;overflow: hidden;}
  8. .left-box{position: absolute;right:0;top: 0;width:30%;height: 100%;background: url(../images/shadown.png) top left no-repeat #e7004c; background-size:auto 100%;-webkit-transition: width .6s;overflow: hidden;}
  9. .right-box{position: absolute;left: 41%;top: 0; width: 30%;height: 100%;background: #e7004c;-webkit-transition: width .6s;overflow: hidden;}
  10. .main-box{position: absolute;left: 0;top: 0; height: 100%;width: 50%;background: url(../images/left-bg.png) top left no-repeat; background-size: 100% 100%;}
  11. .iphone_btn{height: 50px;background:url(../images/iphone_btn.png) center center / auto 60% no-repeat;margin: 10px 0;}
  12. .iphone_btn:active{background: url(../images/iphone_btn_on.png) center center / auto 60% no-repeat;margin: 10px 0;}
  13. .android_btn{height: 50px;background:url(../images/android_btn.png) center center / auto 60% no-repeat;margin: 10px 0;}
  14. .android_btn:active{background:url(../images/android_btn_on.png) center center / auto 60% no-repeat;margin: 10px 0;}
  15. .mui-backdrop {
  16. position: fixed;
  17. z-index: 998;
  18. top: 0;
  19. right: 0;
  20. bottom: 0;
  21. left: 0;
  22. background: url(../images/share.png) top right no-repeat rgba(0, 0, 0, .4);
  23. background-size: 60%;
  24. }
  25. .lock-wrap {
  26. position: absolute;
  27. left: 0;
  28. width: 100%;
  29. height: 100%;
  30. background:#e7004c;
  31. z-index: 10;
  32. display: none
  33. }
  34. .lock-wrap .lock {
  35. position: absolute;
  36. left: 50%;
  37. top: 50%;
  38. width: 400px;
  39. height: 30px;
  40. margin: -15px 0 0 -200px;
  41. text-align: center;
  42. color: #fff;
  43. font-size: 24px;
  44. }
  45. @media screen and (orientation:portrait) {
  46. .lock-wrap {
  47. display: none
  48. }
  49. }
  50. @media screen and (orientation:landscape) {
  51. .mui-content{
  52. display: none
  53. }
  54. .lock-wrap {
  55. display: block
  56. }
  57. }
  58. @media (device-height:480px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){
  59. }
  60. @media (device-height:568px) and (min-width:320px) and (-webkit-min-device-pixel-ratio:2){
  61. }