|
|
@@ -1,78 +1,383 @@
|
|
|
<template>
|
|
|
+ <view class="home">
|
|
|
<view class="content">
|
|
|
<Header>
|
|
|
- <template #title>ACC <span style="padding:0 12rpx;">|</span>连接钱包</template>
|
|
|
+ <template #title
|
|
|
+ >ACC <text style="padding: 0 12rpx">|</text>连接钱包</template
|
|
|
+ >
|
|
|
</Header>
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
- <image class="logo" src="/static/logo.png" />
|
|
|
-
|
|
|
- <view class="text-area">
|
|
|
- <text class="title">{{ title }}</text>
|
|
|
+ <view class="home-img">
|
|
|
+ <image src="@/static/image/trade/jinsai-icon.png" mode="widthFix" />
|
|
|
+ </view>
|
|
|
+ <view class="home-btn-box">
|
|
|
+ <view class="trade-num">奖池数量</view>
|
|
|
+ <view class="image-num">
|
|
|
+ <image src="@/static/image/trade/title-bg.png" mode="scaleToFill" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="home-code">
|
|
|
+ <view class="trade-border-box"> $0 </view>
|
|
|
+ <view class="trade-border-num">≈￥0</view>
|
|
|
+ </view>
|
|
|
+ <view class="trade-img-box">
|
|
|
+ <image src="@/static/image/trade/money-box.png" mode="aspectFit" />
|
|
|
+ </view>
|
|
|
+ <view class="trade-process"></view>
|
|
|
+ <view class="trade-time-box">
|
|
|
+ <view class="time-title"> 距离 <text>赛程 竞赛结束 </text>还有 </view>
|
|
|
+ <up-count-down
|
|
|
+ :time="30 * 60 * 60 * 1000"
|
|
|
+ format="DD:HH:mm:ss"
|
|
|
+ autoStart
|
|
|
+ millisecond
|
|
|
+ @change="onChange"
|
|
|
+ >
|
|
|
+ <view class="time-box-index">
|
|
|
+ <view class="time__item"
|
|
|
+ ><view class="time-box">{{ timeData.days }}</view> 天</view
|
|
|
+ >
|
|
|
+ <view class="time__item">
|
|
|
+ <view class="time-box">{{
|
|
|
+ timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
|
|
|
+ }}</view>
|
|
|
+ 时</view
|
|
|
+ >
|
|
|
+ <view class="time__item"
|
|
|
+ ><view class="time-box">
|
|
|
+ {{ timeData.minutes }}
|
|
|
+ </view>
|
|
|
+ 分</view
|
|
|
+ >
|
|
|
+ <view class="time__item"
|
|
|
+ ><view class="time-box">{{ timeData.seconds }}</view
|
|
|
+ >秒</view
|
|
|
+ >
|
|
|
+ </view>
|
|
|
+ </up-count-down>
|
|
|
+ <view class="start-btn">未报名</view>
|
|
|
+ <view class="num-txt">奖池数量：<text>$0</text> </view>
|
|
|
+ <view class="num-txt-small">≈￥0</view>
|
|
|
</view>
|
|
|
+ <view class="game-play-name">赛程名次</view>
|
|
|
+ <view class="game-list">
|
|
|
+ <view class="game-list-item" v-for="(item, index) in 10" :key="index">
|
|
|
+ <view class="game-item-left">
|
|
|
+ <view class="game-order-index">
|
|
|
+ <image
|
|
|
+ src="@/static/image/trade/one.png"
|
|
|
+ v-if="index == 0"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ src="@/static/image/trade/two.png"
|
|
|
+ v-if="index == 1"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ src="@/static/image/trade/three.png"
|
|
|
+ v-if="index == 2"
|
|
|
+ mode="scaleToFill"
|
|
|
+ />
|
|
|
+ <text v-if="index != 0 && index != 1 && index != 2">{{
|
|
|
+ index + 1
|
|
|
+ }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="game-order-num">
|
|
|
+ <view class="game-num-txt">0×**001</view>
|
|
|
+ <view class="game-num-num">*.00</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="game-item-btn">领取</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="fix-box">
|
|
|
+ <view class="fix-item">赛程规则</view>
|
|
|
+ <view class="fix-item">赛程名次</view>
|
|
|
</view>
|
|
|
- </template>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
|
|
|
<script setup>
|
|
|
- import { ref, onMounted } from "vue";
|
|
|
- import Header from '@/components/Header'
|
|
|
- const title = ref("Hello");
|
|
|
- import getWeb3 from "@/utils/web";
|
|
|
- onMounted(async () => {
|
|
|
- try {
|
|
|
- const web3 = await getWeb3();
|
|
|
- const accounts = await web3.eth.getAccounts();
|
|
|
- console.log("钱包地址：", accounts[0]);
|
|
|
- } catch (err) {
|
|
|
- console.error(err);
|
|
|
- }
|
|
|
- });
|
|
|
- </script>
|
|
|
+import { ref, onMounted, reactive } from "vue";
|
|
|
+import Header from "@/components/Header";
|
|
|
+import getWeb3 from "@/utils/web";
|
|
|
+// 使用 reactive 创建响应式对象
|
|
|
+const timeData = ref({});
|
|
|
+// 定义 onChange 方法
|
|
|
+const onChange = (e) => {
|
|
|
+ timeData.value = e;
|
|
|
+};
|
|
|
+onMounted(async () => {
|
|
|
+ try {
|
|
|
+ const web3 = await getWeb3();
|
|
|
+ const accounts = await web3.eth.getAccounts();
|
|
|
+ console.log("钱包地址：", accounts[0]);
|
|
|
+ } catch (err) {
|
|
|
+ console.error(err);
|
|
|
+ }
|
|
|
+});
|
|
|
+</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .content {
|
|
|
+.home {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ left: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ .fix-box {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ z-index: 99;
|
|
|
+ top: 258rpx;
|
|
|
+ .fix-item {
|
|
|
+ border-radius: 40rpx 0 0 40rpx;
|
|
|
+ background-color: #734210;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 100%;
|
|
|
+ padding: 32rpx;
|
|
|
+ // padding-top: 116rpx;
|
|
|
+ padding-top: 168rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-image: url("@/static/image/home/page-bg.jpg");
|
|
|
+ // background: url('../../static/image/home/page-bg.jpg');
|
|
|
+ background-size: 100%;
|
|
|
+ background-position: 0 0;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ .home-img {
|
|
|
+ width: 100%;
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
+ image {
|
|
|
+ width: 154rpx;
|
|
|
+ height: 154rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-btn-box {
|
|
|
+ display: flex;
|
|
|
justify-content: center;
|
|
|
- width: 100vw;
|
|
|
+ align-items: center;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ .trade-num {
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #d4ac27;
|
|
|
+ background: -webkit-gradient(
|
|
|
+ linear,
|
|
|
+ left top,
|
|
|
+ left bottom,
|
|
|
+ from(#fffbe1),
|
|
|
+ to(#d4ac27)
|
|
|
+ );
|
|
|
+ background: linear-gradient(180deg, #fffbe1 0, #d4ac27);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .image-num {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ image {
|
|
|
+ width: 208rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .logo {
|
|
|
- height: 200rpx;
|
|
|
- width: 200rpx;
|
|
|
- margin-top: 200rpx;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- margin-bottom: 50rpx;
|
|
|
+ .home-code {
|
|
|
+ margin: 24rpx 0;
|
|
|
+ width: 100%;
|
|
|
+ .trade-border-box {
|
|
|
+ width: 520rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ margin: auto;
|
|
|
+ background-image: url("@/static/image/trade/border-jinsai.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .trade-border-num {
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .text-area {
|
|
|
+ .trade-img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 384rpx;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .trade-process {
|
|
|
+ height: 131rpx;
|
|
|
+ width: 100%;
|
|
|
+ background-image: url("@/static/image/trade/process.png");
|
|
|
+ background-position: center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .trade-time-box {
|
|
|
+ margin: 24rpx 0;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #a29481;
|
|
|
+ background: #53473a;
|
|
|
+ // background: #6E573A;
|
|
|
+ border-radius: 30rpx;
|
|
|
+ width: 100%;
|
|
|
+ padding: 24rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .time-title {
|
|
|
+ text {
|
|
|
+ color: rgb(255, 214, 0);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .time-box-index {
|
|
|
+ margin-top: 13rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .time__item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .time-box {
|
|
|
+ width: 70rpx;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ background-color: #6b5d4b;
|
|
|
+ color: #f3cf9b;
|
|
|
+ margin: 0 10rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .start-btn {
|
|
|
+ height: 84rpx;
|
|
|
+ width: 190rpx;
|
|
|
+ background-image: url("@/static/image/trade/weibaoming-bg.png");
|
|
|
+ background-position: center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin: 12rpx 0;
|
|
|
+ }
|
|
|
+ .num-txt {
|
|
|
+ text {
|
|
|
+ color: rgb(255, 214, 0);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .num-txt-small {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 22rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .game-play-name {
|
|
|
+ width: 342rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ background-image: url("@/static/image/trade/trade-title-bg.png");
|
|
|
+ background-position: center center;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #f5b65f;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 700;
|
|
|
}
|
|
|
-
|
|
|
- .title {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #8f8f94;
|
|
|
+ .game-list {
|
|
|
+ width: 100%;
|
|
|
+ .game-list-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 2rpx solid #3b3630;
|
|
|
+ .game-item-left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .game-order-index {
|
|
|
+ width: 64rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #f2ce9a;
|
|
|
+ font-weight: 700;
|
|
|
+ image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .game-order-num {
|
|
|
+ .game-num-txt {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #f2ce9a;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .game-num-num {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .game-item-btn {
|
|
|
+ width: 178rpx;
|
|
|
+ height: 54rpx;
|
|
|
+ background: url("@/static/image/trade/lingqu-btn-bg.png") 50% no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: block;
|
|
|
+ color: #f7dbb1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
- </style>
|
|
|
+}
|
|
|
+</style>
|
|
|
|
