liuxiaolong
2019-05-06 acc45d2ece02563964d7b8a22ff0c40bd8358889
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<template>
  <div class="authentication-wrapper authentication-3">
    <div class="authentication-inner">
 
      <!-- Side container -->
      <!-- Do not display the container on extra small, small and medium screens -->
      <div class="d-none d-lg-flex col-lg-8 align-items-center ui-bg-cover ui-bg-overlay-container p-5" style="background-image: url('/static/img/bg/21.jpg');">
        <div class="ui-bg-overlay bg-dark opacity-50"></div>
 
        <!-- Text -->
        <div class="w-100 text-white px-5">
          <h1 class="display-2 font-weight-bolder mb-4">校园综合管理平台管理平台</h1>
          <!-- <div class="text-large font-weight-light">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vehicula ex eu gravida faucibus. Suspendisse viverra pharetra purus. Proin fringilla ac lorem at sagittis. Proin tincidunt dui et nunc ultricies dignissim.
          </div> -->
        </div>
        <!-- /.Text -->
      </div>
      <!-- / Side container -->
 
      <!-- Form container -->
      <div class="d-flex col-lg-4 align-items-center bg-white p-5">
        <!-- Inner container -->
        <!-- Have to add `.d-flex` to control width via `.col-*` classes -->
        <div class="d-flex col-sm-7 col-md-5 col-lg-12 px-0 px-xl-4 mx-auto">
          <div class="w-100">
 
            <!-- Logo -->
            <div class="d-flex justify-content-center align-items-center">
              <div class="ui-w-60">
                <div class="w-100 position-relative" style="padding-bottom: 54%">
                  <svg class="w-100 h-100 position-absolute" viewBox="0 0 148 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="a" x1="46.49" x2="62.46" y1="53.39" y2="48.2" gradientUnits="userSpaceOnUse"><stop stop-opacity=".25" offset="0"></stop><stop stop-opacity=".1" offset=".3"></stop><stop stop-opacity="0" offset=".9"></stop></linearGradient><linearGradient id="e" x1="76.9" x2="92.64" y1="26.38" y2="31.49" xlink:href="#a"></linearGradient><linearGradient id="d" x1="107.12" x2="122.74" y1="53.41" y2="48.33" xlink:href="#a"></linearGradient></defs><path class="fill-primary" transform="translate(-.1)" d="M121.36,0,104.42,45.08,88.71,3.28A5.09,5.09,0,0,0,83.93,0H64.27A5.09,5.09,0,0,0,59.5,3.28L43.79,45.08,26.85,0H.1L29.43,76.74A5.09,5.09,0,0,0,34.19,80H53.39a5.09,5.09,0,0,0,4.77-3.26L74.1,35l16,41.74A5.09,5.09,0,0,0,94.82,80h18.95a5.09,5.09,0,0,0,4.76-3.24L148.1,0Z"></path><path transform="translate(-.1)" d="M52.19,22.73l-8.4,22.35L56.51,78.94a5,5,0,0,0,1.64-2.19l7.34-19.2Z" fill="url(#a)"></path><path transform="translate(-.1)" d="M95.73,22l-7-18.69a5,5,0,0,0-1.64-2.21L74.1,35l8.33,21.79Z" fill="url(#e)"></path><path transform="translate(-.1)" d="M112.73,23l-8.31,22.12,12.66,33.7a5,5,0,0,0,1.45-2l7.3-18.93Z" fill="url(#d)"></path></svg>
                </div>
              </div>
            </div>
            <!-- / Logo -->
 
            <h4 class="text-center text-lighter font-weight-normal mt-5 mb-0">Login to Your Account</h4>
 
            <!-- Form -->
            <form class="my-5" @submit.prevent="submitLogin">
              <b-form-group label="用户名">
                <b-input v-model="user.loginName" />
              </b-form-group>
              <b-form-group>
                <div slot="label" class="d-flex justify-content-between align-items-end">
                  <div>密码</div>
                  <a href="javascript:void(0)" class="d-block small">忘记密码?</a>
                </div>
                <b-input type="password" v-model="user.password" />
              </b-form-group>
 
              <div class="d-flex justify-content-between align-items-center m-0">
                <b-check v-model="user.rememberMe" class="m-0">记住我</b-check>
                <b-btn type="submit" variant="primary" >登录</b-btn>
              </div>
            </form>
            <!-- / Form -->
 
            <div class="text-center text-muted">
              Don't have an account yet? <a href="javascript:void(0)">Sign Up</a>
            </div>
 
          </div>
        </div>
      </div>
      <!-- / Form container -->
 
    </div>
  </div>
</template>
 
<!-- Page -->
<style src="@/vendor/styles/pages/authentication.scss" lang="scss"></style>
<script>
import { tologin } from '@/server/login.js'
export default {
  name: 'login-pgae',
  metaInfo: {
    title: '登录页'
  },
  data: () => ({
    user: {
      loginName: '',
      password: '',
      rememberMe: false
    }
  }),
  methods: {
    submitLogin () {
      // 登陆
      tologin(this.user)
    }
  }
}
</script>