From 0463d5924a0e2d48fc17c4ef4ec253f724e65078 Mon Sep 17 00:00:00 2001
From: XIGUASSR <623844246@qq.com>
Date: Tue, 08 Nov 2022 03:19:48 +0800
Subject: [PATCH] 最新111
---
src/page/user/Warehouse.vue | 832 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
src/assets/img/zhaobudao.png | 0
src/main.js | 4
src/router/index.js | 23 +
4 files changed, 852 insertions(+), 7 deletions(-)
diff --git a/src/assets/img/zhaobudao.png b/src/assets/img/zhaobudao.png
new file mode 100644
index 0000000..696494f
--- /dev/null
+++ b/src/assets/img/zhaobudao.png
Binary files differ
diff --git a/src/main.js b/src/main.js
index 25b1bf1..f8deace 100644
--- a/src/main.js
+++ b/src/main.js
@@ -25,7 +25,7 @@
import animated from 'animate.css' // npm install animate.css --save安装，在引入
import '../static/css/public2.css'
-import { Tab, Tabs } from 'vant';
+import { Tab, Tabs, Popup, DatetimePicker } from 'vant';
import echarts from 'echarts'
Vue.prototype.$echarts = echarts;
// import VueTouch from 'vue-touch'
@@ -44,7 +44,7 @@
Vue.use(Vant);
Vue.use(Mint)
Vue.use(Tab);
-Vue.use(Tabs);
+Vue.use(Tabs, Popup, DatetimePicker);
Vue.component('icon', Icon)
Vue.config.productionTip = false
Object.keys(filters).forEach(key => {
diff --git a/src/page/user/Warehouse.vue b/src/page/user/Warehouse.vue
new file mode 100644
index 0000000..c88d750
--- /dev/null
+++ b/src/page/user/Warehouse.vue
@@ -0,0 +1,832 @@
+<template>
+ <div class="warehouse_page">
+ <div class="content">
+ <div class="top_title" :class="titleDialog ? 'active' : ''" ref="topTitle">
+ <div class="titles">
+ <div class="left_title" @click="handleOpenDialog()">
+ <div class="title">
+ <span>{{ '模拟账户' }}</span>
+ </div>
+ <div class="img">
+ <img src="../../assets/img/xiala.png" alt />
+ </div>
+ </div>
+ <div class="right_box"></div>
+ </div>
+ <div class="overflow_box item">
+ <div class="left_titles">
+ <span>{{ '虚拟账户' }}</span>
+ </div>
+ <div class="right_price">
+ <span>{{ '净值: ¥49,611.0' }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="warehouse_card">
+ <div class="top_card">
+ <div class="card_content">
+ <div class="t_title">
+ <span>{{ '净值(USD)' }}</span>
+ </div>
+ <div class="t_price">
+ <span class="price">{{ '49,619.05' }}</span>
+ <span class="profits">{{ '-370.00' }}</span>
+ </div>
+ <div class="balance">
+ <div class="left_titles">
+ <span>{{ '可用余额' }}</span>
+ </div>
+ <div class="right_titles">
+ <span>{{ '保证金水平' }}</span>
+ </div>
+ </div>
+ <div class="num">
+ <div class="left_price">
+ <span>{{ '49,386.26' }}</span>
+ </div>
+ <div class="right_margin">
+ <span>{{ '21314.94%' }}</span>
+ </div>
+ </div>
+ <div class="margin">
+ <div class="left_titles">
+ <span>{{ '保证金' }}</span>
+ </div>
+ <div class="right_titles">
+ <span>{{ '维持保证金' }}</span>
+ </div>
+ </div>
+ <div class="prices">
+ <div class="left_titles">
+ <span>{{ '232.79' }}</span>
+ </div>
+ <div class="right_titles">
+ <span>{{ '116.40' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tabs_card">
+ <div class="tabs_card_content">
+ <div class="tabs_top_title">
+ <div
+ class="title_items"
+ v-for="(item, index) in tabsArr"
+ :key="index"
+ @click="handleTabsClick(item, index)"
+ >
+ <span :class="tabsCurrentIndex === index ? 'active' : ''">{{ item }}</span>
+ </div>
+ </div>
+ <!-- 持仓 currentIndex: 0 -->
+ <div class="over">
+ <div class="tabs_o" v-if="tabsCurrentIndex === 0">
+ <div class="tabs_o_items" v-for="(item, index) in tabsPositionNumArr" :key="index">
+ <div class="tabs_o_title">
+ <span class="title">{{ item.name }}</span>
+ <span class="buy_to_sell">{{ item.mr }}</span>
+ <span class="multiple">{{ item.multiple + 'X' }}</span>
+ <span class="nums">{{ item.hd + '手'}}</span>
+ </div>
+ <div class="center_price">
+ <div class="profit">
+ <span>{{ item.ProfitLoss }}</span>
+ </div>
+ <div class="start_price">
+ <span>{{ item.startPrice }}</span>
+ </div>
+ <div class="new_price">
+ <span>{{ item.newPrice }}</span>
+ </div>
+ </div>
+ <div class="bottom_price_title">
+ <div class="profit_title">
+ <span>{{ '浮动净盈亏' }}</span>
+ </div>
+ <div class="start_price">
+ <span>{{ '开仓价格' }}</span>
+ </div>
+ <div class="new_price">
+ <span>{{ '当前价格' }}</span>
+ </div>
+ </div>
+ <div class="right_btn">
+ <span>{{ '平仓' }}</span>
+ </div>
+ </div>
+ </div>
+ <div class="waiting" v-if="tabsCurrentIndex === 1">
+ <div class="waiting_box">
+ <div class="img_cont">
+ <img src="../../assets/img/zhaobudao.png" alt />
+ <span class="gd">{{ '当前无挂单' }}</span>
+ <div class="trading">
+ <span>{{ '开始交易' }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="tabs_o" v-if="tabsCurrentIndex === 2">
+ <div class="tabs_o_items oes" v-for="(item, index) in tabsPcArr" :key="index">
+ <div class="tabs_o_title">
+ <span class="title">{{ item.name }}</span>
+ <span class="buy_to_sell">{{ item.mr }}</span>
+ <span class="multiple">{{ item.multiple + 'X' }}</span>
+ <span class="nums">{{ item.hd + '手'}}</span>
+ </div>
+ <div class="bottom_price_title">
+ <div class="profit_res">
+ <span>{{ '平仓时间: 2022年11月7日 18:18:05' }}</span>
+ </div>
+ </div>
+ <div class="right_count">
+ <span>{{ item.countNum }}</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="dialog" v-if="titleDialog" @click="titleDialog = false"></div>
+ </div>
+</template>
+
+<script>
+export default {
+ data() {
+ return {
+ tabsArr: ["持仓", "挂单", "已平仓"],
+ tabsCurrentIndex: 0,
+ tabsPositionNumArr: [
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487
+ }
+ ],
+ tabsPcArr: [
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.52
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -2.36
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ },
+ {
+ name: "美元/日元",
+ mr: "买入",
+ multiple: 200,
+ hd: 0.01,
+ ProfitLoss: -1.15,
+ startPrice: 146.656,
+ newPrice: 146.487,
+ countNum: -1.18
+ }
+ ],
+ titleDialog: false,
+ };
+ },
+ methods: {
+ handleTabsClick(item, index) {
+ this.tabsCurrentIndex = index;
+ },
+ handleOpenDialog() {
+ this.titleDialog = !this.titleDialog;
+ },
+ },
+ mounted() {
+
+ }
+};
+</script>
+
+<style scoped lang="less">
+@boxCenter: {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+};
+@topCardColor: #bdbdbd;
+.warehouse_page {
+ width: 100%;
+ height: calc(100% - 1.2974rem);
+}
+.content {
+ width: 100%;
+ height: 100%;
+ position: relative;
+}
+.top_title.active {
+ height: 3rem;
+}
+.top_title {
+ width: 100%;
+ height: 0.9231rem;
+ position: absolute;
+ background: #fff;
+ top: 0;
+ z-index: 10;
+ overflow: hidden;
+ transition: all 1s;
+ padding: 0 .3rem;
+ .titles {
+ width: 100%;
+ height: 0.9231rem;
+ display: flex;
+ }
+ .left_title,
+ .right_box {
+ width: 50%;
+ height: 100%;
+ display: flex;
+ }
+ .title {
+ width: 60%;
+ height: 100%;
+ font-size: 0.5897rem;
+ display: flex;
+ align-items: center;
+ span {
+ font-weight: 800;
+ }
+ }
+ .img {
+ width: 40%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ img {
+ width: 0.6rem;
+ height: 0.6rem;
+ }
+ }
+}
+.warehouse_card {
+ width: 100%;
+ height: calc(100% - 1rem);
+ position: absolute;
+ top: 0.9231rem;
+ z-index: 0;
+ padding: 0 0.3333rem;
+ background: rgb(242, 243, 247);
+ .top_card {
+ width: 100%;
+ height: 4.2308rem;
+ border-radius: 0.15rem;
+ margin-top: 0.3rem;
+ background: #fff;
+ .card_content {
+ width: 100%;
+ height: 100%;
+ padding: 0.4rem;
+ .t_title {
+ width: 100%;
+ height: 0.5128rem;
+ display: flex;
+ align-items: center;
+ span {
+ font-size: 0.3046rem;
+ font-weight: bold;
+ }
+ }
+ .t_price {
+ width: 100%;
+ height: 0.5128rem;
+ display: flex;
+ align-items: center;
+ .price {
+ font-weight: 800;
+ font-size: 0.3846rem;
+ margin-top: 0.07rem;
+ }
+ .profits {
+ font-weight: 800;
+ font-size: 0.2846rem;
+ color: #dd2c34;
+ margin-top: 0.2rem;
+ margin-left: 0.2rem;
+ }
+ }
+ .balance {
+ width: 100%;
+ height: 0.3846rem;
+ margin-top: 0.428rem;
+ display: flex;
+ > div {
+ width: 50%;
+ height: 100%;
+ color: @topCardColor;
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+ .num {
+ width: 100%;
+ height: 0.3846rem;
+ margin-top: 0.1rem;
+ display: flex;
+ > div {
+ width: 50%;
+ height: 100%;
+ span {
+ font-weight: 600;
+ }
+ }
+ .right_margin {
+ color: rgb(100, 162, 117);
+ }
+ }
+ .margin {
+ width: 100%;
+ height: 0.3846rem;
+ margin-top: 0.2rem;
+ display: flex;
+ > div {
+ width: 50%;
+ height: 100%;
+ color: @topCardColor;
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+ .prices {
+ width: 100%;
+ height: 0.3846rem;
+ margin-top: 0.1rem;
+ display: flex;
+ > div {
+ width: 50%;
+ height: 100%;
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+ }
+ }
+}
+.over {
+ width: 100%;
+ height: calc(100% - 0.7179rem);
+ overflow: auto;
+}
+.tabs_card {
+ width: 100%;
+ height: calc(100% - 4.24rem - 0.5rem);
+ margin-top: 0.3rem;
+ background: #fff;
+}
+.over::-webkit-scrollbar {
+ display: none;
+}
+.tabs_card_content {
+ width: 100%;
+ height: 100%;
+ padding: 0 0.3rem;
+ .tabs_top_title {
+ width: 100%;
+ height: 1rem;
+ border-radius: 0.15rem;
+ display: flex;
+ align-items: center;
+ font-size: 0.4103rem;
+ padding-top: 0.2rem;
+ > div {
+ width: 25%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: left;
+ span {
+ display: inline-block;
+ height: 100%;
+ font-weight: 600;
+ line-height: 0.7179rem;
+ }
+ span.active {
+ color: rgb(62, 121, 226);
+ border-bottom: 0.1rem solid rgb(62, 121, 226);
+ }
+ }
+ }
+ .tabs_o {
+ width: 100%;
+ margin-top: 0.3rem;
+ > .tabs_o_items {
+ width: 100%;
+ height: 2.3rem;
+ position: relative;
+ .tabs_o_title {
+ width: 100%;
+ height: 0.7179rem;
+ display: flex;
+ align-items: center;
+ span {
+ display: inline-block;
+ margin-right: 0.2rem;
+ }
+ .title {
+ font-weight: 600;
+ font-size: 0.4059rem;
+ }
+ .buy_to_sell {
+ background: rgb(215, 243, 235);
+ padding: 0.08rem 0.1rem;
+ color: rgb(109, 175, 125);
+ font-weight: 600;
+ }
+ .multiple {
+ padding: 0.08rem 0.1rem;
+ background: rgb(236, 243, 252);
+ color: rgb(42, 108, 230);
+ font-weight: 600;
+ }
+ .nums {
+ color: @topCardColor;
+ }
+ }
+ .center_price {
+ width: 100%;
+ height: 0.3846rem;
+ display: flex;
+ align-items: center;
+ margin-top: 0.3rem;
+ > div {
+ width: 28%;
+ height: 100%;
+ span {
+ font-weight: 600;
+ }
+ }
+ .profit {
+ color: rgb(209, 79, 91);
+ }
+ }
+ .bottom_price_title {
+ width: 100%;
+ height: 0.4rem;
+ margin-top: 0.1rem;
+ display: flex;
+ align-items: center;
+ > div {
+ width: 28%;
+ height: 100%;
+ color: @topCardColor;
+ span {
+ font-weight: 600;
+ }
+ }
+ }
+ }
+ }
+}
+.waiting {
+ width: 100%;
+ margin-top: 0.3rem;
+ position: relative;
+ .waiting_box {
+ width: 100%;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 1rem;
+ > div {
+ width: 60%;
+ height: 100%;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ .gd {
+ display: inline-block;
+ width: 100%;
+ text-align: center;
+ color: rgb(133, 133, 133);
+ }
+ .trading {
+ width: 100%;
+ height: 2rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ span {
+ display: inline-block;
+ width: 4.1026rem;
+ height: 1.0256rem;
+ background: #f7f7f7;
+ color: #3773dd;
+ font-weight: 600;
+ font-size: 0.4615rem;
+ text-align: center;
+ line-height: 1.0256rem;
+ border-radius: 0.2rem;
+ }
+ }
+ }
+ }
+}
+.right_btn {
+ width: 1.7949rem;
+ height: 0.6667rem;
+ position: absolute;
+ right: 1%;
+ top: 48%;
+ background: #f7f7f7;
+ color: #3773dd;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.3rem;
+ span {
+ font-weight: 600;
+ font-size: 0.3846rem;
+ }
+}
+.right_count {
+ width: 1.7949rem;
+ height: 0.6667rem;
+ position: absolute;
+ right: 1%;
+ top: 20%;
+ color: #d7343a;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 0.3rem;
+ span {
+ font-weight: 600;
+ font-size: 0.3846rem;
+ }
+}
+.profit_res {
+ width: 100% !important;
+ margin-top: .2rem;
+}
+.oes {
+ height: 2rem !important;
+}
+.dialog {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ background: rgba(0,0,0,.5);
+ z-index: 9;
+}
+.overflow_box {
+ width: 100%;
+ height: 1.5rem;
+ border-radius: .2rem;
+ padding: 0 .3rem;
+ margin: .3rem 0;
+ background: rgb(236,243,253);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ > div {
+ height: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ .left_titles {
+ span {
+ font-weight: 800;
+ font-size: .3815rem;
+ }
+ }
+ .right_price {
+ color: rgb(128,135,145);
+ }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index c89df4c..fe61d40 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,6 +17,7 @@
import Inquiry from '@/page/home/inquiry'
import User from '@/page/user/user'
import OrderList from '@/page/user/order-list'
+import Warehouse from '@/page/user/Warehouse.vue'
import holdOrderList from '@/page/user/search-order/hold-stockCode'
import holdOrderList2 from '@/page/user/search-order/hold-stockSpell'
import sellOrderList from '@/page/user/search-order/sell-stockCode'
@@ -300,16 +301,28 @@
index: 21
},
component: Transfer
- }, {
- path: '/orderlist',
- name: 'orderlist',
+ },
+ // {
+ // path: '/orderlist',
+ // name: 'orderlist',
+ // meta: {
+ // title: '持仓',
+ // requireAuth: false,
+ // hasHeader: true,
+ // index: 22
+ // },
+ // component: OrderList
+ // },
+ {
+ path: '/warehouse',
+ name: 'Warehouse',
meta: {
title: '持仓',
requireAuth: false,
- hasHeader: true,
+ hasHeader: false,
index: 22
},
- component: OrderList
+ component: Warehouse
},
{
path: '/holdorderlist',
--
Gitblit v1.9.3