hx/pages/private/private.vue

<template>
	<view class="content">
		<top></top>
		<view class="main">
			<view class="record" @click="openRecord()">
				记
				<br />
				录
			</view>
			<image class="main-bg" src="../../static/img/sm-bg.png" mode=""></image>
			<view class="title">恒星私募</view>
			<view class="font">私募单价</view>
			<view class="num">0.5USDT</view>
			<view class="tip-title">【私募相关】</view>
			<view class="tip">
				恒星是一个集“元宇宙+NFT卡牌+DeFi+养成/经营/竞技”的加密链上游戏，是一款基于Solidity语言开发的去中心化GameFi应用，首发BSC链，基于银河系元宇宙原型，打造了一个集抽取盲盒开卡牌，NFT交易，LP质押获得收益的链上元宇宙游戏，
				结合区块链的游戏内容，铸成有价值的TCG游戏。
			</view>
		</view>
		<view class="bottom">
			<image class="bottom-bg" src="../../static/img/bottom.png" mode=""></image>
			<view class="btn" @click="nav()">私募认购</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="popup-record">
				<view class="record-title">私募记录</view>
				<view class="xian"><image src="../../static/img/xian.png" mode=""></image></view>
				<view class="record-main-title flex">
					<view class="item">认购金额</view>
					<view class="item">认购数量</view>
					<view class="item">认购时间</view>
				</view>
				<view class="record-main flex" v-for="(item, index) in 10">
					<view class="item">0.5USDT</view>
					<view class="item">1HXB</view>
					<view class="item">2022.02.10</view>
				</view>
			</view>
			<view class="popup-x" @click="closeRecord()"><image src="../../static/img/x.png" mode=""></image></view>
		</uni-popup>
		<uni-popup ref="popup1" type="center">
			<view class="popup-buy">
				<view class="record-title ">私募认购</view>
				<view class="xian"><image src="../../static/img/xian.png" mode=""></image></view>
				<view class="buy-num">
					<view class="shu"></view>
					<view class="num-font">
						私募单价：
						<text>0.5USDT</text>
					</view>
				</view>
				<view class="buy-num ren-num">
					<view class="shu"></view>
					<view class="num-font">认购金额</view>
				</view>
				<view class="buy-input">
					<input type="text" class="input" placeholder="请输入认购金额" placeholder-class="inputPlace" v-model="num" value="" />
					<view class="unit">USDT</view>
				</view>
				<view class="buy-tip">可用</view>
				<view class="buy-num ren-num">
					<view class="shu"></view>
					<view class="num-font">认购数量</view>
				</view>
				<view class="buy-input" style="padding-bottom: 18rpx;">
					<view class="input" style="color: #08EDE7;">
						0
					</view>
					<view class="unit">HXB</view>
				</view>
				<view class="btn-box">
					<view class="btn-left" @click="close()">
						取消
					</view>
					<view class="btn-right ">
						购买
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import top from '@/components/top/top.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	comments: {
		top,
		uniPopup
	},
	data() {
		return {
			num: ''
		};
	},
	methods: {
		nav() {
			this.$refs.popup1.open();
		},
		close() {
			this.$refs.popup1.close();
		},
		openRecord() {
			this.$refs.popup.open();
		},
		closeRecord() {
			this.$refs.popup.close();
		}
	}
};
</script>

<style lang="less">
page,
.content {
	height: 100%;
	background: #000;
}
.main {
	position: relative;
	width: 680rpx;
	height: 962rpx;
	margin: 0 auto 0;
	.main-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
}
.title {
	position: relative;
	z-index: 2;
	text-align: center;
	font-size: 44rpx;
	font-family: zihun100hao-fangfangxianfengti;
	font-weight: 400;
	color: #08ede7;
	line-height: 100rpx;
}
.record {
	position: absolute;
	z-index: 2;
	top: 160rpx;
	right: 0;
	background: #08ede7;
	padding: 20rpx 10rpx 20rpx 20rpx;
	border-radius: 10rpx 0px 0px 10rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #001337;
	line-height: 40rpx;
}
.font {
	position: relative;
	z-index: 2;
	margin-top: 280rpx;
	text-align: center;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.num {
	position: relative;
	z-index: 2;
	margin: 22rpx auto 0;
	width: 394rpx;
	height: 80rpx;
	background: linear-gradient(90deg, rgba(8, 237, 231, 0), #08ede7, #08ede7, rgba(8, 237, 231, 0));
	font-size: 42rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #001337;
	text-align: center;
	line-height: 80rpx;
}
.tip-title {
	position: relative;
	z-index: 2;
	margin-top: 34rpx;
	text-align: center;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
}
.tip {
	position: relative;
	z-index: 2;
	margin: 30rpx auto 0;
	width: 570rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #ffffff;
	line-height: 38rpx;
}
.bottom {
	padding-top: 182rpx;
	position: relative;
	width: 750rpx;
	height: 434rpx;
	margin-top: -118rpx;
	.bottom-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
	}
	.btn {
		position: relative;
		z-index: 3;
		margin: 0 auto;
		width: 450rpx;
		height: 76rpx;
		background: linear-gradient(0deg, #ff7206, #ffdd7e);
		box-shadow: 0px 2px 8px 0px rgba(207, 126, 57, 0.7);
		border-radius: 38rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 36rpx;
		font-family: zihun164hao-fangyuehei;
		font-weight: 400;
		color: #ffffff;
	}
}
.record-title {
	text-align: center;
	font-size: 46rpx;
	font-family: zihun100hao-fangfangxianfengti;
	font-weight: 400;
	color: #ffffff;
}
.xian {
	margin: 14rpx auto 0;
	width: 326rpx;
	height: 16rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.popup-record {
	width: 680rpx;
	height: 854rpx;
	background: linear-gradient(180deg, #254fab 0%, #230a8e 100%);
	border-radius: 20rpx;
	padding: 62rpx 34rpx 0;

	.record-main-title {
		margin-top: 60rpx;
	}
	.record-main {
		margin-top: 10rpx;
	}
	.item {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		opacity: 0.8;
	}
}
.popup-x {
	margin: 62rpx auto 0;
	width: 66rpx;
	height: 66rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.popup-buy {
	width: 630rpx;
	background: linear-gradient(180deg, #254fab 0%, #230a8e 100%);
	border-radius: 20rpx;
	padding: 68rpx 74rpx 74rpx;
	.buy-num {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 62rpx;
		.shu {
			width: 10rpx;
			height: 30rpx;
			background: #08ede7;
			border-radius: 5rpx;
		}
		.num-font {
			margin-left: 10rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			text {
				color: #08ede7;
			}
		}
	}
	.ren-num {
		margin-top: 40rpx;
	}
	.buy-input {
		display: flex;
		margin-top: 32rpx;
		justify-content: space-between;
		align-items: flex-end;
		width: 100%;
		border-bottom: 1px solid #ffffff;
		padding-bottom: 12rpx;
		.input {
			width: 90%;
			height: 40rpx;
			color: #ffffff;
			font-size: 40rpx;
		}
		.inputPlace {
			font-size: 40rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
			line-height: 38px;
			opacity: 0.35;
		}
		.unit {
			font-size: 27rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}
	.buy-tip {
		margin-top: 10rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
	}
	.btn-box {
		display: flex;
		justify-content: space-between;
		margin-top: 62rpx;
		.btn-left {
			width: 230rpx;
			height: 66rpx;
			background: #E8E8E8;
			border-radius: 10rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #001337;
		}
		.btn-right {
			width: 230rpx;
			height: 66rpx;
			background: #08EDE7;
			border-radius: 10rpx;
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #001337;
		}
	}
}
</style>