123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581 |
- *,
- *: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;
- }
- .flex {
- display: flex;
- }
- .flex1 {
- flex: 1;
- }
- .flex2 {
- flex: 2;
- }
- .flex-around {
- display: flex;
- justify-content: space-around;
- }
- .flex-between {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .flex-end {
- display: flex;
- justify-content: flex-end;
- }
- .flex-align-center {
- display: flex;
- align-items: center;
- }
- .text-center {
- text-align: center;
- }
- .font12 {
- font-size: 12px;
- }
- .main-color {
- color: #0bf1ff;
- }
- .danger-color {
- color: #f15450 !important;
- }
- .error-color {
- color: #ffc704 !important;
- }
- .btm10 {
- margin-bottom: 10px;
- }
- .btm20 {
- margin-bottom: 20px;
- }
- a {
- text-decoration: none;
- cursor: pointer;
- }
- [v-cloak] {
- display: none;
- }
- #app {
- background: url('../images/page-bg.png') center center no-repeat;
- background-size: 100% 100%;
- padding-top: 10px;
- height: 100vh;
- overflow: hidden;
- color: #fff;
- }
- .my-header {
- position: relative;
- height: 70px;
- line-height: 70px;
- background: url('../images/header-bg.png') center center no-repeat;
- background-size: 100% 100%;
- text-align: center;
- font-weight: bold;
- font-size: 32px;
- font-weight: 600;
- }
- .my-header span {
- background: linear-gradient(-3deg, #99eeff 0%, #99eeff 30%, #ffffff 91%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- .my-header span.right {
- position: absolute;
- right: 60px;
- top: 0px;
- font-size: 16px;
- }
- .main {
- padding: 15px;
- height: calc(100vh - 25px);
- background: url('../images/back-big.png') no-repeat center bottom;
- padding-bottom: 65px;
- display: grid;
- /* grid-template-columns: repeat(2, minmax(0, 1fr));
- grid-template-rows: repeat(2, minmax(0, 1fr)); */
- grid-template-columns: repeat(2, 50%);
- grid-template-rows: repeat(2, 50%);
- gap: 10px;
- }
- .panel-title {
- position: relative;
- text-align: center;
- height: 50px;
- line-height: 50px;
- }
- .panel-title .text {
- font-size: 20px;
- font-weight: 600;
- color: #05fbfe;
- text-shadow: 0px 2px 10px rgba(10, 30, 52, 0.48);
- background: linear-gradient(0deg, #ffffff 0%, #63dcff 0%, #e0f3ff 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- position: relative;
- }
- .panel-title .text::before {
- position: absolute;
- content: ' ';
- top: 10px;
- left: -40px;
- width: 30px;
- height: 10px;
- background: url('../images/title-left.png') no-repeat;
- }
- .panel-title .text::after {
- position: absolute;
- content: ' ';
- top: 10px;
- right: -40px;
- width: 30px;
- height: 10px;
- background: url('../images/title-right.png') no-repeat;
- }
- .lt-bottom {
- display: grid;
- height: calc(100% - 50px);
- grid-template-columns: 1fr 2fr;
- gap: 10px;
- padding: 10px;
- }
- .lt-bottom-left {
- display: grid;
- grid-template-rows: repeat(4, 1fr);
- gap: 10px;
- }
- .lt-bottom-left > div {
- background: url('../images4/button-back.png') no-repeat;
- background-size: 100% 100%;
- font-size: 18px;
- font-weight: bold;
- }
- .lt-bottom-right {
- background: url('../images4/list-back.png') no-repeat;
- background-size: 100% 100%;
- }
- .tl,
- .tr,
- .bl,
- .br {
- background: url('../images4/list-back.png') no-repeat;
- background-size: 100% 100%;
- }
- /* zhb */
- /* 宽高纵横比 */
- .aspect-auto {
- aspect-ratio: auto;
- }
- .aspect-square {
- aspect-ratio: 1 / 1;
- }
- .aspect-video {
- aspect-ratio: 16 / 9;
- }
- /* aspect-[4/3] */
- /* 居中 */
- .mx-auto {
- margin: 0 auto;
- }
- /* 设置容器内的列数/每列距离 */
- .columns-1 {
- columns: 1;
- }
- /* columns-[20px] */
- /* 盒子模型 */
- .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-rows-3 {
- grid-template-rows: repeat(3, minmax(0, 1fr));
- }
- /* 间距 */
- .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;
- }
- /* 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;
- }
|