1

PC-20250623MANY\Administrator

2025-07-22 3003b7486ddeffd169f2b2f564fc0ff8c2c58bb3

 src/page/watchlists/watchlists.vue

@@ -1,30 +1,143 @@
<template>
    <div class="watchlists">
        <tab-head></tab-head>
  <div class="watchlists">
    <tab-head></tab-head>

    <div class="swiper">
      <div class="swiper-wrapper flex-start">
        <div class="swiper-slide" v-for="i in usDataStockBeans" :key="i.id">
          <index-component :ids="'c' + i.id" :dataObj="i"></index-component>
        </div>
      </div>
    </div>

    <div class="division"></div>

    <div class="subheading">
      <div class="subheading_title flex-start">
        <img src="../../assets/img/shortcut.png" alt="" />
        <span style="flex:1">{{ $t("hj61") }}</span>
        <span class="edit" @click="onEdit">{{
          editorShow ? $t("完成") : $t("编辑")
        }}</span>
      </div>

      <stock-list
        ref="stockList"
        :listApi="listApi"
        :editorShow.sync="editorShow"
      ></stock-list>
    </div>
  </div>
</template>

<script>
import tabHead from "@/components/tabHead.vue";
import indexComponent from "@/components/index-component.vue";
import stockList from "@/components/stock-list.vue";
import * as api from "@/axios/api";
export default {
    name: 'watchlists',
    components: {
        tabHead
  name: "watchlists",
  components: {
    tabHead,
    indexComponent,
    stockList
  },
  computed: {},
  data() {
    return {
      msg: "watchlists",
      editorShow: false,
      usDataStockBeans: [],
      listApi: api.getMyList
    };
  },
  created() {
    this.getData();
  },
  methods: {
    onEdit() {
    //   this.$refs.stockList.onEdit();
      this.editorShow = !this.editorShow;
    },
    data() {
        return {
            msg: 'watchlists'
        }

    // 获取首页数据
    async getData() {
      let data = await api.getHomePageData();

      console.log(data.data.usDataStockBeans, "djwkaldjwaldkj");

      this.usDataStockBeans = data.data.usDataStockBeans.map(item => {
        item.kData = item.kdata;
        return item;
      });
    }
}
  }
};
</script>

<style lang="less" scoped>
.watchlists {
    font-size: 10vw;
    width: 100vw;
    min-height: 100vh;
    padding-bottom: 1.5rem;
@green: #c4d600;

.watchlists {
  font-size: 10vw;
  width: 100vw;
  min-height: 100vh;
  padding-bottom: 1.5rem;

  .subheading {
    padding-bottom: 0.25em;

    .subheading_title {
      display: flex;
      align-items: center;
      padding: 0.35em 0.25em 0.35em 0.25em;

      .edit {
        color: @green;
      }

      img {
        width: 0.5em;
        height: 0.5em;
        margin-right: 0.25em;
      }

      span {
        font-size: 0.5em;
        line-height: 0.5em;
        font-weight: 500;
      }
    }
  }

  .division {
    width: 100%;
    height: 0.25em;
    background-color: #f5f5f5;
  }

  .swiper {
    width: 10em;
    overflow-x: auto;
    padding-bottom: 0.25em;

    &::-webkit-scrollbar {
      display: none;
    }

    .swiper-wrapper {
      width: 14.5em;
      margin-top: 0.4em;
      padding-left: 0.25em;

      .swiper-slide {
        margin-right: 0.25em;
        width: 4.5em;
        height: 3.2em;
        background-color: rgba(red, 0.1);
        border-radius: 0.1em;
      }
    }
  }
}
</style>
</style>