App.vue 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <script>
  2. import { mapState, mapMutations } from 'vuex';
  3. export default {
  4. onLaunch: function() {
  5. console.log('App Launch');
  6. },
  7. onShow: function() {
  8. console.log('App Show');
  9. },
  10. onHide: function() {
  11. console.log('App Hide');
  12. }
  13. };
  14. </script>
  15. <style lang="scss">
  16. @import './common/app.css';
  17. /* 头条小程序需要把 iconfont 样式放到组件外 */
  18. @import 'components/m-icon/m-icon.css';
  19. @font-face {
  20. font-family: 'iconfont';
  21. src: url('https://at.alicdn.com/t/font_920828_nk2k2hhgl8.ttf') format('truetype');
  22. }
  23. .icon {
  24. font-family: iconfont;
  25. }
  26. /*每个页面公共css */
  27. page {
  28. min-height: 100%;
  29. }
  30. /* #ifdef MP-BAIDU */
  31. page {
  32. width: 100%;
  33. height: 100%;
  34. display: block;
  35. }
  36. swan-template {
  37. width: 100%;
  38. min-height: 100%;
  39. display: flex;
  40. }
  41. /* 原生组件模式下需要注意组件外部样式 */
  42. custom-component {
  43. width: 100%;
  44. min-height: 100%;
  45. display: flex;
  46. }
  47. /* #endif */
  48. /* #ifdef MP-ALIPAY */
  49. page {
  50. min-height: 100vh;
  51. }
  52. /* #endif */
  53. /* 原生组件模式下需要注意组件外部样式 */
  54. m-input {
  55. width: 100%;
  56. /* min-height: 100%; */
  57. display: flex;
  58. flex: 1;
  59. }
  60. .tui-swiper-item {
  61. .uni-scroll-view {
  62. position: absolute;
  63. }
  64. }
  65. .uni-picker-container {
  66. z-index: 10000;
  67. }
  68. .content {
  69. display: flex;
  70. flex: 1;
  71. flex-direction: column;
  72. background-color: #efeff4;
  73. padding: 10px;
  74. }
  75. .input-group {
  76. margin-top: 20px;
  77. position: relative;
  78. }
  79. .input-group::before {
  80. position: absolute;
  81. right: 0;
  82. top: 0;
  83. left: 0;
  84. height: 1px;
  85. content: '';
  86. -webkit-transform: scaleY(0.5);
  87. transform: scaleY(0.5);
  88. background-color: #c8c7cc;
  89. }
  90. .input-group::after {
  91. position: absolute;
  92. right: 0;
  93. bottom: 0;
  94. left: 0;
  95. height: 1px;
  96. content: '';
  97. -webkit-transform: scaleY(0.5);
  98. transform: scaleY(0.5);
  99. background-color: #c8c7cc;
  100. }
  101. .input-row {
  102. display: flex;
  103. flex-direction: row;
  104. position: relative;
  105. font-size: 18px;
  106. line-height: 40px;
  107. background-color: #ffffff;
  108. }
  109. .input-row .title {
  110. width: 100px;
  111. padding-left: 15px;
  112. }
  113. .input-row.border::after {
  114. position: absolute;
  115. right: 0;
  116. bottom: 0;
  117. left: 8px;
  118. height: 1px;
  119. content: '';
  120. -webkit-transform: scaleY(0.5);
  121. transform: scaleY(0.5);
  122. background-color: #c8c7cc;
  123. }
  124. .btn-row {
  125. margin-top: 10px;
  126. padding: 10px;
  127. }
  128. button.primary {
  129. background-color: #0faeff;
  130. }
  131. </style>