|
@@ -0,0 +1,630 @@
|
|
|
+<template>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import LangSelect from "@/components/LangSelect";
|
|
|
+ import db from "@/utils/localstorage";
|
|
|
+ import {randomNum} from "@/utils";
|
|
|
+ import {socialLoginUrl} from "@/settings";
|
|
|
+ import loginApi from "@/api/Login.js";
|
|
|
+ import oauthApi from '@/api/Oauth'
|
|
|
+ import {Base64} from 'js-base64';
|
|
|
+ import productionResourcesMgrApi from "@/api/resourceProductMgr/productionResourcesMgr";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: "Login",
|
|
|
+ components: {LangSelect},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ options: [],
|
|
|
+ opValue:'',
|
|
|
+ activeName: 'first',
|
|
|
+ //是否启用多租户
|
|
|
+ isMultiTenant:
|
|
|
+ false,
|
|
|
+ isCaptcha: process.env.VUE_APP_IS_CAPTCHA === "true" ? true : false,
|
|
|
+ zoneNo: process.env.VUE_APP_ZONE_LINE,
|
|
|
+ tabActiveName: "bindLogin",
|
|
|
+ login: {
|
|
|
+ type: "up"
|
|
|
+ },
|
|
|
+ logo: [
|
|
|
+ {img: "gitee.png", name: "gitee", radius: true},
|
|
|
+ {img: "github.png", name: "github", radius: true},
|
|
|
+ {img: "tencent_cloud.png", name: "tencent_cloud", radius: true},
|
|
|
+ {img: "qq.png", name: "qq", radius: false},
|
|
|
+ {img: "dingtalk.png", name: "dingtalk", radius: true},
|
|
|
+ {img: "microsoft.png", name: "microsoft", radius: false}
|
|
|
+ ],
|
|
|
+ loginForm: {
|
|
|
+ account: "",
|
|
|
+ password: "", // zuihou
|
|
|
+ tenantView: "0000", //显示用的
|
|
|
+ tenant: "", //传递给后端的
|
|
|
+ key: randomNum(24, 16),
|
|
|
+ code: "",
|
|
|
+ grantType: process.env.VUE_APP_IS_CAPTCHA === "true" ? "captcha" : "password",
|
|
|
+ bindAccount: "",
|
|
|
+ bindPassword: "",
|
|
|
+ signAccount: "",
|
|
|
+ signPassword: "",
|
|
|
+ qcodeUser: "",
|
|
|
+ stationResourceId: "",
|
|
|
+ zoneType: process.env.VUE_APP_ZONE_LINE
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ account: {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("rules.require"),
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ tenantView: {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("rules.require"),
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ password: {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("rules.require"),
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ code: {
|
|
|
+ validator: (rule, value, callback) => {
|
|
|
+ if (this.isCaptcha && value === '') {
|
|
|
+ callback(this.$t("rules.require"))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ }, trigger: 'blur'
|
|
|
+ },
|
|
|
+ bindAccount: {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("rules.require"),
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ bindPassword: {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("rules.require"),
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ signAccount: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("rules.require"),
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 4,
|
|
|
+ max: 10,
|
|
|
+ message: this.$t("rules.range4to10"),
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ signPassword: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: this.$t("rules.require"),
|
|
|
+ trigger: "blur"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ min: 6,
|
|
|
+ max: 20,
|
|
|
+ message: this.$t("rules.range6to20"),
|
|
|
+ trigger: "blur"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ authUser: null,
|
|
|
+ loading: false,
|
|
|
+ showDialog: false,
|
|
|
+ redirect: undefined,
|
|
|
+ otherQuery: {},
|
|
|
+ imageCode: "",
|
|
|
+ page: {
|
|
|
+ width: window.screen.width * 0.5,
|
|
|
+ height: window.screen.height * 0.5
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getStations()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ db.clear();
|
|
|
+ this.getCodeImage();
|
|
|
+ this.$nextTick(
|
|
|
+ window.onload = function () { // 光标默认位置
|
|
|
+ var oInput = document.getElementById('qcodeUserInput');
|
|
|
+ oInput.focus();
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ destroyed() {
|
|
|
+ window.removeEventListener("message", this.resolveSocialLogin);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // Tabs切换-事件
|
|
|
+ handleClick(tab, event) {
|
|
|
+ // tab切换初始化focus及内容
|
|
|
+ if(tab.name === 'first'){
|
|
|
+ this.$nextTick(
|
|
|
+ window.onload = function () { // 光标默认位置
|
|
|
+ document.getElementById('qcodeUserInput').value = "";
|
|
|
+ var oInput = document.getElementById('qcodeUserInput');
|
|
|
+ oInput.focus();
|
|
|
+ }
|
|
|
+ )
|
|
|
+ }
|
|
|
+ console.log(tab, event);
|
|
|
+ },
|
|
|
+ getCodeImage() {
|
|
|
+ loginApi
|
|
|
+ .getCaptcha(this.loginForm.key)
|
|
|
+ .then(response => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.byteLength <= 100) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.systemError"),
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ "data:image/png;base64," +
|
|
|
+ btoa(
|
|
|
+ new Uint8Array(res).reduce(
|
|
|
+ (data, byte) => data + String.fromCharCode(byte),
|
|
|
+ ""
|
|
|
+ )
|
|
|
+ )
|
|
|
+ );
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.imageCode = res;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e.toString().indexOf("429") !== -1) {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.tooManyRequest"),
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.getCodeImageFailed"),
|
|
|
+ type: "error"
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleTabClick(tab) {
|
|
|
+ this.tabActiveName = tab.name;
|
|
|
+ },
|
|
|
+ resolveLogo(logo) {
|
|
|
+ return require(`@/assets/logo/${logo}`);
|
|
|
+ },
|
|
|
+ socialLogin(oauthType) {
|
|
|
+ const url = `${socialLoginUrl}/${oauthType}/login`;
|
|
|
+ window.open(
|
|
|
+ url,
|
|
|
+ "newWindow",
|
|
|
+ `resizable=yes, height=${this.page.height}, width=${this.page.width}, top=10%, left=10%, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`
|
|
|
+ );
|
|
|
+ window.addEventListener("message", this.resolveSocialLogin, false);
|
|
|
+ },
|
|
|
+ resolveSocialLogin(e) {
|
|
|
+ const data = e.data;
|
|
|
+ const that = this;
|
|
|
+ if (data.message === "not_bind") {
|
|
|
+ that.login.type = "bind";
|
|
|
+ const authUser = data.data;
|
|
|
+ that.authUser = authUser;
|
|
|
+ that
|
|
|
+ .$confirm(
|
|
|
+ that.$t("common.current") +
|
|
|
+ authUser.source +
|
|
|
+ that.$t("common.socialAccount") +
|
|
|
+ authUser.nickname +
|
|
|
+ that.$t("common.socialTips"),
|
|
|
+ that.$t("common.tips"),
|
|
|
+ {
|
|
|
+ confirmButtonText: that.$t("common.signLogin"),
|
|
|
+ cancelButtonText: that.$t("common.bindLogin"),
|
|
|
+ type: "warning"
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ that.tabActiveName = "signLogin";
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ that.tabActiveName = "bindLogin";
|
|
|
+ });
|
|
|
+ } else if (data.message === "social_login_success") {
|
|
|
+ that.saveLoginData(data.data);
|
|
|
+ that.getUserDetailInfo();
|
|
|
+ that.loginSuccessCallback(data.account);
|
|
|
+ } else {
|
|
|
+ // do nothing
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bindLogin() {
|
|
|
+ let account_c = false;
|
|
|
+ let password_c = false;
|
|
|
+ this.$refs.loginForm.validateField("bindAccount", e => {
|
|
|
+ if (!e) {
|
|
|
+ account_c = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$refs.loginForm.validateField("bindPassword", e => {
|
|
|
+ if (!e) {
|
|
|
+ password_c = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (account_c && password_c) {
|
|
|
+ this.loading = true;
|
|
|
+ const that = this;
|
|
|
+ const params = {
|
|
|
+ bindAccount: that.loginForm.bindAccount,
|
|
|
+ bindPassword: that.loginForm.bindPassword,
|
|
|
+ ...that.authUser
|
|
|
+ };
|
|
|
+ params.token = null;
|
|
|
+ that
|
|
|
+ .$post("auth/social/bind/login", params)
|
|
|
+ .then(r => {
|
|
|
+ const data = r.data.data;
|
|
|
+ this.saveLoginData(data);
|
|
|
+ this.getUserDetailInfo();
|
|
|
+ this.loginSuccessCallback(that.loginForm.bindAccount);
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error(error);
|
|
|
+ that.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ signLogin() {
|
|
|
+ let account_c = false;
|
|
|
+ let password_c = false;
|
|
|
+ this.$refs.loginForm.validateField("signAccount", e => {
|
|
|
+ if (!e) {
|
|
|
+ account_c = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.$refs.loginForm.validateField("signPassword", e => {
|
|
|
+ if (!e) {
|
|
|
+ password_c = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (account_c && password_c) {
|
|
|
+ this.loading = true;
|
|
|
+ const that = this;
|
|
|
+ const params = {
|
|
|
+ bindAccount: that.loginForm.signAccount,
|
|
|
+ bindPassword: that.loginForm.signPassword,
|
|
|
+ ...that.authUser
|
|
|
+ };
|
|
|
+ params.token = null;
|
|
|
+ that
|
|
|
+ .$post("auth/social/sign/login", params)
|
|
|
+ .then(r => {
|
|
|
+ const data = r.data.data;
|
|
|
+ this.saveLoginData(data);
|
|
|
+ this.getUserDetailInfo();
|
|
|
+ this.loginSuccessCallback(that.loginForm.signAccount);
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.error(error);
|
|
|
+ that.loading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleLogin() {
|
|
|
+ this.loginForm.tenant = `${Base64.encode(this.loginForm.tenantView)}`;
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loginSubmit();
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ loginSubmit() {
|
|
|
+ this.loading = true;
|
|
|
+ const that = this;
|
|
|
+ this.$store.commit("account/setTenant", this.loginForm.tenant);
|
|
|
+ loginApi.login(this.loginForm).then(response => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ that.saveLoginData(res.data['token'], res.data['refreshToken'], res.data['expiration']);
|
|
|
+ that.saveUserInfo(res.data);
|
|
|
+ that.getResource();
|
|
|
+ } else {
|
|
|
+ that.getCodeImage();
|
|
|
+ }
|
|
|
+ }).finally(() => that.loading = false);
|
|
|
+ },
|
|
|
+ saveLoginData(token, refreshToken, expiration) {
|
|
|
+ this.$store.commit("account/setToken", token);
|
|
|
+ this.$store.commit("account/setRefreshToken", refreshToken);
|
|
|
+ this.$store.commit("account/setExpireTime", expiration);
|
|
|
+ },
|
|
|
+ saveUserInfo(user) {
|
|
|
+ this.$store.commit("account/setUser", {
|
|
|
+ });
|
|
|
+ this.$store.commit("account/setUser", {
|
|
|
+ id: user.userId,
|
|
|
+ account: user.account,
|
|
|
+ name: user.name,
|
|
|
+ avatar: user.avatar,
|
|
|
+ expire: user.expire,
|
|
|
+ workDescribe: user.workDescribe,
|
|
|
+ roles: user.roles
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getResource() {
|
|
|
+ oauthApi.getResource().then(response => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ const permissionsList = res.data;
|
|
|
+ this.$store.commit("account/setPermissions", permissionsList ? permissionsList : []);
|
|
|
+
|
|
|
+ this.loginSuccess();
|
|
|
+ } else {
|
|
|
+ this.getCodeImage();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ loginSuccess() {
|
|
|
+ this.$message({
|
|
|
+ message: this.$t("tips.loginSuccess"),
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ this.$router.push("/");
|
|
|
+ },
|
|
|
+ loginSuccessCallback(user) {
|
|
|
+ console.log(user);
|
|
|
+ },
|
|
|
+
|
|
|
+ qcodelogin(qcodeUserValue) {
|
|
|
+ this.loading = true;
|
|
|
+ const that = this;
|
|
|
+ this.loginForm.tenant = `${Base64.encode(this.loginForm.tenantView)}`;
|
|
|
+ this.$store.commit("account/setTenant", this.loginForm.tenant);
|
|
|
+ this.loginForm.qcodeUserValue = qcodeUserValue
|
|
|
+ this.loginForm.grantType="password";
|
|
|
+ loginApi.qcodelogin(this.loginForm).then(response => {
|
|
|
+ const res = response.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ that.saveLoginData(res.data['token'], res.data['refreshToken'], res.data['expiration']);
|
|
|
+ that.saveUserInfo(res.data);
|
|
|
+ that.getResource();
|
|
|
+ } else {
|
|
|
+ that.getCodeImage();
|
|
|
+ }
|
|
|
+ }).finally(() => that.loading = false);
|
|
|
+ },
|
|
|
+
|
|
|
+ showQcodeUser(){
|
|
|
+ console.log(this.loginForm.qcodeUser.substr(this.loginForm.qcodeUser.length-1,1));
|
|
|
+ if(this.loginForm.qcodeUser.substr(this.loginForm.qcodeUser.length-1,1) == "#"){
|
|
|
+ this.qcodelogin()
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ getStations() {
|
|
|
+ productionResourcesMgrApi.getStations({}).then((res) => {
|
|
|
+ res = res.data;
|
|
|
+ if (res.isSuccess) {
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ this.options = res.data;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ selectChange(value) {
|
|
|
+ console.log(value);
|
|
|
+ this.loginForm.stationResourceId = value;
|
|
|
+ this.$nextTick(
|
|
|
+ window.onload = function () { // 光标默认位置
|
|
|
+ document.getElementById('qcodeUserInput').value = "";
|
|
|
+ var oInput = document.getElementById('qcodeUserInput');
|
|
|
+ oInput.focus();
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
+</script>
|
|
|
+<style lang="scss">
|
|
|
+ .login-form {
|
|
|
+ .el-tabs__item {
|
|
|
+ font-size: 16px;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .el-tabs__item.is-active {
|
|
|
+ color: #1890ff;
|
|
|
+ }
|
|
|
+ .el-tabs__active-bar {
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ $bg1_color: #000;
|
|
|
+ $bg1_formbg: #4F535B;
|
|
|
+
|
|
|
+ $bg2_color: #4E6BBD;
|
|
|
+ $bg2_formbg: #2F4187;
|
|
|
+
|
|
|
+ $bg3_color: #375F92;
|
|
|
+ $bg3_formbg: #406EA4;
|
|
|
+
|
|
|
+ .login-container {
|
|
|
+ /*background: url(../../assets/logo/loginBg.gif) 50% no-repeat;
|
|
|
+ background-size: cover;*/
|
|
|
+ /*background: url(../../assets/background.jpg) 50% no-repeat;*/
|
|
|
+ /*background: url(../../assets/logo/logoBg1.jpg) 50% no-repeat;*/
|
|
|
+ /*background: url(../../assets/logo/logoBg2.png) 50% no-repeat;
|
|
|
+ background-size: cover;*/
|
|
|
+ background: $bg1_color;
|
|
|
+
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ .saomaDom {
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .login-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 10%;
|
|
|
+ top: 44%;
|
|
|
+ margin-top: -100px;
|
|
|
+ color: #fff;
|
|
|
+
|
|
|
+ img{
|
|
|
+ width: 300px;
|
|
|
+ margin-right: 40px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .title:first-child{
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .sub-title {
|
|
|
+ font-size: 1.5rem;
|
|
|
+ margin: 0.3rem 0 0.7rem 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ font-size: 0.96rem;
|
|
|
+ line-height: 1.9rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-form {
|
|
|
+ position: absolute;
|
|
|
+ top: 45%;
|
|
|
+ left: 70%;
|
|
|
+ margin: -180px 0 0 -160px;
|
|
|
+ width: 320px;
|
|
|
+ height: 440px;
|
|
|
+ padding: 10px 36px 36px 36px;
|
|
|
+ background: $bg1_formbg;
|
|
|
+ border-radius: 3px;
|
|
|
+
|
|
|
+ .el-tabs__item {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .code-input {
|
|
|
+ width: 50%;
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-image {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: top;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-type {
|
|
|
+ text-align: right;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo-wrapper {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 10px 0;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 1.9rem;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0.8rem 0.8rem -0.8rem 0.8rem;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &.radius {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .login-footer {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 1rem;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ color: white;
|
|
|
+ font-size: 0.85rem;
|
|
|
+ line-height: 1rem;
|
|
|
+ height: 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ &:first-of-type {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title-container {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin: 0 auto 40px auto;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .set-language {
|
|
|
+ color: #aaa;
|
|
|
+ position: absolute;
|
|
|
+ top: 3px;
|
|
|
+ font-size: 18px;
|
|
|
+ right: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .thirdparty-button {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media only screen and (max-width: 470px) {
|
|
|
+ .thirdparty-button {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 1100px) {
|
|
|
+ .login-info {
|
|
|
+ left: 8%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media screen and (max-width: 970px) {
|
|
|
+ .login-form {
|
|
|
+ left: 50%;
|
|
|
+ }
|
|
|
+ .login-info {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|