frame/layout/register/login.vue

<template>
  <div id="login">
    <el-row>
      <el-col :span="24" class="style" :style="'background: url(' + loginBei + ')no-repeat center center;'">
        <el-col :span="24" class="login">
          <el-tabs v-model="activeName" type="border-card" :stretch="true">
            <el-tab-pane label="账号登录" name="first">
              <data-form :data="{}" :fields="fields" :rules="rules" @save="handleSave" :isNew="true" label-width="80px" :styles="{}"> </data-form>
            </el-tab-pane>
            <el-tab-pane label="扫码登录" name="second">
              扫码登录
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
import dataForm from '@frame/components/form';
import _ from 'lodash';
const { mapActions } = createNamespacedHelpers('login');
export default {
  name: 'login',
  props: {},
  components: { dataForm },
  data: () => ({
    loginBei: require('../../assets/bg.jpg'),
    activeName: 'first',
    fields: [
      { label: '手机号', required: true, model: 'mobile', options: { maxLength: 11, minLength: 11 } },
      { label: '密码', required: true, model: 'passwd', type: 'password' },
    ],
    rules: {
      name: [{ required: true, message: '请输入用户名' }],
      passwd: [{ required: true, message: '请输入密码' }],
    },
    form: {},
  }),
  created() {},
  computed: {},
  methods: {
    ...mapActions(['login']),
    async handleSave({ data }) {
      let res = await this.login({ user: data, router: this.$router });
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  height: 100vh;
  background: #5dac81;
  background-size: cover;
  text-align: center;
}
.login {
  width: 400px;
  height: 300px;
  border: 1px solid #3f7dff;
  position: absolute;
  top: 20%;
  left: 35%;
  border-radius: 10px;
  background-color: #fff;
}
.el-form {
  padding: 0 15px;
  margin: 30px 0 0 0;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 70px;
}
/deep/.el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 70px;
}
/deep/.el-tabs__item {
  padding: 0 70px;
}
/deep/.el-tabs__active-bar {
  width: 200px !important;
  left: -70px;
}
</style>