BiKing/pages/exchange/index.vue

<template>
	<view class="page-box">
		<headContent>

			<template #content>
				<view class="haed-title">
					闪电兑换
				</view>
			</template>
			<template #right>
				<share></share>
			</template>
		</headContent>

		<view class="box">
			<view class="exchange-box">
				<view class="">
					<view class="exchange-item">
						<view class="exchange-coin">
							<image class="coin-icon" src="../../static/logo.png" mode="aspectFit"></image>
							<text class="coin-name">USDTV</text>
							<text class="coin-ratio">0.09</text>
						</view>
						<text class="max-title">最大</text>
					</view>
					<view class="exchange-item">
						可用余额:0.0914USDT
					</view>
				</view>
				<view class="exchange-item">
					<view class="exchange-coin">
						<image class="coin-icon" src="../../static/logo.png" mode="aspectFit"></image>
						<text class="coin-name">USDTV</text>
					</view>
				</view>
				<view class="exchange-switch">
					<image class="switch-icon" src="../../static/logo.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="exchange-btn">预览兑换结果</view>

			<view class="exchange-hint">
				<view class="hint-title">兑换规则</view>
				<view class="hint-content">
					市场汇率可能变动，请以实际到账的资产数量为准：
				</view>
				<view class="hint-content">
					兑换汇率由第三方制定，由于兑换成本及市场波动，您兑换的汇率可能会高于市场汇率，请仔细确认后进行操作:
				</view>
				<view class="hint-content">
					平台不收取手续费，每笔兑换由第三方钱包收取基础0.3%的手续费，用于支付在交易所兑换成本。
				</view>
			</view>
		</view>
		<selectCoin ref="selectCoin"/>
	</view>
</template>

<script>
	import share from "@/components/headModules/share.vue"
	import selectCoin from "./modules/select-coin.vue" 
	export default {
		name: 'exchange',
		components: {
			share,
			selectCoin
		},
		data() {
			return {

			};
		}
	}
</script>
<style>
	page{
		background-color: #EDEDEF;
	}
</style>
<style lang="scss" scoped>
	 

	.box {
		padding: 36rpx 30rpx 0;

		.exchange-box {
			width: 690rpx;
			min-height: 287rpx;
			background: #f6f7fb;
			border-radius: 10rpx;
			padding: 39rpx 30rpx 34rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;

			.exchange-switch {
				position: absolute;
				right: 78rpx;
				bottom: 82rpx;
				width: 84rpx;
				height: 84rpx;
				background: #05c175;
				border-radius: 29rpx;

				.switch-icon {
					width: 100%;
					height: 100%;
				}
			}

			.exchange-item {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.exchange-coin {
					display: flex;
					align-items: center;

					.coin-icon {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
					}

					.coin-name {
						padding-left: 13rpx;

						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #1a1a1a;
						line-height: 44rpx;
					}

					.coin-ratio {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						color: #1a1a1a;
						line-height: 40rpx;
						border-left: 1rpx solid #e6e6e6;
						padding-left: 24rpx;
						margin-left: 20rpx;
					}
				}

				.max-title {

					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #05c175;
					line-height: 40rpx;
				}
			}

			.exchange-item {
				padding-top: 11rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #999999;
			}
		}

		.exchange-btn {
			margin-top: 68rpx;
			width: 690rpx;
			height: 90rpx;
			background: #dbdce0;
			border-radius: 8rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #1a1a1a;
		}

		.exchange-hint {
			width: 100%;
			padding-top: 97rpx;

			.hint-title {

				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				color: #1a1a1a;
			}
			.hint-content{
				padding: 24rpx 0 11rpx;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #808080;
			}
		}
	}
</style>