Home Explore Help
Register Sign In
Algor
/
thridLargeScreen
5
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

f

hsy 4 weeks ago
parent
4b3643d404
commit
9edfe977b6
10 changed files with 702 additions and 95 deletions
Unified View Show Diff Stats
  1. 74 77
      index.html
  2. 1 1
      public/serverConfig.json
  3. 11 1
      src/router/modules/remaining.ts
  4. 14 14
      src/views/largeScreen/components/Center2.vue
  5. 2 2
      src/views/largeScreen/components/Header.vue
  6. BIN
      src/views/login/images/bg.png
  7. BIN
      src/views/login/images/password.png
  8. BIN
      src/views/login/images/user.png
  9. BIN
      src/views/login/images/video.mp4
  10. 600 0
      src/views/login/login.vue

+ 74 - 77
index.html
View File 

@@ -1,90 +1,87 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 <html lang="en">
 
+  <head>
 
+    <meta charset="UTF-8" />
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
+    <meta name="renderer" content="webkit" />
 
+    <meta
 
+      name="viewport"
 
+      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
 
+    />
 
+    <title>大屏</title>
 
+    <link rel="icon" href="/favicon.ico" />
 
+    <script>
 
+      window.process = {};
 
+    </script>
 
+  </head>
 
 
 
-<head>
 
-  <meta charset="UTF-8" />
 
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
-  <meta name="renderer" content="webkit" />
 
-  <meta name="viewport"
 
-    content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
 
-  <title>机构后台</title>
 
-  <link rel="icon" href="/favicon.ico" />
 
-  <script>
 
-    window.process = {};
 
-
 
-  </script>
 
-</head>
 
-
 
-<body>
 
-  <div id="app">
 
-    <style>
 
-      html,
 
-      body,
 
-      #app {
 
-        position: relative;
 
-        display: flex;
 
-        align-items: center;
 
-        justify-content: center;
 
-        width: 100%;
 
-        height: 100%;
 
-        overflow: hidden;
 
-      }
 
-
 
-      .loader,
 
-      .loader::before,
 
-      .loader::after {
 
-        width: 2.5em;
 
-        height: 2.5em;
 
-        border-radius: 50%;
 
-        animation: load-animation 1.8s infinite ease-in-out;
 
-        animation-fill-mode: both;
 
-      }
 
-
 
-      .loader {
 
-        position: relative;
 
-        top: 0;
 
-        margin: 80px auto;
 
-        font-size: 10px;
 
-        color: #406eeb;
 
-        text-indent: -9999em;
 
-        transform: translateZ(0);
 
-        transform: translate(-50%, 0);
 
-        animation-delay: -0.16s;
 
-      }
 
-
 
-      .loader::before,
 
-      .loader::after {
 
-        position: absolute;
 
-        top: 0;
 
-        content: "";
 
-      }
 
+  <body>
 
+    <div id="app">
 
+      <style>
 
+        html,
 
+        body,
 
+        #app {
 
+          position: relative;
 
+          display: flex;
 
+          align-items: center;
 
+          justify-content: center;
 
+          width: 100%;
 
+          height: 100%;
 
+          overflow: hidden;
 
+        }
 
 
 
-      .loader::before {
 
-        left: -3.5em;
 
-        animation-delay: -0.32s;
 
-      }
 
+        .loader,
 
+        .loader::before,
 
+        .loader::after {
 
+          width: 2.5em;
 
+          height: 2.5em;
 
+          border-radius: 50%;
 
+          animation: load-animation 1.8s infinite ease-in-out;
 
+          animation-fill-mode: both;
 
+        }
 
 
 
-      .loader::after {
 
-        left: 3.5em;
 
-      }
 
+        .loader {
 
+          position: relative;
 
+          top: 0;
 
+          margin: 80px auto;
 
+          font-size: 10px;
 
+          color: #406eeb;
 
+          text-indent: -9999em;
 
+          transform: translateZ(0);
 
+          transform: translate(-50%, 0);
 
+          animation-delay: -0.16s;
 
+        }
 
 
 
