login.css 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. *,
  2. *:before,
  3. *:after {
  4. padding: 0;
  5. margin: 0;
  6. box-sizing: border-box;
  7. }
  8. html,
  9. body {
  10. height: 100%;
  11. font-size: 14px;
  12. background-color: #ecffff;
  13. font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
  14. 'Hiragino Sans GB', Arial, sans-serif;
  15. }
  16. .main {
  17. width: 100%;
  18. height: 100%;
  19. background: url('../images/back.png') center center no-repeat;
  20. background-size: 100% 100%;
  21. display: flex;
  22. justify-content: center;
  23. align-items: center;
  24. flex-direction: column;
  25. }
  26. .login {
  27. width: 700px;
  28. height: 450px;
  29. display: grid;
  30. grid-template-rows: repeat(3, 1fr);
  31. align-items: center;
  32. background: url('../images/register.png') center center no-repeat;
  33. background-size: 100% 100%;
  34. }
  35. .title {
  36. background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
  37. -webkit-background-clip: text;
  38. -webkit-text-fill-color: transparent;
  39. font-size: 36px;
  40. font-weight: bold;
  41. margin-bottom: 30px;
  42. }
  43. .loginButton {
  44. width: 330px;
  45. height: 50px;
  46. line-height: 50px;
  47. margin: 0 auto;
  48. background: url('../images/orthogon.png') center center no-repeat;
  49. background-size: 100% 100%;
  50. text-align: center;
  51. color: #fff;
  52. }
  53. .login>div:nth-child(1){
  54. height: 50px;
  55. line-height: 50px;
  56. text-align: center;
  57. color: #Fff;
  58. font-size: 24px;
  59. }
  60. .card{
  61. display: flex;
  62. justify-content: center;
  63. flex-direction: column;
  64. align-items: center;
  65. }
  66. .card img{
  67. width: 21px;
  68. height: 23px;
  69. margin-right: 10px;
  70. }
  71. .card div{
  72. width: 70%;
  73. display: flex;
  74. justify-content: center;
  75. align-items: center;
  76. background-color: #263E5F;
  77. padding: 3px 0;
  78. }
  79. .el-input__inner{
  80. background: #263E5F;
  81. border: 0;
  82. color: #fff;
  83. }
  84. /* top-[3px] */
  85. /* z-[100] */
  86. /* 显示隐藏未脱离文档流 */
  87. .visible {
  88. visibility: visible;
  89. }
  90. .invisible {
  91. visibility: hidden;
  92. }
  93. /* 内边距 */
  94. .p-0 {
  95. padding: 0px;
  96. }
  97. .px-0 {
  98. padding-left: 0px;
  99. padding-right: 0px;
  100. }
  101. .py-0 {
  102. padding-top: 0px;
  103. padding-bottom: 0px;
  104. }
  105. .pt-0 {
  106. padding-top: 0px;
  107. }
  108. .pr-0 {
  109. padding-right: 0px;
  110. }
  111. .pb-0 {
  112. padding-bottom: 0px;
  113. }
  114. .pl-0 {
  115. padding-left: 0px;
  116. }
  117. /* p-[5px] */
  118. /* 外边距 */
  119. .m-0 {
  120. margin: 0px;
  121. }
  122. .mx-0 {
  123. margin-left: 0px;
  124. margin-right: 0px;
  125. }
  126. .my-0 {
  127. margin-top: 0px;
  128. margin-bottom: 0px;
  129. }
  130. .mt-0 {
  131. margin-top: 0px;
  132. }
  133. .mr-0 {
  134. margin-right: 0px;
  135. }
  136. .mb-0 {
  137. margin-bottom: 0px;
  138. }
  139. .ml-0 {
  140. margin-left: 0px;
  141. }
  142. /* m-[5px] */
  143. /* 宽度 */
  144. .w-full {
  145. width: 100%;
  146. }
  147. .w-screen {
  148. width: 100vw;
  149. }
  150. /* w-[32rem] */
  151. /* min-w-[50%] */
  152. /* max-w-[50%] */
  153. /* 高度 */
  154. .h-full {
  155. height: 100%;
  156. }
  157. .h-screen {
  158. height: 100vh;
  159. }
  160. /* h-[32rem] */
  161. /* min-h-[50%] */
  162. /* max-h-[32rem] */
  163. /* 字体 */
  164. .text-xs {
  165. font-size: 0.75rem; /* 12px */
  166. line-height: 1rem; /* 16px */
  167. }
  168. .text-sm {
  169. font-size: 0.875rem; /* 14px */
  170. line-height: 1.25rem; /* 20px */
  171. }
  172. .text-base {
  173. font-size: 1rem; /* 16px */
  174. line-height: 1.5rem; /* 24px */
  175. }
  176. .text-lg {
  177. font-size: 1.125rem; /* 18px */
  178. line-height: 1.75rem; /* 28px */
  179. }
  180. .text-xl {
  181. font-size: 1.25rem; /* 20px */
  182. line-height: 1.75rem; /* 28px */
  183. }
  184. .text-2xl {
  185. font-size: 1.5rem; /* 24px */
  186. line-height: 2rem; /* 32px */
  187. }
  188. .text-3xl {
  189. font-size: 1.875rem; /* 30px */
  190. line-height: 2.25rem; /* 36px */
  191. }
  192. .text-4xl {
  193. font-size: 2.25rem; /* 36px */
  194. line-height: 2.5rem; /* 40px */
  195. }
  196. .text-5xl {
  197. font-size: 3rem; /* 48px */
  198. line-height: 1;
  199. }
  200. .text-6xl {
  201. font-size: 3.75rem; /* 60px */
  202. line-height: 1;
  203. }
  204. .text-7xl {
  205. font-size: 4.5rem; /* 72px */
  206. line-height: 1;
  207. }
  208. .text-8xl {
  209. font-size: 6rem; /* 96px */
  210. line-height: 1;
  211. }
  212. .text-9xl {
  213. font-size: 8rem; /* 128px */
  214. line-height: 1;
  215. }
  216. /* text-[14px] */
  217. /* 字体粗细font-weight */
  218. /* font-[1100] */
  219. /* https://tailwindcss.com/docs/font-weight */
  220. /* 字体间距letter-spacing */
  221. /* tracking-[.25em] */
  222. /* 行高line-height */
  223. /* leading-[3rem] */
  224. /* 无列表样式 */
  225. .list-none {
  226. list-style-type: none;
  227. }
  228. /* 小圆点 */
  229. .list-disc {
  230. list-style-type: disc;
  231. }
  232. /* 数字列表 */
  233. .list-decimal {
  234. list-style-type: decimal;
  235. }
  236. .text-left {
  237. text-align: left;
  238. }
  239. .text-center {
  240. text-align: center;
  241. }
  242. .text-right {
  243. text-align: right;
  244. }
  245. /* 所有文本头尾对齐 */
  246. .text-justify {
  247. text-align: justify;
  248. }
  249. /* 文本颜色 */
  250. /* text-[#50d71e] */
  251. /* https://tailwindcss.com/docs/text-color */
  252. /* 下划线 */
  253. .underline {
  254. text-decoration-line: underline;
  255. }
  256. /* 上划线 */
  257. .overline {
  258. text-decoration-line: overline;
  259. }
  260. /* 中划线 */
  261. .line-through {
  262. text-decoration-line: line-through;
  263. }
  264. /* 无划线 */
  265. .no-underline {
  266. text-decoration-line: none;
  267. }
  268. /* 全小写 */
  269. .lowercase {
  270. text-transform: lowercase;
  271. }
  272. /* 全大写 */
  273. .uppercase {
  274. text-transform: uppercase;
  275. }
  276. /* 首字母大写 */
  277. .capitalize {
  278. text-transform: capitalize;
  279. }