1

PC-20250623MANY\Administrator

2025-07-26 35ba5f69dc6f207e73c99af9c46e0820a7388852

 src/components/index-component.vue

@@ -1,10 +1,16 @@
<template>
  <div class="index_component" :class="dataObj.chg > 0 ? 'bg-green' : 'bg-red'">
    <div class="item_title line-one">{{ dataObj.name }}</div>
  <div
    class="index_component"
    :class="dataObj.chg > 0 ? 'bg-green' : 'bg-red'"
    @click="toLine"
  >
    <div class="item_title">
      <span class="line-one">{{ dataObj.name }}</span>
    </div>
    <div class="item_price">{{ dataObj.last }}</div>
    <div class="item_index flex-between">
      <span>{{ dataObj.chg }}</span>
      <span>{{ dataObj.chgPct }}</span>
      <span>{{ dataObj.chgPct }}%</span>
    </div>
    <div style="width:100%;flex:1">
      <Echart :ids="ids" :colorType="dataObj.chg / 1" :data="klist"></Echart>
@@ -23,26 +29,39 @@
    },
    dataObj: {
      type: Object,
      default: () => {
        return {
          name: "",
          last: "",
          chg: "",
          chgPct: "",
          kdata: []
        };
      }
      default: () => {}
    }
  },
  computed: {
    klist() {
      return this.dataObj.kdata.map(item => {
      if (!this.dataObj.kData || this.dataObj.kData.length == 0) return [];
      return this.dataObj.kData.map(item => {
        return item.c;
      });
    }
  },
  components: {
    Echart
  },
  methods: {
    // 跳转到指数图
    toLine() {
      // 点击进入详情
      const obj = {
        pid: this.dataObj.id || "",
        type: this.dataObj.stockType || ""
      };
      window.localStorage.setItem("kLine", JSON.stringify(obj));

      this.$router.push({
        path: "/kLineIndex",
        query: {
          // if_us: 1,
          code: this.dataObj.id,
          type: this.dataObj.stockType
        }
      });
    }
  }
};
</script>
@@ -56,7 +75,7 @@
}

.bg-green {
  background-color: rgba(green, 0.1);
  background-color: #f3fbf9;
  color: green;
}

@@ -70,11 +89,18 @@

  .item_title {
    padding: 0 0.5em;
    font-size: 0.4em;
    font-size: 0.35em;
    color: #333;
    font-weight: 500;

    span {
      width: 100%;
      display: inline-block;
    }
  }

  .item_price {
    padding: 0.5em 0.5em;
    padding: 0.4em 0.5em;
    font-size: 0.4em;
  }