-      @keyframes load-animation {
 
+        .loader::before,
 
+        .loader::after {
 
+          position: absolute;
 
+          top: 0;
 
+          content: "";
 
+        }
 
 
 
-        0%,
 
-        80%,
 
-        100% {
 
-          box-shadow: 0 2.5em 0 -1.3em;
 
+        .loader::before {
 
+          left: -3.5em;
 
+          animation-delay: -0.32s;
 
         }
 
         }
 
 
 
-        40% {
 
-          box-shadow: 0 2.5em 0 0;
 
+        .loader::after {
 
+          left: 3.5em;
 
         }
 
         }
 
-      }
 
 
 
-    </style>
 
-    <div class="loader"></div>
 
-  </div>
 
-  <script type="module" src="/src/main.ts"></script>
 
-</body>
 
+        @keyframes load-animation {
 
+          0%,
 
+          80%,
 
+          100% {
 
+            box-shadow: 0 2.5em 0 -1.3em;
 
+          }
 
 
 
+          40% {
 
+            box-shadow: 0 2.5em 0 0;
 
+          }
 
+        }
 
+      </style>
 
+      <div class="loader"></div>
 
+    </div>
 
+    <script type="module" src="/src/main.ts"></script>
 
+  </body>
 
 </html>
 
 </html>

+ 1 - 1
public/serverConfig.json
View File 

