123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440 |
- html,
- body {
-
- width: 7680px;
- height: 2100px;
- font-size: 20px;
- color: #fff;
- font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
- 'Hiragino Sans GB', Arial, sans-serif;
- height: 100vh;
- overflow-y: hidden;
- }
- *{
- padding: 0;
- margin: 0;
- }
- [v-cloak] {
- display: none;
- }
- iframe { display:block; }
- #app{
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- width: 100%;
- height: 100%;
- }
- #app>div{
- width: 100%;
- height: 100%;
- }
-
- .aspect-auto {
- aspect-ratio: auto;
- }
- .aspect-square {
- aspect-ratio: 1 / 1;
- }
- .aspect-video {
- aspect-ratio: 16 / 9;
- }
-
-
- .mx-auto {
- margin: 0 auto;
- }
-
- .columns-1 {
- columns: 1;
- }
-
-
- .box-border {
- box-sizing: border-box;
- }
- .box-content {
- box-sizing: content-box;
- }
-
- .hidden {
- display: none;
- }
-
- .block {
- display: block;
- }
-
- .inline-block {
- display: inline-block;
- }
-
- .inline {
- display: inline;
- }
-
- .flex {
- display: flex;
- }
-
- .flex-row {
- flex-direction: row;
- }
-
- .flex-row-reverse {
- flex-direction: row-reverse;
- }
-
- .flex-col {
- flex-direction: column;
- }
-
- .flex-col-reverse {
- flex-direction: column-reverse;
- }
-
- .flex-wrap {
- flex-wrap: wrap;
- }
-
- .flex-wrap-reverse {
- flex-wrap: wrap-reverse;
- }
-
- .flex-nowrap {
- flex-wrap: nowrap;
- }
-
- .grow {
- flex-grow: 1;
- }
-
- .grow-0 {
- flex-grow: 0;
- }
-
- .justify-start {
- justify-content: flex-start;
- }
-
- .justify-end {
- justify-content: flex-end;
- }
-
- .justify-center {
- justify-content: center;
- }
-
- .justify-between {
- justify-content: space-between;
- }
-
- .justify-around {
- justify-content: space-around;
- }
-
- .justify-evenly {
- justify-content: space-evenly;
- }
-
- .items-start {
- align-items: flex-start;
- }
-
- .items-end {
- align-items: flex-end;
- }
- .items-center {
- align-items: center;
- }
-
- .grid {
- display: grid;
- }
-
- .grid-cols-4{
- grid-template-columns: repeat(4, minmax(0, 1fr));
- grid-template-columns: repeat(2, 1fr);
- }
-
- .grid-rows-3{
- grid-template-rows: repeat(3, minmax(0, 1fr));
- grid-template-rows: repeat(3, 1fr);
- }
-
- .grid-center{
- align-items: center;
- }
-
- .gap-7{
- gap: 1.75rem;
- }
-
- .shrink {
- flex-shrink: 1;
- }
-
- .shrink-0 {
- flex-shrink: 0;
- }
-
- .flex-none {
- flex: none;
- }
-
- .float-right {
- float: right;
- }
- .float-left {
- float: left;
- }
- .clear-both {
- clear: both;
- }
-
- .overflow-auto {
- overflow: auto;
- }
- .overflow-hidden {
- overflow: hidden;
- }
- .overflow-scroll {
- overflow: scroll;
- }
- .overflow-x-auto {
- overflow-x: auto;
- }
- .overflow-y-auto {
- overflow-y: auto;
- }
-
- .fixed {
- position: fixed;
- }
- .absolute {
- position: absolute;
- }
- .relative {
- position: relative;
- }
- .top-0 {
- top: 0px;
- }
- .right-0 {
- right: 0px;
- }
- .bottom-0 {
- bottom: 0px;
- }
- .left-0 {
- left: 0px;
- }
-
-
-
- .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;
- }
-
-
- .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;
- }
-
-
- .w-full {
- width: 100%;
- }
- .w-screen {
- width: 100vw;
- }
-
-
-
-
- .h-full {
- height: 100%;
- }
- .h-screen {
- height: 100vh;
- }
-
-
-
-
- .text-xs {
- font-size: 0.75rem;
- line-height: 1rem;
- }
- .text-sm {
- font-size: 0.875rem;
- line-height: 1.25rem;
- }
- .text-base {
- font-size: 1rem;
- line-height: 1.5rem;
- }
- .text-lg {
- font-size: 1.125rem;
- line-height: 1.75rem;
- }
- .text-xl {
- font-size: 1.25rem;
- line-height: 1.75rem;
- }
- .text-2xl {
- font-size: 1.5rem;
- line-height: 2rem;
- }
- .text-3xl {
- font-size: 1.875rem;
- line-height: 2.25rem;
- }
- .text-4xl {
- font-size: 2.25rem;
- line-height: 2.5rem;
- }
- .text-5xl {
- font-size: 3rem;
- line-height: 1;
- }
- .text-6xl {
- font-size: 3.75rem;
- line-height: 1;
- }
- .text-7xl {
- font-size: 4.5rem;
- line-height: 1;
- }
- .text-8xl {
- font-size: 6rem;
- line-height: 1;
- }
- .text-9xl {
- font-size: 8rem;
- line-height: 1;
- }
-
-
-
-
-
-
-
-
-
- .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;
- }
-
-
-
-
- .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;
- }
|