|
|
@@ -0,0 +1,376 @@
|
|
|
+<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>
|
