storevisit-ui-mobile/src/views/home/login.vue

<template>
  <div class="logins">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="avsd">门点拜访登录</div>
    <br /><br />
    <br /><br />
    <van-field v-model="name" label="账号" placeholder="请输入账号" />
    <br /><br /><br /><br />
    <van-button type="info" size="small" plain class="Btn100" @click="login" style="margin: 0 auto"
      >登录</van-button
    >
  </div>
</template>
<script>
import store from '@/store';
export default {
  name: 'login',
  data() {
    return {
      name: '',
    };
  },
  methods: {
    login() {
      localStorage.clear();
      if (this.name.trim() != '') {
        store.commit('SET_USER_INFO', null);
        store.dispatch('setDeviceOutsidePage', true);
        // 当前设备：PC/mobile
        let isDevice = window.navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        );
        localStorage.setItem('isDevice', !isDevice ? 'PC' : 'mobile');
        localStorage.setItem('loginName', this.name);
        localStorage.removeItem('loginType');
        this.$router.push('/');
      } else {
        this.$toast('账号不能为空');
      }
    },
  },
};
</script>

<style scoped>
.logins {
  padding: 10px;
}
.Btn100 {
  margin: 0 auto 10px;
  display: block;
  width: 100%;
  border-radius: 5px;
  color: #fff !important;
  background-color: #0057ba;
  border: 1px solid #0057ba;
  height: 44px;
  font-size: 16px;
}
.avsd {
  margin: 0 auto;
  width: 112px;
  font-size: 18px;
  color: #0057ba;
  animation: jump 3s ease infinite;
}
@keyframes jump {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  /* 中间状态图片位移并且拉伸 */
  50% {
    transform: translateY(-20px) scale(0.97, 1.03);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}
</style>