<template>
  <!-- 活动说明 -->
  <div class="task_tips_box">
    <!-- 标题 -->
    <ActiveTitle active="hb" acitveTitle="活动说明" />

    <ul class="hb_task_tips">
      <li>1．活动从角色创建以后开启，7天后结束；</li>
      <li>2．每完成对应任务，即可领取对应红包奖励；</li>
      <li>
        3．红包奖励要在规定时间内完成并领取，有效时间内完成但未领取，视为自动放弃；
      </li>
      <li>4．红包提现需要达到提现额度方可提现；</li>
      <li>
        5．红包提现要在　“任务：10转150级”　时间结束后进行提现操作，24小时内如不提现视为自动放弃；
      </li>
      <li>
        6．最终解释权归平台所有，活动期间任何问题都可以咨询<span
          @click="onService"
          >客服</span
        >。
      </li>
    </ul>
  </div>
</template>

<script>
import ActiveTitle from "@/components/Active/ActiveTitle/ActiveTitle"; // 标题
export default {
  name: "HbTaskTips",
  components: {
    ActiveTitle,
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 联系客服
    onService() {
      this.$emit("onService");
    },
  },
};
</script>

<style lang='less' scoped>
.hb_task_tips {
  line-height: 50 / @rem;
  margin-top: 20 / @rem;
  text-align: left;

  li {
    span {
      margin: 0 5 / @rem;
      color: #fe777d;
      border-bottom: 1px solid #fe777d;
      cursor: pointer;
    }
  }
}

// 正常横屏样式
@media all and (orientation: landscape),
  /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  .hb_task_tips {
    line-height: 30 / @rem;
    margin-top: 10 / @rem;
  }
}
</style>