<template>
  <div class="activity">
    <div class="activityLeft">
      <span class="activityName" :class="titleClass">{{ info.title }}</span>
      <span class="activityContent">{{ info.content }}</span>
    </div>
    <p class="activityJumpText" @click="toRecommend(info.jumpUrl)">
      {{ info.jumpText }}<span class="iconfont icon-arrow icon" />
    </p>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    titleClass: function() {
      return this.info.title === '满减' ? 'red' : 'orange';
    }
  },
  methods: {
    toRecommend(url) {
      window.location.href = url;
    }
  }
};
</script>
<style lang="less">
.activity {
  display: flex;
  font-size: 12px;
  color: #333333;
  font-weight: 400;
  height: 38px;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #ffffff;
  border-radius: 8px 8px 0 0;
}
.activityLeft {
  width: 215px;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activityName {
  width: 38px;
  height: 17px;
  border-radius: 4px;
  color: #ffffff;
  font-weight: 600;
  padding: 1px 7px;
  margin-right: 8px;
}
.activityContent {
  max-width: 169px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activityJumpText {
  display: flex;
  align-items: center;
}
.orange {
  background: #fc7e00;
  border: 1px solid #fc7e00;
}
.red {
  background: #ec1500;
  border: 1px solid #ec1500;
}
.icon {
  font-size: 10px;
}
</style>
