From f7a99184725f7ea0884cf478f169aad4e5b6583c Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sun, 13 Jul 2025 18:27:57 +0800
Subject: [PATCH] 1
---
src/page/home/homeIndex.vue | 253 ++++++++++++++++++++++---------------------------
1 files changed, 114 insertions(+), 139 deletions(-)
diff --git a/src/page/home/homeIndex.vue b/src/page/home/homeIndex.vue
index f81cb74..03e2198 100644
--- a/src/page/home/homeIndex.vue
+++ b/src/page/home/homeIndex.vue
@@ -1,7 +1,13 @@
<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="" />
@@ -12,33 +18,33 @@
<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-center" @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-center">
- <img src="../../assets/img/home_2.png" alt="">
- <span>{{ $t('hj621') }}</span>
+ <div class="nav_item flex-center" @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-center" @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>
+ <img src="../../assets/img/home_4.png" alt="" />
+ <span>{{ $t("理财基金") }}</span>
</div>
</div>
</div>
@@ -47,60 +53,50 @@
<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>
+ <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: .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>
+ <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: .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/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>
@@ -109,6 +105,8 @@
<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 {
@@ -120,13 +118,13 @@
actions: [
{
text: "English",
- lang: "en",
+ lang: "en"
},
{
text: "简体中文",
- lang: "zh-CN",
+ lang: "zh-CN"
},
- { text: "हिंदी", lang: "hi" },
+ { text: "हिंदी", lang: "hi" }
// {
// text: "Deutsch",
// lang: "de",
@@ -140,27 +138,53 @@
// lang: "ja",
// },
],
- }
+ newsList: [],
+ mxDataStockBeans: [],
+ usDataStockBeans: []
+ };
},
components: {
tabHead,
Echart,
+ indexComponent,
+ NewsItem
},
mounted() {
- // this.getNewsList(1);
+ this.getData();
},
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);
},
- }
-}
+ // 获取首页数据
+ async getData() {
+ let data = await api.getHomePageData();
+ this.newsList = data.data.newsList;
+ this.mxDataStockBeans = data.data.mxDataStockBeans;
+ this.usDataStockBeans = data.data.usDataStockBeans;
+
+ // console.log(
+ // "home",
+ // this.newsList,
+ // this.mxDataStockBeans,
+ // this.usDataStockBeans
+ // );
+ },
+ // 跳转
+ toPage(url) {
+ if (!url) return;
+ this.$router.push(url);
+ }
+ }
+};
</script>
<style lang="less" scoped>
@@ -177,7 +201,7 @@
.multilingual {
width: 1em;
height: 1em;
- margin-left: .25em;
+ margin-left: 0.25em;
img {
width: 100%;
@@ -186,87 +210,71 @@
}
.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-size: 0.5em;
+ line-height: 0.5em;
font-weight: 600;
}
}
.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.1875em;
+ height: 2.1em;
+ // padding: 0 0.25em 0 0.25em;
.nav_item {
background-color: #fff;
- border-radius: .25em;
+ border-radius: 0.25em;
width: 100%;
height: 100%;
flex-direction: column;
img {
- width: 1em;
- margin-bottom: .25em;
+ width: 0.75em;
+ margin-bottom: 0.25em;
}
span {
- font-size: .37em;
+ font-size: 0.25em;
font-weight: 500;
}
}
@@ -275,45 +283,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