App.vue 5.1 KB

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