<template>
  <view class="page-container">
    <view class="help-container">
      <view class="card">
        <view class="card-content">
          <view class="help-item">
              <view class="question flex-row">
                <text class="icon">Q</text>
                <text class="title">充值未到账怎么办？</text>
              </view>
              <view class="answer flex-row">
                <text class="icon">A</text>
                <text class="content">
                  充值付款后，VIP会在5分钟内生效。如遇服务器拥堵，VIP生效可能会有延迟，请耐心等待，可退出APP重新进入查看VIP生效情况。若超过30分钟仍未到账，请点击充值页面下方的订单按钮进行查询并进行反馈。
                </text>
              </view>
            </view>
            <view class="help-item">
              <view class="question flex-row">
                <text class="icon">Q</text>
                <text class="title">充值需要注意什么？</text>
              </view>
              <view class="answer flex-row">
                <text class="icon">A</text>
                <text class="content">
                  如需充值请在充值页面发起订单，充值一次发起一笔订单，获取实时支付方式，请勿直接对历史交易账号进行“私下转账”，否则充值无法到账且不予补发。
                </text>
              </view>
            </view>
            <view class="help-item">
              <view class="question flex-row">
                <text class="icon">Q</text>
                <text class="title">误充或充错了账号，可以退款吗？</text>
              </view>
              <view class="answer flex-row">
                <text class="icon">A</text>
                <text class="content">
                  误充或充错账号后不能退款哦，建议您在充值前仔细核对充值账号与充值信息，避免发生误充、充错账号的情况。
                </text>
              </view>
            </view>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
</script>

<style lang="scss">
.page-container {
	background-color: $uni-bg-color;
  .help-container {
    padding: 15px;
    .help-item {
      margin-bottom: 15px;
      .icon {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        background-color: $uni-color-primary;
        border-radius: 50%;
        font-size: 13px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        line-height: 20px;
      }
      .title {
        flex: 1 1 0%;
        line-height: 20px;
        font-size: 14px;
        font-weight: 700;
        color: #1a1a2a;
      }
      .answer {
        margin-top: 10px;
        .icon {
          background-color: #82ddb9;
        }
        .content {
          flex: 1 1 0%;
          padding-bottom: 15px;
          line-height: 1.5;
          font-size: 14px;
          font-weight: 400;
          color: #1a1a2a;
          border-bottom: 1px solid #e8e9ec;
        }
      }
      &:last-child {
        margin-bottom: 0;
        .answer {
          .content {
            padding-bottom: 0;
            border: none;
          }
        }
      }
    }
  }
}
</style>