App.vue 4.8 KB

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