global.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. /* 根元素样式 设置页面背景、字体大小、字体颜色,字符间距、长单词换行 */
  2. page {
  3. background-color: #f3f3f3;
  4. font-size: 28rpx;
  5. box-sizing: border-box;
  6. color: #333;
  7. letter-spacing: 0;
  8. word-wrap: break-word;
  9. }
  10. /* 设置常用元素尺寸规则 */
  11. view,textarea,input,label,form,button,image{box-sizing: border-box;}
  12. /* 按钮样式处理 */
  13. button{font-size: 28rpx;}
  14. /* 取消按钮默认的边框线效果 */
  15. button:after{border:none;}
  16. /* 设置图片默认样式,取消默认尺寸 */
  17. image{display: block;height: auto;width: auto;}
  18. /* 输入框默认字体大小 */
  19. textarea,input{font-size: 28rpx;};
  20. /* 列式弹性盒子 */
  21. .flex_col {
  22. display: flex;
  23. flex-direction: row;
  24. flex-wrap: nowrap;
  25. justify-content: flex-start;
  26. align-items: center;
  27. align-content: center;
  28. }
  29. /* 行式弹性盒子 */
  30. .flex_row {
  31. display: flex;
  32. flex-direction: column;
  33. flex-wrap: nowrap;
  34. justify-content: flex-start;
  35. align-items: flex-start;
  36. align-content: flex-start;
  37. }
  38. /* 弹性盒子弹性容器 */
  39. .flex_col .flex_grow{width:0;flex-grow: 1;}
  40. .flex_row .flex_grow{flex-grow: 1;}
  41. /* 弹性盒子允许换行 */
  42. .flex_col.flex_wrap{flex-wrap: wrap;}
  43. /* 弹性盒子居中对齐 */
  44. .flex_col.flex_center,.flex_row.flex_center{justify-content: center;}
  45. /* 列式弹性盒子两端对齐 */
  46. .flex_col.flex_space{justify-content: space-between;}
  47. /* 弹性盒子快速分栏 ,这里非常郁闷 uniapp 居然不支持 * 选择器 */
  48. .flex_col.flex_col_2>view{width: 50%;}
  49. .flex_col.flex_col_3>view{width: 33.33333%;}
  50. .flex_col.flex_col_4>view{width: 25%;}
  51. .flex_col.flex_col_5>view{width: 20%;}
  52. .flex_col.flex_col_6>view{width: 16.66666%;}
  53. /* 字体颜色 */
  54. .color_333 {color: #333;}
  55. .color_666 {color: #666;}
  56. .color_999 {color: #999;}
  57. .color_ccc {color: #ccc;}
  58. .color_fff {color: #fff;}
  59. .color_6dc{color: #6dca6d;}
  60. .color_d51{color: #d51917;}
  61. .color_09f{color: #0099ff;}
  62. /* 背景色*/
  63. .bg_fff{background-color: #ffffff;}
  64. /* 字体大小 */
  65. .size_10 {font-size: 20rpx;}
  66. .size_12 {font-size: 24rpx;}
  67. .size_14 {font-size: 28rpx;}
  68. .size_16 {font-size: 32rpx;}
  69. .size_18 {font-size: 36rpx;}
  70. .size_20 {font-size: 40rpx;}
  71. /* 字体加粗 */
  72. .font_b{font-weight: bold;}
  73. /* 对齐方式 */
  74. .align_c{text-align: center;}
  75. .align_l{text-align: left;}
  76. .align_r{text-align: right;}
  77. /* 遮罩 */
  78. .shade{
  79. position: fixed;
  80. top: 0;
  81. right: 0;
  82. bottom: 0;
  83. left: 0;
  84. background-color: rgba(0,0,0,0.8);
  85. z-index: 100;
  86. }
  87. /* 弹窗 */
  88. .shade_box{
  89. position: fixed;
  90. top: 0;
  91. right: 0;
  92. bottom: 0;
  93. left: 0;
  94. margin: auto;
  95. z-index: 101;
  96. min-width: 200rpx;
  97. min-height: 200rpx;
  98. }