investHomeBig.css 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. html,
  2. body {
  3. /* min-width: 7640px; */
  4. width: 7680px;
  5. height: 2100px;
  6. font-size: 20px;
  7. color: #fff;
  8. font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, 'PingFang SC',
  9. 'Hiragino Sans GB', Arial, sans-serif;
  10. height: 100vh;
  11. overflow-y: hidden;
  12. }
  13. *{
  14. padding: 0;
  15. margin: 0;
  16. }
  17. [v-cloak] {
  18. display: none;
  19. }
  20. iframe { display:block; }
  21. #app{
  22. display: grid;
  23. grid-template-columns: repeat(3, 1fr);
  24. width: 100%;
  25. height: 100%;
  26. }
  27. #app>div{
  28. width: 100%;
  29. height: 100%;
  30. }
  31. /* 公共 */
  32. /* 宽高纵横比 */
  33. .aspect-auto {
  34. aspect-ratio: auto;
  35. }
  36. .aspect-square {
  37. aspect-ratio: 1 / 1;
  38. }
  39. .aspect-video {
  40. aspect-ratio: 16 / 9;
  41. }
  42. /* aspect-[4/3] */
  43. /* 居中 */
  44. .mx-auto {
  45. margin: 0 auto;
  46. }
  47. /* 设置容器内的列数/每列距离 */
  48. .columns-1 {
  49. columns: 1;
  50. }
  51. /* columns-[20px] */
  52. /* 盒子模型 */
  53. .box-border {
  54. box-sizing: border-box;
  55. }
  56. .box-content {
  57. box-sizing: content-box;
  58. }
  59. /* 消失 */
  60. .hidden {
  61. display: none;
  62. }
  63. /* 块级元素 */
  64. .block {
  65. display: block;
  66. }
  67. /* 行内块 */
  68. .inline-block {
  69. display: inline-block;
  70. }
  71. /* 行内元素 */
  72. .inline {
  73. display: inline;
  74. }
  75. /* 弹性布局 */
  76. .flex {
  77. display: flex;
  78. }
  79. /* 主轴起点在左边 */
  80. .flex-row {
  81. flex-direction: row;
  82. }
  83. /* 主轴起点在右边 */
  84. .flex-row-reverse {
  85. flex-direction: row-reverse;
  86. }
  87. /* 主轴竖向排列,在上面 */
  88. .flex-col {
  89. flex-direction: column;
  90. }
  91. /* 主轴竖向排列,在下面 */
  92. .flex-col-reverse {
  93. flex-direction: column-reverse;
  94. }
  95. /* 自动换行 */
  96. .flex-wrap {
  97. flex-wrap: wrap;
  98. }
  99. /* 自动换行下起点 */
  100. .flex-wrap-reverse {
  101. flex-wrap: wrap-reverse;
  102. }
  103. /* 不换行 */
  104. .flex-nowrap {
  105. flex-wrap: nowrap;
  106. }
  107. /* 弹性成长 */
  108. .grow {
  109. flex-grow: 1;
  110. }
  111. /* 不允许弹性成长 */
  112. .grow-0 {
  113. flex-grow: 0;
  114. }
  115. /* 主轴从左开始 */
  116. .justify-start {
  117. justify-content: flex-start;
  118. }
  119. /* 主轴从右开始 */
  120. .justify-end {
  121. justify-content: flex-end;
  122. }
  123. /* 主轴剧中 */
  124. .justify-center {
  125. justify-content: center;
  126. }
  127. /* 主轴两端无间隔 */
  128. .justify-between {
  129. justify-content: space-between;
  130. }
  131. /* 主轴两端有间隔 */
  132. .justify-around {
  133. justify-content: space-around;
  134. }
  135. /* 所有间隔相等 */
  136. .justify-evenly {
  137. justify-content: space-evenly;
  138. }
  139. /* 纵向起点最上方 */
  140. .items-start {
  141. align-items: flex-start;
  142. }
  143. /* 纵向起点最下方 */
  144. .items-end {
  145. align-items: flex-end;
  146. }
  147. .items-center {
  148. align-items: center;
  149. }
  150. /* 网格布局 */
  151. .grid {
  152. display: grid;
  153. }
  154. /* 有几列 */
  155. .grid-cols-4{
  156. grid-template-columns: repeat(4, minmax(0, 1fr));
  157. grid-template-columns: repeat(2, 1fr);
  158. }
  159. /* 有几行 */
  160. .grid-rows-3{
  161. grid-template-rows: repeat(3, minmax(0, 1fr));
  162. grid-template-rows: repeat(3, 1fr);
  163. }
  164. /* 容器中的内容上下布局 */
  165. .grid-center{
  166. align-items: center;
  167. }
  168. /* 间距 */
  169. .gap-7{
  170. gap: 1.75rem;
  171. }
  172. /* 允许弹性成长 */
  173. .shrink {
  174. flex-shrink: 1;
  175. }
  176. /* 不允许弹性成长 */
  177. .shrink-0 {
  178. flex-shrink: 0;
  179. }
  180. /* 不允许成长也不允许收缩 */
  181. .flex-none {
  182. flex: none;
  183. }
  184. /* 浮动布局 */
  185. .float-right {
  186. float: right;
  187. }
  188. .float-left {
  189. float: left;
  190. }
  191. .clear-both {
  192. clear: both;
  193. }
  194. /* 溢出 */
  195. .overflow-auto {
  196. overflow: auto;
  197. }
  198. .overflow-hidden {
  199. overflow: hidden;
  200. }
  201. .overflow-scroll {
  202. overflow: scroll;
  203. }
  204. .overflow-x-auto {
  205. overflow-x: auto;
  206. }
  207. .overflow-y-auto {
  208. overflow-y: auto;
  209. }
  210. /* 定位 */
  211. .fixed {
  212. position: fixed;
  213. }
  214. .absolute {
  215. position: absolute;
  216. }
  217. .relative {
  218. position: relative;
  219. }
  220. .top-0 {
  221. top: 0px;
  222. }
  223. .right-0 {
  224. right: 0px;
  225. }
  226. .bottom-0 {
  227. bottom: 0px;
  228. }
  229. .left-0 {
  230. left: 0px;
  231. }
  232. /* top-[3px] */
  233. /* z-[100] */
  234. /* 显示隐藏未脱离文档流 */
  235. .visible {
  236. visibility: visible;
  237. }
  238. .invisible {
  239. visibility: hidden;
  240. }
  241. /* 内边距 */
  242. .p-0 {
  243. padding: 0px;
  244. }
  245. .px-0 {
  246. padding-left: 0px;
  247. padding-right: 0px;
  248. }
  249. .py-0 {
  250. padding-top: 0px;
  251. padding-bottom: 0px;
  252. }
  253. .pt-0 {
  254. padding-top: 0px;
  255. }
  256. .pr-0 {
  257. padding-right: 0px;
  258. }
  259. .pb-0 {
  260. padding-bottom: 0px;
  261. }
  262. .pl-0 {
  263. padding-left: 0px;
  264. }
  265. /* p-[5px] */
  266. /* 外边距 */
  267. .m-0 {
  268. margin: 0px;
  269. }
  270. .mx-0 {
  271. margin-left: 0px;
  272. margin-right: 0px;
  273. }
  274. .my-0 {
  275. margin-top: 0px;
  276. margin-bottom: 0px;
  277. }
  278. .mt-0 {
  279. margin-top: 0px;
  280. }
  281. .mr-0 {
  282. margin-right: 0px;
  283. }
  284. .mb-0 {
  285. margin-bottom: 0px;
  286. }
  287. .ml-0 {
  288. margin-left: 0px;
  289. }
  290. /* m-[5px] */
  291. /* 宽度 */
  292. .w-full {
  293. width: 100%;
  294. }
  295. .w-screen {
  296. width: 100vw;
  297. }
  298. /* w-[32rem] */
  299. /* min-w-[50%] */
  300. /* max-w-[50%] */
  301. /* 高度 */
  302. .h-full {
  303. height: 100%;
  304. }
  305. .h-screen {
  306. height: 100vh;
  307. }
  308. /* h-[32rem] */
  309. /* min-h-[50%] */
  310. /* max-h-[32rem] */
  311. /* 字体 */
  312. .text-xs {
  313. font-size: 0.75rem; /* 12px */
  314. line-height: 1rem; /* 16px */
  315. }
  316. .text-sm {
  317. font-size: 0.875rem; /* 14px */
  318. line-height: 1.25rem; /* 20px */
  319. }
  320. .text-base {
  321. font-size: 1rem; /* 16px */
  322. line-height: 1.5rem; /* 24px */
  323. }
  324. .text-lg {
  325. font-size: 1.125rem; /* 18px */
  326. line-height: 1.75rem; /* 28px */
  327. }
  328. .text-xl {
  329. font-size: 1.25rem; /* 20px */
  330. line-height: 1.75rem; /* 28px */
  331. }
  332. .text-2xl {
  333. font-size: 1.5rem; /* 24px */
  334. line-height: 2rem; /* 32px */
  335. }
  336. .text-3xl {
  337. font-size: 1.875rem; /* 30px */
  338. line-height: 2.25rem; /* 36px */
  339. }
  340. .text-4xl {
  341. font-size: 2.25rem; /* 36px */
  342. line-height: 2.5rem; /* 40px */
  343. }
  344. .text-5xl {
  345. font-size: 3rem; /* 48px */
  346. line-height: 1;
  347. }
  348. .text-6xl {
  349. font-size: 3.75rem; /* 60px */
  350. line-height: 1;
  351. }
  352. .text-7xl {
  353. font-size: 4.5rem; /* 72px */
  354. line-height: 1;
  355. }
  356. .text-8xl {
  357. font-size: 6rem; /* 96px */
  358. line-height: 1;
  359. }
  360. .text-9xl {
  361. font-size: 8rem; /* 128px */
  362. line-height: 1;
  363. }
  364. /* text-[14px] */
  365. /* 字体粗细font-weight */
  366. /* font-[1100] */
  367. /* https://tailwindcss.com/docs/font-weight */
  368. /* 字体间距letter-spacing */
  369. /* tracking-[.25em] */
  370. /* 行高line-height */
  371. /* leading-[3rem] */
  372. /* 无列表样式 */
  373. .list-none {
  374. list-style-type: none;
  375. }
  376. /* 小圆点 */
  377. .list-disc {
  378. list-style-type: disc;
  379. }
  380. /* 数字列表 */
  381. .list-decimal {
  382. list-style-type: decimal;
  383. }
  384. .text-left {
  385. text-align: left;
  386. }
  387. .text-center {
  388. text-align: center;
  389. }
  390. .text-right {
  391. text-align: right;
  392. }
  393. /* 所有文本头尾对齐 */
  394. .text-justify {
  395. text-align: justify;
  396. }
  397. /* 文本颜色 */
  398. /* text-[#50d71e] */
  399. /* https://tailwindcss.com/docs/text-color */
  400. /* 下划线 */
  401. .underline {
  402. text-decoration-line: underline;
  403. }
  404. /* 上划线 */
  405. .overline {
  406. text-decoration-line: overline;
  407. }
  408. /* 中划线 */
  409. .line-through {
  410. text-decoration-line: line-through;
  411. }
  412. /* 无划线 */
  413. .no-underline {
  414. text-decoration-line: none;
  415. }
  416. /* 全小写 */
  417. .lowercase {
  418. text-transform: lowercase;
  419. }
  420. /* 全大写 */
  421. .uppercase {
  422. text-transform: uppercase;
  423. }
  424. /* 首字母大写 */
  425. .capitalize {
  426. text-transform: capitalize;
  427. }