From 732c30b33f782c2d2ebb62eacda2fb7a453a7ecd Mon Sep 17 00:00:00 2001
From: admin <344137771@qq.com>
Date: Sat, 31 Jan 2026 11:01:45 +0800
Subject: [PATCH] 1
---
src/page/home/homeIndex.vue | 330 +++++++++++++++++++++++++++---------------------------
1 files changed, 167 insertions(+), 163 deletions(-)
diff --git a/src/page/home/homeIndex.vue b/src/page/home/homeIndex.vue
index f81cb74..086dce9 100644
--- a/src/page/home/homeIndex.vue
+++ b/src/page/home/homeIndex.vue
@@ -12,95 +12,119 @@
<div class="subheading">
<div class="subheading_title">
- <img src="../../assets/img/shortcut.png" alt="">
- <span>{{ $t('快捷方式') }}</span>
+ <img src="../../assets/img/shortcut.png" alt="" />
+ <span>{{ $t("快捷方式") }}</span>
</div>
<div class="swiper">
- <div class="swiper-wrapper flex-start">
+ <div class="swiper-wrapper flex-between">
<div class="swiper-slide">
- <div class="nav_item flex-center">
- <img src="../../assets/img/home_1.png" alt="">
- <span>AI {{ $t('量化交易') }}</span>
+ <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-center">
- <img src="../../assets/img/home_2.png" alt="">
- <span>{{ $t('hj621') }}</span>
+ <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-center">
- <img src="../../assets/img/home_3.png" alt="">
+ <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-center">
- <img src="../../assets/img/home_4.png" alt="">
- <span>{{ $t('理财基金') }}</span>
+ <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>
+ <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 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: .25em;">
+ <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>
+ <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 class="nav_item" v-for="item in jpDataStockBeans" :key="item.id">
+ <index-component :ids="'b' + item.id" :dataObj="item"></index-component>
</div>
</div>
</div>
- <div class="subheading bg-white" style="margin-top: .25em;">
+ <!-- <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>
+ <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/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>
+ <news-item :item="item" v-for="item in newsList" :key="item.id"></news-item>
- <div class="more flex-center">
- <span>{{ $t('更多新闻') }}</span>
+ <div class="more flex-center" @click="$router.push('/new-list')">
+ <span>{{ $t("更多新闻") }}</span>
<van-icon name="play" size=".5em" />
</div>
</div>
@@ -108,59 +132,87 @@
</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";
+import { languageOptions } from "@/config/languageOptions";
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",
- // },
- ],
- }
+ actions: languageOptions,
+ newsList: [],
+ jpDataStockBeans: [],
+ usDataStockBeans: [],
+ times: null
+ };
},
components: {
tabHead,
Echart,
+ indexComponent,
+ NewsItem
},
mounted() {
- // this.getNewsList(1);
+ this.init();
+ },
+ beforeDestroy() {
+ if (this.times) clearInterval(this.times);
},
methods: {
- onSelect(e) { // 选择语言
+ // 选择语言
+ onSelect(e) {
window.localStorage.setItem("language", e.lang);
this.$i18n.locale = e.lang;
},
- async getNewsList(type) { // 获取新闻列表
- if (typeof type == "string") type = 1
+ // 获取新闻列表
+ 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) {
+ let usLIst = data.data.usDataStockBeans || []
+ this.usDataStockBeans = usLIst.map(item => {
+ item.kData = item.kdata;
+ return item;
+ });
+
+ let jpLIst = data.data.jpDataStockBeans || []
+ this.jpDataStockBeans = jpLIst.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>
@@ -177,7 +229,7 @@
.multilingual {
width: 1em;
height: 1em;
- margin-left: .25em;
+ margin-left: 0.25em;
img {
width: 100%;
@@ -186,88 +238,73 @@
}
.subheading {
- padding-bottom: .25em;
+ padding-bottom: 0.25em;
.subheading_title {
display: flex;
align-items: center;
- padding: .35em .25em .35em .25em;
+ padding: 0.35em 0.25em 0.35em 0.25em;
img {
- width: .5em;
- height: .5em;
- margin-right: .25em;
+ width: 0.5em;
+ height: 0.5em;
+ margin-right: 0.25em;
}
span {
- font-size: .5em;
- line-height: .5em;
- font-weight: 600;
+ font-size: 0.5em;
+ line-height: 0.5em;
+ font-weight: 500;
}
}
.navs {
- padding: 0 .25em 0 .25em;
+ padding: 0 0.25em 0 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;
- }
+ // background-color: rgba(red, 0.1);
+ border-radius: 0.1em;
+ // padding: .25em 0;
}
}
.swiper {
- width: 10em;
- // overflow: hidden;
- overflow-x: auto;
+ // width: 10em;
+ // overflow-x: auto;
+ width: 100%;
- &::-webkit-scrollbar {
- display: none;
- }
+ // &::-webkit-scrollbar {
+ // display: none;
+ // }
.swiper-wrapper {
- width: 13.333em;
+ // width: 13.333em;
+ width: 100%;
+ padding: 0 0.25em 0 0.25em;
.swiper-slide {
- width: 3.333em;
- height: 3em;
- padding: 0 .25em 0 .25em;
+ width: 2.2em;
+ height: 2.4em;
.nav_item {
background-color: #fff;
- border-radius: .25em;
+ border-radius: 0.25em;
width: 100%;
height: 100%;
flex-direction: column;
+ padding: 0.45em 0.15em 0;
img {
- width: 1em;
- margin-bottom: .25em;
+ width: 0.6em;
+ margin-bottom: 0.25em;
}
span {
- font-size: .37em;
- font-weight: 500;
+ font-size: 0.28em;
+ font-weight: 700;
+ text-align: center;
}
}
}
@@ -275,45 +312,12 @@
}
.more {
- padding: .5em .5em .2em;
+ padding: 0.5em 0.5em 0.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;
+ font-size: 0.5em;
+ margin-right: 0.3em;
}
}
}
--
Gitblit v1.9.3