<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">
|
<div class="markets_echart_title">
|
Dow Jones Industrial Average
|
</div>
|
<div class="markets_echart_price">
|
44,406.36
|
</div>
|
<div class="markets_echart_index flex-between">
|
<span>-422.17</span>
|
<span>-0.94%</span>
|
</div>
|
<div class="markets_echart_e">
|
<Echart :ids="'markets-echart'" :colorType="-1"></Echart>
|
</div>
|
|
<!-- <van-skeleton title :row="3" /> -->
|
</div>
|
|
<van-row class="markets_head">
|
<van-col span="12" class="flex-start head_item">{{ $t('Name') }}</van-col>
|
<van-col span="4" class="flex-start head_item">{{ $t('Price') }}</van-col>
|
<van-col span="8" class="flex-end head_item">{{ $t('Change') }}</van-col>
|
</van-row>
|
|
<van-row class="markets_item" v-for="item in 10" :key="item">
|
<van-col span="12" class="item_n">
|
<div class="flex-start">
|
<span class="i_icon">US</span>
|
<span class="i_hint">SS</span>
|
</div>
|
<div class="i_name">shangshi</div>
|
</van-col>
|
<van-col span="4" class="flex-start item_n">18</van-col>
|
<van-col span="8" class="item_n">
|
<div class="flex-end" style="margin-bottom: .15em;">18</div>
|
<div class="flex-end">18%</div>
|
</van-col>
|
</van-row>
|
|
<n-pagination></n-pagination>
|
</div>
|
</template>
|
|
<script>
|
import tabHead from "@/components/tabHead.vue";
|
import nPagination from "@/components/nPagination.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: 1,
|
name: '美国'
|
},
|
{
|
text: this.$t('墨西哥'),
|
value: 2,
|
name: '墨西哥'
|
},
|
],
|
tabList: [{ name: 'Dow Jones', value: 1 }, { name: 'S&P 500', value: 2 }, { name: 'NASDAQ', value: 3 },],
|
tab: 1,
|
}
|
},
|
components: {
|
tabHead, Echart, nPagination,
|
},
|
computed: {
|
switchText() {
|
return this.$t(this.$store.state.marketsSwitch.name) || this.$t('美国');
|
}
|
},
|
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_head {
|
background-color: @green2;
|
margin-top: .25em;
|
height: 1em;
|
padding: 0 .25em;
|
|
.head_item {
|
font-size: .4em;
|
height: 100%;
|
font-weight: 600;
|
}
|
}
|
|
.markets_item {
|
margin-top: .25em;
|
// height: 1em;
|
padding: .25em .25em;
|
border-bottom: #f5f5f5 solid .01em;
|
|
.item_n {
|
font-size: .4em;
|
min-height: 2em;
|
font-weight: 500;
|
|
|
.i_icon {
|
border-radius: 0 26em 26em 0;
|
background: @dark_green;
|
color: #fff;
|
padding: .1em .5em .1em .4em;
|
margin-right: .3em;
|
font-size: .8em;
|
}
|
|
.i_name {
|
margin-top: .3em;
|
color: #777777;
|
font-size: .8em;
|
}
|
}
|
}
|
|
.markets_echart {
|
width: 100%;
|
height: 3.2em;
|
background: rgba(red, .1);
|
color: @red;
|
padding-right: .25em;
|
padding-top: .3em;
|
|
.markets_echart_title {
|
color: @black;
|
padding-left: .625em;
|
font-size: .4em;
|
margin-bottom: .3em;
|
}
|
|
.markets_echart_price {
|
padding-left: .625em;
|
font-size: .4em;
|
margin-bottom: .4em;
|
}
|
|
.markets_echart_index {
|
padding: 0 .25em;
|
|
span {
|
font-size: .3em;
|
}
|
}
|
|
.markets_echart_e {
|
margin-top: .25em;
|
width: 86%;
|
height: 3.5em;
|
}
|
|
&>div:last-child {
|
font-size: .37em;
|
}
|
}
|
|
.tabs {
|
width: 9.5em;
|
height: 1em;
|
background-color: @green2;
|
border-radius: .5em;
|
margin: .25em auto;
|
padding: 0 .1em;
|
|
.tab_item {
|
width: 32%;
|
height: 0.8em;
|
border-radius: .5em;
|
|
span {
|
font-size: .4em;
|
}
|
}
|
|
.active {
|
background-color: @green;
|
}
|
}
|
|
.switch {
|
padding: .35em .5em;
|
background-color: @green;
|
color: @white;
|
border-radius: 1em;
|
|
span {
|
font-size: .35em;
|
margin-left: .2em;
|
}
|
}
|
}
|
</style>
|
