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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18634
      v4/package-lock.json
  2. 127
      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

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

@ -1,82 +1,37 @@
<template>
<div class="contract-page">
<div class="page-top d-flex pt-2">
<div class="kline-box flex-fill mr-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">
<div class="d-flex fn-12">
金币名称：
<div class="page-top d-flex pt-2" >
<div class="kline-box flex-fill mr-2 ml-2">
<div class="d-flex align-items-center py-2 pl-4 heading justify-content-between">
<div style="margin: 10px 0px;">
<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 class="d-flex fn-12">
时间阶段：
</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 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>
<kline :activeCoin="{ pair_name: activeContract.pair_name }" :contract="true" :wsUrl="wsUrl" @selectTime="selectTime=$event" />
</div>
</div>
<kline :activeCoin="{ pair_name: activeContract.pair_name }" :wsUrl="wsUrl" />
</div>
</div>
</div>
</template>
<script>
import kline from "../option/kline";
import Socket from "@/api/server/Socket.js";
// import Home from "@/api/home";
import Contract from "@/api/contract";
import Home from "@/api/home";
import bus from "@/components/bus.js";
export default {
components: {
kline
@ -97,6 +52,7 @@ export default {
contractOpen: false,
contractAgreement: {},
symbolDetail: {},
selectTime:''
};
},
computed: {
@ -112,12 +68,36 @@ export default {
},
isLogin() {
return Boolean(localStorage.token);
}
},
},
watch: {
activeSymbol() {
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() {
clearInterval(this._time);
@ -154,7 +134,6 @@ export default {
methods: {
ispopover1(item) {
this.activeSymbol = item;
this.$refs.popover.showPopper = false;
},
swapMarketList() {
let msg = "swapMarketList";
@ -270,4 +249,24 @@ export default {
.dark-app .theme-switch .theme-switch-button .right {
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>

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

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

Write Preview
Loading…
Cancel
Save