@@ -1,6 +1,6 @@
 
 {
 
 {
 
   "Version": "4.5.0",
 
   "Version": "4.5.0",
 
-  "Title": "机构后台",
 
+  "Title": "大屏",
 
   "FixedHeader": true,
 
   "FixedHeader": true,
 
   "HiddenSideBar": false,
 
   "HiddenSideBar": false,
 
   "MultiTagsCache": false,
 
   "MultiTagsCache": false,

+ 11 - 1
src/router/modules/remaining.ts
View File 

@@ -1,10 +1,20 @@
 
 const Layout = () => import("@/layout/index.vue");
 
 const Layout = () => import("@/layout/index.vue");
 
 
 
 export default [
 
 export default [
 
+  // {
 
+  //   path: "/login",
 
+  //   name: "Login",
 
+  //   component: () => import("@/views/login/index.vue"),
 
+  //   meta: {
 
+  //     title: "登录",
 
+  //     showLink: false,
 
+  //     rank: 101
 
+  //   }
 
+  // },
 
   {
 
   {
 
     path: "/login",
 
     path: "/login",
 
     name: "Login",
 
     name: "Login",
 
-    component: () => import("@/views/login/index.vue"),
 
+    component: () => import("@/views/login/login.vue"),
 
     meta: {
 
     meta: {
 
       title: "登录",
 
       title: "登录",
 
       showLink: false,
 
       showLink: false,

+ 14 - 14
src/views/largeScreen/components/Center2.vue
View File 

@@ -1,6 +1,6 @@
 
 <template>
 
 <template>
 
   <div class="h-full">
 
   <div class="h-full">
 
-    <div class="h-full">
 
+    <div class="h-full flex flex-col">
 
       <div
 
       <div
 
         class="flex items-center p-3 cursor-pointer hover:bg-gray-50"
 
         class="flex items-center p-3 cursor-pointer hover:bg-gray-50"
 
         @click="openDialog"
 
         @click="openDialog"
 
@@ -15,11 +15,10 @@
 
           <ArrowRight class="w-4 h-4"></ArrowRight>
 
           <ArrowRight class="w-4 h-4"></ArrowRight>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
-      <div class="p-2">
 
-        <el-row :gutter="20">
 
-          <el-col :span="12">
 
-            <div>
 
-              <el-table :data="tableData" :show-header="false" border>
 
+      <div class="p-2 flex-1">
 
+        <div class="pt-4 flex items-center h-full">
 
+          <div class="w-1/2 ml-4">
 
+              <el-table :data="tableData" :show-header="false" border class="h-full">
 
                 <el-table-column prop="healthLevel" label="重点关爱人群">
 
                 <el-table-column prop="healthLevel" label="重点关爱人群">
 
                   <template #default="{ row }">
 
                   <template #default="{ row }">
 
                     <div style="height: 50px" class="flex items-center">
 
                     <div style="height: 50px" class="flex items-center">
 
@@ -31,17 +30,16 @@
 
                 <el-table-column prop="total" label="重点关爱人群">
 
                 <el-table-column prop="total" label="重点关爱人群">
 
                 </el-table-column>
 
                 </el-table-column>
 
               </el-table>
 
               </el-table>
 
-            </div>
 
-          </el-col>
 
-          <el-col :span="12">
 
+          </div>
 
+          <div class="w-1/2 ml-4">
 
             <div
 
             <div
 
-              style="height: 18vh; width: 100%"
 
+              style="height: 20vh; width: 100%"
 
               class="chart-container relative"
 
               class="chart-container relative"
 
             >
 
             >
 
               <ComponentChart ref="chartsRef"></ComponentChart>
 
               <ComponentChart ref="chartsRef"></ComponentChart>
 
             </div>
 
             </div>
 
-          </el-col>
 
-        </el-row>
 
+          </div>
 
+        </div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
 
 
@@ -148,10 +146,11 @@ const initChart = () => {
 
       formatter: "{a} <br/>{b}: {c} ({d}%)"
 
       formatter: "{a} <br/>{b}: {c} ({d}%)"
 
     },
 
     },
 
     grid: {
 
     grid: {
 
-      left: "2%"
 
+      left: "2%",
 
     },
 
     },
 
     legend: {
 
     legend: {
 
-      x: "left",
 
+      top: 'bottom',
 
+      left: "center",
 
       itemWidth: 14,
 
       itemWidth: 14,
 
       itemHeight: 14,
 
       itemHeight: 14,
 
       align: "left",
 
       align: "left",
 
@@ -166,6 +165,7 @@ const initChart = () => {
 
         name: "",
 
         name: "",
 
         type: "pie",
 
         type: "pie",
 
         radius: ["42%", "58%"],
 
         radius: ["42%", "58%"],
 
+        center: ['50%', '40%'],
 
         color: ["#F54A45", "#FF8800", "#34C724"],
 
         color: ["#F54A45", "#FF8800", "#34C724"],
 
         label: {
 
         label: {
 
           normal: {
 
           normal: {

+ 2 - 2
src/views/largeScreen/components/Header.vue
View File 

@@ -124,12 +124,12 @@ const onClickDrop = (key, item, selectRoute) => {
 
 .component-header {
 
 .component-header {
 
   .title {
 
   .title {
 
     font-weight: bold;
 
     font-weight: bold;
 
-    font-size: 30px;
 
+    font-size: 36px;
 
   }
 
   }
 
   color: #22549c !important;
 
   color: #22549c !important;
 
   // position: relative;
 
   // position: relative;
 
   width: 100%;
 
   width: 100%;
 
-  height: 60px;
 
+  height: 90px;
 
   display: flex;
 
   display: flex;
 
   background: #e0ecfa;
 
   background: #e0ecfa;
 
   background-image: url("./top-bg.png");
 
   background-image: url("./top-bg.png");

BIN
src/views/login/images/bg.png
View File


BIN
src/views/login/images/password.png
View File


BIN
src/views/login/images/user.png
View File


BIN
src/views/login/images/video.mp4
View File


+ 600 - 0
src/views/login/login.vue
View File 

@@ -0,0 +1,600 @@
 
+<template>
 
+  <div class="login-container">
 
+    <div class="loginav">
 
+      <div class="video">
 
+        <video src="./images/video.mp4" muted autoplay loop></video>
 
+      </div>
 
+      <div class=""></div>
 
+      <div class="loginbox boxall">
 
+        <div class="logo">
 
+          <h1>第三方数据大屏</h1>
 
+          <!-- <h2>da du kou da ping</h2> -->
 
+        </div>
 
+        <div class="logintit">用户登录</div>
 
+        <ul class="logininput">
 
+          <li class="">
 
+            <i><img src="./images/user.png" /></i>
 
+            <input
 
+              class="forminput"
 
+              type="text"
 
+              v-model="form.account"
 
+              placeholder="用户名"
 
+              maxlength="20"
 
+            />
 
+            <!-- <span class="suffix">@{{ suffix }}</span> -->
 
+          </li>
 
+          <li>
 
+            <i><img src="./images/password.png" /></i>
 
+            <input
 
+              class="forminput"
 
+              type="password"
 
+              v-model="form.password"
 
+              placeholder="密码"
 
+            />
 
+          </li>
 
+          <li>
 
+            <a
 
+              href="#"
 
+              @click="handleSubmit"
 
+              class="btn btnblock btn-lg btn-block btn-primary "
 
+              >登录</a
 
+            >
 
+          </li>
 
+        </ul>
 
+        <div class="boxfoot"></div>
 
+      </div>
 
+    </div>
 
+
 
+    <canvas
 
+      id="canvas"
 
+      style="
 
+        position: fixed;
 
+        width: 100%;
 
+        height: 100%;
 
+        left: 0;
 
+        top: 0;
 
+        opacity: 0.3;
 
+        pointer-events: none;
 
+      "
 
+    ></canvas>
 
+  </div>
 
+</template>
 
+<script>
 
+import { ElMessage as Message } from "element-plus";
 
+
 
+import { useRouter, useRoute } from "vue-router";
 
+
 
+import { initRouter, getTopMenu } from "@/router/utils";
 
+const router = useRouter();
 
+const route = useRoute();
 
+import { useUserStoreHook } from "@/store/modules/user";
 
+
 
+export default {
 
+  data() {
 
+    return {
 
+      form: {
 
+        account: "",
 
+        password: ""
 
+      }
 
+    };
 
+  },
 
+  computed: {
 
+    suffix() {
 
+      return this.$route.query.channel;
 
+    }
 
+  },
 
+  mounted() {
 
+    this.init();
 
+    document.onkeydown = e => {
 
+      let ev = document.all ? window.event : e;
 
+      if (ev.keyCode === 13) {
 
+        this.handleSubmit();
 
+      }
 
+    };
 
+  },
 
+  methods: {
 
+    handleSubmit() {
 
+      console.log(this.form);
 
+      if (!this.form.account) {
 
+        return Message.error("请输入用户名");
 
+      }
 
+      if (!this.form.password) {
 
+        return Message.error("请输入密码");
 
+      }
 
+      // this.$axios
 
+      //   .post("/mcapi/mechanism/login", {
 
+      //     account: `${this.form.account}@${this.suffix}`,
 
+      //     password: this.form.password,
 
+      //   })
 
+      //   .then((resp) => {
 
+      //     console.log("数据", resp.data);
 
+
 
+      //     const { token, expireIn } = resp.data;
 
+      //     const cookieString = JSON.stringify({ token, expireIn });
 
+      //     Cookies.set(TokenKey, cookieString);
 
+      //     this.$store.dispatch("login/getLargeConfig").then((resp) => {});
 
+      //     setTimeout(() => {
 
+      //       this.$router.replace("/index");
 
+      //     }, 500);
 
+      //     this.$store.dispatch("login/getProfile").then((resp) => {});
 
+      //   });
 
+      useUserStoreHook()
 
+        .loginByUsername({
 
+          account: this.form.account,
 
+          password: this.form.password
 
+        })
 
+        .then(
 
+          ({ data }) => {
 
+            console.log(data);
 
+            // 获取后端路由
 
+            initRouter().then(() => {
 
+              // console.log(router.options.routes)
 
+              setTimeout(() => {
 
+                router.push({
 
+                  name: "largeScreenIndex"
 
+                });
 
+                Message.success("登录成功");
 
+                loading.value = false;
 
+              }, 2e2);
 
+            });
 
+          },
 
+          () => {
 
+            loading.value = false;
 
+          }
 
+        );
 
+    },
 
+    init() {
 
+      var canvas = document.querySelector("canvas");
 
+      var ctx = canvas.getContext("2d");
 
+      var w = window.innerWidth; //获取屏幕宽高
 
+      var h = (window.innerHeight * 2) / 2;
 
+      canvas.width = w; //将屏幕宽高赋值给canvas
 
+      canvas.height = h;
 
+      // canvas.style.cssText += `;width:${w}px;height:${h}px;`;
 
+      var dots = [];
 
+      var minScale = 1; //设置圆点的最小缩放
 
+      var maxScale = 3; //设置圆点的最大缩放
 
+      var bei = 1;
 
+      for (var i = 0; i < 300; i += 1) {
 
+        //设置白圆点的个数
 
+        dots.push(new Dot());
 
+      }
 
+
 
+      const render = () => {
 
+        ctx.clearRect(0, 0, w, h);
 
+        ctx.fillStyle = "rgba(26,94,199,.6)";
 
+        ctx.fillRect(0, 0, w, h); //描绘底层蓝色背景
 
+        for (var i = 0; i < dots.length; i += 1) {
 
+          var dot = dots[i];
 
+          dot.update();
 
+          dot.paint();
 
+        }
 
+        requestAnimationFrame(render);
 
+      };
 
+      //   render();
 
+      function Dot() {
 
+        this.radius = Math.floor(Math.random() * 3 + 2); //在选一个随机数为圆点半径
 
+        this.d = Math.random() * 2 * Math.PI; //在0-2π之间随机一个弧度值
 
+        this.rx = Math.random() * w * (Math.random() > 0.6 ? 2 / 3 : 1 / 4); // 选一个随机数，作为椭圆长轴顶点a的数值,也就是椭圆中心的x轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。
 
+        this.ry = Math.random() * h - h / 2; //选一个随机数作为椭圆短轴顶点b的数值，也就是椭圆中心的y轴坐标，此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。这两个值可以根据自已需求来定。
 
+        this.x = Math.cos(this.d) * this.rx + w / 2;
 
+        this.y = Math.sin(this.d) * this.ry + h / 2; //根据椭圆x,y求值公式，x=a*cosα，y=a*sinα.求出圆点在椭圆上的x,y轴坐标.后面加w/2,h/2只是为了居中显示。此处的x,y是相对于canvas建立的直角坐标系的，按canvas约定，其中心点（0,0）点在左上角
 
+        this.z =
 
+          Math.pow(Math.pow(this.rx, 2) + Math.pow(this.ry, 2), 0.5) /
 
+          Math.pow(Math.pow(w / 2, 2) + Math.pow(h / 2, 2), 0.5); //求白色圆点离椭圆中心点的距离，可视为一个点到圆心的距离，用x平方+y平方=c平方求得。此处的x,y,是相对于椭圆圆心为中心点建立的直角坐标系。此处Z值只是一个比值
 
+        this.scale =
 
+          ((Math.cos(this.d) + 1) * (maxScale - minScale)) / 2 + minScale; //圆点的缩放大小,根据余弦函数公式y=cosα.标准的余弦函数最大值和最小值分别为1，-1.这里要自行设置最大值和最小值，所以要进行改写
 
+        // this.speed = Math.random() * 0.0005 + 0.0005;
 
+        this.speed = Math.random() * 0.0004 + 0.0004; //圆点运动的速度
 
+        this.alpha = (this.scale / maxScale) * 0.3 + 0.1; //圆点运动的透明度
 
+        this.count = 0;
 
+        this.paint = () => {
 
+          ctx.fillStyle = "rgba(0,130,255," + this.alpha + ")";
 
+          ctx.beginPath();
 
+          ctx.arc(
 
+            this.x,
 
+            this.y,
 
+            this.radius * this.scale * this.z,
 
+            0,
 
+            Math.PI * 2
 
+          );
 
+          ctx.fill();
 
+        };
 
+        this.update = () => {
 
+          this.count += 0.01;
 
+          if (
 
+            Math.floor(this.count) % 12 === 0 &&
 
+            Math.floor(this.count) != 0
 
+          ) {
 
+            this.d += 0.008;
 
+            if (this.count > Math.floor(this.count) + 0.5) {
 
+              this.d -= 0.008;
 
+            }
 
+            console.log(this.count);
 
+          }
 
+
 
+          this.x = Math.sin(this.d) * this.rx + w / 2;
 
+          this.y = Math.cos(this.d) * this.ry + h / 2;
 
+          this.d -= this.speed; //通过改变它的弧度值来改变圆点在椭圆中运动
 
+          this.scale =
 
+            ((Math.cos(this.d) + 1) * (maxScale - minScale)) / 2 + minScale;
 
+          this.alpha = (this.scale / maxScale) * 0.3 + 0.1;
 
+        };
 
+      }
 
+    }
 
+  }
 
+};
 
+</script>
 
+<style lang="scss">
 
+* {
 
+  padding: 0;
 
+  margin: 0;
 
+  box-sizing: border-box;
 
+  user-select: none;
 
+}
 
+li {
 
+  list-style-type: none;
 
+}
 
+::v-deep {
 
+  .el-input__prefix,
 
+  .el-input__suffix {
 
+    display: flex !important;
 
+    align-items: center !important;
 
+    justify-content: center !important;
 
+    // padding-right: 80px;
 
+  }
 
+}
 
+a {
 
+  text-decoration: none;
 
+  color: #fff;
 
+}
 
+html,
 
+body {
 
+  background: #000;
 
+  height: 100%;
 
+}
 
+.login-container {
 
+  background: #000;
 
+  // max-width: 1920px;
 
+  width: 100%;
 
+  margin: 0 auto;
 
+  height: 100%;
 
+  position: relative;
 
+  font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC",
 
+    "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑",
 
+    STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
 
+}
 
+.login-container::before {
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100%;
 
+  background: url(./images/bg.png) no-repeat left center;
 
+  background-size: cover;
 
+  content: "";
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 100;
 
+  pointer-events: none;
 
+}
 
+.loginbg {
 
+  background-image: linear-gradient(300deg, #004491, #1e88e5);
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 50%;
 
+  left: 0;
 
+  top: 0;
 
+  z-index: 0;
 
+}
 
+.loginav {
 
+  max-width: 1300px;
 
+  width: 100%;
 
+  height: 100%;
 
+  margin: 0 auto;
 
+  z-index: 10;
 
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
 
+  display: flex;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+}
 
+.video {
 
+  position: absolute;
 
+  width: 1200px;
 
+  left: 0px;
 
+  padding-bottom: 40px;
 
+  pointer-events: none;
 
+}
 
+.video video {
 
+  width: 100%;
 
+}
 
+.video::before {
 
+  position: absolute;
 
+  content: "";
 
+  width: 200px;
 
+  height: 100%;
 
+  background: #000;
 
+  right: 0;
 
+  top: 0;
 
+}
 
+.logotit {
 
+  text-align: center;
 
+  padding: 40px 0;
 
+  font-size: 30px;
 
+}
 
+.loginbox {
 
+  padding: 30px 0 50px 0;
 
+  width: 600px;
 
+  padding: 30px 50px;
 
+  flex-shrink: 0;
 
+  position: relative;
 
+  z-index: 100;
 
+}
 
+
 
+.logininput .forminput {
 
+  border: 2px solid rgba(32, 163, 245, 0.4);
 
+  font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC",
 
+    "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑",
 
+    STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
 
+  display: block;
 
+  border-radius: 2px;
 
+  padding-left: 50px;
 
+  font-size: 18px;
 
+  color: #fff;
 
+  width: 100%;
 
+  line-height: 48px;
 
+  outline: 0;
 
+  text-indent: 1px;
 
+  background: rgba(32, 163, 245, 0.1);
 
+}
 
+
 
+input::input-placeholder {
 
+  color: #fff;
 
+}
 
+::-webkit-input-placeholder {
 
+  color: #fff;
 
+}
 
+
 
+.flex1 {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  align-items: center;
 
+}
 
+.flex1 label {
 
+  color: #fff;
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.logininput > li {
 
+  display: block;
 
+  padding: 15px 0;
 
+  position: relative;
 
+}
 
+.logininput li > i {
 
+  position: absolute;
 
+  height: 100%;
 
+  left: 15px;
 
+  top: 0;
 
+  display: flex;
 
+  align-items: center;
 
+}
 
+.suffix {
 
+  position: absolute;
 
+  right: 10px;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  font-weight: bold;
 
+}
 
+.logintit {
 
+  color: #00bff4;
 
+  text-align: center;
 
+  position: relative;
 
+  padding: 25px 0;
 
+  font-size: 24px;
 
+}
 
+.btn-primary {
 
+  background: #20a3f5;
 
+  display: block;
 
+  text-align: center;
 
+  color: #fff;
 
+  line-height: 48px;
 
+  font-size: 24px;
 
+  border-radius: 2px
 
+}
 
+.btn-primary:hover {
 
+  background: #137bd6;
 
+  color: #fff;
 
+}
 
+.copyright {
 
+  position: fixed;
 
+  width: 100%;
 
+  left: 0;
 
+  bottom: 10px;
 
+  text-align: center;
 
+  color: #006b95;
 
+  font-size: 12px;
 
+}
 
+
 
+.logo {
 
+  position: absolute;
 
+  top: -120px;
 
+  width: 100%;
 
+  left: 0;
 
+  text-align: center;
 
+  color: #fff;
 
+}
 
+.logo h1,
 
+.logo h2 {
 
+  background: linear-gradient(90deg, #009ef3, #00e9d0);
 
+  background-size: cover;
 
+  -webkit-background-clip: text;
 
+  background-clip: text;
 
+  -webkit-text-fill-color: transparent;
 
+  text-fill-color: transparent;
 
+}
 
+.logo h1 {
 
+  font-weight: bolder;
 
+  font-size: 48px;
 
+  font-family: "Microsoft YaHei", "HanHei SC";
 
+  letter-spacing: 2px;
 
+}
 
+.logo h2 {
 
+  font-size: 30px;
 
+  text-transform: uppercase;
 
+  font-weight: lighter;
 
+  letter-spacing: 2px;
 
+}
 
+
 
+.boxall {
 
+  border: 2px solid #186baf;
 
+  background: rgba(32, 163, 245, 0.1);
 
+  position: relative;
 
+  transform: scale(0.7);
 
+  opacity: 0;
 
+  animation: shows 1s forwards;
 
+}
 
+@keyframes shows {
 
+  to {
 
+    transform: scale(1);
 
+    opacity: 1;
 
+  }
 
+}
 
+.boxall:before,
 
+.boxall:after {
 
+  position: absolute;
 
+  width: 30px;
 
+  height: 30px;
 
+  content: "";
 
+  border-top: 3px solid #20a3f5;
 
+  top: -2px;
 
+}
 
+.boxall:before,
 
+.boxfoot:before {
 
+  border-left: 3px solid #20a3f5;
 
+  left: -2px;
 
+}
 
+.boxall:after,
 
+.boxfoot:after {
 
+  border-right: 3px solid #20a3f5;
 
+  right: -2px;
 
+}
 
+
 
+.boxfoot {
 
+  position: absolute;
 
+  bottom: 0;
 
+  width: 100%;
 
+  left: 0;
 
+}
 
+.boxfoot:before,
 
+.boxfoot:after {
 
+  position: absolute;
 
+  width: 30px;
 
+  height: 30px;
 
+  content: "";
 
+  border-bottom: 3px solid #20a3f5;
 
+  bottom: -2px;
 
+}
 
+
 
+.aui-checkbox,
 
+input[type="radio"] {
 
+  width: 24px;
 
+  height: 24px;
 
+  background: rgba(32, 163, 245, 0.1);
 
+  border: solid 2px rgba(32, 163, 245, 0.5);
 
+  margin: 0;
 
+  padding: 0;
 
+  position: relative;
 
+  cursor: default;
 
+  -webkit-appearance: none;
 
+  -webkit-user-select: none;
 
+  user-select: none;
 
+  -webkit-transition: background-color ease 0.1s;
 
+  transition: background-color ease 0.1s;
 
+  flex-shrink: 0;
 
+  border-radius: 0;
 
+}
 
+.aui-checkbox,
 
+input[type="radio"] {
 
+  margin: 0 3px 0 0 !important;
 
+  position: relative;
 
+}
 
+.aui-checkbox:checked,
 
+input[type="radio"]:checked {
 
+  text-align: center;
 
+  background-clip: padding-box;
 
+}
 
+.aui-checkbox:checked:after,
 
+.aui-checkbox:checked:before,
 
+input[type="radio"]:checked:after,
 
+input[type="radio"]:checked:before {
 
+  content: "";
 
+  width: 10px;
 
+  height: 5px;
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  margin-left: -6px;
 
+  margin-top: -5px;
 
+  background: 0 0;
 
+  border: 2px solid #439aff;
 
+  border-top: none;
 
+  border-right: none;
 
+  z-index: 2;
 
+  -webkit-border-radius: 0;
 
+  border-radius: 0;
 
+  -webkit-transform: rotate(-45deg);
 
+  transform: rotate(-45deg);
 
+}
 
+.aui-checkbox:disabled,
 
+input[type="radio"]:disabled {
 
+  background-color: #f5f5f5;
 
+  border: solid 1px #ddd;
 
+}
 
+.aui-checkbox:disabled:after,
 
+.aui-checkbox:disabled:before,
 
+input[type="radio"]:disabled:after,
 
+input[type="radio"]:disabled:before {
 
+  content: "";
 
+  width: 0.5rem;
 
+  height: 0.3rem;
 
+  position: absolute;
 
+  top: 50%;
 
+  left: 50%;
 
+  margin-left: -0.25rem;
 
+  margin-top: -0.4rem;
 
+  background: 0 0;
 
+  border: 1px solid #fff;
 
+  border-top: none;
 
+  border-right: none;
 
+  z-index: 2;
 
+  -webkit-border-radius: 0;
 
+  border-radius: 0;
 
+  -webkit-transform: rotate(-45deg);
 
+  transform: rotate(-45deg);
 
+}
 
+input[type="radio"] {
 
+  border-radius: 20px;
 
+}
 
+input {
 
+  outline: none !important;
 
+}
 
+
 
+@media (max-width: 1200px) {
 
+  .loginav {
 
+    justify-content: center;
 
+  }
 
+  .video {
 
+    display: none;
 
+  }
 
+  .loginbox {
 
+    // width: 96%;
 
+  }
 
+  .logo h1 {
 
+    font-size: 30px;
 
+  }
 
+  .logo h2 {
 
+    font-size: 20px;
 
+  }
 
+  .loginbox {
 
+    padding: 30px;
 
+  }
 
+}
 
+</style>