包依赖项

node-sassvuex

<template>  <main class="login">    <section class="login__forms">  <div class="login__forms__register" v-if="!obj.status">        <form class="login__forms__register__form" @submit.prevent="login">          <h2 style="text-align:center;">登录</h2>                     <div class="login__forms__register__form__address__1-input">            <label class="login__forms__label" for="email">邮箱</label>            <input type="email" id="email" name="email" autocomplete="email" required enterkeyhint="next"              v-model="myform.email" placeholder="请输入邮箱" />          </div>            <div class="login__forms__register__form__address__1-input">            <label class="login__forms__label" for="register-password">密码</label>            <input type="password" id="register-password" name="register-password" autocomplete="register-password" required enterkeyhint="next"              v-model="myform.password" placeholder="请输入密码"/>          </div>                 <div> <input class="login__forms__button register" type="submit" value="登录">   <p align=center @click="doRegister">还没有账号?点击注册</p>         </div>        </form>      </div>      <div class="login__forms__register" v-if="obj.status">        <form class="login__forms__register__form" @submit.prevent="register">          <h2 style="text-align:center;">注册</h2>                     <div class="login__forms__register__form__address__1-input">            <label class="login__forms__label" for="email">邮箱</label>            <input type="email" id="email" name="email" autocomplete="email" required enterkeyhint="next"              v-model="myform.email" placeholder="请输入邮箱" />          </div>            <div class="login__forms__register__form__address__1-input">            <label class="login__forms__label" for="register-password">密码</label>            <input type="password" id="register-password" name="register-password" autocomplete="register-password" required enterkeyhint="next"              v-model="myform.password" placeholder="请输入密码" />          </div>          <div>            <label class="login__forms__label" for="name">昵称</label>            <input type="text" id="name" name="name" autocomplete="name" required enterkeyhint="next"              v-model="myform.name"  placeholder="请输入昵称"/>          </div>            <div class="login__forms__register__form__address">                       <div class="login__forms__register__form__address__3-inputs">              <div>                <label class="login__forms__label" for="address-country">国家</label>                <input type="text" id="address-country" name="address-country" autocomplete="address-country"                  required enterkeyhint="next" v-model="myform.addressCountry" placeholder="国家"/>              </div>              <div>                <label class="login__forms__label" for="address-state">省</label>                <input type="text" id="address-state" name="address-state" autocomplete="address-state"                  enterkeyhint="next" v-model="myform.addressState"  placeholder="省"/>              </div>              <div>                <label class="login__forms__label" for="address-city">市</label>                <input type="text" id="address-city" name="address-city" autocomplete="address-city" required                  enterkeyhint="next" v-model="myform.addressCity"  placeholder="市"/>              </div>             </div>          </div>           <div> <input class="login__forms__button register" type="submit" value="注册"> <p align=center @click="doLogin">已有账号?</p>         </div>                 </form>              </div>    </section>  </main></template><script>import { useStore } from 'vuex'import { ref } from 'vue'export default {  setup() {    const obj = ref({status:false})    const loginForm = ref({})    const myform = ref({})    const store = useStore()    const login = ()=>{      store.dispatch('login', loginForm.value)    }    const register = ()=>{      store.dispatch('register', myform.value)    }    const doRegister = () => {        obj.value.status = true;    }    const doLogin = () => {        obj.value.status = false;    }    return {      obj, doLogin, doRegister, loginForm, myform, login, register    }  }}</script><style lang="scss">@import '@/scss/login';  .login{    padding: 60px 200px;    font-family: Montserrat;        &__forms{      display: flex;      flex-direction: row;      justify-content: space-evenly;      color: $text-color;       .login__forms__button{            width: fit-content !important;              margin: 30px auto;              border:none;          }           &__register{        width: 50%;        h2{          margin-bottom: 20px;        }        &__form{          input{            display: flex;            flex-direction: row;            margin-bottom: 10px;            width: 100%;            padding: 10px;             border-radius:5px;            border:solid 1px #cdcdcd;          }          .login__forms__button{            &.register{              width: fit-content !important;              margin: 30px auto;              border:none;            }          }            &__address{            width: 100%;              &__3-inputs{              display: flex;              flex-direction: row;              justify-content: space-between;              gap: 5px;                input{                width: 100%;              }            }          }        }      }      &__button{        font-family: Montserrat;        font-weight: 700;        font-size: 18px;        background-color: $primary-color;        color: $bg-color;                 border-radius: 8px;        text-align: center !important;        padding: 10px 20px !important;        margin-top: 20px;        &:hover{          background-color: $light-primary-color;          cursor: pointer;        }      }    }  }      @media(min-width: 681px) and (max-width: 996px){   .login{    padding: 20px;    &__forms{      flex-direction: row;      gap: 20px;      &__login{        &__form{          &__form{            width: 100%;          }        }      }      &__register{        &__form{          &__address{            &__3-inputs{              gap: 5px;            }          }        }      }    }   }         }  @media(max-width: 680px){   .login{    padding: 20px;    &__forms{      flex-direction: column;      &__login{        &__form{          &__form{            width: 100%;          }        }      }      &__register{        margin-top: 60px;        &__form{          &__address{            &__3-inputs{              gap: 5px;            }          }        }      }    }   }         }</style>