<template>
  <div class="commodityDetails">
    <div class="img_info">
      <img src="https://cdn.cunwuyun.cn/dvcp/h5/no-admin.png" alt="">
    </div>
    <div class="commodity_title">
      <div class="title">天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾天薇抽纸天然无香纸巾可湿水…</div>
      <div class="commodity_integral">
        <p class="integral"><span>10</span><span>分</span></p>
        <h5 class="repertory">库存：100</h5>
      </div>
    </div>
    <div class="exchange">
      <div class="owner_integral">积分余额:438</div>
      <!-- 积分不足、缺货 -->
      <div class="exchange_btn">立即兑换</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commodityDetails',
  data() {
    return {

    }
  },
  onShow() {
    document.title = '商品详情'
  },
  methods: {
    
  },
}
</script>

<style lang="scss" scoped>
.commodityDetails {
  background: #FFF;
  .img_info {
    width: 100%;
    height: 750px;
    img {
      width: 100%;
    }
  }
  .commodity_title {
    padding: 32px;
    box-sizing: border-box;
    .title {
      font-size: 32px;
      color: #333333;
      font-weight: 600;
    }
  }
  .commodity_integral {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 32px;

    .integral {
      color: #FF6900;
      font-size: 500;
      span:first-child {
        font-size: 34px;
      }
      span:last-child {
        font-size: 26px;
      }
    }
    .repertory {
      color: #999999;
      font-size: 26px;
    }
  }
  .exchange {
    width: 100vw;
    height: 112px;
    padding: 0 32px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #FFF;

    .owner_integral {
      color: #CA906A;
    }

    .exchange_btn {
      width: 224px;
      text-align: center;
      height: 80px;
      line-height: 80px;
      // background: #DDDDDD;
      border-radius: 52px;
      background-image: linear-gradient(90deg, #FFA044 0%, #FF8436 100%);
      color: #FFF;
    }
  }
}
</style>