人民医院前端

normal.scss 6.4KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
  1. /*常见样式, 对于uview的内置样式的不足的补全以及通用样式的补充*/
  2. /*背景*/
  3. .bg{
  4. &-white{
  5. background: #FFFFFF;
  6. }
  7. &-black{
  8. background: #000000;
  9. }
  10. &-blue{
  11. background: #3c9cff;
  12. }
  13. &-004F9C{
  14. background: #004F9C;
  15. }
  16. &-F5F5F5{
  17. background: #F5F5F5;
  18. }
  19. &-F7F7F7{
  20. background: #F7F7F7;
  21. }
  22. }
  23. /*字体颜色*/
  24. .color{
  25. &-blue{
  26. color: #3c9cff;
  27. }
  28. &-000000{ //黑
  29. color: #000000;
  30. }
  31. &-333333{ // 字体淡黑
  32. color: #333333;
  33. }
  34. &-ffffff{ // 白色
  35. color: #FFFFFF;
  36. }
  37. &-999999{ // 灰色
  38. color: #999999;
  39. }
  40. &-red{//价格红
  41. color: #E50213;
  42. }
  43. }
  44. .w-100{
  45. width: 100%;
  46. }
  47. /*系统状态栏高度*/
  48. .system-height{
  49. height: var(--status-bar-height);
  50. }
  51. /* 圆角大小例:radius-1 ,radius-10... */
  52. @for $i from 1 through 100 {
  53. .radius-#{$i} { border-radius: $i*1rpx;}
  54. }
  55. /* 自体加粗例:weight-100 ,weight-600... */
  56. @for $i from 1 through 9 {
  57. .weight-#{$i*100} { font-weight: $i*100;}
  58. }
  59. /* 自体加粗例:weight-50 ,weight-550...*/
  60. @for $i from 1 through 9 {
  61. .weight-#{$i*100 + 50} { font-weight: 50 + $i*100;}
  62. }
  63. .weight-bold{
  64. font-weight: bold;
  65. }
  66. .border-bottom {
  67. border-bottom: 1rpx solid rgba($color: #707070, $alpha: 0.12);
  68. }
  69. /* flex 布局 */
  70. .flex{
  71. /* #ifndef APP-PLUS-NVUE */
  72. display:flex;
  73. /* #endif */
  74. flex-direction:row;
  75. }
  76. .flex-row{ flex-direction:row!important; }
  77. .flex-column{ flex-direction:column!important; }
  78. .flex-row-reverse{ flex-direction:row-reverse!important; }
  79. .flex-column-reverse{ flex-direction:column-reverse!important; }
  80. .flex-wrap{ flex-wrap:wrap;}
  81. .flex-nowrap{ flex-wrap:nowrap;}
  82. .justify-start{justify-content:flex-start;}
  83. .justify-end{justify-content:flex-end;}
  84. .justify-between{justify-content:space-between;}
  85. /* #ifndef APP-NVUE */
  86. .justify-evenly {justify-content: space-evenly;}
  87. /* #endif */
  88. .justify-center{justify-content:center;}
  89. .align-center{ align-items: center; }
  90. .align-stretch{ align-items: stretch; }
  91. .align-start{ align-items: flex-start; }
  92. .align-end{ align-items: flex-end; }
  93. /* #ifndef APP-NVUE */
  94. .content-start {align-content: flex-start;}
  95. .content-end {align-content: flex-end;}
  96. .content-center {align-content: center;}
  97. .content-between {align-content: space-between;}
  98. .content-around {align-content: space-around;}
  99. .content-stretch {align-content: stretch;}
  100. /* #endif */
  101. .flex-1{ flex: 1; }
  102. .flex-2{ flex: 2; }
  103. .flex-3{ flex: 3; }
  104. .flex-4{ flex: 4; }
  105. .flex-5{ flex: 5; }
  106. /* #ifndef APP-PLUS-NVUE */
  107. .flex-shrink{ flex-shrink: 0; }
  108. /* #endif */
  109. // 定义内外边距,历遍1-80
  110. @for $i from 0 through 80 {
  111. // 只要双数和能被5除尽的数
  112. @if $i % 2 == 0 or $i % 5 == 0 {
  113. // 得出:u-margin-30或者u-m-30
  114. .p-x-#{$i} {
  115. padding-left: $i + rpx!important;
  116. padding-right: $i + rpx!important;
  117. }
  118. .p-y-#{$i} {
  119. padding-top: $i + rpx!important;
  120. padding-bottom: $i + rpx!important;
  121. }
  122. .m-x-#{$i} {
  123. margin-left: $i + rpx!important;
  124. margin-right: $i + rpx!important;
  125. }
  126. .m-y-#{$i} {
  127. margin-top: $i + rpx!important;
  128. margin-bottom: $i + rpx!important;
  129. }
  130. .m-#{$i} {
  131. margin-left: $i + rpx!important;
  132. margin-right: $i + rpx!important;
  133. margin-top: $i + rpx!important;
  134. margin-bottom: $i + rpx!important;
  135. }
  136. .p-#{$i} {
  137. padding-left: $i + rpx!important;
  138. padding-right: $i + rpx!important;
  139. padding-top: $i + rpx!important;
  140. padding-bottom: $i + rpx!important
  141. }
  142. .m-l-#{$i} { margin-left: $i + rpx!important; }
  143. .m-t-#{$i} { margin-top: $i + rpx!important; }
  144. .m-r-#{$i} { margin-right: $i + rpx!important; }
  145. .m-b-#{$i} { margin-bottom: $i + rpx!important; }
  146. .p-l-#{$i} { padding-left: $i + rpx!important; }
  147. .p-t-#{$i} { padding-top: $i + rpx!important; }
  148. .p-r-#{$i} { padding-right: $i + rpx!important; }
  149. .p-b-#{$i} { padding-bottom: $i + rpx!important; }
  150. }
  151. }
  152. /* #ifndef APP-PLUS-NVUE */
  153. .m-auto{ margin: auto; }
  154. /* #endif */
  155. // 定义字体大小
  156. @for $i from 9 to 20 {
  157. .font-#{$i} { font-size: $i + rpx; }
  158. }
  159. // 定义字体(rpx)单位,大于或等于20的都为rpx单位字体
  160. @for $i from 20 through 80 {
  161. .font-#{$i} { font-size: $i + rpx; }
  162. }
  163. // 圆角
  164. @for $i from 4 through 60 {
  165. .radius-#{$i} { border-radius: $i + rpx; }
  166. }
  167. /* #ifndef APP-NVUE */
  168. .radius-c { border-radius: 50%;}
  169. /* #endif */
  170. /* #ifndef APP-NVUE */
  171. .ls { letter-spacing: 5rpx; }
  172. .ls-1 { letter-spacing: 10rpx; }
  173. .ls-2 { letter-spacing: 20rpx; }
  174. .ls-3 { letter-spacing: 30rpx; }
  175. .ls-4 { letter-spacing: 40rpx; }
  176. .ls-7 { letter-spacing: 70rpx; }
  177. /* #endif */
  178. /* 内容溢出 */
  179. .overflow-hidden { overflow: hidden;}
  180. /* 文字缩进 */
  181. /* #ifndef APP-PLUS-NVUE */
  182. .text-indent{text-indent:2;}
  183. /* #endif */
  184. /* 文字划线 */
  185. .text-through{text-decoration:line-through;}
  186. /* 文字对齐 */
  187. .text-left { text-align: left;}
  188. .text-right { text-align: right;}
  189. .text-center { text-align: center;}
  190. /* 文字换行溢出处理 */
  191. .text-ellipsis {
  192. /* #ifndef APP-PLUS-NVUE */
  193. overflow: hidden;
  194. text-overflow: ellipsis;
  195. white-space: nowrap;
  196. /* #endif */
  197. /* #ifdef APP-PLUS-NVUE */
  198. lines: 1;
  199. text-overflow: ellipsis;
  200. /* #endif */
  201. }
  202. /* #ifdef APP-NVUE */
  203. .text-ellipsis-2 {
  204. lines: 2;
  205. text-overflow:ellipsis;
  206. }
  207. /* #endif */
  208. /* #ifndef APP-PLUS-NVUE */
  209. .text-ellipsis-2 {
  210. overflow: hidden;
  211. text-overflow: ellipsis;
  212. display: -webkit-box;
  213. -webkit-line-clamp: 2; //多行在这里修改数字即可
  214. overflow: hidden;
  215. /* autoprefixer: ignore next */
  216. -webkit-box-orient: vertical;
  217. }
  218. /* #endif */
  219. // 边框
  220. .border {
  221. border-width: 0.5px;
  222. border-style: solid;
  223. border-color: #dee2e6;
  224. }
  225. .border-top {
  226. border-top-width: 0.5px;
  227. border-top-style: solid;
  228. border-top-color: #dee2e6;
  229. }
  230. .border-right {
  231. border-right-width: 0.5px;
  232. border-right-style: solid;
  233. border-right-color: #dee2e6;
  234. }
  235. .border-bottom {
  236. border-bottom-width: 0.5px;
  237. border-bottom-style: solid;
  238. border-bottom-color: #dee2e6;
  239. }
  240. .border-left {
  241. border-left-width: 0.5px;
  242. border-left-style: solid;
  243. border-left-color: #dee2e6;
  244. }
  245. /* 定位 */
  246. .position-relative { position: relative;}
  247. .position-absolute { position: absolute;}
  248. .position-fixed { position: fixed;}
  249. /* 定位 - 固定顶部 */
  250. .fixed-top {
  251. position: fixed;
  252. top: 0;
  253. right: 0;
  254. left: 0;
  255. z-index: 1030;
  256. }
  257. /* 定位 - 固定底部 */
  258. .fixed-bottom {
  259. position: fixed;
  260. right: 0;
  261. bottom: 0;
  262. left: 0;
  263. z-index: 1030;
  264. }
  265. .top-0 { top: 0; }
  266. .left-0 { left: 0; }
  267. .right-0 { right: 0; }
  268. .bottom-0 { bottom: 0; }
  269. .float-left{ float: left; }
  270. .float-right{ float: right; }
  271. .clear-both{ clear: both; }
  272. .status-bar { height: var(--status-bar-height); }
  273. .inline-block{ display: inline-block; }