<template>
|
<div class="home_index">
|
<tab-head>
|
<van-popover
|
v-model="languageShow"
|
trigger="click"
|
:actions="actions"
|
@select="onSelect"
|
placement="bottom-end"
|
>
|
<template #reference>
|
<div class="multilingual">
|
<img src="../../assets/img/language.svg" alt="" />
|
</div>
|
</template>
|
</van-popover>
|
</tab-head>
|
|
<div class="subheading">
|
<div class="subheading_title">
|
<img src="../../assets/img/shortcut.png" alt="" />
|
<span>{{ $t("快捷方式") }}</span>
|
</div>
|
<div class="swiper">
|
<div class="swiper-wrapper flex-between">
|
<div class="swiper-slide">
|
<div class="nav_item flex-start" @click="toPage('/aiTrading')">
|
<img src="../../assets/img/home_1.png" alt="" />
|
<span>AI {{ $t("量化交易") }}</span>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="nav_item flex-start" @click="toPage('/blockTrading')">
|
<img src="../../assets/img/home_2.png" alt="" />
|
<span>{{ $t("hj621") }}</span>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="nav_item flex-start" @click="toPage('/ipo')">
|
<img src="../../assets/img/home_3.png" alt="" />
|
<span>IPO</span>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="nav_item flex-start" @click="toPage('/fund')">
|
<img src="../../assets/img/home_4.png" alt="" />
|
<span>{{ $t("理财基金") }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="subheading bg-white">
|
<div class="subheading_title">
|
<img src="../../assets/img/iconmonstr-chart-5.png" alt="" />
|
<span>{{ $t("美股指数") }}</span>
|
</div>
|
<div class="flex-between navs">
|
<div class="nav_item" v-for="item in usDataStockBeans" :key="item.id">
|
<index-component
|
:ids="'a' + item.id"
|
:dataObj="item"
|
></index-component>
|
<!-- <van-skeleton title :row="3" /> -->
|
</div>
|
</div>
|
</div>
|
|
<div class="subheading bg-white" style="margin-top: 0.25em">
|
<div class="subheading_title">
|
<img src="../../assets/img/iconmonstr-chart-5.png" alt="" />
|
<span>{{ $t("墨西哥指数") }}</span>
|
</div>
|
<div class="flex-between navs">
|
<div class="nav_item" v-for="item in mxDataStockBeans" :key="item.id">
|
<!-- <van-skeleton title :row="3" /> -->
|
<index-component
|
:ids="'b' + item.id"
|
:dataObj="item"
|
></index-component>
|
</div>
|
</div>
|
</div>
|
|
<div class="subheading bg-white" style="margin-top: 0.25em">
|
<div class="subheading_title">
|
<img src="../../assets/img/news.png" alt="" />
|
<span>{{ $t("hj6") }}</span>
|
</div>
|
|
<news-item
|
:item="item"
|
v-for="item in newsList"
|
:key="item.id"
|
></news-item>
|
|
<div class="more flex-center" @click="$router.push('/new-list')">
|
<span>{{ $t("更多新闻") }}</span>
|
<van-icon name="play" size=".5em" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import tabHead from "../../components/tabHead.vue";
|
import NewsItem from "./components/newsItem.vue";
|
import indexComponent from "../../components/index-component.vue";
|
import Echart from "./components/echart.vue";
|
import * as api from "@/axios/api";
|
export default {
|
name: "homeIndex",
|
data() {
|
return {
|
languageShow: false, // 语言选择
|
// 多语言配置
|
actions: [
|
{
|
text: "English",
|
lang: "en"
|
},
|
// {
|
// text: "简体中文",
|
// lang: "zh-CN"
|
// },
|
// { text: "हिंदी", lang: "hi" },
|
{ text: "español", lang: "es" }
|
// {
|
// text: "Deutsch",
|
// lang: "de",
|
// }, //德语
|
// {
|
// text: "Français",
|
// lang: "fr",
|
// }, //法语
|
// {
|
// text: "日本語にほんご",
|
// lang: "ja",
|
// },
|
],
|
newsList: [],
|
mxDataStockBeans: [],
|
usDataStockBeans: []
|
};
|
},
|
components: {
|
tabHead,
|
Echart,
|
indexComponent,
|
NewsItem
|
},
|
mounted() {
|
this.getData();
|
},
|
methods: {
|
// 选择语言
|
onSelect(e) {
|
window.localStorage.setItem("language", e.lang);
|
this.$i18n.locale = e.lang;
|
},
|
// 获取新闻列表
|
async getNewsList(type) {
|
if (typeof type == "string") type = 1;
|
// let data = await api.queryNewsList(type);
|
},
|
// 获取首页数据
|
async getData() {
|
let data = await api.getHomePageData();
|
this.newsList = data.data.newsList;
|
|
this.mxDataStockBeans = data.data.mxDataStockBeans.map(item => {
|
item.kData = item.kdata;
|
return item;
|
});
|
this.usDataStockBeans = data.data.usDataStockBeans.map(item => {
|
item.kData = item.kdata;
|
return item;
|
});
|
|
// console.log(
|
// "home",
|
// this.newsList,
|
// this.mxDataStockBeans,
|
// this.usDataStockBeans
|
// );
|
},
|
// 跳转
|
toPage(url) {
|
if (!url) return;
|
this.$router.push(url);
|
}
|
}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
@red: #ee0a24;
|
@green: #c4d600;
|
|
.home_index {
|
font-size: 10vw;
|
width: 100vw;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
padding-bottom: 1.5rem;
|
|
.multilingual {
|
width: 1em;
|
height: 1em;
|
margin-left: 0.25em;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.subheading {
|
padding-bottom: 0.25em;
|
|
.subheading_title {
|
display: flex;
|
align-items: center;
|
padding: 0.35em 0.25em 0.35em 0.25em;
|
|
img {
|
width: 0.5em;
|
height: 0.5em;
|
margin-right: 0.25em;
|
}
|
|
span {
|
font-size: 0.5em;
|
line-height: 0.5em;
|
font-weight: 600;
|
}
|
}
|
|
.navs {
|
padding: 0 0.25em 0 0.25em;
|
|
.nav_item {
|
width: 2.833em;
|
height: 3em;
|
// background-color: rgba(red, 0.1);
|
border-radius: 0.1em;
|
// padding: .25em 0;
|
}
|
}
|
|
.swiper {
|
// width: 10em;
|
// overflow-x: auto;
|
width: 100%;
|
|
// &::-webkit-scrollbar {
|
// display: none;
|
// }
|
|
.swiper-wrapper {
|
// width: 13.333em;
|
width: 100%;
|
padding: 0 0.25em 0 0.25em;
|
|
.swiper-slide {
|
width: 2.1875em;
|
height: 2.5em;
|
|
.nav_item {
|
background-color: #fff;
|
border-radius: 0.25em;
|
width: 100%;
|
height: 100%;
|
flex-direction: column;
|
padding-top: .25em;
|
|
img {
|
width: 0.75em;
|
margin-bottom: 0.25em;
|
}
|
|
span {
|
font-size: 0.25em;
|
font-weight: 500;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
|
.more {
|
padding: 0.5em 0.5em 0.2em;
|
color: @green;
|
|
span {
|
font-size: 0.5em;
|
margin-right: 0.3em;
|
}
|
}
|
}
|
}
|
</style>
|
