| | |
| | | {{ $t("浮動盈虧") }} |
| | | <van-icon name="eye-o" /> |
| | | </div> |
| | | <div |
| | | class="price" |
| | | :style=" |
| | | `color:${ |
| | | moneyData.profitAndLoss > 0 |
| | | ? 'red' |
| | | : moneyData.profitAndLoss < 0 |
| | | ? 'green' |
| | | : '' |
| | | }` |
| | | " |
| | | > |
| | | <div class="price" :style="`color:${moneyData.profitAndLoss > 0 |
| | | ? 'red' |
| | | : moneyData.profitAndLoss < 0 |
| | | ? 'green' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ moneyData.symbol }} {{ moneyData.profitAndLoss }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | <div class="control flex-between"> |
| | | <div |
| | | class="control-item flex-center" |
| | | @click="$router.push('/markets-list')" |
| | | > |
| | | <div class="control-item flex-center" @click="$router.push('/markets-list')"> |
| | | <img src="@/assets/img/mr.png" /> |
| | | <div class="action-item-text">{{ $t("gm") }}</div> |
| | | </div> |
| | | <div |
| | | class="control-item flex-center" |
| | | @click="$router.push('/markets-list')" |
| | | > |
| | | <div class="control-item flex-center" @click="$router.push('/markets-list')"> |
| | | <img src="@/assets/img/mc.png" /> |
| | | <div class="action-item-text">{{ $t("hj78") }}</div> |
| | | </div> |
| | | <div |
| | | class="control-item flex-center" |
| | | @click="$router.push('/Record')" |
| | | > |
| | | <div class="control-item flex-center" @click="$router.push('/Record')"> |
| | | <img src="@/assets/img/pc.png" /> |
| | | <div class="action-item-text">{{ $t("jl") }}</div> |
| | | </div> |
| | |
| | | </div> |
| | | |
| | | <van-tabs v-model="active" title-inactive-color="#898a8e"> |
| | | <van-tab |
| | | :title="$t('hj2')" |
| | | name="0" |
| | | title-style="font-size:0.4rem;" |
| | | ></van-tab> |
| | | <van-tab |
| | | :title="$t('hj121')" |
| | | name="1" |
| | | title-style="font-size:0.4rem;" |
| | | ></van-tab> |
| | | <van-tab :title="$t('hj2')" name="0" title-style="font-size:0.4rem;"></van-tab> |
| | | <van-tab :title="$t('hj121')" name="1" title-style="font-size:0.4rem;"></van-tab> |
| | | </van-tabs> |
| | | |
| | | <div class="mo_list" v-if="active == '0'"> |
| | | <div |
| | | class="mol_item" |
| | | v-for="(i, index) in list" |
| | | :key="i.id" |
| | | @click="open(i, index)" |
| | | > |
| | | <div class="mol_item" v-for="(i, index) in list" :key="i.id" @click="open(i, index)"> |
| | | <div class="moli_title flex-between"> |
| | | <div> |
| | | {{ i.stockSpell }} |
| | |
| | | </div> |
| | | |
| | | <div class="tui-wrapItem" style="width: 22%;"> |
| | | <div |
| | | style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;" |
| | | > |
| | | <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: center;"> |
| | | {{ $t("持股") }}/{{ $t("可卖") }} |
| | | </div> |
| | | <div style="font-size: .4rem;text-align: center;"> |
| | |
| | | </div> |
| | | |
| | | <div class="tui-wrapItem" style="width: 25%;"> |
| | | <div |
| | | style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;" |
| | | > |
| | | <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;"> |
| | | {{ $t("Current") }}/{{ $t("Cost") }} |
| | | </div> |
| | | <div style="font-size: .4rem;text-align: end;"> |
| | |
| | | </div> |
| | | |
| | | <div class="tui-wrapItem" style="width: 28%;"> |
| | | <div |
| | | style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;" |
| | | > |
| | | <div style="font-size: 0.28rem;margin-bottom: .25rem;text-align: end;"> |
| | | {{ $t("盈虧") }}/{{ $t("hj141") }} |
| | | </div> |
| | | <div |
| | | style="font-size: .4rem;text-align: end;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | " |
| | | > |
| | | <div style="font-size: .4rem;text-align: end;" :style="`color:${i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ i.profitAndLose }} |
| | | </div> |
| | | <div |
| | | style="font-size: .28rem;text-align: end;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | " |
| | | > |
| | | <div style="font-size: .28rem;text-align: end;" :style="`color:${i.profitAndLose < 0 |
| | | ? 'green' |
| | | : i.profitAndLose > 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ i.profitAndLoseParent }} |
| | | </div> |
| | | </div> |
| | |
| | | </div> |
| | | |
| | | <div class="mo_list" v-if="active == '1'"> |
| | | <div |
| | | class="mol_item" |
| | | v-for="(i, index) in list2" |
| | | :key="i.id" |
| | | @click="open(i, index)" |
| | | > |
| | | <div class="mol_item" v-for="(i, index) in list2" :key="i.id" @click="open(i, index)"> |
| | | <div class="moli_title flex-between"> |
| | | <div> |
| | | {{ i.stockSpell }} |
| | |
| | | <div> |
| | | {{ $t("盈虧") }} |
| | | </div> |
| | | <div |
| | | style="margin-left: .25rem;font-size: .4rem;" |
| | | :style=" |
| | | `color:${ |
| | | i.profitAndLose > 0 |
| | | ? 'green' |
| | | : i.profitAndLose < 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | " |
| | | > |
| | | <div style="margin-left: .25rem;font-size: .4rem;" :style="`color:${i.profitAndLose > 0 |
| | | ? 'green' |
| | | : i.profitAndLose < 0 |
| | | ? 'red' |
| | | : '' |
| | | }` |
| | | "> |
| | | {{ i.profitAndLose }} |
| | | </div> |
| | | </div> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | let teimss = null; |
| | | import tabHead from "@/components/tabHead.vue"; |
| | | import * as api from "@/axios/api"; |
| | | export default { |
| | |
| | | } |
| | | }, |
| | | created() { |
| | | if (!this.Operation) this.getMoney(); |
| | | this.getMoney(); |
| | | teimss = setInterval(() => { |
| | | this.getMoney(); |
| | | }, 10000); |
| | | }, |
| | | beforeDestroy() { |
| | | clearInterval(teimss); |
| | | }, |
| | | methods: { |
| | | // 获取 持仓 数据 |
| | |
| | | <style lang="less" scoped> |
| | | /deep/ .van-tabs__nav { |
| | | background: none; |
| | | |
| | | .van-tab__text--ellipsis { |
| | | overflow: visible; |
| | | } |
| | | |
| | | .van-tab--active { |
| | | color: #ccc !important; |
| | | } |
| | | } |
| | | |
| | | /deep/ .van-tabs__line { |
| | | background-color: rgb(82, 91, 173); |
| | | } |
| | | |
| | | .my_order { |
| | | width: 100%; |
| | | font-size: 0.3rem; |
| | | background-color: rgba(#000, 0.9); |
| | | |
| | | .tui-money { |
| | | margin-top: 0.65rem; |
| | | margin-bottom: 0.3rem; |
| | | width: 100%; |
| | | background: linear-gradient(90deg, #585fb4, #48529e); |
| | | border-radius: 0.175rem; |
| | | |
| | | .control { |
| | | width: 100%; |
| | | padding: 0.2rem 0.3rem; |
| | | |
| | | .control-item { |
| | | width: 33%; |
| | | padding-top: 0.1rem; |
| | | flex-direction: column; |
| | | |
| | | .action-item-text { |
| | | font-size: 0.3rem; |
| | | line-height: 0.3rem; |
| | | color: #aaa; |
| | | } |
| | | |
| | | img { |
| | | width: 0.5rem; |
| | | height: 0.5rem; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .all-assets { |
| | | width: 100%; |
| | | padding: 0.225rem 0.3rem 0.35rem; |
| | | justify-content: space-evenly; |
| | | border-bottom: #aaa solid 1px; |
| | | |
| | | .assets-item { |
| | | width: 33%; |
| | | flex-shrink: 0; |
| | | flex-direction: column; |
| | | |
| | | .big-size { |
| | | font-size: 0.35rem; |
| | | color: #fff; |
| | | padding-top: 0.15rem; |
| | | } |
| | | |
| | | .all-size { |
| | | font-size: 0.35rem; |
| | | color: #c4c7e4; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .normal { |
| | | padding: 0.375rem 0; |
| | | margin: 0 0.375rem; |
| | | position: relative; |
| | | |
| | | .price { |
| | | font-size: 0.825rem; |
| | | line-height: 0.825rem; |
| | |
| | | padding-top: 0.3rem; |
| | | color: #fff; |
| | | } |
| | | |
| | | .text-xs { |
| | | font-size: 0.45rem; |
| | | color: #c7c9e6; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .mo_list { |
| | | padding: 0 0.35rem; |
| | | |
| | | .mol_item { |
| | | margin: 0 0 0.3rem; |
| | | background-color: #13161e; |
| | | border-radius: 0.325rem; |
| | | color: #898a8e; |
| | | margin-top: 0.3rem; |
| | | |
| | | .jiaoyi-action { |
| | | width: 100%; |
| | | height: 1.5rem; |
| | | background-color: #191d27; |
| | | |
| | | .action-item { |
| | | width: 33%; |
| | | flex-shrink: 0; |
| | | flex-direction: column; |
| | | |
| | | .action-item-text { |
| | | font-size: 0.3rem; |
| | | line-height: 0.3rem; |
| | | color: #898a8e; |
| | | } |
| | | |
| | | img { |
| | | width: 0.5rem; |
| | | height: 0.5rem; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .tui-wrapItem { |
| | | padding: 0.175rem 0rem 0; |
| | | color: #898a8e; |
| | | width: 54%; |
| | | line-height: 0.4rem; |
| | | } |
| | | |
| | | .moli_orderTitle { |
| | | padding: 0.3rem 0.3rem 0; |
| | | color: #ccc; |
| | | } |
| | | |
| | | .moli_title { |
| | | padding: 0.3rem; |
| | | border-bottom: 1px solid #494949; |