1

jhzh

2025-07-22 421087f05bbcee88211f2b95afd4843da521998b

 src/page/list/tradingList/tabs.vue

@@ -1,6 +1,7 @@
<template>
  <div>
    <van-tabs
    <div class="asiis">
    <!-- <van-tabs
      :active="active"
      line-width="15px"
      @change="(e) => change(e, 'active')"
@@ -10,7 +11,14 @@
          <div class="title">{{ item.title }}</div>
        </template>
      </van-tab>
    </van-tabs>
    </van-tabs> -->
    <div class="list">
      <div class="list_box" v-for="(item, index) in tabsList" :key="index" :name="item.key">
        <div @click="changetype(item.key, index)" :class="typeindex==index?'list_box_txts':'list_box_txt'">{{ item.title }}</div>
      </div>
    </div>
    </div>

    <div v-if="active == 'zx'">
      <van-tabs
        :active="zxactive"
@@ -44,22 +52,35 @@
export default {
  components: { dataList },
  mounted() {
    this.active = this.$route.query.type || "IN";
    this.active = this.$route.query.type || "JP";
    if(this.active == 'DZ'){
      this.typeindex = 2
    }else if(this.active == 'ZX'){
      // this.typeindex = 0
      this.changetype('',0)
    }
  },
  data() {
    return {
      tabsList: [
        { title: this.$t("hj61"), key: "zx" },
        { title: this.$t("印股"), key: "IN", name: "IN" },
        { title: this.$t("hj61"), key: "" },
        { title: this.$t("日股"), key: "JP", name: "JP" },
        { title: this.$t("hj621"), key: "DZ", name: "DZ" },
      ],
      zxtabsList: [{ title: this.$t("印股"), key: "IN", name: "IN" }],
      zxtabsList: [{ title: this.$t("日股"), key: "JP", name: "JP" }],
      active: "",
      zxactive: "IN",
      zxactive: "JP",
      sousuo: "",
      typeindex:1,
    };
  },
  methods: {
    changetype(e,i){
      this.typeindex = i
      this.change(e,'active')
    },
    change(e, type) {
      console.log(e,type);
      this[type] = e;
    },
  },
@@ -67,6 +88,25 @@
</script>

<style lang="less" scoped>
  .list_box_txts{
    padding: 12px 24px;
    color: #fff;
    background-color: #185546;
    border-radius: 4px;
  }
  .list{
    display: flex;
    height: 60px;
    align-items: center;
  }
  .list_box{
    display: flex;
    margin-left: 15px;
  }
  .list_box_txt{
    padding: 2px 4px;
    color: #8B8698;
  }
.title {
  // color: red;
  font-size: 18px;