From d25a45190cee44b36296693d5022a0ce9ae9b698 Mon Sep 17 00:00:00 2001
From: zzzz <690498789@qq.com>
Date: Wed, 20 Mar 2024 17:19:05 +0800
Subject: [PATCH] 注册页面的客服地址错误
---
src/components/contract-header/index.vue | 425 ++++++++++++++++++++++++++++------------------------
1 files changed, 230 insertions(+), 195 deletions(-)
diff --git a/src/components/contract-header/index.vue b/src/components/contract-header/index.vue
index ff46e75..4674f13 100644
--- a/src/components/contract-header/index.vue
+++ b/src/components/contract-header/index.vue
@@ -1,241 +1,276 @@
<template>
- <!-- 永续合约，交割合约公共头部 -->
- <div>
- <div class="contract-header">
- <div class="pl-30 pr-30">
- <div class="flex justify-center pt-45 before">
- <div class="flex items-center justify-center ">
- <!-- <img :src="require(`@/assets/theme/${theme}/image/icon_back.png`)" class="w-35 h-35 back" alt=""
+ <!-- 永续合约，交割合约公共头部 -->
+ <div>
+ <div class="contract-header">
+ <div class="pl-30 pr-30">
+ <div class="flex pt-45 before">
+ <div class="flex items-center justify-center">
+ <!-- <img :src="require(`@/assets/theme/${theme}/image/icon_back.png`)" class="w-35 h-35 back" alt=""
@click="$router.push(`/trendDetails/${symbol}`)"> -->
- <img :src="require(`@/assets/theme/${theme}/image/convert.png`)" alt="convert-img" class="w-35 h-35"
- @click="onSidebar">
- <div class="flex pl-21 textColor" @click="onSidebar">
- <div class="font-35">{{ symbol.toUpperCase() || '--' }}/USDT</div>
- <div class="ml-15">{{ title }}</div>
- </div>
- <div class="pl-30 w-160" :class="{ 'text-green': range > 0, 'text-red': range <= 0 }">{{ range > 0 ?
- '+' : '' }}{{ range || '--' }}%</div>
- <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="$router.push(`/trendDetails/${symbol}`)"> -->
- </div>
- <!-- <div class="flex items-center">
+ <img
+ :src="require(`@/assets/theme/${theme}/image/convert.png`)"
+ alt="convert-img"
+ class="w-35 h-35"
+ @click="onSidebar"
+ />
+ <div class="flex pl-21 textColor" @click="onSidebar">
+ <div class="font-35">{{ symbol.toUpperCase() || "--" }}/USDT</div>
+ <div class="ml-15">{{ title }}</div>
+ </div>
+ <div
+ class="pl-30 w-160"
+ :class="{ 'text-green': range > 0, 'text-red': range <= 0 }"
+ >
+ {{ range > 0 ? "+" : "" }}{{ range || "--" }}%
+ </div>
+ <!-- <img src="@/assets/image/kline.png" class="w-44 h-44 right" alt="" @click="$router.push(`/trendDetails/${symbol}`)"> -->
+ </div>
+ <!-- <div class="flex items-center">
<img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35"
@click="jump" />
</div> -->
- </div>
- <div class="flex justify-between pt-34">
- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
- :class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
- {{ $t('永续合约') }}</button>
- <button class="tabBtn w-368 h-74 lh-74 border-none rounded"
- :class="selectIndex == 2 ? 'select-active' : 'no-select'" @click="changeTab(2)">
- {{ $t('交割合约') }}</button>
- </div>
- </div>
</div>
- <!-- 左侧边弹出菜单 -->
- <van-popup class="popup" round v-model="show" close-icon-position="top-left" position="left" @closed="onClose">
- <div class="pl-42 border-b-color pt-48 pb-48">
- <div class="textColor">
- <span class="font-bold font-45 mr-12">{{ title }} {{ $t('合约') }}</span>
- <span class="font-30">/ USDT</span>
- </div>
- </div>
- <div class="pl-42 pr-40">
- <div class="flex justify-between mb-42 mt-53">
- <div class="flex items-center text-grey">
- <div class="mr-12">{{ $t('名称') }}</div>
- </div>
- <div class="flex text-grey">
- <div class="flex items-center">
- <div class="">{{ $t('最新价格') }}</div>
- </div>
- <div class="flex items-center">
- <div class="mr-12">/24H{{ $t('涨跌') }}</div>
- </div>
- </div>
- </div>
- <div class="flex justify-between mb-50" v-for="item in list" :key="item.name" @click="onRoute(item)">
- <div>
- <div class="textColor">{{ item.name }}</div>
- <div class="text-grey mt-10">{{ selectIndex == 1 ? $t('永续') : $t('交割') }}</div>
- </div>
- <div class="text-right">
- <div class="textColor">{{ item.close }}</div>
- <div class="mt-10" :class="item.change_ratio > 0 ? 'text-green' : 'text-red'">
- {{ item.change_ratio || (item.change_ratio === 0 ? 0 : '--') }}%
- </div>
- </div>
- </div>
- </div>
- </van-popup>
+ <div class="flex justify-between pt-34">
+ <button
+ class="w-368 h-74 lh-74"
+ :class="selectIndex == 1 ? 'select-active' : 'no-select'"
+ @click="changeTab(1)"
+ >
+ {{ $t("永续合约") }}
+ </button>
+ <button
+ class="w-368 h-74 lh-74"
+ :class="selectIndex == 2 ? 'select-active' : 'no-select'"
+ @click="changeTab(2)"
+ >
+ {{ $t("交割合约") }}
+ </button>
+ </div>
+ </div>
</div>
+ <!-- 左侧边弹出菜单 -->
+ <van-popup
+ class="popup"
+ round
+ v-model="show"
+ close-icon-position="top-left"
+ position="left"
+ @closed="onClose"
+ >
+ <div class="pl-42 border-b-color pt-48 pb-48">
+ <div class="textColor">
+ <span class="font-bold font-45 mr-12"
+ >{{ title }} {{ $t("合约") }}</span
+ >
+ <span class="font-30">/ USDT</span>
+ </div>
+ </div>
+ <div class="pl-42 pr-40">
+ <div class="flex justify-between mb-42 mt-53">
+ <div class="flex items-center text-grey">
+ <div class="mr-12">{{ $t("名称") }}</div>
+ </div>
+ <div class="flex text-grey">
+ <div class="flex items-center">
+ <div class="">{{ $t("最新价格") }}</div>
+ </div>
+ <div class="flex items-center">
+ <div class="mr-12">/24H{{ $t("涨跌") }}</div>
+ </div>
+ </div>
+ </div>
+ <div
+ class="flex justify-between mb-50"
+ v-for="item in list"
+ :key="item.name"
+ @click="onRoute(item)"
+ >
+ <div>
+ <div class="textColor">{{ item.name }}</div>
+ <div class="text-grey mt-10">
+ {{ selectIndex == 1 ? $t("永续") : $t("交割") }}
+ </div>
+ </div>
+ <div class="text-right">
+ <div class="textColor">{{ item.close }}</div>
+ <div
+ class="mt-10"
+ :class="item.change_ratio > 0 ? 'text-green' : 'text-red'"
+ >
+ {{ item.change_ratio || (item.change_ratio === 0 ? 0 : "--") }}%
+ </div>
+ </div>
+ </div>
+ </div>
+ </van-popup>
+ </div>
</template>
<script>
import { Popup } from "vant";
import { mapGetters } from "vuex";
import { _getHomeList } from "@/API/home.api";
-import { setStorage } from '@/utils/utis'
+import { setStorage } from "@/utils/utis";
export default {
- name: "contractHeader",
- props: {
- backFunc: {
- type: Function,
- default: null
- },
- balance: { // 余额
- type: [String, Number],
- default: 0.00
- },
- // title:{
- // type:String,
- // default:''
- // },
- symbol: {
- type: String,
- default: ''
- },
- range: {
- type: String,
- defalult: ''
- },
- selectIndex: {
- type: [String, Number],
- defalult: ''
- },
+ name: "contractHeader",
+ props: {
+ backFunc: {
+ type: Function,
+ default: null,
},
- components: {
- [Popup.name]: Popup,
+ balance: {
+ // 余额
+ type: [String, Number],
+ default: 0.0,
},
- computed: {
- ...mapGetters({
- coinList: 'home/coinList',
- theme: 'home/theme'
- }),
- title() {
- return [this.$t('永续'), this.$t('交割')][this.selectIndex - 1]
+ // title:{
+ // type:String,
+ // default:''
+ // },
+ symbol: {
+ type: String,
+ default: "",
+ },
+ range: {
+ type: String,
+ defalult: "",
+ },
+ selectIndex: {
+ type: [String, Number],
+ defalult: "",
+ },
+ },
+ components: {
+ [Popup.name]: Popup,
+ },
+ computed: {
+ ...mapGetters({
+ coinList: "home/coinList",
+ theme: "home/theme",
+ }),
+ title() {
+ return [this.$t("永续"), this.$t("交割")][this.selectIndex - 1];
+ },
+ },
+ data() {
+ return {
+ // selectIndex2:this.selectIndex,
+ show: false,
+ timeout: null,
+ // title: '',
+ list: [
+ // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
+ // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
+ // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
+ ],
+ };
+ },
+ created() {
+ // this.coins = this.coinList.map(item => item.symbol)
+ // console.log('this.coins', this.coins)
+ },
+ methods: {
+ onRoute(item) {
+ if (this.$route.params.symbol !== item.symbol) {
+ this.$router.push(`/perpetualContract/${item.symbol}`);
+ this.$emit("update-coin", item.symbol);
+ setStorage("symbol", item.symbol);
+ this.onClose();
+ this.$forceUpdate();
+ }
+ this.show = false;
+ },
+ onSidebar() {
+ // 侧边栏打开
+ console.log(this.userInfo);
+ this.coins = this.coinList.map((item) => item.symbol);
+ this.show = true;
+ this.fetchList();
+ },
+ fetchList() {
+ // 获取行情
+ _getHomeList(this.coins.join(",")).then((list) => {
+ // console.log(list)
+ this.list = list;
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ this.timeout = null;
}
+ this.timeout = setTimeout(() => {
+ this.fetchList();
+ }, 1000);
+ });
},
- data() {
- return {
- // selectIndex2:this.selectIndex,
- show: false,
- timeout: null,
- // title: '',
- list: [
- // { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
- // { name:"XTZ/USDT",close:"1.568",change_ratio:"-7.1"},
- // { name:"ADA/USDT",close:"0.493085",change_ratio:"-4.08"},
- ]
- }
+ onClose() {
+ if (this.timeout) {
+ clearTimeout(this.timeout);
+ this.timeout = null;
+ }
},
- created() {
- // this.coins = this.coinList.map(item => item.symbol)
- // console.log('this.coins', this.coins)
+ jump() {
+ this.$router.push(`/trendDetails/${this.symbol}`);
},
- methods: {
- onRoute(item) {
- if (this.$route.params.symbol !== item.symbol) {
- this.$router.push(`/perpetualContract/${item.symbol}`)
- this.$emit('update-coin', item.symbol)
- setStorage('symbol', item.symbol)
- this.onClose()
- this.$forceUpdate()
- }
- this.show = false
- },
- onSidebar() { // 侧边栏打开
- console.log(this.userInfo)
- this.coins = this.coinList.map(item => item.symbol)
- this.show = true
- this.fetchList()
- },
- fetchList() { // 获取行情
- _getHomeList(this.coins.join(',')).then(list => {
- // console.log(list)
- this.list = list
- if (this.timeout) {
- clearTimeout(this.timeout)
- this.timeout = null
- }
- this.timeout = setTimeout(() => {
- this.fetchList()
- }, 1000)
- })
- },
- onClose() {
- if (this.timeout) {
- clearTimeout(this.timeout)
- this.timeout = null
- }
- },
- jump() {
- this.$router.push(`/trendDetails/${this.symbol}`)
- },
- changeTab(index) {
- this.$emit('tab', index)
- // this.selectIndex2 = index;
- },
-
- }
-}
-
+ changeTab(index) {
+ this.$emit("tab", index);
+ // this.selectIndex2 = index;
+ },
+ },
+};
</script>
<style lang="scss" scoped>
+@import "@/assets/init.scss";
+
.before {
- position: relative;
+ position: relative;
- .back {
- position: absolute;
- left: 0;
- }
+ .back {
+ position: absolute;
+ left: 0;
+ }
- .right {
- position: absolute;
- right: 0;
- }
+ .right {
+ position: absolute;
+ right: 0;
+ }
}
-
.wallet-background {
- background-color: #E8E8E8;
+ background-color: #e8e8e8;
}
.tabBtn {
- // border-radius: 8px;
- border: 1px solid #909090;
- color: #868D9A;
- background: transparent;
+ // border-radius: 8px;
+ border: 1px solid #909090;
+ color: #868d9a;
+ background: transparent;
}
.select-active {
- background-color: transparent;
-
- color: white !important;
-
- @include themify() {
- background: themed("color_main");
- }
-
- border: none;
+ background-color: transparent;
+ border: 0px;
+ color: $newcolor;
}
-.no-select {}
+.no-select {
+ background-color: transparent;
+ border: 0px;
+ color: $newcolor1;
+}
// 弹出层样式
.popup {
- height: 100%;
- width: 670px;
+ height: 100%;
+ width: 670px;
- @include themify() {
- background: themed("main_background");
- }
+ @include themify() {
+ background: themed("main_background");
+ }
}
.border-b-color {
- @include themify() {
- border-bottom: 1px solid themed("border_color");
- }
+ @include themify() {
+ border-bottom: 1px solid themed("border_color");
+ }
}
</style>
--
Gitblit v1.9.3