| | |
| | | <template> |
| | | <div class="home_index"> |
| | | <tab-head> |
| | | <van-popover v-model="languageShow" trigger="click" :actions="actions" @select="onSelect" placement="bottom-end"> |
| | | <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="" /> |
| | |
| | | <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> |
| | | <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" /> --> |
| | | <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("墨西哥指数") }}</span> |
| | | <span>{{ $t("hksi") }}</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 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> |
| | |
| | | <span>{{ $t("hj6") }}</span> |
| | | </div> |
| | | |
| | | <news-item :item="item" v-for="item in newsList" :key="item.id"></news-item> |
| | | <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> |
| | |
| | | </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"; |
| | |
| | | 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", |
| | | // }, |
| | | { |
| | | text: "中文(繁体)", |
| | | lang: "zh-Hant" |
| | | }, |
| | | { |
| | | text: "हिंदी", |
| | | lang: "hi" |
| | | } |
| | | ], |
| | | newsList: [], |
| | | mxDataStockBeans: [], |
| | | usDataStockBeans: [] |
| | | hkDataStockBeans: [], |
| | | twDataStockBeans: [], |
| | | inDataStockBeans: [], |
| | | usDataStockBeans: [], |
| | | times: null |
| | | }; |
| | | }, |
| | | components: { |
| | |
| | | NewsItem |
| | | }, |
| | | mounted() { |
| | | this.getData(); |
| | | this.init(); |
| | | }, |
| | | beforeDestroy() { |
| | | if (this.times) clearInterval(this.times); |
| | | }, |
| | | methods: { |
| | | // 选择语言 |
| | |
| | | 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; |
| | | |
| | | 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; |
| | | }); |
| | | if (data.status == 0) { |
| | | this.twDataStockBeans = data.data.twDataStockBeans.map(item => { |
| | | item.kData = item.kdata; |
| | | return item; |
| | | }); |
| | | |
| | | // console.log( |
| | | // "home", |
| | | // this.newsList, |
| | | // this.mxDataStockBeans, |
| | | // this.usDataStockBeans |
| | | // ); |
| | | 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("充值提示")); |
| | | } |
| | | } |
| | | }; |
| | |
| | | span { |
| | | font-size: 0.5em; |
| | | line-height: 0.5em; |
| | | font-weight: 600; |
| | | font-weight: 500; |
| | | } |
| | | } |
| | | |
| | |
| | | padding: 0 0.25em 0 0.25em; |
| | | |
| | | .swiper-slide { |
| | | width: 2.1875em; |
| | | height: 2.5em; |
| | | width: 2.2em; |
| | | height: 2.4em; |
| | | |
| | | .nav_item { |
| | | background-color: #fff; |
| | |
| | | width: 100%; |
| | | height: 100%; |
| | | flex-direction: column; |
| | | padding-top: .25em; |
| | | padding: .25em .15em 0; |
| | | padding: 0.45em 0.15em 0; |
| | | |
| | | img { |
| | | width: 0.75em; |
| | | width: 0.6em; |
| | | margin-bottom: 0.25em; |
| | | } |
| | | |