From f891d8d35067d3bb40e2b48ecc4ab28e26f00bcd Mon Sep 17 00:00:00 2001
From: XIGUASSR <623844246@qq.com>
Date: Thu, 10 Nov 2022 01:51:46 +0800
Subject: [PATCH] 最新
---
src/main.js | 4
src/page/kline/index.vue | 165 +++++++++++++++-
src/page/trading/buy.vue | 391 +++++++++++++++++++++++++++++++++++++++
src/router/index.js | 13 +
4 files changed, 559 insertions(+), 14 deletions(-)
diff --git a/src/main.js b/src/main.js
index f8deace..433e2b3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,7 +11,7 @@
import state from './event'
import Vant from 'vant';
import 'vant/lib/index.css';
-import { Swipe, SwipeItem, Skeleton } from 'vant';
+import { Swipe, SwipeItem, Skeleton, Switch } from 'vant';
import './assets/css/style.css';
@@ -44,7 +44,7 @@
Vue.use(Vant);
Vue.use(Mint)
Vue.use(Tab);
-Vue.use(Tabs, Popup, DatetimePicker);
+Vue.use(Tabs, Popup, DatetimePicker, Switch);
Vue.component('icon', Icon)
Vue.config.productionTip = false
Object.keys(filters).forEach(key => {
diff --git a/src/page/kline/index.vue b/src/page/kline/index.vue
index 668e5ad..1d19f71 100644
--- a/src/page/kline/index.vue
+++ b/src/page/kline/index.vue
@@ -2,16 +2,72 @@
<div class="kline_detail_page">
<div class="content">
<div class="detail_title">
- <div class="top_back">
- <div class="left_back" @click="handleBack()">
- <img src="../../assets/img/zuojiantou.png" alt />
- </div>
- <div class="right_title">
- <div class="t_t">
- <span>{{ kLineDetails.name }}</span>
+ <div class="ti_cont">
+ <div class="top_back">
+ <div class="left_back" @click="handleBack()">
+ <img src="../../assets/img/zuojiantou.png" alt />
</div>
- <div class="b_t">
- <span>{{ singDetails.code }}</span>
+ <div class="right_title">
+ <div class="t_t">
+ <span>{{ kLineDetails.name }}</span>
+ </div>
+ <div class="b_t">
+ <span>{{ singDetails.code }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="right_money sss" @click="openDialog()">
+ <div class="content_money">
+ <div class="top_price">
+ <div class="left">
+ <span>{{ '余额' }}</span>
+ </div>
+ <div class="right">
+ <span v-if="$store.state.userInfo.userAmt==undefined">¥0.00</span>
+ <span
+ v-if="$store.state.userInfo&&tabsItemIndex == 1"
+ style="white-space: nowarp;"
+ >
+ {{ '¥' + $store.state.userInfo.userIndexAmt
+ }}
+ </span>
+ <span
+ v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 0"
+ style="white-space: nowarp;"
+ >
+ {{ '¥ ' + $store.state.userInfo.userAmt
+ }}
+ </span>
+ <span
+ v-if="$store.state.userInfo.userAmt!=undefined&&tabsItemIndex == 2"
+ style="white-space: nowarp;"
+ >
+ {{ '¥ ' + $store.state.userInfo.userAmt
+ }}
+ </span>
+ <span
+ v-if="$store.state.userInfo&&tabsItemIndex == 3"
+ style="white-space: nowarp;"
+ >
+ {{
+ '¥' + $store.state.userInfo.userFuturesAmt
+ }}
+ </span>
+ </div>
+ <div class="sanjiao">
+ <img
+ :class="dialogFlag ? 'xuanz' : ''"
+ style="transition: all 0.5s;"
+ src="../../assets/img/xiala.png"
+ alt
+ />
+ </div>
+ </div>
+ <div class="bottom_balance">
+ <div>
+ <span>{{ '可用余额' }}</span>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -199,7 +255,7 @@
<span>{{ '145.533' }}</span>
</div>
</div>
- <div class="sell_btn">
+ <div class="sell_btn" @click="goBuy()">
<div class="top_sell">
<span>{{ '买入' }}</span>
</div>
@@ -306,12 +362,21 @@
},
handleSc() {
this.scFlag = !this.scFlag;
+ },
+ goBuy() {
+ this.$router.push({
+ path: "/TradingBuy"
+ });
}
}
};
</script>
<style scoped lang="less">
+.ti_cont {
+ width: 100%;
+ display: flex;
+}
.kline_detail_page {
width: 100%;
height: calc(100% - 1.7rem);
@@ -323,7 +388,12 @@
position: relative;
}
}
-
+.sss {
+ width: 50%;
+ height: 1.2rem;
+ display: flex;
+ justify-content: flex-end;
+}
.detail_title {
width: 100%;
height: 3.2rem;
@@ -331,7 +401,7 @@
background: #fff;
.top_back {
- width: 100%;
+ width: 50%;
height: 1.2rem;
display: flex;
align-items: center;
@@ -731,5 +801,76 @@
animation: zy 2.5s .15s linear infinite;
animation: zy 2.5s .15s linear infinite;
animation: zy 2.5s .15s linear infinite;
+ animation: zy 2.5s 0.15s linear infinite;
+ animation: zy 2.5s 0.15s linear infinite;
+ animation: zy 2.5s 0.15s linear infinite;
+ animation: zy 2.5s 0.15s linear infinite;
+}
+.content_money {
+ width: 80%;
+ height: 80%;
+}
+.sanjiao {
+ width: 0.4rem;
+ height: 0.4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 0.4rem;
+ height: 0.4rem;
+ }
+}
+.top_price {
+ width: 100%;
+ height: 70%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ .left {
+ width: 0.8rem;
+ height: 0.4103rem;
+ border-radius: 0.1rem;
+ background: #4d73b1;
+ color: #fff;
+ font-size: 0.3077rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ span {
+ display: inline-block;
+ transform: scale(0.8);
+ font-weight: 600;
+ }
+ }
+
+ .right {
+ width: auto;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ white-space: nowrap;
+ margin-left: 0.1rem;
+ margin-right: 0.1rem;
+ min-width: 1.9rem;
+ span {
+ font-weight: 600;
+ text-align: right;
+ }
+ }
+}
+.bottom_balance {
+ width: 100%;
+ height: 30%;
+ display: flex;
+ justify-content: flex-end;
+ font-size: 0.3077rem;
+ color: #acaeaf;
+ transform: scale(0.9);
+ margin-left: 0.2rem;
+ padding-right: 0.68rem;
}
</style>
\ No newline at end of file
diff --git a/src/page/trading/buy.vue b/src/page/trading/buy.vue
new file mode 100644
index 0000000..5c80beb
--- /dev/null
+++ b/src/page/trading/buy.vue
@@ -0,0 +1,391 @@
+<template>
+ <div class="buy_page">
+ <div class="content">
+ <div class="top_cny">
+ <div class="top_back">
+ <div class="left_back" @click="handleBack()">
+ <img src="../../assets/img/zuojiantou.png" alt />
+ </div>
+ <div class="right_title">
+ <div class="t_t">
+ <span>{{ '人民币' }}</span>
+ </div>
+ <div class="b_t">
+ <span>{{ 'CNY' }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="bottom_buy_price">
+ <div class="cot">
+ <div class="lefts">
+ <div class="top_new">
+ <span>{{ '1.34609' }}</span>
+ </div>
+ <div class="bottom_es">
+ <span>{{ '买入价' }}</span>
+ </div>
+ </div>
+ <div class="rights">
+ <div class="ese">
+ <div class="mr"
+ v-for="(item, index) in tradingArr"
+ :key="index"
+ @click="handleTradingClick(index)"
+ :class="tabsCurrentIndex === index ? 'active' : ''"
+ >
+ <span>{{ item }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="price_tabs">
+ <div class="tabs">
+ <div class="tab_item"
+ v-for="(item, index) in priceTabs"
+ :key="index"
+ @click="handleTabsClick(item, index)"
+ :class="priceTabsCurrentIndex === index ? 'active' : ''"
+ >
+ <span>{{ item }}</span>
+ </div>
+ </div>
+ <div class="tabs_content">
+ <div class="num">
+ <span>{{ '交易数量(手)' }}</span>
+ </div>
+ <div class="tr_es">
+ <div class="top_input">
+ <input type="text" v-model="num">
+ </div>
+ </div>
+ <div class="tr_rs gg">
+ <div class="top_bzz">
+ <span>{{ '杠杆' }}</span>
+ <span>{{ '200X' }}</span>
+ </div>
+ <div class="bottom_bzz">
+ <span>{{ }}</span>
+ <span>{{ }}</span>
+ </div>
+ </div>
+ <div class="tr_rs">
+ <div class="top_bzz">
+ <span>{{ '需付保证金(¥)' }}</span>
+ <span>{{ '可用余额(¥)' }}</span>
+ </div>
+ <div class="bottom_bzz">
+ <span>{{ '5.00' }}</span>
+ <span>{{ '49,698.61' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="switchs">
+ <div class="zy"
+ v-for="(item, index) in profitArr"
+ :key="index"
+ >
+ <div class="left_zy">
+ <span>{{ item.name }}</span>
+ </div>
+ <div class="right_sw">
+ <van-switch v-model="item.checked" />
+ </div>
+ </div>
+ </div>
+ <div class="btn_buy">
+ <div>
+ <span>{{ '买入' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: 'trBuy',
+ data() {
+ return {
+ tradingArr: ['卖出', '买入'],
+ tabsCurrentIndex: 0,
+ priceTabs: ['市单价', '挂单'],
+ priceTabsCurrentIndex: 0,
+ num: 0.01,
+ profit: false,
+ profitArr: [
+ {
+ name: '止盈',
+ checked: false
+ },
+ {
+ name: '止损',
+ checked: false
+ },
+ {
+ name: '追踪止损',
+ checked: false
+ }
+ ]
+ }
+ },
+ methods: {
+ handleBack() {
+ this.$router.go(-1);
+ },
+ handleTradingClick(index) {
+ this.tabsCurrentIndex = index;
+ },
+ handleTabsClick(item, index) {
+ this.priceTabsCurrentIndex = index;
+ }
+ }
+};
+</script>
+
+<style scoped lang="less">
+.buy_page {
+ width: 100%;
+ height: calc(100% - 1.7rem);
+ > .content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ }
+}
+.top_cny {
+ width: 100%;
+ height: 3.5385rem;
+ .top_back {
+ width: 100%;
+ height: 1.2rem;
+ display: flex;
+ align-items: center;
+ padding: 0 .1rem;
+ .left_back {
+ width: 0.8rem;
+ height: 80%;
+ display: flex;
+ align-items: center;
+ > img {
+ margin-top: 0.2rem;
+ width: 0.6rem;
+ height: 0.6rem;
+ }
+ }
+ .right_title {
+ width: 3rem;
+ height: 80%;
+ .t_t {
+ width: 100%;
+ height: 70%;
+ display: flex;
+ align-items: center;
+ font-size: 0.4615rem;
+ span {
+ font-weight: 600;
+ }
+ }
+ .b_t {
+ width: 100%;
+ height: 30%;
+ font-size: 0.3615rem;
+ display: flex;
+ align-items: flex-start;
+ color: #8c8c8c;
+ }
+ }
+ }
+ .bottom_buy_price {
+ width: 100%;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ padding: 0 .8rem;
+ margin-top: .3rem;
+ .cot {
+ width: 100%;
+ height: 1.2rem;
+ display: flex;
+ .lefts {
+ width: 40%;
+ height: 100%;
+ .top_new {
+ width: 100%;
+ height: 60%;
+ font-size: .5615rem;
+ color: rgb(232,55,70);
+ span {
+ font-weight: 600;
+ }
+ }
+ .bottom_es {
+ width: 100%;
+ height: 40%;
+ color: rgb(173, 173, 173);
+ }
+ }
+ .rights {
+ width: 60%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ >div {
+ width: 65%;
+ height: 80%;
+ display: flex;
+ justify-content: space-between;
+ > div {
+ width: 45%;
+ height: 70%;
+ background: rgb(236, 236, 236);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: .1rem;
+ color: rgb(173, 173, 173);
+ }
+ .active {
+ background: #fff;
+ color: rgb(110,169,118);
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+ }
+ }
+ }
+}
+.price_tabs {
+ width: 100%;
+ height: 7rem;
+ padding: .2rem .8rem;
+ background: #fff;
+ margin-top: .1rem;
+ .tabs {
+ width: 100%;
+ height: .8205rem;
+ background: rgb(247,247,247);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: .15rem;
+ > div {
+ width: 49%;
+ height: 80%;
+ border-radius: .15rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .active {
+ background: #fff;
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+ .tabs_content {
+ width: 100%;
+ margin-top: .3rem;
+ .num {
+ width: 100%;
+ height: .5rem;
+ }
+ .tr_es {
+ width: 100%;
+ height: 1.3rem;
+ margin-top: .3rem;
+ border-bottom: 0.05rem solid rgb(236, 236, 236);
+ .top_input {
+ width: 100%;
+ height: 70%;
+ font-size: .6615rem;
+ input {
+ font-weight: 600;
+ }
+ }
+ }
+ .tr_rs {
+ width: 100%;
+ height: 1.3rem;
+ margin-top: .4rem;
+ > div {
+ width: 100%;
+ height: 50%;
+ color: rgb(160, 160, 160);
+ display: flex;
+ justify-content: space-between;
+ span {
+ font-weight: 600;
+ }
+ }
+ .bottom_bzz {
+ color: #000;
+ font-size: .3846rem;
+ span {
+ font-weight: 600;
+ }
+ }
+ .top_bzz {
+ align-items: center;
+ }
+ }
+ .gg {
+ font-size: .3803rem;
+ border-bottom: 0.05rem solid rgb(236, 236, 236);
+ > div {
+ color: #000;
+ }
+ }
+ }
+}
+.switchs{
+ width: 100%;
+ height: 6rem;
+ padding: 0 .8rem;
+ background: #fff;
+ margin-top: .3rem;
+ .zy {
+ width: 100%;
+ height: 1.8rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 0.05rem solid rgb(236, 236, 236);
+ >div {
+ width: 20%;
+ height: 50%;
+ display: flex;
+ align-items: center;
+ font-size: .3346rem;
+ }
+ .right_sw {
+ justify-content: flex-end;
+ }
+ }
+}
+.btn_buy{
+ width: 100%;
+ height: 4.8rem;
+ background: #fff;
+ padding: .2rem .8rem;
+ display: flex;
+ align-items: flex-end;
+ > div {
+ width: 100%;
+ height: 1.2821rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background: rgb(68,155,84);
+ color: #fff;
+ font-size: .3846rem;
+ border-radius: .15rem;
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 29ead7a..d2136b3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -48,6 +48,7 @@
import NewPage from '@/page/home/newPage'
import NewGg from '@/page/home/newGg'
import KLine from '@/page/kline/index.vue'
+import TradingBuy from '@/page/trading/buy.vue'
Vue.use(Router)
@@ -611,6 +612,18 @@
component: KLine
},
{
+ path: '/TradingBuy',
+ name: 'TradingBuy',
+ meta: {
+ title: '图标',
+ requireAuth: false,
+ hasHeader: false,
+ index: 50,
+ show: true
+ },
+ component: TradingBuy
+ },
+ {
// 会匹配所有路径
path: '*',
redirect: '/home'
--
Gitblit v1.9.3