VUE 写的登录页面

最新推荐文章于 2024-08-07 19:54:58 发布

Vransy.

最新推荐文章于 2024-08-07 19:54:58 发布

阅读量200

点赞数 1

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/vransy/article/details/119530302

版权

VUE 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

请添加图片描述

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" xmlns:https="http://java.sun.com/JSP/Page"/>
<!doctype html>
<html>

<head>
  <title>Counter</title>
  <link rel="shortcut icon" href="favicon.png">
  <style>
    html {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    body {
      margin-top: 200px;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(to bottom right, #c165dd, #5c27f1);
      margin: 0;
    }

    .info-box{
      display: flex;
    }
    .form-signin {
      width: 1000px;
      margin-left: 100px;
      max-width: 600px;
      padding: 15px;
      margin: 0 auto;
      padding: 60px 80px;
    }

    .container {
      margin-top: 170px;
      height: 580px;
      padding-top: 50px;
      background-color: rgba(255,250,250,0.3);
      /*background-color: powderblue;*/
      width: auto;
    }

    .marginTop{
      margin-top: 5px;
    }

    .left-form{
      width: 800px;
      margin: 80px 90px;
    }

    /*横线*/
    .title-line{
      width: 980px;
      height: 28px;
      margin: 0 auto;
      border-bottom: 1px solid #ddd;
      margin-bottom: 28px;
      text-align: center;
    }
    /*竖线*/
    .line{
      border-right: 1px solid #ddd;
      height: 300px;
      margin-top: 28px;
    }


  </style>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <!--使用Bootstrap的js插件，必须先调入jQuery-->
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

</head>

<body>
  <div id="app" class="container">

    <div class="title-line">
    </div>

      <div class="info-box">
        <div class="left-form">
          <div>
            <li v-for="(log,i) in logArr" v-if="i<10">
              info : {{log}}
            </li>
          </div>
        </div>

        <div class="line"></div>

        <div class="right-form">
          <form class="form-signin">
            <input type="text" v-model="username" class="form-control marginTop" placeholder="用户" required autofocus>
            <input type="password" v-model="password" class="form-control marginTop" placeholder="密码" required>
            <input type="text" v-model="inputUrl" class="form-control marginTop" placeholder="站点URL" required>
            <input type="text" v-model="station" class="form-control marginTop" placeholder="站点编码" required>
            <button class="btn btn-success btn-lg btn-block marginTop" type="button" v-on:click="start">开始运行</button>
            <button class="btn btn-lg btn-primary btn-block marginTop"  type="button" v-on:click="stop">停止</button>
          </form>
        </div>
      </div>
    </div>

  </div>



  <script>

    var app = new Vue({
      el: '#app',
      data() {
        return {
          username: null,
          password: null,
          inputUrl:null,
          station: null,
          logArr: [],
          log: {},
          t1: null,
          logArrLength: 0,
          num:0
        }
      },
      // 在 `methods` 对象中定义方法
      methods: {
        stop: function () {
          window.clearInterval(this.t1);
          console.log(this.username, this.password, this.station);
        },
        start: function () {
          console.log("username-",this.username,"password-",this.password,"inputUrl-",this.inputUrl,"station-",this.station);
          this.t1 = window.setInterval(this.getMsg, 2000);
        },
        getMsg: function () {
          if(this.logArrLength<10){
            this.logArrLength +=1;
          }else{
            this.logArr.pop();
          }
          window.docheck();
          this.log = window.counterValue();
          window.counterValue().then(res => {
            this.log = res;
            this.logArr.unshift(this.log);
          });
        },
      }
    })

  </script>
</body>

</html>