BiKing/pages/contract/modules/drawer.vue

<template>
	<uni-popup ref="popupRef" type="left">

		<view class="drawer-box">
			<view :style="{'width': '100%', 'height': `${statusBarHeight}px`}"></view>
			<view class="drawer-content">
				<view class="drawer-search">
					<view class="drawer-search-inp">
						<u-icon name="search" class="search-icon" color="#666" size="20"></u-icon>
						<input class="search-inp" placeholder-class="search-place" type="text" placeholder="搜索">
					</view>
				</view>
				<view class="drawer-tab">
					<view class="tab-box">
						<view :class="['tab-item' , 'active-tab-item']">
							自选
						</view>
						<view class="tab-item">
							市场
						</view>
					</view>
					<u-icon name="edit-pen" class="search-icon" color="#666" size="24"></u-icon>
				</view>

				<uni-table class="table-box" emptyText="暂无更多数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th>交易对</uni-th>
						<uni-th>最新价</uni-th>
						<uni-th>日涨跌</uni-th>
					</uni-tr>
					<!-- 表格数据行 -->
					<uni-tr v-for="item in 5">
						<uni-td>
							<view class="name">
								<text class="name-text">BTC</text>
								<text class="name-tag">/USDT</text>
							</view>
						</uni-td>
						<uni-td>298587458</uni-td>
						<uni-td>+1.11%</uni-td>
					</uni-tr>

				</uni-table>

			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapGetters([
				'statusBarHeight'
			]),

		},
		mounted() {
			// this.$refs.popupRef.open()
		},
		methods: {
			open() {
				this.$nextTick(() => {
					this.$refs.popupRef.open();
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.drawer-box {
		width: 75vw;
		height: 100vh;
		display: flex;
		flex-direction: column;

		.drawer-content {
			flex: 1;
			width: 100%;
			background-color: #fff;

			.drawer-search {
				padding: 20rpx $pages-padding 0;

				.drawer-search-inp {
					width: 100%;
					height: 70rpx;
					background-color: #ccc;
					border-radius: 35rpx;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
					font-size: 28rpx;
					color: #1a1a1a;

					.search-place {
						font-size: 28rpx;
						color: #1a1a1a;

					}
				}
			}

			.drawer-tab {
				padding: 0 6rpx 0 $pages-padding;
				width: 100%;
				height: 80rpx;
				border-bottom: 1rpx solid #f2f2f2;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tab-box {
					display: flex;
					align-items: stretch;
					height: 100%;

					.tab-item {
						margin-right: 40rpx;
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #808080;
						height: 100%;
						line-height: 80rpx;
					}

					.active-tab-item {
						position: relative;
						font-weight: 600;
						color: #20b482;

						&::before {
							content: '';
							position: absolute;
							left: 50%;
							bottom: 0;
							width: 80%;
							height: 2px;
							border-radius: 1px;
							background-color: #20b482;
							transform: translateX(-50%);
						}

					}
				}
			}

			.table-box {
				width: 100%;

				.uni-table-tr {
					.uni-table-th {
						font-size: 24rpx;
						font-weight: 400;
						border-bottom: none;
					}

					.uni-table-td {
						font-size: 26rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 800;
						color: #1a1a1a;
						.name {
							.name-text {}

							.name-tag {
								font-size: 22rpx;
								font-weight: 300;
							}

						}

						&:nth-child(3n - 1) {}

						&:nth-child(3n) {
							color: #20b482;
						}
					}

					.uni-table-th,
					.uni-table-td {
						flex-shrink: 0;

						&:nth-child(3n - 2) {
							flex: 6;
							padding-left: $pages-padding;
						}

						&:nth-child(3n - 1) {
							flex: 2;
							text-align: right !important;
						}

						&:nth-child(3n) {
							flex: 2;
							padding-right: $pages-padding;
							text-align: right !important;
						}
					}
				}
			}


		}
	}
</style>