liaoxinyu
/
kline_vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改v4k线浏览布局

master
liaoxinyu 1 year ago
parent
44693a1f16
commit
984e248703
3 changed files with 157 additions and 18620 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18634
      v4/package-lock.json
  2. 131
      v4/src/views/home/index.vue
  3. 12
      v4/src/views/option/kline.vue

18634
v4/package-lock.json
View File

File diff suppressed because it is too large

131
v4/src/views/home/index.vue
View File

@ -1,82 +1,37 @@
<template> <template>
<div class="contract-page"> <div class="contract-page">
<div class="page-top d-flex pt-2"> <div class="page-top d-flex pt-2" >
<div class="kline-box flex-fill mr-2"> <div class="kline-box flex-fill mr-2 ml-2">
<div class="coin-change d-flex align-items-center py-2 pl-4 heading justify-content-between"> <div class="d-flex align-items-center py-2 pl-4 heading justify-content-between">
<div class="d-flex align-items-center"> <div style="margin: 10px 0px;">
<div class="d-flex fn-12"> <div>
金币名称： <div style="font-size: 20px;width: 100px;margin-top: 8px;float: left;">金币名称：</div>
<div v-for="(item,index) in contractList" :key="item.coin_name + 1" style="display: flex;flex-wrap: wrap;">
<div v-for="items in item.marketInfoList" :key="items.symbol" :class="{ activecorl: items.symbol == activeSymbol }"
class="tab_color" @click="ispopover1(items.symbol)">
<div>{{ items.symbol }}/{{ item.coin_name }}</div>
</div>
</div>
</div> </div>
<div class="d-flex fn-12"> <div class="d-flex" style="margin-top: 15px;width: 100%;">
时间阶段： <div style="font-size: 20px;width: 100px;float: left;">时间阶段：</div>
<div style="font-size: 20px;margin-left: 5px;">{{selectTime}}</div>
</div> </div>
</div> </div>
系统时间：
<div class="d-flex align-items-center">
<!-- 币种价值数据 -->
<div class="d-flex fn-12">
<div class="item px-2">
<div class="title mb-1 text-secondary">
1分钟
</div>
</div>
<div class="item px-2">
<div class="title mb-1 text-secondary">
5分钟
</div>
</div>
<div class="item px-2">
<div class="title mb-1 text-secondary">
15分钟
</div>
</div>
<div class="item px-2">
<div class="title mb-1 text-secondary">
30分钟
</div>
</div>
<div class="item px-2">
<div class="title mb-1 text-secondary">
1小时
</div>
</div>
<div class="item px-2">
<div class="title mb-1 text-secondary">
4小时
</div>
</div>
<div class="item px-2">
<div class="title mb-1 text-secondary">
天
</div>
</div>
<div class="item px-2">
<div class="title mb-1 text-secondary">
周
</div>
</div>
</div>
</div>
</div> </div>
<kline :activeCoin="{ pair_name: activeContract.pair_name }" :wsUrl="wsUrl" /> <kline :activeCoin="{ pair_name: activeContract.pair_name }" :contract="true" :wsUrl="wsUrl" @selectTime="selectTime=$event" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import kline from "../option/kline"; import kline from "../option/kline";
import Socket from "@/api/server/Socket.js"; import Socket from "@/api/server/Socket.js";
import Contract from "@/api/contract";
// import Home from "@/api/home"; import Home from "@/api/home";
import bus from "@/components/bus.js"; import bus from "@/components/bus.js";
export default { export default {
components: { components: {
kline kline
@ -97,6 +52,7 @@ export default {
contractOpen: false, contractOpen: false,
contractAgreement: {}, contractAgreement: {},
symbolDetail: {}, symbolDetail: {},
selectTime:''
}; };
}, },
computed: { computed: {
@ -112,12 +68,36 @@ export default {
}, },
isLogin() { isLogin() {
return Boolean(localStorage.token); return Boolean(localStorage.token);
} },
}, },
watch: { watch: {
activeSymbol() { activeSymbol() {
this.holdPosition(); this.holdPosition();
}, },
selectTime(val){
switch(val){
case '1':
case '5':
case '15':
case '30':
this.selectTime = val + this.$t("exchange.min")
break;
case '60':
this.selectTime = val + this.$t("exchange.hour")
break;
case '1D':
this.selectTime = val + this.$t("exchange.day")
break;
case '1W':
const val1 = val.substring(0, 1)
this.selectTime = val1 + this.$t("exchange.week")
break;
case '1M':
const val2 = val.substring(0, 1)
this.selectTime = val2 + this.$t("exchange.month")
break;
}
}
}, },
destroyed() { destroyed() {
clearInterval(this._time); clearInterval(this._time);
@ -154,7 +134,6 @@ export default {
methods: { methods: {
ispopover1(item) { ispopover1(item) {
this.activeSymbol = item; this.activeSymbol = item;
this.$refs.popover.showPopper = false;
}, },
swapMarketList() { swapMarketList() {
let msg = "swapMarketList"; let msg = "swapMarketList";
@ -270,4 +249,24 @@ export default {
.dark-app .theme-switch .theme-switch-button .right { .dark-app .theme-switch .theme-switch-button .right {
color: white !important color: white !important
} }
.tab_color{
padding: 8px;
color: #999;
width: 6.88rem;
margin: 5px 10px;
font-weight: bold;
text-align: center;
border: 1px solid #999;
&:hover{
cursor: pointer;
}
}
.activecorl{
padding: 8px;
color: #2020cc;
width: 6.88rem;
margin: 5px 10px;
text-align: center;
border: 1px solid #2020cc;
}
</style> </style>

12
v4/src/views/option/kline.vue
View File

@ -27,11 +27,11 @@ let contractAjax = {
}; };
export default { export default {
props: { props: {
// contract: { contract: {
// default: false, default: false,
// type: Boolean, type: Boolean,
// required: false, required: false,
// }, },
activeCoin: { activeCoin: {
default: {}, default: {},
type: Object, type: Object,
@ -447,6 +447,7 @@ methods: {
}); });
// _this.$store.commit("upType", v.type); // _this.$store.commit("upType", v.type);
localStorage.setItem("tim", v.resolution); localStorage.setItem("tim", v.resolution);
_this.$emit("selectTime", v.resolution);
widget.chart().setChartType(v.chartType); //改变K线类型 widget.chart().setChartType(v.chartType); //改变K线类型
}); });
}); });
@ -499,6 +500,7 @@ methods: {
let tim=localStorage.getItem("tim"); let tim=localStorage.getItem("tim");
if(tim){ if(tim){
this.timer=tim; this.timer=tim;
this.$emit("selectTime", tim);
} }
}, },
mounted() { mounted() {

Write Preview
Loading…
Cancel
Save