1

PC-20250623MANY\Administrator

2025-08-09 47d2e74ddff53a4865cb98f893ec623a60d2b5fb

 src/page/markets/markets.vue

@@ -1,7 +1,13 @@
<template>
  <div class="markets">
    <tab-head :rightShow="false">
      <van-popover v-model="switchShow" trigger="click" :actions="actions" @select="onSelect" placement="bottom-end">
      <van-popover
        v-model="switchShow"
        trigger="click"
        :actions="actions"
        @select="onSelect"
        placement="bottom-end"
      >
        <template #reference>
          <div class="switch flex-center">
            <van-icon name="exchange" size=".45em" />
@@ -12,15 +18,19 @@
    </tab-head>

    <div class="tabs flex-between">
      <div class="tab_item flex-center" :class="{ active: item.pid == tab }" v-for="item in tabList" :key="item.pid"
        @click="tab = item.pid">
        <span>{{ item.abbreviation }}</span>
      <div
        class="tab_item flex-center"
        :class="{ active: item.pid == tab }"
        v-for="item in tabList"
        :key="item.pid"
        @click="tab = item.pid"
      >
        <span class="line-one">{{ item.abbreviation }}</span>
      </div>
    </div>

    <div class="markets_echart">
      <index-component :ids="'markets'" :dataObj="kData"></index-component>
      <!-- <van-skeleton title :row="3" /> -->
    </div>

    <stock-list :propOption="propOption"></stock-list>
@@ -43,12 +53,22 @@
        {
          text: this.$t("美国"),
          value: "US",
          name: "美国"
          name: this.$t("美国")
        },
        {
          text: this.$t("墨西哥"),
          value: "MEX",
          name: "墨西哥"
          text: this.$t("hk1"),
          value: "HK",
          name: this.$t("hk1")
        },
        {
          text: this.$t("tw"),
          value: "TW",
          name: this.$t("tw")
        },
        {
          text: this.$t("id1"),
          value: "IN",
          name: this.$t("id1")
        }
      ],
      tabList: [],
@@ -57,10 +77,20 @@
        { abbreviation: "S&P 500" },
        { abbreviation: "NASDAQ" }
      ],
      mxList: [
        { abbreviation: "IPC" },
        { abbreviation: "INMEX" },
        { abbreviation: "NASDAQ" }
      hkList: [
        { abbreviation: "恒生指數" },
        { abbreviation: "恒生中國企業指數" },
        { abbreviation: "HSCEI Covered Call Index" }
      ],
      twList: [
        { abbreviation: "臺灣證券交易所發行量加權股價指數" },
        { abbreviation: "櫃買指數" },
        { abbreviation: "臺灣50指數" }
      ],
      inList: [
        { abbreviation: "Nifty 50 Index" },
        { abbreviation: "Nifty Bank Index" },
        { abbreviation: "Nifty Financial Services Index" }
      ],
      tab: 1,
      pageNum: 1,
@@ -97,8 +127,7 @@
    await this.getTabData();
    this.tab = this.tabList[0].pid;
  },
  mounted() {
  },
  mounted() {},
  methods: {
    // 选择
    async onSelect(e) {
@@ -116,7 +145,9 @@
      // 数据重构
      let list = [];
      if (stockType == "US") list = this.usList;
      if (stockType == "MEX") list = this.mxList;
      else if (stockType == "HK") list = this.hkList;
      else if (stockType == "TW") list = this.twList;
      else if (stockType == "IN") list = this.inList;
      this.tabList = list.map((item, index) => {
        item = { ...item, ...data.data[index + 1] };
        return item;
@@ -136,7 +167,7 @@
    // tab切换
    tabChange() {
      this.getIndicesAndKData();
    },
    }
  }
};
</script>
@@ -174,6 +205,7 @@
      width: 32%;
      height: 0.8em;
      border-radius: 0.5em;
      padding: 0 .25em;

      span {
        font-size: 0.4em;