From c34c87ff6bf310e461ae27c1988d39baef208da8 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Wed, 17 Apr 2024 16:25:28 +0800
Subject: [PATCH] first
---
src/page/recharge/rechargeList.vue | 229 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 130 insertions(+), 99 deletions(-)
diff --git a/src/page/recharge/rechargeList.vue b/src/page/recharge/rechargeList.vue
index fa2cdac..02d1325 100644
--- a/src/page/recharge/rechargeList.vue
+++ b/src/page/recharge/rechargeList.vue
@@ -1,30 +1,56 @@
<template>
- <div class="recharge box-border">
- <assets-head :title="$t('充值通道')">
- <img src="../../assets/image/assets-center/exchange.png" alt="exchange-img" class="w-44 h-38"
- @click="goRouter('/assetsCenter/rechargeWithdrawRecord?back=1')" />
- </assets-head>
- <div class="pl-36 pr-36">
- <div class="recharge-title font-35 textColor">{{ $t('请选择充值币种') }}</div>
- <div class="recharge-list flex justify-between">
- <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
- @click="selectSymbol('usdt')">
- <img src="../../assets/image/symbol/usdt.png" class="w-92 h-92" />
- <div class="text-grey font-26 mt-32">{{ $t('USDT充值') }}</div>
- </div>
- <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
- @click="selectSymbol('btc')">
- <img src="../../assets/image/symbol/btc.png" class="w-92 h-92" />
- <div class="text-grey font-26 mt-32">{{ $t('BTC充值') }}</div>
- </div>
- <div class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
- @click="selectSymbol('eth')">
- <img src="../../assets/image/symbol/eth.png" class="w-92 h-92" />
- <div class="text-grey font-26 mt-32">{{ $t('ETH充值') }}</div>
- </div>
- </div>
+ <div class="recharge box-border">
+ <assets-head :title="$t('充值通道')">
+ <img
+ src="../../assets/image/assets-center/exchange.png"
+ alt="exchange-img"
+ class="w-44 h-38"
+ @click="goRouter('/assetsCenter/rechargeWithdrawRecord?back=1')"
+ />
+ </assets-head>
+ <div class="pl-36 pr-36">
+ <div class="recharge-title font-35 textColor">
+ {{ $t("请选择充值币种") }}
+ </div>
+ <div class="recharge-list flex">
+ <div
+ class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
+ @click="selectSymbol('usdt')"
+ >
+ <img src="../../assets/image/symbol/usdt.png" class="w-92 h-92" />
+ <div class="text-grey font-26 mt-32">{{ $t("USDT充值") }}</div>
</div>
-<!-- <div class="textColor mt-40">
+ <div
+ class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
+ @click="selectSymbol('btc')"
+ >
+ <img src="../../assets/image/symbol/btc.png" class="w-92 h-92" />
+ <div class="text-grey font-26 mt-32">{{ $t("BTC充值") }}</div>
+ </div>
+ <div
+ class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
+ @click="selectSymbol('eth')"
+ >
+ <img src="../../assets/image/symbol/eth.png" class="w-92 h-92" />
+ <div class="text-grey font-26 mt-32">{{ $t("ETH充值") }}</div>
+ </div>
+ <div
+ class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
+ @click="selectSymbol('usdc')"
+ >
+ <img src="../../assets/image/symbol/usdc.png" class="w-92 h-92" />
+ <div class="text-grey font-26 mt-32">{{ $t("USDC充值") }}</div>
+ </div>
+ <div
+ class="item-view flex flex-col items-center justify-center text-center w-189 h-220 box-border"
+ @click="selectSymbol('bnb')"
+ >
+ <img src="../../assets/image/symbol/bnb.png" class="w-92 h-92" />
+ <div class="text-grey font-26 mt-32">{{ $t("BNB充值") }}</div>
+ </div>
+ </div>
+ </div>
+ <!-- <div class="textColor mt-40">
<div class="pl-36 pr-36 h-90 lh-90 border-b-color flex justify-between" v-for="(item, index) in list"
:key="index" @click="toPath(item.url)">
<div class="flex items-center">
@@ -36,96 +62,101 @@
</div>
</div>
</div> -->
- </div>
+ </div>
</template>
<script>
import assetsHead from "@/components/assets-head";
-import { Icon } from 'vant';
+import { Icon } from "vant";
export default {
- name: 'rechageList',
- components: {
- assetsHead,
- [Icon.name]: Icon,
- },
- data() {
- return {
- list: [
- {
- name: 'Huobi',
- url: 'https://www.huobi.com/en-us/',
- imgPath: require('../../assets/image/huobi.png')
- },
- {
- name: 'Binance',
- url: 'https://www.binance.com/en',
- imgPath: require('../../assets/image/bian.png')
- },
- {
- name: 'Coinbase',
- url: 'https://www.coinbase.com/',
- imgPath: require('../../assets/image/coinbase.png')
- },
- {
- name: 'Crypto',
- url: 'https://www.crypto.com/',
- imgPath: require('../../assets/image/crypto.png')
- }
- ]
- }
- },
- created() {
-
- },
- methods: {
- toPath(url) {
- const a = document.createElement('a');
- a.href = url;
- a.target = "_bank";
- document.body.append(a);
- a.click();
- document.body.removeChild(a)
- // if (navigator.userAgent.search('Html5Plus') != -1) {
- // plus.runtime.openURL(url)
- // } else {
- // window.open(url)
- // }
+ name: "rechageList",
+ components: {
+ assetsHead,
+ [Icon.name]: Icon,
+ },
+ data() {
+ return {
+ list: [
+ {
+ name: "Huobi",
+ url: "https://www.huobi.com/en-us/",
+ imgPath: require("../../assets/image/huobi.png"),
},
- onClickLeft() {
- this.$router.go(-1);
+ {
+ name: "Binance",
+ url: "https://www.binance.com/en",
+ imgPath: require("../../assets/image/bian.png"),
},
- selectSymbol(symbol) {
- this.$router.push({
- path: "/recharge/rechargePage",
- query: {
- 'symbol': symbol
- }
- });
+ {
+ name: "Coinbase",
+ url: "https://www.coinbase.com/",
+ imgPath: require("../../assets/image/coinbase.png"),
},
- goRouter(params) {
- this.$router.push({
- path: params
- });
- }
- }
-}
+ {
+ name: "Crypto",
+ url: "https://www.crypto.com/",
+ imgPath: require("../../assets/image/crypto.png"),
+ },
+ ],
+ };
+ },
+ created() {},
+ methods: {
+ toPath(url) {
+ const a = document.createElement("a");
+ a.href = url;
+ a.target = "_bank";
+ document.body.append(a);
+ a.click();
+ document.body.removeChild(a);
+ // if (navigator.userAgent.search('Html5Plus') != -1) {
+ // plus.runtime.openURL(url)
+ // } else {
+ // window.open(url)
+ // }
+ },
+ onClickLeft() {
+ this.$router.go(-1);
+ },
+ selectSymbol(symbol) {
+ this.$router.push({
+ path: "/recharge/rechargePage",
+ query: {
+ symbol: symbol,
+ },
+ });
+ },
+ goRouter(params) {
+ this.$router.push({
+ path: params,
+ });
+ },
+ },
+};
</script>
<style lang="scss" scoped>
.recharge {
- width: 100%;
- box-sizing: border-box;
+ width: 100%;
+ box-sizing: border-box;
}
.recharge-title {
- margin: 86px 0 104px 0;
+ margin: 86px 0 104px 0;
}
-.recharge-list>div {
- @include themify() {
- border: 2px solid themed("bg_dark");
- }
+.recharge-list {
+ flex-wrap: wrap;
+ .item-view {
+ margin: 0 20px;
+ margin-bottom: 20px;
+ }
+}
+.recharge-list > div {
+ @include themify() {
+ border: 2px solid themed("bg_dark");
+ }
- border-radius: 15px;
- box-sizing: border-box;
+ border-radius: 15px;
+ box-sizing: border-box;
}
</style>
--
Gitblit v1.9.3