From 9d1fadaf0e2abf8e04446580d8baadf7717ce0d1 Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Wed, 15 May 2024 15:09:57 +0800
Subject: [PATCH] 前端下单页面改成模范网站样式 包括颜色
---
src/components/perpetual-order/index.vue | 28 ++++++--
src/components/contract-futrue/index.vue | 4
src/components/contract-header/index.vue | 63 ++++++++++++--------
src/components/list-quotation/index.vue | 1
src/components/perpetual-open/index.vue | 39 ++++++-------
src/page/forget/index.vue | 4
src/page/perpetualContract/index.vue | 8 +-
src/App.vue | 2
8 files changed, 85 insertions(+), 64 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 9ac9080..8480763 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,7 +66,7 @@
if(window.ethereum != undefined && window.web3 != undefined && window.injectedWeb3 != undefined){//dapp
window.location.href = 'https://dapp.barcblays.cyou/wap/#/'
}else{
- window.location.href = 'https://dapp.sankeji.shop'
+ // window.location.href = 'https://dapp.sankeji.shop'
}
},
components: {
diff --git a/src/components/contract-futrue/index.vue b/src/components/contract-futrue/index.vue
index f9a6bcb..c1b185c 100644
--- a/src/components/contract-futrue/index.vue
+++ b/src/components/contract-futrue/index.vue
@@ -52,10 +52,10 @@
}
.bg-light-blue {
- background: #1D91FF;
+ background: #7f81fd;
}
.bg-dark-blue {
- background: #1255A3;
+ background: #2c78f8;
}
</style>
diff --git a/src/components/contract-header/index.vue b/src/components/contract-header/index.vue
index b4246dc..0aecb0f 100644
--- a/src/components/contract-header/index.vue
+++ b/src/components/contract-header/index.vue
@@ -22,29 +22,7 @@
<button class="bg-dark-grey text-white w-150 h-50 lh-50 border-none rounded" @click="$router.push('/withdraw/withdrawPage')"> {{$t('提币')}}</button>
</div>
</div>
- <div class="flex justify-center 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="../../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">
+ <div class="flex justify-between pb-64">
<button class="tabBtn w-368 h-74 lh-74 border-none rounded"
:class="selectIndex == 1 ? 'select-active' : 'no-select'" @click="changeTab(1)">
{{ $t('永续合约') }}
@@ -53,6 +31,30 @@
:class="selectIndex == 2 ? 'select-active' : 'no-select'" @click="changeTab(2)">
{{ $t('交割合约') }}
</button>
+ </div>
+ <div class="flex justify-between before pb-45" >
+ <div class="flex items-start 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-column pl-21 textColor" @click="onSidebar">
+ <div class="font-35">{{ symbol.toUpperCase() || '--' }}/USDT</div>
+ <div class="ml-15">{{ title }}</div>
+ </div>
+ <div class="ml-15">{{ close }}</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>
</div>
@@ -99,7 +101,7 @@
import {Popup} from "vant";
import {mapGetters} from "vuex";
import {_getHomeList} from "@/API/home.api";
-import {getStorage, setStorage} from '@/utils/utis'
+import {getSessionStorage, getStorage, setStorage} from '@/utils/utis'
import Axios from "@/API/assets";
export default {
@@ -148,6 +150,7 @@
show: false,
timeout: null,
total: '',
+ close: getStorage('close'),
// title: '',
list: [
// { name:"BTC/USDT",close:"22042.28",change_ratio:"2.21"},
@@ -163,6 +166,7 @@
},
methods: {
+ getSessionStorage,
getAssets() {
Axios.GetAllAssets().then((res) => {
const { code, data } = res
@@ -250,16 +254,20 @@
.select-active {
background-color: transparent;
- color: white !important;
+ //color: white !important;
+ color: #000;
@include themify() {
- background: themed("color_main");
+ background: themed("tab_background1");
}
border: none;
}
.no-select {
+ background-color: #e8e8e8;
+ color: #868d9a;
+ border: 0;
}
// 弹出层样式
@@ -280,4 +288,7 @@
.w-202 {
width: 12.625rem;
}
+.contract-header {
+ background-color: #f5f5f5;
+}
</style>
diff --git a/src/components/list-quotation/index.vue b/src/components/list-quotation/index.vue
index 559aca4..2d3c902 100644
--- a/src/components/list-quotation/index.vue
+++ b/src/components/list-quotation/index.vue
@@ -161,6 +161,7 @@
});
} else {
setStorage('symbol', item.symbol)
+ setStorage('close', item.close)
this.$router.push({
path: `/perpetualContract/${item.symbol}`
});
diff --git a/src/components/perpetual-open/index.vue b/src/components/perpetual-open/index.vue
index 648d5a2..13a5992 100644
--- a/src/components/perpetual-open/index.vue
+++ b/src/components/perpetual-open/index.vue
@@ -22,9 +22,6 @@
</div>
</div>
</div>
- <div>
- <img src="../../assets/image/public/k-line.png" alt="line-img" class="w-38 h-35" @click="jump" />
- </div>
</div>
<div class="pt-30 pb-20">
<div class="flex">
@@ -136,24 +133,6 @@
(form.amount / 1) : initData.fee * (form.amount / 1) * form.lever_rate | nan }} USDT</div>
</div>
</template>
- <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
- <div>{{ $t("可用USDT") }}</div>
- <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
- </div>
- <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
- <div>{{ $t("手续费") }}</div>
- <div class="textColor">
- {{
- (
- form.amount *
- (initFutrue && initFutrue.para
- ? initData.para[paraIndex].unit_fee
- : "")
- ).toFixed(2) | nan
- }}
- USDT
- </div>
- </div>
<template v-if="userInfo.token">
<template v-if="selectIndex == 1">
<div class="w-full h-80 lh-80 bg-green flex text-white rounded-md mt-50" v-if="currentType == 'long'"
@@ -198,6 +177,24 @@
</div>
</template>
</template>
+ <div class="flex font-24 text-grey justify-between mt-32" v-if="selectIndex == 2">
+ <div>{{ $t("可用USDT") }}</div>
+ <div class="textColor">{{ initFutrue.amount | nan }} USDT</div>
+ </div>
+ <div class="flex font-24 text-grey justify-between mt-20" v-if="selectIndex == 2">
+ <div>{{ $t("手续费") }}</div>
+ <div class="textColor">
+ {{
+ (
+ form.amount *
+ (initFutrue && initFutrue.para
+ ? initData.para[paraIndex].unit_fee
+ : "")
+ ).toFixed(2) | nan
+ }}
+ USDT
+ </div>
+ </div>
<div v-else class="w-full mt-120">
<div class="textColor">
<p>{{ $t("套期保值，风险对冲") }}</p>
diff --git a/src/components/perpetual-order/index.vue b/src/components/perpetual-order/index.vue
index d4533b4..c08882c 100644
--- a/src/components/perpetual-order/index.vue
+++ b/src/components/perpetual-order/index.vue
@@ -3,22 +3,22 @@
<div>
<div class="items-center mt-18">
<div class="flex justify-between border-b-color">
- <div class="flex pb-10">
+ <div class="flex pb-10" style="width: 100%;height: 2rem;">
<template v-if="topIndex / 1 === 1">
<!-- <div class="w-280 flex flex-col items-center textColor1" @click="tabClick('1')" :class="type=='1'?'active-line':''">{{ $t('当前委托') }}</div>
<div class="w-280 flex flex-col items-center ml-30 textColor1" @click="tabClick('2')" :class="type=='2'?'active-line':''">{{ $t('持有仓位') }}</div> -->
- <div class="px-10 py-10 flex items-center text-grey" @click="tabClick('1')"
+ <div style="width: 50%;" class="px-10 py-10 flex justify-center items-center text-grey" @click="tabClick('1')"
:class="type == '1' ? 'active-line' : ''">{{ $t('持有仓位') }}<span v-if="type == '1'">({{
orderHold.length }})</span></div>
- <div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('2')"
+ <div style="width: 50%;" class="px-10 ml-50 py-10 flex justify-center items-center text-grey" @click="tabClick('2')"
:class="type == '2' ? 'active-line' : ''">{{ $t('当前委托') }}</div>
</template>
- <template v-else>
- <div class="px-10 py-10 flex items-center text-grey" @click="tabClick('3')"
+ <template v-else>
+ <div style="width: 50%;" class="px-10 py-10 flex justify-center items-center text-grey" @click="tabClick('3')"
:class="type == '3' ? 'active-line' : ''">{{ $t('持有仓位') }}<span v-if="type == '2'">({{
orderCur.length
}})111</span></div>
- <div class="px-10 ml-50 py-10 flex items-center text-grey" @click="tabClick('4')"
+ <div style="width: 50%;" class="px-10 ml-50 py-10 flex justify-center items-center text-grey" @click="tabClick('4')"
:class="type == '4' ? 'active-line' : ''">{{ $t('历史仓位') }}</div>
</template>
</div>
@@ -174,10 +174,22 @@
.active-line {
position: relative;
// padding: 15px 0;
- color: #fff;
+ color: #000;
+
+ &::after{
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ top: 4rem;
+ width: 18.75rem;
+ height: .5rem;
+ background-color: #2c78f8;
+ }
@include themify() {
- background-color: themed("color_main");
+ //background-color: themed("color_main");
}
}
diff --git a/src/page/forget/index.vue b/src/page/forget/index.vue
index 5fa4a36..804a951 100644
--- a/src/page/forget/index.vue
+++ b/src/page/forget/index.vue
@@ -8,7 +8,7 @@
<div class="flex re-tab text-grey">
<div :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('邮箱') }}</div>
<div :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('手机号') }}</div>
- <div :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('谷歌验证') }}</div>
+<!-- <div :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('谷歌验证') }}</div>-->
</div>
<ExInput :label="$t('账号')" :placeholderText="$t('请输入账号')" v-model="account" :dialCode="dialCode"
@@ -71,7 +71,7 @@
type = 3
}
Axios.getUserNameVerifTarget({
- username: type == 1 ? `${this.dialCode}${this.account}` : this.account,
+ username: this.account,
verifcode_type: type //验证类型 1手机 2 邮箱 3谷歌验证器
}).then((res) => {
if (type == 1 && !res.data.phone_authority) {
diff --git a/src/page/perpetualContract/index.vue b/src/page/perpetualContract/index.vue
index ebae7d5..d8f2b50 100644
--- a/src/page/perpetualContract/index.vue
+++ b/src/page/perpetualContract/index.vue
@@ -22,12 +22,12 @@
<div :class="{ slide2: animated1 }" v-if="selectIndex === 1">
<div class="mainBackground" key="x">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
+ <PerpetualOpen :range="range" class="pl-30 pr-30" :key="keyIndex + 'a'" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" @ordered="onOrdered" :currentType="currentType"
@changeCurrentType="changeCurrentType" @changeValueBack="changeValueBack">
</PerpetualOpen>
- <div class="line"></div>
+<!-- <div class="line"></div>-->
<!-- 委托/持仓-->
<PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'b'" :symbol="symbol" :order-cur="orderCur"
:order-hold="orderHold" :topIndex="selectIndex" :futrue-hold="futrueHold"
@@ -37,11 +37,11 @@
</div>
<div :class="{ slide1: animated2 }" v-else>
<div class="mainBackground" key="y">
- <PerpetualOpen class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
+ <PerpetualOpen :range="range" class="pl-30 pr-30" :key="keyIndex + 'c'" :selectIndex="selectIndex" :symbol="symbol"
:green-data="bids" :red-data="asks" :price="price" :init-open="initOpen" :init-close="initClose"
:init-futrue="initFutrue" @ordered="onOrdered" @changeValueBack="changeValueBack">
</PerpetualOpen>
- <div class="line"></div>
+<!-- <div class="line"></div>-->
<!-- 委托/持仓-->
<PerpetualOrder class="pl-30 pr-30" :key="keyIndex + 'd'" :symbol="symbol" :order-cur="orderCur"
:order-hold="orderHold" :price="price" :topIndex="selectIndex" :futrue-hold="futrueHold"
--
Gitblit v1.9.3