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/contract-header/index.vue | 63 ++++++++++++++++++-------------
1 files changed, 37 insertions(+), 26 deletions(-)
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>
--
Gitblit v1.9.3