login.css 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. /*
  2. *这里的值严格按照UI设计图标注值来进行设置
  3. */
  4. /*
  5. *颜色
  6. */
  7. /*
  8. *页面的边距
  9. */
  10. /*
  11. *字体
  12. */
  13. /*
  14. *头像
  15. */
  16. /*
  17. * 按钮
  18. */
  19. /*
  20. *对常见的多行样式进行了方法封装,方便调用,加快开发效率
  21. */
  22. html,
  23. body {
  24. min-height: 100vh;
  25. width: 100vw;
  26. background-color: #eee;
  27. margin: 0;
  28. display: flex;
  29. font-weight: initial !important;
  30. font-size: 14px !important;
  31. color: #333 !important;
  32. }
  33. html *,
  34. body * {
  35. text-decoration: none !important;
  36. font-family: Verdana, Arial, Helvetica, sans-serif;
  37. box-sizing: border-box;
  38. }
  39. .ms-ellipsis {
  40. overflow: hidden;
  41. text-overflow: ellipsis;
  42. white-space: nowrap;
  43. display: block;
  44. }
  45. .ms-align-center {
  46. display: flex;
  47. align-items: center;
  48. }
  49. input::-webkit-input-placeholder,
  50. textarea::-webkit-input-placeholder {
  51. font-weight: initial;
  52. font-size: 12px;
  53. color: #aaa;
  54. resize: none;
  55. }
  56. *::-webkit-scrollbar {
  57. width: 8px;
  58. height: 8px;
  59. }
  60. /*定义滚动条轨道 内阴影+圆角*/
  61. *::-webkit-scrollbar-track {
  62. border-radius: 10px;
  63. /*滚动条的背景区域的圆角*/
  64. background-color: #eee;
  65. /*滚动条的背景颜色*/
  66. }
  67. /*定义滑块 内阴影+圆角*/
  68. *::-webkit-scrollbar-thumb {
  69. border-radius: 10px;
  70. /*滚动条的圆角*/
  71. background-color: #ddd;
  72. /*滚动条的背景颜色*/
  73. }
  74. .ms-container {
  75. margin: 12px;
  76. height: calc(100% - 24px);
  77. padding: 14px;
  78. background: #fff;
  79. }
  80. .ms-header {
  81. padding: 10px;
  82. margin: 0;
  83. border-bottom: 1px solid #ddd;
  84. background: #fff;
  85. height: 50px;
  86. }
  87. .ms-header button {
  88. height: 30px;
  89. }
  90. .ms-pagination {
  91. padding: 20px 0;
  92. text-align: right;
  93. }
  94. .ms-fr {
  95. float: right;
  96. }
  97. .ms-tr {
  98. text-align: right;
  99. }
  100. .ms-weixin-content {
  101. width: calc(100% - 140px);
  102. }
  103. .ms-weixin-dialog .el-dialog__header {
  104. height: 55px;
  105. box-sizing: border-box;
  106. padding: 10px 10px 25px 10px;
  107. border-bottom: 1px solid #ddd;
  108. }
  109. .ms-weixin-dialog .el-dialog__header .el-dialog__title {
  110. font-weight: bold;
  111. font-size: 14px;
  112. color: #333;
  113. }
  114. .ms-weixin-dialog .el-dialog__footer {
  115. border-top: 1px solid #ddd;
  116. padding: 15px !important;
  117. }
  118. .ms-hover {
  119. cursor: pointer;
  120. }
  121. .ms-hover:hover {
  122. color: #0099ff;
  123. background: #fff;
  124. border-color: #0099ff;
  125. }
  126. .login {
  127. width: 100vw;
  128. height: 100vh;
  129. }
  130. .login .ms-admin-login-container {
  131. height: 100%;
  132. background: url('../images/login-bg.jpg') center no-repeat;
  133. background-size: cover;
  134. }
  135. .login .ms-admin-login-container .ms-admin-login-main {
  136. display: flex;
  137. justify-content: center;
  138. align-items: center;
  139. }
  140. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp {
  141. display: flex;
  142. justify-content: center;
  143. align-items: center;
  144. width: 680px;
  145. height: 320px;
  146. }
  147. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp > img {
  148. flex: 1;
  149. display: inline-block;
  150. }
  151. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form {
  152. flex: 1;
  153. height: 320px;
  154. background: #fff;
  155. padding: 39px 54px;
  156. }
  157. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form h1 {
  158. line-height: 1;
  159. font-weight: initial;
  160. font-size: 12px;
  161. color: #999999;
  162. margin: 0 0 30px 0;
  163. }
  164. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form h1 span {
  165. font-weight: initial;
  166. font-size: 16px;
  167. color: #0099ff;
  168. }
  169. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item {
  170. margin-bottom: 12px;
  171. }
  172. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item > div {
  173. margin-left: 0 !important;
  174. }
  175. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item .el-form-item__content,
  176. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item .el-input,
  177. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item input {
  178. height: 34px !important;
  179. line-height: 34px !important;
  180. }
  181. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-code .el-form-item__content {
  182. display: flex;
  183. justify-content: space-between;
  184. }
  185. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-code .el-form-item__content .el-input__inner,
  186. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-code .el-form-item__content .el-input {
  187. width: 110px;
  188. }
  189. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-code .el-form-item__content > img {
  190. width: 66px;
  191. height: 34px;
  192. margin: 0 6px;
  193. }
  194. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-code .el-form-item__content p {
  195. display: flex;
  196. justify-content: space-between;
  197. line-height: 1;
  198. flex-direction: column;
  199. margin: 0;
  200. }
  201. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-code .el-form-item__content p span:nth-of-type(1) {
  202. font-weight: initial;
  203. font-size: 10px;
  204. color: #999999;
  205. }
  206. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-code .el-form-item__content p span:nth-of-type(2) {
  207. font-weight: initial;
  208. font-size: 10px;
  209. color: #0099ff;
  210. }
  211. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-checkout .el-form-item__content,
  212. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-checkout .el-input,
  213. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-form-item-checkout input {
  214. height: auto !important;
  215. line-height: 1px !important;
  216. }
  217. .login .ms-admin-login-container .ms-admin-login-main .ms-admin-login-warp .ms-admin-login-form .ms-admin-login-btn {
  218. width: 100%;
  219. height: 34px;
  220. line-height: 5px;
  221. }