screen-huahong/src/pages/Setup.vue

<template>
  <div class="login-container">
    <vue-particles
      color="#fff"
      :particleOpacity="0.7"
      :particlesNumber="60"
      shapeType="circle"
      :particleSize="4"
      linesColor="#fff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="2"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
      class="lizi"
    >
    </vue-particles>
    <div class="body-container">
      <div class="login_wrap">
        <div class="login_cnt">
          <div class="title-name">系统配置</div>
          <div class="login_card">
            <div class="card_wrap">
              <div class="inputOuter">
                <label>域名地址</label>
                <input type="text" class="inputStyle" v-model="baseUrl">
              </div>
              <div class="inputOuter">
                <label>刷新时间（秒）</label>
                <input type="number" class="inputStyle" v-model="setTime">
              </div>
              <div class="inputOuter">
                <label>设备看板</label>
                <!-- <select name="equipment" v-model="equipId">
                  <option :value="e.id" v-for="e in equipment" :key="e.id">{{e.name}}</option>
                </select> -->
                <div class="select-wraper">
                  <selectOpt :option="option" :index="index" @change="change"></SelectOpt>
                </div>
              </div>
            </div>
            <button class="btn" @click="_config">配置</button>
            <!-- <button class="btn" @click="getCc">获取尺寸</button> -->
            <!-- <div class="submit"><input type="submit" value="配  置" class="btn" @click="_config"></div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SelectOpt from '@components/select.vue'
export default {
  components: {
    SelectOpt
  },
  data () {
    return {
      loginname: '',
      password: '',
      option: [{index: '1', label: '新-左'}, {index: '2', label: '新-右'}],
      index: this.$store.getters.equipId,
      baseUrl: this.$store.getters.baseUrl,
      setTime: this.$store.getters.setTime / 1000,
      fullscreen: false
    }
  },
  methods: {
    getCc () {
      const screenWidth = window.screen.width
      const screenHeight = window.screen.height
      alert('宽：' + screenWidth + ';' + '高：' + screenHeight + ';')
    },
    change (e) {
      this.index = e
    },
    _config () {
      if (this.setTime > 10800) {
        this.$message({
          message: '刷新时间设置过长',
          type: 'warning'
        })
        return
      }
      let obj = {
        baseUrl: this.baseUrl,
        setTime: this.setTime * 1000,
        equipId: this.index
      }
      this.$store.dispatch('setConfig', obj)
      if (this.index === '1') {
        this.$router.push('/lindex')
      } else if (this.index === '2') {
        this.$router.push('/rindex')
      }
      let element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
      }
      this.fullscreen = !this.fullscreen
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@style/mixin'
.login-container
  position relative
  _wh(100%, 100%)
  z-index 1
  background center / 100% url('../images/bg-login.jpg') no-repeat
.lizi
  position absolute
  top 0
  left 0
  z-index 2
  _wh(100%, 100%)
.body-container
  position relative
  z-index 3
  _wh(100%, 100%)
  _fj(row, center)
  margin 0 auto
.login_wrap
  width 500px
  background-color rgba(255, 255, 255, 0.8)
  border-radius 5px
.login_tab
  position relative
  height 50px
  font-size 0
  background-color rgba(255, 255, 255, 0.9)
  border-radius 5px 5px 0 0
.login_tab_item
  float left
  width 50%
  font-size 16px
  line-height 50px
  color #333333
  text-align center
  cursor pointer
.login_tab_line
  position absolute
  width 50%
  height 2px
  background-color #2778f3
  left 0
  bottom 0
.login_cnt
  width 100%
  padding 15px
.title-name
  _font(16px, 28px, #000,,center)
  margin-bottom 10px
.login_card
  width 100%
.inputOuter
  _fj(row)
  height 38px
  line-height 38px
  width 100%
  margin-bottom 12px
.inputStyle, .select-wraper
  _wh(calc(100% - 116px), 38px)
  font-size 15px
  background none
  line-height 38px
  color #999999
  text-indent 10px
  border none
  box-sizing border-box
  background-color #ffffff
.submit
  width 100%
  background-color #2778f3
  border-radius 3px
  margin-top 5px
.btn
  background-color #2778f3
  border-radius 3px
  margin-top 5px
  height 40px
  font-size 18px
  color #fff
  line-height 39px
  width 100%
  outline none
  border none
  font-weight normal
label
  width 115px
  font-size 15px
  line-height 38px
  color #333333
</style>