<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-start">
|
<div class="swiper-slide">
|
<div class="nav_item flex-center">
|
<img src="../../assets/img/home_1.png" alt="">
|
<span>AI {{ $t('量化交易') }}</span>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="nav_item flex-center">
|
<img src="../../assets/img/home_2.png" alt="">
|
<span>{{ $t('hj621') }}</span>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="nav_item flex-center">
|
<img src="../../assets/img/home_3.png" alt="">
|
<span>IPO</span>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="nav_item flex-center">
|
<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 3" :key="item">
|
<div class="item_title line-one">Lidwa gejadw LFwafd Djfajf</div>
|
<div class="item_price">44,406.36</div>
|
<div class="item_index flex-between">
|
<span>-422.17</span>
|
<span>-0.94%</span>
|
</div>
|
<div style="width:100%;height:1em">
|
<Echart :ids="'a' + item" :colorType="-1"></Echart>
|
</div>
|
<!-- <van-skeleton title :row="3" /> -->
|
</div>
|
</div>
|
</div>
|
|
<div class="subheading bg-white" style="margin-top: .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 3" :key="item">
|
<div class="item_title line-one">Lidwa gejadw LFwafd Djfajf</div>
|
<div class="item_price">44,406.36</div>
|
<div class="item_index flex-between">
|
<span>-422.17</span>
|
<span>-0.94%</span>
|
</div>
|
<div style="width:100%;height:1em">
|
<Echart :ids="'b' + item" :colorType="-1"></Echart>
|
</div>
|
<!-- <van-skeleton title :row="3" /> -->
|
</div>
|
</div>
|
</div>
|
|
<div class="subheading bg-white" style="margin-top: .25em;">
|
<div class="subheading_title">
|
<img src="../../assets/img/news.png" alt="">
|
<span>{{ $t('hj6') }}</span>
|
</div>
|
|
<div class="news_item flex-between-start" v-for="item in 3" :key="item">
|
<div class="news_title">Futures lower with Trump tariff deadline in focus - what’s moving markets</div>
|
<img src="https://i-invdn-com.investing.com/news/moved_LYNXNPEL51127_L.jpg" alt="">
|
<div class="news_time">2022-11-22 09:00:00</div>
|
</div>
|
|
<div class="more flex-center">
|
<span>{{ $t('更多新闻') }}</span>
|
<van-icon name="play" size=".5em" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import tabHead from "../../components/tabHead.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: "Deutsch",
|
// lang: "de",
|
// }, //德语
|
// {
|
// text: "Français",
|
// lang: "fr",
|
// }, //法语
|
// {
|
// text: "日本語にほんご",
|
// lang: "ja",
|
// },
|
],
|
}
|
},
|
components: {
|
tabHead,
|
Echart,
|
},
|
mounted() {
|
// this.getNewsList(1);
|
},
|
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);
|
},
|
}
|
}
|
|
</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: .25em;
|
|
img {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.subheading {
|
padding-bottom: .25em;
|
|
.subheading_title {
|
display: flex;
|
align-items: center;
|
padding: .35em .25em .35em .25em;
|
|
img {
|
width: .5em;
|
height: .5em;
|
margin-right: .25em;
|
}
|
|
span {
|
font-size: .5em;
|
line-height: .5em;
|
font-weight: 600;
|
}
|
}
|
|
.navs {
|
padding: 0 .25em 0 .25em;
|
|
.nav_item {
|
width: 2.833em;
|
height: 3em;
|
background-color: rgba(red, .1);
|
border-radius: .1em;
|
padding: .25em 0;
|
|
.item_title {
|
padding: 0 .5em;
|
font-size: .4em;
|
}
|
|
.item_price {
|
padding: .5em .5em;
|
color: @red;
|
font-size: .4em;
|
}
|
|
.item_index {
|
padding: 0 .5em;
|
color: @red;
|
font-size: .3em;
|
margin-bottom: .2em;
|
}
|
}
|
}
|
|
.swiper {
|
width: 10em;
|
// overflow: hidden;
|
overflow-x: auto;
|
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
|
.swiper-wrapper {
|
width: 13.333em;
|
|
.swiper-slide {
|
width: 3.333em;
|
height: 3em;
|
padding: 0 .25em 0 .25em;
|
|
.nav_item {
|
background-color: #fff;
|
border-radius: .25em;
|
width: 100%;
|
height: 100%;
|
flex-direction: column;
|
|
img {
|
width: 1em;
|
margin-bottom: .25em;
|
}
|
|
span {
|
font-size: .37em;
|
font-weight: 500;
|
}
|
}
|
}
|
}
|
}
|
|
.more {
|
padding: .5em .5em .2em;
|
color: @green;
|
|
span {
|
font-size: .5em;
|
margin-right: .3em;
|
}
|
}
|
|
.news_item {
|
width: 100%;
|
padding: .25em;
|
border-bottom: .02667em solid #f5f5f5;
|
position: relative;
|
|
.news_time {
|
position: absolute;
|
bottom: .8em;
|
left: .8em;
|
font-size: .3em;
|
color: #999;
|
}
|
|
.news_title {
|
font-size: .4em;
|
display: -webkit-box;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
-webkit-line-clamp: 3;
|
line-break: anywhere;
|
-webkit-box-orient: vertical;
|
width: 15.2em;
|
}
|
|
img {
|
width: 2.8em;
|
height: 2em;
|
margin-right: .25em;
|
border-radius: .1em;
|
}
|
}
|
}
|
}
|
</style>
|
