<template>
|
<div
|
class="index_component"
|
:class="dataObj.chg > 0 ? 'bg-green' : 'bg-red'"
|
@click="toLine"
|
>
|
<div class="item_title">
|
<span class="line-one">{{ dataObj.name }}</span>
|
</div>
|
<div class="item_price">{{ dataObj.last }}</div>
|
<div class="item_index flex-between">
|
<span>{{ dataObj.chg }}</span>
|
<span>{{ dataObj.chgPct }}%</span>
|
</div>
|
<div style="width:100%;flex:1">
|
<Echart :ids="ids" :colorType="dataObj.chg / 1" :data="klist"></Echart>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import Echart from "@/page/home/components/echart.vue";
|
export default {
|
name: "IndexComponent",
|
props: {
|
ids: {
|
type: String,
|
required: true
|
},
|
dataObj: {
|
type: Object,
|
default: () => {}
|
}
|
},
|
computed: {
|
klist() {
|
if (!this.dataObj.kData || this.dataObj.kData.length == 0) return [];
|
return this.dataObj.kData.map(item => {
|
return item.c;
|
});
|
}
|
},
|
components: {
|
Echart
|
},
|
methods: {
|
// 跳转到指数图
|
toLine() {
|
// 点击进入详情
|
const obj = {
|
pid: this.dataObj.id || "",
|
type: this.dataObj.stockType || ""
|
};
|
window.localStorage.setItem("kLine", JSON.stringify(obj));
|
|
this.$router.push({
|
path: "/kLineIndex",
|
query: {
|
// if_us: 1,
|
code: this.dataObj.id,
|
type: this.dataObj.stockType
|
}
|
});
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@red: #ee0a24;
|
|
.bg-red {
|
background-color: rgba(red, 0.1);
|
color: @red;
|
}
|
|
.bg-green {
|
background-color: #f3fbf9;
|
color: green;
|
}
|
|
.index_component {
|
width: 100%;
|
height: 100%;
|
border-radius: 0.1em;
|
padding: 0.25em 0;
|
display: flex;
|
flex-direction: column;
|
|
.item_title {
|
padding: 0 0.5em;
|
font-size: 0.35em;
|
color: #333;
|
font-weight: 500;
|
|
span {
|
width: 100%;
|
display: inline-block;
|
}
|
}
|
|
.item_price {
|
padding: 0.4em 0.5em;
|
font-size: 0.4em;
|
}
|
|
.item_index {
|
padding: 0 0.5em;
|
font-size: 0.3em;
|
margin-bottom: 0.2em;
|
}
|
}
|
</style>
|
