diff --git a/package.json b/package.json
index 7aefc7c..eb538b6 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,8 @@
     "element-ui": "^2.8.2",
     "fastclick": "^1.0.6",
     "jsencrypt": "^3.3.2",
+    "simple-keyboard": "^3.7.26",
+    "simple-keyboard-layouts": "^3.3.34",
     "vant": "^2.11.2",
     "vue": "^2.5.2",
     "vue-i18n": "^8.26.1",
diff --git a/src/components/SimpleKeyboard.vue b/src/components/SimpleKeyboard.vue
new file mode 100644
index 0000000..a48bc84
--- /dev/null
+++ b/src/components/SimpleKeyboard.vue
@@ -0,0 +1,233 @@
+<template>
+    <div :class="keyboardClass"></div>
+  </template>
+
+<script>
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+import layout from 'simple-keyboard-layouts/build/layouts/chinese' // 中文输入法
+
+export default {
+  name: 'SimpleKeyboard',
+  props: {
+    keyboardClass: {
+      default: 'simple-keyboard',
+      type: String
+    },
+    input: {
+      default: ''
+    },
+    maxLength: { default: '' }
+  },
+  data: () => ({
+    keyboard: null,
+    displayDefault: {
+      '{bksp}': 'backspace',
+      '{lock}': 'Caps lock',
+      '{enter}': 'Enter',
+      '{tab}': 'Tab',
+      '{shift}': 'Shift',
+      '{change}': '中文<span class="font-s">/En</span>',
+      '{space}': ' ',
+      '{clear}': 'Clear',
+      '{close}': 'Close'
+    }
+  }),
+  mounted () {
+    this.keyboard = new Keyboard(this.keyboardClass, {
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      layoutCandidates: layout.layoutCandidates,
+      layout: {
+        // 默认布局
+        default: [
+          '` 1 2 3 4 5 6 7 8 9 0 - = {bksp}',
+          '{tab} q w e r t y u i o p [ ] \\',
+          "{lock} a s d f g h j k l ; ' {enter}",
+          '{shift} z x c v b n m , . / {clear}',
+          '{change} {space} {close}'
+        ], // shift布局
+        shift: [
+          '~ ! @ # $ % ^ & * ( ) _ + {bksp}',
+          '{tab} Q W E R T Y U I O P { } |',
+          '{lock} A S D F G H J K L : " {enter}',
+          '{shift} Z X C V B N M &lt; &gt; ? {clear}',
+          '{change} {space} {close}'
+        ]
+      },
+      // 按钮展示文字
+      display: this.displayDefault,
+      // 按钮样式
+      buttonTheme: [
+        {
+          class: 'hg-gray',
+          buttons: '{bksp}'
+        },
+        {
+          class: 'hg-gray',
+          buttons: '{tab}'
+        },
+        {
+          class: 'hg-gray',
+          buttons: '{lock}'
+        },
+        {
+          class: 'hg-gray',
+          buttons: '{enter}'
+        },
+        {
+          class: 'hg-gray',
+          buttons: '{shift}'
+        },
+        {
+          class: 'hg-gray',
+          buttons: '{clear}'
+        },
+        {
+          class: 'hg-blue',
+          buttons: '{close}'
+        },
+        {
+          class: 'hg-blue',
+          buttons: '{change}'
+        }
+      ],
+      // 输入限制长度
+      maxLength: this.maxLength
+    })
+  },
+  methods: {
+    onChange (input) {
+      this.$emit('onChange', input)
+    },
+    onKeyPress (button, $event) {
+      // 点击关闭
+      if (button === '{close}') {
+        // debugger
+        // this.$parent.closekeyboard()
+        let arr = document.querySelectorAll('.hg-theme-default')
+        arr.forEach((ele) => {
+          ele.style.visibility = 'hidden'
+        })
+        return false
+      } else if (button === '{change}') {
+        // 切换中英文输入法
+        if (this.keyboard.options.layoutCandidates !== null) {
+          this.$set(this.displayDefault, '{change}', 'En<span class="font-s">/中文</span>')
+          // 切换至英文
+          this.keyboard.setOptions({
+            layoutCandidates: null,
+            display: this.displayDefault
+          })
+        } else {
+          // 切换至中文
+          this.$set(this.displayDefault, '{change}', '中文<span class="font-s">/En</span>')
+          this.keyboard.setOptions({
+            layoutCandidates: layout.layoutCandidates,
+            display: this.displayDefault
+          })
+        }
+      } else if (button === '{clear}') {
+        this.keyboard.clearInput()
+      } else {
+        // let value = $event.target.offsetParent.parentElement.children[0].children[0].value
+        // // 输入框有默认值时，覆写
+        // if (value) {
+        //   this.keyboard.setInput(value)
+        // }
+        this.$emit('onKeyPress', button)
+      }
+      if (button === '{shift}' || button === '{lock}') this.handleShift()
+    },
+    // 切换shift/默认布局
+    handleShift () {
+      let currentLayout = this.keyboard.options.layoutName
+      let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+      this.keyboard.setOptions({
+        layoutName: shiftToggle
+      })
+    }
+  },
+  watch: {
+    input (input) {
+      this.keyboard.setInput(input)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@deep: ~'>>>';
+.hg-theme-default
+    visibility hidden
+    position fixed
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    width 100%
+    padding: 1em;
+    background-color: #eee;
+    box-shadow: 0 -3px 10px rgba(0,0,0,.3);
+    border-radius: 10px;
+    font-family: -apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Segoe UI,Arial,Roboto,'PingFang SC',miui,'Hiragino Sans GB','Microsoft Yahei',sans-serif;
+    overflow visible
+/deep/ .hg-rows
+    width: 100%;
+    margin: 0;
+    & .hg-row:not(:last-child)
+        margin-bottom: 0.5em;
+    & .hg-row
+        justify-content: space-around;
+    & .hg-row .hg-button:not(:last-child)
+        margin-right: 0.5em;
+    & .hg-button
+        flex: 40;
+        height: 2.2em;
+        line-height: 2.2em;
+        overflow: hidden;
+        vertical-align: middle;
+        border: 1px solid #ccc;
+        color: #333;
+        background-color: #fff;
+        box-shadow: 0 2px 2px rgba(0,0,0,.6);
+        border-radius: 0.35em;
+        font-size: 1.25em;
+        text-align: center;
+        white-space: nowrap;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: pointer;
+      & .hg-button-bksp
+          flex: 65 1 0%;
+          background-image: url("../images/backspace.svg");
+          background-position: center center;
+          background-repeat: no-repeat;
+          background-size: 35%;
+          color: #fff;
+          background-color: #7d7d7d;
+          border-color: #656565;
+          span
+            color transparent
+      & .hg-gray
+          color: #fff;
+          background-color: #7d7d7d;
+          border-color: #656565;
+      & .hg-blue
+          color: #fff;
+          background-color: #337ab7;
+          border-color: #2e6da4;
+      & .hg-button-tab
+          flex: 60 1 0%;
+      & .hg-button-lock, .hg-button-enter
+          flex: 80 1 0%;
+      & .hg-button-shift, .hg-button-clear
+          flex: 100 1 0%;
+      & .hg-button-space
+          flex: 180 1 0%;
+      & .font-s
+        font-size .75em
+        opacity 0.6
+</style>
diff --git a/src/components/keyboard-input.vue b/src/components/keyboard-input.vue
new file mode 100644
index 0000000..21700e2
--- /dev/null
+++ b/src/components/keyboard-input.vue
@@ -0,0 +1,125 @@
+<template>
+    <div class="input-keyboard">
+        <input
+        v-model="inputValue"
+        :autofocus="autofocus"
+        :class="inputClass"
+        :type="type"
+        :show-password="showPassword"
+        :disabled="disabled"
+        :maxlength="maxlength"
+        :placeholder="placeholder"
+        @focus="focusInput($event)"
+        @input="inputFun"
+        >
+        <SimpleKeyboard
+        :ref="keyboardClass"
+        :keyboardClass="keyboardClass"
+        @onChange="onChange"
+        @onKeyPress="onKeyPress"
+        :input="inputValue"
+        :maxLength="maxlength"
+        />
+    </div>
+</template>
+
+<script>
+import SimpleKeyboard from './SimpleKeyboard'
+export default {
+  name: 'keyboard-input',
+  components: {
+    SimpleKeyboard
+  },
+  props: {
+    keyboardClass: String,
+    autofocus: Boolean,
+    value: {
+      default: ''
+    },
+    inputClass: String,
+    type: {
+      type: String,
+      default: 'text'
+    },
+    showPassword: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    maxlength: Number,
+    placeholder: String
+  },
+  data () {
+    return {
+      input: null,
+      inputEle: null
+    }
+  },
+  computed: {
+    inputValue: {
+      get () {
+        return this.value
+      },
+      set (value) {
+        this.$emit('inputChange', value)
+      }
+    }
+  },
+  methods: {
+    inputChange () {
+      this.$emit('inputChange')
+    },
+    inputFun () {
+      this.$emit('input')
+    },
+    focusInput (e) {
+      this.inputEle = e.srcElement
+      // 关闭所有keyboard
+      let arr = document.querySelectorAll('.hg-theme-default')
+      arr.forEach((ele) => {
+        ele.style.visibility = 'hidden'
+      })
+      // 打开当前输入框的keyboard
+      let currentKeyborad = this.$refs[this.keyboardClass]
+      currentKeyborad.$el.style.visibility = 'visible'
+      this.$nextTick(() => {
+        this.$emit('focus')
+      })
+      setTimeout(() => {
+        this.$emit('focus')
+      }, 0)
+    },
+    onChange (input) {
+      this.inputValue = input
+      this.$nextTick(() => {
+        this.inputEle.focus()
+      })
+      setTimeout(() => {
+        this.inputEle.focus()
+      }, 0)
+    },
+    onKeyPress (button) {
+      console.log('onKeyPress', button)
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.input-keyboard
+    width 100%
+.login-input
+  width 100%
+  _font(30px, 78px, #fff,,)
+  background: rgba(45,88,184,0.1);
+  border: 1px solid #4980BD;
+  padding 0 22px
+  &:focus
+    background: rgba(45,88,184,0.25);
+    border: 2px solid #21D0F2;
+    line-height 76px
+</style>
diff --git a/src/images/backspace.svg b/src/images/backspace.svg
new file mode 100644
index 0000000..7be0754
--- /dev/null
+++ b/src/images/backspace.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h48v48h-48z" fill="none"/><path d="M44 6h-30c-1.38 0-2.47.7-3.19 1.76l-10.81 16.23 10.81 16.23c.72 1.06 1.81 1.78 3.19 1.78h30c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4zm-6 25.17l-2.83 2.83-7.17-7.17-7.17 7.17-2.83-2.83 7.17-7.17-7.17-7.17 2.83-2.83 7.17 7.17 7.17-7.17 2.83 2.83-7.17 7.17 7.17 7.17z" fill="white"/></svg>
\ No newline at end of file
diff --git a/src/pages/modules/login/login1.vue b/src/pages/modules/login/login1.vue
new file mode 100644
index 0000000..f9f28e3
--- /dev/null
+++ b/src/pages/modules/login/login1.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="login-container">
+    <div class="login-header">
+      <div class="login_logo"></div>
+    </div>
+    <div class="login-bottom"></div>
+    <div class="login-wraper">
+      <div class="navs-wraper">
+        <button class="nav_item" :class="{'nav_item_active': tab === 0}" @click="toLogin">密码登录</button>
+        <button class="nav_item" :class="{'nav_item_active': tab === 1}" @click="toSetup">配置</button>
+      </div>
+      <div v-show="tab === 0" class="login-content_wraper">
+        <div class="login-items-wraper">
+          <div class="login-item">
+            <div class="login-label" @click="toFocus(1)">用户名</div>
+            <div class="login_value">
+              <!-- <input type="text" class="login-input" ref="input1" v-model="username" data-refs="username" @focus="onInputFocus($event, 'username')"> -->
+              <keyboard-input
+              inputClass="login-input"
+              keyboardClass="username"
+              :value="username"
+              @inputChange="inputChange1"
+            ></keyboard-input>
+            </div>
+          </div>
+          <div class="login-item">
+            <div class="login-label" @click="toFocus(2)">密码</div>
+            <div class="login_value">
+              <!-- <input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal"> -->
+              <keyboard-input
+              inputClass="login-input"
+              keyboardClass="password"
+              type="password"
+              :value="password"
+              @inputChange="inputChange2"
+            ></keyboard-input>
+            </div>
+          </div>
+        </div>
+        <div class="login-buttons-wraper">
+          <button class="button_control" :disabled="disabled" @click="saveLogin"><p>登录</p></button>
+        </div>
+      </div>
+      <div v-show="tab === 1" class="login-content_wraper">
+        <div class="login-items-wraper">
+          <div class="login-item">
+            <div class="login-label login-label_1" @click="toFocus(3)">域名地址</div>
+            <div class="login_value login_value_1">
+              <input type="text" class="login-input" ref="input3" v-model.trim="baseUrl" @focus="show" data-layout="normal">
+            </div>
+          </div>
+          <div class="login-item">
+            <div class="login-label login-label_1" @click="toFocus(4)">刷新时间（秒）</div>
+            <div class="login_value login_value_1">
+              <input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
+            </div>
+          </div>
+        </div>
+        <div class="login-buttons-wraper">
+          <button class="button_control" @click="saveSetup"><p>配置</p></button>
+        </div>
+      </div>
+    </div>
+    <!-- <vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" /> -->
+  </div>
+</template>
+
+<script>
+import KeyboardInput from '@components/keyboard-input'
+import {authlogin} from '@config/getData2.js'
+import {encrypt} from '../../../main.js'
+export default {
+  components: {
+    KeyboardInput
+  },
+  data () {
+    return {
+      tab: 0,
+      username: '啊啊',
+      password: '',
+      baseUrl: this.$store.getters.baseUrl,
+      setTime: this.$store.getters.setTime / 1000,
+      disabled: false,
+      visible: false,
+      layout: 'compact',
+      input: '',
+      options: {
+        useKbEvents: false,
+        preventClickEvent: false
+      }
+    }
+  },
+  mounted () {
+    // 点对点项目分辨率 1024 * 768
+    // alert(document.body.clientWidth, 'a')
+    // alert(document.body.clientHeight, 'b')
+    // alert(window.screen.width, 'c')
+    // alert(window.screen.height, 'd')
+  },
+  methods: {
+    toFocus (i) {
+      switch (i) {
+        case 1:
+          this.$refs.input1.focus()
+          break
+        case 2:
+          this.$refs.input2.focus()
+          break
+        case 3:
+          this.$refs.input3.focus()
+          break
+        case 4:
+          this.$refs.input4.focus()
+          break
+      }
+    },
+    toSetup () {
+      this.tab = 1
+      this.hide()
+    },
+    toLogin () {
+      this.tab = 0
+      this.hide()
+    },
+    saveSetup () {
+      let obj = {
+        baseUrl: this.baseUrl,
+        setTime: this.setTime * 1000
+      }
+      this.$store.dispatch('setConfig', obj)
+      this.toLogin()
+    },
+    saveLogin () {
+      this.disabled = true
+      if (!this.username) {
+        this.toast('请输入用户名')
+        this.disabled = false
+        return
+      }
+      if (!this.password) {
+        this.toast('请输入密码')
+        this.disabled = false
+        return
+      }
+      this._authlogin()
+    },
+    async _authlogin () {
+      try {
+        let res = await authlogin(this.username, encrypt(this.password))
+        let obj = {}
+        obj = Object.assign({}, res)
+        this.$store.dispatch('userInfo', JSON.stringify(obj))
+        this.hide()
+        this.$router.push('/index/home')
+      } catch (err) {
+        this.disabled = false
+        this.toast(err)
+      }
+    },
+    show (e) {
+      this.input = e.target
+      this.layout = e.target.dataset.layout
+      if (!this.visible) {
+        this.visible = true
+      }
+    },
+    hide () {
+      this.visible = false
+    },
+    accept () {
+      this.hide()
+    },
+    next () {
+      let inputs = document.querySelectorAll('input')
+      let found = false;
+      [].forEach.call(inputs, (item, i) => {
+        if (!found && item === this.input && i < inputs.length - 1) {
+          found = true
+          this.$nextTick(() => {
+            inputs[i + 1].focus()
+          })
+        }
+      })
+      if (!found) {
+        this.input.blur()
+        this.hide()
+      }
+    },
+    inputChange1 (val) {
+      this.username = val
+    },
+    inputChange2 (val) {
+      this.password = val
+    }
+  }
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~@style/mixin'
+.login-container
+  position relative
+  _wh(100%, 100%)
+  background center / 100% 100% url(../../../images/new/login_bg.png) no-repeat
+  _fj(center)
+.login-header
+  position absolute
+  top 0
+  _wh(100%, 181px)
+  background center / 1682px 100% url(../../../images/new/login_header_bg.png) no-repeat
+.login_logo
+  _wh(100%, 100%)
+  background center / 532px 127px url(../../../images/new/logo.png) no-repeat
+.login-bottom
+  position absolute
+  bottom 0
+  _wh(100%, 175px)
+  background center / 900px 100% url(../../../images/new/login_dy.png) no-repeat
+.login-wraper
+  _wh(900px, 702px)
+  padding 87px 85px 50px 70px
+  background center / 100% url(../../../images/new/login_w_bg.png) no-repeat
+.login-content_wraper
+  width 100%
+  padding 51px 45px 51px
+  margin 0 auto
+  _fj(center,,column)
+.navs-wraper
+  _wh(100%, 107px)
+  _fj(flex-start)
+  background center / 100% url(../../../images/new/login_nav_bg.png) no-repeat
+  padding 1px 0 35px 28px
+.nav_item
+  _wh(270px, 73px)
+  padding 10px 0 0 52px
+  _font(40px, 40px, #99B1DD,,)
+  font-family: YouSheBiaoTiHei;
+  background none
+  &:first-child
+    background center / 100% url(../../../images/new/login_tab.png) no-repeat
+.nav_item_active
+  color #fff
+.login-items-wraper
+  width 100%
+.login-item
+  _fj()
+  width 100%
+  margin-bottom 40px
+.login-label
+  width 115px
+  _font(30px, 80px, #AFBED8,,right)
+.login-label_1
+  width 215px
+.login_value
+  width calc(100% - 140px)
+.login_value_1
+  width calc(100% - 240px)
+.login-input
+  width 100%
+  _font(30px, 78px, #fff,,)
+  background: rgba(45,88,184,0.1);
+  border: 1px solid #4980BD;
+  padding 0 22px
+  &:focus
+    background: rgba(45,88,184,0.25);
+    border: 2px solid #21D0F2;
+    line-height 76px
+.login-buttons-wraper
+  width 100%
+  margin-top 12px
+  padding-left 180px
+.button-login
+  width 100%
+  border-radius 20px
+  letter-spacing 5px
+.footer_wraper
+  position absolute
+  width 70%
+  bottom 20px
+  left 50%
+  transform translateX(-50%)
+.footer_p1
+  _font(14px, 24px, #fff,,center)
+.footer_p2
+  _font(15px, 24px, #fff,,center)
+#keyboard
+    position fixed
+    left 0
+    right 0
+    bottom 0
+    z-index 1000
+    width 100%
+    // max-width 1366px
+    margin 0 auto
+    padding 1em
+    background-color #EEE
+    box-shadow 0px -3px 10px rgba(black, 0.3)
+    border-radius 10px
+</style>
diff --git a/yarn.lock b/yarn.lock
index 5a62f91..07af5b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7919,6 +7919,16 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
+simple-keyboard-layouts@^3.3.34:
+  version "3.3.34"
+  resolved "https://registry.yarnpkg.com/simple-keyboard-layouts/-/simple-keyboard-layouts-3.3.34.tgz#7fc1a4e0e5e38728cec1f566838923d627ef26be"
+  integrity sha512-27fqfjwCPbbg2fU4hgvnJdff0T5zcxZxHe89P4b1w3en/Restb7r98ixcYiIMuv+ku7ubO+yWASFu2cRpItm9w==
+
+simple-keyboard@^3.7.26:
+  version "3.7.26"
+  resolved "https://registry.yarnpkg.com/simple-keyboard/-/simple-keyboard-3.7.26.tgz#044564072e6e444f4d12a14cbcaa894bb680406d"
+  integrity sha512-SAJMmhAqJAuliBQd6jz7SfAMh0U0alabIEEaiBB/hPJaJ8/6JgdiOSUQqKugWzkK48gQA8KtiI0toYHG9g+HzA==
+
 slash@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/slash/-/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55"