src/popup/login/main.vue

   1 <style>
   2 .warp {
   3   position: absolute;
   4   top: 0;
   5   left: 0;
   6   right: 0;
   7   height: 100%;
   8 }
   9 .login-header {
  10   height: 60px;
  11   text-align: center;
  12 }
  13 .login-header img {
  14   width: 30px;
  15   height: 30px;
  16   margin-top: 15px;
  17 }
  18 .login-content {
  19   padding: 30px;
  20   font-size: 12px;
  21 }
  22 .login-content h4 {
  23   text-align: center;
  24   font-size: 18px;
  25 }
  26 .login-footer {
  27   padding: 20px 85px;
  28 }
  29 </style>
  30
  31 <template>
  32   <section id="app">
  33     <transition-group name="panels">
  34       <Welcome class="view" key="welcome" v-show="view.welcome" @next="currView='protocol'"></Welcome>
  35       <Protocol class="view" key="protocol" v-show="view.protocol" @next="currView='formAddon'"></Protocol>
  36       <FormAddon class="view" key="formAddon" v-show="view.formAddon" @next="currView='formRecover'" @success="loadHome"></FormAddon>
  37       <FormRecover class="view" key="formRecover" v-show="view.formRecover" @back="currView='formAddon'" @success="loadHome"></FormRecover>
  38     </transition-group>
  39   </section>
  40 </template>
  41
  42 <script>
  43 import Welcome from "./components/welcome";
  44 import Protocol from "./components/protocol";
  45 import FormAddon from "./components/form-addon";
  46 import FormRecover from "./components/form-recover";
  47
  48 export default {
  49   components: {
  50     Welcome,
  51     Protocol,
  52     FormAddon,
  53     FormRecover
  54   },
  55   data() {
  56     return {
  57       currView: "welcome"
  58     };
  59   },
  60   computed: {
  61     view() {
  62       const { currView } = this;
  63       return {
  64         welcome: currView === "welcome",
  65         protocol: currView === "protocol",
  66         formAddon: currView === "formAddon",
  67         formRecover: currView === "formRecover"
  68       };
  69     }
  70   },
  71   methods: {
  72     loadHome: function() {
  73       this.$emit("succ");
  74     }
  75   }
  76 };
  77 </script>