sso-ssr/components/mobile/reset/stepSelect.vue

<template>
  <div class="f-main">
    <div class="content-top">
      <p>密码重置</p>
    </div>
    <div>
      <ul class="select-item">
        <li class="item" @click="jump('before')">
          <img src="/images/all/icon03.png">
          <span>通过登录密码</span>
          <i class="fa fa-angle-right second"></i>
        </li>
        <li class="item" @click="jump('mobile')">
          <img src="/images/all/icon01.png">
          <span>通过验证手机</span>
          <i class="fa fa-angle-right second"></i>
        </li>
        <li class="item" @click="jump('email')">
          <img src="/images/all/icon02.png">
          <span>通过验证邮箱</span>
          <i class="fa fa-angle-right second"></i>
        </li>
        <li class="item" @click="jump('appeal')">
          <img src="/images/all/icon04.png">
          <i></i><span>通过人工申诉</span>
          <i class="fa fa-angle-right second"></i>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'step-two',
    methods: {
      jump (type) {
        this.$emit('stepEvent', type)
      }
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
.select-item {
  padding-top:.5rem;
  .item {
    position:relative;
    padding-left:.4rem;
    margin-bottom:.2rem;
    line-height: 1.5rem;
    background: #f4f4f4;
    font-size: .32rem;
    span{
      color:#505050;
      margin-left:.4rem;
    }
    i{
      display:inline-block;
      position:absolute;
      right:.4rem;
      line-height: 1.5rem;
      font-size:.45rem;

    }
  }
}
</style>