1

PC-20250623MANY\Administrator

2025-08-18 fbe4c23b9a0316937bc63213c910cbb393d6bc65

 src/components/index-component.vue

@@ -1,15 +1,16 @@
<template>
  <div class="index_component" :class="dataObj.chg > 0 ? 'bg-green' : 'bg-red'" @click="toLine">
  <div class="index_component bg-red" @click="toLine">
    <div class="item_title">
      <span class="line-one">{{ dataObj.name }}</span>
      <span class="line-one">{{ dataObj.symbol }}</span>
    </div>
    <div class="item_price">{{ dataObj.last }}</div>
    <div class="item_index flex-between">
      <span>{{ dataObj.chg }}</span>
      <span>{{ dataObj.chgPct }}%</span>
    </div>
    <div style="width:100%;flex:1">
      <Echart :ids="ids" :colorType="dataObj.chg / 1" :data="klist"></Echart>
    <div style="width:100%;flex:1" class="flex-center">
      <!-- <Echart :ids="ids" :colorType="dataObj.chg / 1" :data="klist"></Echart> -->
      <img src="@/assets/img/down_4.png" style="width:80%;" />
    </div>
  </div>
</template>
@@ -25,7 +26,7 @@
    },
    dataObj: {
      type: Object,
      default: () => { }
      default: () => {}
    }
  },
  computed: {
@@ -42,19 +43,20 @@
  methods: {
    // 跳转到指数图
    toLine() {
      return
      // 点击进入详情
      const obj = {
        pid: this.dataObj.id || "",
        type: this.dataObj.stockType || ""
        type: "US",
      };
      window.localStorage.setItem("kLine", JSON.stringify(obj));

      this.$router.push({
        path: "/kLineIndex",
        // path: "/kline",
        query: {
          // if_us: 1,
          code: this.dataObj.id,
          type: this.dataObj.stockType
          type: "US"
        }
      });
    }
@@ -63,10 +65,10 @@
</script>

<style lang="less" scoped>
@red: #ee0a24;
@red: #f54346;

.bg-red {
  background-color: rgba(red, 0.1);
  background: linear-gradient(180deg, #2d1b23, #161a23);
  color: @red;
}

@@ -86,7 +88,8 @@
  .item_title {
    padding: 0 0.5em;
    font-size: 0.35em;
    color: #333;
    color: #fff;
    text-align: center;

    span {
      width: 100%;