App.vue 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354
  1. <script>
  2. import {
  3. init
  4. } from "@/common";
  5. export default {
  6. onLaunch(options) {
  7. // init(options);
  8. // // #ifndef MP-TOUTIAO
  9. // uni.hideTabBar({});
  10. // // #endif
  11. },
  12. onShow() {
  13. // uni.removeStorageSync('clickStudyBtn')
  14. }
  15. };
  16. </script>
  17. <style lang="scss">
  18. /*每个页面公共css */
  19. @import "uview-ui/index.scss";
  20. @import "animate.css";
  21. @import "static/iconfont/iconfont.css";
  22. @import './tuniao-ui/index.scss';
  23. @import './tuniao-ui/iconfont.css';
  24. ::-webkit-scrollbar {
  25. display: none;
  26. width: 0 !important;
  27. height: 0 !important;
  28. -webkit-appearance: none;
  29. background: transparent;
  30. }
  31. ::v-deep uni-swiper .uni-swiper-wrapper {
  32. // background: red !important;
  33. // padding-left: 150rpx;
  34. }
  35. .uni-textarea {
  36. width: 100% !important;
  37. height: 200rpx !important;
  38. }
  39. .uni-easyinput__content {
  40. background: #fff !important;
  41. }
  42. .uni-easyinput__content-input {
  43. height: 78rpx !important;
  44. padding-left: 100rpx !important;
  45. }
  46. .uni-input-placeholder {
  47. // margin-left: 90rpx;
  48. // height: 90rpx;
  49. line-height: 78rpx;
  50. }
  51. .uni-easyinput__content-input {
  52. background: #eee;
  53. border-radius: 50rpx;
  54. height: 120rpx;
  55. }
  56. .flxe {
  57. display: flex;
  58. }
  59. .justify-between {
  60. justify-content: space-between;
  61. }
  62. .flxe-column {
  63. flex-direction: column;
  64. }
  65. .align-center {
  66. align-items: center;
  67. }
  68. .justify-center {
  69. justify-content: center;
  70. }
  71. .flex-wrap {
  72. flex-wrap: wrap;
  73. }
  74. .u-relative,
  75. .u-rela {
  76. position: relative;
  77. }
  78. .u-absolute,
  79. .u-abso {
  80. position: absolute;
  81. }
  82. // nvue不能用标签命名样式,不能放在微信组件中,否则微信开发工具会报警告,无法使用标签名当做选择器
  83. /* #ifndef APP-NVUE */
  84. image {
  85. display: inline-block;
  86. }
  87. // 在weex,也即nvue中,所有元素默认为border-box
  88. view,
  89. text {
  90. box-sizing: border-box;
  91. }
  92. /* #endif */
  93. .u-font-xs {
  94. font-size: 22rpx;
  95. }
  96. .u-font-sm {
  97. font-size: 26rpx;
  98. }
  99. .u-font-md {
  100. font-size: 28rpx;
  101. }
  102. .u-font-lg {
  103. font-size: 30rpx;
  104. }
  105. .u-font-xl {
  106. font-size: 34rpx;
  107. }
  108. .u-flex {
  109. /* #ifndef APP-NVUE */
  110. display: flex;
  111. /* #endif */
  112. flex-direction: row;
  113. align-items: center;
  114. }
  115. .u-flex-wrap {
  116. flex-wrap: wrap;
  117. }
  118. .u-flex-nowrap {
  119. flex-wrap: nowrap;
  120. }
  121. .u-col-center {
  122. align-items: center;
  123. }
  124. .u-col-top {
  125. align-items: flex-start;
  126. }
  127. .u-col-bottom {
  128. align-items: flex-end;
  129. }
  130. .u-row-center {
  131. justify-content: center;
  132. }
  133. .u-row-left {
  134. justify-content: flex-start;
  135. }
  136. .u-row-right {
  137. justify-content: flex-end;
  138. }
  139. .u-row-between {
  140. justify-content: space-between;
  141. }
  142. .u-row-around {
  143. justify-content: space-around;
  144. }
  145. .u-text-left {
  146. text-align: left;
  147. }
  148. .u-text-center {
  149. text-align: center;
  150. }
  151. .u-text-right {
  152. text-align: right;
  153. }
  154. .u-flex-col {
  155. /* #ifndef APP-NVUE */
  156. display: flex;
  157. /* #endif */
  158. flex-direction: column;
  159. }
  160. /**
  161. * 弹性盒三段式布局
  162. */
  163. .page_box {
  164. height: 100%;
  165. width: 100%;
  166. display: flex;
  167. flex-direction: column;
  168. justify-content: space-between;
  169. overflow-x: hidden;
  170. background: $u-bg-color;
  171. }
  172. .scroll-box {
  173. flex: 1;
  174. height: 100%;
  175. position: relative;
  176. }
  177. .content_box {
  178. flex: 1;
  179. overflow-y: auto;
  180. }
  181. /**
  182. * 溢出省略号
  183. * @param {Number} 行数
  184. */
  185. @mixin ellipsis($rowCount: 1) {
  186. @if $rowCount <=1 {
  187. overflow: hidden;
  188. text-overflow: ellipsis;
  189. white-space: nowrap;
  190. }
  191. @else {
  192. min-width: 0;
  193. overflow: hidden;
  194. text-overflow: ellipsis;
  195. display: -webkit-box;
  196. -webkit-line-clamp: $rowCount;
  197. -webkit-box-orient: vertical;
  198. }
  199. }
  200. @for $i from 1 through 12 {
  201. .u-ellipsis-#{$i} {
  202. @include ellipsis($i);
  203. }
  204. }
  205. // 定义flex等分
  206. @for $i from 0 through 12 {
  207. .u-flex-#{$i} {
  208. flex: $i;
  209. }
  210. }
  211. // 定义字体(px)单位,小于20都为px单位字体
  212. @for $i from 9 to 20 {
  213. .u-font-#{$i} {
  214. font-size: $i + px;
  215. }
  216. }
  217. // 定义字体(rpx)单位,大于或等于20的都为rpx单位字体
  218. @for $i from 20 through 40 {
  219. .u-font-#{$i} {
  220. font-size: $i + rpx;
  221. }
  222. }
  223. // 定义内外边距,历遍1-100
  224. @for $i from 0 through 100 {
  225. // 只要双数和能被5除尽的数
  226. @if $i % 2==0 or $i % 5==0 {
  227. // 得出:u-margin-30或者u-m-30
  228. .u-margin-#{$i},
  229. .u-m-#{$i} {
  230. margin: $i + rpx !important;
  231. }
  232. .u-m-x-#{$i} {
  233. margin-left: $i + rpx !important;
  234. margin-right: $i + rpx !important;
  235. }
  236. .u-m-y-#{$i} {
  237. margin-top: $i + rpx !important;
  238. margin-bottom: $i + rpx !important;
  239. }
  240. // 得出:u-padding-30或者u-p-30
  241. .u-padding-#{$i},
  242. .u-p-#{$i} {
  243. padding: $i + rpx !important;
  244. }
  245. .u-p-x-#{$i} {
  246. padding-left: $i + rpx !important;
  247. padding-right: $i + rpx !important;
  248. }
  249. .u-p-y-#{$i} {
  250. padding-top: $i + rpx !important;
  251. padding-bottom: $i + rpx !important;
  252. }
  253. @each $short,
  254. $long in l left,
  255. t top,
  256. r right,
  257. b bottom {
  258. // 缩写版,结果如: u-m-l-30
  259. // 定义外边距
  260. .u-m-#{$short}-#{$i} {
  261. margin-#{$long}: $i + rpx !important;
  262. }
  263. // 定义内边距
  264. .u-p-#{$short}-#{$i} {
  265. padding-#{$long}: $i + rpx !important;
  266. }
  267. // 完整版,结果如:u-margin-left-30
  268. // 定义外边距
  269. .u-margin-#{$long}-#{$i} {
  270. margin-#{$long}: $i + rpx !important;
  271. }
  272. // 定义内边距
  273. .u-padding-#{$long}-#{$i} {
  274. padding-#{$long}: $i + rpx !important;
  275. }
  276. }
  277. }
  278. }
  279. // 重置nvue的默认关于flex的样式
  280. .u-reset-nvue {
  281. flex-direction: row;
  282. align-items: center;
  283. }
  284. </style>