<template>
|
<div class="markets">
|
<tab-head :rightShow="false">
|
<van-popover
|
v-model="switchShow"
|
trigger="click"
|
:actions="actions"
|
@select="onSelect"
|
placement="bottom-end"
|
>
|
<template #reference>
|
<div class="switch flex-center">
|
<van-icon name="exchange" size=".45em" />
|
<span>{{ switchText }}</span>
|
</div>
|
</template>
|
</van-popover>
|
</tab-head>
|
|
<div class="tabs flex-between">
|
<div
|
class="tab_item flex-center"
|
:class="{ active: item.value == tab }"
|
v-for="item in tabList"
|
:key="item.value"
|
@click="tab = item.value"
|
>
|
<span>{{ item.name }}</span>
|
</div>
|
</div>
|
|
<div class="markets_echart">
|
<index-component :ids="'markets'"></index-component>
|
<!-- <van-skeleton title :row="3" /> -->
|
</div>
|
|
<stock-list :propOption="propOption"></stock-list>
|
</div>
|
</template>
|
|
<script>
|
import indexComponent from "@/components/index-component.vue";
|
import tabHead from "@/components/tabHead.vue";
|
import stockList from "@/components/stock-list.vue";
|
import Echart from "../home/components/echart.vue";
|
import * as api from "@/axios/api";
|
export default {
|
name: "markets",
|
data() {
|
return {
|
switchShow: false,
|
// 切换
|
actions: [
|
{
|
text: this.$t("美国"),
|
value: "US",
|
name: "美国"
|
},
|
{
|
text: this.$t("墨西哥"),
|
value: "MX",
|
name: "墨西哥"
|
}
|
],
|
tabList: [
|
{ name: "Dow Jones", value: 1 },
|
{ name: "S&P 500", value: 2 },
|
{ name: "NASDAQ", value: 3 }
|
],
|
tab: 1,
|
pageNum: 1,
|
pageSize: 10
|
};
|
},
|
components: {
|
tabHead,
|
Echart,
|
stockList,
|
indexComponent
|
},
|
computed: {
|
switchText() { // 切换文字
|
return this.$t(this.$store.state.marketsSwitch.name) || this.$t("美国");
|
},
|
propOption() { // 传递给列表组件的类型值
|
return { stockType: this.$store.state.marketsSwitch.value };
|
}
|
},
|
created() {
|
if (!this.$store.state.marketsSwitch.name) { // 如果没有选过，默认选择第一个
|
this.$store.commit("MARKET_CHANGE", this.actions[0]);
|
}
|
},
|
mounted() {},
|
methods: {
|
// 选择
|
onSelect(e) {
|
this.$store.commit("MARKET_CHANGE", e);
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@red: #ee0a24;
|
@green: #c4d600;
|
@white: #fff;
|
@black: #000;
|
@green2: #f0f0f0;
|
@dark_green: #07c160;
|
|
.markets {
|
font-size: 10vw;
|
width: 100vw;
|
min-height: 100vh;
|
padding-bottom: 1.5rem;
|
|
.markets_echart {
|
width: 100%;
|
height: 3.2em;
|
background: rgba(red, 0.1);
|
color: @red;
|
}
|
|
.tabs {
|
width: 9.5em;
|
height: 1em;
|
background-color: @green2;
|
border-radius: 0.5em;
|
margin: 0.25em auto;
|
padding: 0 0.1em;
|
|
.tab_item {
|
width: 32%;
|
height: 0.8em;
|
border-radius: 0.5em;
|
|
span {
|
font-size: 0.4em;
|
}
|
}
|
|
.active {
|
background-color: @green;
|
}
|
}
|
|
.switch {
|
padding: 0.35em 0.5em;
|
background-color: @green;
|
color: @white;
|
border-radius: 1em;
|
|
span {
|
font-size: 0.35em;
|
margin-left: 0.2em;
|
}
|
}
|
}
|
</style>
|
