JHAndroid/src/views/Login/SelectLogin.vue

<template>
  <div class="inner_box">
    <div class="select_login">
      <div class="title">选择登录方式</div>
      <div class="select_type clear">
        <div class="left" @click="quickHandler">
          <i class="iconfont icon-shandian"></i>
          <div class="type">快速登录</div>
        </div>
        <div class="right" @click="onLogin">
          <i class="iconfont icon-mobile"></i>
          <div class="type">账号/手机号登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "selectLogin",
  components: {},
  inject: ["onQuickHandler"],
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    quickHandler() {
      this.onQuickHandler();
    },
    onLogin() {
      this.$emit("showInnerControl", "");
    },
  },
};
</script>

<style lang='less' scoped>
.select_login {
  width: 700 / @rem;
  height: 550 / @rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -350 / @rem;
  margin-top: -300 / @rem;
  font-size: 32 / @rem;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;

  .title {
    height: 100 / @rem;
    line-height: 100 / @rem;
    background-color: #3faeed;
    color: #fff;
    font-size: 36 / @rem;
  }

  .select_type {
    .left,
    .right {
      width: 50%;
      margin-top: 120 / @rem;
      float: left;

      i {
        line-height: 100 / @rem;
      }
    }

    .left {
      i {
        color: #3faeed;
        font-size: 70 / @rem;
      }
    }

    .right {
      i {
        font-size: 70 / @rem;
      }
    }
  }
}

//  横屏
@media screen and (orientation: landscape),
  /**竖屏 */ all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  /**ipad */ all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  all and (device-aspect-ratio: 4/3) {
  .select_login {
    width: 350 / @rem;
    height: 260 / @rem;
    margin-left: -175 / @rem;
    margin-top: -130 / @rem;
    font-size: 16 / @rem;

    .title {
      height: 40 / @rem;
      line-height: 40 / @rem;
      font-size: 18 / @rem;
    }

    .select_type {
      .left,
      .right {
        margin-top: 60 / @rem;

        i {
          line-height: 50 / @rem;
        }
      }

      .left {
        i {
          font-size: 35 / @rem;
        }
      }

      .right {
        i {
          font-size: 35 / @rem;
        }
      }
    }
  }
}
</style>