登录页

src/views/layout/components/UserBar.vue

@@ -257,7 +257,7 @@ export default {
         case 'doLogout':
           this.$api.adminLogout().then(response => {
             this.$cookie.remove("token")
-            this.$router.push({ path: '/admin/login' })
+            this.$router.push({ path: '/login' })
             localStorage.removeItem('VUEX_STORE')
           })
           break;

src/views/login/compoments/invite/components/agreeConceal.vue

@@ -0,0 +1,41 @@
+<template>
+  <!-- 用户协议 -->
+  <div style="">
+    <div style="background: white;padding: 50px 300px;" v-html="html"></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props:['id'],
+  data() {
+    return {
+      html: '',
+      htmlPath: {
+        1:'./UserAgreement.html',
+        2:'./PrivacyPolicy.html',
+        3:'./translate.html'
+      }
+    }
+  },
+  watch: {
+    id(val) {
+      this.fetchHtmlFile(val)
+    },
+  },
+  mounted() { 
+    this.fetchHtmlFile(this.id)
+  },
+  methods: {
+    async fetchHtmlFile(id) {
+      var url = this.htmlPath[id]
+      await fetch(url).then(res =>  res.text() ).then(data => {
+        this.html = data     
+      })
+    },
+  },
+}
+</script>
+
+<style scoped></style>

