bemarket/src/components/market/nft/Chip.vue

<template>
  <div>
    <!-- <div class="no-sale">
        <img
              width="205px"
              src="../../../assets/market/hero/no-sale.png"
              alt=""
            />
    </div> -->
    <div @click="chipDialog(chip)">
      <div class="chip-bg">
        <img
          v-if="chip.c_id"
          width="147px"
          :src="require('@/assets/market/chip/' + chip.c_id + '.png')"
          alt=""
        />
        <img
          v-if="chip.item_id"
          width="147px"
          :src="require('@/assets/market/chip/' + chip.item_id + '.png')"
          alt=""
        />
      </div>
      <div class="level-content">
        <div class="level-lv">
          Lv <span class="level-number">{{ chip.detail.chip_grade }}</span>
        </div>
        <div class="tree-guard">{{ chip.detail.chip_name }}</div>
      </div>
      <div class="lease-listing" v-if="isType == 'mynft'">
        <div class="rent"></div>
        <div class="sell">Sell</div>
      </div>
      <div class="price-content" v-else>
        <div class="price-left">
          <div>
            <img
              width="32px"
              src="../../../assets/market/chip/t-icon.png"
              alt=""
            />
          </div>

          <div class="price">{{ chip.s_price ? chip.s_price : " " }}</div>
        </div>
        <div class="buy">
          <img width="78px" src="../../../assets/market/chip/buy.png" alt="" />
        </div>
      </div>
    </div>
    <ChipDialog
      :dialogVisible="dialogVisible"
      @on-close="chipDialoghide"
      @on-click="chipDialog"
      :type="type"
      :isBuy="isBuy"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
      :data="chip"
      :isType="isType"
      :isPiecePut="isPiecePut"
    ></ChipDialog>
    <ChipBuyDialog
      :type="type"
      :isBuy="isBuy"
       :data="chip"
      @handBuyShow="handBuyShow"
      @handBuyHide="handBuyHide"
    ></ChipBuyDialog>
    <TheSellDialog
      :type="type"
      :data="chip"
        v-if="currencyTypeList"
      :currencyTypeList="currencyTypeList"
      :isPiecePut="isPiecePut"
      @handPutShow="handPutShow"
      @handPutHide="handPutHide"
    />
  </div>
</template>

<script>
import ChipDialog from "../ChipDialog.vue";
import ChipBuyDialog from "../ChipBuyDialog.vue";
import TheSellDialog from "../TheSellDialog.vue";
export default {
  props: ["chip", "isType",'currencyTypeList'],
  components: {
    ChipDialog,
    TheSellDialog,
    ChipBuyDialog,
  },
  data() {
    return {
      dialogVisible: false,
      isPiecePut: false,
      type: "chip",
      isBuy: false,
    };
  },
  methods: {
    chipDialoghide() {
      this.dialogVisible = false;
    },
    chipDialog() {
      this.dialogVisible = true;
    },
    handPutShow() {
      this.isPiecePut = true;
    },
    handPutHide() {
      this.isPiecePut = false;
    },
    handBuyShow() {
      this.isBuy = true;
    },
    handBuyHide() {
      this.isBuy = false;
    },
  },
};
</script>

<style lang="scss" scoped>

.price-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 32px;
}
.level-number {
  font-size: 29px;
  font-weight: 400;
  font-style: italic;
  color: #454545;
}
.level-lv {
  font-size: 25px;
  font-weight: 400;
  font-style: italic;
  color: #454545;
}
.price {
  font-size: 25px;
  font-family: "Arciform";
  font-weight: 400;
  margin-left: 7px;
  color: #454545;
}
.price-left {
  display: flex;
}
.buy {
  cursor: pointer;
}

.level-content {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;

  .level-img {
    display: flex;
  }

  .level-levelList {
    display: flex;
    margin-left: 14px;
  }
  .item-Image {
    margin-left: 6px;
    display: flex;
  }
}
.chip-bg {
  width: 205px;
  height: 182px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 182px;
  background: url("../../../assets/market/chip/bg-there.png") no-repeat;
}
.tree-guard {
  font-size: 21px;
  font-weight: normal;
  color: #454545;
}
.no-sale {
  position: absolute;
  left: 0;
  top: 0;
  width: 242px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 292px;
  background: #3c3c3c;
  border: 4px solid #cdd8fd;
  opacity: 0.8;
  border-radius: 16px;
}
.lease-listing {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  .rent {
    width: 97px;
    height: 40px;
    // text-align: center;
    // line-height: 40px;
    // color: #fff;
    // background: url("../../../assets/market/hero/rent-btn.png") no-repeat;
    // background-size: contain;
  }
  .sell {
    width: 97px;
    height: 40px;
    color: #fff;
    text-align: center;
    margin-left: 14px;
    line-height: 40px;
    background: url("../../../assets/market/hero/sell-btn.png") no-repeat;
    background-size: contain;
  }
}
</style>