123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286 |
- *,
- *:before,
- *:after {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- }
- html,
- body {
- height: 100%;
- font-size: 14px;
- background-color: #ecffff;
- font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
- 'Hiragino Sans GB', Arial, sans-serif;
- }
- .main {
- width: 100%;
- height: 100%;
- background: url('../images/back.png') center center no-repeat;
- background-size: 100% 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
- .login {
- width: 700px;
- height: 450px;
- display: grid;
- grid-template-rows: repeat(3, 1fr);
- align-items: center;
- background: url('../images/register.png') center center no-repeat;
- background-size: 100% 100%;
- }
- .title {
- background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- font-size: 36px;
- font-weight: bold;
- margin-bottom: 30px;
- }
- .loginButton {
- width: 330px;
- height: 50px;
- line-height: 50px;
- margin: 0 auto;
- background: url('../images/orthogon.png') center center no-repeat;
- background-size: 100% 100%;
- text-align: center;
- color: #fff;
- }
- .login>div:nth-child(1){
- height: 50px;
- line-height: 50px;
- text-align: center;
- color: #Fff;
- font-size: 24px;
- }
- .card{
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
- }
- .card img{
- width: 21px;
- height: 23px;
- margin-right: 10px;
- }
- .card div{
- width: 70%;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: #263E5F;
- padding: 3px 0;
- }
- .el-input__inner{
- background: #263E5F;
- border: 0;
- color: #fff;
- }
- /* top-[3px] */
- /* z-[100] */
- /* 显示隐藏未脱离文档流 */
- .visible {
- visibility: visible;
- }
- .invisible {
- visibility: hidden;
- }
- /* 内边距 */
- .p-0 {
- padding: 0px;
- }
- .px-0 {
- padding-left: 0px;
- padding-right: 0px;
- }
- .py-0 {
- padding-top: 0px;
- padding-bottom: 0px;
- }
- .pt-0 {
- padding-top: 0px;
- }
- .pr-0 {
- padding-right: 0px;
- }
- .pb-0 {
- padding-bottom: 0px;
- }
- .pl-0 {
- padding-left: 0px;
- }
- /* p-[5px] */
- /* 外边距 */
- .m-0 {
- margin: 0px;
- }
- .mx-0 {
- margin-left: 0px;
- margin-right: 0px;
- }
- .my-0 {
- margin-top: 0px;
- margin-bottom: 0px;
- }
- .mt-0 {
- margin-top: 0px;
- }
- .mr-0 {
- margin-right: 0px;
- }
- .mb-0 {
- margin-bottom: 0px;
- }
- .ml-0 {
- margin-left: 0px;
- }
- /* m-[5px] */
- /* 宽度 */
- .w-full {
- width: 100%;
- }
- .w-screen {
- width: 100vw;
- }
- /* w-[32rem] */
- /* min-w-[50%] */
- /* max-w-[50%] */
- /* 高度 */
- .h-full {
- height: 100%;
- }
- .h-screen {
- height: 100vh;
- }
- /* h-[32rem] */
- /* min-h-[50%] */
- /* max-h-[32rem] */
- /* 字体 */
- .text-xs {
- font-size: 0.75rem; /* 12px */
- line-height: 1rem; /* 16px */
- }
- .text-sm {
- font-size: 0.875rem; /* 14px */
- line-height: 1.25rem; /* 20px */
- }
- .text-base {
- font-size: 1rem; /* 16px */
- line-height: 1.5rem; /* 24px */
- }
- .text-lg {
- font-size: 1.125rem; /* 18px */
- line-height: 1.75rem; /* 28px */
- }
- .text-xl {
- font-size: 1.25rem; /* 20px */
- line-height: 1.75rem; /* 28px */
- }
- .text-2xl {
- font-size: 1.5rem; /* 24px */
- line-height: 2rem; /* 32px */
- }
- .text-3xl {
- font-size: 1.875rem; /* 30px */
- line-height: 2.25rem; /* 36px */
- }
- .text-4xl {
- font-size: 2.25rem; /* 36px */
- line-height: 2.5rem; /* 40px */
- }
- .text-5xl {
- font-size: 3rem; /* 48px */
- line-height: 1;
- }
- .text-6xl {
- font-size: 3.75rem; /* 60px */
- line-height: 1;
- }
- .text-7xl {
- font-size: 4.5rem; /* 72px */
- line-height: 1;
- }
- .text-8xl {
- font-size: 6rem; /* 96px */
- line-height: 1;
- }
- .text-9xl {
- font-size: 8rem; /* 128px */
- line-height: 1;
- }
- /* text-[14px] */
- /* 字体粗细font-weight */
- /* font-[1100] */
- /* https://tailwindcss.com/docs/font-weight */
- /* 字体间距letter-spacing */
- /* tracking-[.25em] */
- /* 行高line-height */
- /* leading-[3rem] */
- /* 无列表样式 */
- .list-none {
- list-style-type: none;
- }
- /* 小圆点 */
- .list-disc {
- list-style-type: disc;
- }
- /* 数字列表 */
- .list-decimal {
- list-style-type: decimal;
- }
- .text-left {
- text-align: left;
- }
- .text-center {
- text-align: center;
- }
- .text-right {
- text-align: right;
- }
- /* 所有文本头尾对齐 */
- .text-justify {
- text-align: justify;
- }
- /* 文本颜色 */
- /* text-[#50d71e] */
- /* https://tailwindcss.com/docs/text-color */
- /* 下划线 */
- .underline {
- text-decoration-line: underline;
- }
- /* 上划线 */
- .overline {
- text-decoration-line: overline;
- }
- /* 中划线 */
- .line-through {
- text-decoration-line: line-through;
- }
- /* 无划线 */
- .no-underline {
- text-decoration-line: none;
- }
- /* 全小写 */
- .lowercase {
- text-transform: lowercase;
- }
- /* 全大写 */
- .uppercase {
- text-transform: uppercase;
- }
- /* 首字母大写 */
- .capitalize {
- text-transform: capitalize;
- }
|