<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>{{ $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 class="swiper-slide">
|
<div class="nav_item flex-start" @click="czts">
|
<img src="@/assets/img/充值缴费.png" alt="" />
|
<span>{{ $t("hj172") }}</span>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div
|
class="nav_item flex-start"
|
@click="toPage('/authentications')"
|
>
|
<img src="@/assets/img/kyc.png" alt="" />
|
<span>KYC</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>
|
</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("hksi") }}</span>
|
</div>
|
<div class="flex-between navs">
|
<div class="nav_item" v-for="item in hkDataStockBeans" :key="item.id">
|
<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/iconmonstr-chart-5.png" alt="" />
|
<span>{{ $t("tsi") }}</span>
|
</div>
|
<div class="flex-between navs">
|
<div class="nav_item" v-for="item in twDataStockBeans" :key="item.id">
|
<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/iconmonstr-chart-5.png" alt="" />
|
<span>{{ $t("ni") }}</span>
|
</div>
|
<div class="flex-between navs">
|
<div class="nav_item" v-for="item in inDataStockBeans" :key="item.id">
|
<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 { Toast } from "vant";
|
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-Hant"
|
},
|
{
|
text: "हिंदी",
|
lang: "hi"
|
}
|
],
|
newsList: [],
|
hkDataStockBeans: [],
|
twDataStockBeans: [],
|
inDataStockBeans: [],
|
usDataStockBeans: [],
|
times: null
|
};
|
},
|
components: {
|
tabHead,
|
Echart,
|
indexComponent,
|
NewsItem
|
},
|
mounted() {
|
this.init();
|
},
|
beforeDestroy() {
|
if (this.times) clearInterval(this.times);
|
},
|
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);
|
},
|
// 初始化
|
init() {
|
this.getData();
|
this.times = setInterval(() => {
|
this.getData();
|
}, 2000);
|
},
|
// 获取首页数据
|
async getData() {
|
let data = await api.getHomePageData();
|
this.newsList = data.data.newsList;
|
|
if (data.status == 0) {
|
this.twDataStockBeans = data.data.twDataStockBeans.map(item => {
|
item.kData = item.kdata;
|
return item;
|
});
|
|
this.inDataStockBeans = data.data.inDataStockBeans.map(item => {
|
item.kData = item.kdata;
|
return item;
|
});
|
|
this.hkDataStockBeans = data.data.hkDataStockBeans.map(item => {
|
item.kData = item.kdata;
|
return item;
|
});
|
|
this.usDataStockBeans = data.data.usDataStockBeans.map(item => {
|
item.kData = item.kdata;
|
return item;
|
});
|
}
|
},
|
// 跳转
|
toPage(url) {
|
if (!url) return;
|
this.$router.push(url);
|
},
|
// 充值提示
|
czts() {
|
Toast(this.$t("充值提示"));
|
}
|
}
|
};
|
</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: 500;
|
}
|
}
|
|
.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: 3em;
|
height: 2.8em;
|
|
.nav_item {
|
background-color: #fff;
|
border-radius: 0.25em;
|
width: 100%;
|
height: 100%;
|
flex-direction: column;
|
padding: 0.45em 0.15em 0;
|
|
img {
|
width: 0.95em;
|
margin-bottom: 0.25em;
|
}
|
|
span {
|
font-size: 0.28em;
|
font-weight: 700;
|
text-align: center;
|
}
|
}
|
}
|
}
|
}
|
|
.more {
|
padding: 0.5em 0.5em 0.2em;
|
color: @green;
|
|
span {
|
font-size: 0.5em;
|
margin-right: 0.3em;
|
}
|
}
|
}
|
}
|
</style>
|
