login.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. html {
  2. width: 100%;
  3. height: 100%;
  4. }
  5. html body {
  6. width: 100%;
  7. height: 100%;
  8. }
  9. html body .wrapper {
  10. width: 100%;
  11. height: 100%;
  12. background: url("../img/login.png") no-repeat center;
  13. background-size: cover;
  14. position: relative;
  15. }
  16. html body .wrapper .inner {
  17. width: 450px;
  18. position: absolute;
  19. left: 50%;
  20. top: 25%;
  21. margin-left: -250px;
  22. background-color: #ffffff;
  23. border-radius: 12px;
  24. box-shadow: 0 0 10px 0;
  25. }
  26. html body .wrapper .inner .logo {
  27. text-align: center;
  28. padding: 15px;
  29. box-sizing: border-box;
  30. }
  31. html body .wrapper .inner .logo img {
  32. max-width: 100%;
  33. }
  34. html body .wrapper .inner .form-box {
  35. width: 100%;
  36. padding: 10px 20px 35px;
  37. box-sizing: border-box;
  38. }
  39. html body .wrapper .inner .form-box .form-item {
  40. width: 100%;
  41. margin-bottom: 15px;
  42. overflow: hidden;
  43. font-size: 16px;
  44. position: relative;
  45. }
  46. html body .wrapper .inner .form-box .form-item .iconfont {
  47. position: absolute;
  48. left: 7px;
  49. top: 8px;
  50. color: #666666;
  51. font-size: 20px;
  52. vertical-align: middle;
  53. }
  54. html body .wrapper .inner .form-box .form-item .form-input {
  55. display: block;
  56. width: 100%;
  57. line-height: 36px;
  58. border: 1px solid #dddddd;
  59. border-radius: 4px;
  60. padding: 0 10px 0 30px;
  61. box-sizing: border-box;
  62. }
  63. html body .wrapper .inner .form-box .form-item .form-input:focus {
  64. border-color: #bf3033;
  65. }
  66. html body .wrapper .inner .form-box .code-item .form-input {
  67. display: inline-block;
  68. width: 70%;
  69. }
  70. html body .wrapper .inner .form-box .code-item .img-code {
  71. position: absolute;
  72. right: 25px;
  73. max-height: 100%;
  74. width: 80px;
  75. height: 36px;
  76. }
  77. html body .wrapper .inner .form-box .form-button {
  78. width: 100%;
  79. }
  80. html body .wrapper .inner .form-box .form-button > button {
  81. display: block;
  82. width: 100%;
  83. outline: none;
  84. background-image: linear-gradient(90deg, #e45b5b 0, #bf3033 99%), linear-gradient(#139cfa, #139cfa);
  85. color: #ffffff;
  86. font-size: 20px;
  87. text-align: center;
  88. border: none;
  89. border-radius: 4px;
  90. line-height: 40px;
  91. cursor: pointer;
  92. }
  93. html body .wrapper .inner .form-box .form-button > button:hover {
  94. background-image: linear-gradient(90deg, #bf3033 0, #bf3033 99%), linear-gradient(#139cfa, #139cfa);
  95. }