1

admin

2026-01-19 2b89158d7bf80f2c9a8a4203b4837de92837e7ca

 src/page/home/homeIndex.vue

@@ -1,13 +1,7 @@
<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="" />
@@ -24,29 +18,44 @@
      <div class="swiper">
        <div class="swiper-wrapper flex-between">
          <div class="swiper-slide">
            <div class="nav_item flex-center" @click="toPage('/aiTrading')">
            <div class="nav_item flex-start" @click="toPage('/aiTrading')">
              <img src="../../assets/img/home_1.png" alt="" />
              <span>AI {{ $t("量化交易") }}</span>
              <span>{{ $t("量化交易") }}</span>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="nav_item flex-center" @click="toPage('/blockTrading')">
            <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" @click="toPage('/ipo')">
            <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">
            <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>
@@ -58,11 +67,7 @@
      </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>
@@ -70,18 +75,45 @@
    <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("日股指数") }}</span>
      </div>
      <div class="flex-between navs">
        <div class="nav_item" v-for="item in mxDataStockBeans" :key="item.id">
          <!-- <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: 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> -->

    <!-- <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">
@@ -89,11 +121,7 @@
        <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>
@@ -104,43 +132,24 @@
</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: [],
      mxDataStockBeans: [],
      usDataStockBeans: []
      jpDataStockBeans: [],
      usDataStockBeans: [],
      times: null
    };
  },
  components: {
@@ -150,7 +159,10 @@
    NewsItem
  },
  mounted() {
    this.getData();
    this.init();
  },
  beforeDestroy() {
    if (this.times) clearInterval(this.times);
  },
  methods: {
    // 选择语言
@@ -163,25 +175,41 @@
      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;
      this.usDataStockBeans = data.data.usDataStockBeans;
      if (data.status == 0) {
        let usLIst = data.data.usDataStockBeans || []
        this.usDataStockBeans = usLIst.map(item => {
          item.kData = item.kdata;
          return item;
        });

      // console.log(
      //   "home",
      //   this.newsList,
      //   this.mxDataStockBeans,
      //   this.usDataStockBeans
      // );
        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("充值提示"));
    }
  }
};
@@ -226,7 +254,7 @@
      span {
        font-size: 0.5em;
        line-height: 0.5em;
        font-weight: 600;
        font-weight: 500;
      }
    }

@@ -257,9 +285,8 @@
        padding: 0 0.25em 0 0.25em;

        .swiper-slide {
          width: 2.1875em;
          height: 2.1em;
          // padding: 0 0.25em 0 0.25em;
          width: 2.2em;
          height: 2.4em;

          .nav_item {
            background-color: #fff;
@@ -267,15 +294,17 @@
            width: 100%;
            height: 100%;
            flex-direction: column;
            padding: 0.45em 0.15em 0;

            img {
              width: 0.75em;
              width: 0.6em;
              margin-bottom: 0.25em;
            }

            span {
              font-size: 0.25em;
              font-weight: 500;
              font-size: 0.28em;
              font-weight: 700;
              text-align: center;
            }
          }
        }