|
|
@@ -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>
|
