最新111

XIGUASSR

2022-11-08 0463d5924a0e2d48fc17c4ef4ec253f724e65078

最新111

 src/assets/img/zhaobudao.png

 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 => {

 src/page/user/Warehouse.vue

New file
@@ -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>

 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',