drawer.vue 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <template>
  2. <uni-popup ref="popupRef" type="left">
  3. <view class="drawer-box">
  4. <view :style="{'width': '100%', 'height': `${statusBarHeight}px`}"></view>
  5. <view class="drawer-content">
  6. <view class="drawer-search">
  7. <view class="drawer-search-inp">
  8. <u-icon name="search" class="search-icon" color="#666" size="20"></u-icon>
  9. <input class="search-inp" placeholder-class="search-place" type="text" placeholder="搜索">
  10. </view>
  11. </view>
  12. <view class="drawer-tab">
  13. <view class="tab-box">
  14. <view :class="['tab-item' , 'active-tab-item']">
  15. 自选
  16. </view>
  17. <view class="tab-item">
  18. 市场
  19. </view>
  20. </view>
  21. <u-icon name="edit-pen" class="search-icon" color="#666" size="24"></u-icon>
  22. </view>
  23. <uni-table class="table-box" emptyText="暂无更多数据">
  24. <!-- 表头行 -->
  25. <uni-tr>
  26. <uni-th>交易对</uni-th>
  27. <uni-th>最新价</uni-th>
  28. <uni-th>日涨跌</uni-th>
  29. </uni-tr>
  30. <!-- 表格数据行 -->
  31. <uni-tr v-for="item in 5">
  32. <uni-td>
  33. <view class="name">
  34. <text class="name-text">BTC</text>
  35. <text class="name-tag">/USDT</text>
  36. </view>
  37. </uni-td>
  38. <uni-td>298587458</uni-td>
  39. <uni-td>+1.11%</uni-td>
  40. </uni-tr>
  41. </uni-table>
  42. </view>
  43. </view>
  44. </uni-popup>
  45. </template>
  46. <script>
  47. import {
  48. mapGetters
  49. } from 'vuex'
  50. export default {
  51. data() {
  52. return {
  53. };
  54. },
  55. computed: {
  56. ...mapGetters([
  57. 'statusBarHeight'
  58. ]),
  59. },
  60. mounted() {
  61. // this.$refs.popupRef.open()
  62. },
  63. methods: {
  64. open() {
  65. this.$nextTick(() => {
  66. this.$refs.popupRef.open();
  67. })
  68. }
  69. }
  70. }
  71. </script>
  72. <style lang="scss" scoped>
  73. .drawer-box {
  74. width: 75vw;
  75. height: 100vh;
  76. display: flex;
  77. flex-direction: column;
  78. .drawer-content {
  79. flex: 1;
  80. width: 100%;
  81. background-color: #fff;
  82. .drawer-search {
  83. padding: 20rpx $pages-padding 0;
  84. .drawer-search-inp {
  85. width: 100%;
  86. height: 70rpx;
  87. background-color: #ccc;
  88. border-radius: 35rpx;
  89. display: flex;
  90. align-items: center;
  91. padding: 0 20rpx;
  92. font-size: 28rpx;
  93. color: #1a1a1a;
  94. .search-place {
  95. font-size: 28rpx;
  96. color: #1a1a1a;
  97. }
  98. }
  99. }
  100. .drawer-tab {
  101. padding: 0 6rpx 0 $pages-padding;
  102. width: 100%;
  103. height: 80rpx;
  104. border-bottom: 1rpx solid #f2f2f2;
  105. display: flex;
  106. justify-content: space-between;
  107. align-items: center;
  108. .tab-box {
  109. display: flex;
  110. align-items: stretch;
  111. height: 100%;
  112. .tab-item {
  113. margin-right: 40rpx;
  114. font-size: 26rpx;
  115. font-family: PingFang SC, PingFang SC-Bold;
  116. font-weight: 700;
  117. color: #808080;
  118. height: 100%;
  119. line-height: 80rpx;
  120. }
  121. .active-tab-item {
  122. position: relative;
  123. font-weight: 600;
  124. color: #20b482;
  125. &::before {
  126. content: '';
  127. position: absolute;
  128. left: 50%;
  129. bottom: 0;
  130. width: 80%;
  131. height: 2px;
  132. border-radius: 1px;
  133. background-color: #20b482;
  134. transform: translateX(-50%);
  135. }
  136. }
  137. }
  138. }
  139. .table-box {
  140. width: 100%;
  141. .uni-table-tr {
  142. .uni-table-th {
  143. font-size: 24rpx;
  144. font-weight: 400;
  145. border-bottom: none;
  146. }
  147. .uni-table-td {
  148. font-size: 26rpx;
  149. font-family: PingFang SC, PingFang SC-Bold;
  150. font-weight: 800;
  151. color: #1a1a1a;
  152. .name {
  153. .name-text {}
  154. .name-tag {
  155. font-size: 22rpx;
  156. font-weight: 300;
  157. }
  158. }
  159. &:nth-child(3n - 1) {}
  160. &:nth-child(3n) {
  161. color: #20b482;
  162. }
  163. }
  164. .uni-table-th,
  165. .uni-table-td {
  166. flex-shrink: 0;
  167. &:nth-child(3n - 2) {
  168. flex: 6;
  169. padding-left: $pages-padding;
  170. }
  171. &:nth-child(3n - 1) {
  172. flex: 2;
  173. text-align: right !important;
  174. }
  175. &:nth-child(3n) {
  176. flex: 2;
  177. padding-right: $pages-padding;
  178. text-align: right !important;
  179. }
  180. }
  181. }
  182. }
  183. }
  184. }
  185. </style>