1

PC-20250623MANY\Administrator

2025-07-13 f7a99184725f7ea0884cf478f169aad4e5b6583c

 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;
      }
    }
  }