uni.scss 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. @import "@/uni_modules/vk-uview-ui/theme.scss";
  2. @import "@/uni_modules/vk-uview-ui/index.scss";
  3. /**
  4. * 这里是uni-app内置的常用样式变量
  5. *
  6. * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
  7. * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
  8. *
  9. */
  10. /**
  11. * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
  12. *
  13. * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
  14. */
  15. /* 颜色变量 */
  16. /* 行为相关颜色 */
  17. $uni-color-primary: #007aff;
  18. $uni-color-success: #4cd964;
  19. $uni-color-warning: #f0ad4e;
  20. $uni-color-error: #dd524d;
  21. /* 文字基本颜色 */
  22. $uni-text-color:#333;//基本色
  23. $uni-text-color-inverse:#fff;//反色
  24. $uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
  25. $uni-text-color-placeholder: #808080;
  26. $uni-text-color-disable:#c0c0c0;
  27. /* 背景颜色 */
  28. $uni-bg-color:#ffffff;
  29. $uni-bg-color-grey:#f8f8f8;
  30. $uni-bg-color-hover:#f1f1f1;//点击状态颜色
  31. $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
  32. /* 边框颜色 */
  33. $uni-border-color:#c8c7cc;
  34. /* 尺寸变量 */
  35. /* 文字尺寸 */
  36. $uni-font-size-sm:12px;
  37. $uni-font-size-base:14px;
  38. $uni-font-size-lg:16px;
  39. /* 图片尺寸 */
  40. $uni-img-size-sm:20px;
  41. $uni-img-size-base:26px;
  42. $uni-img-size-lg:40px;
  43. /* Border Radius */
  44. $uni-border-radius-sm: 2px;
  45. $uni-border-radius-base: 3px;
  46. $uni-border-radius-lg: 6px;
  47. $uni-border-radius-circle: 50%;
  48. /* 水平间距 */
  49. $uni-spacing-row-sm: 5px;
  50. $uni-spacing-row-base: 10px;
  51. $uni-spacing-row-lg: 15px;
  52. /* 垂直间距 */
  53. $uni-spacing-col-sm: 4px;
  54. $uni-spacing-col-base: 8px;
  55. $uni-spacing-col-lg: 12px;
  56. /* 透明度 */
  57. $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
  58. /* 文章场景相关 */
  59. $uni-color-title: #2C405A; // 文章标题颜色
  60. $uni-font-size-title:20px;
  61. $uni-color-subtitle: #555555; // 二级标题颜色
  62. $uni-font-size-subtitle:26px;
  63. $uni-color-paragraph: #3F536E; // 文章段落颜色
  64. $uni-font-size-paragraph:15px;
  65. /* 登录页是否记住密码多选框样式 */
  66. uni-checkbox.login-form-checkbox .uni-checkbox-input{
  67. width: 24upx !important;
  68. height: 24upx !important;
  69. }
  70. .status_bar {
  71. height: var(--status-bar-height);
  72. width: 100%;
  73. }
  74. .isIPXup{
  75. padding-bottom: 64rpx !important;
  76. }
  77. /* form表单样式 */
  78. .form-box{
  79. background-color: #fff;
  80. padding: 0 30rpx;
  81. }
  82. .form-input {
  83. font-size: 28rpx;
  84. color: #333;
  85. text-align: right;
  86. width: 95%;
  87. box-sizing: border-box;
  88. height: 60rpx;
  89. line-height: 60rpx;
  90. &.textarea{
  91. height: 240rpx;
  92. padding: 24rpx 0;
  93. text-align: left;
  94. }
  95. }
  96. .form-input-placeholder {
  97. font-size: 28rpx;
  98. color: #999;
  99. }
  100. .form-textarea{
  101. height: 240rpx;
  102. padding: 24rpx 0;
  103. text-align: left;
  104. }
  105. .form-number-input{
  106. margin: 0 auto;
  107. }
  108. .u-required{
  109. position: relative;
  110. }
  111. .u-required:before{
  112. content: '*';
  113. position: absolute;
  114. left: -8px;
  115. top: 10upx;
  116. font-size: 14px;
  117. color: #fa3534;
  118. height: 9px;
  119. line-height: 1;
  120. }
  121. /* 元素宽度 百分比 */
  122. .uni-col-1{
  123. box-sizing: border-box;
  124. width: 10%;
  125. }
  126. .uni-col-2{
  127. box-sizing: border-box;
  128. width: 20%;
  129. }
  130. .uni-col-3{
  131. box-sizing: border-box;
  132. width: 30%;
  133. }
  134. .uni-col-4{
  135. box-sizing: border-box;
  136. width: 40%;
  137. }
  138. .uni-col-5{
  139. box-sizing: border-box;
  140. width: 50%;
  141. }
  142. .uni-col-6{
  143. box-sizing: border-box;
  144. width: 60%;
  145. }
  146. .uni-col-7{
  147. box-sizing: border-box;
  148. width: 70%;
  149. }
  150. .uni-col-8{
  151. box-sizing: border-box;
  152. width: 80%;
  153. }
  154. .uni-col-9{
  155. box-sizing: border-box;
  156. width: 90%;
  157. }
  158. .uni-col-10{
  159. box-sizing: border-box;
  160. width: 100%;
  161. }
  162. /* felx布局 */
  163. .flex{
  164. display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  165. display: -moz-flex; /* Firefox 18+ */
  166. display: -ms-flexbox; /* IE 10 */
  167. display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  168. }
  169. /*伸缩流方向*/
  170. .flex_column{
  171. -webkit-box-orient: vertical;
  172. -ms-flex-direction: column;
  173. -webkit-flex-direction: column;
  174. flex-direction: column;
  175. }
  176. /*主轴对齐*/
  177. .justify_center{
  178. -webkit-box-pack: center;
  179. -ms-flex-pack: center;
  180. -webkit-justify-content: center;
  181. justify-content: center;
  182. }
  183. .justify_end{
  184. -webkit-box-pack: end;
  185. -ms-flex-pack: end;
  186. -webkit-justify-content: flex-end;
  187. justify-content: flex-end;
  188. }
  189. .justify_between{
  190. -webkit-box-pack: justify;
  191. -ms-flex-pack: justify;
  192. -webkit-justify-content: space-between;
  193. justify-content: space-between;
  194. }
  195. /*侧轴对齐*/
  196. .align_start{
  197. -webkit-box-align: start;
  198. -ms-flex-align: start;
  199. -webkit-align-items: flex-start;
  200. align-items: flex-start;
  201. }
  202. .align_end{
  203. -webkit-box-align: end;
  204. -ms-flex-align: end;
  205. -webkit-align-items: flex-end;
  206. align-items: flex-end;
  207. }
  208. .align_center{
  209. -webkit-box-align: center;
  210. -ms-flex-align: center;
  211. -webkit-align-items: center;
  212. align-items: center;
  213. }
  214. .align_baseline{
  215. -webkit-box-align: baseline;
  216. -ms-flex-align: baseline;
  217. -webkit-align-items: baseline;
  218. align-items: baseline;
  219. }
  220. /*伸缩性*/
  221. .flex_auto{
  222. -webkit-box-flex: 1;
  223. -ms-flex: auto;
  224. -webkit-flex: auto;
  225. flex: auto;
  226. }
  227. .flex_1{
  228. -webkit-box-flex: 1;
  229. -ms-flex: 1;
  230. -webkit-flex: 1;
  231. flex: 1;
  232. }
  233. // ios15原生input的type=search时会默认自带搜索图标。
  234. // 在全局的公共样式隐藏ios自带搜索图标即可
  235. [type="search"]::-webkit-search-decoration {
  236. display: none;
  237. }
  238. uni-toast {
  239. z-index: 1000000;
  240. }