<template>
  <view v-if="pageData && pageData.goods.rage_is == 1" class="angry">
    <view class="icon flex">
      <image class="img100" src="/static/common/cardIcon.png" lazy-load></image>
    </view>
    <view class="ang-info">
      <view class="ang-num">怒气值:{{ pageData.goods.user_rage }}</view>
      <view class="progress">
        <cmd-progress :percent="pageData.goods.user_rage_schedule" :show-info="false"
          stroke-color="#FFFFFF;" stroke-shape="round" :strokeWidth="8"></cmd-progress>
      </view>
      <view class="tip">
        {{ pageData.goods.item_card_info }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DetailWuxianRage',
  props: {
    pageData: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style lang="scss" scoped>
.angry {
  margin: 30rpx auto 0;
  width: 690rpx;
  height: 136rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #3B3941;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  border: 2rpx solid #FFFFFF;

  .icon {
    width: 100rpx;
    height: 58rpx;
  }

  .ang-info {
    width: 490rpx;

    .ang-num {
      text-align: center;
      font-size: 24rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #FFFFFF;
    }

    .progress {
      margin-top: 10rpx;

      /deep/.cmd-progress-inner {
        border-radius: 0;
        background: #444444;
      }
    }

    .tip {
      margin-top: 20rpx;
      display: flex;
      font-size: 20rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #ffffff;
      line-height: 20rpx;
    }
  }
}
</style> 