zzzz
2024-03-20 d25a45190cee44b36296693d5022a0ce9ae9b698
src/components/contract-futrue/index.vue
@@ -1,61 +1,83 @@
<template>
    <div class="contact-futrue">
        <div class="font-24 text-grey mb-24">{{ $t('交割时间') }}</div>
        <ul class="flex flex-wrap w-full">
            <li v-for="(item, index) in initFutrue.para" :key="item.para_id" class="h-92 flex items-center mb-22"
                @click="onSelect(item, index)">
                <p class="w-95 h-full flex justify-center items-center font-22 flex-1"
                    :class="active === item.para_id ? 'bg-light-blue text-white' : 'bgDark textColor'">{{ item.time_num +
                        item.time_unit.substr(0, 1) }}</p>
                <p class="w-125 h-full flex justify-center items-center font-22 flex-1"
                    :class="active === item.para_id ? 'bg-dark-blue text-white' : 'contBackground textColor'">{{
                        item.profit_ratio }}%</p>
            </li>
        </ul>
    </div>
  <div class="contact-futrue box-show">
    <div class="font-24 text-grey mb-24">{{ $t("交割时间") }}</div>
    <ul class="flex flex-wrap w-full">
      <li
        v-for="(item, index) in initFutrue.para"
        :key="item.para_id"
        class="h-92 flex items-center mb-22"
        @click="onSelect(item, index)"
      >
        <p
          class="w-95 h-full flex justify-center items-center font-22 flex-1"
          :class="
            active === item.para_id
              ? 'bg-light-blue text-white'
              : 'bgDark textColor'
          "
        >
          {{ item.time_num + item.time_unit.substr(0, 1) }}
        </p>
        <p
          class="w-125 h-full flex justify-center items-center font-22 flex-1"
          :class="
            active === item.para_id
              ? 'bg-dark-blue text-white'
              : 'contBackground textColor'
          "
        >
          {{ item.profit_ratio }}%
        </p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    name: 'ContractFutrue',
    props: {
        initFutrue: {
            type: Object,
            default() {
                return {}
            }
        }
  name: "ContractFutrue",
  props: {
    initFutrue: {
      type: Object,
      default() {
        return {};
      },
    },
    data() {
        return {
            active: '',
            initParam: [] // 初始化参数
        }
  },
  data() {
    return {
      active: "",
      initParam: [], // 初始化参数
    };
  },
  created() {
    this.active =
      this.initFutrue && this.initFutrue.para
        ? this.initFutrue.para[0].para_id
        : "";
    this.$emit("paraId", { id: this.active, index: 0 });
  },
  methods: {
    onSelect(item, index) {
      // 选中
      this.active = item.para_id;
      this.$emit("paraId", { id: this.active, index });
    },
    created() {
        this.active = this.initFutrue && this.initFutrue.para ? this.initFutrue.para[0].para_id : ''
        this.$emit('paraId', { id: this.active, index: 0 })
    },
    methods: {
        onSelect(item, index) { // 选中
            this.active = item.para_id
            this.$emit('paraId', { id: this.active, index })
        }
    }
}
  },
};
</script>
<style scoped lang="scss">
.bgDark {
    @include themify() {
        background: themed("tab_background2");
    }
  @include themify() {
    background: themed("tab_background2");
  }
}
.bg-light-blue {
    background: #1D91FF;
  background: #1d91ff;
}
.bg-dark-blue {
    background: #1255A3;
  background: #1255a3;
}
</style>