src/views/login/compoments/invite/components/index.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <agreeConceal :id="id"></agreeConceal>
+  </div>
+</template>
+
+<script>
+import agreeConceal from './agreeConceal.vue';
+export default {
+  components: {
+    agreeConceal,
+  },
+  data() {
+    return {
+
+    }
+  },
+  computed: {
+    id() {
+      return this.$route.query.id
+    },
+  },
+  mounted() { },
+  methods: {
+
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/login/compoments/invite/index.vue

@@ -0,0 +1,373 @@
+<template>
+  <div>
+    <el-dialog
+      class="dialogForm"
+      title=""
+      :visible.sync="inviteVisible"
+      width="500px"
+      append-to-body
+      :close-on-click-modal="false"
+      :before-close="close"
+    >
+      <div class="content" v-if="show">
+        <div class="title">邀请码激活</div>
+        <el-form
+          :model="ruleForm"
+          :rules="rules"
+          ref="ruleForm"
+          label-width="110px"
+          label-position="top"
+        >
+          <el-form-item label="邀请码：" prop="invitation">
+            <el-input
+              v-model="ruleForm.invitation"
+              size="small"
+              placeholder="请输入邀请码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="公司名称：" prop="name">
+            <el-input
+              v-model="ruleForm.name"
+              size="small"
+              placeholder="请输入公司名称"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="联系人：" prop="contacts">
+            <el-input
+              v-model="ruleForm.contacts"
+              size="small"
+              placeholder="请输入联系人"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="联系人手机：" prop="phoneNumber">
+            <el-input
+              v-model="ruleForm.phoneNumber"
+              size="small"
+              placeholder="请输入联系人手机号码"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="联系人邮箱：" prop="email">
+            <el-input
+              v-model="ruleForm.email"
+              size="small"
+              placeholder="请输入联系人邮箱"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="联系人地址：" prop="address">
+            <el-input
+              v-model="ruleForm.address"
+              size="small"
+              placeholder="请输入联系地址"
+            ></el-input>
+          </el-form-item>
+        </el-form>
+        <p>
+          <el-checkbox v-model="choose"
+            ><span class="text"
+              >我已阅读并同意该系统的<a @click.prevent="checkConceal(1)"
+                >用户协议</a
+              >及<a @click.prevent="checkConceal(2)">隐私政策</a></span
+            ></el-checkbox
+          >
+        </p>
+        <div style="display: flex; justify-content: center; margin-top: 10px">
+          <el-button @click="close" size="small" style="width: 150px"
+            >取 消</el-button
+          >
+          <el-button
+            type="primary"
+            size="small"
+            style="width: 150px"
+            @click="submit"
+            :loading="btnLoading"
+            >激 活</el-button
+          >
+        </div>
+      </div>
+      <div v-else class="success">
+        <div class="success_title">
+            <div class="success_icon">
+                <div class="icon">
+                    <i class="el-icon-check"></i>
+                </div>
+                
+            </div>
+            <div class="foot_title">
+                <p class="foot_title1">账号激活成功，正在审核中...</p>
+                <p class="foot_title2">审核成功后将会有相关人员通知到您，请您耐心等待。</p>
+            </div>
+        </div>
+            
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+        show:true,
+      btnLoading: false,
+      inviteVisible: false,
+      // agreementVisible: false,
+      choose: false,
+      ruleForm: {},
+      rules: {
+        invitation: [
+          { required: true, message: "请输入邀请码", trigger: "blur" },
+        ],
+        name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
+        contacts: [
+          { required: true, message: "请输入联系人", trigger: "blur" },
+        ],
+        phoneNumber: [
+          { required: true, message: "请输入联系人手机号码", trigger: "blur" },
+          {
+            pattern:
+              /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/,
+            message: "请输入正确的手机号码格式",
+            trigger: "blur",
+          },
+        ],
+        email: [
+          { required: true, message: "请输入邮箱", trigger: "blur" },
+          {
+            pattern:
+              /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
+            message: "请输入正确的邮箱格式",
+            trigger: "blur",
+          },
+        ],
+      },
+      passwordRule: {
+        password: [
+          { required: true, message: "请输入管理员密码", trigger: "blur" },
+        ],
+      },
+    };
+  },
+  mounted() {},
+  methods: {
+    submit() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          if (!this.choose) {
+            this.$message.error("请先阅读并同意用户协议，才能继续注册");
+            return false;
+          }
+          this.btnLoading = true;
+          this.$api
+            .addByInvitation(this.ruleForm)
+            .then((response) => {
+            //   this.$message.success("账号注册成功");
+              // this.$emit('username',this.ruleForm.username)
+              // this.close()
+              this.$refs.ruleForm.resetFields();
+              this.show = false
+              this.btnLoading = false;
+            })
+            .catch((error) => {
+              this.btnLoading = false;
+            });
+        } else {
+          return false;
+        }
+      });
+    },
+    close() {
+      this.ruleForm = {};
+      this.inviteVisible = false;
+    },
+    checkConceal(id) {
+      const router = this.$router.resolve({
+        path: "/agreeConceal",
+        query: {
+          id: id,
+        },
+      });
+      window.open(router.href, "_blank");
+    },
+    open() {
+      this.inviteVisible = true;
+      this.show = true
+    },
+  },
+};
+</script>
+<style>
+.agreement {
+  border-radius: 10px;
+}
+.agreement .el-dialog__body {
+  padding: 0;
+}
+.dialogForm .el-form-item__error {
+  display: none;
+}
+.dialogForm .el-dialog__body {
+  padding-top: 10px;
+}
+.dialogForm .el-checkbox__input.is-checked + .el-checkbox__label {
+  color: #606266;
+}
+.content .el-form-item__label {
+  height: 30px;
+  padding: 0;
+}
+.content .el-form-item {
+  margin: 0;
+}
+</style>
+<style lang="scss" scoped>
+.success{
+    height: 521px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.success_title{
+      .success_icon{
+        width: 150px;
+        height: 150px;
+        margin: 0 auto;
+        border-radius: 50%;
+        background: #1fad25;
+        font-size: 40px;
+        position: relative;
+        .icon{
+            height: 50px;
+            width: 40px;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            margin: auto;
+            color: white;
+        }
+    }
+    .foot_title{
+       text-align: center;
+       font-size: 16px;
+       margin-top: 30px;
+        .foot_title1{
+          color: black;
+          font-weight: 800;
+          font-size:20px;
+          margin-bottom: 16px;
+        }
+    }
+}
+
+.content_body {
+  margin: 20px 0;
+}
+.content_foot {
+  display: flex;
+  justify-content: space-between;
+}
+// .item1{
+// }
+// .item2{
+// animation: show 1s;
+// }
+@keyframes show {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  }
+}
+.footer {
+  display: flex;
+  justify-content: space-around;
+  height: 50px;
+  box-shadow: 1px white;
+  border-top: 1px solid gray;
+  div {
+    cursor: pointer;
+    width: 100%;
+    text-align: center;
+    line-height: 50px;
+  }
+}
+.logo {
+  margin-right: 10px;
+  width: 135px;
+  height: 35px;
+}
+.logo-bar {
+  padding: 20px;
+}
+// .content{
+//   width: 800px;
+//   background: rgb(58, 55, 55);
+//   opacity: 0.8;
+//   padding: 20px;
+//   padding-right:30px;
+//   height: 550px;
+//   border-radius: 5px;
+//   position: absolute;
+//   left: 0;
+//   right: 0;
+//   top: 0;
+//   bottom: 0;
+//   margin: auto;
+// }
+.main {
+  z-index: 1;
+}
+.register {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+}
+.vue-particles {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    ellipse at top left,
+    rgba(105, 155, 200, 1) 0%,
+    rgba(181, 197, 216, 1) 57%
+  );
+}
+.title {
+  // color: white;
+  margin-bottom: 10px;
+  font-weight: 600;
+  font-size: 22px;
+  text-align: center;
+  letter-spacing: 4px;
+}
+p {
+  margin-top: 0px;
+  margin-bottom: 0;
+}
+
+.text {
+  font-size: 12px;
+  a {
+    font-size: 12px;
+    color: #1976d2;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+}
+</style>
+<style>
+/* .el-dialog__header {
+    padding: 0;
+}
+.el-dialog__body {
+    padding: 20px 20px 10px;
+    color: #606266;
+    font-size: 14px;
+    word-break: break-all;
+} */
+</style>

src/views/login/index.vue

@@ -1,88 +1,87 @@
 <template>
   <div class="login" v-if="show">
     <div class="login-weaper">
-      <div class="login-left">
+      <div class="login-header">
+        <div class="login-bar">
+          <img src="@/assets/logo-3.png" class="logo">
+        </div>
         <div class="login-time">{{ time.txt }}</div>
-        <div class="login-left-box">
-          <div>
-            <!-- <div class="logo">{{ getThemeConfig.globalViceTitle }}</div>
-            <h2 class="title">{{ getThemeConfig.globalViceDes }}</h2>
-            <div class="msg">
-              <div class="msg-author">
-                <span>{{ quotations.name }}</span>
-                <span>{{ quotations.comeFrom }}</span>
-              </div>
-              <div class="msg-txt">{{ quotations.content }}</div>
-            </div> -->
-            <div class="workspace-visual-about-header1">
-              <div>知识产权风控与组织记忆系统</div>
-              <div>Intellectual property risk Control and organizational memory system</div>
+      </div>
+      <div class="login-body">
+        <div class="login-content">
+          <div class="left">
+            <div class="left-header">
+              <div class="title">知识产权风控与组织记忆系统</div>
+              <div class="title2">Intellectual property risk Control and organizational memory system</div>
             </div>
-            <div class="workspace-visual-about-content1">
+            <div class="left-content">
               <p>专利制度是企业参与市场竞争特别是国际化竞争所不能绕开的，只有充分的、熟练的掌握并利用好专利制度，才能在市场竞争中游刃有余，进而取得最大化的商业利益、国家利益。</p>
               <p>知识产权分析是在专利制度的框架下，充分利用现有的产业和专利信息，运用大数据和专利分析的手段与方法进行分析、梳理、总结、判断，发现问题并给出解决问题的方案。</p>
               <p>本系统为用户提供了一种知识产权风控体系和组织记忆的操作思路和方法，通过解决企业具体问题场景的方式，为用户提供了具有可操作性的参考，并由此协助企业形成自主知识传承、叠加、不断衍化提升并且能够重复再应用的核心智谋知识系统。</p>
             </div>
           </div>
-        </div>
-      </div>
-      <div class="login-right">
-        <div class="login-main">
-          <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
-          <el-form class="el-form login-form">
-            <el-form-item prop="username" class="margin-left_0">
-              <el-input
-                  type="text"
-                  placeholder="请输入账号"
-                  prefix-icon="el-icon-user"
-                  v-model="ruleForm.username"
-                  clearable
-                  autocomplete="off"
-                  @keyup.enter.native="submitForm"
-              >
-              </el-input>
-            </el-form-item>
-            <el-form-item prop="password" class="margin-left_0">
-              <el-input
-                  type="password"
-                  placeholder="请输入密码"
-                  prefix-icon="el-icon-lock"
-                  v-model="ruleForm.password"
-                  autocomplete="off"
-                  :show-password="true"
-                  @keyup.enter.native="submitForm"
-              >
-              </el-input>
-            </el-form-item>
-            <el-form-item prop="code" class="margin-left_0">
-              <div class="el-row" span="24">
-                <div class="el-col el-col-16">
-                  <el-input
-                      type="text"
-                      maxlength="4"
-                      placeholder="请输入验证码"
-                      prefix-icon="el-icon-position"
-                      v-model="ruleForm.code"
-                      clearable
-                      autocomplete="off"
-                      @keyup.enter.native="submitForm"
-                  ></el-input>
-                </div>
-                <div class="el-col el-col-8">
-                  <div class="login-code">
-                    <img @click="getCode" class="login-code-img" style="margin-top: 0" :src="captcha" title="点击获取新的验证码">
+          <div class="right">
+            <h4 class="login-title">{{ getThemeConfig.globalTitle }}</h4>
+            <el-form class="el-form login-form">
+              <el-form-item prop="username" class="margin-left_0">
+                <el-input
+                    type="text"
+                    placeholder="请输入账号"
+                    prefix-icon="el-icon-user"
+                    v-model="ruleForm.username"
+                    clearable
+                    autocomplete="off"
+                    @keyup.enter.native="submitForm"
+                >
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="password" class="margin-left_0">
+                <el-input
+                    type="password"
+                    placeholder="请输入密码"
+                    prefix-icon="el-icon-lock"
+                    v-model="ruleForm.password"
+                    autocomplete="off"
+                    :show-password="true"
+                    @keyup.enter.native="submitForm"
+                >
+                </el-input>
+              </el-form-item>
+              <el-form-item prop="code" class="margin-left_0">
+                <div class="el-row" span="24">
+                  <div class="el-col el-col-16">
+                    <el-input
+                        type="text"
+                        maxlength="4"
+                        placeholder="请输入验证码"
+                        prefix-icon="el-icon-position"
+                        v-model="ruleForm.code"
+                        clearable
+                        autocomplete="off"
+                        @keyup.enter.native="submitForm"
+                    ></el-input>
+                  </div>
+                  <div class="el-col el-col-8">
+                    <div class="login-code">
+                      <img @click="getCode" class="login-code-img" style="margin-top: 0" :src="captcha" title="点击获取新的验证码">
+                    </div>
                   </div>
                 </div>
+              </el-form-item>
+              <el-form-item>
+                <el-button type="primary" class="login-submit" @click="submitForm" :loading="btnLoading">
+                  <span>登 录</span>
+                </el-button>
+              </el-form-item>
+            </el-form>
+            <div class="bottom-menu">
+              <div>
+                <el-link class="font" @click="resePassword">重置密码</el-link>
+              </div>
+              <div>
+                <el-link class="font" @click="inviteUser">邀请码激活</el-link>
               </div>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" class="login-submit" @click="submitForm" :loading="btnLoading">
-                <span>登 录</span>
-              </el-button>
-            </el-form-item>
-          </el-form>
-          <div class="login-menu">
-            <el-link type="primary" @click="resePassword">重置密码</el-link>
+            </div>
           </div>
         </div>
       </div>
@@ -92,6 +91,7 @@
     </div>
 
     <resePassword ref="resePassword"></resePassword>
+    <invite ref="inviteDialog" @username="handleName"></invite>
   </div>
 </template>
 
@@ -100,11 +100,13 @@ import Storage from '@/utils/storage';
 import { formatDate, formatAxis } from '@/utils/formatTime';
 
 import resePassword from './compoments/resePassword.vue'
+import invite from './compoments/invite'
 import { commonData,webSocket } from "@/views/layout/mixins";
 
 export default {
   components: {
-    resePassword
+    resePassword,
+    invite
   },
   mixins:[commonData,webSocket],
   data() {
@@ -211,6 +213,14 @@ export default {
     }
   },
   methods: {
+    //注册账号
+    inviteUser() {
+      this.$refs.inviteDialog.open()
+    },
+    // 获取注册的账号
+    handleName(val) {
+      this.$set(this.ruleForm,'username',val)
+    },
     // 重置密码
     resePassword() {
       this.$refs.resePassword.open()
@@ -261,41 +271,8 @@ export default {
 </script>
 
 <style lang="scss">
-.workspace-visual-about-header1 {
-    text-align: center;
-    div:first-child {
-      font-weight: bold;
-      font-size: 28px;
-      color: #3084e5;
-    }
-    div:last-child {
-      font-weight: 600;
-      font-size: 10px;
-      letter-spacing: 0.07em;
-      text-align: center;
-      color: #33233e;
-    }
-  }
-  .workspace-visual-about-content1 {
-    margin-top: 10px;
-    // width: 760px;
-    // height: 280px;
-    border-radius: 15px;
-    background: transparent;
-    // border: 1px solid #e5e5e5;
-    p {
-      text-indent: 2em;
-      margin: 10px;
-      // width: 719px;
-      // height: 52px;
-      font-weight: 400;
-      font-size: 15px;
-      // line-height: 30px;
-      text-align: left;
-      color: #33233e;
-    }
-  }
 .login {
+  --headerHeight:70px;
   height: 100%;
   width: 100%;
   overflow: hidden;
@@ -309,147 +286,279 @@ export default {
     height: 100%;
     background: radial-gradient(ellipse at top left, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
   }
-  .login-weaper {
-    margin: auto;
-    height: 500px;
-    display: flex;
+  .login-weaper{
+    width: 100%;
+    height: 100%;
     box-sizing: border-box;
     position: relative;
-    z-index: 1;
-    border: none;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-    .login-left {
-      width: 491px;
-      padding: 20px;
-      font-size: 16px;
-      color: #fff;
-      position: relative;
-      background-color: rgba(64, 158, 255, 0.8);
+    z-index: 99;
+    .login-header{
+      height: var(--headerHeight);
       display: flex;
-      flex-direction: column;
-      border-top-left-radius: 4px;
-      border-bottom-left-radius: 4px;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 20px;
+      .login-bar {
+        font-size: 20px;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        .logo {
+          margin-right: 10px;
+          height: calc(var(--headerHeight) - 10px);
+        }
+      }
       .login-time {
         width: 100%;
-        color: #fff;
-        opacity: 0.9;
-        font-size: 14px;
+        color: black;
+        font-family: var(--fm);
+        opacity: 1;
+        font-size: 18px;
         overflow: hidden;
+        text-align: right;
       }
-      .login-left-box {
-        flex: 1;
-        overflow: hidden;
-        position: relative;
-        z-index: 1;
+    }
+    .login-body{
+      width: 100%;
+      height: calc(100% - var(--headerHeight) - 10px);
+      background:linear-gradient(rgba(167, 189, 213,0.3), rgba(178, 186, 225,0.3));
+      display: flex;
+      .login-content{
+        opacity: 1;
+        width:auto;
+        z-index: 23;
         display: flex;
-        align-items: center;
-        padding: 80px 20px;
-        .logo {
-          font-size: 22px;
-          margin-bottom: 15px;
+        align-items: start;
+        margin:auto;
+        .left{
+          // width:100%;
+          width: 650px;
+          min-width: 650px;
+          float: right;
+          padding-right:100px;
+          flex-basis: 0;
+          flex-grow: 1;
+          .left-header{
+            text-align: center;
+            font-family: var(--fm);
+            .title{
+              font-size: 50px;
+              font-weight: bold;
+            }
+            .title2{
+              font-size: 18px;
+              font-weight: bold;
+            }
+          }
+          .left-content{
+            font-weight: 530;
+            color: black;
+            font-size: 22px;
+          }
         }
-        .title {
-          color: #fff;
-          font-weight: 300;
-          letter-spacing: 2px;
-          font-size: 16px;
+        
+        .right{
+          // width:100%;
+          width: 400px;
+            min-width: 400px;
+          float: left;
+          padding:0 100px 30px;
+          flex-basis: 0;
+          border: 2px solid var(--bg);
+          border-radius: 10px;
+          margin-top: 20px;
+          .login-title{
+            font-family: var(--fm);
+            text-align: center;
+            font-size: 24px;
+          }
+          .login-form {
+            // margin: 10px 0;
+            i {
+              color: #333;
+            }
+            .el-form-item {
+              margin-bottom: 20px !important;
+              .login-code {
+                display: flex;
+                align-items: center;
+                justify-content: space-around;
+                margin: 0 0 0 10px;
+                user-select: none;
+                .login-code-img {
+                  margin-top: 2px;
+                  width: 100px;
+                  height: 36px;
+                  border: 1px solid #dcdfe6;
+                  color: #333;
+                  font-size: 14px;
+                  font-weight: 700;
+                  letter-spacing: 5px;
+                  line-height: 38px;
+                  text-indent: 5px;
+                  text-align: center;
+                  cursor: pointer;
+                  transition: all ease 0.2s;
+                  border-radius: 4px;
+                  &:hover {
+                    border-color: #c0c4cc;
+                    transition: all ease 0.2s;
+                  }
+                }
+              }
+              .login-submit {
+                width: 100%;
+                height: 45px;
+                letter-spacing: 2px;
+                font-weight: 300;
+              }
+            }
+            .el-form-item:last-child{
+              margin-bottom: 10px !important;
+            }
+          }
+          .bottom-menu {
+            width: 100%;
+            display: flex;
+            justify-content: space-between;
+            .font{
+              font-size: 14px;
+              font-weight: bolder;
+            }
+          }
         }
-        .msg {
-          color: #fff;
-          font-size: 13px;
-          margin-top: 35px;
-          .msg-author {
-            opacity: 0.6;
-            span:last-of-type {
-              margin-left: 15px;
+        @media screen and (max-width: 5000px) {
+          .left{
+            width: 650px;
+            min-width: 650px;
+            padding-right:100px;
+            .left-header{
+              .title{
+                font-size: 50px;
+              }
+              .title2{
+                font-size: 18px;
+              }
+            }
+            .left-content{
+              font-size: 22px;
             }
           }
-          .msg-txt {
-            margin-top: 15px;
-            line-height: 22px;
+          .right{
+            width: 400px;
+            min-width: 400px;
+            padding:0 100px 30px;
           }
         }
-      }
-    }
-    .login-right {
-      width: 491px;
-      padding: 20px;
-      position: relative;
-      align-items: center;
-      display: flex;
-      background-color: rgba(255, 255, 255, 1);
-      border-top-right-radius: 4px;
-      border-bottom-right-radius: 4px;
-      .login-main {
-        margin: 0 auto;
-        width: 70%;
-        .login-title {
-          color: #333;
-          margin-bottom: 40px;
-          font-weight: 500;
-          font-size: 22px;
-          text-align: center;
-          letter-spacing: 4px;
+        @media screen and (max-width: 1400px) {
+          .left{
+            min-width: 550px;
+            width: 550px;
+            padding-right:100px;
+            .left-header{
+              .title{
+                font-size: 42px;
+              }
+              .title2{
+                font-size: 16px;
+              }
+            }
+            .left-content{
+              font-size: 20px;
+            }
+          }
+          .right{
+            min-width: 290px;
+            width: 290px;
+            padding:0 80px 30px;
+          }
         }
-        .login-form {
-          margin: 10px 0;
-          i {
-            color: #333;
+        @media screen and (max-width: 1200px) {
+          .left{
+            min-width: 450px;
+            width: 450px;
+            padding-right:80px;
+            .left-header{
+              .title{
+                font-size: 34px;
+              }
+              .title2{
+                font-size: 12px;
+              }
+            }
+            .left-content{
+              font-size: 16px;
+            }
           }
-          .el-form-item {
-            margin-bottom: 20px !important;
-            .login-code {
-              display: flex;
-              align-items: center;
-              justify-content: space-around;
-              margin: 0 0 0 10px;
-              user-select: none;
-              .login-code-img {
-                margin-top: 2px;
-                width: 100px;
-                height: 38px;
-                border: 1px solid #dcdfe6;
-                color: #333;
-                font-size: 14px;
-                font-weight: 700;
-                letter-spacing: 5px;
-                line-height: 38px;
-                text-indent: 5px;
-                text-align: center;
-                cursor: pointer;
-                transition: all ease 0.2s;
-                border-radius: 4px;
-                &:hover {
-                  border-color: #c0c4cc;
-                  transition: all ease 0.2s;
-                }
+          .right{
+            width: 290px;
+            min-width: 290px;
+            padding:0 60px 30px;
+            margin-top: 10px;
+          }
+        }
+        @media screen and (max-width: 1024px) {
+          .left{
+            min-width: 380px;
+            width: 380px;
+            padding-right:80px;
+            .left-header{
+              .title{
+                font-size: 29px;
+              }
+              .title2{
+                font-size: 12px;
               }
             }
-            .login-submit {
-              width: 100%;
-              height: 45px;
-              letter-spacing: 2px;
-              font-weight: 300;
+            .left-content{
+              font-size: 14px;
             }
           }
+          .right{
+            min-width: 270px;
+            width: 270px;
+            padding:0 60px 30px;
+            margin-top: 10px;
+          }
         }
-        .login-menu {
-          // margin-top: 30px;
-          width: 100%;
-          text-align: right;
-          el-link {
-            color: #1976d2;
-            font-size: 12px;
-            margin: 0 8px;
-            text-decoration: none;
-            &:hover {
-              color: #1e9fff;
-              text-decoration: underline;
+        @media screen and (max-width: 800px) {
+          .left{
+            min-width: 350px;
+            width: 350px;
+            padding-right: 45px;
+            padding-left: 10px;
+            .left-header{
+              .title{
+                font-size: 26px;
+              }
+              .title2{
+                font-size: 12px;
+              }
+            }
+            .left-content{
+              font-size: 12px;
+            }
+          }
+          .right{
+            width: 220px;
+            min-width: 220px;
+            padding:0 50px 30px;
+            margin-top: 10px;
+            .login-title{
+              margin: 10px 0;
+              font-size: 20px;
+            }
+            .login-form {
+              .el-form-item {
+                margin-bottom: 10px !important;
+              }
             }
+            
           }
         }
       }
     }
   }
 }
-</style>
+  </style>